@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * INTRODUCTION........導入テキスト
 * HEADER..............アーカイブヘッダー
 * SORT................ソートエリア
 * LIST................アーカイブリスト
 */





/*------------------------------------*\
    $INTRODUCTION
\*------------------------------------*/
@media screen and (min-width: 768px) {
    .nmc-introduction {
        margin-top: 56px;
        margin-bottom: 58px;
    }

        .nmc-introduction__text {
            display: flex;
            justify-content: center;
            column-gap: 11px;
            font-size: 1.8rem;
            line-height: 1.2;
        }

            .nmc-introduction__text::before {
                content: url(../images/common/icon-under-arrow.svg);
                width: 11px;
            }

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





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.nmc-archive-head { margin-top: 32px }
@media screen and (min-width: 768px) {
    .nmc-archive-head { filter: drop-shadow(3px 3px 4px rgb(18 40 61 / 0.18)) }
}
@media screen and (max-width: 767px) {
    .nmc-archive-head { filter: drop-shadow(1.5px 1.5px 2px rgb(32 93 127 / 0.18)) }
}

    .nmc-archive-head .nmc-section__inner { max-width: 984px }

        .nmc-archive-head__link {
            display: grid;
            background-color: white;
            overflow: hidden;
        }
        @media screen and (min-width: 768px) {
            .nmc-archive-head__link {
                grid-template-columns: 1fr 1fr;
                align-items: center;
                border-radius: 10px;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-archive-head__link {
                grid-template-columns: 100%;
                border-radius: 5px;
            }
        }

            @media screen and (min-width: 768px) {
                .nmc-archive-head__label { display: none }
            }
            @media screen and (max-width: 767px) {
                .nmc-archive-head__label {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 37px;
                    padding-left: .04em;
                    background-color: var(--primaryColor300);
                    color: white;
                    font-size: 1.6rem;
                    font-weight: 600;
                    letter-spacing: .04em;
                    text-align: center;
                }
            }

            .nmc-archive-head__content {}
            @media screen and (min-width: 768px) {
                .nmc-archive-head__content {
                    height: max-content;
                    padding-right: 10.163%;
                    padding-left: 12.195%;
                    border-left: 8.5px solid var(--primaryColor300);
                }
            }
            @media screen and (max-width: 767px) {
                .nmc-archive-head__content {
                    order: 1;
                    padding-top: 18px;
                    padding-inline: 17px;
                    padding-bottom: 30px;
                }
            }

                .nmc-archive-head__title { line-height: 1.5 }
                @media screen and (min-width: 768px) {
                    .nmc-archive-head__title {
                        display: flex;
                        justify-content: space-between;
                        column-gap: 1em;
                        margin-bottom: 30px;
                        font-size: 2.0rem;
                        font-weight: 500;
                    }

                        .nmc-archive-head__title::after {
                            content: "NEW";
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 102px;
                            height: 46px;
                            border-radius: 23px;
                            background-color: var(--secondaryColor);
                            color: white;
                            font-size: 1.85rem;
                            font-weight: 700;
                            line-height: 1;
                        }

                }
                @media screen and (max-width: 767px) {
                    .nmc-archive-head__title {
                        margin-bottom: 18px;
                        font-size: 1.5rem;
                        font-weight: 600;
                    }
                }

                .nmc-archive-head__text {
                    color: var(--primaryColor300);
                    font-weight: 500;
                }
                @media screen and (min-width: 768px) {
                    .nmc-archive-head__text {
                        font-size: 2.8rem;
                    }
                }
                @media screen and (max-width: 767px) {
                    .nmc-archive-head__text {
                        margin-left: 12px;
                        font-size: 1.9rem;
                    }
                }

                    .nmc-archive-head__text span { position: relative }

                        .nmc-archive-head__text span:first-of-type::before,
                        .nmc-archive-head__text span:last-of-type::before {
                            content: "";
                            aspect-ratio: 19 / 15;
                            position: absolute;
                            background-repeat: no-repeat;
                            background-size: contain;
                        }
                        .nmc-archive-head__text span:first-of-type::before { top: -4px }
                        .nmc-archive-head__text span:last-of-type::before { bottom: -4px }
                        .nmc-archive-head__text span:first-of-type::before { background-image: url(../images/common/icon-works-w-quote.svg) }
                        .nmc-archive-head__text span:last-of-type::before { background-image: url(../images/common/icon-works-w-quote2.svg) }
                        @media screen and (min-width: 768px) {
                            .nmc-archive-head__text span:first-of-type::before,
                            .nmc-archive-head__text span:last-of-type::before { width: 16px }
                            .nmc-archive-head__text span:first-of-type::before { left: -24px }
                            .nmc-archive-head__text span:last-of-type::before { right: -24px }
                        }
                        @media screen and (max-width: 767px) {
                            .nmc-archive-head__text span:first-of-type::before,
                            .nmc-archive-head__text span:last-of-type::before { width: 12px }
                            .nmc-archive-head__text span:first-of-type::before { left: -14px }
                            .nmc-archive-head__text span:last-of-type::before { right: -14px }
                        }


            @media screen and (max-width: 767px) {
                .nmc-archive-head__image {
                    aspect-ratio: 650 / 303.333;
                }
            }

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





/*------------------------------------*\
    $SORT
\*------------------------------------*/
.nmc-sort {}
@media screen and (min-width: 768px) {
    .nmc-sort {
        margin-top: 40px;
        margin-bottom: 44px;
    }
}
@media screen and (max-width: 767px) {
    .nmc-sort {
        margin-top: 44px;
        margin-bottom: 27px;
    }
}

    .nmc-sort .nmc-section__inner { max-width: 984px }

        .nmc-sort__title {
            font-weight: 500;
            line-height: 1.2;
            text-align: center;
        }
        @media screen and (min-width: 768px) {
            .nmc-sort__title {
                margin-bottom: 22px;
                font-size: 2.3rem;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-sort__title {
                margin-bottom: 14px;
                font-size: 2.0rem;
            }
        }

        @media screen and (min-width: 768px) {
            .nmc-sort__block {
                display: grid;
                grid-template-columns: 34px 1fr;
                grid-column-gap: 10px;
                margin-block: 11px;
            }
        }
        @media screen and (max-width: 767px) {
            .nmc-sort__block { margin-block: 21px }
        }

            .nmc-sort__label {
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 500;
                line-height: 1;
                letter-spacing: .04em;
            }
            @media screen and (min-width: 768px) {
                .nmc-sort__label {
                    height: 85px;
                    padding-inline: 10.5px;
                    border-radius: 10px;
                    background-color: white;
                    font-size: 1.3rem;
                    filter: drop-shadow(3px 3px 4px rgb(18 40 61 / 0.18));
                }
            }
            @media screen and (max-width: 767px) {
                .nmc-sort__label {
                    position: relative;
                    margin-bottom: 10px;
                    color: var(--primaryColor300);
                    font-size: 1.6rem;
                }

                    .nmc-sort__label::before {
                        content: "";
                        position: absolute;
                        top: calc(50% - 0.5px);
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background-color: var(--primaryColor300);
                    }

                    .nmc-sort__label span {
                        position: relative;
                        z-index: 1;
                        padding-inline: .5em;
                        background-color: white;
                    }

            }

            .nmc-sort__content {}

                .nmc-sort__list {
                    display: grid;
                }
                @media screen and (min-width: 768px) {
                    .nmc-sort__list {
                        grid-template-columns: repeat(auto-fit, 85px);
                        grid-gap: 10px;
                    }
                }
                @media screen and (max-width: 767px) {
                    .nmc-sort__list {
                        grid-template-columns: repeat(5, 1fr);
                        grid-gap: 7px;
                    }
                }

                    .nmc-sort__item {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        aspect-ratio: 1 / 1;
                        height: 100%;
                    }
                    @media screen and (min-width: 768px) {
                        .nmc-sort__item { filter: drop-shadow(3px 3px 4px rgb(18 40 61 / 0.18)) }
                    }
                    @media screen and (max-width: 767px) {
                        .nmc-sort__item { filter: drop-shadow(1.5px 1.5px 2px rgb(18 40 61 / 0.18)) }
                    }

                        .nmc-sort__item > input[type=checkbox] { display: none }

                        .nmc-sort__btn, .nmc-sort__btn--noimage {
                            display: block;
                            width: 100%;
                            height: 100%;
                            cursor: pointer;
                            background-color: white;
                            color: var(--primaryColor300);
                        }
                        .nmc-sort__item > input[type=checkbox]:checked + :is(.nmc-sort__btn, .nmc-sort__btn--noimage) {
                            background-color: var(--primaryColor300);
                            color: white;
                        }
                        .nmc-sort__btn--noimage {
                            height: max-content;
                            font-weight: 600;
                            line-height: 1;
                            text-align: center;
                        }
                        @media screen and (min-width: 768px) {
                            .nmc-sort__btn { border-radius: 10px }
                            .nmc-sort__btn--noimage {
                                padding-block: 11px;
                                border-radius: 18px;
                                font-size: 1.4rem;
                            }
                        }
                        @media screen and (max-width: 767px) {
                            .nmc-sort__btn { border-radius: 5px }
                            .nmc-sort__btn--noimage {
                                padding-block: 9.8px;
                                border-radius: 9px;
                                font-size: 1.24rem;
                            }
                        }

                        .nmc-sort__item__inner {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: center;
                            width: 100%;
                            height: 100%;
                            line-height: 1;
                        }
                        @media screen and (min-width: 768px) {
                            .nmc-sort__item__inner {
                                row-gap: 4px;
                                padding-top: 13px;
                                padding-bottom: 12px;
                                font-size: 1.3rem;
                            }
                        }
                        @media screen and (max-width: 767px) {
                            .nmc-sort__item__inner {
                                row-gap: 2px;
                                padding-top: 9px;
                                padding-bottom: 8px;
                                font-size: 1.0rem;
                            }
                        }

                            .nmc-sort__item__inner img {
                                aspect-ratio: 1 / 1;
                                object-fit: contain;
                            }
                            .nmc-sort__item > input[type=checkbox]:checked + label img {
                                filter: brightness(0) invert(1);
                            }
                            @media screen and (min-width: 768px) {
                                .nmc-sort__item__inner img {
                                    width: 43px;
                                    height: 43px;
                                }
                            }
                            @media screen and (max-width: 767px) {
                                .nmc-sort__item__inner img {
                                    height: calc(100% - 12px);
                                }
                            }





/*------------------------------------*\
    $LIST
\*------------------------------------*/
@media screen and (min-width: 768px) {
    .nmc-archive { margin-top: 44px }
}
@media screen and (max-width: 767px) {
    .nmc-archive { margin-top: 26px }
}

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

        .nmc-archive__list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
            grid-column-gap: 26px;
        }
        @media screen and (min-width: 768px) {
            .nmc-archive__list { grid-row-gap: 22px }
        }
        @media screen and (max-width: 767px) {
            .nmc-archive__list { grid-row-gap: 19px }
        }

            .nmc-archive__item {}
            @media screen and (min-width: 768px) {
                .nmc-archive__item { filter: drop-shadow(2px 2px 3px rgb(32 93 127 / 0.18)) }
            }
            @media screen and (max-width: 767px) {
                .nmc-archive__item { filter: drop-shadow(1px 1px 1.5px rgb(32 93 127 / 0.18)) }
            }

                .nmc-archive__link {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: 100%;
                    background-color: white;
                    overflow: hidden;
                }
                @media screen and (min-width: 768px) {
                    .nmc-archive__link {
                        border-radius: 5px;
                        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%);
                    }
                }
                @media screen and (max-width: 767px) {
                    .nmc-archive__link {
                        border-radius: 2.5px;
                        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12.5px), calc(100% - 12.5px) 100%, 0 100%);
                    }
                }

                    @media screen and (min-width: 768px) {
                        .nmc-archive__image { aspect-ratio: 310.8594 / 200.5727 }
                    }
                    @media screen and (max-width: 767px) {
                        .nmc-archive__image { aspect-ratio: 651.1354 / 381.1257 }
                    }

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

                        .nmc-archive__content {
                            display: flex;
                            flex-direction: column;
                            flex-grow: 1;
                            padding-left: 4px;
                            padding-bottom: 14px;
                        }
                        @media screen and (min-width: 768px) {
                            .nmc-archive__content {
                                row-gap: 13px;
                                padding-top: 24px;
                                padding-right: 32px;
                            }
                        }
                        @media screen and (max-width: 767px) {
                            .nmc-archive__content {
                                row-gap: 16px;
                                padding-top: 22px;
                                padding-right: 34px;
                            }
                        }

                            .nmc-archive__content__top {
                                flex-grow: 1;
                                display: grid;
                                grid-template-areas:
                                    'title category'
                                    'text text';
                                margin-left: -4px;
                                border-left: 4px solid var(--primaryColor300);
                            }
                            @media screen and (min-width: 768px) {
                                .nmc-archive__content__top {
                                    grid-template-columns: 1fr 86px;
                                    grid-row-gap: 10px;
                                    padding-left: 28px;
                                }
                            }
                            @media screen and (max-width: 767px) {
                                .nmc-archive__content__top {
                                    grid-template-columns: 1fr 90px;
                                    grid-row-gap: 12px;
                                    padding-left: 30px;
                                }
                            }

                                .nmc-archive__title {
                                    grid-area: title;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    overflow: hidden;
                                    padding-right: 1em;
                                    font-weight: 500;
                                }
                                @media screen and (min-width: 768px) {
                                    .nmc-archive__title {
                                        min-height: 2.571em;
                                        font-size: 1.4rem;
                                        line-height: 1.286;
                                    }
                                }
                                @media screen and (max-width: 767px) {
                                    .nmc-archive__title {
                                        min-height: 2.51333em;
                                        font-size: 1.5rem;
                                        line-height: 1.25667;
                                    }
                                }


                                .nmc-archive__category {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background-color: var(--primaryColor100);
                                    color: white;
                                    font-weight: 700;
                                    line-height: 1;
                                }
                                @media screen and (min-width: 768px) {
                                    .nmc-archive__category {
                                        height: 32px;
                                        border-radius: 16px;
                                        font-size: 1.2rem;
                                    }
                                }
                                @media screen and (max-width: 767px) {
                                    .nmc-archive__category {
                                        height: 34px;
                                        border-radius: 8px;
                                        font-size: 1.25rem;
                                    }
                                }


                                .nmc-archive__text {
                                    grid-area: text;
                                    color: var(--primaryColor300);
                                    font-weight: 500;
                                }
                                @media screen and (min-width: 768px) {
                                    .nmc-archive__text {
                                        font-size: 1.8rem;
                                        line-height: 1.444;
                                    }
                                }
                                @media screen and (max-width: 767px) {
                                    .nmc-archive__text {
                                        font-size: 1.9rem;
                                        line-height: 1.433;
                                    }
                                }

                                    .nmc-archive__text span { position: relative }

                                        .nmc-archive__text span:first-of-type::before,
                                        .nmc-archive__text span:last-of-type::before {
                                            content: "";
                                            aspect-ratio: 19 / 15;
                                            position: absolute;
                                            background-repeat: no-repeat;
                                            background-size: contain;
                                            width: 9px;
                                        }
                                        .nmc-archive__text span:first-of-type::before { left: -12px }
                                        .nmc-archive__text span:last-of-type::before { right: -12px }
                                        .nmc-archive__text span:first-of-type::before { background-image: url(../images/common/icon-works-w-quote.svg) }
                                        .nmc-archive__text span:last-of-type::before { background-image: url(../images/common/icon-works-w-quote2.svg) }
                                        @media screen and (min-width: 768px) {
                                            .nmc-archive__text span:first-of-type::before { top: 1px }
                                            .nmc-archive__text span:last-of-type::before { bottom: 1px }
                                        }
                                        @media screen and (max-width: 767px) {
                                            .nmc-archive__text span:first-of-type::before { top: 0px }
                                            .nmc-archive__text span:last-of-type::before { bottom: 0px }
                                        }


                            .nmc-archive__content__bottom { display: grid }
                            @media screen and (min-width: 768px) {
                                .nmc-archive__content__bottom {
                                    grid-template-columns: 1fr 58px;
                                    padding-left: 28px;
                                }
                            }
                            @media screen and (max-width: 767px) {
                                .nmc-archive__content__bottom {
                                    grid-template-columns: 1fr 60px;
                                    padding-left: 30px;
                                }
                            }

                                .nmc-archive__content__bottom::after {
                                    content: url(../images/works/icon-click.svg);
                                    aspect-ratio: 48 / 14.9;
                                    width: 100%;
                                    margin-top: 4px;
                                }

                                .nmc-archive__area-list {
                                    display: flex;
                                    flex-wrap: wrap;
                                    align-items: center;
                                }

                                    .nmc-archive__area-item {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        border: 1px solid #808080;
                                        color: #808080;
                                        font-size: 1.0rem;
                                        font-weight: 500;
                                        line-height: 1;
                                    }
                                    @media screen and (min-width: 768px) {
                                        .nmc-archive__area-item {
                                            min-width: 52px;
                                            height: 21px;
                                            border-radius: 4px;
                                        }
                                    }
                                    @media screen and (max-width: 767px) {
                                        .nmc-archive__area-item {
                                            min-width: 54px;
                                            height: 22px;
                                            border-radius: 2px;
                                        }
                                    }


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