@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * CHANGE_STYLE........スタイル変更
 * SEARCH..............検索
 */





/*------------------------------------*\
    $CHANGE_STYLE
\*------------------------------------*/
.nmc-title { display: block }

    @media screen and (min-width: 768px) {
        .nmc-title__body { font-size: 2.9rem }
    }


@media screen and (min-width: 768px) {
    .nmc-section.nmc-magazine { padding-inline: 0 }
}
@media screen and (max-width: 767px) {
    .nmc-section.nmc-magazine { padding-inline: 14px }
}

    @media screen and (min-width: 768px) {
        .nmc-magazine__inner {
            margin-top: -13px;
            margin-inline: -9px;
        }
    }
    @media screen and (max-width: 767px) {
        .nmc-magazine__inner {
            margin-top: -19px;
            margin-inline: -16px;
        }
    }

        @media screen and (min-width: 768px) {
            .nmc-magazine__inner .nmc-magazine__list { grid-gap: 0 }
            .nmc-magazine__inner .tns-ovh { overflow: visible }
        }
        @media screen and (min-width: 960px) {
            .nmc-magazine__inner .nmc-magazine__list { grid-template-columns: repeat(3, 1fr) }
        }
        @media screen and (min-width: 1024px) {
            .nmc-magazine__inner .nmc-magazine__list { grid-template-columns: repeat(4, 1fr) }
        }
        @media screen and (min-width: 1280px) {
            .nmc-magazine__inner .nmc-magazine__list { grid-template-columns: repeat(5, 1fr) }
        }

        .nmc-magazine__inner .tns-controls { width: calc(100% - 8px) }

            .nmc-magazine__item { position: relative }
            @media screen and (min-width: 768px) {
                .nmc-magazine__inner .nmc-magazine__item {
                    padding-top: 13px;
                    padding-inline: 9px;
                }
            }
            @media screen and (max-width: 767px) {
                .nmc-magazine__inner .nmc-magazine__item {
                    padding-top: 19px;
                    padding-inline: 16px;
                }
            }

                .nmc-magazine__link { position: relative }

                    .nmc-magazine__item .nmc-magazine__link::before {
                        content: "";
                        aspect-ratio: 1 / 1;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                    .nmc-magazine__item:is(.rank-1, .rank-2, .rank-3) .nmc-magazine__link::before {
                        background-repeat: no-repeat;
                        background-position: 0 0;
                        background-size: contain;
                    }
                    .nmc-magazine__item.rank-1 .nmc-magazine__link::before { background-image: url(../images/blog/icon-rank-1.svg) }
                    .nmc-magazine__item.rank-2 .nmc-magazine__link::before { background-image: url(../images/blog/icon-rank-2.svg) }
                    .nmc-magazine__item.rank-3 .nmc-magazine__link::before { background-image: url(../images/blog/icon-rank-3.svg) }
                    .nmc-magazine__item:is(.rank-4, .rank-5) .nmc-magazine__link::before {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 100%;
                        background-color: #70b3cc;
                        color: white;
                        font-weight: 700;
                        line-height: 1;
                    }
                    .nmc-magazine__item.rank-4 .nmc-magazine__link::before { content: "4" }
                    .nmc-magazine__item.rank-5 .nmc-magazine__link::before { content: "5" }
                    @media screen and (min-width: 768px) {
                        .nmc-magazine__item .nmc-magazine__link::before {
                            top: -13px;
                            left: -9px;
                        }
                        .nmc-magazine__item:is(.rank-1, .rank-2, .rank-3) .nmc-magazine__link::before { width: 29px }
                        .nmc-magazine__item:is(.rank-4, .rank-5) .nmc-magazine__link::before {
                            width: 22px;
                            padding-top: 2px;
                            font-size: 1.2rem;
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .nmc-magazine__item .nmc-magazine__link::before {
                            top: -19px;
                            left: -16px;
                        }
                        .nmc-magazine__item:is(.rank-1, .rank-2, .rank-3) .nmc-magazine__link::before { width: 48px }
                        .nmc-magazine__item:is(.rank-4, .rank-5) .nmc-magazine__link::before {
                            width: 36px;
                            padding-top: 2px;
                            font-size: 2.0rem;
                        }
                    }


.nmc-works {}
@media screen and (min-width: 768px) {
    .nmc-works {
        margin-top: 48px;
        margin-bottom: 70px;
    }
}
@media screen and (max-width: 767px) {
    .nmc-works {
        margin-top: 40px;
        margin-bottom: 43px;
    }
}



@media screen and (min-width: 768px) {
    .nmc-magazine__btn { display: none }
}
@media screen and (max-width: 767px) {
    .nmc-magazine__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        width: 303px;
        height: 48px;
        padding-left: 1em;
        margin-top: 25px;
        margin-inline: auto;
        border: 1.5px solid var(--primaryColor200);
        border-radius: 99px;
        background-color: white;
        color: var(--primaryColor200);
        font-size: 1.9rem;
        font-weight: 600;
        line-height: 1;
    }
}

    .nmc-magazine__btn::after {
        content: url(../images/common/icon-more.svg);
        width: 21px;
    }








/*------------------------------------*\
    $SEARCH
\*------------------------------------*/
@media screen and (min-width: 768px) {
    .nmc-single-search { margin-block: 30px }

        .nmc-single-search .nmc-section__inner { max-width: 1000px }

            .nmc-single-search__form {
                display: grid;
                grid-template-columns: 1fr 250px;
                column-gap: 22px;
            }

                .nmc-single-search__category {
                    display: grid;
                    grid-template-columns: 154px 1fr;
                    column-gap: 18px;
                }

                    .nmc-single-search__category__label {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        min-height: 67px;
                        border-radius: 5px;
                        background-color: var(--neutralColor100);
                        color: #1180aa;
                        font-size: 1.9rem;
                        font-weight: 700;
                    }

                    .nmc-single-search__category__content {}

                        .nmc-single-search__category__list {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 6px;
                        }

                            .nmc-single-search__category__item {}

                                .nmc-single-search__category__link {
                                    display: block;
                                    height: 31px;
                                    padding-inline: 13px;
                                    border: 1px solid var(--neutralColor100);
                                    border-radius: 5px;
                                    color: #1180aa;
                                    font-size: 1.5rem;
                                    font-weight: 500;
                                    line-height: calc(29 / 15);
                                }


                .nmc-single-search__input {
                    position: relative;
                    height: fit-content;
                }

                    .nmc-single-search__input input {
                        width: 100%;
                        height: 50px;
                        padding-right: 48px;
                        padding-left: 38px;
                        background-color: #f2f2f2;
                        border-radius: 25px;
                        font-size: 1.5rem;
                        font-weight: 500;
                    }
                    .nmc-single-search__input input::placeholder { color: #999 }

                    .nmc-single-search__input__btn {
                        position: absolute;
                        top: calc(50% - 9px);
                        right: 22px;
                        display: block;
                        width: 18px;
                        height: 18px;
                        background-image: url(../images/blog/icon-search.svg);
                        background-repeat: no-repeat;
                        background-position: 50% 50%;
                        background-size: contain;
                    }

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





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
.nmc-single-body {}
@media screen and (min-width: 768px) {
    .nmc-single-body { filter: drop-shadow(3px 3px 4px rgb(14 33 61 / 0.18)) }
}
@media screen and (max-width: 767px) {
    .nmc-single-body { padding-inline: 0 }
}

    .nmc-single-body .nmc-section__inner {
        max-width: 1000px;
        background-color: white;
    }

        .nmc-single-body__head {}

            .nmc-single-body__title {
                background-color: #1180aa;
                color: white;
            }
            @media screen and (min-width: 768px) {
                .nmc-single-body__title {
                    padding-block: 40px;
                    padding-inline: 30px;
                }
            }
            @media screen and (max-width: 767px) {
                .nmc-single-body__title {
                    padding-block: 20px;
                    padding-inline: 12px;
                }
            }

                @media screen and (min-width: 768px) {
                    .nmc-single-body__title p { display: none }
                }
                @media screen and (max-width: 767px) {
                    .nmc-single-body__title p {
                        margin-bottom: 8px;
                        font-size: 1.0rem;
                        line-height: 1.2;
                        letter-spacing: -0.02em;
                    }
                }

                .nmc-single-body__title h1 {
                    font-weight: 700;
                    letter-spacing: .04em;
                }
                @media screen and (min-width: 768px) {
                    .nmc-single-body__title h1 {
                        font-size: 3.0rem;
                        line-height: 1.5333;
                    }
                }
                @media screen and (max-width: 767px) {
                    .nmc-single-body__title h1 {
                        font-size: 1.6rem;
                        line-height: 1.5;
                    }
                }


            .nmc-single-body__image img { width: 100% }


        @media screen and (min-width: 768px) {
            .nmc-single-body__main {
                padding-top: 36px;
                padding-inline: 32px;
                padding-top: 54px;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-single-body__main {
                padding-top: 22px;
                padding-inline: 16px;
                padding-top: 28px;
            }
        }



.nmc-content-title {
    color: var(--primaryColor200);
    line-height: 1.2;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .nmc-content-title {
        padding-block: 15.8px;
        margin-bottom: 26px;
        border-radius: 5px;
        background-color: var(--neutralColor100);
        font-size: 2.7rem;
        font-weight: 500;
    }
}
@media screen and (max-width: 767px) {
    .nmc-content-title {
        padding-block: 18px;
        padding-inline: var(--sideSpace);
        margin-bottom: 15px;
        border-image-source: linear-gradient(var(--neutralColor100), var(--neutralColor100));
        border-image-slice: 0 fill;
        border-image-outset: 0 100vw;
        font-size: 2.0rem;
        font-weight: 700;
    }
}




/* 目次 */
.nmc-toc {
    max-width: 934px;
    margin-inline: auto;
    background-color: var(--neutralColor100);
    -webkit-font-feature-settings: initial;
}
@media screen and (min-width: 768px) {
    .nmc-toc {
        padding-top: 34px;
        padding-inline: 32px;
        padding-bottom: 50px;
        margin-bottom: 36px;
        border-radius: 5px;
    }
}
@media screen and (max-width: 767px) {
    .nmc-toc {
        padding-top: 21px;
        padding-inline: 18px;
        padding-bottom: 26px;
        margin-bottom: 42px;
        border-radius: 2.5px;
    }
}

    .nmc-toc__title {
        display: grid;
        color: #1180aa;
        font-weight: 700;
        letter-spacing: -0.02em;
    }
    @media screen and (min-width: 768px) {
        .nmc-toc__title {
            grid-template-columns: 30px 1fr;
            grid-column-gap: 8px;
            margin-bottom: 14px;
            font-size: 2.2rem;
            line-height: 1.364;
        }
    }
    @media screen and (max-width: 767px) {
        .nmc-toc__title {
            grid-template-columns: 26px 1fr;
            grid-column-gap: 7px;
            margin-bottom: 11px;
            font-size: 1.9rem;
            line-height: 1.368;
        }
    }

        .nmc-toc__title::before {
            content: "";
            aspect-ratio: 1 / 1;
            width: 100%;
            background-image: url(../images/blog/icon-toc.svg);
            background-repeat: no-repeat;
            background-size: contain;
        }


    .nmc-toc__list { list-style: decimal }
    @media screen and (min-width: 768px) {
        .nmc-toc__list { padding-left: 68px }
    }
    @media screen and (max-width: 767px) {
        .nmc-toc__list { padding-left: 19px }
    }

        .nmc-toc__item { line-height: 1.667 }
        @media screen and (min-width: 768px) {
            .nmc-toc__item { font-size: 2.4rem }
            .nmc-toc__item + .nmc-toc__item { margin-top: 7px }
        }
        @media screen and (max-width: 767px) {
            .nmc-toc__item { font-size: 1.6rem }
            .nmc-toc__item + .nmc-toc__item { margin-top: 14px }
        }

            .nmc-toc__link {
                position: relative;
                width: fit-content;
                display: block;
            }

                .nmc-toc__link::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    border-radius: 1.5px;
                    background-color: white;
                }
                @media screen and (min-width: 768px) {
                    .nmc-toc__link::before {
                        left: -30px;
                        width: calc(100% + 30px);
                        height: 3px;
                    }
                }
                @media screen and (max-width: 767px) {
                    .nmc-toc__link::before {
                        left: 0;
                        width: 100%;
                        height: 2px;
                    }
                }


            .nmc-toc__list--child {}
            @media screen and (min-width: 768px) {
                .nmc-toc__list--child { margin-top: 12px }
            }
            @media screen and (max-width: 767px) {
                .nmc-toc__list--child { margin-top: 10px }
            }

                .nmc-toc__item--child { line-height: 1.364 }
                @media screen and (min-width: 768px) {
                    .nmc-toc__item--child { font-size: 2.2rem }
                }
                @media screen and (max-width: 767px) {
                    .nmc-toc__item--child { font-size: 1.5rem }
                }

                    .nmc-toc__link--child { color: #1180aa }