@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * HEADER..............コンテンツヘッダー
 * FOOTER..............コンテンツフッター
 * MAIN................メインコンテンツ
 */





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.nmc-line { background-color: var(--neutralColor100) }
@media screen and (min-width: 768px) {
    .nmc-line {
        padding-block: 32px;
        margin-top: 30px;
        margin-bottom: 52px;
    }
}
@media screen and (max-width: 767px) {
    .nmc-line {
        padding-block: 24px;
        margin-top: 0;
        margin-bottom: 22px;
    }
}

    .nmc-form-line__text {
        width: fit-content;
        margin-inline: auto;
        color: var(--primaryColor300);
        line-height: 1.2;
        letter-spacing: 0.04em;
        text-align: center;
    }
    @media screen and (min-width: 768px) {
        .nmc-form-line__text {
            font-size: 1.8rem;
        }
    }
    @media screen and (max-width: 767px) {
        .nmc-form-line__text {
            font-size: 1.3rem;
        }
    }

        .nmc-form-line__text span {
            display: grid;
        }
        @media screen and (min-width: 768px) {
            .nmc-form-line__text span {
                grid-template-columns: 11px 1fr;
                grid-column-gap: 11px;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-form-line__text span {
                grid-template-columns: 8.5px 1fr;
                grid-column-gap: 9px;
            }
        }

            .nmc-form-line__text span::before {
                content: "";
                display: block;
                width: 100%;
                height: 1.2em;
                background-image: url(../images/common/icon-under-arrow2.svg);
                background-repeat: no-repeat;
                background-position: 50% 50%;
                background-size: contain;
            }





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
.nmc-content + .nmc-content { margin-bottom: 0 }
@media screen and (min-width: 768px) {
    .nmc-content { margin-top: 76px }
    .nmc-line + .nmc-content {
        background-image:
            linear-gradient(to top right, rgb(235 239 243 / 0) 0%, rgb(235 239 243 / 0) 50%, rgb(235 239 243) 50%, rgb(235 239 243) 100%),
            linear-gradient(to top left, rgb(235 239 243 / 0) 0%, rgb(235 239 243 / 0) 50%, rgb(235 239 243) 50%, rgb(235 239 243) 100%);
        background-repeat: no-repeat;
        background-position: 0 100%, 100% 100%;
        background-size: 50% 79px;
    }
}
@media screen and (max-width: 767px) {
    .nmc-content { margin-top: 38px }
}

    .nmc-content__title {
        width: fit-content;
        margin-inline: auto;
        color: var(--primaryColor300);
        font-weight: 500;
        text-align: center;
    }
    @media screen and (min-width: 768px) {
        .nmc-content__title {
            margin-bottom: 42px;
            font-size: 3.0rem;
            line-height: 1.4;
        }
    }
    @media screen and (max-width: 767px) {
        .nmc-content__title {
            margin-bottom: 32px;
            font-size: 2.1rem;
            line-height: 1.619;
        }
    }


    .nmc-content__main {
        border-image-slice: 0 fill;
    }
    @media screen and (min-width: 768px) {
        .nmc-content__main {
            border-image-source: linear-gradient(rgb(235 239 243 / 0) 0%, rgb(235 239 243 / 0) 117px, rgb(235 239 243) 117px, rgb(235 239 243) 100%);
            border-image-outset: 0 100vw 95px;
        }
        .nmc-content + .nmc-content .nmc-content__main {
            border-image-outset: 0 100vw 174px;
        }
    }
    @media screen and (max-width: 767px) {
        .nmc-content__main {
            position: relative;
            border-image-source: linear-gradient(rgb(235 239 243 / 0) 0%, rgb(235 239 243 / 0) 57px, rgb(235 239 243) 57px, rgb(235 239 243) 100%);
            border-image-outset: 0 100vw;
        }
        .nmc-content + .nmc-content .nmc-content__main {
            border-image-outset: 0 100vw 43px;
        }
        .nmc-line + .nmc-content .nmc-content__main::before,
        .nmc-line + .nmc-content .nmc-content__main::after {
            content: "";
            position: absolute;
            bottom: -24px;
            display: block;
            width: min(50vw, 215px);
            height: 58px;
        }
        .nmc-line + .nmc-content .nmc-content__main::before {
            right: 50%;
            background-image: linear-gradient(to right top, white 0, white 50%, rgb(235 239 243) 50%, rgb(235 239 243) 100%);
        }
        .nmc-line + .nmc-content .nmc-content__main::after {
            left: 50%;
            background-image: linear-gradient(to left top, white 0, white 50%, rgb(235 239 243) 50%, rgb(235 239 243) 100%);
        }
    }

        @media screen and (min-width: 768px) {
            .nmc-content__list {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-column-gap: 16px;
                filter: drop-shadow(2px 2px 3px rgb(32 93 127 / .18));
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-content__list {
                position: relative;
                z-index: 1;
                filter: drop-shadow(1px 1px 1.5px rgb(32 93 127 / .18));
            }
        }

            .nmc-content__item {
                max-width: 285px;
                margin-inline: auto;
                background-color: white;
            }
            @media screen and (min-width: 768px) {
                .nmc-content__item {
                    padding-top: 32px;
                    padding-inline: 18px;
                    padding-bottom: 42px;
                    clip-path: polygon( 0 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100% );
                }
            }
            @media screen and (max-width: 767px) {
                .nmc-content__item {
                    padding-top: 26px;
                    padding-inline: 23px;
                    padding-bottom: 35px;
                    clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px) );
                }
                .nmc-content__item + .nmc-content__item { margin-top: 22.5px }
            }

                .nmc-content__icon {
                    display: block;
                    margin-inline: auto;
                    margin-bottom: 18px;
                }
                @media screen and (min-width: 768px) {
                    .nmc-content__icon { width: 57px }
                }
                @media screen and (max-width: 767px) {
                    .nmc-content__icon { width: 55px }
                }

                .nmc-content__label {
                    padding-left: .04em;
                    color: #3997cb;
                    font-weight: 500;
                    letter-spacing: .04em;
                    text-align: center;
                }
                @media screen and (min-width: 768px) {
                    .nmc-content__label {
                        height: 2.333em;
                        margin-bottom: 28px;
                        font-size: 2.4rem;
                        line-height: 1.1667;
                    }
                }
                @media screen and (max-width: 767px) {
                    .nmc-content__label {
                        margin-bottom: 12px;
                        font-size: 2.0rem;
                        line-height: 1.25;
                    }
                }

                .nmc-content__image {
                    aspect-ratio: 1 / 1;
                    margin-inline: auto;
                }
                @media screen and (min-width: 768px) {
                    .nmc-content__image {
                        width: 94px;
                        margin-bottom: 36px;
                    }
                }
                @media screen and (max-width: 767px) {
                    .nmc-content__image {
                        width: 107px;
                        margin-bottom: 18px;
                    }
                }

                .nmc-content__text {}
                @media screen and (min-width: 768px) {
                    .nmc-content__text {
                        font-size: 1.8rem;
                        line-height: 1.778;
                        letter-spacing: -0.02em;
                    }
                }
                @media screen and (max-width: 767px) {
                    .nmc-content__text {
                        font-size: 1.6rem;
                        line-height: 1.625;
                        letter-spacing: .04em;
                    }
                }


    @media screen and (min-width: 768px) {
        .nmc-content__bottom {
            padding-top: 42px;
            padding-bottom: 50px;
            border-image-slice: 0 fill;
            border-image-outset: 0 100vw;
        }
    }
    @media screen and (max-width: 767px) {
        .nmc-content__bottom { padding-top: 43px }
    }

        .nmc-content__description { font-weight: 500 }
        @media screen and (min-width: 768px) {
            .nmc-content__description {
                color: #2383bc;
                font-size: 2.2rem;
                line-height: 1.455;
                letter-spacing: .02em;
                text-align: center;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-content__description {
                width: 282px;
                margin-inline: auto;
                color: #3992c6;
                font-size: 1.6rem;
                line-height: 1.75;
                letter-spacing: .04em;
            }
        }

        @media screen and (min-width: 768px) {
            .nmc-content__bottom .nmc-guidance {
                margin-top: 30px;
            }
        }














