@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * CHANGE_STYLE........導入テキスト
 * COMMON..............共通パーツ
 * RECOMMEND...........おすすめ記事
 * LIST................アーカイブリスト
 */





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

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

    .nmc-title--sub {}


.tns-controls { top: calc((100% - 140px) - ((100% - 140px) / 2)) }
.tns-controls:has( ~ .tns-ovh .nmc-archive__list--ranking) {
    top: calc(50% - 15.5px);
}
.nmc-magazine .tns-controls { top: 80px }


    .tns-controls button {
        width: 31px;
        height: 31px;
    }

        .tns-controls button::before { width: 5.5px }


.wpp-no-data {
    grid-column: 3 span;
    font-size: 1.6rem;
    line-height: 1.2;
}


.nmc-magazine .nmc-section__inner { max-width: 964px }

    @media screen and (max-width: 767px) {
        .nmc-magazine__date {
            color: #999;
            font-size: 1.2rem;
        }

        .nmc-magazine__title span { font-size: 1.6rem }

    }



@media screen and (min-width: 1024px) {
    .nmc-machine .nmc-section__inner { max-width: 800px }
}
@media screen and (max-width: 1023px) {
    .nmc-machine .nmc-section__inner { max-width: 430px }
}

    @media screen and (min-width: 1023px) {
        .nmc-machine__content-item {
            padding-left: 24px;
            background-size: 18px;
            font-size: 1.6rem;
        }

            .nmc-machine__btn {
                width: 208px;
                font-size: 1.4rem;
            }

    }




/*------------------------------------*\
    $COMMON
\*------------------------------------*/
.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;
    }
}







/*------------------------------------*\
    $RECOMMEND
\*------------------------------------*/
.nmc-recommend { padding-inline: 0 }

    .nmc-recommend .nmc-section__inner { max-width: 964px }

        .nmc-recommend__list { display: grid }
        @media screen and (min-width: 768px) {
            .nmc-recommend__list {
                grid-template-areas:
                    'column1 column1 column2 column3'
                    'column1 column1 column4 column5';
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 2.5px;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-recommend__list {
                grid-template-areas:
                    'column1 column1'
                    'column2 column3'
                    'column4 column5';
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 1.8px;
                padding-inline: 1.28px;
            }
        }

            .nmc-recommend__item {
                background-color: #f3f5f8;
            }
            .nmc-recommend__item:nth-of-type(1) { grid-area: column1 }
            .nmc-recommend__item:nth-of-type(2) { grid-area: column2 }
            .nmc-recommend__item:nth-of-type(3) { grid-area: column3 }
            .nmc-recommend__item:nth-of-type(4) { grid-area: column4 }
            .nmc-recommend__item:nth-of-type(5) { grid-area: column5 }

                .nmc-recommend__link { display: block }

                    @media screen and (min-width: 768px) {
                        .nmc-recommend__image { aspect-ratio: 242 / 146 }
                    }
                    @media screen and (max-width: 767px) {
                        .nmc-recommend__image { aspect-ratio: 370 / 226 }
                    }

                        .nmc-recommend__image img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }


                    .nmc-recommend__item:nth-of-type(1) .nmc-recommend__content { display: grid }
                    @media screen and (min-width: 768px) {
                        .nmc-recommend__content {
                            padding-block: 15px;
                            padding-inline: 12px;
                        }
                        .nmc-recommend__item:nth-of-type(1) .nmc-recommend__content {
                            padding-inline: 22px;
                            grid-template-columns: 52px 1fr;
                            grid-column-gap: 20px;
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .nmc-recommend__content {
                            padding-block: 11px;
                            padding-inline: 10px;
                        }
                        .nmc-recommend__item:nth-of-type(1) .nmc-recommend__content {
                            padding-inline: 20px;
                            grid-template-columns: 38px 1fr;
                            grid-column-gap: 12px;
                        }
                    }

                        .nmc-recommend__title {
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }
                        .nmc-recommend__item:nth-of-type(1) .nmc-recommend__title { -webkit-line-clamp: 4 }
                        @media screen and (min-width: 768px) {
                            .nmc-recommend__title {
                                height: 2.770em;
                                margin-bottom: 8px;
                                font-size: 1.2rem;
                                font-weight: 500;
                                line-height: 1.385;
                            }
                            .nmc-recommend__item:nth-of-type(1) .nmc-recommend__title {
                                height: 6.221em;
                                font-size: 1.756rem;
                                line-height: 1.555;
                            }
                        }
                        @media screen and (max-width: 767px) {
                            .nmc-recommend__title {
                                height: 3em;
                                margin-bottom: 4px;
                                font-size: 1.0rem;
                                font-weight: 700;
                                line-height: 1.5;
                            }
                            .nmc-recommend__item:nth-of-type(1) .nmc-recommend__title {
                                height: 6em;
                                font-size: 1.4rem;
                                line-height: 1.5;
                            }
                        }

                        .nmc-recommend__date {
                            font-size: 1.0rem;
                            line-height: 1;
                            letter-spacing: -0.02em;
                        }
                        @media screen and (max-width: 767px) {
                            .nmc-recommend__date {
                                position: relative;
                                transform: scale(0.8);
                                transform-origin: 0 50%;
                                color: #999;
                            }
                        }

                        .nmc-recommend__date-block {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            text-align: center;
                            grid-row-gap: 2px;
                            padding-top: 9px;
                        }

                            .nmc-recommend__date-block__month {
                                line-height: 1;
                                letter-spacing: -0.02em;
                            }
                            @media screen and (min-width: 768px) {
                                .nmc-recommend__date-block__month { font-size: 1.1rem }
                                .nmc-recommend__date-block__month span { font-size: 1.4rem }
                            }
                            @media screen and (max-width: 767px) {
                                .nmc-recommend__date-block__month { font-size: 1.1rem }
                                .nmc-recommend__date-block__month span { font-size: 1.4rem }
                            }

                            .nmc-recommend__date-block__day {
                                line-height: 1;
                                letter-spacing: -0.06em;
                            }
                            @media screen and (min-width: 768px) {
                                .nmc-recommend__date-block__day { font-size: 3.2rem }
                            }
                            @media screen and (max-width: 767px) {
                                .nmc-recommend__date-block__day { font-size: 3.0rem }
                            }

                            .nmc-recommend__date-block__year {
                                font-size: 1.4rem;
                                line-height: 1;
                                letter-spacing: -0.02em;
                            }







/*------------------------------------*\
    $LIST
\*------------------------------------*/
.nmc-archive {}
@media screen and (min-width: 768px) {
    .nmc-archive { margin-block: 48px }
}
@media screen and (max-width: 767px) {
    .nmc-archive {
        margin-top: 15px;
        margin-bottom: 22px;
    }
}

    .nmc-archive .nmc-section__inner { max-width: 964px }

        @media screen and (min-width: 768px) {
            .nmc-archive__list,
            .nmc-archive__list--ranking {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                grid-gap: 26px;
            }
            .nmc-archive__list--ranking { grid-gap: 3.86px }
        }

            .nmc-archive__item {}
            @media screen and (max-width: 767px) {
                .nmc-archive__item--non-slide + .nmc-archive__item--non-slide {
                    margin-top: 24px;
                }
            }

                .nmc-archive__link { display: block; }
                .nmc-archive__list--ranking .nmc-archive__item:is(.rank-1, .rank-3) .nmc-archive__link { background-color: var(--primaryColor300) }
                .nmc-archive__list--ranking .nmc-archive__item.rank-2 .nmc-archive__link { background-color: var(--primaryColor100) }
    
                    .nmc-archive__image {
                        aspect-ratio: 200.5964 / 100.9491;
                        overflow: hidden;
                    }
                    .nmc-archive__list--ranking .nmc-archive__image {
                        aspect-ratio: 321.776 / 195.6363;
                        border-radius: 0;
                    }
                    @media screen and (min-width: 768px) {
                        .nmc-archive__image { border-radius: 10px }
                    }
                    @media screen and (max-width: 767px) {
                        .nmc-archive__image { border-radius: 5px }
                    }

                        .nmc-archive__image img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }


                    .nmc-archive__content { display: grid }
                    .nmc-archive__list--ranking .nmc-archive__content {
                        grid-template-areas:
                            'rank title'
                            'rank date';
                        grid-template-columns: 31px 1fr;
                        grid-column-gap: 14px;
                        align-items: center;
                        color: white;
                    }
                    .nmc-archive__list--ranking .nmc-archive__content::before {
                        grid-area: rank;
                        width: 100%;
                    }
                    .nmc-archive__list--ranking .nmc-archive__item.rank-1 .nmc-archive__content::before {
                        content: url(../images/blog/icon-rank-1.svg);
                    }
                    .nmc-archive__list--ranking .nmc-archive__item.rank-2 .nmc-archive__content::before {
                        content: url(../images/blog/icon-rank-2.svg);
                    }
                    .nmc-archive__list--ranking .nmc-archive__item.rank-3 .nmc-archive__content::before {
                        content: url(../images/blog/icon-rank-3.svg);
                    }
                    @media screen and (min-width: 768px) {
                        .nmc-archive__content {
                            grid-template-columns: 37px 1fr;
                            grid-column-gap: 15px;
                            padding-block: 20px;
                            padding-left: 4px;
                        }
                        .nmc-archive__list--ranking .nmc-archive__content {
                            padding-top: 19px;
                            padding-right: 16px;
                            padding-left: 18px;
                            padding-bottom: 18px;
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .nmc-archive__content {
                            grid-template-columns: 39px 1fr;
                            grid-column-gap: 12px;
                            padding-block: 9px;
                            padding-left: 8px;
                        }
                        .nmc-archive__list--ranking .nmc-archive__content {
                            padding-top: 20px;
                            padding-inline: 18px;
                            padding-bottom: 19px;
                        }
                    }

                        .nmc-archive__date {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            text-align: center;
                            grid-row-gap: 2px;
                            padding-top: 5px;
                        }
                        .nmc-archive__list--ranking .nmc-archive__date {
                            display: block;
                            padding-top: 0;
                            font-size: 1.2rem;
                            line-height: 1;
                            letter-spacing: .02em;
                            text-align: left;
                        }

                            .nmc-archive__date__month {
                                line-height: 1;
                                letter-spacing: -0.02em;
                            }
                            @media screen and (min-width: 768px) {
                                .nmc-archive__date__month { font-size: 1.1rem }
                                .nmc-archive__date__month span { font-size: 1.4rem }
                            }
                            @media screen and (max-width: 767px) {
                                .nmc-archive__date__month { font-size: 1.1rem }
                                .nmc-archive__date__month span { font-size: 1.4rem }
                            }

                            .nmc-archive__date__day {
                                line-height: 1;
                                letter-spacing: -0.06em;
                            }
                            @media screen and (min-width: 768px) {
                                .nmc-archive__date__day { font-size: 3.2rem }
                            }
                            @media screen and (max-width: 767px) {
                                .nmc-archive__date__day { font-size: 3.0rem }
                            }

                            .nmc-archive__date__year {
                                font-size: 1.4rem;
                                line-height: 1;
                                letter-spacing: -0.02em;
                            }


                        .nmc-archive__title {
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            overflow: hidden;
                            margin-bottom: 8px;
                        }
                        @media screen and (min-width: 768px) {
                            .nmc-archive__title {
                                min-height: 4.5rem;
                                font-size: 1.6rem;
                                line-height: 1.5;
                            }
                        }
                        @media screen and (max-width: 767px) {
                            .nmc-archive__title {
                                min-height: 4.929rem;
                                font-size: 1.4rem;
                                line-height: 1.643;
                            }
                        }



    .nmc-archive__error {
        grid-column: 3 span;
        font-size: 1.6rem;
        line-height: 1.2;
    }