@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * COMMON..............共通パーツ
 * MOVIE...............メイン動画
 * SLIDER..............スライダーコンテンツ
 * RECRUIT.............リクルートコンテンツ
 * NEWS................ニュースコンテンツ
 */





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
.main { margin-top: 0 }


.home-header { color: white }

    .home-header__inner { max-width: 352px }

        .home-header__title {
            font-family: var(--fontEn);
            font-size: 4.0rem;
            font-weight: 500;
            line-height: 1.25;
            letter-spacing: .05em;
        }

        .home-header__description {
            font-size: 1.4rem;
            letter-spacing: .1em;
        }
        @media screen and (min-width: 768px) {
            .main-header__description {
                font-weight: 500;
                line-height: calc(24 / 14);
            }
        }
        @media screen and (max-width: 767px) {
            .main-header__description {
                font-weight: 300;
                line-height: calc(26 / 14);
            }
        }

        @media screen and (min-width: 768px) {
            .home-header__button { width: min(224px, 100%) }
        }
        @media screen and (max-width: 767px) {
            .home-header__button { width: 100% }
        }






/*------------------------------------*\
    $MOVIE
\*------------------------------------*/


.main-movie {
    position: relative;
    width: 100%;
    overflow: hidden;
}

    @media screen and (min-width: 768px) {
        .main-movie__wrapper { aspect-ratio: 16 / 9 }
    }
    @media screen and (max-width: 767px) {
        .main-movie__wrapper { aspect-ratio: 11 / 18 }
    }
    .main-movie__wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background-color: rgb(0 0 0 / 0.2);
    }

        .main-movie__wrapper .video-js {
            width: 100%;
            height: 100%;
        }


    .main-movie__catch {
        position: relative;
        z-index: 1;
        padding-left: .2em;
        margin-inline: auto;
        color: white;
        font-family: var(--fontEn);
        font-size: clamp(4.0rem, calc(100vw * (40 / 375)), 8.0rem);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: .2em;
        text-align: center;
    }

    @media screen and (max-width: 767px) {
        .main-movie__button {
            position: absolute;
            top: 50%;
            right: 0;
            z-index: 2;
            transform: translateY(-50%);
            background-color: var(--primaryColor);
            transition: transform .3s var(--linear);
        }
        .main-movie__button.closed { transform: translateX(100%) }

            .main-movie__button__link {
                display: block;
                height: 100px;
                padding-top: .1em;
                color: var(--primaryVariant);
                font-family: var(--fontEn);
                font-size: 1.6rem;
                font-weight: 700;
                line-height: 2.1875;
                letter-spacing: .1em;
                text-align: center;
                writing-mode: vertical-lr;
            }
    }


    @media screen and (min-width: 768px) {
        .main-movie__animation { display: none }
    }
    @media screen and (max-width: 767px) {
        #my-video-sp_html5_api {
            display: none;
        }
        .main-movie__animation {
            position: absolute;
            inset: 0;
        }
        .js-animation-text {
            display: none;
        }

            .main-movie__animation__item {
                position: absolute;
                bottom: 10%;
                left: 0;
                display: none;
                width: 100%;
                padding-inline: calc(100% * (16 / 375));
                color: white;
                font-family: YuMincho, 'Yu Mincho', serif;
                font-size: 2.6rem;
                font-weight: 700;
                line-height: 1.75;
                animation-name: movieDisplayText;
                animation-timing-function: var(--linear);
                animation-fill-mode: both;
            }
            .main-movie__animation__item.is-right { text-align: right }

                .main-movie__animation__item span {
                    position: relative;
                    display: inline-block;
                    animation-name: movieOnText;
                    animation-duration: 0.6s;
                    animation-timing-function: var(--easeOutBack);
                    animation-fill-mode: both;
                }
                .main-movie__animation__item span:nth-of-type(2) { animation-delay: 0.05s }
                .main-movie__animation__item span:nth-of-type(3) { animation-delay: 0.10s }
                .main-movie__animation__item span:nth-of-type(4) { animation-delay: 0.15s }
                .main-movie__animation__item span:nth-of-type(5) { animation-delay: 0.20s }
                .main-movie__animation__item span:nth-of-type(6) { animation-delay: 0.25s }
                .main-movie__animation__item span:nth-of-type(7) { animation-delay: 0.30s }
                .main-movie__animation__item span:nth-of-type(8) { animation-delay: 0.35s }
                .main-movie__animation__item span:nth-of-type(9) { animation-delay: 0.40s }
                .main-movie__animation__item span:nth-of-type(10) { animation-delay: 0.45s }
                .main-movie__animation__item span:nth-of-type(11) { animation-delay: 0.50s }
                .main-movie__animation__item span:nth-of-type(12) { animation-delay: 0.55s }
                .main-movie__animation__item span:nth-of-type(13) { animation-delay: 0.60s }
                .main-movie__animation__item span:nth-of-type(14) { animation-delay: 0.65s }
                .main-movie__animation__item span:nth-of-type(15) { animation-delay: 0.70s }
                .main-movie__animation__item span:nth-of-type(16) { animation-delay: 0.75s }
                .main-movie__animation__item span:nth-of-type(17) { animation-delay: 0.80s }
                .main-movie__animation__item span:nth-of-type(18) { animation-delay: 0.85s }
                .main-movie__animation__item span:nth-of-type(19) { animation-delay: 0.90s }
                .main-movie__animation__item span:nth-of-type(20) { animation-delay: 0.95s }
                .main-movie__animation__item span:nth-of-type(21) { animation-delay: 1.00s }
                .main-movie__animation__item span:nth-of-type(22) { animation-delay: 1.05s }
                .main-movie__animation__item span:nth-of-type(23) { animation-delay: 1.10s }
                .main-movie__animation__item span:nth-of-type(24) { animation-delay: 1.15s }
                .main-movie__animation__item span:nth-of-type(25) { animation-delay: 1.20s }
                .main-movie__animation__item span:nth-of-type(26) { animation-delay: 1.25s }
                .main-movie__animation__item span:nth-of-type(27) { animation-delay: 1.30s }
                .main-movie__animation__item span:nth-of-type(28) { animation-delay: 1.35s }
                .main-movie__animation__item span:nth-of-type(29) { animation-delay: 1.40s }
                .main-movie__animation__item span:nth-of-type(30) { animation-delay: 1.45s }
                .main-movie__animation__item span:nth-of-type(31) { animation-delay: 1.50s }
                .main-movie__animation__item span:nth-of-type(32) { animation-delay: 1.55s }
                .main-movie__animation__item span:nth-of-type(33) { animation-delay: 1.60s }
                .main-movie__animation__item span:nth-of-type(34) { animation-delay: 1.65s }
                .main-movie__animation__item span:nth-of-type(35) { animation-delay: 1.70s }

    }

@keyframes movieOnText {
    from {
        transform: translateY(1.5em);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}








/*------------------------------------*\
    $SLIDER
\*------------------------------------*/
.home-slider {}

    /* Tabs */
    .home-slider__tab__list {
        padding-top: clamp(46px, calc(100vw * (46 / 375)), 114px);
        padding-bottom: clamp(24px, calc(100vw * (24 / 375)), 64px);
    }
    @media screen and (min-width: 768px) {
        .home-slider__tab__list { margin-left: min(75%, calc(100% - 256px - var(--sidePadding))) }
    }

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

        .home-slider__list { display: grid }

            .home-slider__item {
                grid-area: 1 / -1;
                opacity: 0;
                pointer-events: none;
            }
            .home-slider__item.is-active {
                z-index: 10;
                opacity: 1;
                pointer-events: visible;
            }
            @media screen and (min-width: 768px) {
                .home-slider__item {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    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)) min(640px, calc(100vw * (320 / 768)));
                }
            }

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

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

                    .home-slider__details__inner {
                        padding-right: var(--sidePadding);
                        padding-left: clamp(32px, calc(100vw * (32 / 375)), 128px);
                    }
                    @media screen and (min-width: 768px) {
                        .home-slider__details__inner {
                            padding-top: min(calc(100vw * (60 / 768)), 120px);
                            padding-bottom: calc(clamp(32px, calc(100vw * (32 / 375)), 64px) + 36px);
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .home-slider__details__inner {
                            padding-top: clamp(22px, calc(100vw * (22 / 375)), 120px);
                            padding-bottom: clamp(32px, calc(100vw * (32 / 375)), 64px);
                        }
                    }

                        .home-slider__number {
                            position: relative;
                            padding-left: 68px;
                            color: var(--secondaryColor);
                            font-family: var(--fontEn);
                            font-size: 1.6rem;
                            font-weight: 500;
                            line-height: 1.5;
                            letter-spacing: .05em;
                        }
                        .home-slider__item:nth-of-type(3n + 2) .home-slider__number { color: var(--primaryColor) }
                        .home-slider__number::before {
                            content: "";
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                            width: 62px;
                            height: 1px;
                            background-color: var(--secondaryColor);
                        }
                        .home-slider__item:nth-of-type(3n + 2) .home-slider__number::before { background-color: var(--primaryColor) }
                        @media screen and (min-width: 768px) {
                            .home-slider__number { margin-bottom: 52px }
                        }
                        @media screen and (max-width: 767px) {
                            .home-slider__number { margin-bottom: 8px }
                        }

                        .home-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;
                        }
                        .home-slider__item:nth-of-type(3n + 1) .home-slider__title { color: var(--fontSubBrown) }
                        .home-slider__item:nth-of-type(3n + 2) .home-slider__title { color: white }
                        .home-slider__item:nth-of-type(3n) .home-slider__title { color: var(--fontSubBlack) }

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

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

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





/*------------------------------------*\
    $RECRUIT
\*------------------------------------*/
.home-recruit {
    display: grid;
    z-index: 1;
}
@media screen and (min-width: 768px) {
    .home-recruit {
        align-items: end;
        margin-top: calc(clamp(-64px, calc(-100vw * (32 / 375)), -32px) - 16px);
    }
}
@media screen and (max-width: 767px) {
    .home-recruit { padding-top: 68px }
}

    .home-recruit__header { padding-inline: var(--sidePadding) }
    @media screen and (min-width: 768px) {
        .home-recruit__header {
            grid-area: 1 / -1;
            z-index: 1;
            height: 720px;
            background-image:
                linear-gradient(white, white),
                linear-gradient(var(--background3), var(--background3));
            background-repeat: no-repeat;
            background-position: 0 100%;
            background-size:
                100% 704px,
                calc(100% * (736 / 1920)) 100%;
            color: var(--fontSubBrown);
        }
    }
    @media screen and (max-width: 767px) {
        .home-recruit__header { margin-bottom: 32px }
    }

        @media screen and (min-width: 1280px) {
            .home-recruit__header__inner { padding-inline: calc(100% * (207 / 1760)) }
        }
        @media screen and (min-width: 768px) {
            .home-recruit__header__inner {
                padding-top: 227px;
                box-sizing: content-box;
            }
        }

            @media screen and (min-width: 768px) {
                .home-recruit__header__title { margin-bottom: 28px }
            }
            @media screen and (max-width: 767px) {
                .home-recruit__header__title { margin-bottom: 8px }
            }

                .home-recruit__header__description { margin-bottom: clamp(25px, calc(100vw * (25 / 375)), 42px) }


    .home-recruit__tab { height: 100% }
    @media screen and (min-width: 768px) {
        .home-recruit__tab {
            grid-area: 1 / -1;
            padding-inline: var(--sidePadding);
        }
    }
    @media screen and (max-width: 767px) {
        .home-recruit__tab {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }
    }

        .home-recruit__tab__list {
            grid-template-rows: repeat(3, max-content);
            height: 100%;
        }
        @media screen and (min-width: 768px) {
            .home-recruit__tab__list {
                width: min(960px, 100%);
                min-height: 1150px;
                padding-top: calc(clamp(32px, calc(100vw * (32 / 375)), 64px) + 222px);
                margin-inline: auto;
            }
        }
        @media screen and (max-width: 767px) {
            .home-recruit__tab__list { padding-top: 8px }
        }


    .home-recruit__content {
        width: 100%;
        pointer-events: none;
    }
    @media screen and (min-width: 768px) {
        .home-recruit__content {
            grid-area: 1 / -1;
            z-index: 1;
            padding-top: calc(clamp(32px, calc(100vw * (32 / 375)), 64px) + 86px);
            padding-inline: var(--sidePadding);
            margin-left: auto;
        }
    }
    @media screen and (max-width: 767px) {
        .home-recruit__content {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            margin-top: 128px;
        }
    }

        .home-recruit__list { pointer-events: visible }
        @media screen and (min-width: 1024px) {
            .home-recruit__list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-column-gap: calc(100% * (16 / 1040));
                width: calc(100% * (1040 / 1760));
            }
        }
        @media screen and (min-width: 768px) {
            .home-recruit__list {
                margin-left: auto;
            }
        }
        @media screen and (max-width: 1023px) {
            .home-recruit__list {
                display: flex;
                flex-direction: column;
                row-gap: 32px;
                width: 50%;
            }
        }
        @media screen and (max-width: 767px) {
            .home-recruit__list { width: 100% }
        }

            @media screen and (min-width: 1024px) {
                .home-recruit__item:nth-of-type(3n + 1) {
                    padding-top: 144px;
                    background-color: white;
                }
                .home-recruit__item:nth-of-type(3n + 2) {
                    padding-top: 208px;
                    background-color: var(--background3);
                    color: white;
                }
                .home-recruit__item:nth-of-type(3n) {
                    padding-top: 80px;
                    background-color: var(--background3);
                    color: white;
                }
            }
            @media screen and (max-width: 1023px) {
                .home-recruit__item {
                    width: calc(100% * (359 / 375));
                    padding-top: 16px;
                    background-color: white;
                }
                .home-recruit__item:nth-of-type(even) { margin-left: auto }
            }

                @media screen and (min-width: 1024px) {
                    .home-recruit__image { height: 560px }
                }
                @media screen and (max-width: 1023px) {
                    .home-recruit__image { aspect-ratio: 359 / 240 }
                }

                    .home-recruit__image :is(picture, img) {
                        width: 100%;
                        height: 100%;
                    }
                    .home-recruit__image img { object-fit: cover }


                .home-recruit__details { padding-bottom: clamp(32px, calc(100vw * (32 / 375)), 40px) }
                @media screen and (min-width: 1024px) {
                    .home-recruit__details {
                        padding-top: 16px;
                        padding-inline: 24px;
                    }
                }
                @media screen and (max-width: 1023px) {
                    .home-recruit__details {
                        padding-top: 18px;
                        padding-inline: 32px;
                    }
                }

                    .home-recruit__title {
                        padding-bottom: 14px;
                        margin-bottom: 12px;
                        border-bottom: 1px solid var(--fontSubBrown);
                        font-family: var(--fontSub);
                        font-size: 1.8rem;
                        font-weight: 500;
                        line-height: calc(24 / 18);
                        letter-spacing: .05em;
                    }
                    @media screen and (min-width: 1024px) {
                        .home-recruit__item:nth-of-type(3n + 1) .home-recruit__title { color: var(--fontSubBrown) }
                    }

                    .home-recruit__description {
                        margin-bottom: clamp(12px, calc(100vw * (12 / 375)), 14px);
                        font-size: 1.4rem;
                        font-weight: 300;
                        line-height: calc(24 / 14);
                        letter-spacing: .05em;
                    }





/*------------------------------------*\
$NEWS
\*------------------------------------*/
.home-news {
    padding-top: clamp(68px, calc(100vw * (68 / 375)), 156px);
    padding-inline: var(--sidePadding);
    padding-bottom: clamp(97px, calc(100vw * (97 / 375)), 156px);
}
@media screen and (min-width: 768px) {
    .home-news {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        column-gap: 52px;
        padding-right: calc(100% * (76 / 1920) + var(--sidePadding));
        padding-left: calc(100% * (112 / 1920) + var(--sidePadding));
    }
}
@media screen and (max-width: 767px) {
    .home-news { display: grid }
}

    @media screen and (max-width: 767px) {
        .home-news__header { grid-area: 1 / -1 }
    }

        @media screen and (max-width: 767px) {
            .home-news__header__inner {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
            }
        }

            .home-news__header__title { margin-bottom: 47px }
            @media screen and (max-width: 767px) {
                .home-news__header__title { text-align: center }
            }


    @media screen and (min-width: 768px) {
        .home-news__content {
            flex-grow: 1;
            width: 1px;
            max-width: 1056px;
        }
    }
    @media screen and (max-width: 767px) {
        .home-news__content {
            grid-area: 1 / -1;
            margin-top: 108px;
            margin-bottom: 80px;
        }
    }

        .home-news__list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
            grid-column-gap: calc(100% * (48 / 1056));
            grid-row-gap: clamp(32px, calc(100vw * (32 / 375)), 48px);
        }

            .home-news__item {}

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

                    .home-news__image { aspect-ratio: 320 / 224 }

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


                    .home-news__details {
                        padding-block: 14px;
                        padding-inline: 20px;
                    }

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

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