@charset "UTF-8";

.common-btn {
    background-color: #006acd;
    width: 23.4rem;
    height: 6.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    border-radius: 4.5rem;
    border: 0.1rem solid transparent;
    box-sizing: border-box;
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;

    @media screen and (max-width: 767px) {
        width: 100%;
        max-width: 16.4rem;
        height: 5.6rem;
        padding: 0 2rem;
    }

    & span {
        font-style: normal;
        font-weight: 600;
        font-size: 1.8rem;
        line-height: 1;
        letter-spacing: 0.03em;
        color: #ffffff;
        transition: color 0.35s ease;

        @media screen and (max-width: 767px) {
            font-size: 1.6rem;
        }
    }

    & img {
        width: 1.3rem;
        vertical-align: middle;
        transition:
            transform 0.35s ease,
            filter 0.35s ease;
    }

    &:hover {
        transform: translateY(-0.2rem);
        box-shadow: 0 0.8rem 2rem rgba(0, 106, 205, 0.28);

        & img {
            transform: translateX(0.4rem);
        }
    }
}

.green {
    background-color: #00b87e;

    &:hover {
        background-color: #00a571;
        box-shadow: 0 0.8rem 2rem rgba(0, 184, 126, 0.28);
    }
}

.black {
    background-color: #000000;

    &:hover {
        background-color: #222222;
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.28);
    }
}

.outline {
    background-color: #ffffff;
    border-color: #006acd;

    & span {
        color: #006acd;
    }

    &:hover {
        background-color: #006acd;
        box-shadow: 0 0.8rem 2rem rgba(0, 106, 205, 0.28);

        & span {
            color: #ffffff;
        }

        & img {
            filter: brightness(0) invert(1);
        }
    }
}

.white {
    background-color: #ffffff;

    @media screen and (max-width: 767px) {
        width: 100%;
    }

    & span {
        color: #006acd;
    }

    &:hover {
        background-color: transparent;
        border-color: #ffffff;
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.12);

        & span {
            color: #ffffff;
        }

        & img {
            filter: brightness(0) invert(1);
        }
    }
}

.blue:hover {
    background-color: #005bb0;
}

.about-title,
.career-title,
.data-title,
.staff-title {
    font-style: normal;
    font-weight: 700;
    font-size: 5.4rem;
    line-height: 1.4;
    letter-spacing: 0.09em;
    color: #1d1d1d;
    margin-bottom: 1.6rem;

    @media screen and (max-width: 767px) {
        font-size: 2.8rem;
        letter-spacing: 0.06em;
        margin-bottom: 1rem;
    }
}

.about-en,
.career-en,
.data-en,
.staff-en {
    font-family: var(--mont);
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.4rem;
    letter-spacing: 0.02em;
    color: #006acd;
    margin-bottom: 6.6rem;

    @media screen and (max-width: 767px) {
        font-size: 1.4rem;
        line-height: 1.7rem;
        margin-bottom: 3.2rem;
    }
}

@keyframes banner-fade-up {
    from {
        opacity: 0;
        transform: translateY(2.4rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes banner-img1-in {
    from {
        opacity: 0;
        transform: translate(-6rem, 3rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes banner-img2-in {
    from {
        opacity: 0;
        transform: translate(4rem, -4rem) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

#banner {
    width: 100%;
    position: relative;
    overflow: hidden;

    .banner-text {
        position: relative;
        z-index: 99;
        padding-top: 30.3rem;
        padding-left: 12.4rem;
        padding-bottom: 38rem;

        @media screen and (max-width: 767px) {
            padding: 35.5rem 2rem 7.3rem;
        }

        .banner-title {
            font-style: normal;
            font-weight: 600;
            font-size: 7rem;
            line-height: 1.44;
            letter-spacing: 0.05em;
            color: #1d1d1d;
            margin-bottom: 4rem;
            animation: banner-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s
                both;

            @media screen and (max-width: 767px) {
                font-size: 4.1rem;
                margin-bottom: 2.5rem;
            }
        }

        .intro {
            font-style: normal;
            font-weight: 500;
            font-size: 1.6rem;
            line-height: 2.56;
            letter-spacing: 0.07em;
            color: #000000;
            margin-bottom: 8.2rem;
            animation: banner-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s
                both;

            @media screen and (max-width: 767px) {
                line-height: 3.2rem;
                letter-spacing: 0.07em;
                margin-bottom: 3.5rem;
            }
        }

        .buttons-flex {
            display: flex;
            align-items: center;
            gap: 2rem;
            animation: banner-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s
                both;

            @media screen and (max-width: 767px) {
                flex-wrap: wrap;
                gap: 1rem 0.7rem;
                width: 100%;
                .blue,
                .green {
                    width: 16.4rem;
                }
                .black {
                    width: 100%;
                    max-width: 100%;
                }
            }
        }
    }

    .banner-img-container {
        position: absolute;
        top: 3.7rem;
        right: 0;

        @media screen and (max-width: 767px) {
            position: relative;
            top: auto;
            right: auto;
            width: 100%;
            margin: 4.1rem 0 2rem 0;
        }

        .banner-img1 {
            position: absolute;
            width: 124.7rem;
            right: 8.8rem;
            animation: banner-img1-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s
                both;

            @media screen and (max-width: 767px) {
                width: 42.439rem;
                right: unset;
                left: -6.5rem;
            }

            & img {
                width: 100%;
                vertical-align: middle;
            }
        }

        .banner-img2 {
            position: absolute;
            top: 4.6rem;
            right: 0;
            width: 55.2rem;
            animation: banner-img2-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s
                both;

            @media screen and (max-width: 767px) {
                top: 1.3rem;
                right: -1.4rem;
                width: 19.19rem;
            }

            & img {
                width: 100%;
                vertical-align: middle;
            }
        }
    }

    @media screen and (max-width: 767px) {
        display: flex;
        flex-direction: column-reverse;
    }

    @media (prefers-reduced-motion: reduce) {
        .banner-text {
            .banner-title,
            .intro,
            .buttons-flex {
                animation: none;
            }
        }

        .banner-img-container {
            .banner-img1,
            .banner-img2 {
                animation: none;
            }
        }
    }
}

#section1 {
    position: relative;
    z-index: 1;
    padding-bottom: 14rem;

    @media screen and (max-width: 767px) {
        padding-bottom: 8rem;
    }

    .section1-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8rem;
        margin-bottom: 10rem;

        @media screen and (max-width: 767px) {
            flex-direction: column;
            gap: 2.4rem;
            margin-bottom: 4rem;
        }

        .section1-title {
            flex: 0 1 63rem;
            font-style: normal;
            font-weight: 600;
            font-size: 4.8rem;
            line-height: 1.65;
            letter-spacing: 0.11em;
            color: #1d1d1d;

            @media screen and (max-width: 767px) {
                flex: none;
                width: 100%;
                font-size: 2.6rem;
                line-height: 4.4rem;
                letter-spacing: 0.11em;
            }
        }

        .section1-body {
            flex: 0 1 59.3rem;
            padding-top: 0.1rem;

            @media screen and (max-width: 767px) {
                flex: none;
                width: 100%;
                padding-top: 0;
            }

            .section1-text {
                font-style: normal;
                font-weight: 500;
                font-size: 1.8rem;
                line-height: 4.8rem;
                letter-spacing: 0.04em;
                color: #000000;
                margin-bottom: 6.5rem;
                @media screen and (max-width: 767px) {
                    font-size: 1.6rem;
                    line-height: 3.4rem;
                    margin-bottom: 4.2rem;
                    letter-spacing: 0.07em;
                }
            }
        }
    }

    .section1-images {
        display: flex;
        justify-content: center;
        gap: 4rem;
        list-style: none;
        margin: 0;
        padding: 0;

        @media screen and (max-width: 767px) {
            flex-direction: column;
            align-items: center;
            gap: 1.6rem;
            padding: 0 1.5rem;
        }

        & li {
            flex: 0 0 58.2rem;
            width: 58.2rem;
            border-radius: 1.6rem;
            overflow: hidden;
            opacity: 0;
            transform: translateY(4rem) scale(0.96);
            transition:
                opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

            @media screen and (max-width: 767px) {
                flex: none;
                width: 100%;
                max-width: 34rem;
                border-radius: 1.2rem;
            }

            &:nth-child(1) {
                transition-delay: 0s;
            }

            &:nth-child(2) {
                margin-top: 5rem;
                transition-delay: 0.18s;

                @media screen and (max-width: 767px) {
                    margin-top: 0;
                }
            }

            &:nth-child(3) {
                transition-delay: 0.36s;
            }

            & img {
                width: 100%;
                vertical-align: middle;
            }
        }

        &.is-inview {
            & li {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .section1-images {
            & li {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }
    }
}

@keyframes ellipse-merge-left {
    0% {
        left: -12rem;
        top: 5rem;
        opacity: 0;
        transform: scale(0.72) rotate(-14deg);
        filter: blur(1.4rem);
    }
    40% {
        opacity: 1;
        filter: blur(0.4rem);
    }
    100% {
        left: 0;
        top: 0;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes ellipse-merge-right {
    0% {
        left: 46.4rem;
        top: -5rem;
        opacity: 0;
        transform: scale(0.72) rotate(14deg);
        filter: blur(1.4rem);
    }
    40% {
        opacity: 1;
        filter: blur(0.4rem);
    }
    100% {
        left: 34.4rem;
        top: 0;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes ellipse-label-left {
    0% {
        left: -8rem;
        top: 3rem;
        opacity: 0;
    }
    100% {
        left: 0;
        top: 0;
        opacity: 1;
    }
}

@keyframes ellipse-label-right {
    0% {
        left: 42.4rem;
        top: -3rem;
        opacity: 0;
    }
    100% {
        left: 34.4rem;
        top: 0;
        opacity: 1;
    }
}

@keyframes ellipse-merge-left-sp {
    0% {
        left: -3.5rem;
        top: 2rem;
        opacity: 0;
        transform: scale(0.72) rotate(-14deg);
        filter: blur(1.4rem);
    }
    40% {
        opacity: 1;
        filter: blur(0.4rem);
    }
    100% {
        left: 0;
        top: 0;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes ellipse-merge-right-sp {
    0% {
        left: 22.5rem;
        top: -2rem;
        opacity: 0;
        transform: scale(0.72) rotate(14deg);
        filter: blur(1.4rem);
    }
    40% {
        opacity: 1;
        filter: blur(0.4rem);
    }
    100% {
        left: 16.6rem;
        top: 0;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes ellipse-label-left-sp {
    0% {
        left: -2.5rem;
        top: 1.2rem;
        opacity: 0;
    }
    100% {
        left: 0;
        top: 0;
        opacity: 1;
    }
}

@keyframes ellipse-label-right-sp {
    0% {
        left: 20.5rem;
        top: -1.2rem;
        opacity: 0;
    }
    100% {
        left: 16.6rem;
        top: 0;
        opacity: 1;
    }
}

#about {
    padding: 5rem 0 23rem;

    @media screen and (max-width: 767px) {
        padding: 0 0 6rem;
    }

    .about-content {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 6rem;

        @media screen and (max-width: 767px) {
            flex-direction: column;
            align-items: center;
            gap: 4rem;
        }

        .about-ellipses {
            position: relative;
            flex: 0 0 71.2rem;
            width: 71.2rem;
            height: 36.8rem;
            margin-bottom: 3rem;

            @media screen and (max-width: 767px) {
                flex: none;
                width: 34.2rem;
                height: 17.6rem;
                max-width: 100%;
                margin: 0 auto;
                overflow: visible;
            }

            .about-ellipse-img {
                position: absolute;
                top: 5rem;
                display: block;
                width: 36.8rem;
                height: 36.8rem;
                max-width: none;
                mix-blend-mode: multiply;
                opacity: 0;

                @media screen and (max-width: 767px) {
                    top: 2rem;
                    width: 17.6rem;
                    height: 17.6rem;
                }

                &.ellipse1 {
                    left: -12rem;

                    @media screen and (max-width: 767px) {
                        left: -3.5rem;
                    }
                }

                &.ellipse2 {
                    top: -5rem;
                    left: 46.4rem;

                    @media screen and (max-width: 767px) {
                        top: -2rem;
                        left: 22.5rem;
                    }
                }
            }

            .about-ellipse-text {
                position: absolute;
                top: 3rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 36.8rem;
                height: 36.8rem;
                text-align: center;
                color: #ffffff;
                z-index: 1;
                pointer-events: none;
                opacity: 0;

                @media screen and (max-width: 767px) {
                    top: 1.2rem;
                    width: 17.6rem;
                    height: 17.6rem;
                }

                .ja {
                    font-family: "Noto Sans CJK JP", sans-serif;
                    font-style: normal;
                    font-weight: 500;
                    font-size: 2.6rem;
                    line-height: 1.46;
                    text-align: center;
                    letter-spacing: 0.04em;
                    color: #ffffff;
                    margin-bottom: 2.4rem;
                    padding-top: 2rem;

                    @media screen and (max-width: 767px) {
                        font-size: 1.6rem;
                        letter-spacing: 0.04em;
                        margin-bottom: 0.6rem;
                        padding-top: 1rem;
                    }
                }

                .en {
                    margin-top: 0;
                    font-family: var(--mont);
                    font-style: normal;
                    font-weight: 400;
                    font-size: 1.8rem;
                    line-height: 2.2rem;
                    letter-spacing: 0.06em;
                    @media screen and (max-width: 767px) {
                        margin-top: 0.4rem;
                        font-size: 1.2rem;
                    }
                }

                &.text1 {
                    left: -8rem;

                    @media screen and (max-width: 767px) {
                        left: -2.5rem;
                    }
                }

                &.text2 {
                    top: -3rem;
                    left: 42.4rem;

                    @media screen and (max-width: 767px) {
                        top: -1.2rem;
                        left: 20.5rem;
                    }
                }
            }

            &.is-inview {
                .about-ellipse-img {
                    &.ellipse1 {
                        animation: ellipse-merge-left 1.35s
                            cubic-bezier(0.33, 0.9, 0.25, 1) both;

                        @media screen and (max-width: 767px) {
                            animation-name: ellipse-merge-left-sp;
                        }
                    }

                    &.ellipse2 {
                        animation: ellipse-merge-right 1.35s
                            cubic-bezier(0.33, 0.9, 0.25, 1) 0.12s both;

                        @media screen and (max-width: 767px) {
                            animation-name: ellipse-merge-right-sp;
                        }
                    }
                }

                .about-ellipse-text {
                    &.text1 {
                        animation: ellipse-label-left 1.1s
                            cubic-bezier(0.33, 0.9, 0.25, 1) 0.35s both;

                        @media screen and (max-width: 767px) {
                            animation-name: ellipse-label-left-sp;
                        }
                    }

                    &.text2 {
                        animation: ellipse-label-right 1.1s
                            cubic-bezier(0.33, 0.9, 0.25, 1) 0.48s both;

                        @media screen and (max-width: 767px) {
                            animation-name: ellipse-label-right-sp;
                        }
                    }
                }
            }
        }

        .about-body {
            flex: 1;
            min-width: 0;
            max-width: 53.5rem;
            @media screen and (max-width: 767px) {
                max-width: none;
                width: 100%;
            }
            .about-title {
                margin-top: 1.4rem;
            }
            .about-en {
                margin-bottom: 4.6rem;
            }

            .about-text {
                font-style: normal;
                font-weight: 500;
                font-size: 1.8rem;
                line-height: 3.6rem;
                letter-spacing: 0.04em;
                color: #000000;
                margin-bottom: 6rem;

                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                    line-height: 2;
                    margin-bottom: 3.2rem;
                }
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .about-content {
            .about-ellipses {
                .about-ellipse-img {
                    top: 0;
                    opacity: 1;
                    transform: none;
                    filter: none;

                    &.ellipse1 {
                        left: 0;
                    }

                    &.ellipse2 {
                        left: 34.4rem;

                        @media screen and (max-width: 767px) {
                            left: 16.6rem;
                        }
                    }
                }

                .about-ellipse-text {
                    top: 0;
                    opacity: 1;

                    &.text1 {
                        left: 0;
                    }

                    &.text2 {
                        left: 34.4rem;

                        @media screen and (max-width: 767px) {
                            left: 16.6rem;
                        }
                    }
                }

                &.is-inview {
                    .about-ellipse-img,
                    .about-ellipse-text {
                        animation: none;
                    }
                }
            }
        }
    }
}

@keyframes career-strip-up {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes career-strip-down {
    from {
        transform: translate3d(0, -50%, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes career-strip-left {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes career-strip-right {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

#career {
    .career-track {
        height: auto;
    }

    .career-sticky {
        position: sticky;
        top: 14rem;

        @media screen and (max-width: 767px) {
            position: relative;
            top: auto;
        }
    }

    .career-panel {
        position: relative;
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 97.4rem;
        padding: 0 8rem 0 0;
        background: linear-gradient(180deg, #0046f6 -5.31%, #639afc 105.31%);
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 4rem;
        @media screen and (max-width: 767px) {
            flex-direction: column;
            height: auto;
            padding: 8rem 2rem 8rem;
            gap: 2.4rem;
        }

        .career-body {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            z-index: 1;
            padding: 24.5rem 16.3rem 0;
            box-sizing: border-box;

            @media screen and (max-width: 767px) {
                padding: 0;
                width: 100%;
            }

            .career-title,
            .career-en {
                color: #ffffff;
            }
            .career-en {
                margin-bottom: 4.6rem;
            }

            .career-text {
                font-style: normal;
                font-weight: 400;
                font-size: 1.8rem;
                line-height: 2;
                letter-spacing: 0.04em;
                color: #ffffff;
                margin-bottom: 6rem;
                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                    margin-bottom: 2.4rem;
                }
            }

            .career-btns {
                display: flex;
                flex-direction: column;
                gap: 1.6rem;

                .common-btn {
                    width: 49.6rem;
                    height: 8.8rem;

                    @media screen and (max-width: 767px) {
                        width: 100%;
                        max-width: 28.4rem;
                        height: 5.6rem;
                    }
                }
            }
        }

        .career-strip {
            display: flex;
            flex: 0 0 88rem;
            gap: 3rem;
            width: 85rem;
            min-height: 0;
            height: 100%;
            margin-left: -1rem;
            /* margin-right: 1rem; */
            overflow: hidden;
            border-radius: 1.6rem;

            @media screen and (max-width: 767px) {
                flex: none;
                flex-direction: column;
                width: calc(100% + 4rem);
                height: auto;
                margin: 0 -2rem;
                border-radius: 0;
                gap: 1.5rem;
            }

            .career-strip-col {
                flex: 1;
                min-width: 0;
                height: 100%;
                overflow: hidden;

                @media screen and (max-width: 767px) {
                    flex: none;
                    width: 100%;
                    height: 15.1rem;
                }
            }

            .career-strip-track {
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: 3rem;
                padding-bottom: 3rem;
                will-change: transform;
                backface-visibility: hidden;

                & img {
                    display: block;
                    width: 100%;
                    height: auto;
                }

                @media screen and (max-width: 767px) {
                    flex-direction: row;
                    width: max-content;
                    height: 100%;
                    gap: 1.5rem;
                    padding-right: 1.5rem;
                    padding-bottom: 0;

                    & img {
                        width: auto;
                        height: 100%;
                    }
                }
            }

            .career-strip-up .career-strip-track {
                animation: career-strip-up 45s linear infinite;

                @media screen and (max-width: 767px) {
                    animation-name: career-strip-left;
                }
            }

            .career-strip-down .career-strip-track {
                animation: career-strip-down 45s linear infinite;

                @media screen and (max-width: 767px) {
                    animation-name: career-strip-right;
                }
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .career-panel {
            .career-strip {
                .career-strip-up .career-strip-track,
                .career-strip-down .career-strip-track {
                    animation: none;
                }

                .career-strip-track {
                    & img[aria-hidden="true"] {
                        display: none;
                    }
                }
            }
        }
    }
}

#data {
    padding: 15rem 0 1rem;

    @media screen and (max-width: 767px) {
        padding: 8rem 0 0;
    }

    .data-head {
        margin-bottom: 6rem;

        @media screen and (max-width: 767px) {
            margin-bottom: 3.2rem;
        }

        .data-en {
            margin-bottom: 4.6rem;

            @media screen and (max-width: 767px) {
                margin-bottom: 1rem;
            }
        }

        .data-text {
            font-style: normal;
            font-weight: 400;
            font-size: 1.8rem;
            line-height: 2;
            letter-spacing: 0.04em;
            color: #000000;
            @media screen and (max-width: 767px) {
                font-size: 1.4rem;
            }
        }
    }

    .data-cards {
        display: flex;
        justify-content: space-between;
        gap: 3.2rem;
        list-style: none;
        margin: 0 0 6.4rem;
        padding: 0;

        @media screen and (max-width: 767px) {
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            margin: 0 0 3.2rem;
        }

        .data-card {
            flex: 0 0 44.2rem;
            width: 44.2rem;
            background-color: #ffffff;
            border-radius: 2rem;
            overflow: hidden;
            box-shadow: 0 0.4rem 2.4rem rgba(0, 106, 205, 0.06);
            opacity: 0;
            transform: translateY(4rem) scale(0.96);
            transition:
                opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

            @media screen and (max-width: 767px) {
                flex: none;
                width: 100%;
                max-width: 34rem;
                border-radius: 1.2rem;
            }

            &:nth-child(1) {
                transition-delay: 0s;
            }

            &:nth-child(2) {
                transition-delay: 0.18s;
            }

            &:nth-child(3) {
                transition-delay: 0.36s;
            }

            .data-card-media {
                position: relative;
                width: 100%;

                & img,
                & video {
                    display: block;
                    width: 100%;
                    height: auto;
                    vertical-align: middle;
                }
            }
        }

        &.is-inview {
            .data-card {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .data-cards {
            .data-card {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }
    }

    .data-more {
        display: flex;
        justify-content: flex-end;

        @media screen and (max-width: 767px) {
            justify-content: center;
        }
    }
}

@keyframes staff1-in {
    from {
        opacity: 0;
        transform: translate(-6rem, 4rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes staff2-in {
    from {
        opacity: 0;
        transform: translate(5rem, -4rem) scale(0.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes staff-fade-up {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

#staff {
    padding: 0 0 9rem;
    overflow: hidden;

    @media screen and (max-width: 767px) {
        padding: 6rem 0 6rem;
    }
    .staff-en {
        margin-bottom: 4.6rem;
        @media screen and (max-width: 767px) {
            margin-bottom: 2rem;
        }
    }

    .staff-content {
        display: flex;

        gap: 4rem;
        padding-right: 15.4rem;

        @media screen and (max-width: 767px) {
            flex-direction: column;
            align-items: stretch;
            gap: 3.2rem;
            padding: 0 2rem;
        }

        .staff-images {
            position: relative;
            flex: 0 0 104.676rem;
            width: 104.676rem;
            height: 72rem;

            @media screen and (max-width: 767px) {
                flex: none;
                width: 100%;
                height: 33.2rem;
                margin: 0 auto;
            }

            .staff-img {
                position: absolute;
                opacity: 0;

                & img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    max-width: none;
                    object-fit: contain;
                }

                &.staff1 {
                    left: 0;
                    bottom: 0;
                    width: 87.443rem;
                    height: 69.946rem;

                    @media screen and (max-width: 767px) {
                        width: 41.5rem;
                        height: auto;
                        aspect-ratio: 874 / 699;
                        left: -7.4rem;
                    }
                }

                &.staff2 {
                    top: 0;
                    right: 0;
                    width: 52.827rem;
                    height: 41.87rem;

                    @media screen and (max-width: 767px) {
                        width: 25.1rem;
                        height: auto;
                        aspect-ratio: 528 / 419;
                        right: -8.1rem;
                    }
                }
            }
        }

        .staff-body {
            flex: 1;
            min-width: 0;
            max-width: 60rem;
            opacity: 0;
            padding-top: 23rem;

            @media screen and (max-width: 767px) {
                padding-top: 0;
                max-width: none;
                width: 100%;
            }

            .staff-text {
                font-style: normal;
                font-weight: 500;
                font-size: 1.8rem;
                line-height: 2.2;
                letter-spacing: 0.04em;
                color: #000000;
                margin-bottom: 5.6rem;

                @media screen and (max-width: 767px) {
                    font-size: 1.6rem;
                    line-height: 3.4rem;
                    margin-bottom: 3.2rem;
                    letter-spacing: 0.07em;
                }
            }
        }
    }

    &.is-inview {
        .staff-content {
            .staff-images {
                .staff-img {
                    &.staff1 {
                        animation: staff1-in 1.2s cubic-bezier(0.22, 1, 0.36, 1)
                            0.1s both;
                    }

                    &.staff2 {
                        animation: staff2-in 1.15s
                            cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
                    }
                }
            }

            .staff-body {
                animation: staff-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1)
                    0.45s both;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .staff-content {
            .staff-images {
                .staff-img {
                    opacity: 1;
                }
            }

            .staff-body {
                opacity: 1;
            }
        }

        &.is-inview {
            .staff-content {
                .staff-images {
                    .staff-img {
                        animation: none;
                    }
                }

                .staff-body {
                    animation: none;
                }
            }
        }
    }
}

#internship {
    padding: 0 0 7rem;
    position: relative;

    @media screen and (max-width: 767px) {
        padding: 0 1.5rem 8rem;
    }

    .internship-panel {
        position: relative;
        width: 188rem;
        height: 85.8rem;
        margin: 0 auto;
        background: url("../img/top/intern-bg.png") no-repeat center / 100% 100%;

        @media screen and (max-width: 767px) {
            width: 100%;
            height: auto;
            min-height: 52rem;
            padding: 5.6rem 2rem 6.8rem;
            box-sizing: border-box;
            border-radius: 2rem;
            overflow: hidden;
            background: url("../img/top/intern-bg.png") no-repeat center / auto;
        }

        .internship-illust {
            position: absolute;
            z-index: 1;
            opacity: 0;
            transition:
                opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);

            & img {
                display: block;
                width: 100%;
                height: auto;
                max-width: none;
                vertical-align: middle;
            }

            &.intern1 {
                left: 11.5rem;
                top: 16.9rem;
                width: 41.4rem;
                transform: translateX(-5rem);
                transition-delay: 0.1s;

                @media screen and (max-width: 767px) {
                    left: 50%;
                    right: auto;
                    top: auto;
                    bottom: 1.2rem;
                    width: 13.2rem;
                    transform: translate(calc(-100% - 0.6rem), 2rem);
                }
            }

            &.intern2 {
                right: 14.4rem;
                top: 15.4rem;
                width: 37.9rem;
                transform: translateX(5rem);
                transition-delay: 0.25s;

                @media screen and (max-width: 767px) {
                    left: 50%;
                    right: auto;
                    top: auto;
                    bottom: 1.2rem;
                    width: 13.2rem;
                    transform: translate(0.6rem, 2rem);
                }
            }
        }

        .internship-body {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            opacity: 0;
            transform: translateY(2rem);
            transition:
                opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
            @media screen and (max-width: 767px) {
                height: auto;
                padding-bottom: 18rem;
            }

            .internship-en {
                font-family: var(--mont);
                margin-bottom: 3rem;
                font-style: normal;
                font-weight: 600;
                font-size: 3.1rem;
                line-height: 3.8rem;
                text-align: center;
                letter-spacing: 0.02em;
                text-transform: capitalize;
                color: #ffffff;

                @media screen and (max-width: 767px) {
                    margin-bottom: 2rem;
                    font-size: 1.8rem;
                    line-height: 2.2rem;
                }
            }

            .internship-title {
                width: 57.4rem;
                margin-bottom: 5rem;

                @media screen and (max-width: 767px) {
                    width: 100%;
                    max-width: 28rem;
                    margin-bottom: 2.4rem;
                }

                & img {
                    width: 100%;
                    vertical-align: top;
                }
            }

            .internship-text {
                font-style: normal;
                font-weight: 500;
                font-size: 1.8rem;
                line-height: 3.6rem;
                letter-spacing: 0.04em;
                color: #ffffff;
                margin-bottom: 6rem;

                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                    line-height: 2;
                    margin-bottom: 3.2rem;
                }
            }
        }
    }

    &.is-inview {
        .internship-panel {
            .internship-illust {
                opacity: 1;
                transform: translateX(0);

                @media screen and (max-width: 767px) {
                    &.intern1 {
                        transform: translate(calc(-100% - 0.6rem), -2rem);
                    }

                    &.intern2 {
                        transform: translate(0.6rem, -2rem);
                    }
                }
            }

            .internship-body {
                opacity: 1;
                transform: none;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .internship-panel {
            .internship-illust,
            .internship-body {
                opacity: 1;
                transform: none;
                transition: none;
            }

            .internship-illust {
                @media screen and (max-width: 767px) {
                    &.intern1 {
                        transform: translate(calc(-100% - 0.6rem), 0);
                    }

                    &.intern2 {
                        transform: translate(0.6rem, 0);
                    }
                }
            }
        }
    }
}