@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #000;
    --black02: rgba(0, 0, 0, 0.2);
    --gray01: #979797;
    --red01: #c60f00;
    --red02: #e5938c;
    --beige01: #fbf8f2;
    --beige02: rgba(251, 248, 242, 0.7);
    --beige03: #f8f3e9;
    --beige04: #fbf8f2;
    --gold01: #b57f10;


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

    /* 書式 */
    --zenKaku: "Zen Kaku Gothic New", sans-serif;
    --josefin: "Josefin Sans", sans-serif;

    /* 文字サイズ */
    --font16: clamp(10px, 0.56vw + 7.89px, 16px);
    --font17: clamp(11.69px, 0.56vw + 9.89px, 17px);
    --font18: clamp(11.69px, 0.56vw + 9.89px, 18px);
    --font19: clamp(11.64px, 0.66vw + 9.54px, 19px);
    --font20: clamp(10px, 1.03vw + 5.13px, 20px);
    --font21: clamp(11.54px, 0.85vw + 8.83px, 21px);
    --font23: clamp(13.54px, 0.85vw + 10.83px, 23px);
    --font25: clamp(10px, 1.41vw + 4.72px, 25px);
    --font26: clamp(12.33px, 1.22vw + 8.42px, 26px);
    --font28: clamp(14.33px, 1.22vw + 10.42px, 28px);
    --font35: clamp(16.07px, 1.69vw + 10.66px, 35px);
    --font41: clamp(10px, 2.82vw + 0.44px, 41px);
    --font46: clamp(14.45px, 2.82vw + 5.44px, 46px);
    --font47: clamp(18.61px, 2.54vw + 10.49px, 47px);
    --font56: clamp(13.93px, 3.76vw + 1.92px, 56px);
    --font58: clamp(25.40px, 2.91vw + 16.08px, 58px);
    --font62: clamp(16.78px, 4.04vw + 3.86px, 62px);
    --font79: clamp(34.83px, 3.94vw + 22.21px, 79px);
    --font109: clamp(31.18px, 6.95vw + 8.94px, 109px);

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

    /* 行間 */
    --lineHight120: 1.2;
    --lineHight160: 1.6;
    --lineHight20: 2.0;

    /* 文字間 */
    --fontSpace030: 0.03em;
    --fontSpace040: 0.04em;
    --fontSpace050: 0.05em;
    --fontSpace100: 0.10em;
    --fontSpace110: 0.11em;
    --fontSpace140: 0.14em;
    --fontSpace150: 0.15em;
    --fontSpace290: 0.29em;
    --fontSpace300: 0.3em;

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

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

    --opacity07: .7;


    --responsivePadding: clamp(15px, 4.16vw, 40px);

}


@media screen and (max-width: 768px) {
    :root {
        --opacity07: 1;
    }


}

@media screen and (max-width: 480px) {
    :root {
        --borderRadius20: 10px;
        --borderRadius30: 15px;
    }
}



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

body {
    color: var(--black);
    font-family: var(--zenKaku);
    font-weight: var(--weight700);
    font-size: var(--font17);
    line-height: var(--lineHight120);

    a,
    .hamburger,
    .btn,
    .pagiBtn,
    .aco-click {
        transition: var(--transition01);

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

p {
    text-align: justify;
    font-size: var(--font17);
    line-height: var(--lineHight175);
    letter-spacing: var(--fontSpace030);
}

.section {
    position: relative;
}

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

    padding: 100px 0;

    @media screen and (max-width:1400px) {
        padding-left: var(--responsivePadding) !important;
        padding-right: var(--responsivePadding) !important;
    }
}

.section__ttl,
.headerNav__item:not(:last-child) a {
    display: flex;
    flex-direction: column;

    .en {
        font-family: var(--josefin);
        letter-spacing: var(--fontSpace040);
    }

    .ja {
        letter-spacing: var(--fontSpace140);
        color: var(--red01);
    }
}

.section__ttl {
    position: relative;
    align-items: center;

    &::before {
        position: absolute;
        content: "";
        width: 2px;
        height: clamp(37px, 5.55vw, 80px);
        background-color: var(--red01);
        top: 0;
        left: 50%;
        transform: translate(-50%, -155%);
    }

    .en {
        font-size: var(--font79);
    }

    .ja {
        font-size: var(--font26);
    }
}

.push {
    display: inline-block;
}

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

.under-line01 {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4em;
    text-decoration-color: var(--black01);
}

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

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

.mark-circle {
    position: relative;
    padding-left: 1.2em;
    font-size: min(var(--font19), 18px);
    line-height: var(--lineHight150);
    display: inline-block;
    font-weight: var(--weight500);

    &::before {
        position: absolute;
        content: "◯";
        font-size: 1em;
        top: 0;
        left: 0;
    }
}

.font-red01 {
    color: var(--red01);
}

.nowrap {
    white-space: nowrap;
}


.block480,
.block768 {
    display: none;
}

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

    .none768 {
        display: none;
    }
}

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

    .none480 {
        display: none;
    }
}



/*******************************************
btn
*******************************************/
.btn-outer {
    width: min(100%, 300px);
    height: 60px;

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

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


    &::before {
        position: absolute;
        content: "";
        mask-image: url(../img/common/arrow.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        top: 50%;
        right: 5%;
        width: 0.94em;
        aspect-ratio: 18/12.5;
        transform: translateY(-50%);
        background-color: var(--white);
    }

    .small {
        font-size: 0.789em;
        font-family: var(--josefin);
        font-weight: var(--weight400);
    }
}

.btn-black01 {
    background-color: var(--black);
}

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





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

.topReturn {
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: 60px;
    aspect-ratio: 1;
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    transition: var(--transition01);


    .btn {
        background-color: rgba(255, 255, 255, 0.5);
        background-color: var(--black);

        &::before {
            width: 35%;
            right: 50%;
            transform: translate(50%, -50%) rotate(-90deg);
        }
    }

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





/*******************************************
entryBox-fixed 
*******************************************/
.entryBox-fixed {
    display: flex;
    justify-content: center;
    width: min(100%, 428px);
    height: 57px;
    border-radius: var(--borderRadius01);
    overflow: hidden;
    transition: var(--transition01);

    .btn-outer {
        width: 50%;
        height: 100%;

        .btn {
            border-radius: 0;
            line-height: 1;
        }
    }

    @media screen and (max-width: 1024px) {
        position: fixed;
        left: 50%;
        bottom: 2%;
        width: min(95.19vw, 500px);
        transform: translateX(-50%);
        opacity: 0;
        visibility: hidden;
        border: 1px solid var(--white);

    }
}










/*******************************************
header
*******************************************/
:root {
    --headerHeight: clamp(45px, 6.94vw, 100px);
}

.header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 30px;
    height: var(--headerHeight);
    z-index: 95;
    transition: var(--transition01);

    @media screen and (max-width:1024px) {
        position: relative;
        padding: 0 min(4vw, 15px);
    }
}

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

    @media screen and (max-width:1024px) {
        backdrop-filter: initial;
    }
}

.header__logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: clamp(300px, 30.14%, 416px);

    a {
        display: inline-block;
        width: 100%;
        height: 100%;
        transition: var(--transition01);
        flex: 1;

    }

    .txt {
        display: flex;
        font-size: var(--font21);
        padding-left: 0.714em;
        color: var(--red01);
        letter-spacing: var(--fontSpace100);
    }

    @media screen and (max-width:480px) {
        width: max(70.43%, 230px);
    }
}

.header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 20px;
}



.hamburger {
    display: block;
    position: relative;

    width: 50px;
    aspect-ratio: 50/40;
    cursor: pointer;
    z-index: 100;
    transition: var(--transition01);


    .line {
        position: absolute;
        width: 100%;
        height: 4px;
        left: 50%;
        transform: translateX(-50%);
        transition: var(--transition01);
        background-color: var(--red01);

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

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

        &:nth-of-type(3) {
            bottom: 0;
        }
    }

    @media screen and (max-width:1024px) {
        position: fixed;
        right: 2%;
        top: calc(var(--headerHeight)/2);
        transform: translateY(-50%);
        width: 40px;
    }

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

        .line {
            height: 2px;
        }
    }

    @media screen and (max-width:480px) {
        width: 24px;
        right: 4%;
    }
}


.headerNav {
    position: fixed;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 95;
    background-color: var(--beige02);
    backdrop-filter: blur(10px);
    transition: var(--transition01);
    opacity: 0;
    visibility: hidden;
}

.headerNav__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: min(30%, 400px);
    height: 100%;
    padding: clamp(30px, 10svh, 100px) 35px 2svh;
    margin-left: auto;
    background-color: var(--beige01);
    transform: translateX(100%);
    transition: var(--transition01);

    @media screen and (max-width:768px) {
        padding-left: 15px;
        padding-right: 15px;
        width: min(40%, 400px);
    }

    @media screen and (max-width:480px) {
        width: 100%;
        padding: clamp(40px, 9svh, 150px) 15px 2svh;
    }
}

.headerNav__item {
    margin: 0 0 5svh;

    &:nth-last-child(2) {
        margin: 0;
    }


    &:not(:last-child) a {
        font-size: 30px;

        .en {
            font-size: 1em;
        }

        .ja {
            font-size: 0.7em;
        }
    }

    @media screen and (max-width:1024px) {
        &:not(:last-child) a {
            font-size: 23px;
        }
    }

    @media screen and (max-width:480px) {
        margin-bottom: 30px;
        width: min(100%, 180px);
        margin-left: auto !important;
        margin-right: auto !important;

        &:not(:last-child) a {
            font-size: 23px;


            .ja {
                font-size: 0.52em;
            }
        }
    }
}

.headerNav__item--btn {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin: 8svh 0 0;

    .btn-outer {
        height: 60px;
    }

    .btn {
        font-size: 16px;
    }

    @media screen and (max-width:1024px) {
        .btn {
            font-size: 14px;
        }
    }

    @media screen and (max-width:480px) {
        width: min(100%, 180px);
        margin: 30px auto 0;

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

        .btn {
            font-size: 13px;
        }

    }
}




.active {
    .line {

        &:nth-of-type(1) {
            top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        &:nth-of-type(2) {
            opacity: 0;
        }

        &:nth-of-type(3) {
            bottom: 50%;
            transform: translate(-50%, 50%) rotate(-45deg);
        }
    }

    .headerNav {
        opacity: 1;
        visibility: visible;
    }

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




/*******************************************
mv
*******************************************/
.mv {
    position: relative;
    margin-top: var(--headerHeight);
    font-size: 1.7361vw;
    padding-top: 3.28em;

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

    @media screen and (max-width:768px) {
        font-size: 3.466vw;
        padding-top: 3.46em;
    }
}

.mv__parts {
    position: absolute;
    letter-spacing: -0.02em;
    font-size: 7.16em;
    color: var(--beige03);
    font-family: var(--josefin);
    top: 0;

    @media screen and (max-width:768px) {
        font-size: 6.46em;
    }
}

.mv__parts01 {
    left: 0;
    transform: translate(-19%, 0) scaleX(0.65);

    @media screen and (max-width:768px) {
        transform: translate(-9%, -8%) scaleX(0.82);
    }
}

.mv__parts02 {
    right: 0;
    transform: translate(17%, 0) scaleX(0.65);

    @media screen and (max-width:768px) {
        top: 49%;
        right: auto;
        left: 50%;
        transform: translate(-50%, 0) scaleX(0.82);
    }
}

.mv__ttl {
    position: relative;
    width: 38.44em;
    margin: 0 15.5% 0 auto;
    z-index: 1;

    @media screen and (max-width:768px) {
        width: 12.3em;
        margin: 0 auto;
    }
}

.mv__imgBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.2em;
    width: 95.28%;
    margin: -2% auto 0;

    .img {
        position: relative;
    }

    .badge {
        position: absolute;
        font-size: 1.12em;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 5.96em;
        aspect-ratio: 1;
        color: var(--white);
        background-color: var(--red01);
        border-radius: var(--borderRadiusCircle);
        text-align: center;
        line-height: 1.32;
        top: 0;
        letter-spacing: var(--fontSpace100);
    }

    .img01 {
        .badge {
            left: 0;
            transform: translate(-10%, -30%);
        }
    }

    .img02 {
        .badge {
            right: 0;
            transform: translate(10%, -30%);
        }
    }

    @media screen and (max-width:768px) {
        width: 90.67%;
        gap: 1.15em;
        margin-top: 1.92em;

        .badge {
            font-size: 0.92em;
            width: 5em;
        }

        .img01 {
            .badge {
                transform: translate(-10%, -120%);
            }
        }

        .img02 {
            .badge {
                transform: translate(10%, -120%);
            }
        }
    }
}

.mv__txt {
    font-size: 1em;
    text-align: center;
    margin-top: 0.8em;
    letter-spacing: var(--fontSpace290);

    @media screen and (max-width:768px) {
        line-height: 1.75;
        margin-top: 1.15em;
    }
}

.btn-outer-mv {
    position: absolute;
    bottom: 8%;
    right: 4%;
    font-size: 1.2em;
    height: auto;
    aspect-ratio: 271/99;
    width: 9em;

    .btn {
        font-size: 1em;
        line-height: 1;
        letter-spacing: var(--fontSpace100);

        &::before {
            display: none;
        }

        .nomal {
            display: inline-block;
            transform: translateY(10%);
        }

        .small {
            font-size: 0.66em;
            font-family: var(--zenKaku);
            font-weight: var(--weight700);
            line-height: 1;
        }
    }

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



/*******************************************
search
*******************************************/
.search {
    .section__inner {
        padding: clamp(90px, 12.5vw, 180px) 0 clamp(70px, 12.5vw, 180px);
    }
}


.searchBox__ttl {
    margin-bottom: 15px;

    @media screen and (max-width:768px) {
        margin-bottom: 8px;
    }
}

.search-container {
    background-color: var(--beige01);
    margin-top: max(4.45%, 25px);
}

.searchBox-outer {
    display: flex;
    gap: clamp(35px, 4.513vw, 65px);
    margin: 0 auto;
    padding: 45px 50px 115px;

    @media screen and (max-width:768px) {
        flex-direction: column;
        padding: 30px 25px;
    }
}

.searchBox {
    width: 100%;
    flex: 1;
}

.searchBox__ttl {
    font-size: var(--font26);
    letter-spacing: var(--fontSpace140);
}

.searchBox__list {
    border-top: 2px solid var(--black);
    padding: 15px 0 0 0;

    .btn-outer {
        width: 100%;
        height: auto;
        border-bottom: 2px solid var(--black02);
    }

    .btn {
        border-radius: 0;
        background-color: transparent;
        font-size: var(--font21);
        color: var(--black);
        letter-spacing: var(--fontSpace140);
        padding: 1.19em 0 1.19em 1.42em;
        text-align: left;
        align-items: flex-start;

        &::before {
            width: 1.476em;
            background-color: var(--black);

        }


        span {
            position: relative;
            padding-left: 1.3em;

            &:after {
                position: absolute;
                content: "●";
                font-size: 1em;
                top: 0;
                left: 0;
            }
        }
    }

    @media screen and (max-width:768px) {
        padding-top: 5px;

        .btn-outer {
            border-bottom: 1px solid var(--black02);
        }

        .btn {
            padding: 1em 0 1em 1.25em;

            &::before {
                width: 1.25em;

            }

            span {
                padding-left: 1.25em;
            }
        }
    }
}






/*******************************************
job
*******************************************/
.job {
    transition: var(--transition01);
    background-color: var(--beige01);

    .section__inner {
        transition: var(--transition01);
        width: min(100%, 1230px);
        padding: clamp(50px, 6.597vw, 95px) 0 clamp(70px, 10.41vw, 150px);
    }

    .section__ttl {
        &::before {
            transform: translate(-50%, -161%);
        }
    }
}

.jobTop {
    position: relative;
    margin-top: max(6.5%, 25px);

    &::before {
        position: absolute;
        content: "ABOUT JOB";
        top: 50%;
        left: 50%;
        transform: translate(-51%, -34%);
        font-family: var(--josefin);
        color: var(--white);
        line-height: 1;
        font-size: max(15.34vw, 70px);
        white-space: nowrap;
        letter-spacing: var(--fontSpace040);
    }
}

.jobTop__txt {
    position: relative;
    letter-spacing: var(--fontSpace300);
    font-size: var(--font58);
    text-align: center;
    line-height: 2.01;
    text-decoration: underline;
    text-decoration-thickness: max(0.068em, 2px);
    text-underline-offset: 0.6em;
    text-decoration-color: var(--black01);

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

.jobSwiper-outer {
    transition: var(--transition01);
    margin: min(16vw, 100px) auto 0;
}

.jobSwiper-tab {
    position: relative;
    width: min(32.55vw, 380px);
    margin: 0 auto;
    border-radius: 20px;
    z-index: 2;

    @media screen and (max-width:768px) {
        width: max(32.8vw, 123px);
        border-radius: 10px;
    }

    @media screen and (max-width:480px) {
        border-radius: 6.4px;
    }
}

.jobSwiper-tab__list {
    .swiper-slide {
        font-size: var(--font109);
        aspect-ratio: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--red02);
        line-height: 1;
        cursor: pointer;
        transition: var(--transition01);
        color: var(--white);

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

    .swiper-slide-thumb-active {
        background-color: var(--red01);

    }
}











/*******************************************
job (cont)
*******************************************/
.jobSwiper-cont {
    overflow: visible;
    margin-top: -95px;

    @media screen and (max-width:768px) {
        margin-top: min(-8.2vw, -30.75px);
    }
}

.jobSwiper-cont__list {
    transition: var(--transition01) !important;

    .swiper-slide {
        background-color: var(--white);
        padding: clamp(50px, 14.6vw, 155px) clamp(15px, 4vw, 65px) clamp(60px, 16vw, 130px);
        box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.1);
    }

    @media screen and (max-width:480px) {
        .swiper-slide {
            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
        }
    }
}


.jobMainBox {
    padding-bottom: clamp(40px, 12vw, 155px);
    border-bottom: 2px solid var(--gray01);
    margin-bottom: clamp(40px, 12vw, 125px);

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

    @media screen and (max-width:480px) {
        border-bottom: 1px solid var(--gray01);
    }
}

.jobMain__ttl {
    font-size: var(--font62);
    letter-spacing: var(--fontSpace140);
    position: relative;
    text-align: center;
    padding-bottom: 0.5em;

    &::before {
        position: absolute;
        content: "";
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: max(2.74em, 57px);
        height: max(0.06em, 1.3px);
        background-color: var(--red01);
    }
}

.jobMain__logo {
    width: min(100%, 550px);
    margin: clamp(15px, 4vw, 50px) auto clamp(20px, 6.66vw, 55px);

    @media screen and (max-width:768px) {
        width: clamp(140px, 38.133vw, 300px);
    }
}

@media screen and (max-width:480px) {
    .jobMain__topImg {
        width: 109.68%;
        margin-left: calc(-1*clamp(15px, 4vw, 65px));
    }
}

.jobMerit {
    margin-top: 50px;

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

.jobBox__ttl {
    font-size: var(--font56);
    line-height: 1.42;
    text-align: center;
    letter-spacing: var(--fontSpace140);
    margin-bottom: clamp(20px, 8vw, 55px);
}

.jobMeritList {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4.166vw, 50px);

    @media screen and (max-width:768px) {
        gap: max(7vw, 30px);
    }
}

.jobMerit__item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(20px, 4.166vw, 60px);

    .img {
        width: clamp(300px, 36.11vw, 520px);
    }

    @media screen and (max-width:768px) {
        position: relative;
        gap: 0;

        .img {
            position: absolute;
            top: 0;
            left: 0;
            width: clamp(100px, 38.4vw, 300px);
        }
    }

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

        .img {
            max-width: 160px;
        }
    }


}

.jobMerit__detail {
    flex: 1;

    dt {
        font-size: var(--font46);

        .ttl {
            font-size: 1em;
            letter-spacing: var(--fontSpace030);
            line-height: 1.478;
            text-align: left;

            &::first-letter {
                color: var(--red01);
            }
        }
    }

    dd {
        margin-top: 15px;

        p {
            font-size: var(--font17);
            letter-spacing: var(--fontSpace030);
            line-height: 1.64;
        }
    }

    @media screen and (max-width:768px) {
        display: flex;
        flex: initial;
        flex-direction: column;
        gap: 12vw;

        dt {
            padding-left: 12em;
            padding-top: 3vw;

            .ttl {
                height: calc(1.478 * 2em);
            }
        }

        dd {
            margin: 0;
        }
    }

    @media screen and (max-width:480px) {
        gap: clamp(20px, 9.333vw, 40px);

        dt {
            padding-top: 0;
            padding-left: 9.68em;
        }
    }
}

.jobMerit__label {
    display: block;
    margin-bottom: 5px;

    .txt {
        display: block;
        color: var(--white);
        background-color: var(--red01);
        font-size: var(--font25);
        letter-spacing: var(--fontSpace110);
        width: fit-content;
        line-height: 1;
        padding: 0.3em 0.7em;
        border-radius: 3px;
    }

    .sp {
        display: none;
    }

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

        .pc {
            display: none;
        }

        .sp {
            display: block;
        }
    }

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

        .txt {
            border-radius: 3px;
        }
    }
}

/* jobMerit__labelや.jobMerit__detail ttlが折り返した時用 */
.jobMerit__detail02 {
    @media screen and (max-width:768px) {
        gap: calc(12vw - 24.88px);
    }

    @media screen and (max-width:480px) {
        gap: calc(clamp(20px, 9.333vw, 40px) - 18.38px);
    }

    @media screen and (max-width:375px) {
        gap: calc(clamp(20px, 9.333vw, 40px) - 16px);
    }
}


.jobStaff {
    /* width: min(100%, 707px); */
    margin: clamp(25px, 9.33vw, 70px) auto 0;
}

.staffFlex {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 4.166vw, 70px);


    @media screen and (max-width:768px) {
        gap: 6.8vw;
        flex-wrap: wrap;
    }


    @media screen and (max-width:350px) {
        flex-direction: column;
        width: min(100%, 250px);
        margin: 0 auto;
    }
}


.staffFlex__item {
    flex: 1;
    max-width: 316px;

    .img {
        width: 90.48%;
        width: min(19.791vw, 285px);
        margin: 0 auto;
    }

    @media screen and (max-width:768px) {
        width: calc((100% - 6.8vw)/2);
        max-width: 270px;
        flex: none;

        .img {
            width: 89.93%;
        }
    }

    @media screen and (max-width:350px) {
        width: 100%;
        max-width: initial;

        .img {
            width: 50%;
        }
    }
}

.staffFlex__main {

    @media screen and (max-width:350px) {
        width: 80%;
        margin: 0 auto;
    }
}

.staff__txtBox {
    font-size: var(--font20);

    p {
        color: var(--white);
        background-color: var(--red01);
        line-height: 1;
        width: fit-content;
        padding: 0.3em 0.7em;
        letter-spacing: var(--fontSpace030);
        text-align: left;
        font-size: 1em;

        &:not(:first-child) {
            transform: translateY(-1px);
        }
    }

    @media screen and (max-width:768px) {
        font-size: clamp(9px, 2.4vw, 20px);

        p {
            padding: 0.5em 0.7em;

            &:not(:first-child) {
                transform: translateY(-2%);
            }
        }
    }

    @media screen and (max-width:350px) {
        font-size: 11px;
    }

}

.staffFlex__type {
    text-align: left;
    font-size: var(--font19);
    margin: 0.5em 0 1em;
    font-weight: var(--weight500);
    line-height: 1.63;

    @media screen and (max-width:768px) {
        font-size: clamp(9px, 2.4vw, 15px);
    }
}

.btn-outer-staff {
    width: 100%;
    height: 50px;

    .btn {
        background-color: transparent;
        border-bottom: 2px solid var(--black);
        align-items: flex-end;
        border-radius: 0;
        color: var(--black);
        padding: 0 2em;
        font-size: var(--font18);

        &::before {
            background-color: var(--black);
            width: 1.38em;
            right: 0;
            transform: translateY(-40%);
        }
    }


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

        .btn {
            font-size: clamp(8px, 2.4vw, 12px);
            border-bottom: 1px solid var(--black);
        }
    }
}


.jobMap {
    margin: clamp(30px, 9.333vw, 75px) auto 0;
    background-color: var(--beige04);
    padding: 30px 40px 40px;

    @media screen and (max-width:768px) {
        padding: 4vw 2.66vw;
    }
}

.jobMap__inner {
    @media screen and (max-width:768px) {
        width: min(100%, 500px);
        margin: 0 auto;
    }
}

.jobMap__txt {
    font-size: var(--font16);
    text-align: left;
    line-height: 1.5;
}

.jobMap__box {
    aspect-ratio: 1010/340;
    margin-top: 20px;

    iframe {
        position: relative;
        width: 100%;
        height: 100%;
    }

    @media screen and (max-width:768px) {
        margin-top: clamp(5px, 2vw, 20px);
        aspect-ratio: 285/200;
    }
}



.aco-container {
    transition: var(--transition01);
    overflow: hidden;
}

.aco-click {
    position: relative;
    cursor: pointer;
    transition: var(--transition01);
}

.aco-box {
    max-height: 0;
    transition: var(--transition01);
}

.aco-container.open {
    .aco-click {
        &::before {
            transform: translateY(-50%) rotate(-90deg);
        }
    }

    .dd-inner {
        opacity: 1;
    }
}


.jobQuestion {
    margin: clamp(25px, 8vw, 100px) auto clamp(25px, 8vw, 70px);
}

.jobQuestion__ttl {
    padding: 0 0 clamp(5px, 2.6vw, 20px) clamp(5px, 2.6vw, 45px);
    margin-bottom: clamp(15px, 5.3vw, 45px);
    line-height: 1;
    font-size: var(--font26);
    letter-spacing: var(--fontSpace140);
    border-bottom: 2px solid var(--black);

    @media screen and (max-width:768px) {
        border-bottom: 1px solid var(--black);
    }
}

.questionBox__item {
    padding-left: min(2.43vw, 35px);
    padding-bottom: clamp(8px, 2.6vw, 15px);
    margin-bottom: clamp(15px, 4vw, 30px);
    border-bottom: 2px solid var(--black02);

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

    @media screen and (max-width:768px) {
        border-bottom: 1px solid var(--black02);
    }
}

.questionBox__dt {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    background-color: transparent;
    font-size: var(--font21);
    border-radius: 0;
    gap: 5px;

    &::before {
        transform: translateY(-50%) rotate(90deg);
        background-color: var(--black);
        transition: var(--transition01);
        right: 2%;
        width: 1.33em;
    }

    p {
        flex: 1;
        color: var(--black);
        text-align: left;
        line-height: 1.3;
        font-size: 1em;
        letter-spacing: var(--fontSpace140);
        padding-right: 2.5em;
    }
}



.icon-q {
    position: relative;
    font-size: var(--font28);
    width: 1em;
    aspect-ratio: 25/31;

    &::before {
        position: absolute;
        content: "Q";
        font-size: 1em;
        top: 0;
        left: 0;
        color: var(--red01);
        font-family: var(--josefin);
    }
}

.dd-inner {
    opacity: 0;
    transition: var(--transition01);

    p {
        line-height: 1.64;
        padding-left: min(2.43vw, 35px);
        font-weight: var(--weight500);
        padding-top: 0.5em;

    }


    @media screen and (max-width:480px) {
        padding: 0.7em 0 0 0;
    }
}


.btn-outer-jobLast {
    width: 100%;
    height: 170px;

    .btn {
        border-radius: 0;
        font-size: clamp(15px, 4vw, 55px);
        letter-spacing: var(--fontSpace140);

        .small {
            font-size: 0.56em;
            font-size: 0.7em;
            display: inline-block;
        }

        &::before {
            max-width: 50px;
        }
    }

    @media screen and (max-width:1024px) {
        height: 120px;
    }

    @media screen and (max-width:768px) {
        height: 90px;
    }

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

        .btn {
            padding: 0 2em;
        }
    }
}


.btn-outer-back {
    width: 78px;
    height: auto;
    aspect-ratio: 1;
    margin-left: auto;
    transition: var(--transition01);


    .btn {
        background-color: var(--black);
        border-radius: 0 0 5px 5px;


        &::before {
            width: 35.9%;
            right: 50%;
            transform: translate(50%, -50%) rotate(-90deg);
        }
    }

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



@media screen and (max-width:360px) {
    .jobMerit__item {
        flex-direction: column;
        gap: 10px;

        .img {
            position: initial;
            margin: 0 auto;
            width: 70%;
            max-width: initial;
        }
    }

    .jobMerit__detail {
        gap: 10px;

        dt {
            font-size: 17px;
            height: auto;
            padding: 0;

            .ttl {
                height: auto;
            }
        }
    }

    .jobMerit__label {
        .txt {
            font-size: 13px;
        }
    }
}




/*******************************************
massage
*******************************************/
.message {
    background-color: var(--white);

    .section__inner {
        padding: clamp(90px, 12.152vw, 175px) 0 clamp(45px, 12.152vw, 125px);
    }
}

.message__ttl {
    position: relative;
    font-size: var(--font58);
    margin-bottom: min(20vw, 100px);

    &::before {
        position: absolute;
        content: "MESSAGE";
        letter-spacing: var(--fontSpace040);
        font-size: 3.68em;
        color: var(--beige03);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -88%);
    }

    .ttl {
        position: relative;
        display: block;
        letter-spacing: 0.2em;
        margin-bottom: 0.517em;
        text-align: center;

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

    .bg-red01 {
        padding: 0 0.08em 0 0.2586em;
    }

    .under-line01 {
        text-decoration-thickness: max(0.1em, 3px);
        text-underline-offset: 0.3em;
        text-decoration-color: var(--red01);
    }

    @media screen and (max-width:480px) {
        &::before {
            font-size: 3.86em;
        }
    }
}


.message__txtBox {
    p {
        position: relative;
        margin-bottom: min(8vw, 50px);
        line-height: 2.13;
        font-size: var(--font23);
        text-align: center;
        font-weight: var(--weight500);
        z-index: 2;

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

    @media screen and (max-width:480px) {
        p {
            line-height: 2;
            text-shadow:
                0 0 6px rgba(255, 255, 255, 1),
                0 0 12px rgba(255, 255, 255, 1),
                0 0 18px rgba(255, 255, 255, 1),
                0 0 30px rgba(255, 255, 255, 0.9);
        }
    }
}

.message__parts01,
.message__parts02,
.message__parts03,
.message__parts04 {
    position: absolute;
    width: clamp(100px, 20.76vw, 299px);

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

.message__parts01 {
    top: 43%;
    left: 2%;


    @media screen and (max-width:768px) {
        top: 25%;
        left: 1%;
    }
}

.message__parts02 {
    top: 39%;
    right: -2%;

    @media screen and (max-width:768px) {
        top: 28%;
        right: -3%;
    }
}

.message__parts03 {
    top: 78%;
    left: 0;

    @media screen and (max-width:768px) {
        top: 94%;
        /* right: -5%; */
        left: -3%;
        z-index: 1;
    }
}

.message__parts04 {
    top: 65%;
    right: 0;

    @media screen and (max-width:768px) {
        top: 59%;
        right: -5%;

    }
}






/*******************************************
section-loop
*******************************************/
/* :root {
    --loopWidth: clamp(2430px,437.5vw,6300px);
} */
:root {
    --loopWidth: min(379.44vw, 5464px);
}

@media screen and (max-width:480px) {
    :root {
        /* --loopWidth: min(648vw, 6300px); */
        --loopWidth: min(562vw, 5464px);
    }
}

.section-loop {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 630;
    max-height: 630px;
    border-radius: clamp(80px, 17.361vw, 250px) clamp(80px, 17.361vw, 250px)0 0;
    overflow: hidden;

    @media screen and (max-width:480px) {
        aspect-ratio: 375/243;
    }
}

.section-loop__img {
    position: absolute;
    inset: 0;
    width: calc(var(--loopWidth) * 2);
    animation: loop 40s linear infinite;
    animation: loop 80s linear infinite;

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        width: var(--loopWidth);
        height: 100%;
        background: url("../img/message/loop01.jpg") left center / 100% 100% no-repeat;
    }

    &::before {
        left: 0;
    }

    &::after {
        left: var(--loopWidth);
    }
}


@keyframes loop {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1*var(--loopWidth)));
    }
}




/*******************************************
modal
*******************************************/

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

.modalOpen,
.modalClose {
    transition: var(--transition01);
    cursor: pointer;

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

/* 背景 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 1000;
    transition: var(--transition01);
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    &::before {
        position: fixed;
        content: "";
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        background-color: var(--white);
        z-index: 0;
    }
}

/* 開く時 */
.modal.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;

    .modal__inner,
    .modalItem-outer {
        opacity: 1;
        pointer-events: all;
        visibility: visible;
    }
}

/* モーダル箱の最大幅 */
.modal__inner {
    position: relative;
    width: min(100%, 1440px);
    margin: 0 auto;
}


/* 非表示の時触れないように */
.modal__inner,
.modalItem-outer {
    position: relative;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: var(--transition01);
}

.modalItem-outer {
    background-color: var(--white);
    padding: 80px 0;

    @media screen and (max-width:768px) {
        padding: 50px 0;
    }
}

.modalItem {
    width: 100%;
}

/* モーダルのコンテンツの最大幅 */
.modalItem__inner {
    width: min(100%, 1210px);
    margin: 0 auto;

    @media screen and (max-width:1290px) {
        padding-left: var(--responsivePadding) !important;
        padding-right: var(--responsivePadding) !important;
    }
}


.modalClose-top {
    position: absolute;
    width: 95px;
    aspect-ratio: 95/40;
    top: 20px;
    right: 3%;
    border-radius: 5px;
    background-color: var(--black);
    z-index: 1;


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

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


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

.modalClose-bottom {
    margin: clamp(20px, 6%, 80px) auto 0;
    width: min(100%, 136px);
    height: 50px;


    .btn {
        background-color: transparent;
        color: var(--black);
        font-size: 18px;
        font-weight: 600;
        border-radius: 0;
        border-bottom: 2px solid var(--black);

        &::before {
            background-color: var(--black);
            width: 1.2em;
        }
    }

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

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

.btn-outer-modal {
    width: min(80%, 890px);
    margin: clamp(50px, 8%, 120px) auto 0;
    height: 90px;
    display: none;

    .btn {
        font-size: var(--font35);
        border-radius: 0;
        padding: 0 1.5em;

        &::before {
            width: 0.88em;
        }
    }

    @media screen and (max-width:768px) {
        height: 75px;
    }

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

.modal-staff-a- {
    .btn-outer-a {
        display: block;
    }
}

.modal-staff-b- {
    .btn-outer-b {
        display: block;
    }
}



.modalMv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 45px;

    .img {
        width: clamp(250px, 39.44vw, 568px);
    }

    @media screen and (max-width:1024px) {
        flex-direction: column;
        gap: 0;
    }

    @media screen and (max-width:480px) {
        .img {
            width: max(50%, 200px);
        }
    }
}

.modalMv__txtBox {
    flex: 1;
}

.modalMv__ttl {
    font-size: var(--font47);

    p {
        padding: 0.3em 0.5em;
    }
}

.modalMv____type {
    font-size: var(--font23);
    line-height: 1.69;
    text-align: left;
    font-weight: var(--weight500);
    margin-top: 10px;
}

.questionBox-modal {
    width: min(100%, 893px);
    margin: max(6%, 40px) auto 0;

}

.questionBox__item-modal {
    border: none;
    padding: 0;

    dt {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: var(--font28);

        .txt {
            font-size: 1em;
            text-align: left;
            padding-top: 0.5em;
        }

        .icon-q {
            font-size: 2.25em;
            line-height: 1;
            aspect-ratio: 50/47;
        }
    }

    dd {
        p {
            font-weight: var(--font19);
            line-height: 1.68;
            padding: 0.8em 0 0 3.8em;
        }
    }


    @media screen and (max-width:480px) {
        margin-bottom: 30px;

        dt {

            .txt {
                padding-top: 0.1em;
                padding-left: 0.3em;
            }

            .icon-q {
                font-size: 1.5em;
            }
        }

        dd {
            p {
                padding-left: 0;
                padding-top: 5px;
            }
        }
    }
}


















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

.footer {
    background-color: var(--red01);
    padding: 80px 0;
    position: relative;
    font-size: clamp(12px, var(--font16), 15px);
    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: clamp(12px, var(--font16), 15px);
}

@media screen and (max-width:1024px) {
    .footer {
        padding: 40px 0 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;
        }
    }
}




.btn-outer-mv {
    display: none;
}

.headerNav__item--btn {
    .btn-outer:last-child {
        display: none;
    }
}