@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * MAIN_VISUAL.........メイン画像
 * CONCEPT.............コンセプト
 * TCS.................東京クリエイティブサロン
 * SCHEDULE............スケジュール
 * FASHIONART..........ファッションアート
 * RUNWAY..............渋谷ランウェイ
 * SUBSIDY_PLANNING....補助金企画
 * INFORMATION.........設備情報
 * SPECIAL.............試写会&トークセッション
 * LOOK................ルックブック
 */





/*------------------------------------*\
    $MAIN_VISUAL
\*------------------------------------*/
.main-visual {
    aspect-ratio: 16 / 9;
    position: relative;
    display: grid;
    /* height: 100vh;
    height: 100dvh; */
}

    /* .main-visual picture {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .main-visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    } */

    .main-visual__video,
    .main-visual__image,
    .main-visual__slider {
        aspect-ratio: 16 / 9;
        grid-area: 1 / 1;
        width: 100%;
        overflow: hidden;
        background-color: white;
    }
    .main-visual__image,
    .main-visual__slider {
        z-index: 1;
        background-color: white;
        opacity: 0;
    }
    .main-visual__image,
    .main-visual__slider.is-active {
        animation-name: kvImage;
        animation-duration: 1.5s;
        animation-timing-function: var(--easeOutQuart);
        animation-fill-mode: both;
    }
    .main-visual__image { animation-delay: 15.5s }
    .main-visual__slider {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

        .main-visual__video .video-js {
            aspect-ratio: 16 / 9;
            display: block;
            width: 100%;
            height: 100%;
        }

        .main-visual__slider__content {
            aspect-ratio: 16 / 9;
            width: 100%;
        }


@keyframes kvImage {
    from { opacity: 0 }
    to { opacity: 1 }
}





/*------------------------------------*\
    $CONCEPT
\*------------------------------------*/
/**
 * ^title
 */
.concept__title {
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-family: var(--fontEnB);
    background-image: linear-gradient(45deg, black 0%, var(--primaryColor) 92%);
    background-size: 400% 200%;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(0 0 0 / 0.9);
    opacity: 0;
}
.concept__title :is(strong, span) {
    display: block;
    line-height: 1;
}
.concept__title span {
    font-size: max(1.4rem, 0.25em);
}
.concept__title.active {
    animation-name: conceptTextFadeIn, conceptTextGradient;
    animation-duration: .5s, 10s;
    animation-delay: 0.25s, 0s;
    animation-timing-function: var(--easeOutQuart), var(--linear);
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both;
}
.concept__text + .concept__title { margin-top: 32px }
@media screen and (orientation: landscape) {
    .concept__title {
        padding-top: 30px;
        padding-bottom: 30px;
        margin-bottom: 60px;
        font-size: 8rem;
    }
    .concept__title strong:first-letter { font-size: 10rem }
}
@media screen and (orientation: portrait) {
    .concept__title {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 20px;
        font-size: 3rem;
    }
    .concept__title strong:first-letter { font-size: 4rem }
}

    .concept__title__inner {
        display: block;
        line-height: 1;
        letter-spacing: .06em;
    }
    @media screen and (orientation: landscape) {
        .concept__title { font-size: 8rem }
    }
    @media screen and (orientation: portrait) {
        .concept__title { font-size: 3rem }
    }



/**
 * ^text
 */
.concept__text {
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
}
@media screen and (orientation: landscape) {
    .concept__text { font-size: 2.0rem }
}
@media screen and (orientation: portrait) {
    .concept__text { font-size: 1.1rem }
}

    .concept__text > span {
        display: block;
        background-image: linear-gradient(45deg, black 0%, var(--primaryColor) 92%);
        background-size: 400% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgb(0 0 0 / 0.95);
        opacity: 0;
    }
    .concept__text.active > span {
        animation-name: conceptTextFadeIn, conceptTextGradient;
        animation-duration: .5s, 10s;
        animation-delay: 0.25s, 0s;
        animation-timing-function: var(--easeOutQuart), var(--linear);
        animation-iteration-count: 1, infinite;
        animation-fill-mode: both;
    }
    .concept__text.active > span:nth-of-type(2)  { animation-delay: 0.55s }
    .concept__text.active > span:nth-of-type(3)  { animation-delay: 0.60s }
    .concept__text.active > span:nth-of-type(4)  { animation-delay: 0.65s }
    .concept__text.active > span:nth-of-type(5)  { animation-delay: 0.70s }
    .concept__text.active > span:nth-of-type(6)  { animation-delay: 0.75s }
    .concept__text.active > span:nth-of-type(7)  { animation-delay: 0.80s }
    .concept__text.active > span:nth-of-type(8)  { animation-delay: 0.85s }
    .concept__text.active > span:nth-of-type(9)  { animation-delay: 0.90s }
    .concept__text.active > span:nth-of-type(10) { animation-delay: 0.95s }
    .concept__text span.lang-en { font-family: var(--fontEnB) }
    .concept__text strong { font-size: 1.5em }
    @media screen and (orientation: landscape) {
        .concept__text > span { padding-block: .75em }
    }
    @media screen and (orientation: portrait) {
        .concept__text > span { padding-block: .5em }
    }

@keyframes conceptTextFadeIn {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes conceptTextGradient {
    0%, 100% { background-position: 0 0 }
    25% { background-position: 100% 0 }
    50% { background-position: 100% 100% }
    75% { background-position: 0 100% }
}





/*------------------------------------*\
    $TCS
\*------------------------------------*/
.tcs-text {
    font-family: var(--fontEnB);
    font-weight: 700;
}


.column-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    grid-column-gap: clamp(24px, 5%, 48px);
    grid-row-gap: 32px;
    width: min(100%, 1000px);
    margin-inline: auto;
}
@media screen and (orientation: landscape) {
    .column-layout { padding-inline: clamp(10px, 2%, 20px) }
}

    .column-layout__block {
        padding: 6%;
        background-color: var(--bgGrayColor);
    }

        .column-layout__title {
            margin-bottom: 0.5em;
            font-family: var(--fontEnB);
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: .1em;
        }
        @media screen and (orientation: landscape) {
            .column-layout__title {
                font-size: 2.4rem;
            }
        }
        @media screen and (orientation: portrait) {
            .column-layout__title {
                font-size: 2.0rem;
            }
        }

        .column-layout__description {
            margin-bottom: 12px;
            font-size: 1.4rem;
            line-height: calc(24 / 14);
            letter-spacing: .1em;
        }

            .column-layout__description strong {
                color: var(--primaryColor);
                font-family: var(--fontEnB);
                font-size: 1.6rem;
                font-weight: 700;
            }


        .column-layout__inner {
            display: flex;
            column-gap: 12px;
        }
        .column-layout__inner + .column-layout__inner { margin-top: 20px }

            .column-layout__label {
                height: 100%;
                padding-inline: 1em;
                border: 2px solid black;
                font-family: var(--fontEnB);
                font-size: 1.4rem;
                font-weight: 700;
                line-height: calc(20 / 14);
                white-space: nowrap;
            }

            .column-layout__content {
                font-size: 1.4rem;
                line-height: calc(24 / 14);
            }






/*------------------------------------*\
    $SCHEDULE
\*------------------------------------*/
.schedule {
    width: min(1000px, 100%);
    margin-inline: auto;
}

    @media screen and (orientation: landscape) {
        .schedule__list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-column-gap: 2%;
            grid-row-gap: 20px;
        }
    }

        .schedule__item { background-color: white }
        @media screen and (orientation: portrait) {
            .schedule__item { margin-bottom: 20px }
        }

            /*a*/.schedule__link {
                display: block;
                height: 100%;
                transition:
                    background-color .3s var(--easeOutQuart),
                    color .3s var(--easeOutQuart);
            }
            a.schedule__link:hover {
                background-color: black;
                color: white;
            }
            :is(.bg-border, .bg-black) .schedule__link { color: black }
            :is(.bg-border, .bg-black) .schedule__link:hover { background-color: rgb(255 255 255 / 0.5) }

                /*dl*/.schedule__box {
                    padding-block: 7.5%;
                    padding-inline: 9.375%;
                }

                    /*dt*/.schedule__title {
                        padding-bottom: 0.25em;
                        padding-left: 0.1em;
                        margin-bottom: 1em;
                        border-bottom: 2px solid black;
                        font-family: var(--fontEnB);
                        font-size: clamp(1.2rem, calc(100vw * (12 / 375)) , 1.6rem);
                        font-weight: 700;
                        line-height: 1.2;
                        letter-spacing: 0.1em;
                        text-align: center;
                        transition: border-color .3s var(--easeOutQuart);
                    }
                    a.schedule__link:hover .schedule__title { border-color: white }
                    /* .schedule__title span {
                        font-family: var(--fontEnR);
                        font-size: clamp(1.0rem, calc(100vw * (10 / 375)), 1.2rem);
                        font-weight: 400;
                        line-height: 1;
                    } */

                    /*dd*/.schedule__content {
                        font-size: 1.2rem;
                        line-height: 1.5;
                        letter-spacing: 0.1em;
                    }
                    .schedule__content .short-text {
                        display: block;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }





/*------------------------------------*\
    $FASHIONART
\*------------------------------------*/
.art-section + .art-section { margin-top: 80px }



.art-gallery { margin-block: 64px }

    @media screen and (orientation: landscape) {
        .art-gallery__list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-column-gap: max(24px, calc(100% * (48 / 1728)));
            grid-row-gap: 57px;
        }
    }

        .art-gallery__item {
            position: relative;
            background-color: #222222;
        }
        .art-gallery__item::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            display: block;
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            margin: auto;
            border: 1px solid var(--primaryColor);
            pointer-events: none;
        }
        @media screen and (orientation: portrait) {
            .art-gallery__item + .art-gallery__item { margin-top: 32px }
        }

            .art-gallery__number {
                aspect-ratio: 1 / 1;
                position: absolute;
                top: 0;
                left: 4%;
                transform: translateY(-50%);
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 1.6em;
                border-radius: 100%;
                background-color: var(--primaryColor);
                font-size: clamp(3.2rem, calc(100vw * (32 / 375)), 4.0rem);
            }

                .art-gallery__content {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                    .art-gallery__image {
                        aspect-ratio: 544 / 224;
                        width: 100%;
                        overflow: hidden;
                    }

                        .art-gallery__image img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            transition: transform .15s var(--easeOutQuart);
                        }
                        @media screen and (orientation: landscape) {
                            .art-gallery__content:hover .art-gallery__image img {
                                transform: scale(1.1);
                            }
                        }



                    .art-gallery__details {
                        position: relative;
                        padding: 9.75%;
                    }

                        .art-gallery__profile {
                            aspect-ratio: 160 / 128;
                            position: absolute;
                            top: 0;
                            right: 9.7%;
                            width: 30%;
                            margin-top: -20%;
                            border: 2px solid var(--primaryColor);
                            border-radius: 8px;
                            background-color: #222222;
                            overflow: hidden;
                        }

                            .art-gallery__profile img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: 50% 0;
                            }


                        .art-gallery__title {
                            margin-bottom: 1.5em;
                            font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 2.4rem);
                            line-height: 1.25;
                            letter-spacing: .05em;
                        }


                    .art-gallery__table {}

                        .art-gallery__table__column {
                            display: flex;
                            flex-wrap: wrap;
                            row-gap: 8px;
                        }
                        .art-gallery__table__column + .art-gallery__table__column { margin-top: 10px }

                            .art-gallery__table__label {
                                width: 112px;
                                height: 100%;
                                margin-right: 1em;
                                border-radius: 99px;
                                background-color: var(--primaryColor);
                                color: black;
                                font-family: var(--fontEnM);
                                font-size: 1.4rem;
                                font-weight: 500;
                                line-height: calc(24 / 14);
                                letter-spacing: .05em;
                                text-align: center;
                            }

                            .art-gallery__table__text {
                                flex-grow: 1;
                                width: 1px;
                                min-width: 60%;
                                font-size: 1.4rem;
                                line-height: calc(24 / 14);
                            }


    .art-gallery .dialog {
        background-image: repeating-linear-gradient(black 0px, black 8px, #222 8px, #222 12px);
        background-position: 0 50%;
    }





/*------------------------------------*\
    $RUNWAY
\*------------------------------------*/
/* .runway :is(.content-title, .content-text) { color: var(--primaryColor) } */
.runway .content-title::before { background-color: var(--primaryColor) }

.profile {
    width: min(100%, 1000px);
    padding-inline: 0 !important;
    margin-inline: auto;
}

    .profile :is(.content-title, .content-text) { color: white }

    @media screen and (orientation: landscape) {
        .profile__inner {
            display: flex;
            padding-inline: 6%;
        }
        .profile__inner:nth-of-type(even) { flex-direction: row-reverse }
    }
    @media screen and (orientation: portrait) {
        .profile__inner { position: relative }
    }

        .profile__add {
            max-width: 165px;
            margin-block: clamp(24px, calc(100vw * (24 / 375)), 24px);
        }
        @media screen and (orientation: portrait) {
            .profile__add { 
                max-width: 315px;
                margin-inline: auto;
            }
        }

            .profile__add img {
                background-color: white;
                margin-bottom: 12px;
            }


        @media screen and (orientation: landscape) {
            .profile__image { width: clamp(240px, calc(100% * (340 / 880)), 340px) }
        }
        @media screen and (orientation: portrait) {
            .profile__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 112px;
                height: 158px;
            }
        }

            @media screen and (orientation: landscape) {
                .profile__details {
                    flex-grow: 1;
                    width: 1px;
                    padding-left: calc(100% * (60 / 880));
                }
            }

                .profile__head { margin-bottom: 24px }
                @media screen and (orientation: landscape) {
                    .profile__head {
                        padding-top: calc(100% * (30 / 880));
                    }
                }
                @media screen and (orientation: portrait) {
                    .profile__head {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        min-height: 158px;
                        padding-left: 128px;
                    }
                }

                    .profile__name {
                        font-weight: 700;
                        line-height: 1;
                        letter-spacing: .1em;
                        white-space: nowrap;
                    }
                    .profile__name span {
                        display: block;
                        font-size: 0.5em;
                        font-weight: 600;
                    }
                    @media screen and (orientation: landscape) {
                        .profile__name {
                            display: flex;
                            align-items: flex-end;
                            flex-wrap: wrap;
                            column-gap: 1em;
                            font-size: 2.4rem;
                        }
                    }
                    @media screen and (orientation: portrait) {
                        .profile__name { font-size: 2.0rem }
                        .profile__name span { margin-top: 0.5em }
                    }

                    .profile__job {
                        margin-bottom: 0.5em;
                        font-family: var(--fontEnB);
                        font-weight: 600;
                        line-height: 2;
                        letter-spacing: .1em;
                        opacity: .5;
                        white-space: nowrap;
                    }
                    @media screen and (orientation: landscape) {
                        .profile__job { font-size: 1.2rem }
                    }
                    @media screen and (orientation: portrait) {
                        .profile__job { font-size: 1.0rem }
                    }

                .profile__text {
                    line-height: 2;
                    letter-spacing: .1em;
                }
                @media screen and (orientation: landscape) {
                    .profile__text { font-size: 1.4rem }
                }
                @media screen and (orientation: portrait) {
                    .profile__text { font-size: 1.2rem }
                }

                    .profile__text a { transition: color .15s var(--easeOutQuart) }
                    .profile__text a:hover { color: var(--primaryColor) }
                    @media screen and (orientation: portrait) {
                        .profile__text a { text-decoration: underline }
                    }


.movie {
    width: min(100%, 1000px);
    margin-top: 48px;
    margin-bottom: 64px;
    margin-inline: auto;
}

    @media screen and (orientation: landscape) {
        .movie__inner { padding-inline: 6% }
    }

    .movie iframe {
        aspect-ratio: 16 / 9;
        width: 100%;
    }


.exhibition {
    max-width: 1000px;
    margin-inline: auto;
    padding-block: 32px;
    padding-inline: clamp(12px, calc(100vw * (12 / 375)), 24px);
    border: 6px solid black;
}

    .exhibition .external-link { margin-inline: auto }







/*------------------------------------*\
    $SUBSIDY_PLANNING
\*------------------------------------*/
.subsidy-planning {
    width: min(1000px, 100%);
    margin-inline: auto;
}

    /*ul*/.subsidy-planning__list {}

        /*li*/.subsidy-planning__item {
            position: relative;
            width: 100%;
        }
        @media screen and (orientation: landscape) {
            .subsidy-planning__item { margin-bottom: 4% }
        }
        @media screen and (orientation: portrait) {
            .subsidy-planning__item {
                margin-bottom: 30px;
                overflow: hidden;
                z-index: 1;
            }
        }

            .subsidy-planning__image {
                position: absolute;
                top: 0;
            }
            .subsidy-planning__item:nth-of-type(odd) .subsidy-planning__image::before,
            .subsidy-planning__item:nth-of-type(odd) .subsidy-planning__image { left: 0 }
            .subsidy-planning__item:nth-of-type(even) .subsidy-planning__image::before,
            .subsidy-planning__item:nth-of-type(even) .subsidy-planning__image { right: 0 }
            @media screen and (orientation: landscape) {
                .subsidy-planning__image {
                    width: calc(100% / 3);
                    z-index: 1;
                }
                .subsidy-planning__image::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    width: calc(100% + 30px);
                    height: calc(100% + 30px);
                    background-color: white;
                    z-index: -1;
                }
                .bg-black .subsidy-planning__image::before { background-color: black }
                .bg-gray .subsidy-planning__image::before { background-color: var(--bgGrayColor) }
                .bg-green .subsidy-planning__image::before { background-color: var(--primaryColor) }
                .bg-pink .subsidy-planning__image::before { background-color: var(--bgPinkColor) }
            }
            @media screen and (orientation: portrait) {
                .subsidy-planning__image {
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                }
                .subsidy-planning__image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: 50% 50%;
                    filter: blur(3.333px);
                    opacity: 0.5;
                }
            }

            @media screen and (orientation: landscape) {
                .subsidy-planning__content { padding-top: 3% }
                .subsidy-planning__item:nth-of-type(odd) .subsidy-planning__content { margin-left: 6% }
                .subsidy-planning__item:nth-of-type(even) .subsidy-planning__content { margin-right: 6% }
            }

                .bg-black .subsidy-planning__frame { border-color: white }
                @media screen and (orientation: landscape) {
                    .subsidy-planning__frame {
                        padding-top: calc(100% * (30 / 940));
                        padding-inline: calc(100% * (60 / 940));
                        padding-bottom: calc(100% * (60 / 940));
                        border: 3px solid black;
                    }
                    .subsidy-planning__item:nth-of-type(odd) .subsidy-planning__content:not(:first-of-type) .subsidy-planning__frame { padding-left: calc(((100% * (1000 / 940)) / 3) - (100% * (30 / 940)) + 30px) }
                    .subsidy-planning__item:nth-of-type(even) .subsidy-planning__content:not(:first-of-type) .subsidy-planning__frame { padding-right: calc(((100% * (1000 / 940)) / 3) - (100% * (30 / 940)) + 30px) }
                }
                @media screen and (orientation: portrait) {
                    .subsidy-planning__frame {
                        padding-top: 20px;
                        padding-inline: 15px;
                        padding-bottom: 30px;
                        border: 2px solid black;
                        text-shadow: 0 0 10px rgb(255 255 255 / 0.5);
                    }
                }

                    .subsidy-planning__name {
                        font-size: clamp(1.0rem, calc(100vw * (10 / 375)), 1.2rem);
                        font-weight: 700;
                        letter-spacing: .1em;
                    }
                    @media screen and (orientation: landscape) {
                        .subsidy-planning__name { line-height: 2 }
                    }
                    @media screen and (orientation: portrait) {
                        .subsidy-planning__name { line-height: 1.5 }
                    }

                    .subsidy-planning__caption {
                        margin-bottom: 20px;
                        font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 2.4rem);
                        font-weight: 700;
                        line-height: 1.5;
                        letter-spacing: .1em;
                    }
                    @media screen and (orientation: landscape) {
                        .subsidy-planning__caption {
                            padding-top: .25em;
                            padding-bottom: .25em;
                        }
                    }
                    @media screen and (orientation: portrait) {
                        .subsidy-planning__caption { font-size: 1.4rem }
                    }

                    .subsidy-planning__description {
                        padding-bottom: 20px;
                        margin-bottom: 20px;
                        border-bottom: 1px solid black;
                        font-size: clamp(1.2rem, calc(100vw * (12 / 375)), 1.4rem);
                        font-size: 1.4rem;
                        line-height: 1.5;
                        letter-spacing: .1em;
                    }
                    .bg-black .subsidy-planning__description { border-bottom-color: white }

                    .subsidy-planning__details {
                        font-size: clamp(1.0rem, calc(100vw * (10 / 375)), 1.2rem);
                        line-height: 1.5;
                        letter-spacing: .1em;
                    }

                        .subsidy-planning__details a { text-decoration: underline }


.event {
    max-width: 1284px;
    margin-top: 128px;
    margin-inline: auto;
    background-image: url(../images/logo-grayscale.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}
@media screen and (orientation: landscape) {
    .event { padding-inline: calc(100% * (98 / 1284)) }
}
@media screen and (orientation: portrait) {
    .event {
        margin-inline: -4vw;
        padding-inline: 4vw;
    }
}

    .event__block + .event__block { margin-top: 80px }

        .event__list {
            display: grid;
        }
        @media screen and (orientation: landscape) {
            .event__list {
                grid-template-columns: repeat(3, 1fr);
                grid-column-gap: calc(100% * (64 / 1088));
                grid-row-gap: 64px;
            }
        }
        @media screen and (orientation: portrait) {
            .event__list {
                grid-template-columns: repeat(2, calc(50% - 6px));
                grid-column-gap: 12px;
                grid-row-gap: 24px;
            }
        }

            .event__item {
                color: white;
                width: 100%;
            }

                .event__button {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: 100%;
                    background-color: #111111;
                    transition: background-color .3s var(--easeOutQuart);
                }
                .event__button:hover { background-color: var(--primaryColor) }

                    .event__image {
                        position: relative;
                        aspect-ratio: 1 / 1;
                        width: 100%;
                        overflow: hidden;
                    }
                    .event__image img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform .3s var(--easeOutQuart);
                    }
                    .event__button:hover .event__image img { transform: scale(1.1) }

                        .event__image span {
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            display: block;
                            padding: 1em;
                            font-size: 1.0rem;
                            line-height: 1.25;
                            text-align: right;
                            white-space: nowrap;
                        }


                    .event__content {
                        display: flex;
                        flex-direction: column;
                        flex-grow: 1;
                        padding-top: 18px;
                        padding-inline: max(12px, 7.5%);
                        padding-bottom: 23px;
                    }
                    @media screen and (orientation: landscape) {
                        .event__content {}
                    }
                    @media screen and (orientation: portrait) {
                        .event__content {}
                    }

                        .event__title {
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            margin-bottom: 11px;
                            line-height: 1.4;
                            letter-spacing: .05em;
                        }
                        @media screen and (orientation: landscape) {
                            .event__title {
                                -webkit-line-clamp: 3;
                                height: 4.2em;
                                font-size: 2.0rem;
                            }
                        }
                        @media screen and (orientation: portrait) {
                            .event__title {
                                -webkit-line-clamp: 2;
                                height: 2.8em;
                                font-size: 1.6rem;
                            }
                        }

                        .event__text {
                            padding-left: 12px;
                            border-left: 1px solid #fdf9be;
                            color: #fdf9be;
                            line-height: calc(22 / 14);
                            letter-spacing: .05em;
                        }
                        .event__text span {
                            position: relative;
                            transform: translateY(-4px);
                            display: block;
                        }
                        @media screen and (orientation: landscape) {
                            .event__text {
                                flex-grow: 1;
                                min-height: 60px;
                                font-size: 1.4rem;
                            }
                        }
                        @media screen and (orientation: portrait) {
                            .event__text {
                                flex-grow: 1;
                                font-size: 1.2rem;
                            }
                        }


    .event .dialog {
        background-image: url(../images/logo-grayscale.svg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }





/*------------------------------------*\
    $INFORMATION
\*------------------------------------*/
.accordion__list {
    position: relative;
    width: min(1340px, 100%);
    margin-right: auto;
    margin-left: auto;
    transition: height .6s var(--easeOutQuart);
}
@media screen and (orientation: landscape) {
    .accordion__list { width: min(1340px, 100%) }
}
@media screen and (orientation: portrait) {
    .accordion__list { width: min(1340px, 100%) }
}

    @media screen and (orientation: landscape) {
        .accordion__item {
            position: absolute;
            width: min(calc((100% - min(80px, 6%)) / 3), 420px);
            transition:
                top .3s var(--easeOutQuart),
                left .3s var(--easeOutQuart);
        }
        .accordion__item.active { z-index: 10 }
        .accordion__item:nth-of-type(3n + 1) { left: 0 }
        .accordion__item:nth-of-type(3n + 2) {
            left: 50%;
            transform: translateX(-50%);
        }
        .accordion__item:nth-of-type(3n) {
            left: 100%;
            transform: translateX(-100%);
        }
        .accordion__item:nth-of-type(n + 4) { top: calc(min(calc((100vw - 88px) * 0.9375), 1340px) * (463.25 / 1340)) }
        .accordion__item:nth-of-type(n + 7) { top: calc(min(calc((100vw - 88px) * 0.9375), 1340px) * (926.5 / 1340)) }
        .accordion__item:nth-of-type(n + 10) { top: calc(min(calc((100vw - 88px) * 0.9375), 1340px) * (1389.75 / 1340)) }
    }
    @media screen and (orientation: portrait) {
        .accordion__item { margin-bottom: 10px }
    }

        .accordion__container {
            position: relative;
            background-color: white;
        }

            @media screen and (orientation: landscape) {
                .accordion__image {
                    position: relative;
                    height: min(
                        calc(((min(calc((100vw - 88px) * 0.9375), 1340px) - min(80px, calc((100vw - 88px) * 0.9375 * 0.06))) / 3) * 0.5625),
                        236.25px
                    );
                    overflow: hidden;
                    transition: height .6s var(--linear);
                }
                    .accordion__image img { width: 100% }
            }

            .accordion__content { position: relative }
            @media screen and (orientation: landscape) {
                .accordion__content {
                    padding-top: 20px;
                    padding-inline: 10px;
                }
            }
            @media screen and (orientation: portrait) {
                .accordion__content {
                    height: 0px;
                    padding-inline: 15px;
                    overflow: hidden;
                    transition: height .3s var(--linear);
                }
            }

                .accordion__text {
                    position: relative;
                    font-size: 1.4rem;
                    line-height: 2;
                }
                @media screen and (orientation: landscape) {
                    .accordion__text { margin-bottom: 10px }
                }
                @media screen and (orientation: portrait) {
                    .accordion__text {
                        padding-top: 15px;
                        margin-bottom: 6px;
                    }
                }

                    .accordion__title {
                        font-weight: 700;
                        letter-spacing: .1em;
                    }
                    @media screen and (orientation: landscape) {
                        .accordion__title { transition: margin-bottom .3s var(--easeOutQuart) }
                        .accordion__item.active .accordion__title { margin-bottom: 2em }
                        .accordion__item:not(.active) .accordion__title {
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                        }
                    }
                    @media screen and (orientation: portrait) {
                        .accordion__title { margin-bottom: 2em }
                    }

                    .accordion__description { letter-spacing: .1em }
                    @media screen and (orientation: landscape) {
                        .accordion__description {
                            height: 4em;
                            overflow: hidden;
                            transition: height .6s var(--easeOutQuart);
                        }
                    }
                    @media screen and (orientation: portrait) {
                        .accordion__description span {
                            font-size: 1.2rem;
                            letter-spacing: .1em;
                        }
                    }
                        .accordion__description a {
                            display: inline-block;
                            max-width: 100%;
                            color: var(--primaryColor);
                            font-family: var(--fontEnM);
                            font-weight: 500;
                            text-decoration: underline var(--primaryColor);
                        }
                        .accordion__description a:hover { text-decoration: none }


                .accordion__option { color: var(--fontGrayColor) }

                    .accordion__name {
                        font-size: 1.2rem;
                        line-height: 2;
                        letter-spacing: .1em;
                    }

                    .accordion__btn__area {
                        position: relative;
                        margin-top: 1px;
                        margin-right: -10px;
                        margin-left: -10px;
                        transition: background-color .3s var(--easeOutQuart);
                    }
                    .accordion__item:not(.active) .accordion__btn__area:hover { background-color: var(--primaryColor) }

                        .accordion__btn__area::before {
                            content: "";
                            position: absolute;
                            bottom: 100%;
                            left: 10px;
                            width: calc(100% - 20px);
                            height: 1px;
                            background-color: var(--fontGrayColor);
                        }
                        .accordion__item:not(.active) .accordion__btn__area:hover::before { opacity: 0 }

                        .accordion__btn {
                            position: relative;
                            display: block;
                            width: 100%;
                            padding: 10px;
                            font-size: 1.4rem;
                            font-family: var(--fontEnM);
                            line-height: 2;
                            letter-spacing: .1em;
                            text-align: right;
                            transition: color .3s .15s var(--easeOutQuart);
                        }
                        .accordion__item.active .accordion__btn {
                            color: transparent;
                            transition-delay: 0s;
                        }
                        .accordion__item:not(.active) .accordion__btn:hover {
                            color: #fff;
                            transition-delay: 0s;
                        }

                            .accordion__btn::before {
                                content: "";
                                position: absolute;
                                top: 50%;
                                right: 10px;
                                transform: translateY(-50%);
                                width: 2em;
                                height: 2em;
                                background-color: #fff;
                                border: 1px solid var(--fontGrayColor);
                                border-radius: 100%;
                                opacity: 0;
                                transition: opacity .3s var(--easeOutQuart);
                            }
                            .accordion__btn::after {
                                content: "";
                                position: absolute;
                                top: calc(50% - 3px);
                                right: calc(1em + 4px);
                                transform: rotate(45deg);
                                width: 12px;
                                height: 12px;
                                border-top: 2px solid var(--fontGrayColor);
                                border-left: 2px solid var(--fontGrayColor);
                                opacity: 0;
                                transition: opacity .3s var(--easeOutQuart);
                            }
                            .accordion__item.active .accordion__btn::before,
                            .accordion__item.active .accordion__btn::after {
                                opacity: 1;
                                transition-delay: .15s;
                            }





/*------------------------------------*\
    $SPECIAL
\*------------------------------------*/
.special .content-title,
.special .content-text { color: var(--primaryColor) }

.special .content-title {
    font-size: clamp(1.8rem, calc(100vw * (18 / 375)), 3.4rem);
    line-height: calc(50 / 34);
    white-space: normal;
}
.special .content-title::before { background-color: var(--primaryColor) }
@media screen and (orientation: portrait) {
    .special .content-title { padding-inline: 4vw }
}


.special__list {
    width: min(1000px, 100%);
    margin-inline: auto;
}

    .special__item {
        margin-top: clamp(9px, calc(100vw * (9 / 375)), 16px);
        margin-bottom: clamp(40px, calc(100vw * (40 / 375)), 77px);
    }

        /*dl*/.special__box {
            border: 10px solid var(--primaryColor);
            padding-inline: min(4vw, 30px);
            padding-bottom: min(4vw, 30px);
        }

            /*dt*/.special__title {
                width: fit-content;
                padding-right: calc(1em * (19 / 34));
                padding-left: calc(1em * (22 / 34));
                margin-top: calc(-1em * (26 / 34));
                margin-inline: auto;
                margin-bottom: 8px;
                background-color: white;
                color: var(--primaryColor);
                font-family: var(--fontEnB);
                font-size: clamp(1.8rem, calc(100vw * (18 / 375)), 3.4rem);
                font-weight: 600;
                line-height: calc(40 / 34);
                letter-spacing: 0.1em;
                text-align: center;
            }

            /*dd*/.special__content {
                font-family: var(--fontEnM);
                font-size: 1.4rem;
                font-weight: 500;
                line-height: 2;
                letter-spacing: 0.1em;
            }
            .special__content:first-child { padding-top: min(4vw, 30px) }

                .special__text:not(:last-child) { margin-bottom: clamp(20px, calc(100vw * (20 / 375)), 34px) }
                .special__text a {
                    display: inline-block;
                    max-width: 100%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
                @media screen and (orientation: landscape) {
                    .special__text a { transition: color .15s var(--easeOutQuart) }
                    .special__text a:hover {
                        color: var(--primaryColor);
                        text-decoration: underline;
                    }
                }
                @media screen and (orientation: portrait) {
                    .special__text a { text-decoration: underline }
                }

                .special__image {
                    width: fit-content;
                    margin-inline: auto;
                }





/*------------------------------------*\
    $LOOK_BOOK
\*------------------------------------*/
.look { margin-bottom: 32px }
@media screen and (orientation: landscape) {
    .look {
        width: min(100%, 1320px);
        margin-inline: auto;
    }
}

    .look :is(.content-title, .content-text) { color: white }
    @media screen and (orientation: landscape) {
        .look .content-text { padding-inline: 0 !important }
    }

    .look__list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        @media screen and (orientation: landscape) {
            .look__item { width: calc(100% / 6) }
        }
        @media screen and (orientation: portrait) {
            .look__item { width: calc(100% / 3) }
        }

            .look__item figcaption { display: none }

            .look__trigger { display: block }


/**
 * Popup
 */
.look-book {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity .6s var(--linear);
}
.look-book.active {
    opacity: 1;
    pointer-events: visible;
    transition-delay: .3s;
}

    .look-book__shadow {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        background-color: rgba(0, 0, 0, 0.75);
    }


    .look-book__content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    @media screen and (orientation: landscape) {
        .look-book__content {
            height: 100vh;
            height: 100svh;
        }
    }
    @media screen and (orientation: portrait) {
        .look-book__content { width: 100% }
    }

        .look-book__container { position: relative }

            /**
             * ^list
             */
            .look-book__list { display: grid }

                .look-book__item {
                    grid-area: 1/-1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    opacity: 0;
                    transition: opacity .6s var(--linear);
                }
                .look-book__item.active { opacity: 1 }
                @media screen and (orientation: landscape) {
                    .look-book__item {
                        height: 100vh;
                        height: 100dvh;
                    }
                }
                @media screen and (orientation: portrait) {
                    .look-book__item { width: 100% }
                }

                    .look-book__item figure {
                        padding: 32px;
                        pointer-events: visible;
                    }
                    @media screen and (orientation: landscape) {
                        .look-book__item figure {
                            display: flex;
                            justify-content: center;
                            column-gap: 12px;
                        }
                    }

                        @media screen and (orientation: landscape) {
                            .look-book__item img { height: 100% }
                        }

                        .look-book__item figcaption {
                            display: block;
                            width: 100%;
                            padding: 1em;
                            background-color: rgb(0 0 0 / 0.5);
                            color: white;
                            font-size: 1.2rem;
                            line-height: 2;
                            text-overflow: ellipsis;
                            pointer-events: visible;
                            overflow: hidden;
                        }
                        @media screen and (orientation: landscape) {
                            .look-book__item figcaption { min-width: 180px }
                        }

                            .look-book__item figcaption a {
                                min-width: 180px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                transition: color .3s var(--easeOutQuart);
                                cursor: pointer;
                            }
                            .look-book__item figcaption a:hover { color: var(--primaryColor) }


                /**
                 * ^button
                 */
                .look-book__button {
                    position: fixed;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 10vw;
                    height: 30vh;
                }
                .look-book__button.btn-prev { right: 100% }
                .look-book__button.btn-next { left: 100% }

                    .look-book__button::before,
                    .look-book__button::after {
                        content: "";
                        position: absolute;
                        background-color: white;
                        width: 1px;
                        height: 60%;
                        transition: background-color .3s var(--easeOutQuart);
                    }
                    .look-book__button.btn-prev::before,
                    .look-book__button.btn-prev::after { left: 10% }
                    .look-book__button.btn-next::before,
                    .look-book__button.btn-next::after { right: 10% }
                    .look-book__button:hover::before,
                    .look-book__button:hover::after { background-color: var(--primaryColor) }
                    .look-book__button::before { bottom: 50% }
                    .look-book__button.btn-prev::before {
                        transform: rotate(30deg);
                        transform-origin: 0 100%;
                    }
                    .look-book__button.btn-next::before {
                        transform: rotate(-30deg);
                        transform-origin: 100% 100%;
                    }
                    .look-book__button::after { top: 50% }
                    .look-book__button.btn-prev::after {
                        transform: rotate(-30deg);
                        transform-origin: 0 0;
                    }
                    .look-book__button.btn-next::after {
                        transform: rotate(30deg);
                        transform-origin: 100% 0;
                    }



/*------------------------------------*\
    $DETAIL_BOX
\*------------------------------------*/
.detail-box {
    padding-inline: 4%;
    border: 1px solid white;
}
@media screen and (orientation: landscape) {
    .detail-box {
        padding-inline: 4%;
        padding-bottom: 48px;
    }
}
@media screen and (orientation: portrait) {
    .detail-box {
        padding-inline: min(4vw, 15px);
        padding-bottom: 24px;
        margin-inline: max(-4vw, -15px);
    }
}

    .detail-box__title {
        padding-right: .96em;
        padding-left: 1em;
        margin-top: -30px;
        margin-inline: auto;
        background-color: white;
        color: black;
        font-family: var(--fontEnB);
        font-weight: 500;
        line-height: 1.5;
    }
    @media screen and (orientation: landscape) {
        .detail-box__title {
            width: fit-content;
            padding-block: 12px;
            margin-top: -30px;
            margin-bottom: 40px;
            font-size: 2.4rem;
        }
    }
    @media screen and (orientation: portrait) {
        .detail-box__title {
            width: calc(100% - 8vw);
            padding-block: 5px;
            margin-top: -35px;
            margin-bottom: 24px;
            font-size: 2.0rem;
            text-align: center;
        }
    }

    .detail-box__flex {
        display: flex;
        flex-wrap: wrap;
        column-gap: 24px;
        row-gap: 32px;
    }

        .detail-box__image {
            flex-grow: 1;
            width: calc(32% - 12px);
            min-width: min(200px, 100%);
        }

        .detail-box__text {
            padding-left: 0.1em;
            font-weight: 700;
            letter-spacing: .1em;
        }
        .detail-box__flex .detail-box__text {
            flex-grow: 1;
            width: calc(68% - 12px);
        }
        @media screen and (orientation: landscape) {
            .detail-box__text {
                font-size: 1.6rem;
                line-height: 2;
            }
        }
        @media screen and (orientation: portrait) {
            .detail-box__text {
                font-size: 1.4rem;
                line-height: calc(26 / 14);
            }
        }

            .detail-box__text a { transition: color .15s var(--easeOutQuart) }
            .detail-box__text a:hover { color: var(--primaryColor) }





/*------------------------------------*\
    $MUSIC
\*------------------------------------*/
.music { padding-inline: clamp(15px, calc((100vw - 88px) * (60 / 1920)), 60px) !important }

.music .content-title { color: white }

.music__inner {
    width: min(100%, 1000px);
    margin-inline: auto;
}

    .music__bnr {
        margin-top: clamp(32px, calc(100vw * (64 / 1920)), 64px);
        margin-bottom: 64px;
    }