@charset "utf-8";

.secFormTit {
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
    padding-top: 4rem;
}

.secFormTit .titPage {
    font-size: var(--pcFontSize40);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing40);
}

.secFormTit .btnBack {
    display: inline-flex;
    background-color: #fff;
    color: var(--color-text);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s, transform 0.3s;
    position: relative;
    z-index: 2;
    margin-left: 3rem;
}

.secFormTit .txtMypage {
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing40);
    line-height: 1.4;
    margin: 0 0 0 2rem;
}

.secFormTit .txtMypage a {
    text-decoration: underline;
    text-underline-offset: 0.5em;
}

@media screen and (max-width: 1215px) {
    .secFormTit {
        display: flex;
        margin-bottom: 2rem;
        justify-content: space-between;
        position: relative;
    }

    .secFormTit::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 1px;
        background-image: repeating-linear-gradient(90deg, #7f7f7f, #7f7f7f 1px, transparent 1px, transparent 5px);
        background-position: left bottom;
        background-repeat: repeat-x;
        background-size: 100% 1px;
    }

    .secFormTit.isSpLeft {
        justify-content: flex-start;
    }

    .secFormTit .titPage {
        font-size: var(--spFontSize23);
        letter-spacing: var(--spLetterSpacing0);
    }

    .secFormTit .btnBack {
        font-size: var(--spFontSize11);
        letter-spacing: var(--spLetterSpacing0);
        padding: 1rem 1.1rem;
        border-radius: 0.5rem;
        margin-left: 1.5rem;
    }

    .secFormTit .txtMypage {
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
        margin: 0 0 0 0.7rem;
    }
}

.secForm{
    background: var(--color-white);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
    padding: 9rem 12.5rem 11rem;
    border-radius: 1rem;
}
.secForm .listFormFlow {
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;
    gap: 8rem;
}
.secForm .itemFlow {
    width: 6rem;
    height: 6rem;
    position: relative;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    z-index: 1;
}
.secForm .itemFlow.on {
    background-color: var(--color-main);
    color: var(--color-white);
}
.secForm .itemFlow::after {
    content: "";
    position: absolute;
    width: 10rem;
    height: 0.2rem;
    background-color: var(--color-bg);
    right: -9rem;
    top: calc((6rem / 2) - 0.1rem);
    z-index: -1;
}
.secForm .itemFlow .intxt {
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40); 
    color: var(--color-text-light);
}
.secForm .itemFlow.on .intxt {
    color: var(--color-white);
}
.secForm .itemFlow.on::after {
    background-color: var(--color-main);
}
.secForm .itemFlow:last-child::after {
    display: none;
}
.secForm input::placeholder,
.secForm textarea::placeholder{
    color: rgba(34, 34, 34, 0.4);
}
.secForm .titCaution{
    color: var(--color-text-light);
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing40);
    margin-bottom: 3.4rem;
    text-align: center;
}
.secForm .formTable{
    width: 100%;
    border-collapse: separate;
}
.secForm .formTable tr + tr {
    margin-top: 3.5rem;
    display: block;
}
.secForm .formTable tr:has(.boxRadio) + tr {
    margin-top: 3.5rem;
}
.secForm .formTh{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}
.secForm .formTd{
    display: flex;
}
.secForm .formTh.noFlex,
.secForm .formTd.noFlex{
    display: block;
}
.secForm .formThRow{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.secForm .formLabel{
    color: var(--color-main);
    font-size: var(--pcFontSize17);
    font-weight: bold;
    line-height: calc(25 / 14);
    letter-spacing: var(--pcLetterSpacing40);
}
.secForm .formLabel .caution{
    color: var(--color-required);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    margin-top: 0.8rem;
}
.secForm .formLabelNote{
    display: inline-block;
    vertical-align: top;
    margin: 0.5rem 0 0;
    color: var(--color-text-light);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    font-weight: normal;
}
.secForm .txtPassword{
    color: var(--color-text-light);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    margin-top: 1rem;
}
.secForm .txtPassword a{
    text-decoration: underline;
    text-underline-offset: 0.5em;
}
.secForm .required{
    color: var(--color-required);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    flex-shrink: 0;
}
.secForm .notrequired{
    color: var(--color-text-light);
}
.secForm input[type="text"], 
.secForm input[type="tel"], 
.secForm input[type="email"], 
.secForm input[type="number"], 
.secForm input[type="password"], 
.secForm select, 
.secForm textarea {
    color: var(--color-text);
    border: 1px solid var(--color-form-border);
    width: 100%;
    height: 5rem;
    font-family: inherit;
    border-radius: 0.3rem;
    padding: 1rem 1.7rem;
    font-size: var(--pcFontSize15);
    line-height: calc(25 / 15);
    letter-spacing: var(--pcLetterSpacing40);
}
.secForm select{
    line-height: 1;
}
.secForm select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 3rem;
}
.secForm .input-box {
    width: 100%;
    position: relative;
}
.secForm .selectbox {
    position: relative;
}
.secForm .selectbox::after {
    content: "";
    position: absolute;
    width: 0.7rem;
    height: 0.6rem;
    background-color: var(--color-text);
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
/* ラジオボックス */
.secForm .boxRadio {
    margin-top: 1.2rem;
}
.secForm input[type="radio"]{
    position: absolute;
    width: 2rem;
    height: 2rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.secForm .txtRadio{
    position: relative;
    display: inline-block;
    padding-left: 3rem;
    margin-right: 2.5rem;
    cursor: pointer;
    line-height: calc(25 / 15);
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing40);
}
.secForm .txtRadio::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 100%;
    background: #fff;
    border: solid 0.1rem;
    border-color: var(--color-form-border);
}
.secForm input[type="radio"]:checked + .txtRadio::before{
    border-color: #000;
}
.secForm input[type="radio"]:checked + .txtRadio::after{
    content: "";
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 100%;
    background: #000;
    top: 50%;
    left: 0.4rem;
    transform: translateY(-50%);
}
/* チェックボックス */
.secForm .boxCheck {
    margin-top: 1.2rem;
    position: relative;
}
/* 本体は見えないけどフォーカス・クリックはできるように */
.secForm input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.3rem;
    height: 2.3rem;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
/* ラベル：テキストと「枠」をまとめて持つ */
.secForm .txtCheck {
    position: relative;
    display: inline-block;
    padding-left: 3rem;
    cursor: pointer;
    line-height: calc(25 / 15);
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing40);
    margin-right: 2.5rem;
}
/* 枠（未チェック時） */
.secForm .txtCheck::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.3rem;
    background: var(--color-white);
    border: 1px solid var(--color-form-border);
}

.secForm .boxPrivacy.isTxtOnly .txtCheck {
    padding-left: 0;
    margin-right: 0;
    cursor: default;
}
.secForm .boxPrivacy.isTxtOnly .txtCheck::before {
    display: none;
}

/* チェック時の塗りつぶし色 */
.secForm input[type="checkbox"]:checked + .txtCheck::before {
    border-color: var(--color-text);
    background-color: var(--color-text);
}

/* ✓ マーク（チェック時のみ） */
.secForm input[type="checkbox"]:checked + .txtCheck::after {
    content: "";
    position: absolute;
    width: 1.4rem;
    height: 0.9rem;
    border-bottom: 0.3rem solid var(--color-white);
    border-left: 0.3rem solid var(--color-white);
    top: 50%;
    left: 0.5rem;
    transform: translateY(-70%) rotate(-45deg);
}
/* エラーメッセージ */
.secForm .caution{
    color: var(--color-required);
    font-size: var(--pcFontSize12);
    margin-top: 1.5rem;
    line-height: calc(22 / 12);
    letter-spacing: var(--pcLetterSpacing40);
    width: 100%;
}
.secForm .caution + .caution{
    margin-top: 0.5rem;
}
.secForm .formGroup + .caution{
    margin-top: 0;
}

/* 生年月日 */
.secForm .input-box.flexWrap{
    display: flex;
}
.secForm .birthSelect{
    margin-right: 2rem;
}
/* メールアドレス */
.secForm .txtEmail{
    background: var(--color-form-email);
    width: 100%;
    height: 5rem;
    font-family: inherit;
    border-radius: 0.3rem;
    padding: 1rem 1.7rem;
    font-size: var(--pcFontSize15);
    line-height: calc(25 / 15);
    letter-spacing: var(--pcLetterSpacing40);
}
/* ニックネーム */
.secForm .topBorder {
    position: relative;
    padding-top: 4.5rem;
    display: block;
}
.secForm .formTable tr + tr.topBorder {
    margin-top: 5rem;
}

.secForm .topBorder::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background-image: radial-gradient(circle, var(--color-form-topBorder) 1px, transparent 1px);
    background-size: 3px 1px; /* ← ここで「点の間隔」を調整 */
    background-repeat: repeat-x;
}
/* アイコン画像 */
.secForm .formTable tr.boxIcon {
    margin-top: 2rem;
    display: block;
}
/* テキストエリア */
.secForm textarea {
    width: 100%;
    height: 15rem;
    display: block;
    resize: none;
}
.secForm .w200{
    width: 20rem;
}

/* infoアイコン */
.secForm .js-modal-site-info{
    position: relative;
    width: 2rem;
    height: 2rem;
    top: 0.5rem;
    display: inline-block;
}
.secForm .js-modal-site-info .navigation{
    position: absolute;
    top: 0;
    right: -0.5rem;
    width: 1.8rem;
    height: 1.8rem;
    background: url(/img/front/form/iconInfo.png) center center no-repeat;
    cursor: pointer;
    display: block;
    background-size: 100% 100%;
}


/*========================================
    JOB GATE（ジョブゲート）
========================================*/
.secForm .titJobGate{
    margin: 6rem 0 3rem;
    font-size: var(--pcFontSize18);
    line-height: calc(25 / 18);
    letter-spacing: var(--pcLetterSpacing40);
    color: var(--color-white);
    font-weight: bold;
    width: 100%;
    background: var(--color-mint);
    border-radius: 0.3rem;
    text-align: center;
    padding: 2.8rem 0;
}
.secForm .tableJobGate .required{
    color: var(--color-mint);
}
.secForm .tableJobGate .formLabel{
    color: var(--color-mint);
}
.secForm #education-container{
    display: flex;
    flex-direction: column;
    /* gap: 1.5rem; */
}
.secForm #addEducation,
.secForm .addEducationButton,
.secForm .addWorkCompanyButton,
.secForm #addUploadButton{
    display: block;
    border: none;
    padding: 0;
    background: transparent;
    font-size: var(--pcFontSize14);
    line-height: calc(25 / 14);
    letter-spacing: var(--pcLetterSpacing40);
    color: var(--color-form-add);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.8rem; 
    margin: 0 auto;
}

/* 学歴 */

.secForm .boxGray{
    display: flex;
    width: 100%;
    border-radius: 0.3rem;
    overflow: hidden;
    /* border: 1px solid var(--color-form-border); */
}
.secForm .education-item{
    background-color: var(--color-form-email);
    margin-bottom: 2.3rem;
}
.secForm .boxGray .input-box{
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
}
.secForm .education-item:has(.delete-column) .input-box{
    padding: 3rem 9rem 3rem 3rem;
}
.secForm .boxGray .titGroup{
    min-width: 10rem;
    height: 5rem;
    padding: 2rem;
    background-color: var(--color-text-light);
    color: var(--color-white);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);  
    border-radius: 0.3rem 0 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.secForm .boxGray .delete-column{
    width: 6rem;
    background-color: #ffe4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.secForm .boxGray .delete-column{
    width: 6rem;
    background-color: #ffe4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.secForm .boxGray .education-delete-btn{
    color: var(--color-text-light);
    font-size: var(--pcFontSize18);
}
.secForm .position-item{
    display: flex;
    background: #e5f8f8;
    border: 1px solid var(--color-mint);
    border-radius: 0.3rem;
}
.secForm .position-item + .position-item{
    border-top: none;
}
.secForm .position-item:has(.delete-column) .input-box{
    padding: 3rem 2rem 3rem 3rem;
}
.secForm .position-item .input-box{
    padding: 3rem 9rem 3rem 3rem;
}
.secForm .position-item .titGroup{
    background: #01b8bf;
}
.secForm .formGroup{
    display: flex;
    width: 100%;
    align-items: center;
}
.secForm .formGroup .boxSelect{
    margin-left: 3rem;
}
.secForm .formGroup .boxCheck{
    margin: 0 0 0 3rem;
}
.secForm .formGroup.txtArea .titGroup{
    height: 10rem;
}
.secForm .formGroup.txtArea textarea{
    height: 10rem;
}

.secForm .formRow{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
}
.secForm .formRow + .formRow{
    margin-top: 1.2rem;
}

.secForm .formTd .txtInline{
    font-size: var(--pcFontSize15);
    line-height: calc(25 / 15);
    letter-spacing: var(--pcLetterSpacing40);
}

.secForm .formTd .btnZip button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    
    background-color: var(--color-text);
    color: #fff;
    padding: 0.8rem 1rem 0.9rem;
    font-size: var(--pcFontSize12);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing40);
    border-radius: 0.5rem;
    text-align: center;
}

.secForm .wrapperWork{
    padding: 3rem;
    width: 100%;
}
.secForm .boxGray .input-box.workItemInner{
    padding: 0;
    margin-bottom: 3rem;
}
.secForm .workFlexItem{
    display: flex;
    background-color: var(--color-form-email);
    border: 1px solid var(--color-form-border);
}
.secForm .workFlexItem + .workFlexItem {
    margin-top: 2rem;
}

.secForm .boxGray:has(.workFlexItem) {
    display: block;
}
.secForm .addWork{
    margin-top: 2rem;
}
.secForm .addWork .addEducationButton{
    margin: 0;
}
.secForm .addCompany{
    margin-top: 2rem;
}
.secForm .addCompany .addWorkCompanyButton{
    margin: 0 auto;
}
.secForm .boxCheck.boxPrivacy{
    text-align: center;
    margin: 0 auto;
    margin-top: 8rem;
    width: 26rem;
    margin-bottom: 5.4rem;
}
.secForm .boxCheck.boxPrivacy.isTxtOnly{
    margin-bottom: 0;
    width: auto;
}
.secForm .boxCheck a.txtPrivacy{
    color: var(--color-form-add);
    text-decoration: underline;
    text-underline-offset: 0.4rem;
}


/* 確認画面 */
.btnSendCo.no_tap,
.btnSendCoBack.no_tap{
    opacity: 0.3!important;
    pointer-events: none!important;
    transition: none!important;
}
.btnSendCo.no_tap{
    background: url(/img/front/form/iconLoader.png) center center / 32px auto no-repeat,#194ff0!important;
    font-size: 0!important;
}
.secForm .confirmButton{
    text-align: center;
    margin: 4.4rem auto 0;
}
.secForm .confirmButton .link-button{
    display: flex;
    justify-content: center;
    align-items: center;
}
.secForm .confirmButton button,
.secForm .confirmButton .link-button{
    width: 40rem;
    height: 6rem;
    background: var(--color-form-add);
    color: var(--color-white);
    font-size: var(--pcFontSize15);
    line-height: calc(25 / 15);
    letter-spacing: var(--pcLetterSpacing40); 
    font-weight: bold;
    border-radius: 0.6rem;
    border: none;
    cursor: pointer;
    margin: 0 auto;
}
.secForm .confirmButton button + .link-button{
    margin-top: 3.5rem;
}
.secForm .confirmButton button.isMainColor,
.secForm .confirmButton .link-button.isMainColor{
    background-color: var(--color-main);
}
.secForm .confirmButton button.isPinkBorder,
.secForm .confirmButton .link-button.isPinkBorder{
    background-color: var(--color-main);background: #fff;
    color: var(--color-main);
    border: 1px solid var(--color-main);
}
.secForm .confirmButton button.isColorMain,
.secForm .confirmButton .link-button.isColorMain{
    background: var(--color-main);
    color: #fff;
}
/* submit系ボタン非活性時のスタイル(動画アップロード進行中など) */
.secForm .confirmButton button:disabled,
.secForm .confirmButton .link-button:disabled{
    background-color: #ccc;
    color: #fff;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}
.secForm .confirmButton button:disabled:hover,
.secForm .confirmButton .link-button:disabled:hover{
    opacity: 0.6;
}

/* ゴミ箱アイコン */
.secForm .education-delete-btn,
.secForm .work-delete-btn,
.secForm .remove-position-btn{
    position: relative;
    width: 100%;
    height: 100%;
}
.secForm .education-delete-btn .fa-trash-alt,
.secForm .work-delete-btn .fa-trash-alt,
.secForm .remove-position-btn .fa-trash-alt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2.1rem;
    background: url(/img/front/form/iconDelete.png) center center no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    display: block;
}

.secForm .education-delete-btn .fa-trash-alt::before,
.secForm .work-delete-btn .fa-trash-alt::before,
.secForm .remove-position-btn .fa-trash-alt::before{
    display: none;
}

.secForm .hrConfirm:last-child{
    display: none;
}
.secForm .flexConfirm{
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
}
.secForm.confirm .input-box.iconImage{
    width: 20rem;
}
.secForm.confirm .input-box.iconImage img{
    width: 100%;
    height: auto;
}
@media only screen and (max-width:1215px){
    .secForm {
        padding: 4rem 2rem 5rem;
        border-radius: 0.6rem;
    }
    .secForm .titCaution {
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
        margin-bottom: 3rem;
    }
    .secForm .formLabel {
        font-size: var(--spFontSize14);
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm input[type="text"],
    .secForm input[type="tel"],
    .secForm input[type="email"],
    .secForm input[type="number"],
    .secForm input[type="password"],
    .secForm select,
    .secForm textarea {
        width: 100%;
        height: 4.5rem;
        padding: 1rem 1.7rem;
        font-size: var(--spFontSize16);
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm select{
        line-height: 1;
    }
    .secForm .txtRadio {
        padding-left: 2.5rem;
        margin-right: 1rem;
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm .txtRadio::before {
        width: 2rem;
        height: 2rem;
    }
    .secForm input[type="radio"]:checked + .txtRadio::after {
        content: "";
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 100%;
        background: #000;
        top: 50%;
        left: 0.4rem;
        transform: translateY(-50%);
    }
    .secForm input[type="radio"]:checked + .txtRadio::after {
        width: 1.2rem;
        height: 1.2rem;
    }
    .secForm .w200 {
        width: 100%;
    }
    .secForm .ws150 {
        width: 15rem;
    }
    .secForm .ws100 {
        width: 10rem;
    }
    .secForm .input-box.flexWrap{
        display: block;
    }
    .secForm .birthSelect.w200 {
        width: 100%;
    }
    .secForm .birthSelect {
        margin-right: 0;
    }
    .secForm .birthSelect + .birthSelect{
        margin-top: 1rem;
    }
    .secForm .txtPassword {
        font-size: var(--spFontSize11);
        letter-spacing: var(--spLetterSpacing0);
        margin-top: 0.8rem;
    }
    .secForm .topBorder::before {
        left: -2rem;
        right: 0;
        width: calc(100% + 4rem);
    }
    .secForm .topBorder {
        padding-top: 3.2rem;
    }
    .secForm .formTable tr + tr {
        margin-top: 3rem;
    }
    .secForm .formTable tr + tr.topBorder {
        margin-top: 4rem;
    }
    .secForm textarea {
        height: 12rem;
    }
    .secForm .txtCheck {
        padding-left: 3rem;
        line-height: calc(25 / 12);
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
        margin-right: 1rem;
    }
    .secForm .txtCheck::before {
        width: 2rem;
        height: 2rem;
        border-radius: 0;
    }
    .secForm .boxCheck,
    .secForm .boxRadio {
        margin-top: 0.7rem;
    }
    .secForm input[type="checkbox"]:checked + .txtCheck::after {
        width: 1rem;
        height: 0.7rem;
        border-bottom: 0.2rem solid var(--color-white);
        border-left: 0.2rem solid var(--color-white);
    }
    .secForm .formGroup input[type="checkbox"]:checked + .txtCheck::after {
        left: 0.7rem;
    }
    .secForm .caution {
        font-size: var(--spFontSize10);
        margin-top: 1.5rem;
        line-height: calc(19 / 10);
    }
    .secForm .caution + .caution {
        margin-top: 0;
        line-height: calc(12 / 10);
    }
    .secForm .js-modal-site-info {
        margin-left: 1rem;
        top: 0.6rem;
    }
    .secForm .js-modal-site-info .navigation{
        left: 0;
    }
    /* アイコン画像 */
    .secForm .formTable tr.boxIcon {
        margin-top: 2rem;
    }

    /*========================================
        JOB GATE（ジョブゲート）
    ========================================*/

    .secForm .titJobGate {
        margin: 6rem 0 3rem;
        font-size: var(--spFontSize14);
        letter-spacing: var(--spLetterSpacing0);  
        width: calc(100% + 4rem);
        position: relative;
        left: -2rem;
        border-radius: 0;
        padding: 1.5rem 0;
    }
    .secForm .formGroup {
        display: block;
        width: 100%;
        align-items: center;
    }
    .secForm .boxGray .titGroup {
        min-width: unset;
        height: auto;
        padding: 0;
        background: none;
        color: var(--color-text);
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing40);
        border-radius: 0;
        display: block;
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }
    .secForm .boxGray .titGroup::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.2rem;
        width: 1rem;
        height: 1rem;
        background: var(--color-text);
        transform: rotate(45deg);
        z-index: 1;
    }
    .secForm .boxGray {
        display: flex;
        position: relative;
    }
    .secForm .workFlexItem,
    .secForm .position-item {
        position: relative;
    }
    .secForm .boxGray .delete-column {
        width: 4rem;
        height: 4rem;
        position: absolute;
        top: 0;
        right: 0;
    }
    .secForm .education-delete-btn .fa-trash-alt, 
    .secForm .work-delete-btn .fa-trash-alt, 
    .secForm .remove-position-btn .fa-trash-alt {
        width: 1.4rem;
        height: 1.5rem;
    }
    .secForm .wrapperWork {
        padding: 2rem 1.5rem;
    }
    .secForm .formGroup .boxSelect {
        margin-left: 0;
    }
    .secForm .formGroup .boxSelect + .boxSelect {
        margin-top: 1rem;
    }
    .secForm .boxGray .input-box {
        flex: 1;
        padding: 2rem 1.5rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.2rem;
    }
    .secForm .education-item:has(.delete-column) .input-box{
        padding: 2rem 1.5rem;
    }
    /* .secForm .formGroup.ws130 {
        width: calc(130 / 375 * 100%);
    } */
    .secForm .formGroup .boxCheck {
        margin: 1.2rem 0 0 auto;
        text-align: right;
        width: 9rem;
    }
    .secForm .formGroup input[type="checkbox"] {
        width: 2.4rem;
        height: 2.4rem;
    }
    .secForm .formGroup .txtCheck::before {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 0;
    }
    .secForm .formRow{
        gap: 0.5rem;
    }
    .secForm .formTd .btnZip button{        
        padding: 0.6rem 1rem;
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm #addEducation, 
    .secForm .addEducationButton, 
    .secForm .addWorkCompanyButton,
    .secForm #addUploadButton {
        display: block;
        border: none;
        padding: 0;
        background: transparent;
        font-size: var(--spFontSize12);
        line-height: calc(25 / 12);
        letter-spacing: var(--spLetterSpacing0);
        text-underline-offset: 0.6rem;
    }
    .secForm .addWork{
        margin-top: 1.6rem;
    }
    .secForm .addWork .addEducationButton {
        margin: 0 auto;
    }
    .secForm #addUploadButton {
        margin-top: 2.5rem;
    }
    .secForm .formGroup.txtArea .titGroup {
        height: auto;
    }

    .secForm .position-item .titGroup {
        color: var(--color-form-work);
    }
    .secForm .position-item .titGroup::before {
        background: var(--color-form-work);
        border-radius: 50%;
    }
    .secForm .position-item {
        background: #e5f8f8;
        border: 1px solid var(--color-form-work);
        padding: 2rem 1.5rem 2.5rem;
    }
    .secForm .positions-container + .positions-container{
        border-top: none;
    }
    .secForm .positions-container + .position-item{
        padding-top: 2.5rem;
    }
    .secForm .positions-container .input-box {
        padding: 0;
    }
    .secForm .position-item:has(.delete-column) .input-box{
        padding: 0;
    }
    .secForm .confirmButton button {
        width: 100%;
        height: 5rem;
        font-size: var(--spFontSize14);
        line-height: 1;
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm .confirmButton .link-button {
        width: 100%;
        height: 5rem;
        font-size: var(--spFontSize14);
        line-height: 1;
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm .confirmButton button + .link-button{
        margin-top: 3rem;
    }
    .secForm .boxCheck.boxPrivacy {
        margin: 0 auto;
        margin-top: 6rem;
        margin-bottom: 2.4rem;
        width: 20rem;
    }
    .secForm .boxCheck.boxPrivacy.isTxtOnly {
        margin-top: 3.4rem;
    }
    .secForm .confirmButton:not(.isMarginTop) {
        margin: 0.5rem auto 0;
    }
    .secForm .boxCheck a.txtPrivacy {
        text-decoration: underline;
        text-underline-offset: 0.7rem;
    }
    .secForm .flexConfirm {
        display: block;
        margin: 1rem 0;
    }
}

@media only screen and (max-width:370px){
    .secForm .txtPassword {
        font-size: var(--spFontSize10);
    }
}

/* 画像アップロード */
.secForm .uploadList{
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 3.5rem;
}
.secForm .uploadList.isNoBottom{
    padding-bottom: 0;
}
.secForm .uploadList .upload{
    width: calc((100% - 5rem) / 3);
}
.secForm .uploadList .uploadTit{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.secForm .uploadList .uploadWrap{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.secForm .uploadList .uploadWrap.w200{
    width: 20rem;
}
.secForm .uploadList .imageBox img{
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.secForm .uploadList .uploadLabel{
    font-size: var(--pcFontSize14);
    line-height: calc(25 / 14);
    letter-spacing: var(--pcLetterSpacing40);
}
.secForm .uploadList .uploadrequired{
    color: var(--color-required);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
}
.secForm .uploadList .uploadrequired.notrequired{
    color: var(--color-text-light);
}
.secForm .uploadList .updateCtrl{
    width: 100%;
}
.secForm .uploadList .fa-upload{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #f6f6f6;
    border: dotted 1px var(--color-form-topBorder);
    aspect-ratio: 1 / 1;
}
.secForm .uploadList .fa-upload::before{
    display: none;
}
.secForm .uploadList .uploadBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    border: solid 1px var(--color-main);
    background-color: #fff;
    color: var(--color-main);
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    gap: 0 0.4rem;
}
.secForm .uploadList .uploadBtn::before{
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(/img/front/common/iconPhoto.png) center center / 100% no-repeat;
}
.secForm .uploadList .uploadBg{
    font-size: var(--pcFontSize16);
    letter-spacing: var(--pcLetterSpacing40);
    color: var(--color-text);
}
.secForm .uploadList .txtOr{
    font-size: var(--pcFontSize12);
    color: var(--color-text);
    display: block;
    margin-top: 1.5rem;
}
.secForm .uploadList .upTemplate{
    flex-direction: column;
}
.secForm .uploadList .fa-trash{
    display: none;
}
.secForm .uploadList .imageBox img[src=""]{
    display: none;
}
.secForm .uploadList .imageBox img.loaded + input + .fa-trash{
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;

    font-size: 0;
    width: 4.4rem;
    height: 4.4rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}
.secForm .uploadList .fa-trash::before,
.secForm .uploadList .fa-trash::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4rem;
    height: 0.2rem;
    background-color: #fff;
    transform-origin: center;
}

.secForm .uploadList .fa-trash::before,
.secForm .uploadList .fa-trash::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.secForm .uploadList .fa-trash::after,
.secForm .uploadList .fa-trash::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* 確認ページ */
.secForm.confirm .uploadList .uploadWrap {
    width: 100%;
    aspect-ratio: 1 / 1;
}

@media only screen and (max-width:1215px){
    .secForm .uploadList{
        flex-direction: column;
        gap: 0;
        padding-top: 0.5rem;
        padding-bottom: 3.5rem;
    }
    .secForm .uploadList.isNoBottom{
        padding-bottom: 0;
    }
    .secForm .uploadList .upload{
        width: 100%;
    }
    .secForm .uploadList .upload + .upload{
        margin-top: 3rem;
    }
    .secForm .uploadList .uploadTit{
        margin-bottom: 1.5rem;
        background-color: #fafafa;
        border-radius: 0.3rem;
        padding: 1rem 1.8rem;
    }
    .secForm .uploadList .uploadWrap{
        width: 65vw;
        margin: 0 auto;
    }
    .secForm .uploadList .uploadWrap.w200{
        width: 20rem;
    }
    .secForm .uploadList .uploadLabel{
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm .uploadList .uploadrequired{
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm .uploadList .uploadBtn{
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing0);
        padding: 1rem 1.5rem;
        gap: 0 0.4rem;
    }
}


/*========================================
    CONFIRM（確認）
========================================*/
.secForm.confirm .input-box {
    background: var(--color-form-email);
    width: 100%;
    height: auto;
    min-height: 5rem;
    font-family: inherit;
    border-radius: 0.3rem;
    padding: 1.2rem 1.7rem;
    font-size: var(--pcFontSize15);
    line-height: calc(25 / 15);
    letter-spacing: var(--pcLetterSpacing40);
}
.secForm.confirm .input-box.textWrap {
    min-height: 15rem;
}
.secForm.confirm .input-box p{
    color: var(--color-text);
}
.secForm.confirm .thumb-box {
    max-width: 15rem;
}
.secForm.confirm .thumb-box img {
    width: 100%;
    height: auto;
}
.secForm.confirm .backButton input[type="submit"] {
    border: none;
    cursor: pointer;
    display: block;
    width: 40rem;
    height: 6rem;
    background: var(--color-form-add);
    color: var(--color-white);
    font-size: var(--pcFontSize15);
    line-height: calc(25 / 15);
    letter-spacing: var(--pcLetterSpacing40);
    font-weight: bold;
    border-radius: 0.6rem;
    cursor: pointer;
    margin: 0 auto 3.5rem;
}
.secForm.confirm .backButton button {
    border: none;
    outline: none;
    padding: 0;
    appearance: none;
    
    border: none;
    cursor: pointer;
    display: block;
    width: 40rem;
    height: 6rem;
    background: var(--color-form-add);
    color: var(--color-white);
    font-size: var(--pcFontSize15);
    line-height: calc(25 / 15);
    letter-spacing: var(--pcLetterSpacing40);
    font-weight: bold;
    border-radius: 0.6rem;
    cursor: pointer;
    margin: 0 auto 3.5rem;
}
.secForm.confirm a.backButton {
    display: block;
    width: 40rem;
    margin: 0 auto 3.5rem;
}
.secForm.confirm a.backButton.isNoBottom {
    margin-bottom: 0;
}
.secForm.confirm a.backButton input[type="submit"],
.secForm.confirm a.backButton button {
    margin-bottom: 0;
}
.secForm.confirm .backButton.isPinkBorder button {
    background: #fff;
    color: var(--color-main);
    border: 1px solid var(--color-main);
}
.secForm.confirm .nextButton {
    border: none;
    padding: 0;
    background: transparent;
    font-size: var(--pcFontSize14);
    line-height: calc(25 / 14);
    letter-spacing: var(--pcLetterSpacing40);
    color: var(--color-form-add);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    margin: 0 auto;
    display: block;
}
.secForm.confirm .nextButton button {
    background: none;
    border: none;
    color: var(--color-form-add);
    font-size: var(--pcFontSize14);
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    cursor: pointer;
}
.secForm.confirm .nextButton .nextButtonInput {
    background: none;
    border: none;
    color: var(--color-form-add);
    font-size: var(--pcFontSize14);
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    cursor: pointer;
    border-bottom: 0.1rem solid var(--color-form-add);
}
.secForm.confirm .button-box{
    margin-top: 6rem;
}
.secForm.confirm .button-box-inner{
    display: flex;
    flex-direction: column-reverse;
}
.secForm.confirm .tableJobGate .input-box {
    padding: 2rem;
}
.secForm.confirm .tableJobGate .input-box + .input-box {
    margin-top: 0.8rem;
}
.secForm.confirm .tableJobGate .infoPosition{
    margin-top: 1rem;
}
.secForm.confirm .tableJobGate .infoPositionLabel{
    font-weight: bold;
    font-size: var(--pcFontSize13);
    color: var(--color-mint);
}
.secForm.confirm .tableJobGate .infoPositionDesc{
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing40);
}
.secForm.confirm .tableJobGate .infoPositionDate{
    font-size: var(--pcFontSize12);
    color: #999;
}

@media only screen and (max-width:1215px){
    .secForm .itemFlow {
        width: 3.5rem;
        height: 3.5rem;
    }
    .secForm .itemFlow::after {
        width: 7rem;
        height: 0.1rem;
        right: -6rem;
        top: calc((3.5rem / 2) - 0.05rem);
    }
    .secForm .itemFlow .intxt {
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm .listFormFlow {
        margin-bottom: 2rem;
        gap: 4rem;
    }
    .secForm.confirm .input-box {
        min-height: 4.5rem;
        padding: 1.2rem 1.7rem;
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm.confirm .nextButton {
        font-size: var(--spFontSize12);
        text-underline-offset: 0.5rem;
    }
    .secForm.confirm .button-box {
        margin-top: 3rem;
    }
    .secForm.confirm .backButton input[type="submit"],
    .secForm.confirm .backButton button {
        width: 100%;
        height: 5rem;
        font-size: var(--spFontSize14);
        line-height: 1;
        letter-spacing: var(--spLetterSpacing0);
        margin: 0 auto 3rem;
    }
    .secForm.confirm a.backButton {
        width: 100%;
        margin: 0 auto 3rem;
    }
    .secForm.confirm a.backButton.isNoBottom {
        margin-bottom: 0;
    }
    .secForm.confirm a.backButton input[type="submit"],
    .secForm.confirm a.backButton button {
        margin-bottom: 0;
    }
    .secForm input::placeholder,
    .secForm textarea::placeholder{
        font-size: var(--spFontSize13);
    }
    .secForm.confirm .titCaution {
        margin-bottom: 1rem;
    }
    .secForm.confirm .tableJobGate .input-box {
        padding: 1rem 1.5rem;
    }
    .secForm.confirm .tableJobGate .infoPositionLabel{
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm.confirm .tableJobGate .infoPositionDesc{
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
    }
}


/*========================================
    COMPLETE（完了）
========================================*/
.secForm.complete {
    padding: 10rem 15rem;
}
.secForm.complete .titComplete {
    font-size: var(--pcFontSize40);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing20);
    line-height: 1.55;
    margin-bottom: 3rem;
    text-align: center;
}
.secForm.complete .txtComplete {
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing40);
    line-height: calc(25 / 14);
    text-align: center;
}
.secForm.complete .boxMenter {
    margin-top: 5.5rem;
    display: flex;
    align-items: center;
    gap: 4rem;
    background: var(--color-form-complete);
    border: 1px solid var(--color-purple);
    padding: 4rem 4rem 4rem 9rem;
    border-radius: 1rem;
}
.secForm.complete .boxMenter .boxLeft {
    width: 17rem;
    height: 17rem;
}
.secForm.complete .boxMenter .boxRight {
    flex: 1;
}
.secForm.complete .boxMenter .boxRight .txtMenter {
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing40);
    line-height: calc(25 / 14);
}
.secForm.complete .boxMenter .linkInstructor {
    width: 40rem;
    height: 6rem;
    display: block;
    margin-top: 1.4rem;
}
.secForm.complete .boxMenter .boxRight button {
    width: 100%;
    height: 100%;
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing40);
    line-height: 1;
    border-radius: 0.6rem;
    background: var(--color-purple);
    color: var(--color-white);
    border: none;
    cursor: pointer;
}

.secForm.complete .button-box{
    margin-top: 6rem;
}
.secForm.complete .button-box-inner{
    display: flex;
    gap: 2rem;
    justify-content: center;
}
.secForm.complete .button-box-inner button {
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing40);
    line-height: 1;
    background: var(--color-main);
    border: none;
    cursor: pointer;
    color: var(--color-white);
    width: 40rem;
    height: 6rem;
    border-radius: 0.6rem;
}
.secForm.complete .button-box-inner button.isGray {
    background: var(--color-text-light);
}
.secForm.complete .button-box-inner .linkTop {
    text-align: center;
    text-decoration: none;
    text-underline-offset: 0.5rem;
    font-weight: bold;
}
.secForm.complete .linkMypage button{
    background: var(--color-white);
    color: var(--color-main);
    border: 1px solid var(--color-main);
}
@media only screen and (max-width:1215px){
    .secForm.complete {
        padding: 4rem 2rem 4rem;
    }
    .secForm.complete .titComplete {
        font-size: var(--spFontSize20);
        letter-spacing: var(--spLetterSpacing0);
        margin: 3rem 0 1.5rem;
    }
    .secForm.complete > section > .titComplete {
        margin-top: 0;
    }
    .secForm.complete .txtComplete {
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
        line-height: calc(20 / 12);
    }
    .secForm.complete .txtComplete.isTxtLeft {
        text-align: left;
    }
    .secForm.complete .boxMenter {
        margin-top: 4.5rem;
        padding: 0 3rem 3rem 3rem;
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0rem;
    }
    .secForm.complete .boxMenter .linkInstructor {
        width: 96.84%;
        margin: 1.5rem auto 0;
        display: block;
        max-width: 24.5rem;
    }
    .secForm.complete .boxMenter .boxRight button {
        width: 100%;
        height: 5rem;
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
        border-radius: 0.6rem;
        margin: 0;
    }
    .secForm.complete .boxMenter .boxRight .txtMenter {
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
        line-height: calc(20 / 12);
    }
    .secForm.complete .boxMenter .boxLeft {
        width: 10.5rem;
        height: 10.5rem;
        position: relative;
        top: -2rem;
    }
    .secForm.complete .button-box-inner {
        gap: 1rem;
        flex-direction: column;
    }
    .secForm.complete .button-box-inner .linkTop,
    .secForm.complete .button-box-inner .linkMypage {
        width: 77.78%;
        margin: 0 auto;
        max-width: 24.5rem;
    }
    .secForm.complete .button-box-inner button {
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
        width: 100%;
        height: 5rem;
    }
    .secForm.complete .button-box {
        margin-top: 3rem;
    }
}
@media only screen and (max-width:370px){
    .secForm.complete .txtComplete {
        font-size: var(--spFontSize11);
    }
}

/* ボタン共通CSS */
.secForm .cmnFormButton{
    width: 100%;
    height: 100%;
    background: var(--color-form-add);
    color: var(--color-white);
    font-size: var(--pcFontSize15);
    line-height: calc(25 / 15);
    letter-spacing: var(--pcLetterSpacing40);
    font-weight: bold;
    border-radius: 0.6rem;
    border: none;
    cursor: pointer;
    margin: 0 auto;
}
.secForm .cmnLinkTxt{
    display: block;
    border: none;
    padding: 0;
    background: transparent;
    font-size: var(--pcFontSize14);
    line-height: calc(25 / 14);
    letter-spacing: var(--pcLetterSpacing40);
    color: var(--color-form-add);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.8rem;
    margin: 0 auto;
}
@media only screen and (max-width:1215px){
    .secForm .cmnFormButton{
        font-size: var(--spFontSize14);
        line-height: 1;
        letter-spacing: var(--spLetterSpacing0);
    }
    .secForm .cmnLinkTxt{
        display: block;
        border: none;
        padding: 0;
        background: transparent;
        font-size: var(--spFontSize12);
        line-height: calc(25 / 12);
        letter-spacing: var(--spLetterSpacing0);
        text-underline-offset: 0.6rem;
    }
}

/* 登録種類(type[])用：各 input+label のラッパー */
.secForm .boxCheck .checkItem {
    position: relative;
    display: inline-block;
    margin-right: 2.5rem; /* ラベルの余白はここで付ける */
}

/* この中の checkbox は、ラッパー(checkItem)を基準に絶対配置 */
.secForm .boxCheck .checkItem input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.3rem;
    height: 2.3rem;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

/* ラベル側の余白は checkItem 単位ですでに取るので、右マージンだけに調整 */
.secForm .boxCheck .checkItem .txtCheck {
    padding-left: 3rem; /* 既存のデザイン維持 */
    margin-right: 0;
}

/* 性別ラジオボタン用：各 input+label のラッパー */
.secForm .boxRadio .radioItem {
    position: relative;
    display: inline-block;
    margin-right: 2.5rem;
}

/* この中のラジオはラッパー(radioItem)を基準に絶対配置 */
.secForm .boxRadio .radioItem input[type="radio"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

/* ラベルは既存デザインをほぼ維持しつつ、右マージンをラッパー側に任せる */
.secForm .boxRadio .radioItem .txtRadio {
    padding-left: 3rem;
    margin-right: 0;
}

@media screen and (max-width: 1215px) {
    .secForm .boxCheck .checkItem .txtCheck {
        padding-left: 2.5rem;
        margin-right: 0;
    }
    .secForm .boxCheck .checkItem {
        margin-right: 1rem;
    }
    .secForm .boxCheck .checkItem.w100p {
        width: 100%;
        display: block;
    }
    .secForm .boxRadio .radioItem .txtRadio {
        padding-left: 2.5rem;
        margin-right: 0;
    }
    .secForm .boxRadio .radioItem{
        margin-right: 0.5rem;
    }
}

/*========================================
    JOB GATEフォーム
========================================*/
.secForm.formJob .itemFlow.on {
    background-color: var(--color-mint);
}
.secForm.formJob .itemFlow.on::after {
    background-color: var(--color-mint);
}
.secForm.formJob.complete .button-box-inner button{
    background: var(--color-mint);
}
.secForm.formJob.complete .linkMypage button {
    background: var(--color-white);
    color: var(--color-mint);
    border: 1px solid var(--color-mint);
}
.secPasswordChangeMail .formJob.secForm .formLabel {
    color: var(--color-mint);
}


/*========================================
    講座登録　動画ファイル
========================================*/
.secForm .flexPrice {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.secForm .flexPrice .txtPrice {
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing40);
}
.secForm .boxMovieFile {
    display: flex;
    align-items: center;
}
.secForm .boxMovieFile .textMovieInfo span{
    display: inline-block;
    vertical-align: top;
    color: var(--color-text-light);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    font-weight: normal;
}
.secForm .boxMovieFile button{
    width: 20rem;
    height: 5rem;
    border-radius: 0.6rem;
    background: var(--color-form-movie);
    color: var(--color-text);
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing40);
    font-weight: bold;
    border: none;
    cursor: pointer;
}
@media screen and (max-width: 1215px) {
    .secForm .boxMovieFile button {
        width: 15rem;
        height: 4.5rem;
        border-radius: 0.3rem;
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing0);
    }
}

#video_embed_container_js iframe{
    max-width: 100%;
    height: auto;
    aspect-ratio: 640 / 360;
}

/*========================================
    講座登録　画像アップロード
========================================*/
.secForm .boxUploadField {
    width: 100%;
}
.secForm .boxUploadField .fieldItemWrapper{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #f6f6f6;
    border: dotted 1px var(--color-form-topBorder);
    aspect-ratio: 1 / 1;
    flex-direction: column;
    gap: 1rem;
}
.secForm .boxUploadField .fieldItem {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    border: solid 1px var(--color-main);
    background-color: #fff;
    color: var(--color-main);
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    gap: 0 0.4rem;
}
.secForm .boxUploadField .fieldItem.boxTemplate {
    border: solid 1px var(--color-form-add);
    color: var(--color-form-add);
    padding: 1.3rem 2rem;
}
.secForm .boxUploadField .linkField {
    color: var(--color-main);
    text-decoration: none;
}
.secForm .boxUploadField .linkTemplate {
    text-decoration: none;
}
.secForm .boxUploadField .linkMateria {
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    color: var(--color-form-add);
}
.secForm .boxUploadField .fieldItem::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(/img/front/common/iconPhoto.png) center center / 100% no-repeat;
}
.secForm .boxUploadField .fieldItem.boxTemplate::before {
    display: none;
}

.secForm .boxUploadField .fa-upload.hidden-upload-btn {
    display: none !important;
    aspect-ratio: auto !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* 隣接する imageBox 内の絶対配置 img（z-index:1）より操作エリアを手前に */
/* .secForm .boxUploadField .image-source-select.boxUploadField {
    position: relative;
    z-index: 2;
} */
.secForm .material-upload .imageBox img[src]:not([src=""]) + .fa-trash {
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    font-size: 0;
    width: 4.4rem;
    height: 4.4rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}
.secForm .material-upload .imageBox img[src=""] {
    display: none !important;
}