@charset "utf-8";
#btnQuestionnaire,
.secFormQuestionnaire.co .btnQuestionnaire{
    display: flex;
    align-items: center;
    width: 100%;
    height: 127px;
    text-align: center;
    text-decoration: none;
    background: #12a4f0;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.05em;
    position: relative;
    border-radius: 10px;
    text-decoration: none;
}
#btnQuestionnaire .btnIn,
.secFormQuestionnaire.co .btnQuestionnaire .btnIn{
    display: inline-block;
    width: 100%;
    text-align: center;
}
#btnQuestionnaire .topMin{
    font-size: 16px;
    line-height: calc(24 / 16);
}
.secFormQuestionnaire .btnQuestionnaire .icon{
    position: relative;
    display: inline-block;
    margin-top: 15px;
}
.secFormQuestionnaire .btnQuestionnaire .icon::before{
    content: "";
    position: absolute;
    top: 0;
    right: -35px;
    margin: auto;
    width: 17px;
    height: 16px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(134deg);
}
.secFormQuestionnaire .btnQuestionnaire .txtQuestionnaireOn.icon::before{
    transform: rotate(315deg);
    top: auto;
    bottom: 3px;
}
.secFormQuestionnaire .btnQuestionnaire.on::after{
    display: none;
}
.secFormQuestionnaire .btnQuestionnaire:not(.on) .txtQuestionnaireOn,
.secFormQuestionnaire .btnQuestionnaire.on .txtQuestionnaireOff,
.secFormQuestionnaire input[name="f_isQuestionnaire"],
.secFormQuestionnaire input[name="isQuestionnaire"],
.secFormQuestionnaire:not(.co) .boxQuestionnaire{
    display: none;
}
@media only screen and (max-width:767px){
    #btnQuestionnaire,
    .secFormQuestionnaire.co .btnQuestionnaire{
        min-height: 100px;
        height: auto;
        padding: 15px 10px;
        font-size: 18px;
        line-height: calc(20 / 18);
    }
    #btnQuestionnaire .topMin{
        font-size: 12px;
        line-height: calc(20 / 12);
    }
    .secFormQuestionnaire .btnQuestionnaire .icon{
        margin-top: 5px;
    }
    .secFormQuestionnaire .btnQuestionnaire .icon::before{
        right: -24px;
        width: 13px;
        height: 13px;
    }
    .secFormQuestionnaire .btnQuestionnaire .txtQuestionnaireOn.icon::before{
        right: -24px;
    }
}

@media only screen and (min-width:768px){
    .secFormTable .boxQuestionnaire tr .mustTit{
        line-height: calc(30 / 22);
    }
}
#boxQuestionnaire .form_checklist,
#boxQuestionnaire .form_radio_list,
#boxQuestionnaire .checklist,
#boxQuestionnaire .radio_list,
#boxQuestionnaire .checkItem,
#boxQuestionnaire .radio_item{
    width: 100%;
}
#boxQuestionnaire .checkItem + .checkItem,
#boxQuestionnaire .radio_item + .radio_item{
    margin-top: 10px;
}
#boxQuestionnaire .radio_list + .textarea_box,
#boxQuestionnaire .checklist + .textarea_box{
    margin-top: 10px;
}

#boxQuestionnaire .labelRadio{
    position: relative;
    font-size: 20px;
    line-height: calc(30 / 20);
    display: inline-block;
}
#boxQuestionnaire .labelRadio input[type="radio"]{
    visibility: hidden;
    position: absolute;
    margin: 0;
    height: auto;
}
#boxQuestionnaire .txtRadio{
    display: inline-flex;
    align-items: center;
    padding-left: calc(26px + 5px);
}
#boxQuestionnaire .txtRadio::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #dcdcdc;
}
#boxQuestionnaire .txtRadio::after{
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #12a4f0;
    top: 6px;
    left: 4px;
    z-index: 3;
    opacity: 0;
}
#boxQuestionnaire .labelRadio input[type="radio"]:checked + .txtRadio::before{
    border-color: #12a4f0;
}
#boxQuestionnaire .labelRadio input[type="radio"]:checked + .txtRadio::after{
    opacity: 1;
}
@media only screen and (min-width:768px){
    .secFormTable .boxQuestionnaire tr .mustTit .minitit{
        font-size: 16px;
        line-height: calc(24 / 16);
    }
}
@media only screen and (max-width:767px){
    .secFormTable #boxQuestionnaire tr th{
        align-items: flex-start;
    }
    .secFormTable #boxQuestionnaire tr th .must{
        position: relative;
        top: 3px;
    }
    .secFormTable #boxQuestionnaire tr .mustTit {
        line-height: calc(20 / 11);
    }
    #boxQuestionnaire .checkItem + .checkItem,
    #boxQuestionnaire .radio_item + .radio_item{
        margin-top: 8px;
    }
    #boxQuestionnaire .radio_list + .textarea_box,
    #boxQuestionnaire .checklist + .textarea_box{
        margin-top: 8px;
    }
    #boxQuestionnaire .labelRadio{
        font-size: 10px;
        line-height: calc(16 / 10);
    }
    #boxQuestionnaire .txtRadio{
        padding-left: calc(13px + 5px);
    }
    #boxQuestionnaire .txtRadio::before{
        width: 13px;
        height: 13px;
        top: 1px;
    }
    #boxQuestionnaire .txtRadio::after{
        width: 9px;
        height: 9px;
        top: 3px;
        left: 2px;
    }
}
#boxQuestionnaire .hopelist{
    width: 100%;
}
#boxQuestionnaire .hopebox{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .hopebox + .hopebox{
    margin-top: 10px;
}
#boxQuestionnaire .inputbox{
    flex: 1;
}
#boxQuestionnaire .hopetxt{
    font-size: 16px;
    line-height: calc(24 / 16);
    padding-left: 15px;
    width: 70px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .hopetxt{
        font-size: 10px;
        line-height: calc(16 / 10);
        padding-left: 5px;
        width: 50px;
    }
}
#boxQuestionnaire .otherlist{
    width: 100%;
}
#boxQuestionnaire .otherbox{
    display: flex;
    align-items: center;
    width: 100%;
}
#boxQuestionnaire .otherbox + .otherbox{
    margin-top: 10px;
}
#boxQuestionnaire .othertitbox{
    width: 70px;
    text-align: right;
}
#boxQuestionnaire .othertit{
    font-size: 16px;
    line-height: calc(24 / 16);
    padding-right: 15px;
}
#boxQuestionnaire .otherinputbox{
    flex: 1;
}
#boxQuestionnaire .boxInner{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .othertxt{
    font-size: 16px;
    line-height: calc(24 / 16);
    padding-left: 15px;
    width: 70px;
}
#boxQuestionnaire .otherinputbox .inputbox{
    flex: 1;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .otherbox + .otherbox{
        margin-top: 8px;
    }
    #boxQuestionnaire .othertitbox{
        width: 50px;
    }
    #boxQuestionnaire .othertit{
        font-size: 10px;
        line-height: calc(16 / 10);
        padding-right: 5px;
    }
    #boxQuestionnaire .othertxt{
        font-size: 10px;
        line-height: calc(16 / 10);
        padding-left: 5px;
        width: 30px;
    }
}
/* agebox */
#boxQuestionnaire .agebox{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .agetxt{
    font-size: 16px;
    line-height: calc(24 / 16);
    padding-left: 15px;
    width: 70px;
}
#boxQuestionnaire .agebox .inputbox{
    flex: 1;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .agetxt{
        font-size: 10px;
        line-height: calc(16 / 10);
        padding-left: 5px;
        width: 30px;
    }
}

#boxQuestionnaire .checkItem:has(.family_box){
    display: flex;
    align-items: center;
}
#boxQuestionnaire .family_box{
    display: flex;
    align-items: center;
    padding-left: 15px;
}
#boxQuestionnaire .family_box .familytxt{
    font-size: 16px;
    line-height: calc(24 / 16);
    padding-left: 15px;
}
@media only screen and (min-width:768px){
    #boxQuestionnaire .family_box .inputbox{
        width: 150px;
    }
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .family_box .familytxt{
        font-size: 10px;
        line-height: calc(16 / 10);
        padding-left: 5px;
        width: 50px;
    }
    #boxQuestionnaire .family_box .inputbox{
        width: 100px;
    }
}
#boxQuestionnaire .fbox{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .fbox .inputbox{
    flex: 1;
}
#boxQuestionnaire .ftxt{
    font-size: 16px;
    line-height: calc(24 / 16);
    padding-left: 15px;
    width: 70px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .ftxt{
        font-size: 10px;
        line-height: calc(16 / 10);
        padding-left: 5px;
        width: 30px;
    }
}
#boxQuestionnaire .checkItem:has(.family_box.other_income_box) .labelCheck{
    width: 100px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .checkItem:has(.family_box.other_income_box) .labelCheck{
        width: 50px;
    }
}

#boxQuestionnaire .loanlist{
    width: 100%;
    margin-top: 15px;
}
#boxQuestionnaire .loanitem{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .loanitem + .loanitem{
    margin-top: 10px;
}
#boxQuestionnaire .loantitbox{
    width: 150px;
}
#boxQuestionnaire .loantit{
    font-size: 16px;
    line-height: calc(24 / 16);
    padding-right: 15px;
}
#boxQuestionnaire .inputArea{
    display: flex;
    width: calc(100% - 100px);
}
#boxQuestionnaire .fbox + .fbox{
    margin-left: 30px;
}
#boxQuestionnaire .ftit{
    font-size: 16px;
    line-height: calc(24 / 16);
    padding-right: 15px;
    width: 50px;
}
#boxQuestionnaire .inputArea .fbox .inputbox{
    flex: 1;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .loanitem{
        display: block;
    }
    #boxQuestionnaire .loanitem + .loanitem{
        margin-top: 8px;
    }
    #boxQuestionnaire .loantitbox{
        width: 100%;
    }
    #boxQuestionnaire .loantit{
        font-size: 10px;
        line-height: calc(16 / 10);
        padding-right: 5px;
    }
    #boxQuestionnaire .inputArea{
        width: 100%;
        padding-left: 0;
        margin-top: 8px;
        display: block;
    }
    #boxQuestionnaire .fbox + .fbox{
        margin-left: 0px;
        margin-top: 8px;
    }
    #boxQuestionnaire .ftit{
        font-size: 10px;
        line-height: calc(16 / 10);
        padding-right: 5px;
        width: 30px;
    }
    #boxQuestionnaire .inputArea .fbox .inputbox{
        max-width: 100px;
    }
}

/* secCpbox */
.secCpbox{
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    padding-top: 45px;
}
.secCpbox .cpTitbox{
    position: absolute;
    display: flex;
    align-items: center;
    left: calc(50% - 256px);
    top: 0;
    width: 512px;
    height: 85px;
    padding-bottom: 5px;
    color: #fff;
}
.secCpbox.lazyloaded .cpTitbox{
    background: url(../img/common/imgCpbg.png) center top no-repeat;
    background-size: 100% auto;
}
.secCpbox .cpTitbox .titIn{
    display: inline-block;
    text-align: center;
    width: 100%;
}
.secCpbox .cpTitbox .cptit{
    font-size: 28px;
    line-height: calc(36 / 28);
    font-weight: bold;
}
.secCpbox .cpInner{
    background-color: #fff;
    border: 1px solid;
    border-color: #12a4f0;
    padding: calc(30px + 45px) 30px 30px;
}
.secCpbox .cpTxtbox{
    text-align: left;
}
.secCpbox .cpTxtbox .cptxt{
    font-size: 16px;
    line-height: calc(35 / 16);
}
.secCpbox .cpTxtbox .f_red{
    color: #c22121;
}
@media only screen and (max-width:767px){
    /* secCpbox */
    .secCpbox{
        margin-top: 30px;
        padding-top: 25px;
    }
    .secCpbox .cpTitbox{
        left: calc(50% - 135px);
        width:270px;
        height: 45px;
        padding-bottom: 3px;
    }
    .secCpbox .cpTitbox .cptit{
        font-size: 16px;
        line-height: calc(22 / 16);
    }
    .secCpbox .cpInner{
        padding: calc(10px + 25px) 15px 20px;
    }
    .secCpbox .cpTxtbox .cptxt{
        font-size: 13px;
        line-height: calc(22 / 13);
    }
}
/* cp_checkArea */
.secFormTable .cp_checkArea{
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
.secFormTable .cp_checkArea .checktxt{
    font-size: 16px;
    line-height: calc(24 / 16);
}
.secFormTable .cp_checkbox{
    max-width: 300px;
    margin: 0 auto;
    margin-top: 15px;
}
.secFormTable .cp_checkbox .labelCheck{
    width: 100%;
    height: 60px;
    background-color: #12a4f0;
    border-radius: 60px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media only screen and (max-width:767px){
    .secFormTable .cp_checkArea{
        margin-top: 15px;
    }
    .secFormTable .cp_checkArea .checktxt{
        font-size: 13px;
        line-height: calc(22 / 13);
    }
    .secFormTable .cp_checkbox{
        max-width: 200px;
        margin-top: 10px;
    }
    .secFormTable .cp_checkbox .labelCheck{
        height: 40px;
        border-radius: 40px;
    }
}
/* ▼co */
@media only screen and (max-width:767px){
    .secFormQuestionnaire.co .btnQuestionnaire{
        min-height: 60px;
    }
}