@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * HEADER..............コンテンツヘッダー
 * FOOTER..............コンテンツフッター
 * MAIN................メインコンテンツ
 */





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.nmc-head {
    margin-top: 0;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .nmc-head {
        margin-top: 56px;
        margin-bottom: 38px;
    }
}
@media screen and (max-width: 767px) {
    .nmc-head {
        margin-top: 32px;
        margin-bottom: 20px;
    }
}

    .nmc-head__text {
        display: flex;
        justify-content: center;
        margin-bottom: 44px;
        color: #808080;
        line-height: 1.2;
    }
    @media screen and (min-width: 768px) {
        .nmc-head__text {
            column-gap: 11px;
            margin-top: 56px;
            margin-bottom: 38px;
            font-size: 1.8rem;
        }
    }
    @media screen and (max-width: 767px) {
        .nmc-head__text {
            column-gap: 9px;
            margin-top: 32px;
            margin-bottom: 20px;
            font-size: 1.4rem;
        }
    }

        .nmc-head__text::before {
            content: "";
            height: 1.2em;
            background-color: #808080;
            -webkit-mask-image: url(../images/common/icon-under-arrow.svg);
                    mask-image: url(../images/common/icon-under-arrow.svg);
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
                    mask-position: 50% 50%;
            -webkit-mask-size: contain;
                    mask-size: contain;
        }
        @media screen and (min-width: 768px) {
            .nmc-head__text::before { width: 11px }
        }
        @media screen and (max-width: 767px) {
            .nmc-head__text::before { width: 8.5px }
        }





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
@media screen and (min-width: 768px) {
    .nmc-foot {
        margin-top: 50px;
        margin-bottom: 55px;
    }
}
@media screen and (max-width: 767px) {
    .nmc-foot {
        margin-top: 36px;
        margin-bottom: 48px;
    }
}

    .nmc-foot .nmc-section__inner {
        max-width: 868px;
        background-color: white;
    }
    @media screen and (min-width: 768px) {
        .nmc-foot .nmc-section__inner {
            padding-top: 42px;
            padding-inline: 24px;
            padding-bottom: 46px;
            border-radius: 23px;
            filter: drop-shadow(2px 2px 3px rgb(32 93 127 / 0.18))
        }
    }
    @media screen and (max-width: 767px) {
        .nmc-foot .nmc-section__inner {
            padding-top: 32px;
            padding-inline: 16px;
            padding-bottom: 36px;
            border-radius: 12px;
            filter: drop-shadow(1px 1px 1.5px rgb(32 93 127 / 0.18))
        }
    }

        .nmc-foot__title {
            position: relative;
            width: fit-content;
            padding-bottom: 0.25em;
            margin-inline: auto;
            color: var(--primaryColor300);
            font-weight: 500;
            line-height: 1.2;
        }
        @media screen and (min-width: 768px) {
            .nmc-foot__title {
                margin-bottom: 34px;
                font-size: 2.6rem;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-foot__title {
                margin-bottom: 24px;
                font-size: 2.0rem;
            }
        }

            .nmc-foot__title::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                border-radius: 1px;
                background-color: var(--primaryColor300);
            }


        .nmc-foot__content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: min(717px, 100%);
            margin-inline: auto;
        }
        @media screen and (min-width: 768px) {
            .nmc-foot__content {
                column-gap: 24px;
                row-gap: 18px;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-foot__content {
                column-gap: 12px;
                row-gap: 9px;
            }
        }

            .nmc-foot__link {
                flex-grow: 1;
                display: grid;
                grid-template-columns: 50px 1fr;
                align-items: center;
                padding-right: 2em;
                background-color: #e9edf1;
                border-radius: 99px;
                color: var(--primaryColor300);
                font-weight: 700;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            @media screen and (min-width: 768px) {
                .nmc-foot__link {
                    grid-column-gap: 20px;
                    font-size: 1.8rem;
                }
            }
            @media screen and (max-width: 767px) {
                .nmc-foot__link {
                    grid-column-gap: 10px;
                    font-size: 1.4rem;
                }
            }
    
                .nmc-foot__num {
                    aspect-ratio: 1 / 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    border-radius: 100%;
                    background-color: var(--primaryColor300);
                    color: white;
                    font-size: 1.0rem;
                    line-height: 1;
                    letter-spacing: -0.1em;
                }

                    .nmc-foot__num strong {
                        font-size: 2.412em;
                        font-weight: 400;
                    }






/*------------------------------------*\
    $MAIN
\*------------------------------------*/
.nmc-single { margin-top: 0 }

    .nmc-single .nmc-section__inner { max-width: 870px }

        .nmc-single__title {
            display: grid;
            justify-content: center;
            align-items: center;
            width: fit-content;
            margin-inline: auto;
            margin-bottom: 24px;
            border-image-source: linear-gradient(var(--neutralColor100), var(--neutralColor100));
            border-image-slice: 0 fill;
            border-image-outset: 0 100vw;
            color: var(--primaryColor300);
            font-weight: 500;
            line-height: 1.2;
        }
        @media screen and (min-width: 768px) {
            .nmc-single__title {
                grid-template-columns: 84px 1fr;
                grid-column-gap: 32px;
                font-size: 2.5rem;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-single__title {
                grid-template-columns: 64px 1fr;
                grid-column-gap: 24px;
                font-size: 1.8rem;
            }
        }

            .nmc-single__title__num {
                aspect-ratio: 1 / 1;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
                background-color: var(--primaryColor300);
                color: white;
                line-height: 1;
                letter-spacing: -0.1em;
            }
            @media screen and (min-width: 768px) {
                .nmc-single__title__num { font-size: 1.7rem }
            }
            @media screen and (max-width: 767px) {
                .nmc-single__title__num { font-size: 1.0rem }
            }

                .nmc-single__title__num strong {
                    font-size: 2.412em;
                    font-weight: 400;
                }


        .nmc-single__image { margin-bottom: 18px }

            .nmc-single__image img {
                width: 100%;
                height: auto;
            }


        .nmc-single__arrows {
            display: grid;
            grid-template-areas: 'prev next';
            justify-content: space-between;
            align-items: center;
        }

            .nmc-single__arrow { line-height: 1.2 }
            .nmc-single__arrow.is-prev { grid-area: prev }
            .nmc-single__arrow.is-next { grid-area: next }
            @media screen and (min-width: 768px) {
                .nmc-single__arrow {
                    font-size: 1.6rem;
                }
            }
            @media screen and (max-width: 767px) {
                .nmc-single__arrow {
                    font-size: 1.2rem;
                }
            }

                @media screen and (max-width: 767px) {
                    .nmc-single__arrow span { display: none }
                }