@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --white03: rgba(255, 255, 255, 0.9);
    --black: #000;
    --black02: rgba(0, 0, 0, 0.2);
    --blue01: #002878;
    --blue02: #c8ceff;
    --orange01: #ff9745;
    --orange02: rgba(219, 87, 54, 0.8);
    --orange03: #db5736;
    --orange04: rgba(255, 151, 69, 0.8);
    --beige01: #ffe3cd;
    --beige02: #fff3ea;
    --beige03: #ffd9bb;
    --yellow01: #f5d046;
    --green01: #009245;
    --gray: #e9e9e9;


    /* ぼかし */
    --blur: blur(10px);

    /* 書式 */
    --notoSans: "Noto Sans JP", sans-serif;

    /* 文字サイズ */
    --font15: 1.5rem;
    --font17: 1.7rem;
    --font19: 1.9rem;
    --font20: 2.0rem;
    --font21: 2.1rem;
    --font22: 2.2rem;
    --font24: 2.4rem;
    --font25: 2.5rem;
    --font26: 2.6rem;
    --font27: 2.7rem;
    --font28: 2.8rem;
    --font30: 3.0rem;
    --font36: 3.6rem;
    --font130: 13rem;

    /* ウェイト */
    --weight500: 500;
    --weight700: 700;

    /* 行間 */
    --lineHight166: 1.6666;
    --lineHight175: 1.75;
    --lineHight20: 2.0;

    /* 文字間 */
    --fontSpace050: 0.05em;
    --fontSpace100: 0.10em;

    /* トランジションの変数　 */
    --transitionBase01: all 0.3s ease-in-out;
    --transitionBase02: all 0.5s ease-in-out;

    /* 角丸の変数　 */
    --borderRadius01: 500px;
    --borderRadius10: 10px;
    --borderRadius20: 20px;
    --borderRadius30: 30px;
    --borderRadiusCircle: 50%;

    --opacity07: .7;

}




@media screen and (max-width: 1024px) {
    :root {
        --font15: 1.4rem;
        --font17: 1.6rem;
        --font19: 1.8rem;
        --font20: 1.9rem;
        --font21: 2rem;
        --font22: 2.1rem;
        --font24: 2.1rem;
        --font25: 2.2rem;
        --font26: 2.3rem;
        --font27: 2.4rem;
        --font28: 2.5rem;
        --font30: 2.6rem;
        --font36: 3rem;
        --font130: 9rem;
    }
}


@media screen and (max-width: 768px) {
    :root {

        --font17: 1.5rem;
        --font19: 1.7rem;
        --font20: 1.8rem;
        --font21: 1.9rem;
        --font22: 2rem;
        --font24: 2rem;
        --font25: 2.1rem;
        --font26: 2.2rem;
        --font27: 2.3rem;
        --font28: 2.4rem;
        --font30: 2.4rem;
        --font36: 2.7rem;
        --font130: 6rem;

        --opacity07: 1;
    }


}

@media screen and (max-width: 480px) {
    :root {
        --font15: 1.3rem;
        --font17: 1.4rem;
        --font19: 1.6rem;
        --font20: 1.7rem;
        --font21: 1.8rem;
        --font22: 1.9rem;
        --font24: 1.9rem;
        --font25: 2rem;
        --font26: 2.1rem;
        --font27: 2.2rem;
        --font28: 2.2rem;
        --font30: 2.3rem;
        --font36: 2.5rem;
        --font130: 5rem;

        --borderRadius20: 10px;
        --borderRadius30: 15px;
    }
}



/*******************************************
common
*******************************************/

body {
    color: var(--black);
    font-family: var(--notoSans);
    font-weight: var(--weight700);
    font-size: var(--font17);
}

p {
    text-align: justify;
    font-size: var(--font17);
    line-height: var(--lineHight20);
    font-weight: var(--weight500);
}

.section {
    position: relative;
}

.section__inner {
    position: relative;
    width: min(100%, 980px);
    margin: 0 auto;

    padding: 100px 0;
}

.inner1190 {
    width: min(100%, 1190px);
}

.section__ttlBox {
    width: min(100%, 980px);
    margin: 0 auto;
}

.section__ttl {
    position: relative;
    font-size: var(--font130);
    letter-spacing: var(--fontSpace050);
    width: fit-content;
}

.section__ttl--parts {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 3.18em;
    transform: translate(30%, 15%);
}

.marker {
    background: linear-gradient(transparent 90%, var(--yellow01) 90%);
    padding-bottom: 5px;
}

.thin {
    letter-spacing: -0.5em;
}

.block335,
.block360,
.block440,
.block480,
.block768 {
    display: none !important;
}

.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.section-parts {
    position: absolute;
    top: clamp(5px, 1.43vw, 20px);
    left: clamp(5px, 1.43vw, 20px);
    font-size: 10px;
    font-weight: 300;
    background-color: var(--orange01);
    color: var(--white);
    z-index: 2;
    line-height: 1;
}

.parallax {
    background-image: url(../img/aboutUs/bg-pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
}

.push {
    display: inline-block;
}

.ttl01 {
    text-align: center;
}

.ttl01__item {
    span {
        display: block;
        width: fit-content;
        margin: 0 auto;
        font-size: var(--font36);
        letter-spacing: var(--fontSpace050);
        background-color: var(--beige01);
        padding: 0 10px;
        line-height: 1.5;
        margin-top: 5px;

        &:first-child {
            margin-top: 0px;
        }
    }
}

.bg-wave {
    position: relative;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/common/wave-bg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        width: max(100vw, 1000px);
        aspect-ratio: 1400/547;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

.arrowBox {
    position: relative;
    background-color: var(--orange03);
    color: var(--white);

    p {
        color: var(--white);
        line-height: var(--lineHight175);
    }

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/common/arrow-orange02.svg);
        bottom: 0;
        width: 35px;
        aspect-ratio: 35/30;
        transform: translateY(70%);
        z-index: -1;
    }
}

.arrowBox01 {
    &::before {
        left: 78%;
    }
}

.arrowBox02 {
    &::before {
        left: 10%;
        transform: translateY(50%) scaleX(-1);
    }
}

.arrowBox03 {
    &::before {
        left: 17%;
        transform: translateY(60%) scaleX(-1);
    }
}

.arrowBox04 {
    &::before {
        left: 80%;
    }
}

.arrowBox05 {
    &::before {
        left: 45%;
        transform: translateY(65%) scaleX(-1);
    }
}

.arrowBox06 {
    &::before {
        lkeft: 20%;
        transform: translateY(70%) scaleX(-1);
    }
}


.sp {
    display: none !important;
}

@media screen and (max-width:1024px) {
    .push1024 {
        display: inline-block;
    }

    .none1024 {
        display: none;
    }

    .section__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media screen and (max-width:768px) {
    .push768 {
        display: inline-block;
    }

    .none768 {
        display: none;
    }

    .block768 {
        display: block;
    }

    .parallax {
        background-attachment: initial;
    }

    .sp {
        display: block !important;
    }

    .pc {
        display: none !important;
    }


}

@media screen and (max-width:480px) {
    .push480 {
        display: inline-block;
    }

    .none480 {
        display: none !important;
    }

    .block480 {
        display: block !important;
    }
}

@media screen and (max-width:440px) {

    .block440 {
        display: block !important;
    }

    .none440 {
        display: none !important;
    }
}

@media screen and (max-width:360px) {

    .block360 {
        display: block !important;
    }

    .none360 {
        display: none !important;
    }
}

@media screen and (max-width:335px) {

    .block335 {
        display: block !important;
    }

    .none335 {
        display: none !important;
    }
}



/*******************************************
box01
*******************************************/
.box01 {
    position: relative;
    /* padding-top: clamp(20px, 5.36vw, 75px); */
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

.box01__color {
    position: absolute;
    top: 0;
    right: auto;
    min-width: calc(1400px - 210px);
    width: calc(100vw - 210px - calc(100vw - 1400px) / 2);
    height: 100%;
    background-color: var(--blue01);

    /* transition: transform .8s cubic-bezier(.165,.84,.44,1),-webkit-transform .8s cubic-bezier(.165,.84,.44,1);
    transform: scaleX(0);
    transform-origin: left center;
    transform: scaleX(1); */
}

.box01__inner {
    position: relative;
    width: min(100%, 1400px);
    margin: 0 auto;
    padding: clamp(40px, 7.15%, 85px) 0;
}

.box01__top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 40px;
}


.box01__detail {
    width: min(100%, 512px);

    dt {
        margin-bottom: clamp(15px, 6%, 30px);

        span:not(.small) {
            display: block;
            background-color: var(--white);
            padding: 0 0.278em;
            line-height: 1.48;
            margin-top: 5px;
            font-size: var(--font36);
            letter-spacing: var(--fontSpace050);
            color: var(--blue01);
            width: fit-content;

            &:first-child {
                margin-top: 0;
            }
        }
    }

    dd {
        p {
            font-weight: var(--weight500);
            color: var(--white);
        }
    }
}

.box01__img {
    width: clamp(150px, 45.21vw, 633px);
    margin-top: clamp(-160px, -12%, -100px);
}





.box01__content {
    width: min(100%, 980px);
    margin: 0 auto;
}

.box01-reverse {

    .box01__color {
        right: 0;
        left: auto;
    }

    .box01__top {
        flex-direction: row-reverse;
    }
}


.box01-beige01 {
    .box01__color {
        background-color: var(--beige01);
    }
}

.box01-orange01 {
    .box01__color {
        background-color: var(--orange01);
    }


    .JobDetail {
        background-color: #ffdabc;
    }
}

.box01-yellow01 {
    .box01__color {
        background-color: var(--yellow01);
    }

    .box01__detail {
        dd {
            p {
                color: var(--blue01);
            }
        }
    }

    .JobDetail {
        background-color: #fae9a8;
    }
}

.box01-green01 {
    .box01__color {
        background-color: var(--green01);
    }


    .JobDetail {
        background-color: #a5d9be;
    }
}

@media screen and (max-width:1200px) {
    .box01__color {
        min-width: initial;
        width: max(80vw, 500px);
    }
}

@media screen and (max-width:1024px) {
    .box01__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media screen and (max-width:768px) {
    .box01 {
        width: 85%;
        margin: 0 auto 0 0;
    }

    .box01__color {
        width: calc(100% + 20px);
        left: -20px;
    }

    .box01__inner {
        padding-top: clamp(50px, 20%, 120px);
        padding-left: 0 !important;
    }

    .box01__top {
        display: block;
        gap: 20px;
    }

    .box01__detail {
        width: 100%;
    }

    .box01__img {
        position: absolute;
        top: 0;
        right: -20px;
        margin-top: min(-20%, -55px);
    }

    .box01-reverse {
        margin: 0 0 0 auto;
        /* margin-top: 300px; */

        .box01__color {
            left: auto;
            right: -20px;
        }

        .box01__inner {
            padding-top: clamp(50px, 20%, 120px);
            padding-left: 20px !important;
            padding-right: 0 !important;
        }

        .box01__img {
            right: auto;
            left: -20px;
            margin-top: min(-20%, -55px);
        }
    }

}

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


/*******************************************
entryBox
*******************************************/
.entryBox {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: 15px;

    .btn-outer {
        .btn {
            color: var(--white);
        }
    }
}

.entryBox-fixed {
    position: fixed;
    bottom: calc(2% + 80px);
    right: 2%;
    z-index: 50;
    transition: var(--transitionBase02);
    opacity: 0;
    visibility: hidden;



    .btn-outer {
        width: 150px;
        aspect-ratio: 1;
        height: auto;
    }

    .btn {
        line-height: 1.4;
        border: 1px solid var(--white02);
    }

    .btn-orange {
        font-size: 15px;
    }
}

@media screen and (max-width:1024px) {
    .entryBox-fixed {
        width: min(100%, 600px);
        justify-content: center;
        align-items: center;
        flex-direction: row;
        bottom: 2%;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        gap: 15px;

        .btn-outer {
            width: calc((100% - 15px)/2);
            aspect-ratio: initial;
            height: 60px;
        }

        .btn {
            font-size: 15px;
        }

        .arrow {
            bottom: auto;
            top: 50%;
            right: 5%;
            transform: translateY(-50%);
            left: auto;
            width: 1.3333em;
        }
    }
}

@media screen and (max-width:480px) {
    .entryBox-fixed {
        gap: 5px;

        .btn-outer {
            width: calc((100% - 5px)/2);
        }

        .btn {
            font-size: 13px;
        }
    }
}

@media screen and (max-width:355px) {
    .entryBox-fixed {

        .btn {
            font-size: 12px;
        }

        .arrow {
            bottom: auto;
            top: 50%;
            right: 5%;
            transform: translateY(-50%);
            left: auto;
            width: 1.1em;
        }
    }
}


/*******************************************
btn
*******************************************/
.btn-outer {
    width: min(90%, 450px);
    margin: 0 auto;
    height: 70px;
}

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: var(--blue01);
    background-color: var(--white);
    font-size: var(--font17);
    width: 100%;
    height: 100%;
    border-radius: var(--borderRadius01);
    transition: var(--transitionBase01);
    cursor: pointer;

    &:hover {
        opacity: var(--opacity07);
    }
}

.btn-orange {
    background-color: var(--orange01);
}

.btn-orange02 {
    background-color: var(--orange03);
    color: var(--white);
}

.btn-blue {
    background-color: var(--blue01);
}

.arrow {
    position: absolute;
    background-image: url(../img/common/arrow-blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 10%;
    left: 50%;
    width: 20px;
    aspect-ratio: 1;
    transform: translateX(-50%);
}

.arrow-orange {
    background-image: url(../img/common/arrow-orange.svg);
}




@media screen and (max-width: 768px) {
    .btn-outer {
        width: min(100%, 300px);
        height: 50px;
    }
}



/*******************************************
追従ボタン
*******************************************/
.main__inner {
    position: relative;
}

.topReturn {
    position: fixed;
    bottom: 2%;
    right: calc(2% + 75px);
    width: 60px;
    aspect-ratio: 1;
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    transition: var(--transitionBase01);
    transform: translateX(50%);


    a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: var(--borderRadiusCircle);
        background-color: var(--black);
        border: 1px solid var(--black);
        transition: var(--transitionBase01);

        &::before,
        &:after {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            width: 30%;
            height: 2px;
            background-color: var(--white);
            transition: var(--transitionBase01);
        }

        &::before {
            transform: translate(-83%, -50%) rotate(-45deg);
        }

        &::after {
            transform: translate(-17%, -50%) rotate(45deg);
        }

        &:hover {
            opacity: var(--opacity07);
        }
    }

}


@media screen and (max-width: 1024px) {
    .topReturn {
        right: 2%;
        bottom: 2%;
        transform: none;
    }
}


@media screen and (max-width: 768px) {
    .topReturn {
        bottom: calc(2% + 70px);
        width: 40px;
        height: 40px;
    }
}



/*******************************************
header
*******************************************/
.hamburger {
    display: none;
}

.header {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 40px 0 25px;
    height: 70px;
    z-index: 95;
    transition: var(--transitionBase01);
}

.bg-white {
    background-color: var(--white);
}

.header__logo {
    width: 250px;
    margin-right: 10px;

    & a {
        display: inline-block;
        width: 100%;
        height: 100%;
        transition: var(--transitionBase01);

        &:hover {
            opacity: var(--opacity07);
        }
    }
}


.headerNav {
    flex: 1;
}

.headerNav__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.headerNav__item {
    margin-left: clamp(20px, 2.5vw, 50px);

    &:first-child {
        margin-left: 0;
    }

    a:not(.btn) {
        display: inline-block;
        width: 100%;
        position: relative;
        font-size: 15px;
        color: var(--black);
        transition: var(--transitionBase01);

        &:hover {
            opacity: var(--opacity07);
        }
    }

}

.entryBox-nav {
    display: none;
}


@media screen and (max-width:1024px) {

    .header {
        position: absolute;
        padding: 0 20px;
    }

    .bg-white {
        backdrop-filter: initial;
    }

    .hamburger {
        display: block;
        position: fixed;
        right: 1%;
        top: 35px;
        width: 55px;
        aspect-ratio: 1;
        cursor: pointer;
        z-index: 100;
        transition: var(--transitionBase01);
        background-color: var(--black);
        transform: translateY(-50%);

        &:hover {
            opacity: var(--opacity07);
        }

        .line {
            position: absolute;
            width: 55%;
            height: 2px;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: var(--transitionBase01);
            background-color: var(--white);

            &:nth-of-type(1) {
                top: 30%;
            }

            &:nth-of-type(2) {
                top: 50%;
            }

            &:nth-of-type(3) {
                top: 70%;
            }
        }
    }


    .headerNav {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        z-index: 99;
        transition: var(--transitionBase02);
        background-color: var(--black02);
    }

    .headerNav__list {
        width: min(50%, 600px);
        height: 100%;
        background-color: var(--white);
        margin-left: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        padding: clamp(40px, 10vh, 200px) 20px 0;
        transition: var(--transitionBase01);
    }

    .headerNav__item:not(.entryBox-nav) {
        margin: 0 0 clamp(20px, 5vh, 80px) 0;

        &:nth-child(5) {
            margin-bottom: 0;
        }

        a {
            font-weight: var(--weight700);
            transition: var(--transitionBase01);

            &:hover {
                color: var(--pink01);
            }
        }
    }

    .entryBox-nav {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        margin: clamp(25px, 7vh, 100px) 0 0 0;
        gap: 15px;

        .btn-outer {
            width: calc((100% - 15px)/2);
            min-width: 215px;
            margin: 0;
        }

        .arrow {
            bottom: auto;
            top: 50%;
            right: 5%;
            transform: translateY(-50%);
            left: auto;
            width: 1.3333em;
        }
    }



    /* ハンバーガー開いた後 */
    .header.active {
        .headerNav {
            opacity: 1;
            visibility: visible;
        }

        .headerNav__list {
            transform: translateX(0);
        }
    }

}


@media screen and (max-width:480px) {

    .header {
        padding: 0 4.17%;
    }

    .header__logo {
        width: 200px;
    }

    .hamburger {
        width: 40px;
    }

    .headerNav__list {
        width: 100%;
        align-items: center;
    }

    .entryBox-nav {
        align-items: center;
        justify-content: center;
    }
}


/*******************************************
mv
*******************************************/
.mv {
    position: relative;
}

.mv__txtBox-outer {
    position: absolute;
    bottom: 12%;
    left: 0;
    background-color: var(--white03);
    font-size: 3.57vw;
    width: 13em;
    aspect-ratio: 650/234;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mv__txtBox {
    position: relative;
    font-weight: var(--weight700);
    width: fit-content;
    margin-top: 3.847%;

    .txt {
        font-size: 0.34em;
        margin-bottom: 0.2em;
    }

    .ttl {
        line-height: 1.3;
        letter-spacing: var(--fontSpace050);
    }
}

.mv__ttlPrts {
    position: absolute;
    width: 91.8%;
    right: -44%;
    bottom: -35%;
}




@media screen and (max-width:768px) {
    .mv__txtBox-outer {
        font-size: 8vw;
        width: 11em;
        aspect-ratio: 650 / 255;
        bottom: 8%;
    }

    .mv__ttlPrts {
        position: absolute;
        width: 91.8%;
        right: -11%;
        bottom: -41%;
    }
}


/*******************************************
aboutUs
*******************************************/
.aboutUs {
    background-image: url(../img/aboutUs/bg-pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */

    .section__inner {
        padding: clamp(40px, 9.5%, 130px) 0
    }
}



.aboutUs__ttl {
    font-size: var(--font36);
    color: var(--white);
    line-height: var(--lineHight166);
    letter-spacing: var(--fontSpace050);
}

.aboutUs__txtBox {
    margin: max(5%, 25px) 0 max(7%, 40px);

    .txt {
        color: var(--white);
        line-height: var(--lineHight20);
        font-size: var(--font19);
        margin-bottom: max(3.58%, 10px);
    }
}

.btn-outer-aboutUs {
    margin: 0;

    .btn {
        color: var(--orange03);
    }
}

@media screen and (max-width:480px) {
    .aboutUs__ttl {
        font-size: 6.14vw;

    }

    .aboutUs__txtBox {

        .txt {
            font-size: 15px;
        }
    }
}

/*******************************************
modal
*******************************************/
/* 共通
ーーーーーーーーーーーーーーーーーーー */
.no-scroll {
    overflow: hidden;

    body {
        overflow: scroll;
    }
}

.modal {
    /* 背景 */
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: auto;
    background-color: var(--orange04);
    z-index: -100;
    overflow: auto;
    transition: var(--transitionBase02);
}

.modalBox-outer {
    /* 最大幅*/
    position: absolute;
    width: min(100vw, 980px);
    height: auto;
    top: 0;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0);
    transition: var(--transitionBase02);
    padding: clamp(40px, 10%, 140px) 0;
    z-index: -100;
}

.modalBox {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: var(--white);
    height: auto;
}

.active {
    opacity: 1;
    visibility: visible;
    z-index: 1000;

    .show.modalBox-outer {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        z-index: 1001;
    }
}

.modal__inner {
    /* モーダル中身のインナー */
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 65px 0;
}

.modalClose-top {
    position: absolute;
    content: "";
    width: 60px;
    aspect-ratio: 1;
    background-color: var(--yellow01);
    top: 0;
    right: 0;
    border-radius: var(--borderRadiusCircle);
    transform: translate(50%, -50%);
    z-index: 10;
    transition: var(--transitionBase02);

    &::before,
    &::after {
        position: absolute;
        content: "";
        width: 50%;
        height: 2px;
        top: 50%;
        left: 50%;
        background-color: var(--black);
        transition: var(--transitionBase02);
    }

    &::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    &:hover {
        opacity: var(--opacity07);

    }
}

.btn-outer-modal {
    width: min(100%, 450px);
    margin: max(9.4%, 40px) auto 0;
}



@media screen and (max-width:1024px) {
    .modal__inner {
        padding: 80px 15px;
    }

    .modalClose-top {
        top: 10px;
        right: 10px;
        transform: none;
    }
}

@media screen and (max-width:960px) {
    .modal__inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


@media screen and (max-width:768px) {


    .modalClose-top {
        width: 40px;

        &:hover {
            background-color: var(--blue01);

            &::before,
            &::after {
                background-color: var(--white);
            }

        }
    }

}

/* ---------------------------------- */

.modalMv-item {
    position: relative;
    margin-bottom: max(2.5%, 10px);
    padding-left: 10px !important;
    padding-right: 10px !important;

    &:last-child {
        margin-bottom: 0;
    }
}

.modalMv-item01 {
    padding: 50px 0 max(8%, 50px);
}

.modalMv-item02 {
    padding: max(11.5%, 50px) 0 max(12%, 55px);
}

.modalMv-item03 {
    padding: max(5.6%, 35px) 0;
}

.modalMv__bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;

    img {
        object-fit: cover;
        object-position: center;
        height: 100%;
        display: block;
    }
}

.modalMv__ttlBox {
    position: relative;
    text-align: center;
    font-size: var(--font21);
    color: var(--white);
    margin-bottom: max(3.5%, 20px);

    span {
        display: block;
        letter-spacing: var(--fontSpace050);
    }

    .ttl {
        font-size: 2.38em;
        margin-bottom: max(1.1%, 5px);
    }
}

.modalMv__txtBox {
    position: relative;
    color: var(--white);

    p {
        text-align: center;
    }

    .txt01 {
        font-size: var(--font28);
        letter-spacing: var(--fontSpace050);
        margin-bottom: max(3.1%, 20px);
    }

    .txt02 {
        font-size: var(--font17);
        font-weight: var(--weight500);
        line-height: var(--lineHight20);

        .big {
            display: inline-block;
            font-size: 1.411em;
            margin-top: max(2%, 10px);
            font-weight: var(--weight700);
            line-height: 1;

            &:first-child {
                margin-top: 0;
            }
        }
    }
}

.modal__inner {
    padding-top: max(12%, 40px);
}

.modal__ttl {
    font-size: 60px;
    letter-spacing: var(--fontSpace050);
}

.modal__mainContainer {
    margin: 80px auto 0;
    width: 100%;
}

.box01-modal {
    width: 100%;
    margin: 0 0 100px 0;
    min-height: 322px;

    &:last-child {
        margin-bottom: 0;
    }

    .box01__color {
        width: calc(100% - 35px);
        top: 0;
        min-width: initial;
    }

    .box01__inner {
        padding: 30px 0 30px 25px;
    }

    .box01__top {
        justify-content: space-between;
    }

    .box01__img {
        width: min(100%, 270px);
        margin-top: -70px;
    }

    .box01__detail {
        width: min(100%, 577px);

        dt {
            margin-bottom: clamp(10px, 3%, 30px);

        }
    }

    &.box01-reverse {
        .box01__inner {
            padding: 30px 25px 30px 0;
        }
    }
}




@media screen and (max-width:1024px) {
    .box01-modal {

        .box01__inner {
            padding: 30px 0 30px 25px !important;
        }

        &.box01-reverse {
            .box01__inner {
                padding: 30px 25px 30px 0 !important;
            }
        }
    }
}



@media screen and (max-width:768px) {

    .modal__ttl {
        font-size: 45px;
    }

    .modal__mainContainer {
        margin: 100px auto 0;
    }

    .box01-modal {
        .box01__color {
            width: 100%;
            left: 0;
        }

        .box01__img {
            right: 0;
        }

        .box01__inner {
            padding: 130px 20px 40px !important;
        }

        &.box01-reverse {
            .box01__inner {
                padding: 130px 20px 40px !important;
            }

            .box01__img {
                right: auto;
                left: 0;
            }

            .box01__color {
                left: auto;
                right: 0;
            }
        }
    }

}


@media screen and (max-width:480px) {
    .modalMv__ttlBox {
        font-size: 16px;


        .ttl {
            font-size: 1.8em;
        }
    }

    .modalMv__txtBox {
        .txt01 {
            font-size: 18px;
        }

        .txt02 {
            .big {
                font-size: 1.2em;
            }
        }
    }

    .modal__ttl {
        font-size: 35px;
    }

    .modal__mainContainer {
        margin: 25px auto 0;
    }

    .box01-modal {
        margin-bottom: 30px;

        .box01__inner {
            padding: 20px 10px 30px !important;
        }

        .box01__top {
            display: flex;
            flex-direction: column-reverse;
        }

        .box01__img {
            position: initial;
            margin: 0 auto;
        }

        .box01__detail {
            & dt {
                span {
                    font-size: 20px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }

        &.box01-reverse {
            .box01__inner {
                padding: 20px 10px 30px !important;
            }
        }
    }

}

/*******************************************
point
*******************************************/

.point {
    .section__inner {
        padding: clamp(40px, 8%, 125px) 0 0;
    }
}

.point__subTtl {
    font-size: var(--font27);
    letter-spacing: var(--fontSpace050);
    line-height: 1.5;
    margin-top: 0.6em;
    text-align: left;
}

.point-container {
    margin-top: max(11.5%, 50px);
}

.box01-point {

    .box01__inner {
        padding-bottom: clamp(40px, 10.5%, 145px);
    }

    .box01__detail {

        dt {
            color: var(--black);
        }

        dd {
            p {
                color: var(--black);
            }
        }
    }
}

.careerBox {
    margin-top: max(12.75%, 40px);
    padding-bottom: max(13.5%, 50px);
}

.careerBox__txt {
    text-align: center;
    margin: max(3%, 15px) 0 max(8.6%, 70px);
    font-weight: var(--weight500);
}

.careerBoxFlex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 100px;
}

.careerBoxFlex__item {
    position: relative;
    background-color: var(--orange01);
    width: calc((100% - 100px)/2);
    padding: 35px 40px 40px;
}

.careerBoxFlex__txtBox {
    .txt {
        color: var(--white);
        letter-spacing: var(--fontSpace050);
        font-size: var(--font25);
        line-height: 1.64;
        margin-bottom: 20px;
    }
}

.careerBoxFlex__detail {
    div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;

            dt {
                background-color: var(--blue01);
            }

            dd {
                color: var(--blue01);
            }
        }
    }

    dt {
        position: relative;
        width: 4.82em;
        aspect-ratio: 82/34;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--font17);
        text-align: center;
        background-color: var(--white);
        color: var(--orange01);
        border-radius: var(--borderRadius01);
        letter-spacing: var(--fontSpace100);
        margin-right: 0.7em;
    }

    .bottom-arrow:before {
        position: absolute;
        content: "";
        display: inline-block;
        width: max(0.6em, 8px);
        aspect-ratio: 10/9;
        background: var(--white);
        clip-path: polygon(0 0, 100% 0%, 50% 100%);
        bottom: -20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    dd {
        flex: 1;
        color: var(--white);
        font-size: var(--font21);
        letter-spacing: var(--fontSpace100);
    }
}

.careerBoxFlex__number {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font22);
    transform: translate(-64%, -47%);

    .txt {
        display: block;
        position: relative;
        letter-spacing: var(--fontSpace100);

        &::before {
            position: absolute;
            content: "";
            top: 120%;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: var(--black);
        }
    }

    .number {
        font-size: 3.636em;
        line-height: 1.1;
    }
}

@media screen and (max-width:1125px) {
    .careerBoxFlex {
        width: min(100%, 900px);
        margin: 0 auto;
        gap: 50px;
    }

    .careerBoxFlex__item {
        width: calc((100% - 50px) / 2);
    }

    .careerBoxFlex__number {
        transform: translate(-45%, -60%);
    }
}

@media screen and (max-width:1024px) {
    .careerBoxFlex {
        flex-direction: column;
        align-items: center;
        gap: 100px;
        width: min(100%, 500px);
    }

    .careerBoxFlex__item {
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .careerBoxFlex__number {
        transform: translate(-15px, -60%);
    }

    .box01-point {
        .box01__img {
            margin-top: -7%;
        }
    }
}

@media screen and (max-width:480px) {
    .careerBoxFlex {
        gap: 70px;
    }

    .careerBoxFlex__item {
        padding: 35px max(7%, 10px);
    }

    .careerBoxFlex__number {
        .number {
            font-size: 2.8em;
            line-height: 1.1;
        }
    }

    .careerBoxFlex__detail {
        dd {
            font-size: 15px;
        }
    }
}

@media screen and (max-width:335px) {
    .box01-point {
        .box01__img {
            margin-top: -16%;
        }
    }
}

/*******************************************
data
*******************************************/
.data {
    background-image: url(../img/data/bg-pc.jpg);

    .section__inner {
        padding: clamp(40px, 8%, 100px) 0 clamp(40px, 8.5%, 115px);
    }
}

.data__ttl {
    width: fit-content;
    margin: 0 auto max(5%, 25px);
    background-color: var(--white);
    font-size: var(--font36);
    letter-spacing: var(--fontSpace050);
    line-height: 1.5;
    padding: 0 0.4em;
}


.dataSwiper__list {
    gap: 25px 50px;

    .swiper-slide {
        width: calc((100% - 100px)/3);
        background-color: var(--white);
        height: auto;
        min-height: 264px;
        display: flex;
        justify-content: center;
        padding: 25px 5px 10px;
    }

    .swiper-slide02 {
        width: calc((100% - 50px)/2);
    }
}

.dataSwiper__detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font30);
    text-align: center;
    flex-grow: 1;

    dt {
        font-size: 0.93em;
        letter-spacing: var(--fontSpace100);
        text-align: center;
        line-height: 1.178;
        display: flex;
        align-items: center;
        flex-grow: 1;
        max-height: 2lh;
    }

    dd {
        font-size: 1.8666em;

        .big {
            font-size: 1.785em;
            color: var(--orange03);
        }

        .small {
            font-size: 0.714em;
        }

        .txt {
            display: block;
            font-size: var(--font15);
            text-align: center;
            margin-top: 10px;
        }
    }
}

@media screen and (max-width:1024px) {

    .dataSwiper {
        width: min(100%, 700px);
        margin: 0 auto;
    }

    .dataSwiper__list {
        gap: 25px;

        .swiper-slide {
            width: calc((100% - 25px)/2);
        }

        .swiper-slide02 {
            width: calc((100% - 25px)/2);
        }
    }
}

@media screen and (max-width:480px) {

    .dataSwiper__list {
        .swiper-slide {
            min-height: initial;
            padding: 15px 5px;
        }
    }

    .dataSwiper__detail {
        & dd {
            font-size: 1.5em;

            .big {
                font-size: 1.5em;
            }
        }
    }
}




/*******************************************
ページネーション
*******************************************/
.paginationFlex {
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: max(7%, 30px);
    gap: 10px;
}

.pagiDot {
    width: fit-content !important;

    .swiper-pagination-bullet {
        background-color: var(--white);
        opacity: 1;
        border: 1px solid var(--black);
    }

    .swiper-pagination-bullet-active {
        background-color: transparent;
        background-color: var(--black);
        opacity: 1;
    }
}

.pagiBtn {
    position: relative;
    width: 40px;
    aspect-ratio: 1;
    background: var(--white);
    border: 1px solid var(--black);
    border-radius: var(--borderRadiusCircle);
    cursor: pointer;

    &::before,
    &::after {
        position: absolute;
        content: "";
        top: 50%;
        left: 50%;
        background-color: var(--black);
        width: 30%;
        height: 2px;
    }

    &::before {
        transform-origin: bottom right;
        transform: translate(-65%, -33%) rotate(45deg);
    }

    &::after {
        transform-origin: top right;
        transform: translate(-65%, -67%) rotate(-45deg);
    }

}

.prevBtn {
    transform: rotate(180deg);
}

@media screen and (max-width:768px) {
    .paginationFlex {
        display: flex;
    }
}


/*******************************************
aboutJob
*******************************************/
.aboutJob {

    background-image: url(../img/aboutJob/bg.png);
    background-repeat: repeat;
    background-size: clamp(80px, 17.43vw, 245px);
    background-position: top left;

    .section__inner {
        padding: clamp(40px, 8.5%, 115px) 0 clamp(40px, 10%, 135px);
    }

    .section__ttl--parts {
        transform: translate(19%, 16%);
    }
}

.aboutJob-container {
    margin-top: max(16.7%, 70px);
}

.JobDetail {
    padding: 35px 5px 35px 0;
    background-color: #c8ceff;

    dt {
        font-size: var(--font20);
        color: var(--blue01);
        font-weight: var(--weight500);
        width: 8.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.7;
    }

    dd {
        border-left: 2px solid var(--blue01);
        padding-left: 25px;

        .list {
            li {
                margin-bottom: 15px;
                color: var(--blue01);

                &:last-child {
                    margin-bottom: 0;
                }

                p {
                    position: relative;
                    padding-left: 1em;
                    font-weight: var(--weight500);
                    line-height: 1.2;

                    &::before {
                        position: absolute;
                        content: "●";
                        font-size: 0.7em;
                        top: 0.38em;
                        left: 0;
                        color: var(--blue01);
                        line-height: 1;
                    }
                }
            }
        }
    }
}

.JobDetail__inner {
    display: flex;
    justify-content: flex-start;

}

.box01-aboutJob {

    margin-bottom: max(19.2%, 70px);

    &:last-child {
        margin-bottom: 0;
    }


    .box01__content {
        margin-top: 20px;
    }

    .box01__contentInner {
        width: min(100%, 772px);
        margin: 0 auto 0 0;
    }

    .box01__detail {
        dt {
            margin-bottom: clamp(15px, 5%, 30px);

            span {
                display: inline-block;
            }

            .small {
                font-size: 0.7em;
                letter-spacing: var(--fontSpace050);
            }
        }
    }

    &.box01-reverse {
        .box01__contentInner {
            margin: 0 0 0 auto;
        }
    }
}

.btn-outer-job {
    width: min(100%, 500px);
    margin-top: max(9.5%, 30px);

    .btn {
        font-weight: var(--weight500);
        letter-spacing: var(--fontSpace050);
    }
}

.Heal-BD-flex {
    padding: 40px 0 65px;
    display: flex;

    .img {
        width: min(100%, 180px);
        margin-right: 35px;
    }
}

.Heal-BD__detail {
    flex: 1;
    color: var(--white);

    dt {
        font-size: var(--font26);
        margin-bottom: 10px;
        letter-spacing: var(--fontSpace050);
    }

    dd {
        p {
            font-weight: var(--weight500);
        }
    }
}

@media screen and (max-width:1024px) {
    .box01-aboutJob {
        .box01__color {
            width: max(80vw, 812px);
        }
    }
}

@media screen and (max-width:768px) {

    .aboutJob-container {
        margin-top: max(22%, 100px);
    }

    .box01-aboutJob {
        .box01__color {
            width: calc(100% + 20px);
        }

        .box01__inner {
            padding-top: clamp(50px, 25%, 150px);
        }

        .box01__detail {
            dt {
                margin-bottom: 10px;
            }
        }
    }

    .JobDetail {
        padding: 30px 10px;

        dt {
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
        }

        dd {
            border-left: none;
            border-top: 2px solid var(--blue01);
            padding: 15px 0 0;
        }
    }

    .JobDetail__inner {
        flex-direction: column;
        align-items: center;
    }

    .Heal-BD-flex {
        flex-direction: column;
        align-items: center;
        padding: max(5%, 15px) 0 max(6.6%, 20px);

        .img {
            margin: 0 0 15px;
        }

    }

    .Heal-BD__detail {
        dt {
            text-align: center;
        }
    }
}

@media screen and (max-width:550px) {

    .aboutJob-container {
        margin-top: max(24%, 70px);
    }

    .box01-aboutJob {
        .box01__color {
            width: calc(100% + 20px);
        }

        .box01__img {
            margin-top: min(-15%, -45px);
        }
    }
}

@media screen and (max-width:480px) {

    .box01-aboutJob {
        & .box01__detail {
            & dt {
                .small {
                    font-size: 0.5em;
                }
            }
        }
    }

    .JobDetail {
        padding: 20px 10px 30px;

    }
}

@media screen and (max-width:365px) {
    .box01-aboutJob {
        & .box01__detail {
            & dt {
                .small {
                    font-size: 0.7em;
                    display: block;
                }
            }
        }
    }
}


@media screen and (max-width:355px) {
    .aboutJob {
        .section__ttl {
            font-size: 15vw;
        }

        .section__ttl--parts {
            transform: translate(12%, 26%);
        }
    }

    .size25 {
        display: block;
        font-size: 6.9vw !important;
    }
}

/*******************************************
staffVoice
*******************************************/
.staffVoice {
    .section__ttl {
        margin: 0 auto;
    }

    .section__inner {
        padding: clamp(40px, 9%, 125px) 0;
    }

    .section__ttl--parts {
        transform: translate(21%, 16%);
        z-index: 1;
    }
}

.staffVoice-parts01 {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: max(100%, 450px);
    transform: translate(-50%, 28%);
    z-index: -1;

}

.staffVoice__img {
    margin-top: -20px;
}

.staffVoice-container {
    margin-top: max(4.6%, 30px);
}

.staffVoicBox {
    position: relative;
    margin-top: 45px;

    &:first-child {
        margin-top: 0;
    }
}

.voiceSwiper-outer {
    margin-top: max(5%, 30px);

    &.bg-wave {
        &::before {
            transform: translateX(-50%) scaleX(-1);
        }
    }
}

.voiceSwiper {
    padding-bottom: 55px;
}

.voiceSwiper__list {
    gap: 30px 20px;

    .swiper-slide {
        width: calc((100% - 40px)/3);
        height: auto;
        display: flex;
        flex-direction: column;

        /* background-color: aqua; */
        .txtBox {
            padding: 25px;
            width: min(100%, 283px);
        }
    }


    .swiper-slide02 {
        .txtBox {
            width: min(100%, 294px);
            margin: auto auto 0 auto;
        }
    }

    .swiper-slide03 {
        .txtBox {
            width: min(100%, 275px);
            margin: 0 0 0 auto;
        }
    }

    .swiper-slide04 {
        .txtBox {
            width: min(100%, 283px);
            margin: auto auto 0 auto;
        }
    }

    .swiper-slide05 {
        .txtBox {
            padding: 25px 20px;
            width: min(100%, 335px);
            margin: auto;
        }
    }

    .swiper-slide06 {
        .txtBox {
            width: min(100%, 270px);
            margin: 0 auto;
        }
    }
}

.txt-center {
    text-align: center;
    margin: max(3%, 15px) 0 max(6%, 25px);
}

.caseSwiper-tab__list {
    height: 70px;

    .swiper-slide {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--orange01);
        cursor: pointer;
        color: var(--orange01);
        transition: var(--transitionBase01);
        font-size: 23px;

        &:hover {
            opacity: var(--opacity07);
        }

        &.swiper-slide-thumb-active {
            background-color: var(--orange01);
            color: var(--white);
        }
    }

    .swiper-slide02 {
        border-left: none;
        border-right: none;
    }
}

.caseSwiper-cont {
    border: 1px solid var(--orange01);
    border-top: none;
}

.caseSwiper-cont__list {
    .swiper-slide {
        padding: 35px 25px 25px 15px;
        background-color: var(--beige02);
    }
}

.caseSwiper__ttl {
    .ttl01__item {
        span {
            font-weight: var(--weight700);
            font-size: var(--font30);
        }
    }
}

.caseSwiper-cont__main {
    position: relative;
    margin-top: 35px;
    padding: 65px 0 95px;
}

.caseSwiper-cont__typeBox {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--white);
    font-size: var(--font19);
    width: min(100%, 310px);
    padding: 20px 15px 15px;

    .type {
        display: block;
        color: var(--orange01);
        font-size: 1.684em;

        .small {
            font-size: 0.8em;
        }
    }

    .day {
        display: block;
        font-weight: var(--weight500);
        margin: 15px 0 10px;
    }

    .name {
        display: block;
        font-size: 1.789em;
        font-weight: var(--weight500);

        .small {
            font-size: 0.441em;
        }
    }
}

.caseSwiper-cont__txtBox {
    position: relative;
    border-bottom: 3px solid var(--orange03);
    padding: 15px 20px 20px;

    &::before {
        position: absolute;
        content: "";
        width: 10%;
        height: 3px;
        background-color: var(--orange03);
    }

    .txt01 {
        font-size: var(--font26);
        letter-spacing: var(--fontSpace050);
        font-weight: var(--weight700);
        text-align: left;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .txt02 {
        line-height: 1.588;
    }
}

.caseSwiper-cont__txtBox01 {
    position: absolute;
    top: 35px;
    right: 0;
    width: min(100%, 405px);
    border-left: 3px solid var(--orange03);

    &::before {
        width: 20%;
        left: 0;
        top: 115px;
        transform-origin: right center;
        transform: translateX(-102%) rotate(39deg);
    }
}

.caseSwiper-cont__txtBox02 {
    width: min(100%, 427px);
    border-right: 3px solid var(--orange03);
    position: absolute;
    top: 45%;
    left: 18%;

    &::before {
        width: 40%;
        right: 0;
        top: 80px;
        transform-origin: left center;
        transform: translateX(102%) rotate(-24deg);
    }
}

.caseSwiper-cont__txtBox--goal {
    position: absolute;
    left: 0;
    bottom: 0;
    border: 6px solid var(--orange03);
    width: min(100%, 461px);
    border-radius: 50%;
    padding: 55px 10px;
    background-color: var(--beige03);
    text-align: center;

    .txt01 {
        line-height: 1.5;
        margin-bottom: 10px;
        text-align: left;
    }

    &::after {
        position: absolute;
        content: "";
        background-image: url(../img/staffVoice/flag.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 164px;
        aspect-ratio: 164/187;
        top: 0;
        left: 0;
        transform: translate(0%, -60%);
    }

    div {
        width: min(100%, 328px);
        margin: 0 auto;
    }

    &::before {
        display: none;
    }
}

.arrowBox-case {
    padding: 20px 25px;
}


.arrowBox-case01 {
    position: absolute;
    top: 195px;
    left: 0;
    width: min(100%, 455px);

    &::before {
        width: 52px;
        left: 12%;
    }
}

.arrowBox-case02 {
    width: min(100%, 407px);
    position: absolute;
    bottom: 165px;
    right: 0;

    &::before {
        width: 52px;
        left: 76%;
        transform: translateY(65%) scaleX(-1);
    }
}

.caseSwiper-cont__q {
    dt {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: var(--font24);

        .q-icon {
            position: relative;
            display: block;
            background-color: var(--white);
            width: 1.44em;
            aspect-ratio: 1;
            font-size: 1.5833em;
            margin-top: 0.15em;

            &::before {
                position: absolute;
                content: "Q";
                font-size: 1em;
                color: var(--orange03);
                top: 50%;
                left: 50%;
                transform: translate(-50%, -60%);
            }
        }

        .txt {
            flex: 1;
            font-size: var(--font24);
            margin-left: 10px;
            line-height: 1.25;
        }
    }

    dd {
        margin-top: 10px;

        .txt {
            line-height: 1.588;
        }
    }
}



.caseSwiper-cont__road {
    width: min(100%, 697px);
    margin: 0 auto;
    transform: translateX(2%);
}

.caseSwiper-cont-slide02 {
    .arrowBox-case02 {
        bottom: 135px;
    }
}

.caseSwiper-cont-slide03 {
    .arrowBox-case02 {
        bottom: 90px;
    }
}


.btn-outer-back {
    width: min(100%, 300px);
    margin: 0 0 0 auto;

    .btn {
        border-radius: 0 0 var(--borderRadius10) var(--borderRadius10);
        letter-spacing: var(--fontSpace050);
        font-weight: var(--weight500);

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/common/arrow.svg);
            background-size: contain;
            background-repeat: no-repeat;
            width: 1em;
            aspect-ratio: 12/9;
            top: 50%;
            right: 5%;
            transform: translateY(-50%) rotate(-90deg);
        }
    }
}

@media screen and (max-width:1024px) {

    .caseSwiper-cont__list {
        .swiper-slide {
            padding: 35px 15px 30px;
            background-color: var(--beige02);
        }
    }

    .caseSwiper-cont__main {
        position: relative;
        margin-top: 35px;
        padding: 0 0 0;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .caseSwiper-cont__typeBox,
    .caseSwiper-cont__txtBox,
    .arrowBox-case {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .caseSwiper-cont__road {
        display: none;
    }

    .caseSwiper-cont__txtBox {
        margin-left: auto;
        width: min(100%, 500px);

        &::before {
            display: none;
        }
    }

    .arrowBox-case {
        width: min(100%, 500px);

        &::before {
            display: none;
        }
    }

    .caseSwiper-cont__txtBox--goal {
        margin: max(5%, 20px) auto 0;

        &:after {
            width: 100px;
            transform: translate(29%, -50%);
        }
    }
}


@media screen and (max-width:768px) {
    .voiceSwiper-outer {
        &.bg-wave {
            &::before {
                transform: translate(-50%, 10%) scaleX(-1);
            }
        }
    }

    .voiceSwiper {
        padding-bottom: 0;
    }

    .voiceSwiper__list {

        .swiper-slide {
            .txtBox {
                width: 100%;
                margin: 0;
                height: 100%;
                display: flex;
                align-items: center;
            }
        }

        .arrowBox {
            &::before {
                display: none;
            }
        }
    }
}

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

    .voiceSwiper-outer {
        &.bg-wave {
            &::before {
                transform: translate(-50%, 20%) scaleX(-1);
            }
        }
    }


    .caseSwiper-tab__list {
        height: 60px;

        .swiper-slide {
            font-size: 17px;
        }
    }


    .caseSwiper-cont__main {
        margin-top: 20px;
        gap: 30px;
    }

    .caseSwiper-cont__typeBox {
        font-size: 14px;
        padding: 10px;
        width: min(100%, 200px);

        .type {
            font-size: 1.5em;
        }

        .day {
            margin: 10px 0 5px;
        }

    }

    .caseSwiper-cont__txtBox {
        padding: 0 15px 10px;
    }

    .arrowBox-case {
        padding: 15px;
    }

    .caseSwiper-cont__q {
        & dt {
            .q-icon {
                font-size: 1em;
            }
        }
    }

    .caseSwiper-cont__txtBox--goal {
        padding: 20px 10px;
        border: 3px solid var(--orange03);
        border-radius: 30px;

        .txt01 {
            margin-bottom: 5px;
        }

        &:after {
            width: 60px;
            transform: translate(13%, -70%);
        }
    }

    .caseSwiper-cont-slide03 {
        .caseSwiper-cont__typeBox {
            width: min(100%, 210px);
        }
    }

    .btn-outer-back {
        width: min(100%, 200px);
        margin: 0 0 0 auto;
    }
}

@media screen and (max-width:375px) {
    .staffVoice {
        .section__ttl--parts {
            transform: translate(12%, 31%);
        }
    }
}

@media screen and (max-width:360px) {
    .staffVoice {
        .ttl01__item {
            span {
                font-size: 6.6vw;
            }
        }
    }

    .caseSwiper-tab__list {
        .swiper-slide {
            font-size: 15px;
        }
    }



}

@media screen and (max-width:345px) {
    .staffVoice {
        .section__ttl {
            font-size: 14vw;
        }

        .section__ttl--parts {
            transform: translate(12%, 31%);
        }
    }
}




/*******************************************
sp時　スライダー
*******************************************/

.resetSwiper__list {
    flex-wrap: wrap;
    justify-content: space-between;
}

@media screen and (max-width:768px) {

    .resetSwiper {
        width: min(100%, 350px);
        overflow: visible;
    }

    .resetSwiper__list {
        flex-wrap: nowrap;
        justify-content: initial;
        gap: 0;

        .swiper-slide {
            width: auto;
        }

        .swiper-slide02 {
            width: auto;
        }
    }

}

/*******************************************
entry
*******************************************/
.entry {
    position: relative;

    & .parallax {
        background-image: url(../img/entry/bg-pc.jpg);
        background-position: center;
    }

    .section__inner {
        padding: clamp(45px, 4%, 50px) 0;
    }
}

.entry__mv {
    height: 587px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.entry__ttlBox {
    position: relative;
    width: fit-content;
    font-size: 40px;
    text-align: center;

    .ja {
        color: var(--white);
        text-align: center;
        line-height: 1.5;
        font-size: 1em;
        letter-spacing: var(--fontSpace050);
    }

    .en {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 3.375em;
    }
}

.entryBtnList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px 35px;
}

.btn-outer-entry {
    width: calc((100% - 35px)/2);
    height: 90px;

    .btn {
        line-height: 1.47;
    }
}

@media screen and (max-width:1024px) {

    .entry__mv {
        height: 450px;
    }

    .entry__ttlBox {
        font-size: 30px;
    }
}


@media screen and (max-width:768px) {
    .entry {
        &.parallax {
            background-image: url(../img/entry/bg-sp.jpg);
        }
    }

    .entry__mv {
        height: 400px;
    }

    .entry__ttlBox {
        font-size: 25px;
    }


}

@media screen and (max-width:650px) {
    .entryBtnList {
        width: min(100%, 300px);
        margin: 0 auto;
        gap: 20px;
    }

    .btn-outer-entry {
        width: 100%;
        height: 70px;
    }
}


@media screen and (max-width:480px) {
    .entry__mv {
        height: 350px;
    }

    .entry__ttlBox {
        font-size: 20px;
    }


}



/*******************************************
footer
*******************************************/

.footer {
    background-color: var(--blue01);
    padding: 50px 0;
    position: relative;
    font-size: 12px;
    color: var(--white);
    font-weight: var(--weight500);
}

.footer-nav {
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    gap: 30px;

    a {
        position: relative;

        &:hover {
            opacity: var(--opacity07);
        }
    }

    a:not(:first-child):before {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        background-color: var(--white);
        top: 50%;
        left: -14px;
        transform: translate(50%, -50%);
    }
}


.copyright {
    text-align: center;
    font-size: 12px;
}

@media screen and (max-width:1024px) {
    .footer {
        padding-bottom: 100px;
    }
}


@media screen and (max-width:511px) {

    .footer {
        .inner {
            padding: 0 15px;
        }
    }

    .footer-nav {
        flex-wrap: wrap;
        column-gap: 30px;
        row-gap: 10px;


        & a:last-child::before {
            display: none;
        }

        & a:not(:first-child):before {
            left: -14px;
        }
    }
}