@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * COMMON..............共通パーツ
 * VISUAL..............メインヴィジュアル
 * TEXT_WITH_IMAGE.....画像付きテキスト
 */





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
/**
 * Change styles
 */
.main-content { color: white }


.header__inner {
    border-bottom-color: black;
    background-color: black;
    transition: background-color .3s var(--easeOutQuart);
}

    @media screen and (max-width: 1179px) {
        .header__nav__list { background-color: black }
    }

        @media screen and (min-width: 1180px) {
            .header__nav__child { background-color: white }
        }

            @media screen and (min-width: 1180px) {
                .header__nav__child__item { border-left-color: var(--borderColor) }
            }
            @media screen and (max-width: 1179px) {
                .header__nav__child__item { border-top-color: var(--borderColor) }
            }

            .header__nav__link .header__nav__text.header__nav__text--ja { color: var(--fontSubBlack) }

                @media screen and (min-width: 1180px) {
                    .header__nav__link:hover { background-color: var(--background6) }
                    .header__nav__link .header__nav__text { color: var(--primaryVariant) }
                    .header__nav__link:hover .header__nav__text:not(.header__nav__text--ja) { color: var(--secondaryColor) }
                }
                @media screen and (max-width: 1179px) {
                    .header__nav__link { background-color: white }
                    .header__nav__link::before { background-color: var(--primaryVariant) }
                    .header__nav__link::after {
                        border-color: var(--primaryVariant);
                        background-image: url(../images/common/icon-nav-arrow-blue.svg);
                    }
                    .header__nav__link .header__nav__text { color: var(--secondaryColor) }
                }


/**
 * Text styles
 */
.title {
    font-size: clamp(1.8rem, calc(100vw * (18 / 375)), 2.0rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .2em;
}
.title--middle { font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 2.4rem) }
.title--large {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: calc(0.5em - 2px);
    font-family: var(--fontEn);
    font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 4.0rem);
    letter-spacing: .05em;
}
.title--biglarge {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: calc(0.5em - 2px);
    font-family: var(--fontEn);
    font-size: clamp(3.5rem, calc(100vw * (24 / 375)), 5.0rem);
    letter-spacing: .05em;
}
.title--narrow { letter-spacing: .05em }
.title--center {
    padding-left: .2em;
    text-align: center;
}
.title--center.title--large {
    justify-content: center;
    padding-left: .05em;
}
.title--center.title--narrow { padding-left: .05em }
.title--ja {
    font-family: var(--font);
    font-weight: 300;
    letter-spacing: .1em;
}


.text {
    font-family: var(--font);
    font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.6rem);
    font-weight: 400;
    line-height: 1.875;
    letter-spacing: .05em;
}
.text--small { font-size: clamp(1.2rem, calc(100vw * (12 / 375)), 1.4rem) }
.text--large { font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.8rem) }
.text--biglarge { font-size: clamp(2.4rem, calc(100vw * (14 / 375)), 3rem) }
.text--low { line-height: 1 }
.text--high { line-height: 2 }
.text--highest { line-height: 3 }
.text--highest.text--small { line-height: calc(30 / 14) }
.text--highest.text--large { line-height: calc(48 / 18) }
.text--wide { letter-spacing: .2em }
.text--wide.text--small { letter-spacing: .1em }
.text--center {
    padding-left: .05em;
    text-align: center;
}
.text--center.text--wide { padding-left: .2em }
.text strong { font-weight: 500 }


.text-with-title {
    margin-bottom: .25em;
    font-family: var(--font);
    font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.6rem);
    font-weight: 700;
}


/**
 * margin-bottom
 */
.mb16 { margin-bottom: 16px }
.mb32 { margin-bottom: 32px }
.mb48 { margin-bottom: 48px }
.mb64 { margin-bottom: 64px }
.mb80 { margin-bottom: 80px }
.mb96 { margin-bottom: 96px }


/**
 * button wrapper
 */
.button-wrapper { margin-inline: auto }
@media screen and (min-width: 768px) {
    .button-wrapper { width: 224px }
}
@media screen and (max-width: 767px) {
    .button-wrapper { width: 100% }
}





/*------------------------------------*\
    $VISUAL
\*------------------------------------*/
.main-visual {
    display: grid;
    align-items: end;
    justify-items: end;
    margin-bottom: 16px;
}

    .main-visual__wrapper {
        grid-area: 1 / -1;
        width: 100%;
        height: min(688px, 56.25vw);
    }

        .main-visual__wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


    .main-visual__titles {
        grid-area: 1 / -1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: min(672px, calc(100% - (var(--sidePadding) / 2)));
        height: min(calc(100% * (512 / 688)), 50vw);
        padding-left: min(calc(100% * (172 / 1920)), 172px);
        margin-left: calc(var(--sidePadding) / 2);
        margin-bottom: -16px;
        animation-name: mainTitle;
        animation-duration: .45s;
        /* animation-delay: .15s; */
        animation-timing-function: var(--easeOutSine);
        animation-fill-mode: both;
    }
    @media screen and (min-width: 768px) {
        .main-visual__titles { background-color: white }
    }
    @media screen and (max-width: 767px) {
        .main-visual__titles { background-color: rgb(255 255 255 / 0.9) }
    }
    @keyframes mainTitle {
        from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%) }
        to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) }
    }

        .main-visual__title {
            position: relative;
            padding-right: calc(var(--sidePadding) / 2);
            padding-bottom: clamp(5px, calc(100vw * (5 / 375)), 10px);
            font-family: var(--fontEn);
            font-size: clamp(3.6rem, calc(100vw * (36 / 375)), 6.4rem);
            font-weight: 500;
            letter-spacing: .05em;
            line-height: 1;
        }
        .main-visual__title::before {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            height: 1px;
            background-color: black;
            animation-name: mainTitleLine;
            animation-duration: .6s;
            animation-delay: .3s;
            animation-timing-function: var(--easeOutQuart);
            animation-fill-mode: both;
        }
        .main-visual__title span {
            display: block;
            animation-name: mainTitleInline;
            animation-duration: 1s;
            animation-delay: .75s;
            animation-timing-function: var(--easeOutSine);
            animation-fill-mode: both;
        }

        .main-visual__title-min {
            padding-top: clamp(12px, calc(100vw * (12 / 375)), 21px);
            padding-bottom: clamp(12px, calc(100vw * (12 / 375)), 26px);
            font-size: clamp(1.2rem, calc(100vw * (12 / 375)), 1.4rem);
            font-weight: 500;
            line-height: 1;
            letter-spacing: .1em;
        }
        .main-visual__title-min span {
            display: block;
            animation-name: mainTitleInline;
            animation-duration: 1s;
            animation-delay: .9s;
            animation-timing-function: var(--easeOutQuart);
            animation-fill-mode: both;
        }


@keyframes mainTitleLine {
    from { width: 0 }
    to { width: 100% }
}

@keyframes mainTitleInline {
    from {
        transform: translateY(min(3em, 48px));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}








/*------------------------------------*\
    $SLIDER
\*------------------------------------*/
.slider { margin-top: clamp(96px, calc(100vw * (96 / 375)), 144px) }

    /* Tabs */
    @media screen and (min-width: 768px) {
        .slider__tab__list {
            margin-left: max(calc(50% - 480px), var(--sidePadding));
            padding-bottom: clamp(24px, calc(100vw * (24 / 375)), 96px);
        }
    }
    @media screen and (max-width: 767px) {
        .slider__tab__list { padding-bottom: clamp(24px, calc(100vw * (24 / 375)), 64px) }
    }

    /* Main */
    @media screen and (min-width: 768px) {
        .slider__content { margin-top: clamp(-64px, calc(-100vw * (24 / 375)), -24px) }
    }

        .slider__list { display: grid }

            .slider__item {
                grid-area: 1 / -1;
                opacity: 0;
                pointer-events: none;
            }
            .slider__item.is-active {
                z-index: 10;
                opacity: 1;
                pointer-events: visible;
            }
            @media screen and (min-width: 768px) {
                .slider__item {
                    display: grid;
                    grid-template-columns: calc(100% * (800 / 1920)) 1fr;
                    background-image: linear-gradient(var(--background3), var(--background3));
                    background-repeat: no-repeat;
                    background-position: 100% 100%;
                    background-size: calc(100% * (1024 / 1920)) calc(100% - clamp(16px, calc(100vw * (16 / 375)), 32px));
                }
            }
            @media screen and (max-width: 767px) {
                .slider__item {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                }
            }

                .slider__item.is-active .slider__image { animation: slideRight .3s linear both }
                .slider__image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: 100% 50%;
                }
                @media screen and (min-width: 768px) {
                    .slider__image { margin-top: clamp(16px, calc(100vw * (16 / 375)), 32px) }
                    /* .slider__image img { height: calc(100% - clamp(16px, calc(100vw * (16 / 375)), 32px)) } */
                }
                @media screen and (max-width: 767px) {
                    .slider__image {
                        width: calc(100vw * (359 / 375));
                        height: calc(100vw * (256 / 375));
                    }
                }

                .slider__item:nth-of-type(3n + 1) .slider__details { background-color: white }
                .slider__item:nth-of-type(3n + 2) .slider__details { background-color: var(--fontSubBlack) }
                .slider__item:nth-of-type(3n) .slider__details { background-color: var(--background6) }
                .slider__item.is-active .slider__details { animation: slideLeft .3s linear both }
                @media screen and (min-width: 768px) {
                    .slider__details {
                        min-height: min(480px, calc(100vw * (320 / 768)));
                        margin-bottom: clamp(16px, calc(100vw * (16 / 375)), 32px);
                        margin-left: max(-32px, calc(-100vw * (16 / 768)));
                    }
                }
                @media screen and (max-width: 767px) {
                    .slider__details {
                        flex-grow: 1;
                        width: calc(100vw * (359 / 375));
                        min-height: 256px;
                        margin-left: auto;
                        margin-top: min(calc(-100vw * (32 / 375)), -32px);
                    }
                }

                    .slider__details__inner {
                        padding-top: clamp(22px, calc(100vw * (22 / 375)), 41px);
                        padding-right: var(--sidePadding);
                        padding-left: clamp(32px, calc(100vw * (32 / 375)), 128px);
                        padding-bottom: clamp(32px, calc(100vw * (32 / 375)), 61px);
                    }
                    @media screen and (max-width: 767px) {
                        .slider__details__inner {
                            display: flex;
                            flex-direction: column;
                            width: 100%;
                            height: 100%;
                        }
                    }

                        .slider__number {
                            position: relative;
                            padding-left: 68px;
                            margin-bottom: clamp(8px, calc(100vw * (8 / 375)), 28px);
                            color: var(--secondaryColor);
                            font-family: var(--fontEn);
                            font-size: 1.6rem;
                            font-weight: 500;
                            line-height: 1.5;
                            letter-spacing: .05em;
                        }
                        .slider__item:nth-of-type(3n + 2) .slider__number { color: var(--primaryColor) }
                        .slider__number::before {
                            content: "";
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                            width: 62px;
                            height: 1px;
                            background-color: var(--secondaryColor);
                        }
                        .slider__item:nth-of-type(3n + 2) .slider__number::before { background-color: var(--primaryColor) }

                        .slider__title {
                            margin-bottom: clamp(16px, calc(100vw * (16 / 375)), 36px);
                            font-family: var(--fontEn);
                            font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 4.0rem);
                            font-weight: 500;
                            line-height: 1.25;
                            letter-spacing: .05em;
                        }
                        .slider__item:nth-of-type(3n + 1) .slider__title { color: var(--fontSubBrown) }
                        .slider__item:nth-of-type(3n + 2) .slider__title { color: white }
                        .slider__item:nth-of-type(3n) .slider__title { color: var(--fontSubBlack) }

                        .slider__catch {
                            margin-bottom: 26px;
                            font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.8rem);
                            font-weight: 400;
                            letter-spacing: .2em;
                        }
                        .slider__item:nth-of-type(3n + 1) .slider__catch { color: var(--fontSubBrown) }
                        .slider__item:nth-of-type(3n + 2) .slider__catch { color: white }
                        @media screen and (min-width: 768px) {
                            .slider__catch { line-height: calc(32 / 18) }
                        }
                        @media screen and (max-width: 767px) {
                            .slider__catch { line-height: calc(24 / 14) }
                        }

                        @media screen and (min-width: 768px) {
                            .slider__description {
                                margin-bottom: 40px;
                                font-size: 1.6rem;
                                font-weight: 300;
                                line-height: 1.875;
                                letter-spacing: .1em;
                            }
                            .slider__item:nth-of-type(3n + 2) .slider__description { color: white }
                        }

                        @media screen and (min-width: 768px) {
                            .slider__button { width: 224px }
                        }
                        @media screen and (max-width: 767px) {
                            .slider__button {
                                width: min(295px, 100%);
                                margin-top: auto;
                            }
                        }





/*------------------------------------*\
    $TEXT_WITH_IMAGE
\*------------------------------------*/
.text-with-image {}

    .text-with-image__list {
        display: flex;
        flex-direction: column;
        row-gap: var(--sidePadding);
        width: 100%;
    }

        @media screen and (min-width: 768px) {
            .text-with-image__item {
                display: flex;
                padding-bottom: 16px;
                background-image: linear-gradient(var(--background3), var(--background3));
                background-repeat: no-repeat;
                background-position: 100% 100%;
                background-size: calc(100% * (736 / 1920)) calc(100% - 46px);
            }
            .text-with-image__item:nth-of-type(odd) { background-position: 100% 100% }
            .text-with-image__item:nth-of-type(even) {
                flex-direction: row-reverse;
                background-position: 0% 100%;
            }
        }

            .text-with-image__image { opacity: 0 }
            .text-with-image__item.is-active .text-with-image__image { opacity: 1 }
            .text-with-image__item.is-active:nth-of-type(odd) .text-with-image__image { animation: slideRight .3s linear both }
            .text-with-image__item.is-active:nth-of-type(even) .text-with-image__image { animation: slideLeft .3s linear both }
            .text-with-image__image picture {
                width: 100%;
                height: 100%;
            }
            @media screen and (min-width: 768px) {
                .text-with-image__image { width: calc(50% + min(64px, calc(100vw * (32 / 768)))) }
                .text-with-image__item:nth-of-type(odd) .text-with-image__image { margin-right: max(-64px, calc(-100vw * (32 / 768))) }
                .text-with-image__item:nth-of-type(even) .text-with-image__image { margin-left: max(-64px, calc(-100vw * (32 / 768))) }
                .text-with-image__image img {
                    width: 100%;
                    height: calc(100% - 32px);
                    object-fit: cover;
                    object-position: 100% 50%;
                }
            }
            @media screen and (max-width: 767px) {
                .text-with-image__image { width: calc(100vw * (359 / 375)) }
                .text-with-image__item:nth-of-type(even) .text-with-image__image { margin-left: auto }
                .text-with-image__image img { width: 100% }
            }

            .text-with-image__details {
                position: relative;
                z-index: 1;
                background-color: var(--fontSubBlack);
                opacity: 0;
            }
            .text-with-image__item.is-active .text-with-image__details {
                opacity: 1;
                animation-duration: .3s;
                animation-timing-function: var(--linear);
                animation-fill-mode: both;
            }
            .text-with-image__item.is-active:nth-of-type(odd) .text-with-image__details { animation-name: slideLeft }
            .text-with-image__item.is-active:nth-of-type(even) .text-with-image__details { animation-name: slideRight }
            @media screen and (min-width: 768px) {
                .text-with-image__details {
                    width: calc(50% + min(64px, calc(100vw * (32 / 768))));
                    min-height: min(528px, calc(100vw * (320 / 768)));
                    margin-top: 32px;
                }
                .text-with-image__item:nth-of-type(odd) .text-with-image__details { margin-left: max(-64px, calc(-100vw * (32 / 768))) }
                .text-with-image__item:nth-of-type(even) .text-with-image__details { margin-right: max(-64px, calc(-100vw * (32 / 768))) }
            }
            @media screen and (max-width: 767px) {
                .text-with-image__details {
                    width: calc(100vw * (359 / 375));
                    min-height: 256px;
                    margin-top: min(calc(-100vw * (32 / 375)), -32px);
                }
                .text-with-image__item:nth-of-type(odd) .text-with-image__details { margin-left: auto }
                .text-with-image__item:nth-of-type(even) .text-with-image__details { margin-right: auto }
            }

                .text-with-image__details__inner { padding-inline: clamp(32px, calc(100vw * (32 / 375)), 128px) }
                @media screen and (min-width: 768px) {
                    .text-with-image__details__inner {
                        padding-top: min(calc(100vw * (60 / 768)), 136px);
                        padding-bottom: calc(clamp(32px, calc(100vw * (32 / 375)), 64px) + 36px);
                    }
                }
                @media screen and (max-width: 767px) {
                    .text-with-image__details__inner {
                        padding-top: clamp(22px, calc(100vw * (22 / 375)), 136px);
                        padding-bottom: clamp(32px, calc(100vw * (32 / 375)), 64px);
                    }
                }

                    .text-with-image__title { margin-bottom: clamp(16px, calc(100vw * (16 / 375)), 27px) }
                    .text-with-image__title.title--large { margin-bottom: clamp(16px, calc(100vw * (16 / 375)), 36px) }

                    .text-with-image__catch { color: var(--primaryColor) }

                    .text-with-image__description { margin-bottom: clamp(16px, calc(100vw * (16 / 375)), 32px) }

                    .text-with-image__details__list {}

                        .text-with-image__details__item {
                            display: grid;
                            grid-template-columns: 32px 1fr;
                        }
                        .text-with-image__details__item::before {
                            display: block;
                            width: 32px;
                            color: var(--primaryColor);
                            font-size: calc(1em + 0.02rem);
                            letter-spacing: .2em;
                        }
                        .text-with-image__details__item:nth-of-type(1):before { content: "1." }
                        .text-with-image__details__item:nth-of-type(2):before { content: "2." }
                        .text-with-image__details__item:nth-of-type(3):before { content: "3." }
                        .text-with-image__details__item:nth-of-type(4):before { content: "4." }
                        .text-with-image__details__item:nth-of-type(5):before { content: "5." }
                        .text-with-image__details__item:nth-of-type(6):before { content: "6." }
                        .text-with-image__details__item:nth-of-type(7):before { content: "7." }
                        .text-with-image__details__item:nth-of-type(8):before { content: "8." }
                        .text-with-image__details__item:nth-of-type(9):before { content: "9." }
                        .text-with-image__details__item:nth-of-type(10):before { content: "10." }


                    .text-with-image__icon-set { display: flex }
                    .text-with-image__icon-set + .text-with-image__icon-set { margin-top: 27px }

                        .text-with-image__icon-set__image:first-child {
                            width: clamp(68px, calc(100vw * (152 / 1440)), 152px);
                            margin-right: min(30px, calc(100vw * (30 / 1920)));
                        }
                        .text-with-image__icon-set__text + .text-with-image__icon-set__image {
                            width: min(194px, calc(100vw * (194 / 1440)));
                            width: clamp(68px, calc(100vw * (194 / 1440)), 194px);
                        }

                        .text-with-image__icon-set__text { margin-top: min(12px, calc(100vw * (12 / 1920))) }
                        .text-with-image__icon-set__image + .text-with-image__icon-set__text { margin-top: min(18px, calc(100vw * (18 / 1920))) }

                            .text-with-image__icon-set .title span { color: var(--primaryColor) }
                            .text-with-image__icon-set .text span { color: var(--secondaryColor) }






/*------------------------------------*\
    $WHITEBOARD
\*------------------------------------*/
.whiteboard {
    position: relative;
    padding-inline: 0;
    padding-bottom: 46px;
    background-image: linear-gradient(var(--background3), var(--background3));
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: calc(100% * (736 / 1920)) calc(100% - 46px);
    color: var(--background1);
}

    .whiteboard__inner {
        background-color: white;
        padding-top: 58px;
        padding-inline: clamp(16px, calc(100vw * (68 / 1920)), 68px);
        padding-bottom: 52px;
    }

        .whiteboard__list { display: flex }
        @media screen and (min-width: 768px) {
            .whiteboard__list { column-gap: min(80px, calc(100vw * (80 / 1920))) }
        }
        @media screen and (max-width: 767px) {
            .whiteboard__list {
                flex-direction: column;
                row-gap: 48px;
            }
        }

            .whiteboard__item { width: 100% }
            @media screen and (min-width: 768px) {
                .whiteboard__item { position: relative }
                .whiteboard__item:not(:last-of-type):before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: calc(100% + min(31px, calc(100vw * (31 / 1920))));
                    border: min(22px, calc(100vw * (22 / 1920))) solid transparent;
                    border-left: min(30px, calc(100vw * (30 / 1920))) solid var(--primaryColor);
                }
            }


        .whiteboard .text {
            color: black;
            font-weight: 700;
        }





/*------------------------------------*\
    $FAQ
\*------------------------------------*/
.faq {
    transform: translateY(10vh);
    opacity: 0;
    transition:
        transform 1s var(--easeOutQuart),
        opacity 1s var(--easeOutQuart);
}
.faq.is-active {
    transform: translateY(0);
    opacity: 1;
}

.faq__block { margin-block: 58px }

    .faq__q {
        display: grid;
        grid-template-columns: 31px 1fr;
        grid-column-gap: 15px;
    }
    .faq__q::before {
        content: "Q";
        display: block;
        height: 1em;
        border-right: 2px solid var(--primaryColor);
        font-family: var(--fontEn2);
        font-size: calc(1em * (24 / 18));
        font-weight: 300;
        line-height: 1;
    }


    .faq__a {
        display: grid;
        grid-template-columns: 31px 1fr;
        grid-column-gap: 15px;
        padding-left: min(32px, calc(100vw * (32 / 1920)));
    }
    .faq__a::before {
        content: "A";
        display: block;
        width: 31px;
        height: 1em;
        border-right: 2px solid var(--secondaryColor);
        font-family: var(--fontEn2);
        font-size: calc(1em * (24 / 14));
        font-weight: 300;
        line-height: 1;
    }