@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * CHANGE_STYLE........スタイル変更
 * ARCHIVE.............一覧
 * ARTICLE.............詳細
 */





/*------------------------------------*\
    $CHANGE_STYLE
\*------------------------------------*/
.main-visual__wrapper { height: min(480px, 56.25vw) }





/*------------------------------------*\
    $ARCHIVE
\*------------------------------------*/
.archive {}

    .archive__category {
        display: flex;
        justify-content: flex-end;
        margin-bottom: clamp(32px, calc(100vw * (32 / 375)), 48px);
    }

        .archive__category select {
            padding-right: 37px;
            padding-left: 12px;
            background-color: white;
            background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64"><polygon fill="%2358524B" points="64,8.4 32,55.6 0,8.4" /></svg>');
            background-repeat: no-repeat;
            background-position: calc(100% - 11px) 50%;
            background-size: 14px;
            font-family: var(--fontEn);
            color: var(--fontSubBlack);
            font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 1.8rem);
            font-weight: 600;
            line-height: calc(40 / 18);
        }


    .archive__list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
        grid-gap: clamp(24px, calc(100vw * (24 / 375)), 64px);
        margin-bottom: clamp(96px, calc(100vw * (96 / 375)), 144px);
    }

        .archive__item {}

            .archive__link {
                display: block;
                background-color: rgb(var(--background5RGB) / 0.4);
                color: white;
                transition:
                    background-color .3s var(--easeOutQuart),
                    color .3s var(--easeOutQuart);
            }
            .archive__link:hover {
                background-color: white;
                color: var(--fontSubBrown);
            }

                .archive__image { aspect-ratio: 320 / 224 }

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


                .archive__details {
                    padding-top: 20px;
                    padding-bottom: 24px;
                    padding-inline: 20px;
                }

                    .archive__date {
                        margin-bottom: 10px;
                        font-family: var(--fontEn);
                        font-size: 1.4rem;
                        font-weight: 600;
                        line-height: 1;
                        letter-spacing: .1em;
                    }
                    .archive__date span {
                        display: inline-block;
                        margin-left: 10px;
                        color: var(--primaryColor);
                        font-size: 1.2rem;
                        letter-spacing: .2em;
                        transition: color .3s var(--easeOutQuart);
                    }
                    .archive__date span::before { content: "-" }
                    .archive__link:hover .archive__date span { color: var(--secondaryColor) }

                    .archive__tittle {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        font-size: 1.4rem;
                        font-weight: 400;
                        line-height: calc(22 / 14);
                        letter-spacing: .05em;
                    }


    .archive__pagination {
        display: flex;
        justify-content: center;
        column-gap: clamp(16px, calc(100vw * (16 / 375)), 32px);
    }

        .archive__pagination__arrow { position: relative }

            .archive__pagination__arrow__link {
                display: flex;
                align-items: center;
                height: 100%;
                font-family: var(--fontEn);
                font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.0rem);
                font-weight: 600;
                letter-spacing: .2em;
                transition: color .15s var(--easeOutQuart);
            }
            .archive__pagination__arrow__link:hover { color: var(--primaryColor) }
            .archive__pagination__arrow.is-prev .archive__pagination__arrow__link::before,
            .archive__pagination__arrow.is-next .archive__pagination__arrow__link::after {
                content: "";
                display: block;
                width: 40px;
                height: 100%;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                background-size: 17px;
            }
            .archive__pagination__arrow.is-prev .archive__pagination__arrow__link::before {
                background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64"><polygon fill="%2325C6FC" points="45.7,0 48.5,2.7 20.9,32 48.5,61.3 45.7,64 15.5,32" /></svg>');
            }
            .archive__pagination__arrow.is-next .archive__pagination__arrow__link::after {
                background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64"><polygon fill="%2325C6FC" points="18.3,64 15.5,61.3 43.1,32 15.5,2.7 18.3,0 48.5,32" /></svg>');
            }
            @media screen and (max-width: 767px) {
                .archive__pagination__arrow__link {
                    text-indent: -9999px;
                }
            }


        .archive__pagination__list {
            display: flex;
            align-items: center;
            column-gap: clamp(8px, calc(100vw * (8 / 375)), 12px);
        }

            .archive__pagination__item {
                font-family: var(--fontEn);
                font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.0rem);
                font-weight: 600;
                line-height: 1.8;
            }
            .archive__pagination__item.is-empty {
                width: min(calc(100vw * (18 / 375)), 1.8em);
                height: 2px;
                background-color: white;
            }

                .archive__pagination__number {
                    display: block;
                    width: 1.8em;
                    border-radius: 10px;
                    background-color: var(--primaryColor);
                    color: var(--primaryVariant);
                    text-align: center;
                    transition:
                        background-color .15s var(--easeOutQuart),
                        color .15s var(--easeOutQuart);
                }
                span.archive__pagination__number,
                .archive__pagination__number:hover {
                    background-color: white;
                    color: var(--fontSubBlack);
                }





/*------------------------------------*\
    $ARTICLE
\*------------------------------------*/
.article {}

    .article__body {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
        grid-column-gap: clamp(24px, calc(100vw * (24 / 375)), 64px);
        grid-row-gap: 48px;
        margin-bottom: clamp(96px, calc(100vw * (96 / 375)), 130px);
    }

        .article__image img { width: 100% }

        .article__details {}

            .article__title {
                margin-top: calc(-1em * (4 / 36));
                margin-bottom: 12px;
                font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 3.6rem);
                font-weight: 600;
                line-height: calc(44 / 36);
                letter-spacing: .2em;
            }

            .article__date {
                margin-bottom: 36px;
                font-size: clamp(1.2rem, calc(100vw * (12 / 375)), 1.4rem);
                font-weight: 600;
                line-height: 1;
                letter-spacing: .1em;
            }

            .article__block { margin-bottom: clamp(64px, calc(100vw * (64 / 375)), 80px);}

                .article__caption {
                    margin-bottom: 44px;
                    color: var(--primaryColor);
                    font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 1.8rem);
                    font-weight: 700;
                    line-height: calc(30 / 18);
                    letter-spacing: .05em;
                }


    .article__nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: min(680px, 100%);
        padding-top: 8px;
        margin-inline: auto;
        border-top: 1px solid var(--background6);
    }

        .article__nav__button {
            display: flex;
            justify-content: center;
        }

            .article__nav__link {
                display: flex;
                align-items: center;
                height: 100%;
                color: var(--background6);
                font-family: var(--fontEn);
                font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.0rem);
                font-weight: 600;
                line-height: 1.8;
                letter-spacing: .2em;
                transition: color .15s var(--easeOutQuart);
            }
            .article__nav__button.is-prev .article__nav__link { padding-right: 2.2em }
            .article__nav__button.is-next .article__nav__link { padding-left: 2.2em }
            .article__nav__link:hover { color: var(--primaryColor) }
            .article__nav__button.is-prev .article__nav__link::before,
            .article__nav__button.is-next .article__nav__link::after {
                content: "";
                display: block;
                width: 40px;
                height: 100%;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                background-size: 17px;
            }
            .article__nav__button.is-prev .article__nav__link::before {
                background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64"><polygon fill="%23dcd8d5" points="45.7,0 48.5,2.7 20.9,32 48.5,61.3 45.7,64 15.5,32" /></svg>');
            }
            .article__nav__button.is-prev .article__nav__link:hover::before {
                background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64"><polygon fill="%2325c6fc" points="45.7,0 48.5,2.7 20.9,32 48.5,61.3 45.7,64 15.5,32" /></svg>');
            }
            .article__nav__button.is-next .article__nav__link::after {
                background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64"><polygon fill="%23dcd8d5" points="18.3,64 15.5,61.3 43.1,32 15.5,2.7 18.3,0 48.5,32" /></svg>');
            }
            .article__nav__button.is-next .article__nav__link:hover::after {
                background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64"><polygon fill="%2325c6fc" points="18.3,64 15.5,61.3 43.1,32 15.5,2.7 18.3,0 48.5,32" /></svg>');
            }