.section{
    position: relative;
    display: grid;
    gap: 30px;
    width: 90%;
    max-width: 1000px;
    margin: 2rem auto 1rem auto;
    color: #000;

}
.section .title-wrapper > .title
, .section .title-wrapper > .section-title
{
    color: #3db134;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 4.5px;
    margin: 0 auto;
}

.section .title-wrapper > .subtitle
, .section .title-wrapper > .section-subtitle
{
    color: #3db134;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 8px auto 0 auto;
    letter-spacing: 1px;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
}

.section .login-link-wrapper{
    text-align: left;
}
.section .login-link-wrapper a{
    color: #000000;
    text-decoration: underline;
}

.section .text{
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.5px;
}
.tbl-form.form-register{
    display: grid;
    gap: 20px;
}
.req {
    color: #f00;
}

label {
    cursor: pointer;
}

.attention{
    font-size: 16px;
}
.attention.privacy{
    font-size: 15px;
    margin-top: 35px;
}

.tr_wrapper{
    position: relative;
    width: 100%;
}

.tr_title{
    width :100%;
    margin-bottom: 15px;
}
.tr_title.required{
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
}
.tr_title.required:after{
    content: '※';
    color: #f24100;
}
.tr_body{
    width :100%;
}
.tr_body p{
    position: relative;
    width: 100%;
}
.tr_body_grid_item{
    display: grid;
    width :100%;
    margin-bottom: 20px;
    align-items: center;
}
.tr_body_grid_item.nowrap{
    grid-template-columns: min-content 1fr;
}
.input_title{
    margin-right: 10px;
}
form .tr_body_grid_item input{
    width :60%;
}

form input[type="text"]
, form input[type="tel"]
, form input[type="email"]
, form input[type="password"]
{
    position: relative;
    border: 1px solid #cccccc;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border-radius: 30px;
    width: calc(100% - 40px);
    font-size: 16px;
}

form input[name="now_postal_code"]{
    padding: 10px 20px 10px 40px;
    width: calc(100% - 60px);
}

form .form-radio{
    display: grid;
    gap: 5px;
}
form .form-radio label
{
    display: block;
}

form input[type="radio"]{

}

form .select-wrapper{
    position: relative;
    width: max-content;
}
.school_univ.select-wrapper, .school_other.select-wrapper{
    width: 100%;
}
.school_univ.select-wrapper > select, .school_other.select-wrapper > select{
    font-size: 16px;
}
form .select-wrapper:before{
    position: absolute;
    content: '';
    background-color: #ffffff;
    width: 20px;
    height: 15px;
    top: 35%;
    right: 3px;    
}
form .select-wrapper:after{
    position: absolute;
    content: '';
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transform: rotate(45deg) translate(-12px, 30px);
    background-color: #ffffff;
    width: 8px;
    height: 8px;
}

form select{
    border: 1px solid #cccccc;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    border-radius: 30px;
    width :100%;
    text-align: center;
}

form select.form-register_input-small{
    font-size: 16px;
    padding: 10px 40px;
    width: max-content;
}

form #form-submit-wrapper input[type="submit"]{
    border: 1px solid #3db134;
    background-color: #3db134;
    color: white;
    justify-content: center;
    align-items: center;
    padding: 15px 60px;
    border-radius: 30px;
    display: block;
    width: 100%;
    margin: 0 auto 20px;
    cursor: pointer;
    font-size: 14px;
}

.form-register_note, .error{
    font-size: 13px;
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
}
.form-register_note:before, .error:before{
    content: '※';
}
.error, .error_message{
    color: #f00;
}

.postal_code:before{
    content: '〒';
    position: absolute;
    z-index: 1;
    left: 16px;
    font-size: 16px;
    top: 17%;
}

.input-container {
    position: relative; /* 子要素のabsolute配置の基準となる */
    display: inline-block; /* input要素に合わせて幅を調整 */
}

.overlay-text {
    position: absolute; /* 親要素（.input-container）を基準に配置 */
    top: 50%; /* 上から中央に配置 */
    left: 15px; /* 左から10px */
    transform: translateY(-50%); /* 自身の高さの半分だけ上にずらして垂直方向の中央に配置 */
    pointer-events: none; /* テキストをクリックしてもinputにフォーカスが当たるようにする */
    /* 必要に応じてz-indexを設定し、inputより前面に表示 */
    z-index: 1;
}

#js-delete-fukushigoto-user-submit-wrapper input[type="submit"] {
    border: 1px solid #ff0008;
    background-color: #ff0008;
    color: white;
    justify-content: center;
    align-items: center;
    padding: 15px 60px;
    border-radius: 30px;
    display: block;
    width: 100%;
    margin: 0 auto 20px;
    cursor: pointer;
    font-size: 14px;
}

@media (min-width: 769px){
    .section{
        gap: 40px;
    }
    .section .title-wrapper > .title{
        font-size: 32px;
        letter-spacing: 4px;
    }
    .section .title-wrapper > .subtitle{
        font-size: 18px;
        letter-spacing: 1.5px;
    }
    .section .text{
        letter-spacing: 3px;
        line-height: 1.7;
    }

    .section .login-link-wrapper{
        text-align: center;
    }
    .tbl-form.form-register{
        gap: 50px;
    }

    .tr_wrapper{
        display: grid;
        grid-template-columns: 200px 1fr;
    }
    .tr_title{
        position: relative;
        top: 10px;
    }
    .tr_body{
    }
    .tr_body > p{
        margin-top: 0;
    }

    .tr_body_grid_wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .tr_body_grid_item{
        width :100%;
    }
    form .tr_body_grid_item input{
        width :60%;
    }

    form #form-submit-wrapper{
        text-align: center;
    }
    form #form-submit-wrapper input[type="submit"]{
        display: block;
        width: 300px;
        height: 66px;
        border-radius: 50px;
        margin: 0 auto 10px;
        font-size: 16px;
    }

    form .form-radio label
    {
        display: initial;
    }

    form input[type="text"]
    , form input[type="tel"]
    , form input[type="email"]
    , form input[type="password"]
    {
        border: 1px solid #cccccc;
        justify-content: center;
        align-items: center;
        padding: 13px 30px;
        border-radius: 30px;
        width: 300px;
    }
    form input[type="text"].col-2
    , form input[type="tel"].col-2
    , form input[type="email"].col-2
    , form input[type="password"].col-2
    {
        width: calc(100% - 100px);
    }

    form select{
        border: 1px solid #cccccc;
        justify-content: center;
        align-items: center;
        padding: 13px 10px;
        border-radius: 30px;
        width :150px;
        padding-left: 40px;
    }
    form select[name="school_univ"]
    , form select[name="school_other"]
    {
        width :200px;
    }

    form input[name="now_city"]
    ,form input[name="now_addr_else"]
    {
        width :250px;
    }

    #js-delete-fukushigoto-user-submit-wrapper input[type="submit"] {
        display: block;
        width: 300px;
        height: 66px;
        border-radius: 50px;
        margin: 0 auto 10px;
        font-size: 16px;
    }

    .school_univ.select-wrapper, .school_other.select-wrapper{
        width: max-content;
    }
    form select[name="school_univ"], form select[name="school_other"]{
        width: max-content;
        padding: 13px 35px;
    }
    form .school_univ.select-wrapper:after {
        transform: rotate(45deg) translate(-12px, 34px);
    }

    .postal_code:before{
        font-size: 18px;
        left: 30px;
        top: 18%;
    }
    form input[name="now_postal_code"]{
        padding-left: 50px;
        width: 280px;
    }
    form input[name="now_city"], form input[name="now_addr_else"]{
        width: 430px;
    }
}

.footer{
    margin-top: 8rem;
}