@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #0a0d0d;
    --blue01: #09559f;
    --blue02: #3d91c3;
    --blue03: #0275c6;
    --blue04: #096b9f;
    --blue05: #283f60;
    --purple01: #d4dfff;
    --purple02: #8091ae;
    --purple03: #9ba9bc;
    --orange: #ffa100;
    --yellow01: #858000;

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

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

    /* 文字サイズ */
    --font17: 1.7rem;
    --font19: 1.9rem;
    --font21: 2.1rem;
    --font23: 2.3rem;
    --font28: 2.8rem;
    --font34: 3.4rem;
    --font37: 3.7rem;
    --font42: 4.2rem;
    --font52: 5.2rem;

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

    /* 行間 */
    --lineHight147: 1.47;
    --lineHight156: 1.56;
    --lineHight170: 1.705;
    --lineHight175: 1.75;
    --lineHight20: 2.0;

    /* 文字間 */
    --fontSpace030: 0.03em;
    --fontSpace130: 0.13em;

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

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

    --opacity07: .7;

}




@media screen and (max-width: 1024px) {
    :root {
        --font17: 1.6rem;
        --font19: 1.8rem;
        --font21: 2rem;
        --font23: 2.1rem;
        --font28: 2.5rem;
        --font34: 3rem;
        --font37: 3.3rem;
        --font42: 3.8rem;
        --font52: 4rem;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --font17: 1.5rem;
        --font19: 1.7rem;
        --font21: 1.9rem;
        --font23: 2rem;
        --font28: 2.3rem;
        --font34: 2.5rem;
        --font37: 2.6rem;
        --font42: 3.3rem;
        --font52: 3.5rem;

        --opacity07: 1;
    }
}



@media screen and (max-width: 480px) {
    :root {
        --font17: 1.4rem;
        --font19: 1.6rem;
        --font21: 1.8rem;
        --font23: 1.9rem;
        --font28: 2.1rem;
        --font34: 2.2rem;
        --font37: 2.3rem;
        --font42: 2.7rem;
        --font52: 3rem;

        --borderRadius30: 15px;
    }
}

@media screen and (max-width: 375px) {
    :root {
        --font17: 1.3rem;
        --font19: 1.5rem;
        --font42: 2.4rem;
        --font52: 2.7rem;
    }
}

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

body {
    color: var(--blue05);
    font-family: var(--notoSans);
    font-weight: var(--weight500);
    font-size: var(--font17);
    letter-spacing: var(--fontSpace030);
}

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

.section {
    position: relative;
}

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

.section__ttl {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: var(--font42);
    gap: 0.4em;

    .en {
        position: relative;
        display: block;
        color: var(--blue04);
        font-size: max(0.36em, 10px);
        padding-left: 1.3em;
        line-height: 1;
        font-weight: var(--weight700);

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/common/ttl-icon.svg);
            background-repeat: no-repeat;
            background-size: contain;
            top: 50%;
            left: 0;
            width: max(1em, 10px);
            aspect-ratio: 1;
            transform: translateY(-45%);
        }
    }

    .ja {
        display: block;
        color: var(--blue05);
        font-weight: var(--weight500);
    }
}

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

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

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

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

    .none1024 {
        display: none;
    }


}

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

    .none768 {
        display: none;
    }
}

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

    .none480 {
        display: none;
    }

    .section__ttl {
        gap: 0.3em;
    }
}


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

    .none375 {
        display: none;
    }
}



/*******************************************
btn
*******************************************/
.btn-outer {
    width: min(100%, 251px);
    height: 70px;
}

.btn {
    position: relative;
    background-color: var(--blue02);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--white);
    font-size: var(--font19);
    width: 100%;
    height: 100%;
    border-radius: var(--borderRadius10);
    transition: var(--transitionBase);
    cursor: pointer;

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

.arrowBox {
    display: block;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 20px;
    height: auto;
    aspect-ratio: 1;
    background-color: var(--blue03);
    border-radius: 3px;

    span {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;

        &::before {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url(../img/common/arrow.svg);
            background-repeat: no-repeat;
            background-size: contain;
            width: 38%;
            aspect-ratio: 7.3/6.5;
        }
    }
}

.btn-blue02 {
    background-color: var(--blue03);

    .arrowBox {
        background-color: var(--blue02);
    }
}

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

    span {
        &::before {
            background-image: url(../img/common/arrow-blue.svg);
        }
    }
}



/*******************************************
entryBox
*******************************************/
.entryBtnBox {
    width: fit-content;
    display: flex;
    justify-content: flex-end;
    gap: 35px;

    .btn-outer {
        height: 60px;
    }

    .btn {
        font-size: 16px;

        .en {
            font-size: 0.8em;
            color: var(--orange);
        }
    }
}

.entryBtn01 {
    width: min(100%, 200px);
}

.entryBtn02 {
    width: min(100%, 230px);
}

.entryBtnBox-header {
    justify-content: flex-start;
}

@media screen and (max-width:1024px) {
    .entryBtnBox-fixed {
        position: fixed;
        left: 50%;
        bottom: 2%;
        transform: translateX(-50%);
        width: min(94.19%, 810px);
        justify-content: center;
        gap: 30px;

        .btn {
            font-size: min(3.25vw, 28px);
            gap: 5px;

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

        .btn-outer {
            height: clamp(50px, 11.7vw, 100px);
        }

        .arrowBox {
            width: 35px;
        }
    }

    .entryBtn01 {
        width: min(100%, 380px);
    }

    .entryBtn02 {
        width: min(100%, 399px);
    }

    .entryBtnBox-header {
        flex-direction: column;
    }
}

@media screen and (max-width:768px) {
    .entryBtnBox-fixed {
        gap: 15px;
    }
}


@media screen and (max-width:580px) {
    .entryBtnBox-fixed {
        .arrowBox {
            width: 20px;
        }
    }
}

@media screen and (max-width:480px) {
    .entryBtnBox-fixed {
        gap: 10px;
    }

    .entryBtnBox-header {
        gap: 20px;
        align-items: center;
    }
}

@media screen and (max-width:375px) {
    .entryBtnBox-fixed {

        .btn {
            gap: 2px;
        }

        .arrowBox {
            width: 15px;
        }
    }
}


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

.topReturn {
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: 136.5px;
    opacity: 0;
    visibility: hidden;
    z-index: 50;
    transition: var(--transitionBase);
    cursor: pointer;

    &.show {
        opacity: 1;
        visibility: visible;
    }

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

@media screen and (max-width:1024px) {
    .topReturn {
        bottom: clamp(55px, 14vw, 114px);
        width: clamp(100px, 14%, 120px);
    }
}


/*******************************************
header
*******************************************/
.header {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 95;
    padding: 10px min(5%, 80px) 10px min(5.55%, 85px);
    transition: var(--transitionBase);
}

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

.header__logo {
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    a {
        display: inline-block;
        transition: var(--transitionBase);

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

    .logo01 {
        position: relative;
        width: 200px;
        margin-right: 45px;

        &::before {
            position: absolute;
            content: "";
            width: 2px;
            height: 100%;
            top: 0;
            right: -22.5px;
            background-color: var(--blue04);
        }
    }

    .logo02 {
        width: 65px;
    }
}

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

    .entryBtnBox {
        flex: 1;
    }
}

.hamburger {
    display: block;
    position: relative;
    width: 60px;
    aspect-ratio: 1;
    cursor: pointer;
    border-radius: var(--borderRadius10);
    z-index: 100;
    transition: var(--transitionBase);
    background-color: var(--blue01);

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

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

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

    }
}


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

.active {

    & .line {
        background-color: var(--white);

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

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

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


.headerNav__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: min(50%, 600px);
    height: 100%;
    padding: clamp(30px, 10svh, 100px) min(3%, 40px) 2vh;
    margin-left: auto;
    background-color: var(--white);
}

.headerNav__item {
    margin: 0 0 5svh;
    font-size: 1.8rem;

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

    &:last-child {
        width: 100%;
        margin: 8svh 0 0;
    }

    &:not(:last-child) {
        a {
            transition: var(--transitionBase);

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



@media screen and (max-width:1024px) {
    .header {
        position: relative;
        padding: 10px 0 10px clamp(5px, 3%, 25px);
        height: auto;
    }

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

    .header__logo {
        .logo01 {
            width: 220px;
        }

        .logo02 {
            width: 71px;
        }
    }

    .hamburger {
        position: fixed;
        top: 13px;
        right: 13px;
        width: 71px;
    }

    .header__right {
        .entryBtnBox {
            flex: initial;
        }
    }


}

@media screen and (max-width:860px) {
    .header {
        padding-bottom: max(2%, 10px);
    }
}

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


    .header__logo {
        .logo01 {
            width: 150px;
        }

        .logo02 {
            width: 48px;
        }
    }

    .hamburger {
        width: 48px;
    }

    .headerNav__item {
        &:not(:last-child) {
            a {

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

}



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

    .header__logo {
        .logo01 {
            width: 100px;
            margin-right: 30px;

            &::before {
                right: -16px;
            }
        }

        .logo02 {
            width: 32px;
        }
    }

    .hamburger {
        width: 40px;
        top: 7px;
    }

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





/*******************************************
mv
*******************************************/
.mv {
    position: relative;
    margin-top: 87px;
    /* ヘッダーの高さ分 */
}

.mv__img {
    position: relative;
    width: 225%;
    animation: slideLeft 90s linear infinite;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/mv/mv-pc.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        aspect-ratio: 3241/600;
        top: 0;
        left: 100.5%;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100.5%);
    }
}

.mv__ttlBox {
    position: absolute;
    top: 37%;
    left: 5%;
    width: 63.06%;

    .ttl01 {
        display: block;
        margin-bottom: 1.6vw;
    }

    .ttl02 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 31.22em;
        font-size: 1.6vw;
        letter-spacing: var(--fontSpace130);
        background-color: var(--blue03);
        color: var(--white);
        aspect-ratio: 718/40;
        border-radius: 0.2em;
    }

    .ttl02-sp {
        display: none;
    }

}

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

}

@media screen and (max-width:860px) {
    .mv__img {
        width: 241.98%;
        animation: slideLeft 70s linear infinite;

        &::before {
            background-image: url(../img/mv/mv-sp.png);
            aspect-ratio: 2081/1050;
        }
    }

    .mv__ttlBox {
        top: 46%;
        left: 6%;
        width: 93.4%;

        .ttl01 {
            margin-bottom: 4.07vw;
        }

        .ttl02-pc {
            display: none;
        }

        .ttl02-sp {
            display: flex;
            margin-bottom: 2.33vw;
            width: 21.48em;
            aspect-ratio: 580/47;
            font-size: 3.14vw;


            &:last-child {
                margin-bottom: 0;
                width: 8.52em;
                aspect-ratio: 230/47;

            }
        }

    }
}


/*******************************************
about
*******************************************/
.about {
    .section__inner {
        padding: clamp(50px, 6%, 85px) 0 clamp(120px, 11%, 150px);
    }

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

.aboutBox {
    position: relative;
    background-color: var(--purple01);
    border-radius: var(--borderRadius30);
    width: min(100%, 900px);
    margin: 0 auto;
    padding: max(5.42%, 40px) min(7%, 25px) max(8.34%, 65px);

    .bg-parts {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 614px;
    }
}

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

    p {
        text-align: center;
        margin-bottom: 30px;

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

.about__img01 {
    position: absolute;
    left: -6.5%;
    top: 22%;
    width: 26.92%;
    z-index: 1;
}

.about__img02 {
    position: absolute;
    right: 0%;
    top: 23%;
    width: 17%;
    z-index: 1;
}

.about__img03 {
    position: absolute;
    right: -6%;
    bottom: -12%;
    width: 35.89%;
}

@media screen and (max-width:1024px) {
    .about__img01 {
        left: 1%;
        top: auto;
        bottom: 10%;
        width: 20%;
    }

    .about__img02 {
        right: 2%;
        top: 14%;
    }

    .about__img03 {
        right: -2%;
        bottom: -7%;
        width: 30%;
    }
}

@media screen and (max-width:768px) {
    .aboutBox {
        border-radius: 15px;

        .bg-parts {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: clamp(400px, 100%, 500px);
        }
    }


    .about__img01 {
        left: 4%;
        top: auto;
        bottom: -1%;
        width: min(47.74%, 250px);
    }

    .about__img02 {
        display: none;
    }

    .about__img03 {
        right: -1%;
        bottom: -18%;
        width: min(58.8%, 275px);
    }
}

@media screen and (max-width:480px) {
    .about__img03 {
        right: -4%;
        bottom: -17%;
    }

    .about__img01 {
        bottom: 2%;
    }
}

@media screen and (max-width:375px) {
    .aboutBox {
        padding-bottom: 19.41%;
    }

    .about__img01 {
        bottom: 5%;
    }

    .about__img03 {
        bottom: -15%;
    }
}

/*******************************************
work
*******************************************/

.work {
    border-radius: 0 0 var(--borderRadius20) var(--borderRadius20);

    .section__inner {
        padding-bottom: clamp(60px, 11.81%, 170px);
    }
}

.work__list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 30px 25px;
    margin-top: max(4.59%, 30px);
}

.work__item {
    position: relative;
    width: calc((100% - 50px)/3);
    border-radius: var(--borderRadius30);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transitionBase);

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

.btn-outer-work {
    position: absolute;
    left: 0;
    bottom: 7%;
    width: 100%;
    height: 25px;

    .btn {
        background-color: transparent;
        font-size: var(--font21);
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 1em;

        &:hover {
            opacity: 1;
        }
    }

    .arrowBox-white {
        width: 1.2em;
        border-radius: 6px;
    }
}

@media screen and (max-width:768px) {
    .work__list {
        gap: 25px;
        width: min(100%, 600px);
        margin-left: auto;
        margin-right: auto;
    }

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

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

    .work__list {
        gap: 15px 10px;
    }

    .work__item {
        width: calc((100% - 10px)/2);
    }

    .btn-outer-work {
        bottom: 4%;
        height: 18px;

        .btn {
            font-size: 15px;
            padding-left: 0.5em;
        }

        .arrowBox-white {
            border-radius: 3px;
        }
    }
}

@media screen and (max-width:374px) {
    .work__item {
        border-radius: 10px;
    }

    .btn-outer-work {
        height: 18px;

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

/*******************************************
modal（work）
*******************************************/
/* 共通
ーーーーーーーーーーーーーーーーーーー */
.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(--purple01);
    z-index: -100;
    overflow: auto;
    transition: var(--transitionBase);
}

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

.modalBox {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: auto;
}

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

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



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

}

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

/* ↑↑↑↑共通↑↑↑↑
ーーーーーーーーーーーーーーーーーーー */

.modalMv {
    position: relative;
    width: 100%;
    background-color: var(--white);
    padding: 0 30px 0 0;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/modal/mv-txt.svg);
        background-size: contain;
        background-repeat: no-repeat;
        top: 1%;
        right: 2%;
        width: 27.09%;
        aspect-ratio: 390/217;
    }
}

.modalMv__inner {
    width: min(100%, 1320px);
    display: flex;

    .img {
        width: min(100%, 720px);
    }
}

.modalMv__txtBox {
    position: relative;
    flex: 1;
    padding: 10.98% 0 0 4.55%;

    .ttl {
        font-size: var(--font52);
        margin-bottom: clamp(30px, 10.19%, 50px);
    }
}

.modalMain {
    .section__inner {
        padding: clamp(40px, 5.903%, 85px) 0 clamp(50px, 13%, 185px);
    }
}

.modalMainItem {
    background-color: var(--white);
    border-radius: var(--borderRadius30);
    border: 1px solid var(--purple02);
    padding: max(5%, 35px) max(4.5%, 10px) max(8.4%, 40px);
    margin-bottom: max(7%, 40px);

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

.modalMainItem__ttl {
    font-size: var(--font34);
    border-bottom: 2px solid var(--blue05);
    padding-bottom: 0.6em;

    span {
        position: relative;
        display: block;
        width: fit-content;
        margin: 0 auto;
        font-weight: var(--weight700);

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/modal/icon-hand.svg);
            background-size: contain;
            background-repeat: no-repeat;
            top: 50%;
            left: 0;
            transform: translate(-125%, -50%);
            width: 1.2em;
            aspect-ratio: 36/32.5;
        }
    }
}

.jobDescription {
    display: flex;
    justify-content: space-between;
    margin-top: max(4.6%, 30px);
}

.jobDescription__item {
    width: calc((100% - 50px)/3);
}

.modal-work03 {
    .jobDescription__item {
        width: calc((100% - 30px)/2);
    }
}

.jobDescription__imgBox {
    position: relative;
    margin-bottom: max(5.8%, 10px);

    .img {
        border-radius: var(--borderRadius20);
        overflow: hidden;
    }
}

.jobDescription__ttl {
    position: absolute;
    font-size: var(--font28);
    top: 3%;
    font-weight: var(--weight700);
    width: 100%;

    span {
        display: block;
        position: relative;
        padding-left: 1.5em;
        width: fit-content;
        margin: 0 auto;

        &::before {
            position: absolute;
            content: "1";
            font-size: 0.82em;
            color: var(--white);
            background-color: var(--blue01);
            width: 1.483em;
            aspect-ratio: 1;
            border-radius: var(--borderRadiusCircle);
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            display: block;
            text-align: center;
            line-height: 1;
            padding-top: 0.2em;
        }
    }
}

.jobDescription__item:nth-child(2) {
    .jobDescription__ttl {
        span {
            &::before {
                content: "2";
            }
        }
    }
}

.jobDescription__item:nth-child(3) {
    .jobDescription__ttl {
        span {
            &::before {
                content: "3";
            }
        }
    }
}

.modalInterview {
    .modalMainItem__ttl {
        & span {
            &::before {
                background-image: url(../img/modal/icon-hand02.svg);
                transform: translate(-110%, -50%);
            }
        }
    }
}

.modalInterview__mv {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10%;
    margin: max(10%, 30px) 0 max(6.88%, 25px);
}

.modalInterview__ttl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-15%, -50%);
    width: min(100%, 620px);
}

.modalInterview__txtBox {
    font-weight: var(--weight700);
}

.interview__type {
    flex: 1;
}


.interview__occupation {
    font-size: var(--font19);
    position: relative;

    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 1.5px;
        left: 0;
        bottom: -3px;
        background-color: var(--blue05);
        border-radius: var(--borderRadius10);
    }
}

.interview__detail {
    font-size: var(--font37);
    display: flex;
    flex-direction: column;
    margin: max(9%, 10px) 0 max(17%, 15px);

    .ttl {
        display: block;
        color: var(--blue04);
    }

    .sub {
        display: block;
        font-size: var(--font17);
        margin-top: 0.8em;
    }
}

.interview__name {
    font-size: var(--font52);
    color: var(--blue04);

    .small {
        color: var(--blue05);
        font-size: max(0.327em, 10px);
        margin-left: 0.5em;
    }
}

.modal-q {
    padding-left: max(5.5%, 15px);

    dt {
        position: relative;
        font-size: var(--font23);
        line-height: var(--lineHight156);
        color: var(--blue04);

        .number {
            position: absolute;
            top: -0.43em;
            right: 100.5%;
            font-size: 1.65em;

            span {
                letter-spacing: 0.1em;
            }
        }

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/modal/icon-q.svg);
            background-repeat: no-repeat;
            background-size: contain;
            width: 1.848em;
            aspect-ratio: 42.5/51;
            right: 103%;
            transform: translateY(-20%);
        }
    }

    dd {
        margin: 10px 0 55px;

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

.modalBtn__flex {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
    margin-top: max(8.26%, 50px);

    .btn {
        border-radius: 5px;
        cursor: pointer;

        .arrowBox {
            width: 25px;
        }
    }
}

.btn-outer-modal01 {
    width: min(100%, 417px);
}

.btn-outer-modal02 {
    width: min(100%, 251px);
}


@media screen and (max-width:1200px) {
    .modalMv {
        width: min(100%, 940px);

        &::before {
            width: 22%;
        }
    }

    .modalMv__inner {
        .img {
            width: min(100%, 450px);

            img {
                object-fit: cover;
                height: 100%;
            }
        }
    }

    .modalMv__txtBox {
        padding-top: max(3%, 20px);

    }


    .modalInterview__ttl {
        width: min(100%, 500px);
        margin-left: 5%;
    }


}

@media screen and (max-width:1024px) {
    .modalMv__inner {
        .img {
            width: min(100%, 400px);
        }
    }

    .modalMv__txtBox {
        padding-bottom: 15px;
    }

    .modalInterview__ttl {
        width: min(100%, 450px);
        margin-left: 5%;
    }
}

@media screen and (max-width:900px) {
    .modalInterview__mv {
        flex-direction: column-reverse;
        align-items: flex-start;
        margin: max(5%, 30px) 0 max(10%, 40px);
        padding: 0;
    }

    .modalInterview__ttl {
        position: initial;
        transform: none;
        width: min(100%, 600px);
        margin: 0 auto max(7%, 25px);
    }

    .modalInterview__txtBox {
        width: min(100%, 600px);
        margin: 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .interview__detail {
        margin: max(3%, 13px) 0 0;
    }
}

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

        &::before {
            display: none;
        }
    }

    .modalMv__inner {
        flex-direction: column;
    }


    .modalMv__inner {
        .img {
            width: min(100%, 600px);
            margin: 0 auto;
        }
    }

    .modalMv__txtBox {
        padding: max(5%, 15px) 10px;

        .ttl {
            margin-bottom: max(10px, 3%);
        }
    }

    .jobDescription {
        gap: 30px 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .jobDescription__item {
        width: calc((100% - 20px)/2);
    }

    .modal-q {
        dt {
            .number {
                top: -0.25em;
                font-size: 1.3em;
            }

            &::before {
                width: 1.5em;
                transform: translateY(-5%);
            }
        }
    }
}

@media screen and (max-width:650px) {
    .modalBtn__flex {
        flex-direction: column;
        width: min(100%, 330px);
        margin-left: auto;
        margin-right: auto;
        gap: 25px;

        .btn-outer {
            width: 100%;
        }
    }

    .modal-q {
        dd {
            margin: max(2%, 5px) 0 max(10%, 25px);
        }
    }
}

@media screen and (max-width:480px) {
    .modalMain {
        .section__inner {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
    }

    .jobDescription {
        width: min(100%, 300px);
        margin-left: auto;
        margin-right: auto;
    }

    .jobDescription__item {
        width: 100%;
    }

    .jobDescription__imgBox {
        margin-bottom: 10px;
    }

    .modal-q {
        dt {
            font-size: 1.7rem;

            .number {
                top: -0.15em;
                font-size: 1.15em;
            }

            &::before {
                width: 1.2em;
                transform: translateY(6%);
            }
        }

        dd {
            p {
                font-size: 1.3rem;
            }
        }
    }

    .modalBtn__flex {

        .btn-outer {
            height: 50px;
        }
    }

    .interview__occupation {
        font-size: 1.4rem;
    }

    .interview__detail {
        .sub {
            font-size: 1.2rem;
        }
    }
}

@media screen and (max-width:374px) {
    .interview__detail {
        font-size: 2rem;
    }

    .interview__name {
        font-size: 2.1rem;
    }

    .modalBtn__flex {

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

    .modal-q {
        dt {
            font-size: 1.5rem;
        }

    }
}




/*******************************************
no-pain
*******************************************/
.no-pain {
    position: relative;

    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: clamp(15px, 2.5vw, 100px);
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--white);
        border-radius: 0 0 5vw 5vw;
    }
}

.no-pain__ttl {
    position: absolute;
    left: 50%;
    bottom: 0;
    font-size: 11.112vw;
    color: var(--white);
    font-weight: 900;
    transform: translate(-50%, 12%);
    width: 100%;
    text-align: center;

    .sp {
        display: none;
    }
}

.no-pain__parts {
    position: absolute;
    top: 0;
    left: 3%;
    width: clamp(100px, 23%, 400px);
    transform: translateY(-43%) rotate(-2deg);
}

@media screen and (max-width:500px) {
    .no-pain__ttl {
        transform: translate(-50%, 3.5%);
        line-height: 1.01333;
        font-size: 20vw;
        width: 99%;


        .pc {
            display: none;
        }

        .sp {
            display: block;

            span {
                display: block;
                text-align: left;

                &:last-child {
                    text-align: right;
                }
            }

        }
    }

    .no-pain__parts {
        position: absolute;
        top: 0;
        left: -5%;
        width: min(54%, 201px);
        transform: translateY(-49%) rotate(-2deg);
    }

}

/*******************************************
style
*******************************************/
.style {
    padding: clamp(50px, 10.5%, 150px) 0 clamp(55px, 12.2%, 175px);
}

.style__txt {
    width: min(100%, 805px);
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(60%);

    span {
        display: block;
    }
}

.style__list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: max(5.42%, 30px);
}

.style__item {
    width: calc((100% - 25px)/2);
    background-color: var(--purple01);
    border-radius: var(--borderRadius20);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 35px 28px 30px;
}


.style__imgBox {
    width: 190px;
    aspect-ratio: 1;
    background-color: var(--white);
    border-radius: var(--borderRadius20);
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
        width: min(84%, 200px);
    }
}

.style__detail {
    flex: 1;
    margin-left: 35px;

    dt {
        font-size: var(--font21);
        margin-bottom: 15px;
    }
}

.style__parts {
    position: absolute;
    width: 28.667%;
    right: 0;
    bottom: 0;
    transform: translate(-10%, 45%);
}

@media screen and (max-width:1080px) {
    .style__txt {
        position: initial;
        transform: none;
        margin-top: 30px;
        width: 100%;
    }
}

@media screen and (max-width:1024px) {
    .style__list {
        width: min(100%, 600px);
        margin-left: auto;
        margin-right: auto;
    }

    .style__item {
        width: 100%;
    }

    .style__parts {
        width: 25%;
        transform: translate(-5%, 75%);
    }
}

@media screen and (max-width:600px) {
    .style__item {
        padding: 30px 20px;
    }

    .style__imgBox {
        width: 130px;
    }
}

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

    .style__detail {
        margin-left: 20px;

        dt {
            margin-bottom: 10px;
        }
    }

    .style__parts {
        width: min(35%, 120px);
        transform: translate(-5%, 85%);
    }
}

@media screen and (max-width:425px) {
    .style__list {
        width: min(100%, 350px);
    }

    .style__item {
        flex-direction: column;
        align-items: center;
        padding: 20px 10px;
    }

    .style__imgBox {
        margin-bottom: 15px;
    }

    .style__detail {
        margin-left: 0;

        dt {
            text-align: center;
        }
    }
}

/*******************************************
environment
*******************************************/
.environment {
    padding-bottom: clamp(80px, 15.3%, 220px);
}

.environmentSwiper {
    margin-top: max(5.42%, 30px);
    width: min(100%, 1200px);
}

.environmentSwiper__list {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;

    .swiper-slide {
        width: calc((100% - 60px)/3);
        background-color: var(--purple01);
        border-radius: var(--borderRadius20);
        height: auto;
        padding: 35px 15px 30px;
    }
}

.environmentSwiper__item {
    .ttl {
        text-align: center;
        font-size: var(--font23);
    }
}

.environment__imgFlex {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    img {
        display: block;
        width: calc((100% - 20px)/2);
    }
}

.environment__main {
    margin-top: 30px;

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

    .txt {
        width: min(100%, 340px);
        margin: 15px auto 0;
    }
}

.environmentSwiper__item02 {
    .environment__main {

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

}

.paginationFlex-environment {
    display: none;
}

@media screen and (max-width:1240px) {
    .environmentSwiper {
        padding: 0 20px;
    }
}

@media screen and (max-width:1024px) {
    .environmentSwiper {
        width: min(100%, 800px);
        margin-left: auto;
        margin-right: auto;
    }

    .environmentSwiper__list {
        gap: 25px;

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

}


@media screen and (max-width:768px) {
    .paginationFlex {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: max(5%, 20px);
        gap: 10px;
    }

    .pagiDot {
        width: fit-content !important;

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

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

        &::before,
        &::after {
            position: absolute;
            content: "";
            background-image: url(../img/common/arrow.svg);
            background-size: contain;
            background-repeat: no-repeat;
            width: 50%;
            aspect-ratio: 20/17;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    }

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

    .environmentSwiper {
        width: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }

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

        .swiper-slide {
            width: auto;
        }
    }

    .environment__main {
        margin-top: 20px;

        .img {
            width: min(100%, 300px);
        }

        .txt {
            width: 100%;
        }
    }

    .environmentSwiper__item02 {
        .environment__main {
            .img {
                width: min(100%, 100px);
            }
        }
    }

    .environment__imgFlex {
        gap: 10px;
    }

    .environment__imgFlex {
        gap: 10px;

        img {
            width: calc((100% - 10px) / 2);
        }
    }

}

@media screen and (max-width:480px) {
    .environment__main {
        margin-top: 15px;

    }
}


/*******************************************
search
*******************************************/
.search {
    background-color: var(--purple01);
    border-radius: 4vw 4vw 0 0;

    .section__inner {
        padding: 120px 0 190px;
    }
}

.search__container {
    margin-top: max(4%, 30px);
}

.searchBox {
    margin-bottom: max(5%, 30px);

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

.searchBox__ttl {
    font-size: var(--font21);
    border-bottom: 1px solid var(--white);
    padding-bottom: 0.6em;

    span {
        position: relative;
        display: block;
        width: fit-content;
        margin: 0 auto 0 0;
        font-weight: var(--weight700);
        padding-left: 1.5em;

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/modal/icon-hand02.svg);
            background-size: contain;
            background-repeat: no-repeat;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            width: 1.2em;
            aspect-ratio: 36/32.5;
        }
    }
}

.search__list {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.search__item {
    width: calc((100% - 25px)/2);
    overflow: hidden;
}

.btn-outer-search {
    width: 100%;
    height: 90px;

    .btn {
        font-size: var(--font21);
        font-weight: var(--weight700);
        color: var(--blue05);
        background-color: var(--white);
        border-radius: var(--borderRadius20);

        &:hover {
            opacity: 1;
        }
    }

    .arrowBox {
        background-color: var(--blue05);
        width: 40px;
        border-radius: var(--borderRadius10);
        transform: translateY(-50%) rotate(90deg);
        transition: all 0.5s ease;
    }
}

.open {
    &.search__item {

        .btn-outer {
            .arrowBox {
                transform: translateY(-50%) rotate(-90deg);
            }
        }
    }
}

.search__acoBox {
    background-color: var(--white02);
    transform: translateY(-10px);
    border-radius: 0 0 var(--borderRadius10) var(--borderRadius10);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.search__acoList {
    padding: 10px 30px 0;
}

.search__acoItem {
    position: relative;
    border-bottom: 1px solid var(--purple03);

    &:last-child {
        border-bottom: none;
    }

    a {
        display: block;
        text-align: center;
        padding: 30px 5px;
        transition: var(--transitionBase);
        font-size: var(--font21);
        font-weight: var(--weight700);

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

.search__item--company {
    a {
        position: relative;
        transition: var(--transitionBase);
        display: inline-block;
        width: 100%;
        height: auto;

        .img {
            border-radius: var(--borderRadius20);
            overflow: hidden;
        }

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

    .txt {
        padding-left: 1.6em;
        margin-top: 15px;
    }
}

.btn-outer-search02 {
    position: absolute;
    left: 0;
    bottom: 8%;
    width: 100%;
    height: 40px;

    .btn {
        font-size: var(--font28);
        background-color: transparent;
        color: var(--white);
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 1em;

        &:hover {
            opacity: 1;
        }
    }

    .arrowBox {
        width: 40px;
        border-radius: var(--borderRadius10);
        background-color: var(--yellow01);
    }

}

.search__parts01 {
    position: absolute;
    left: 0;
    top: 0;
    width: 30.25%;
    transform: translate(-5%, -100%);
}

.search__parts02 {
    position: absolute;
    right: 0;
    top: 0;
    width: 23.17%;
    transform: translate(12%, -74%);
}

.search__parts03 {
    position: absolute;
    left: 0;
    top: 0;
    width: 25.7%;
    transform: translate(-28%, -62%);
}

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

    .search__parts01 {
        transform: translate(0%, -100%);
        left: 1%;
    }

    .search__parts02 {
        width: max(23.17%, 112px);
        right: 1%;
        transform: translate(0%, -55%);
    }
}

@media screen and (max-width:768px) {
    .search {
        .section__inner {
            padding: max(14%, 50px) 0 max(17%, 60px);
        }
    }


    .search__item--company {
        .txt {
            margin-top: 5px;
        }
    }

    .search__parts01 {
        width: min(41%, 200px);
    }

}

@media screen and (max-width:650px) {
    .search__list {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        width: min(100%, 400px);
        margin-left: auto;
        margin-right: auto;
    }

    .search__item {
        width: 100%;
    }

    .btn-outer-search {
        height: 70px;
    }
}

@media screen and (max-width:480px) {
    .btn-outer-search {

        .btn {
            border-radius: 5px;
        }
    }

    .search__item--company {
        a {
            .img {
                border-radius: 5px;
            }
        }
    }
}

@media screen and (max-width:375px) {
    .search__item {
        .arrowBox {
            width: 25px !important;
            border-radius: 3px;
        }
    }

    .btn-outer-search {
        height: 60px;
    }

    .btn-outer-search02 {
        height: 25px;
    }

    .search__acoItem {
        a {
            padding: 20px 5px;
        }
    }
}


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

.footer {
    background-color: #fff;
    position: relative;

    .inner {
        padding: clamp(40px, 7%, 100px) 0;
    }
}

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

    & a {
        position: relative;
        font-size: 12px;
        color: #283f60;

        &:hover {
            opacity: .7;
        }
    }

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


.copyright {
    font-size: 12px !important;
    text-align: center;
    color: #283f60;
}

/* 求人ページ用 #0e204dを置き換え*/
/* .pageid - ヘッダー
..result_box_ttl - 求人詳細タイトル
.button_search - 検索する
.button_application - 応募する
.button_detail - 詳細を見る */


/* .footer-nav a,
.copyright {
    text-decoration: none;
}

.pageid,
.button_search,
.result_box_ttl {
    background: #0e204d;
}

.button_application {
    background-color: #0e204d;
    color: #fff;

    &:hover {
        opacity: .7;
    }
}

.button_detail {
    background-color: #fff;
    border: 2px solid #0e204d;
    color: #0e204d;

    &:hover {
        opacity: .7;
    }
} */


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



@media screen and (max-width:530px) {
    .footer-nav {
        flex-wrap: wrap;
        column-gap: 30px;
        row-gap: 10px;


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

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