@charset "utf-8";

/*sp*/
@media (max-width:767px) {
    .form_cont {
        border-radius: 0;
    }

    .under.page.contact .form_cont {
        width: 100%;
        margin-top: 64px;
        padding: 32px calc((24 / 375) * 100%);
        border-radius: 0;
    }

}

/*======================
flow
=======================*/
/*sp*/
@media (max-width:767px) {
    .form_cont .form_flow {
        gap: calc((8 / 12) * 1.0em);
        font-size: var(--sp_fs12);
        margin: 0 auto 56px;
    }

    .form_cont .form_flow .cont {
        width: calc((46 / 311) * 100%);
    }

    .form_cont .form_flow .cont span {
        font-size: 1.0em;
    }

    .form_cont .form_flow .cont p {
        top: calc(100% + calc((5 / 12) * 1.0em));
        font-size: 1.0em;
    }

    .form_cont .form_flow .line {
        width: calc((32 / 12) * 1.0em);
        height: auto;
        aspect-ratio: 32 / 4;
    }
}

/*======================
form_cont
=======================*/
/*tb*/
@media (max-width:1024px) {
    .form_cont #mail_form .row {
        gap: 10px;
        flex-wrap: wrap;
        font-size: 13px;
    }

    .form_cont #mail_form .row .form-hd {
        gap: 5px;
        width: fit-content;
        padding: 0;
    }

    .form_cont #mail_form .row:has(textarea, .cont_wrapper)>.form-hd {
        padding-top: 0;
    }


    .form_cont #mail_form .row .cont {
        width: 100%;
        flex: initial;
        margin-left: 0;
    }

    
    /*複数に分かれている入力欄*/
    .form_cont #mail_form .row .cont_wrapper .cont {
        flex-wrap: wrap;
        gap: 10px;
    }

    .form_cont #mail_form .row .cont_wrapper .form-hd {
        width: 100%;
    }

    .form_cont #mail_form .row .cont_wrapper .cont :is(select, input) {
        width: 100%;
    }

    /*個人情報保護方針*/
    .form_cont #mail_form .privacy .wrapper {
        font-size: 13px;
    }

    .form_cont #mail_form .privacy+.checkbox {
        font-size: 13px;
    }
}

/*sp*/
@media (max-width:767px) {
    .form_cont #mail_form .form_wrapper {
        margin-bottom: 32px;
    }

    .form_cont #mail_form .row {
        gap: 12px;
        font-size: var(--sp_fs15);
        padding-bottom: calc((32 / 15) * 1.0em);
    }

    .form_cont #mail_form .row::after {
        content: none;
    }

    .form_cont #mail_form .row .form-hd {
        width: 100%;
        padding-left: 0;
    }

    /*複数に分かれている入力欄*/

    .form_cont #mail_form .row .cont_wrapper {
        margin-left: 0;
    }

    .form_cont #mail_form .row .cont_wrapper .cont {
        gap: 12px;
    }

    .form_cont #mail_form .row .cont_wrapper .form-hd {
        width: 100%;
    }

    /*フォームの内容*/
    .form_cont #mail_form .row .cont :is(input:is([type="text"], [type="email"], [type="tel"]), textarea, select) {
        padding: calc((16 / 15) * 1.0em) calc((24 / 15) * 1.0em);
    }

    /*ラジオボタン*/
    .form_cont #mail_form .row .cont.radio {
        grid-template-columns: repeat(1, 1fr);
    }

    .form_cont #mail_form .row .cont.radio .inner {
        padding: calc((16 / 15) * 1.0em);
    }

    /*ファイル選択*/
    .form_cont #mail_form .row .cont input[name="resume"]+span.label-wrapper {
        flex-direction: column;
        gap: 5px;
    }

    .form_cont #mail_form .row .cont input[name="resume"]+span.label-wrapper label {
        width: 100%;
        text-align: center;
    }

    /*個人情報保護方針*/
    .form_cont #mail_form .privacy+.checkbox {
        font-size: var(--sp_fs15);
        margin: 17px auto 32px;
    }

    .form_cont #mail_form .privacy+.checkbox p {
        text-align: start!important;
    }

    /*ボタン*/
    .form_cont .btn-area {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 16px;
    }

    .form_cont .btn-area .form-btn {
        width: 100%;
        font-size: var(--sp_fs15);
    }

    /*確認画面*/
    .form_cont .confirmation-cont {
        margin-bottom: 32px;
    }

    .form_cont .confirmation-cont .row {
        display: block;
        font-size: var(--sp_fs15);
    }

    .form_cont .confirmation-cont .row::after {
        content: none;
    }

    .form_cont .confirmation-cont .row .form-hd {
        width: 100%;
        padding-left: 0;
    }

    .form_cont .confirmation-cont .row .cont {
        margin-top: 6px;
        margin-left: 0;
    }

    /*サンクス・エラーページ */
    main.recruit_entry.under .recruit_under__cont:has(:is(.thanks, .error)) {
        padding: 32px calc((17 / 375) * 100%);
    }

    .form_cont :is(.thanks, .error) {
        font-size: var(--sp_fs24);
        margin-bottom: 29px;
    }


    .form_cont :is(.thanks, .error) p+p {
        font-size: calc((15 / 24) * 1.0em);
        line-height: 2.0;
    }
}