@charset "utf-8";

@import url("/group/sfe/assets/css/components/link-card.css");


/* ========================================================================
[sp]hero
========================================================================= */
#hero {
    width: 100vw;
    height: calc(600 * var(--vw-unit));
    padding: calc(210 * var(--vw-unit)) 0 0;
    background: url("/group/sfe/assets/img/top/sp_bg_hero.webp") no-repeat center center;
    background-size: 100% auto;
    position: relative;
    z-index: 1;
}

#hero::before {
    content: none;
}

#hero::after {
    content: none;
}

.hero__visual {
    pointer-events: none;
    display: block;
    position: absolute;
    z-index: 10;
}

.hero__visual--right {
    width: calc(269 * var(--vw-unit));
    height: calc(275 * var(--vw-unit));
    top: 0;
    right: 0;
}

.hero__visual--left {
    width: calc(227.5 * var(--vw-unit));
    height: calc(246 * var(--vw-unit));
    bottom: 0;
    left: 0;
}

.hero__visual--third {
    display: none;
}

.hero__visual-image {
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    opacity: 0;
    position: absolute;
    inset: 0;
}

.hero__visual-image--right-01 {
    background-image: url("/group/sfe/assets/img/top/sp_hero_img_r01.webp");
    animation: hero-image-01 12s ease-in-out infinite;
}

.hero__visual-image--right-02 {
    background-image: url("/group/sfe/assets/img/top/sp_hero_img_r02.webp");
    animation: hero-image-02 12s ease-in-out infinite;
}

.hero__visual-image--right-03 {
    background-image: url("/group/sfe/assets/img/top/sp_hero_img_r03.webp");
    animation: hero-image-03 12s ease-in-out infinite;
}

.hero__visual-image--left-01 {
    background-image: url("/group/sfe/assets/img/top/sp_hero_img_l01.webp");
    animation: hero-image-01 12s ease-in-out infinite;
}

.hero__visual-image--left-02 {
    background-image: url("/group/sfe/assets/img/top/sp_hero_img_l02.webp");
    animation: hero-image-02 12s ease-in-out infinite;
}

.hero__visual-image--left-03 {
    background-image: url("/group/sfe/assets/img/top/sp_hero_img_l03.webp");
    animation: hero-image-03 12s ease-in-out infinite;
}

.hero__switch {
    display: none;
}

@keyframes hero-image-01 {

    0%,
    26% {
        opacity: 1;
    }

    33%,
    93% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hero-image-02 {

    0%,
    26% {
        opacity: 0;
    }

    33%,
    60% {
        opacity: 1;
    }

    67%,
    100% {
        opacity: 0;
    }
}

@keyframes hero-image-03 {

    0%,
    60% {
        opacity: 0;
    }

    67%,
    93% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.hero__eyebrow {
    margin: 0 0 calc(9 * var(--vw-unit)) calc(65 * var(--vw-unit));
    color: #FFF;
    text-shadow: 0 calc(4 * var(--vw-unit)) calc(24 * var(--vw-unit)) rgba(1, 62, 175, 0.00);
    font-family: var(--font-sans-serif-en);
    font-size: calc(13.5 * var(--vw-unit));
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: calc(3.1 * var(--vw-unit));
}

.hero__title {
    margin: 0 0 0 calc(60 * var(--vw-unit));
    color: #FFF;
    text-shadow: 0 4px 24px rgba(1, 62, 175, 0.00);
    font-family: var(--font-sans-serif);
    font-size: calc(40 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: calc(4 * var(--vw-unit));
}


/* ========================================================================
[sp]purpose
========================================================================= */
#purpose {
    margin: calc(-33 * var(--vw-unit)) 0 calc(50 * var(--vw-unit)) 0;
    padding: calc(260 * var(--vw-unit)) 0 calc(360 * var(--vw-unit));
    height: calc(808 * var(--vw-unit));
    position: relative;
    z-index: 10;
}

#purpose::before {
    content: "";
    width: calc(375 * var(--vw-unit));
    height: calc(404 * var(--vw-unit));
    background: url("/group/sfe/assets/img/top/sp_bg_purpose01.webp") no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#purpose::after {
    content: "";
    width: calc(375 * var(--vw-unit));
    height: calc(404 * var(--vw-unit));
    background: url("/group/sfe/assets/img/top/sp_bg_purpose02.webp") no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}


#purpose .section__eyebrow {
    margin: 0 auto calc(32 * var(--vw-unit));
    text-align: center;
    font-family: var(--font-sans-serif);
    font-size: calc(18 * var(--vw-unit));
    font-style: normal;
    font-weight: 900;
    line-height: 150%;
    letter-spacing: 0.9px;
    background: linear-gradient(90deg, #0E76C0 0%, #189CB8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#purpose .section__title {
    margin: 0 auto calc(40 * var(--vw-unit));
    text-align: center;
    font-family: var(--font-sans-serif);
    font-size: calc(25 * var(--vw-unit));
    font-style: normal;
    font-weight: 900;
    line-height: 180%;
    background: linear-gradient(90deg, #0E76C0 0%, #189CB8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ========================================================================
[sp]mission
========================================================================= */
#mission {
    margin: 0;
    padding: 0 0 calc(485 * var(--vw-unit)) 0;
    position: relative;
    overflow: hidden;
    background: url("/group/sfe/assets/img/top/sp_mission_bottom.svg") no-repeat center bottom;
    background-size: 100vw auto;
}

#mission::after {
    content: "";
    width: calc(468 * var(--vw-unit));
    height: calc(350 * var(--vw-unit));
    background: url("/group/sfe/assets/img/top/img_mission.webp") no-repeat 0 0;
    background-size: calc(468 * var(--vw-unit)) auto;
    position: absolute;
    bottom: calc(102 * var(--vw-unit));
    left: calc(-44 * var(--vw-unit));
    z-index: 1;
}


#mission .section__eyebrow {
    margin: 0 0 calc(20 * var(--vw-unit)) calc(16 * var(--vw-unit));
    font-family: var(--font-sans-serif);
    font-size: calc(16 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    background: linear-gradient(90deg, #117DCA 0%, #179AB9 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#mission .section__title {
    margin: 0 0 calc(32 * var(--vw-unit)) calc(16 * var(--vw-unit));
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(32 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
}

#mission .section__lead {
    margin: 0 0 calc(32 * var(--vw-unit)) calc(16 * var(--vw-unit));
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
}

#mission .section__eyebrow,
#mission .section__title,
#mission .section__lead,
#mission .section__link {
    position: relative;
    z-index: 1;
}




/* ========================================================================
[sp]job
========================================================================= */
#job {
    margin: 0;
    padding: 0 0 calc(100 * var(--vw-unit));
    background: #E1F5FA;
}

#job .section__eyebrow {
    margin: 0 0 calc(20 * var(--vw-unit)) calc(16 * var(--vw-unit));
    font-family: var(--font-sans-serif);
    font-size: calc(16 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    background: linear-gradient(90deg, #117DCA 0%, #179AB9 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#job .section__title {
    margin: 0 0 calc(32 * var(--vw-unit)) calc(16 * var(--vw-unit));
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(32 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
}

#job .section__lead {
    margin: 0 0 calc(32 * var(--vw-unit)) calc(16 * var(--vw-unit));
    width: calc(260 * var(--vw-unit));
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
}

.job-list {
    margin: 0 auto;
    width: calc(343 * var(--vw-unit));
    list-style: none;
}

.job-list li {}

.job-list li+li {
    margin-top: calc(24 * var(--vw-unit));
}

.job-list li a {
    background: var(--color-white);
    display: block;
    text-decoration: none;
    border-radius: calc(32 * var(--vw-unit));
    overflow: hidden;
    padding-bottom: calc(16 * var(--vw-unit));
}


.job-list__title {
    margin: 0 0 calc(8 * var(--vw-unit));
    padding: calc(16 * var(--vw-unit)) calc(20 * var(--vw-unit)) 0;
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(20 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
}

.job-list__text {
    margin: 0 0 calc(16 * var(--vw-unit));
    padding: 0 calc(20 * var(--vw-unit)) 0;
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
}

.job-list__link {
    margin: 0 calc(20 * var(--vw-unit));
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
    color: var(--color-black);
    display: flex;
    height: calc(42 * var(--vw-unit));
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding-right: calc(70 * var(--vw-unit));
}

.job-list__link::before {
    content: "";
    width: calc(60 * var(--vw-unit));
    height: calc(42 * var(--vw-unit));
    border: calc(3 * var(--vw-unit)) solid transparent;
    border-radius: calc(50 * var(--vw-unit));
    box-sizing: border-box;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, #0E76C0 0%, #189AB8 100%) border-box;
    mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}

.job-list__link::after {
    content: "";
    width: calc(18.4 * var(--vw-unit));
    height: calc(16 * var(--vw-unit));
    background-color: #0F78C0;
    -webkit-mask: var(--icon-link-arrow);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask: var(--icon-link-arrow);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    position: absolute;
    top: calc(50% - calc(8 * var(--vw-unit)));
    right: calc(20 * var(--vw-unit));
    pointer-events: none;
}



/* ========================================================================
[sp]recruit
========================================================================= */
#recruit {
    margin: 0;

    background: #E1F5FA;

}

#recruit .section__eyebrow {
    margin: 0 0 calc(20 * var(--vw-unit)) calc(16 * var(--vw-unit));
    font-family: var(--font-sans-serif);
    font-size: calc(16 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    background: linear-gradient(90deg, #117DCA 0%, #179AB9 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#recruit .section__title {
    margin: 0 0 calc(32 * var(--vw-unit)) calc(16 * var(--vw-unit));
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(32 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
}

#recruit .section__lead {
    margin: 0 0 calc(32 * var(--vw-unit)) calc(16 * var(--vw-unit));
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
}

.recruit-img-gallery-wrap {
    margin-top: calc(40 * var(--vw-unit));
    overflow: hidden;
    width: 100%;
}

.recruit-img-gallery {
    --gallery-item-width: calc(240 * var(--vw-unit));
    --gallery-speed: 54s;
    display: flex;
    width: max-content;
    animation: recruit-gallery-scroll var(--gallery-speed) linear infinite;
    list-style: none;
}

.recruit-img-gallery li {
    flex: 0 0 var(--gallery-item-width);
    width: var(--gallery-item-width);
}

.recruit-img-gallery figure,
.recruit-img-gallery img {
    display: block;
    width: 100%;
}

.recruit-img-gallery img {
    height: auto;
}

@keyframes recruit-gallery-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {

    #hero::before,
    #hero::after,
    .hero__switch,
    .hero__visual-image {
        animation: none;
    }

    .recruit-img-gallery {
        animation: none;
    }
}






/*==================================================
pc
================================================== */
@media print,
screen and (min-width:768px) {

    main {
        background: url("/group/sfe/assets/img/top/pc_bg_hero.webp") no-repeat center top;
        background-size: 1920px auto;
    }

    /* ========================================================================
    [pc]hero
    ========================================================================= */
    #hero {
        margin: 0 auto;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        height: min(836px, calc(100vh - 116px));
        height: min(836px, calc(100svh - 116px));
        min-height: 560px;
        background: none;
        padding: clamp(130px, 20svh, 217px) 0 0;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
    }

    #hero::before {
        content: none;
    }

    #hero::after {
        content: none;
    }

    .hero__visual {
        pointer-events: none;
        display: block;
        position: absolute;
        z-index: 10;
    }

    .hero__visual--right {
        width: 772px;
        height: 703px;
        top: 89px;
        right: -252px;
    }

    .hero__visual--left {
        width: 588px;
        height: 488px;
        bottom: 44px;
        left: -151px;
    }

    .hero__visual--third {
        display: block;
        width: 450px;
        height: 274px;
        top: 0;
        left: -99px;
    }

    .hero__visual-image {
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
        opacity: 0;
        position: absolute;
        inset: 0;
    }

    .hero__visual-image--right-01 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_r01.webp");
        animation: hero-image-01 12s ease-in-out infinite;
    }

    .hero__visual-image--right-02 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_r02.webp");
        animation: hero-image-02 12s ease-in-out infinite;
    }

    .hero__visual-image--right-03 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_r03.webp");
        animation: hero-image-03 12s ease-in-out infinite;
    }

    .hero__visual-image--left-01 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_l01.webp");
        animation: hero-image-01 12s ease-in-out infinite;
    }

    .hero__visual-image--left-02 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_l02.webp");
        animation: hero-image-02 12s ease-in-out infinite;
    }

    .hero__visual-image--left-03 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_l03.webp");
        animation: hero-image-03 12s ease-in-out infinite;
    }

    .hero__visual-image--third-01 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_c01.webp");
        animation: hero-image-01 12s ease-in-out infinite;
    }

    .hero__visual-image--third-02 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_c02.webp");
        animation: hero-image-02 12s ease-in-out infinite;
    }

    .hero__visual-image--third-03 {
        background-image: url("/group/sfe/assets/img/top/pc_hero_img_c03.webp");
        animation: hero-image-03 12s ease-in-out infinite;
    }

    .hero__switch {
        display: none;
    }

    .hero__copy {
        display: grid;
        margin: 0 auto;
        width: fit-content;
        max-width: calc(100vw - 48px);
        transform: translateX(18px);
    }

    .hero__eyebrow {
        margin: 0 0 15px;
        width: 100%;
        color: #FFF;
        text-shadow: 0 4px 24px rgba(1, 62, 175, 0.00);
        font-family: var(--font-sans-serif-en);
        font-size: 23px;
        font-style: normal;
        font-weight: 300;
        line-height: 100%;
        letter-spacing: 5.8px;
    }

    .hero__title {
        margin: 0;
        width: 100%;
        color: #FFF;
        text-shadow: 0 4px 24px rgba(1, 62, 175, 0.00);
        font-family: var(--font-sans-serif);
        font-size: clamp(52px, 4.8vw, 67px);
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 6.7px;
    }

    @media screen and (max-height:800px), screen and (max-width:1399px) {
        .hero__visual--right {
            top: 40px;
            right: clamp(-180px, -9vw, -96px);
            transform: scale(0.82);
            transform-origin: top right;
        }

        .hero__visual--left {
            bottom: 24px;
            left: clamp(-120px, -7vw, -72px);
            transform: scale(0.82);
            transform-origin: bottom left;
        }

        .hero__visual--third {
            left: -64px;
            transform: scale(0.78);
            transform-origin: top left;
        }
    }

    @media screen and (max-height:720px) {

        #hero {
            padding: clamp(96px, 14svh, 160px) 0 0;
            min-height: 480px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero__eyebrow {
            font-size: 18px;
            margin-bottom: 10px;
            letter-spacing: 2.8px;
        }

        .hero__title {
            font-size: clamp(40px, 4.2vw, 56px);
            letter-spacing: 4px;
            line-height: 150%;
        }

        .hero__visual--right {
            transform: scale(0.68);
            transform-origin: top right;
            top: 20px;
            right: clamp(-140px, -10vw, -60px);
        }

        .hero__visual--left {
            transform: scale(0.68);
            transform-origin: bottom left;
            bottom: 10px;
            left: clamp(-120px, -8vw, -60px);
        }

        .hero__visual--third {
            transform: scale(0.62);
            transform-origin: top left;
            left: -40px;
        }
    }

    @media screen and (max-height:660px) {
        #hero {
            padding: 88px 0 0;
            min-height: 440px;
        }

        .hero__title {
            font-size: clamp(36px, 4vw, 50px);
        }

        .hero__visual--right,
        .hero__visual--left {
            transform: scale(0.60);
        }

        .hero__visual--third {
            transform: scale(0.56);
        }
    }



    /* ========================================================================
    [pc]purpose
    ========================================================================= */
    #purpose {
        margin: -120px auto 0;
        padding: 295px 0 0;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        height: 980px;
        position: relative;
        z-index: 10;
        background: url("/group/sfe/assets/img/top/pc_bg_purpose.webp") no-repeat center 25px;
        background-size: auto 980px;
    }

    #purpose::before {
        content: "";
        width: 862px;
        height: 980px;
        background: url("/group/sfe/assets/img/top/pc_bg_purpose01.webp") no-repeat center center;
        background-size: 862px auto;
        position: absolute;
        top: 0;
        left: auto;
        right: -260px;
        z-index: -1;
    }

    #purpose::after {
        content: "";
        width: 862px;
        height: 980px;
        background: url("/group/sfe/assets/img/top/pc_bg_purpose02.webp") no-repeat center center;
        background-size: 862px auto;
        position: absolute;
        top: 0;
        bottom: auto;
        left: -260px;
        z-index: -1;
    }


    #purpose .section__eyebrow {
        margin: 0 auto 32px;
        text-align: center;
        font-family: var(--font-sans-serif);
        font-size: 20px;
        font-style: normal;
        font-weight: 900;
        line-height: 150%;
        letter-spacing: 0.9px;
        background: linear-gradient(90deg, #0E76C0 0%, #189CB8 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #purpose .section__title {
        margin: 0 auto 64px;
        text-align: center;
        font-family: var(--font-sans-serif);
        font-size: 42px;
        font-style: normal;
        font-weight: 900;
        line-height: 180%;
        background: linear-gradient(90deg, #0E76C0 0%, #189CB8 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    @media screen and (max-width:1499px) {
        #purpose {
            width: 100%;
            background-image:
                url("/group/sfe/assets/img/top/pc_bg_purpose_combined.webp"),
                linear-gradient(to bottom, transparent 0 50%, #fff 50% 100%);
            background-repeat: no-repeat, no-repeat;
            background-position: center 25px, center top;
            background-size: 100% auto, 100% 100%;
            height: auto;
        }

        #purpose::before,
        #purpose::after {
            display: none;
        }
    }

    /* ========================================================================
    [pc]mission
    ========================================================================= */
    #mission {
        margin: -152px 0 0;
        padding: 200px 0 428px 0;
        position: relative;
        overflow: hidden;
        background: url("/group/sfe/assets/img/top/pc_mission_bottom_repeat.svg") repeat-x 0 bottom;
        background-size: auto 233px;
    }

    #mission::after {
        content: "";
        width: 936px;
        height: 704px;
        background: url("/group/sfe/assets/img/top/img_mission.webp") no-repeat 0 0;
        background-size: 936px auto;
        position: absolute;
        bottom: 103px;
        left: calc(50% - 170px);
        z-index: 1;
    }

    #mission .section__eyebrow {
        margin: 0 auto 20px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        font-family: var(--font-sans-serif);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        background: linear-gradient(90deg, #117DCA 0%, #179AB9 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #mission .section__title {
        margin: 0 auto 32px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
    }

    #mission .section__lead {
        margin: 0 auto 32px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%;
    }

    #mission .section__eyebrow,
    #mission .section__title,
    #mission .section__lead,
    #mission .section__link {
        position: relative;
        z-index: 10;
    }

    #mission .section__link {
        margin: 0 auto;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
    }

    #mission .section__link a {
        margin: 0;
    }

    @media screen and (max-width:1399px) {
        #mission {
            margin-top: -128px;
            padding-top: clamp(152px, 15vw, 188px);
            padding-bottom: clamp(360px, 34vw, 420px);
            background-size: auto 210px;
        }

        #mission::after {
            width: clamp(580px, 60vw, 780px);
            height: clamp(437px, 45vw, 587px);
            background-size: 100% auto;
            bottom: 92px;
            right: clamp(24px, 4vw, 64px);
            left: auto;
        }

        #mission .section__title {
            margin-bottom: 24px;
            font-size: clamp(34px, 3.3vw, 38px);
        }
    }



    /* ========================================================================
    [pc]job
    ========================================================================= */
    #job {
        margin: -3px 0 0;
        padding: 0 0 120px;
        background: #E1F5FA;
    }

    #job .section__eyebrow {
        margin: 0 auto 20px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        font-family: var(--font-sans-serif);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        background: linear-gradient(90deg, #117DCA 0%, #179AB9 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #job .section__title {
        margin: 0 auto 32px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
    }

    #job .section__lead {
        margin: 0 auto 32px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%;
    }

    .job-list {
        margin: 0 auto;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 0 32px;
    }

    .job-list li {
        width: auto;
        max-width: 326px;
        display: flex;
    }

    .job-list li+li {
        margin-top: 0;
    }

    .job-list li a {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-radius: 32px;
        padding-bottom: 16px;
    }

    .job-list li figure {
        overflow: hidden;
    }

    .job-list li figure img {
        transition: all 0.3s ease;
    }

    .job-list li a:hover figure img {
        transform: scale(1.1);
        transform-origin: center center;
    }

    .job-list__title {
        margin: 0 0 calc(8 * var(--vw-unit));
        padding: 16px 20px 0;
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
    }

    .job-list__text {
        margin: 0 0 16px;
        padding: 0 20px 0;
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%;
    }

    .job-list__link {
        margin: 0 20px;
        margin-top: auto;
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%;
        color: var(--color-black);
        display: flex;
        height: 42px;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        padding-right: 70px;
        transition: color 0.3s ease;
        overflow: hidden;
    }

    a:hover .job-list__link {
        color: rgba(0, 0, 0, 0.4);
    }


    .job-list__link::before {
        content: "";
        display: block;
        background: #fff;
        width: 60px;
        height: 42px;
        border: 3px solid #0E76C0;
        border-radius: 50px;
        transition: all 0.3s ease;

        -webkit-mask: none;
        mask: none;
    }

    a:hover .job-list__link::before {
        background: linear-gradient(90deg, #0e76c0 0%, #189ab8 100%);
        border: none;
    }

    .job-list__link::after {
        content: "";
        width: 18.4px;
        height: 16px;
        background-color: #0F78C0;
        -webkit-mask: var(--icon-link-arrow);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask: var(--icon-link-arrow);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        position: absolute;
        top: calc(50% - 8px);
        right: 20px;
        pointer-events: none;
        transition: none;
    }

    a:hover .job-list__link::after {
        animation: arrow-loop-white 0.5s ease forwards;
    }




    /* ========================================================================
    [pc]recruit
    ========================================================================= */
    #recruit {
        margin: 0;
        background: #E1F5FA;
    }

    #recruit .section__eyebrow {
        margin: 0 auto 20px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        font-family: var(--font-sans-serif);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        background: linear-gradient(90deg, #117DCA 0%, #179AB9 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #recruit .section__title {
        margin: 0 auto 32px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
    }

    #recruit .section__lead {
        margin: 0 auto 32px;
        width: var(--pc-main-container, min(1400px, calc(100vw - 48px)));
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%;
    }

    .recruit-img-gallery-wrap {
        margin: 64px auto 0;
        padding-bottom: 130px;
        overflow: hidden;
        width: 100%;
    }

    .recruit-img-gallery {
        --gallery-item-width: calc(240 * var(--vw-unit));
        --gallery-speed: 54s;
        display: flex;
        width: max-content;
        animation: recruit-gallery-scroll var(--gallery-speed) linear infinite;
        list-style: none;
    }

    .recruit-img-gallery li {
        flex: 0 0 auto;
        width: auto;
    }

    .recruit-img-gallery figure {
        display: block;
        width: auto;
    }

    .recruit-img-gallery img {
        display: block;
        width: auto;
    }

    .recruit-img-gallery img {
        height: 336px;
    }

    @keyframes recruit-gallery-scroll {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    @media (prefers-reduced-motion: reduce) {

        #hero::before,
        #hero::after,
        .hero__switch {
            animation: none;
        }

        .recruit-img-gallery {
            animation: none;
        }
    }




}