@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * COMMON..............共通パーツ
 * HEADER..............ヘッダー
 * FOOTER..............フッター
 */





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
/**
 * Loader
 */
.loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    background-color: white;
    transition: opacity 1s var(--easeOutQuart);
    z-index: 99999;
}
.loader.closed {
    opacity: 0;
    pointer-events: none;
}
    .loader__image {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 300px
    }


/**
 * Block contents
 */
.wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    overflow: hidden;
}

.hide {
    content-visibility: auto;
    display: none !important;
}

.lang-area {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    overflow-y: auto;
}

input[type=radio].lang-en:checked ~ :is(.lang-area, .popup) .lang-ja,
input[type=radio].lang-ja:checked ~ :is(.lang-area, .popup) .lang-en { display: none !important }
/* .lang-ja { font-family: var(--font) }
.lang-en { font-family: var(--fontEn) } */


@media screen and (orientation: landscape) {
    .main { padding-left: 88px }
}
@media screen and (orientation: portrait) {
    .main { padding-top: 50px }
}

.section { overflow: hidden }
.section:not(.full-size) {
    padding-top: clamp(60px, calc((100vw - 88px) * (80 / 1920)), 80px);
    padding-inline: clamp(30px, calc((100vw - 88px) * (60 / 1920)), 60px);
    padding-bottom: clamp(80px, calc((100vw - 88px) * (120 / 1920)), 120px);
}
.section.full-width { padding-inline: 0 }


.block-inner {
    width: min(100%, 1000px);
    margin-inline: auto;
}


.content-image {
    width: min(1000px, 100%);
    max-width: max-content;
    margin-inline: auto;
    margin-bottom: min(6%, 60px);
}


.content-block {
    width: min(1000px, 100%);
    margin-inline: auto;
    margin-bottom: min(6%, 60px);
    background-color: rgba(0, 0, 0, 0.15);
}
.bg-black .content-block { background-color: rgba(255, 255, 255, 0.15) }
.bg-border .content-block { background-color: rgba(0, 0, 0, 0.75) }

    @media screen and (orientation: landscape) {
        .content-block__inner {
            display: flex;
            flex-wrap: wrap;
            row-gap: 24px;
            padding-top: 24px;
            padding-inline: 4%;
            padding-bottom: 32px;
        }
        .content-block__inner.content-block__inner--add-image {
            display: grid;
            grid-template-columns: 180px 1fr;
            grid-template-rows: auto 1fr;
            column-gap: 20px;
        }
    }
    @media screen and (orientation: portrait) {
        .content-block__inner {
            padding-top: 16px;
            padding-inline: min(4vw, 15px);
            padding-bottom: 20px;
        }
    }

        .content-block__title {
            width: 100%;
            margin-bottom: 20px;
            font-size: 1.8rem;
            font-weight: 500;
            line-height: calc(24 / 18);
        }
        .content-block__title span:not([class]) { font-size: 1.4rem }

        .content-block__box { flex-grow: 1 }
        @media screen and (orientation: landscape) {
            .content-block__box { width: max(50%, 400px) }
        }
        @media screen and (orientation: portrait) {
            .content-block__box:not(:last-of-type) { margin-bottom: 24px }
        }

            .content-block__label {
                margin-bottom: 4px;
                font-size: 1.6rem;
                font-weight: 500;
                line-height: 1.5;
            }

            .content-block__text {
                font-size: 1.4rem;
                line-height: calc(24 / 14);
            }
            @media screen and (orientation: landscape) {
                .content-block__inner.content-block__inner--add-image .content-block__text { grid-column: 2 / 3 }
            }
            @media screen and (orientation: portrait) {
            }

            .content-block__text a { transition: color .15s var(--easeOutQuart) }
            .content-block__text a:hover { color: var(--primaryColor) }
            @media screen and (orientation: portrait) {
                .content-block__text a { text-decoration: underline }
            }

            .content-block__image {}
            @media screen and (orientation: landscape) {
                .content-block__image { grid-row: 1 / 3 }
            }
            @media screen and (orientation: portrait) {
                .content-block__image {
                    width: fit-content;
                    margin-bottom: 24px;
                    margin-inline: auto;
                }
            }



/**
 * Text contents
 * ^title ^text
 */
.content-title,
.content-title--min,
.content-title--cross {
    position: relative;
    padding-block: .5em;
    line-height: 1;
    letter-spacing: .1em;
    text-align: center;
    white-space: nowrap;
}
.content-title--cross { z-index: 1 }
.content-title.non-border::before { display: none }
@media screen and (orientation: landscape) {
    .content-title,
    .content-title--min,
    .content-title--cross {
        margin-bottom: 1em;
        font-size: 6rem;
    }
    .content-title--min { font-size: 4.0rem }
}
@media screen and (orientation: portrait) {
    .content-title,
    .content-title--min,
    .content-title--cross {
        margin-inline: clamp(-60px, calc((-100vw + 88px) * (60 / 1920)), -30px);
        margin-bottom: 20px;
        font-size: 2.4rem;
    }
    .content-title--min { font-size: 2.0rem }
}

    .content-title::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: calc(50% - 1em);
        width: 2em;
        height: 2px;
        background-color: black;
    }
    .bg-black .content-title::before { background-color: white }
    .content-title span { font-size: 0.5em }
    .content-title span.lang-ja { font-weight: 700 }
    :is(
        .content-title,
        .content-title--cross
    ) img { margin-inline: auto }
    @media screen and (orientation: landscape) {
        :is(
            .content-title,
            .content-title--cross
        ) img { max-width: 92% }
    }
    @media screen and (orientation: portrait) {
        :is(
            .content-title,
            .content-title--cross
        ) img { max-width: 92% }
    }

    .content-title--cross.active::before,
    .content-title--cross.active::after { transition: transform 1s .6s var(--linear) }
    .content-title--cross.active::before { transform: translate(-50%, -50%) rotate(45deg) }
    .content-title--cross.active::after { transform: translate(-50%, -50%) rotate(-45deg) }

    .content-title--cross span {
        display: block;
        padding-block: 0.325em;
    }
    .content-title--cross span:first-child { position: relative }

        .content-title--cross span:first-child::before,
        .content-title--cross span:first-child::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(1em * (160 / 60));
            height: calc(1em * (10 / 60));
            background-color: white;
            z-index: -1;
        }
        .content-title--cross span:first-child::before { transform: translate(-50%, -50%) rotate(90deg) }
        .content-title--cross span:first-child::after { transform: translate(-50%, -50%) rotate(0deg) }
        .bg-black .content-title--cross span:first-child::before,
        .bg-black .content-title--cross span:first-child::after { background-color: var(--primaryColor) }

        .content-title--cross.active span:first-child::before,
        .content-title--cross.active span:first-child::after { transition: transform 1s .6s var(--linear) }
        .content-title--cross.active span:first-child::before { transform: translate(-50%, -50%) rotate(45deg) }
        .content-title--cross.active span:first-child::after { transform: translate(-50%, -50%) rotate(-45deg) }


@media screen and (orientation: landscape) {
    .content-title--group {
        display: flex;
        column-gap: 24px;
        max-width: 1024px;
        padding-block: 30px;
        margin-inline: auto;
        margin-bottom: 60px;
    }
}

    @media screen and (orientation: landscape) {
        .content-title__main {
            width: 39.84375%;
            font-size: 6.0rem;
            text-align: right;
        }
    }
    @media screen and (orientation: portrait) {
        .content-title__main {
            position: relative;
            padding-top: .5em;
            padding-bottom: .75em;
            margin-bottom: 20px;
            margin-inline: clamp(-60px, calc((-100vw + 88px) * (60 / 1920)), -30px);
            font-size: 2.4rem;
            text-align: center;
        }
        .content-title__main::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: calc(50% - 1em);
            width: 2em;
            height: 2px;
            background-color: black;
        }
        :is(.bg-black, .bg-border) .content-title__main::before { background-color: white }
    }

        .content-title__main :is(h2, h3, h4) {
            line-height: 1;
            letter-spacing: .1em;
        }
        @media screen and (orientation: landscape) {
            .content-title__main :is(h2, h3, h4) {
                min-width: fit-content;
                margin-top: -5px;
                margin-bottom: 11px;
            }
        }
        @media screen and (orientation: portrait) {
            .content-title__main :is(h2, h3, h4) { margin-bottom: 10px }
        }

        .content-title__main p {
            font-weight: 700;
            line-height: 1.5;
            white-space: nowrap;
        }
        @media screen and (orientation: landscape) {
            .content-title__main p {
                font-size: 1.8rem;
                letter-spacing: .05em;
            }
        }
        @media screen and (orientation: portrait) {
            .content-title__main p {
                font-size: 0.5em;
                letter-spacing: .1em;
            }
        }


    .content-title__text {
        font-weight: 500;
    }
    @media screen and (orientation: landscape) {
        .content-title__text {
            width: calc(60.15625% - 24px);
            padding-left: 20px;
            border-left: 2px solid var(--primaryColor);
            font-size: 1.6rem;
            line-height: 1.875;
            letter-spacing: .05em;
        }
    }
    @media screen and (orientation: portrait) {
        .content-title__text {
            margin-bottom: 30px;
            font-size: 1.2rem;
            line-height: 2;
            letter-spacing: .1em;
        }
        .content-title__text.center { text-align: center }
    }

        @media screen and (orientation: landscape) {
            .content-title__description { margin-top: -4px }
        }

            .content-title__description strong {
                display: inline-block;
                margin-block: 10px;
                color: var(--primaryColor);
                font-weight: 400;
                line-height: calc(18 / 14);
                letter-spacing: .05em;
            }
            @media screen and (orientation: landscape) {
                .content-title__description strong { font-size: 1.4rem }
            }
            @media screen and (orientation: portrait) {
                .content-title__description strong { font-size: 1.1rem }
            }


.content-text,
.content-text--min {
    width: min(100%, 1000px);
    margin-inline: auto;
    font-family: var(--fontEnM);
    font-weight: 500;
    line-height: 2;
    letter-spacing: .1em;
}
:is(
    .content-text,
    .content-text--min
).center { text-align: center }
:is(
    .content-text,
    .content-text--min
) a { text-decoration: underline }
@media screen and (orientation: landscape) {
    .content-text {
        padding-inline: clamp(10px, 2%, 20px);
        margin-bottom: 80px;
        font-size: 1.8rem;
    }
    .content-text--min {
        font-size: 1.4rem;
        margin-block: 24px;
    }
}
@media screen and (orientation: portrait) {
    .content-text {
        margin-bottom: 30px;
        font-size: 1.2rem;
    }
    .content-text--min {
        font-size: 1.2rem;
        margin-block: 16px;
    }
}


/* External Link */
.external-link {
    position: relative;
    display: block !important;
    width: max-content;
    padding-right: 1.25em;
    margin-block: .25em;
    color: var(--fontGrayColor) !important;
    font-family: var(--fontEnM);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none !important;
    transition: color .3s var(--easeOutQuart);
}
.external-link::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.5em);
    right: 0;
    width: 1em;
    height: 1em;
    background-color: var(--fontGrayColor);
    -webkit-mask-image: url(../images/icon-external-link.svg);
            mask-image: url(../images/icon-external-link.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: background-color .3s var(--easeOutQuart);
}
.external-link:hover { color: var(--primaryColor) !important }
.external-link:hover::after { background-color: var(--primaryColor) }



.error { color: red }


/**
 * Background Color
 */
.bg-black {
    background-color: black;
    color: white;
}
.bg-gray { background-color: var(--bgGrayColor) }
.bg-green { background-color: var(--primaryColor) }
.bg-pink { background-color: var(--bgPinkColor) }
.bg-gradient { background-image: linear-gradient(90deg, #BCA7E4, #6ECCE3) }
.bg-fashionart {
    background-image: url(../images/bg-fashionart.svg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}
.bg-art {
    background-image: url(../images/bg-fashionart-top.svg), url(../images/bg-fashionart-bottom.svg);
    background-repeat: no-repeat;
    background-position: 0 0, 100% 100%;
    background-size: max(100%, 640px);
}
.bg-border {
    background-image: repeating-linear-gradient(black 0px, black 8px, #222 8px, #222 12px);
    background-position: 0 50%;
    color: white;
}


/**
 * Buttons
 * ^button
 */
.sfw__btn {
    width: min(100%, 300px);
    min-width: fit-content;
    margin-top: 40px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
    .sfw__btn a {
        display: block;
        padding-inline: 1em;
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 0% 100%;
        font-family: var(--fontEnB);
        font-size: 3rem;
        font-weight: 700;
        line-height: 3;
        letter-spacing: .1em;
        white-space: nowrap;
        transition:
            background-size .3s var(--linear),
            color .3s var(--easeOutQuart);
    }
    :is(.bg-black, .bg-border) .sfw__btn a {
        background-image: linear-gradient(white, white);
        border-color: white;
    }
    .sfw__btn a:hover {
        background-size: 100% 100%;
        color: white;
    }
    .bg-black .sfw__btn a:hover { color: black }
    @media screen and (orientation: landscape) {
        .sfw__btn a {
            padding-right: 1.5em;
            padding-left: 1.5em;
            border: 6px solid black;
            font-size: 3rem;
        }
    }
    @media screen and (orientation: portrait) {
        .sfw__btn a {
            padding-right: 0;
            padding-left: 0;
            border: 3px solid black;
            font-size: 1.6rem;
        }
    }


.bnr {
    width: min(1000px, 100%);
    margin-inline: auto;
}


/* Animation */
.fade-in,
.fade-in--only { opacity: 0 }
.fade-in { transform: translateY(100px) }
.fade-in.active {
    transform: translateY(0);
    opacity: 1;
    transition:
        transform .6s var(--linear),
        opacity .6s var(--easeOutQuart);
}
.fade-in--only.active {
    opacity: 1;
    transition: opacity 1s var(--linear);
}
.fade-in--only:nth-child(1) { transition-delay: .1s }
.fade-in--only:nth-child(2) { transition-delay: .2s }
.fade-in--only:nth-child(3) { transition-delay: .3s }
.fade-in--only:nth-child(4) { transition-delay: .4s }
.fade-in--only:nth-child(5) { transition-delay: .5s }
.fade-in--only:nth-child(6) { transition-delay: .6s }
.fade-in--only:nth-child(7) { transition-delay: .7s }
.fade-in--only:nth-child(8) { transition-delay: .8s }
.fade-in--only:nth-child(9) { transition-delay: .9s }
.fade-in--only:nth-child(10) { transition-delay: 1s }
.fade-in--only:nth-child(11) { transition-delay: 1.1s }
.fade-in--only:nth-child(12) { transition-delay: 1.2s }
.fade-in--only:nth-child(13) { transition-delay: 1.3s }
.fade-in--only:nth-child(14) { transition-delay: 1.4s }
.fade-in--only:nth-child(15) { transition-delay: 1.5s }
.fade-in--only:nth-child(16) { transition-delay: 1.6s }
.fade-in--only:nth-child(17) { transition-delay: 1.7s }
.fade-in--only:nth-child(18) { transition-delay: 1.8s }
.fade-in--only:nth-child(19) { transition-delay: 1.9s }
.fade-in--only:nth-child(20) { transition-delay: 2s }
@media screen and (orientation: portrait) {
    .fade-in--only.is-pc {
        opacity: 1;
    }
}

/**
 * Hide contents
 */
.hide {
    content-visibility: auto;
    display: none !important;
}



/**
 * Dialog
 */
.dialog {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    background-color: black;
    color: white;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity .3s var(--easeOutQuart);
}
.dialog.is-open {
    opacity: 1;
    pointer-events: visible;
}
@media screen and (orientation: landscape) {
    .dialog {
        width: calc(100% - 88px);
        background-size: min(1284px, calc(100% * (1284 / 1832)));
    }
}
@media screen and (orientation: portrait) {
    .dialog { width: 100% }
}

    .dialog__container {
        width: 100%;
        padding-inline: 4%;
    }
    @media screen and (orientation: landscape) {
        .dialog__container { padding-block: 128px }
    }
    @media screen and (orientation: portrait) {
        .dialog__container { padding-block: 96px }
    }

        .dialog__inner {
            width: 100%;
            max-width: 1099px;
            margin-inline: auto;
        }

            .dialog__slider { position: relative }

                .dialog__list {}

                    .dialog__item {}

                        .dialog__column {
                            display: flex;
                            width: 100%;
                        }
                        @media screen and (orientation: landscape) {
                            .dialog__column {
                                display: grid;
                                grid-template-columns: calc(100% * (352 / 1099)) 1fr;
                                grid-column-gap: calc(100% * (64 / 1099));
                                grid-row-gap: 64px;
                            }
                        }
                        @media screen and (orientation: portrait) {
                            .dialog__column {
                                display: block;
                                width: 100%;
                            }
                        }

                            .dialog__image {
                                max-width: 480px;
                                margin-inline: auto;
                            }
                            @media screen and (orientation: portrait) {
                                .dialog__image { margin-bottom: 24px }
                                .dialog__image img { margin-inline: auto }
                            }

                                .dialog__image span {
                                    display: block;
                                    margin-top: 1em;
                                }


                            .dialog__content {}

                                .dialog__title {
                                    margin-bottom: .875em;
                                    line-height: 1.25;
                                    letter-spacing: .05em;
                                }
                                @media screen and (orientation: landscape) {
                                    .dialog__title { font-size: 2.4rem }
                                }
                                @media screen and (orientation: portrait) {
                                    .dialog__title { font-size: 2.0rem }
                                }

                                .dialog__textbox {}
                                @media screen and (orientation: landscape) {
                                    .dialog__textbox { margin-bottom: 54px }
                                }
                                @media screen and (orientation: portrait) {
                                    .dialog__textbox { margin-bottom: 32px }
                                }
            
                                    .dialog__label {
                                        margin-bottom: 9px;
                                        color: #fdf9be;
                                        line-height: calc(24 / 18);
                                        letter-spacing: .05em;
                                    }
                                    @media screen and (orientation: landscape) {
                                        .dialog__label {
                                            font-size: 1.8rem;
                                        }
                                    }
                                    @media screen and (orientation: portrait) {
                                        .dialog__label {
                                            font-size: 1.6rem;
                                        }
                                    }

                                    .dialog__text {
                                        font-size: 1.4rem;
                                        line-height: calc(24 / 14);
                                        letter-spacing: .05em;
                                    }
                                    @media screen and (orientation: landscape) {
                                        .dialog__text { padding-right: 32px }
                                    }

                                        .dialog__text a { text-decoration: underline }
                                        @media screen and (orientation: landscape) {
                                            .dialog__text a:hover { text-decoration: underline }
                                        }


                                .dialog__details {}

                                    .dialog__details dl {
                                        display: grid;
                                        grid-template-columns: 78px 1fr;
                                        grid-column-gap: 14px;
                                        align-items: center;
                                        color: #fdf9be;
                                        font-size: 1.4rem;
                                        letter-spacing: .05em;
                                    }
                                    .dialog__details dl + dl { margin-top: 19px }

                                        .dialog__details dt { text-align: right }
                                        .dialog__details dt h5 { font-weight: 400 }

                                        .dialog__details dd {
                                            padding-left: 12px;
                                            border-left: 2px solid var(--primaryColor);
                                            line-height: calc(24 / 14);
                                        }
                                        .dialog__details dd p {
                                            margin-block: -5px;
                                        }
                                        .dialog__details dd a {
                                            text-decoration: underline;
                                        }
                                        .dialog__details__btn {
                                            display: block;
                                            width: fit-content;
                                            padding-left: 14px;
                                            padding-right: calc(14px - 0.05em);
                                            border-radius: 99px;
                                            background-color: #fdf9be;
                                            color: black;
                                            font-size: 1.2rem;
                                            font-weight: 500;
                                            line-height: calc(20 / 12);
                                            letter-spacing: .05em;
                                            text-decoration: none !important;
                                        }
                                        @media screen and (orientation: landscape) {
                                            .dialog__details__btn { transition: opacity .3s var(--easeOutQuart) }
                                            .dialog__details__btn:hover { opacity: .8 }
                                        }

                                            .dialog__details dd strong {
                                                display: inline-block;
                                                margin-bottom: .5em;
                                                font-size: 2.4rem;
                                                font-weight: 700;
                                                line-height: 1;
                                            }


                                .dialog__content__image { margin-top: 64px }


                            .dialog__option {
                                background-color: black;
                                padding: clamp(12px, calc(100vw * (12 / 375)), 32px);
                            }
                            @media screen and (orientation: landscape) {
                                .dialog__option {
                                    display: grid;
                                    grid-template-columns: 160px 1fr;
                                    grid-column-gap: 36px;
                                    grid-column: 2 span;
                                }
                            }

                                @media screen and (orientation: portrait) {
                                    .dialog__option__image { margin-bottom: 24px; }
                                    .dialog__option__image img { width: 100% }
                                }

                                .dialog__option__text {
                                    font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.6rem);
                                    line-height: 1.875;
                                    letter-spacing: .05em;
                                }

                                    .dialog__option__text a { text-decoration: underline }
                                    @media screen and (orientation: landscape) {
                                        .dialog__option__text a:hover { text-decoration: none }
                                    }


            @media screen and (orientation: landscape) {
                .dialog__btn {
                    aspect-ratio: 32.5 / 48;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 1;
                    width: 45px;
                    background-repeat: no-repeat;
                    background-size: contain;
                }
                .dialog__btn.is-prev {
                    left: calc(-100% * (12 / 1099));
                    background-image: url(../images/icon-event-prev.svg);
                }
                .dialog__btn.is-next {
                    right: calc(-100% * (12 / 1099));
                    background-image: url(../images/icon-event-next.svg);
                }
            }
            @media screen and (min-width: 1024px) {
                .dialog__btn.is-prev {
                    left: calc(-100% * (32 / 1099));
                }
                .dialog__btn.is-next {
                    right: calc(-100% * (32 / 1099));
                }
            }
            @media screen and (min-width: 1440px) and (max-width: 1519px) {
                .dialog__btn.is-prev {
                    left: calc(-100% * (52 / 1099));
                }
                .dialog__btn.is-next {
                    right: calc(-100% * (52 / 1099));
                }
            }
            @media screen and (min-width: 1520px) {
                .dialog__btn.is-prev {
                    left: calc(-100% * (166 / 1099));
                }
                .dialog__btn.is-next {
                    right: calc(-100% * (166 / 1099));
                }
            }
            @media screen and (orientation: portrait) {
                .dialog__btn { display: none }
            }






.dialog-close {
    padding: 24px;
    margin-top: 64px;
    background-color: #111111;
}

    .dialog-close__btn {
        display: block;
        min-width: 176px;
        margin-inline: auto;
        border: 3px solid var(--primaryColor);
        border-radius: 99px;
        background-color: white;
    }

        .dialog-close__btn span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 36px;
            padding-left: .2em;
            border: 3px solid #333333;
            border-radius: 99px;
            color: black;
            font-size: 1.4rem;
            letter-spacing: .2em;
        }






/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: -webkit-fill-available;
    z-index: 9999;
}
@media screen and (orientation: landscape) {
    .header {
        width: 88px;
        height: 100vh;
        height: -webkit-fill-available;
    }
}
@media screen and (orientation: portrait) {
    .header {
        width: 100%;
        height: 50px;
    }
}

    .header__line {
        position: relative;
        background-color: white;
        width: 100%;
        height: 100%;
    }
    @media screen and (orientation: landscape) {
        .header__line {
            padding-top: min(40px, calc(100vw * (40 / 1920)), calc(100vh * (40 / 1080)));
            padding-inline: calc(100% * (15 / 88));
            padding-bottom: 176px;
        }
    }
    @media screen and (orientation: portrait) {
        .header__line {
            padding-block: 10.5px;
            padding-inline: 4%;
        }
    }

        .header__label {
            display: flex;
            align-items: center;
            width: max-content;
        }
        @media screen and (orientation: landscape) {
            .header__label {
                position: absolute;
                top: min(40px, calc(100vw * (40 / 1920)), calc(100vh * (40 / 1080)));
                left: 18.75%;
                transform: translateY(-100%) rotate(90deg);
                transform-origin: 0 100%;
                height: 58px;
            }
        }
        @media screen and (orientation: portrait) {
            .header__label { height: 29px }
        }

            .logo,
            /*img*/.logo__image { height: 100% }
            @media screen and (orientation: landscape) {
                .logo { margin-right: 30px }
            }
            @media screen and (orientation: portrait) {
                .logo { margin-right: 15px }
            }

            /*h1,p*/.title { font-family: var(--fontEnM) }
            @media screen and (orientation: landscape) {
                .title { font-size: 2.36rem }
            }
            @media screen and (orientation: portrait) {
                .title { font-size: 1.18rem }
            }


    /**
     * ^nav
     */
    .nav,
    .nav--lang {
        position: absolute;
        inset: 0;
        height: 100vh;
        height: -webkit-fill-available;
        pointer-events: none;
    }
    .nav--empty {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        opacity: 0;
        pointer-events: none;
        cursor: pointer;
    }
    .nav-flag-global:checked ~ .nav--empty {
        opacity: 1;
        pointer-events: visible;
    }
    .nav-flag-global:checked ~ .nav { z-index: 1 }
    @media screen and (orientation: portrait) {
        .nav,
        .nav--lang { width: 100% }
        .nav--empty {
            background-color: var(--navBackColor);
            transition: opacity .3s var(--easeOutQuart);
        }
    }

        /**
         * ^button
         */
        .nav__button,
        .nav__button--lang {
            position: absolute;
            cursor: pointer;
            pointer-events: visible;
        }
        .nav__button--lang {
            background-repeat: no-repeat;
            /* pointer-events: none; */
        }
        @media screen and (orientation: landscape) {
            .nav__button,
            .nav__button--lang {
                left: 0;
                width: 88px;
                height: 88px;
            }
            .nav__button { bottom: 88px }
            .nav__button--lang {
                bottom: 0;
                background-color: black;
                background-image: url(../images/icon-language-pc.svg);
                background-position: 50% 21px;
                background-size: 26px;
            }
        }
        @media screen and (orientation: portrait) {
            .nav__button,
            .nav__button--lang {
                top: 0;
                width: 50px;
                height: 50px;
            }
            .nav__button {
                right: 0;
                background-color: black;
                transition: right .3s var(--linear);
            }
            .nav-flag-global:checked ~ .nav .nav__button {
                right: min(281px, calc(100% - 50px));
                pointer-events: none;
            }
            .nav__button--lang {
                right: 50px;
                background-image: url(../images/icon-language-sp.svg);
                background-position: 2px 50%;
                background-size: 20px;
            }
        }

            .nav__button__label {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                font-family: var(--font) !important;
                letter-spacing: .1em;
            }
            @media screen and (orientation: landscape) {
                .nav__button__label {
                    display: block;
                    padding-top: 56px;
                    padding-left: .1em;
                    color: white;
                    font-size: 1.4rem;
                    line-height: 1;
                    text-align: center;
                }
            }
            @media screen and (orientation: portrait) {
                .nav__button__label {
                    display: flex;
                    align-items: center;
                    padding-left: 27px;
                    font-size: 1.2rem;
                }
            }


            .nav__button::before,
            .nav__button::after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                height: 2px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            .nav__button::before {
                transition:
                    top .3s var(--linear),
                    transform .3s var(--linear);
            }
            .nav__button::after {
                transition:
                    top .3s var(--linear),
                    transform .3s var(--linear),
                    background-position-x .3s var(--linear);
            }
            .nav-flag-global:checked ~ .nav .nav__button::before {
                top: 50%;
                transform: translate(-50%, -50%) rotate(45deg);
            }
            .nav-flag-global:checked ~ .nav .nav__button::after {
                top: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
                background-position-x: 0;
            }
            .nav__button:hover::after { background-position-x: 0 }
            @media screen and (orientation: landscape) {
                .nav__button::before,
                .nav__button::after {
                    width: 36px;
                    background-image: linear-gradient(black, black);
                }
                .nav__button::before { top: 38px }
                .nav__button::after {
                    top: 48px;
                    background-position-x: -18px;
                }
            }
            @media screen and (orientation: portrait) {
                .nav__button::before,
                .nav__button::after {
                    width: 28px;
                    background-image: linear-gradient(white, white);
                }
                .nav__button::before,
                .nav__button--lang::before { top: 20.5px }
                .nav__button::after,
                .nav__button--lang::after {
                    top: 27.5px;
                    background-position-x: -14px;
                }
                .nav-flag-lang:checked ~ .nav .nav__button::before {
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(45deg);
                }
                .nav-flag-lang:checked ~ .nav .nav__button::after {
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(-45deg);
                    background-position-x: 0;
                }
            }


        .nav__container {
            top: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: white;
            transition: transform .3s var(--linear);
            pointer-events: visible;
            overflow-y: auto;
        }
        .nav-flag-global:checked ~ .nav .nav__container,
        .nav-flag-lang:checked ~ .nav--lang .nav__container { transform: translateX(0) }
        @media screen and (orientation: landscape) {
            .nav__container {
                position: absolute;
                left: 88px;
                z-index: -1;
                transform: translateX(-100%);
                justify-content: center;
                width: 400px;
                padding-block: 32px;
            }
        }
        @media screen and (orientation: portrait) {
            .nav__container {
                position: fixed;
                right: 0px;
                transform: translateX(100%);
                width: min(281px, calc(100% - 50px));
                padding-bottom: 96px;
            }
        }

            /**
             * ^lists
             */
            /* .nav__list, */
            .nav__list--social { display: flex }
            .nav__list {
                flex-direction: column;
                justify-content: center;
            }
            .nav__list--social { align-items: center }
            @media screen and (orientation: landscape) {
                .nav__list,
                .nav__list--social { padding-left: 100px }
                .nav__list--social { padding-top: min(77px, calc(100vw * (77 / 1920)), calc(100vh * (77 / 1080))) }
            }
            @media screen and (orientation: portrait) {
                .nav__list,
                .nav__list--social {
                    padding-top: 32.5px;
                    padding-left: 67px;
                }
            }

                .nav__item--social {
                    width: 23px;
                    height: 23px;
                    margin-right: 18px;
                }
                @media screen and (orientation: landscape) {
                    .nav__item { padding-block: min(14px, calc(100vw * (14 / 1920)), calc(100vh * (14 / 1080))) }
                }
                @media screen and (orientation: portrait) {
                    .nav__item { padding-block: 9px }
                }

                    .nav__link {
                        display: block;
                        font-family: var(--fontEnB);
                        font-size: 2.0rem;
                        font-weight: 600;
                        line-height: 1.6;
                        letter-spacing: .1em;
                        transition: color .3s var(--easeOutQuart);
                        cursor: pointer;
                    }
                    input[type=radio].lang-en ~ .lang-area .nav__link.lang-flag-ja,
                    input[type=radio].lang-ja ~ .lang-area .nav__link.lang-flag-en { color: var(--nonActiveFontColor) }
                    .nav .nav__link:hover,
                    input[type=radio].lang-en ~ .lang-area .nav__link.lang-flag-ja:hover,
                    input[type=radio].lang-ja ~ .lang-area .nav__link.lang-flag-en:hover { color: var(--primaryColor) }
                    .nav__item--social .nav__link {
                        height: 23px;
                        background-color: black;
                        -webkit-mask-size: contain;
                                mask-size: contain;
                        transition: background-color .3s var(--easeOutQuart);
                    }
                    .nav__item--social .nav__link:hover { background-color: var(--primaryColor) }
                    .nav__item--social .nav__link.social-icon01 {
                        -webkit-mask-image: url(../images/icon-instagram.svg); /* Instagram */
                                mask-image: url(../images/icon-instagram.svg);
                    }
                    .nav__item--social .nav__link.social-icon02 {
                        -webkit-mask-image: url(../images/icon-facebook.svg); /* Facebook */
                                mask-image: url(../images/icon-facebook.svg);
                    }
                    .nav__item--social .nav__link.social-icon03 {
                        -webkit-mask-image: url(../images/icon-youtube.svg); /* Youtube */
                                mask-image: url(../images/icon-youtube.svg);
                    }





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer { background-color: var(--nonActiveFontColor) }
@media screen and (orientation: landscape) {
    .footer { padding-left: 88px }
}

    .f__top { background-color: white }
    @media screen and (orientation: landscape) {
        .f__top {
            padding-block: 40px;
            padding-inline: clamp(30px, 3.125vw, 60px);
        }
    }
    @media screen and (orientation: portrait) {
        .f__top {
            padding-block: 30px;
            padding-inline: 15px;
        }
    }

        @media screen and (orientation: landscape) {
            .f__top__link {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        @media screen and (orientation: portrait) {
            .f__top__link { display: block }
        }


            @media screen and (orientation: landscape) {
                .f__top__image {
                    width: min(300px, 30vw);
                    margin-right: min(60px, 6vw);
                }
            }
            @media screen and (orientation: portrait) {
                .f__top__image {
                    width: max-content;
                    max-width: 100%;
                    margin-inline: auto;
                    margin-bottom: 30px;
                }
            }

            .f__top__text {
                font-family: var(--fontEnB);
                letter-spacing: .1em;
            }
            @media screen and (orientation: landscape) {
                .f__top__text { font-size: 2.4rem }
            }
            @media screen and (orientation: portrait) {
                .f__top__text {
                    width: 100%;
                    font-size: 1.6rem;
                    text-align: center;
                }
            }

    @media screen and (orientation: landscape) {
        .f__bottom {
            padding-top: 80px;
            padding-inline: clamp(30px, 3.125vw, 60px);
            padding-bottom: 120px;
        }
    }
    @media screen and (orientation: portrait) {
        .f__bottom {
            padding-top: 36px;
            padding-inline: 15px;
            padding-bottom: 60px;
        }
    }

        @media screen and (orientation: landscape) {
            .f__bottom .block-inner + .block-inner {
                margin-top: 64px;
            }
        }
        @media screen and (orientation: portrait) {
            .f__bottom .block-inner + .block-inner {
                margin-top: 48px;
            }
        }

        .footer__title {
            line-height: 1.5;
            letter-spacing: .1em;
        }
        @media screen and (orientation: landscape) {
            .footer__title {
                margin-bottom: 40px;
                font-size: 1.8rem;
            }
        }
        @media screen and (orientation: portrait) {
            .footer__title {
                margin-bottom: 18px;
                font-size: 1.4rem;
            }
        }

        .footer__text {
            font-family: var(--fontEnM);
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: .1em;
        }
        @media screen and (orientation: landscape) {
            .footer__text {
                font-size: 1.4rem;
            }
        }
        @media screen and (orientation: portrait) {
            .footer__text {
                font-size: 1.1rem;
            }
        }


        /**
         * ^lists
         */
        @media screen and (orientation: landscape) {
            /*ul*/.f__list { margin-bottom: 120px }
        }
        @media screen and (orientation: portrait) {
            /*ul*/.f__list { margin-bottom: 60px }
        }

            @media screen and (orientation: landscape) {
                /*li*/.f__item:not(:last-child) { margin-bottom: 40px }
            }
            @media screen and (orientation: portrait) {
                /*li*/.f__item { margin-bottom: 18px }
            }

                /*dl*/.f__emb {}

                    /*dt*/.f__emb__title {
                        margin-bottom: 1em;
                        font-weight: 700;
                        line-height: 1.5;
                        letter-spacing: .1em;
                    }
                    @media screen and (orientation: landscape) {
                        .f__emb__title { font-size: 1.6rem }
                    }
                    @media screen and (orientation: portrait) {
                        .f__emb__title { font-size: 1.2rem }
                    }

                        .f__emb__title /*span*/.lang-en { font-family: var(--fontEnB) }


                    /*dd*/.f__emb__content {}

                        /**
                         * ^lists
                         */
                        /*ul*/.f__emb__list,
                        /*ul*/.f__emb__list--media { display: flex }
                        .f__emb__list { flex-wrap: wrap }
                        .f__emb__list--media {
                            justify-content: space-between;
                            column-gap: 5%;
                            row-gap: 16px;
                        }
                        @media screen and (max-width: 767px) {
                            .f__emb__list--media {
                                flex-direction: column;
                                width: fit-content;
                                margin-inline: auto;
                            }
                        }

                            /*li*/.f__emb__item {
                                display: block;
                                height: 1.5em;
                                font-family: var(--fontEnM);
                                font-weight: 500;
                                line-height: 1.5;
                                letter-spacing: .1em;
                                white-space: nowrap;
                            }
                            .f__emb__list--media .f__emb__item { height: auto }
                            @media screen and (orientation: landscape) {
                                .f__emb__item { font-size: 1.4rem }
                                .f__emb__list--media .f__emb__item { width: 30% }
                            }
                            @media screen and (orientation: portrait) {
                                .f__emb__item { font-size: 1.1rem }
                                .f__emb__list--media .f__emb__item { width: min(100%, 300px) }
                            }

                                .f__emb__item:not(:last-child) span::after {
                                    content: "／";
                                    margin-right: .3em;
                                    margin-left: .3em;
                                }

                                @media screen and (orientation: landscape) {
                                    .f__emb__image { width: 200px }
                                }
                                @media screen and (orientation: portrait) {
                                    .f__emb__image { width: 180px }
                                }

                                .f__emb__link { display: block }


        @media screen and (orientation: landscape) {
            .f__archive { margin-bottom: 120px }
        }
        @media screen and (orientation: portrait) {
            .f__archive { margin-bottom: 60px }
        }

            /*h3*/.f__archive__title {
                position: relative;
                margin-bottom: 2em;
                line-height: 2;
                letter-spacing: .1em;
                text-align: center;
            }
            @media screen and (orientation: landscape) {
                .f__archive__title { font-size: 2rem }
            }
            @media screen and (orientation: portrait) {
                .f__archive__title { font-size: 1.8rem }
            }

                .f__archive__title::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: calc(50% - 1em);
                    width: 2em;
                    height: 2px;
                    background-color: black;
                    transition: background-color .45s var(--easeOutQuart);
                }

            /**
             * ^lists
             */
            /*ul*/.f__archive__list {
                display: flex;
                flex-wrap: wrap;
            }
            @media screen and (orientation: landscape) {
                .f__archive__list { justify-content: center }
            }

                @media screen and (orientation: landscape) {
                    /*li*/.f__archive__item {
                        padding: 1em;
                        font-size: 1.4rem;
                    }
                }
                @media screen and (orientation: portrait) {
                    /*li*/.f__archive__item {
                        width: 50%;
                        padding: .5em;
                        font-size: 1.1rem;
                        text-align: center;
                    }
                }

                    .f__archive__link {
                        color: black;
                        font-family: var(--fontEnM);
                        line-height: 1;
                        letter-spacing: .1em;
                    }


        .f__links {}

            .f__links__button {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                column-gap: 24px;
                row-gap: 20px;
                margin-bottom: 8px;
            }

                .f__links__button__link {
                    display: block;
                    width: min(200px, 100%);
                    padding-left: .1em;
                    background-color: black;
                    color: white;
                    font-family: var(--fontEnB);
                    font-size: 1.6rem;
                    font-weight: 600;
                    line-height: 3;
                    letter-spacing: .1em;
                    text-align: center;
                    transition: background-color .15s var(--easeOutQuart);
                }
                .f__links__button__link:hover { background-color: var(--primaryColor) }


            .f__links__list {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
            }

                .f__links__item {
                    padding-left: .1em;
                    font-family: var(--fontEnM);
                    font-weight: 500;
                    line-height: 1.5;
                    letter-spacing: .1em;
                }
                .f__links__item:not(:last-of-type):after {
                    content: "/";
                    display: inline-block;
                    padding-inline: 0.25em;
                }
                @media screen and (orientation: landscape) {
                    .f__links__item { font-size: 1.4rem }
                }
                @media screen and (orientation: portrait) {
                    .f__links__item { font-size: 1.1rem }
                }

                    .f__links__item a { transition: color .15s var(--easeOutQuart) }
                    .f__links__item a:hover { color: var(--primaryColor) }



    .copyright {
        display: block;
        background-color: black;
        color: white;
        font-family: var(--font);
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
    }
    @media screen and (orientation: landscape) {
        .copyright {
            padding-top: 8px;
            padding-bottom: 8px;
            font-size: 1.2rem;
            line-height: 1;
            letter-spacing: .1em;
        }
    }
    @media screen and (orientation: portrait) {
        .copyright {
            font-size: 1rem;
            line-height: 2;
        }
    }














