@charset "utf-8";

/* ---------------------sub_mv-------------------- */
.sub_mv{
    background: url(/assets/img/recruit/sub_mv.jpg) no-repeat center center/cover;
}

/* ---------------------message-------------------- */
.message{
    width: 100%;
    padding: 293px 0 110px;
    overflow: hidden;
    position: relative;
}

.message .right{
    width: 491px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    position: absolute;
    top: 293px;
    left: clamp(1017px,calc((100 / 1440) * 1017 * 1vw),calc((100 / 1440) * 1017 * 1vw));
}

.message .left{
    width: 306px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    position: absolute;
    top: 398px;
    right: clamp(1177px,calc((100 / 1440) * 1177 * 1vw),calc((100 / 1440) * 1177 * 1vw));
}

.message .center{
    width: 212px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    position: absolute;
    bottom: 80px;
    right: clamp(1118px,calc((100 / 1440) * 1118 * 1vw),calc((100 / 1440) * 1118 * 1vw));
}



.message .wrap{
    width: 688px;
    padding-right: 108px;
    position: relative;
}

.message .wrap::before{
    content: '';
    display: block;
    width: 183px;
    aspect-ratio: 183/126;
    background: url(/assets/img/recruit/message_wrap_l.png) no-repeat center center/cover;
    position: absolute;
    top: -10px;
    left: -212px;
}

.message .wrap::after{
    content: '';
    display: block;
    width: 465px;
    aspect-ratio: 465/158;
    background: url(/assets/img/recruit/message_wrap_r.png) no-repeat center center/cover;
    position: absolute;
    bottom: -79px;
    right: -280px;
}


.message .h2_a .en{
    display: block;
    width: 566px;
    margin: 0 auto 66px;
    line-height: 1.2;
}

.message .noto{
    width: 580px;
    margin: 0 auto;
}

/* ---------------------requirement-------------------- */
.requirement{
    padding: 104px 0 128px;
}

.requirement .wrap{
    max-width: 1070px;
    margin-bottom: 56px;
    padding: 80px;
    background-color: #FEFCE1;
}

.requirement h2{
    padding-bottom: 80px;
    border-bottom: 1px solid #B0D378;
}

.requirement dl>div{
    display: flex;
    padding: 32px 48px;
    column-gap: 48px;
    color: var(--black);
    border-bottom: 1px solid #B0D378;
    align-items: center;
}

.requirement dt{
    width: 192px;
    font-weight: 500;
}

.requirement dd{
    width: 622px;
}

.requirement .btn{
    margin: 0 auto;
}



@media screen and (max-width:750px) {
    /* ---------------------sub_mv-------------------- */
    .sub_mv{
        background: url(/assets/img/recruit/sub_mv_sp.jpg) no-repeat center center/cover;
    }

    /* ---------------------message-------------------- */
    .message{
        padding: calc((100 / 390) * 210 * 1vw) 0 calc((100 / 390) * 226 * 1vw);
        position: relative;
    }

    .message .right{
        width: calc((100 / 390) * 173 * 1vw);
        box-shadow: 0 calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 30 * 1vw) rgba(0,0,0,.1);
        top: calc((100 / 390) * 131 * 1vw);
        left: calc((100 / 390) * 234 * 1vw);
    }
    
    .message .left{
        width: calc((100 / 390) * 168 * 1vw);
        box-shadow: 0 calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 30 * 1vw) rgba(0,0,0,.1);
        top: auto;
        bottom: calc((100 / 390) * 18 * 1vw);
        right: calc((100 / 390) * 248 * 1vw);
    }
    
    .message .center{
        width: calc((100 / 390) * 104 * 1vw);
        box-shadow: 0 calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 30 * 1vw) rgba(0,0,0,.1);
        bottom: calc((100 / 390) * 102 * 1vw);
        right: calc((100 / 390) * 122 * 1vw);
    }
    

    .message::before{
        width: calc((100 / 390) * 294 * 1vw);
        aspect-ratio: 294/188;
        background: url(/assets/img/recruit/message_l_sp.png) no-repeat center center/cover;
        filter: drop-shadow(0 8px 30px rgba(0,0,0,.1));
        top: auto;
        bottom: calc((100 / 390) * 18 * 1vw);
        right: calc((100 / 390) * 122 * 1vw);
    }

    .message .wrap{
        width: 100%;
        padding-right: 0;
        position: relative;
    }

    .message .wrap::before{
        width: calc((100 / 390) * 99 * 1vw);
        top: calc((100 / 390) * -79 * 1vw);
        left: calc((100 / 390) * -34 * 1vw);
    }

    .message .wrap::after{
        width: calc((100 / 390) * 197 * 1vw);
        bottom: calc((100 / 390) * -206 * 1vw);
        right: 0;
    }


    .message .h2_a .en{
        width: calc((100 / 390) * 207 * 1vw);
        margin: 0 0 calc((100 / 390) * 32 * 1vw);
        font-size: calc((100 / 390) * 24 * 1vw);
    }

    .message .noto{
        width: 100%;
    }

    /* ---------------------requirement-------------------- */
    .requirement{
        padding: calc((100 / 390) * 64 * 1vw) 0;
    }

    .requirement .wrap{
        max-width: calc((100 / 390) * 358 * 1vw);
        margin-bottom: calc((100 / 390) * 40 * 1vw);
        padding: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 16 * 1vw);
    }

    .requirement h2{
        padding-bottom: calc((100 / 390) * 40 * 1vw);
        border-bottom: calc((100 / 390) * 1 * 1vw) solid #B0D378;
    }

    .requirement dl>div{
        padding: calc((100 / 390) * 12 * 1vw) calc((100 / 390) * 6 * 1vw) calc((100 / 390) * 12 * 1vw) calc((100 / 390) * 16 * 1vw);
        column-gap: calc((100 / 390) * 16 * 1vw);
        border-bottom: calc((100 / 390) * 1 * 1vw) solid #B0D378;
    }

    .requirement dt{
        width: calc((100 / 390) * 80 * 1vw);
    }

    .requirement dd{
        width: calc((100 / 390) * 208 * 1vw);
    }

}