@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * COMMON..............共通パーツ
 * VARIABLE-HIDE.......可変幅による表示非表示
 * HEADER..............ヘッダーパーツ
 * FOOTER..............フッターパーツ
 * MAIN................メインパーツ
 * ANIMATIONS..........アニメーション
 */





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
.wrap { overflow-y: hidden }


/**
 * Block contents
 */
.block  {
    padding-inline: var(--sidePadding);
    margin-block: clamp(96px, calc(100vw * (96 / 375)), 144px);
}

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



/**
 * Hide contents
 */
/* Hide elements */
.hide {
    content-visibility: auto;
    display: none !important;
}

/* Hide scrollbar */
.non-scrollbar {
    -ms-overflow-style: none; /* Edge */
    scrollbar-width: none; /* Firefox */
}
.non-scrollbar::-webkit-scrollbar { /* Safari */
    content-visibility: auto;
    display: none;
}



/**
 * Buttons
 */
.button {
    position: relative;
    display: block;
    width: 100%;
    padding-block: clamp(13px, calc(100vw * (13 / 375)), 21px);
    padding-left: .1em;
    border: 2px solid var(--primaryColor);
    /* background-color: var(--primaryColor); */
    background-image: linear-gradient(90deg, white 0%, white 50%, var(--primaryColor) 50%, var(--primaryColor) 100%);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: 200% 100%;
    color: var(--primaryVariant);
    font-family: var(--fontEn);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-align: center;
    transition:
        background-position .3s var(--easeOutQuart),
        color .3s var(--easeOutQuart);
}
.button:hover {
    /* background-color: white; */
    background-position: 0% 50%;
    color: var(--fontSubBrown);
}
.button::before {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 16px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: white;
    background-image: url(../images/common/icon-nav-arrow-blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transition: background-color .3s var(--easeOutQuart);
}
.button:hover::before {
    background-color: var(--primaryColor);
    background-image: url(../images/common/icon-nav-arrow.svg);
}





/*------------------------------------*\
    $VARIABLE-HIDE
\*------------------------------------*/
.portrait,
.landscape,
.less768,
.over768,
.less1024,
.over1024,
.less1280,
.over1280 { content-visibility: auto }

/* Aspect ratio */
@media screen and (orientation: landscape) {
    .portrait { display: none !important }
}
@media screen and (orientation: portrait) {
    .landscape { display: none !important }
}

/* iPad */
@media screen and (min-width: 768px) {
    .less768 { display: none !important }
}
@media screen and (max-width: 767px) {
    .over768 { display: none !important }
}

/* iPad Pro */
@media screen and (min-width: 1180px) {
    .less1024 { display: none !important }
}
@media screen and (max-width: 1179px) {
    .over1024 { display: none !important }
}

/* laptop */
@media screen and (min-width: 1280px) {
    .less1280 { display: none !important }
}
@media screen and (max-width: 1279px) {
    .over1280 { display: none !important }
}





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    color: white;
}

    .header__inner {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-inline: var(--sidePadding);
        border-bottom: 1px solid white;
        background-color: rgb(0 0 0 / 0.5);
        transition: background-color .3s var(--easeOutQuart);
    }
    .header.active .header__inner { background-color: black }

        .header__logo { width: clamp(124px, calc(100vw * (124 / 1180)), 217px) }
        @media screen and (min-width: 1180px) {
            .header__logo { margin-top: 10px }
        }
        @media screen and (max-width: 1179px) {
            .header__logo {
                margin-top: 13px;
                margin-left: -14px;
            }
        }

        /**
         * ^nav ^lists
         */
        .header__nav {}

            @media screen and (max-width: 1179px) {
                .header__nav__button {
                    position: relative;
                    display: block;
                    width: 32px;
                    height: 32px;
                    margin-block: 16px;
                    background-image: linear-gradient(white, white);
                    background-repeat: no-repeat;
                    background-position: 100% 50%;
                    background-size: 100% 2px;
                    transition: background-size .3s var(--linear);
                }
                .header__nav__flag:checked ~ .header__nav__button { background-size: 0 2px }
                .header__nav__button::before,
                .header__nav__button::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                    height: 2px;
                    background-color: white;
                    transition:
                        top .3s var(--linear),
                        transform .3s var(--linear);
                }
                .header__nav__button::before { top: 5px }
                .header__nav__button::after { top: 25px }
                .header__nav__flag:checked ~ .header__nav__button::before {
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(45deg);
                }
                .header__nav__flag:checked ~ .header__nav__button::after {
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(-45deg);
                }
            }

                @media screen and (max-width: 1179px) {
                    .header__nav__container {
                        position: fixed;
                        inset: 0;
                        z-index: -1;
                        left: 0;
                        padding-top: 65px;
                        overflow: hidden;
                        pointer-events: none;
                    }
                }

                    @media screen and (min-width: 1180px) {
                        .header__nav__list { display: flex }
                    }
                    @media screen and (max-width: 1179px) {
                        .header__nav__list {
                            height: 0;
                            background-color: rgb(0 0 0 / 0.5);
                            overflow-y: auto;
                            transition:
                                height .3s var(--easeOutQuart),
                                background-color .15s var(--easeOutQuart);
                            pointer-events: visible;
                        }
                        .header.active .header__nav__list { background-color: black }
                        .header__nav__flag:checked ~ .header__nav__container .header__nav__list { height: 100% }
                    }

                        .header__nav__item { font-family: var(--fontEn) }
                        @media screen and (min-width: 1180px) {
                            .header__nav__item {
                                width: 128px;
                                height: 79px;
                                padding-inline: 8px;
                            }
                        }
                        @media screen and (max-width: 1179px) {
                            .header__nav__item { border-bottom: 1px solid white }
                        }

                            .header__nav__label {
                                display: block;
                                cursor: pointer;
                                overflow: hidden;
                            }
                            @media screen and (min-width: 1180px) {
                                .header__nav__label {
                                    position: relative;
                                    display: grid;
                                    height: 100%;
                                    padding-top: 28px;
                                    text-align: center;
                                }
                                .header__nav__label::before,
                                .header__nav__label::after {
                                    content: "";
                                    position: absolute;
                                    top: 50px;
                                    height: 1px;
                                    background-color: rgb(255 255 255 / 0.5);
                                }
                                .header__nav__label::before {
                                    left: 0;
                                    width: 100%;
                                }
                                .header__nav__label::after {
                                    right: 0;
                                    width: 0;
                                    transition: width .3s var(--easeOutQuart);
                                }
                                .header__nav__item:hover .header__nav__label::after {
                                    left: 0;
                                    width: 100%;
                                }
                            }
                            @media screen and (max-width: 1179px) {
                                .header__nav__label {
                                    position: relative;
                                    display: block;
                                    padding-block: 18px;
                                    padding-inline: min(calc(100% * (32 / 375)), 80px);
                                }
                                .header__nav__label::after {
                                    content: "";
                                    position: absolute;
                                    top: calc(50% - 13px);
                                    right: min(calc(100% * (32 / 375)), 80px);
                                    width: 26px;
                                    height: 26px;
                                    border: 1px solid white;
                                    border-radius: 100%;
                                    background-image: url(../images/common/icon-nav-arrow.svg);
                                    background-repeat: no-repeat;
                                    background-position: 50% 50%;
                                    background-size: contain;
                                }
                                :not(a).header__nav__label::after { transform: rotate(90deg) }
                                :not(a).header__nav__label.active::after {
                                    transform: rotate(-90deg);
                                    border: none;
                                    background-color: var(--primaryColor);
                                }
                            }

                                .header__nav__text {
                                    font-weight: 600;
                                    line-height: 1;
                                    letter-spacing: .2em;
                                }
                                .header__nav__text--ja { font-family: var(--font) }
                                @media screen and (min-width: 1180px) {
                                    .header__nav__text {
                                        grid-area: 1 / -1;
                                        padding-left: .2em;
                                        font-size: 1.6rem;
                                    }
                                    .header__nav__text--ja {
                                        font-size: 1.2rem;
                                        font-weight: 300;
                                        line-height: calc(16 / 12);
                                    }
                                }
                                @media screen and (max-width: 1179px) {
                                    .header__nav__text {
                                        margin-bottom: 2px;
                                        font-size: 2.4rem;
                                    }
                                    .header__nav__text--ja {
                                        margin-bottom: 0;
                                        font-size: 1.4rem;
                                        font-weight: 400;
                                        line-height: calc(18 / 14);
                                    }
                                }

                                    @media screen and (min-width: 1180px) {
                                        .header__nav__effect span {
                                            position: relative;
                                            transform: translateY(0);
                                            display: inline-block;
                                            opacity: 1;
                                            transition:
                                                transform .12s .075s var(--linear),
                                                opacity .06s .075s var(--linear);
                                        }
                                        .header__nav__item:hover .header__nav__effect--off span {
                                            transform: translateY(-1em);
                                            opacity: 0;
                                        }
                                        .header__nav__effect--on span {
                                            transform: translateY(-1em);
                                            opacity: 0;
                                        }
                                        .header__nav__item:hover .header__nav__effect--on span {
                                            transform: translateY(0);
                                            opacity: 1;
                                        }
                                        .header__nav__effect span:nth-of-type(2n) { transition-delay: 0.09s }
                                        .header__nav__effect span:nth-of-type(3n) { transition-delay: 0.135s }
                                        .header__nav__effect span:nth-of-type(5n) { transition-delay: 0.105s }
                                        .header__nav__effect span:nth-of-type(7n) { transition-delay: 0.12s }
                                    }


                            .header__nav__child { overflow: hidden }
                            @media screen and (min-width: 1180px) {
                                .header__nav__child {
                                    position: absolute;
                                    top: 80px;
                                    left: 0;
                                    width: 100%;
                                    height: 0;
                                    background-color: rgb(0 0 0 / 0.5);
                                    transition:
                                        height .15s var(--linear),
                                        background-color .15s var(--easeOutQuart);
                                }
                                .header.active .header__nav__child { background-color: white }
                                .header__nav__item:hover .header__nav__child {
                                    height: 80px;
                                    transition-delay: .075s;
                                }
                            }
                            @media screen and (max-width: 1179px) {
                                .header__nav__child { display: none }
                            }

                                @media screen and (min-width: 1180px) {
                                    .header__nav__child__list {
                                        display: flex;
                                        justify-content: flex-end;
                                        padding-inline: min(calc(100% * (32 / 375)), 80px);
                                    }
                                }

                                    @media screen and (min-width: 1180px) {
                                        .header__nav__child__item {
                                            height: 80px;
                                            border-left: 1px solid white;
                                        }
                                        .header.active .header__nav__child__item { border-left-color: var(--borderColor) }
                                    }
                                    @media screen and (max-width: 1179px) {
                                        .header__nav__child__item { border-top: 1px solid white }
                                        .header.active .header__nav__child__item { border-top-color: var(--borderColor) }
                                    }

                                        .header__nav__link {
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                        }
                                        .header__nav__link .header__nav__text {
                                            padding-left: 0;
                                            margin-right: -0.2em;
                                        }
                                        .header__nav__link .header__nav__text:not(.header__nav__text--ja) { margin-bottom: 4px }
                                        .header.active .header__nav__link .header__nav__text.header__nav__text--ja { color: var(--fontSubBlack) }
                                        @media screen and (min-width: 1180px) {
                                            .header__nav__link {
                                                height: 100%;
                                                padding-inline: 18px;
                                                transition: background-color .3s var(--easeOutQuart);
                                            }
                                            .header__nav__link:hover { background-color: black }
                                            .header.active .header__nav__link:hover { background-color: var(--background6) }
                                            .header__nav__link .header__nav__text { transition: color .3s var(--easeOutQuart) }
                                            .header.active .header__nav__link .header__nav__text { color: var(--primaryVariant) }
                                            .header__nav__link:hover .header__nav__text:not(.header__nav__text--ja) { color: var(--primaryColor) }
                                            .header.active .header__nav__link:hover .header__nav__text:not(.header__nav__text--ja) { color: var(--secondaryColor) }
                                            .header__nav__link .header__nav__text--ja {
                                                margin-right: -0.05em;
                                                font-weight: 400;
                                                letter-spacing: .05em;
                                            }
                                        }
                                        @media screen and (max-width: 1179px) {
                                            .header__nav__link {
                                                position: relative;
                                                padding-block: 18px;
                                                padding-right: calc(min(calc(100% * (32 / 375)), 80px) + 32px);
                                                padding-left: calc(min(calc(100% * (32 / 375)), 80px) + 20px);
                                            }
                                            .header.active .header__nav__link { background-color: white }
                                            .header__nav__link::before {
                                                content: "";
                                                position: absolute;
                                                top: calc(50% - 9px);
                                                left: min(calc(100% * (32 / 375)), 80px);
                                                width: 11px;
                                                height: 11px;
                                                background-color: white;
                                                clip-path: polygon(0% 0%, 2px 0%, 2px 9px, 100% 9px, 100% 100%, 0% 100%);
                                            }
                                            .header.active .header__nav__link::before { background-color: var(--primaryVariant) }
                                            .header__nav__link::after {
                                                content: "";
                                                position: absolute;
                                                top: calc(50% - 13px);
                                                right: min(calc(100% * (32 / 375)), 80px);
                                                width: 26px;
                                                height: 26px;
                                                border: 1px solid white;
                                                border-radius: 100%;
                                                background-image: url(../images/common/icon-nav-arrow.svg);
                                                background-repeat: no-repeat;
                                                background-position: 50% 50%;
                                                background-size: contain;
                                            }
                                            .header.active .header__nav__link::after {
                                                border-color: var(--primaryVariant);
                                                background-image: url(../images/common/icon-nav-arrow-blue.svg);
                                            }
                                            .header__nav__link .header__nav__text {
                                                display: block;
                                                font-size: 1.8rem;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                                overflow: hidden;
                                            }
                                            .header.active .header__nav__link .header__nav__text { color: var(--secondaryColor) }
                                            .header__nav__link .header__nav__text--ja {
                                                font-size: 1.4rem;
                                                font-weight: 300;
                                                line-height: 1;
                                            }
                                        }





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer { background-color: white }

    .footer__inner {
        display: flex;
        flex-wrap: wrap;
        row-gap: 45px;
        padding-top: clamp(32px, calc(100vw * (32 / 375)), 48px);
        padding-inline: var(--sidePadding);
        padding-bottom: clamp(32px, calc(100vw * (32 / 375)), 64px);
    }

        .footer__details {
            flex-grow: 1;
            width: max(calc(100% * (400 / 1760)), 240px);
        }

            .footer__details__head { margin-bottom: clamp(15px, 4vw, 36px) }

                @media screen and (min-width: 768px) {
                    .footer__logo { width: 217px }
                }
                @media screen and (max-width: 767px) {
                    .footer__logo {
                        width: 247px;
                        margin-left: -2px;
                    }
                }

                    .footer__logo__link {
                        display: block;
                        margin-bottom: clamp(12px, calc(100vw * (12 / 375)), 15px);
                    }


                .footer__details__head span {
                    font-size: 1.4rem;
                    line-height: 1;
                    letter-spacing: .1em;
                }


            .footer__details__body {}

                .footer__details__address {
                    font-size: 1.4rem;
                    font-weight: 300;
                    line-height: calc(24 / 14);
                    letter-spacing: .1em;
                }

                .footer__details__button {}

                    .footer__details__button__link {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 192px;
                        height: 32px;
                        padding-right: 12px;
                        padding-left: 20px;
                        background-color: var(--secondaryColor);
                        color: white;
                        font-family: var(--fontEn);
                        font-size: 1.8rem;
                        font-weight: 500;
                        letter-spacing: .05em;
                    }
                    .footer__details__button__link::after {
                        content: "";
                        display: block;
                        width: 16px;
                        height: 16px;
                        border-radius: 100%;
                        background-color: white;
                        background-image: url(../images/common/icon-nav-arrow-red.svg);
                        background-repeat: no-repeat;
                        background-size: contain;
                    }


        @media screen and (min-width: 1024px) {
            .footer__nav { width: max(calc(100% * (1360 / 1760)), 800px) }
        }
        @media screen and (min-width: 768px) and (max-width: 1023px) {
            .footer__nav { width: max(75%, 472px) }
        }
        @media screen and (max-width: 767px) {
            .footer__nav { width: 100% }
        }

            .footer__nav__list {
                display: grid;
                grid-row-gap: 24px;
            }
            @media screen and (min-width: 1024px) {
                .footer__nav__list {
                    grid-template-columns: repeat(3, 1fr);
                    grid-template-rows: repeat(2, auto);
                    grid-column-gap: calc(100% * (80 / 1360));
                    grid-auto-flow: column;
                }
            }
            @media screen and (min-width: 768px) and (max-width: 1023px) {
                .footer__nav__list {
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(3, auto);
                    grid-column-gap: 24px;
                    grid-auto-flow: column;
                }
            }
            @media screen and (max-width: 767px) {
                .footer__nav__list { grid-template-columns: 1fr }
            }

                .footer__nav__item {}
                    .footer__nav__block {}

                        .footer__nav__category {
                            padding-left: 18px;
                            margin-bottom: 12px;
                            border-left: 2px solid var(--borderColor);
                            background-image: linear-gradient(90deg, white 0, white 4px, var(--background4) 4px, var(--background4) 100%);
                            background-repeat: no-repeat;
                            background-size: contain;
                            font-family: var(--fontEn);
                            font-size: 1.8rem;
                            font-weight: 500;
                            line-height: calc(32 / 18);
                            letter-spacing: .05em;
                        }

                        .footer__nav__content { padding-left: 20px }

                            .footer__nav__content__list {}
                                .footer__nav__content__item {}

                                    .footer__nav__content__link {
                                        color: var(--fontSubBrown);
                                        font-size: 1.4rem;
                                        letter-spacing: .05em;
                                    }
                                    @media screen and (min-width: 768px) {
                                        .footer__nav__content__link {
                                            line-height: 2;
                                            transition: opacity .15s var(--easeOutQuart);
                                        }
                                        .footer__nav__content__link:hover { opacity: .75 }
                                    }
                                    @media screen and (max-width: 767px) {
                                        .footer__nav__content__link { line-height: calc(34 / 14) }
                                    }


    .footer__bottom {
        padding-inline: var(--sidePadding);
        border-top: 1px solid var(--borderColor);
        color: var(--fontSubBrown);
        font-size: 1.4rem;
        line-height: calc(24 / 14);
    }
    @media screen and (min-width: 1024px) {
        .footer__bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    @media screen and (max-width: 1023px) {
        .footer__bottom { padding-inline: 0 }
    }

        .footer__terms {}

            @media screen and (min-width: 1024px) {
                .footer__terms__list { display: flex }
            }

                @media screen and (min-width: 1024px) {
                    .footer__terms__item {
                        display: flex;
                        align-items: center;
                        height: 65px;
                        padding-right: 20px;
                        margin-right: 16px;
                        border-right: 1px solid var(--borderColor);
                    }
                }
                @media screen and (max-width: 1023px) {
                    .footer__terms__item { border-bottom: 1px solid var(--borderColor) }
                }

                    .footer__terms__link {
                        display: block;
                        column-gap: 8px;
                        letter-spacing: .05em;
                        white-space: nowrap;
                    }
                    @media screen and (min-width: 1024px) {
                        .footer__terms__link { display: block }
                    }
                    @media screen and (max-width: 1023px) {
                        .footer__terms__link {
                            display: flex;
                            align-items: center;
                            height: 44px;
                            padding-inline: min(calc(100% * (32 / 375)), 80px);
                        }
                    }

                        .footer__terms__link span {
                            display: flex;
                            align-items: center;
                            column-gap: 6px;
                        }
                        .footer__terms__link span::after {
                            content: "";
                            display: block;
                            width: 16px;
                            height: 16px;
                            border: 1px solid var(--fontSubBrown);
                            border-radius: 100%;
                            background-image: url(../images/common/icon-nav-arrow-brown.svg);
                            background-repeat: no-repeat;
                            background-size: contain;
                        }


        @media screen and (min-width: 1024px) {
            .copyright { letter-spacing: .1em }
        }
        @media screen and (max-width: 1023px) {
            .copyright {
                padding-block: 20px;
                padding-inline: min(calc(100% * (32 / 375)), 80px);
                letter-spacing: .05em;
            }
        }





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
@media screen and (min-width: 1180px) {
    .main { margin-top: 80px }
}
@media screen and (max-width: 1179px) {
    .main { margin-top: 65px }
}

.main-content {}

    @media screen and (max-width: 767px) {
        .main-content__tab {
            width: min(265px, 100%);
            margin-inline: auto;
        }
    }

        .main-content__tab__list {
            display: grid;
            border-left: 2px solid var(--borderColor);
        }
        @media screen and (min-width: 768px) {
            .main-content__tab__list { grid-template-columns: min(254px, 100%) }
        }
        @media screen and (max-width: 767px) {
            .main-content__tab__list { grid-row-gap: 4px }
        }

            .main-content__tab__item { margin-left: -2px }

                /*a,button*/.main-content__tab__button {
                    display: flex;
                    align-items: center;
                    padding-left: 14px;
                    border-left: 2px solid transparent;
                    color: white;
                    font-family: var(--fontEn);
                    font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.8rem);
                    font-weight: 500;
                    letter-spacing: .05em;
                    cursor: pointer;
                    transition:
                        border-left-color .3s var(--easeOutQuart),
                        background-color .3s var(--easeOutQuart),
                        color .3s var(--easeOutQuart);
                }
                .main-content__tab__button:hover {
                    border-left-color: var(--primaryColor);
                    color: var(--primaryColor);
                }
                button.main-content__tab__button.is-active {
                    border-left-color: var(--primaryColor);
                    color: var(--primaryColor);
                }
                @media screen and (min-width: 768px) {
                    .main-content__tab__button {
                        width: 100%;
                        line-height: calc(32 / 18);
                    }
                    .main-content__tab__button:hover { background-color: var(--background1) }
                    button.main-content__tab__button.is-active { background-color: var(--fontSubBlack) }
                }
                @media screen and (max-width: 767px) {
                    .main-content__tab__button { line-height: 2 }
                }

                    .main-content__tab__button span {
                        display: block;
                    }
                    @media screen and (min-width: 768px) {
                        .main-content__tab__button span { width: 34px }
                    }
                    @media screen and (max-width: 767px) {
                        .main-content__tab__button span { width: 30px }
                    }





/*------------------------------------*\
    $ANIMATIONS
\*------------------------------------*/
/* Slider */
@keyframes slideRight {
    from {
        transform: translateX(-50%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    to {
        transform: translateX(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}
@keyframes slideLeft {
    from {
        transform: translateX(50%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    to {
        transform: translateX(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}