@charset "utf-8";
.secFormQuestionnaire{
    margin-top: 50px;
    width: 100%;
    padding-bottom: 50px;
}
.secFormQuestionnaire:has(.btnQuestionnaire.on){
    padding-bottom: 0;
}
.secFormQuestionnaire + table{
    border-top: 1px solid #dcdcdc;
}
#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: 20px;
    line-height: calc(30 / 20);
}
.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){
    .secFormQuestionnaire{
        margin-top: 30px;
        padding-bottom: 30px;
    }
    .secFormQuestionnaire:has(.btnQuestionnaire.on){
        padding-bottom: 0;
    }
    #btnQuestionnaire,
    .secFormQuestionnaire.co .btnQuestionnaire{
        min-height: 100px;
        height: auto;
        padding: 15px 10px;
        font-size: 20px;
        line-height: calc(25 / 20);
    }
    #btnQuestionnaire .topMin{
        font-size: 14px;
        line-height: calc(24 / 14);
    }
    .secFormQuestionnaire .btnQuestionnaire .icon{
        margin-top: 5px;
    }
    .secFormQuestionnaire .btnQuestionnaire .icon::before{
        right: -24px;
        width: 13px;
        height: 13px;
    }
    .secFormQuestionnaire .btnQuestionnaire .txtQuestionnaireOn.icon::before{
        right: -24px;
    }
}
#boxQuestionnaire table tr:last-child{
    border-bottom:none;
}
.secFormQuestionnaire.co #boxQuestionnaire table tr:last-child{
    border-bottom: 1px solid #dcdcdc;
}
#boxQuestionnaire .h100{height: 100px;}
#boxQuestionnaire .w100p{width: 100%;}
@media only screen and (min-width:768px){
    .secFormTable .boxQuestionnaire th{
        padding-right: 20px;
    }
    .secFormTable .boxQuestionnaire th,
    .secFormTable tr.tr_check th,
    .secFormTable tr.tr_radio th{
        padding-top: 30px;
        padding-bottom: 30px;
    }
}
#boxQuestionnaire .checklist{
    width: 100%;
}
#boxQuestionnaire .checkItem{
    width: 100%;
    display: block;
}
#boxQuestionnaire .checkItem + .checkItem{
    margin-top: 10px;
}
#boxQuestionnaire .labelCheck{
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin: 0;
}
#boxQuestionnaire .labelCheck input[type="checkbox"]{
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    visibility: hidden;
}
#boxQuestionnaire .txtCheck{
    display: inline-block;
    font-size: 15px;
    line-height: calc(22 / 15);
    padding: 0;
    margin: 0;
    padding-left: calc(22px + 13px);
}
#boxQuestionnaire .txtCheck::after{
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid;
    border-color: #dcdcdc;
    top: 0;
    left: 0;
}
#boxQuestionnaire .txtCheck::before{
    content: "";
    position: absolute;
    width: 14px;
    height: 7px;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(-45deg);
    top: 6px;
    left: 4px;
    z-index: 3;
}
#boxQuestionnaire .labelCheck input[type="checkbox"]:checked + .txtCheck::after{
    background-color: #12a4f0;
    border-color: #12a4f0;
}
#boxQuestionnaire .textarea_box{
    width: 100%;
}
#boxQuestionnaire .checklist + .textarea_box{
    margin-top: 10px;
}
#boxQuestionnaire textarea.inputRequired{
    background: #fff8f8;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .checkItem + .checkItem{
        margin-top: 8px;
    }
    #boxQuestionnaire .txtCheck{
        font-size: 14px;
        line-height: calc(22 / 14);
        padding-left: calc(22px + 14px);
    }
}
#boxQuestionnaire .radio_box{
    width: 100%;
}
#boxQuestionnaire .radio_list{
    width: 100%;
}
#boxQuestionnaire .radio_item{
    width: 100%;
    display: block;
}
#boxQuestionnaire .radio_item + .radio_item{
    margin-top: 10px;
}
#boxQuestionnaire .labelRadio{
    display: inline-block;
    position: relative;
    height: auto;
    cursor: pointer;
}
#boxQuestionnaire .labelRadio input[type="radio"]{
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    visibility: hidden;
}
#boxQuestionnaire .txtRadio{
    display: inline-block;
    font-size: 15px;
    line-height: calc(22 / 15);
    padding: 0;
    margin: 0;
    padding-left: calc(22px + 13px);
}
#boxQuestionnaire .txtRadio::after,
#boxQuestionnaire .txtRadio::before{
    content: "";
    position: absolute;
}
#boxQuestionnaire .txtRadio::after{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid;
    border-color: #dcdcdc;
    top: 0;
    left: 0;
}
#boxQuestionnaire .txtRadio::before{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #12a4f0;
    top: 3px;
    left: 3px;
    z-index: 3;
    opacity: 0;
}
#boxQuestionnaire .labelRadio input[type="radio"]:checked + .txtRadio::after{
    border-color: #12a4f0;
}
#boxQuestionnaire .labelRadio input[type="radio"]:checked + .txtRadio::before{
    opacity: 1;
}
#boxQuestionnaire .textarea_box{
    width: 100%;
}
#boxQuestionnaire .radio_list + .textarea_box{
    margin-top: 10px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .radio_item + .radio_item{
        margin-top: 8px;
    }
    #boxQuestionnaire .txtRadio{
        font-size: 14px;
        line-height: calc(22 / 14);
        padding-left: calc(22px + 14px);
    }
}

/* ご入居希望時期 */
#boxQuestionnaire .hopelist{
    display: block;
}
#boxQuestionnaire .hopebox{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .hopebox + .hopebox{
    margin-top: 10px;
}
#boxQuestionnaire .hopetxt{
    font-size: 15px;
    line-height: calc(22 / 15);
    margin-left: 10px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .hopebox .inputbox{
        max-width: 240px;
    }
    #boxQuestionnaire .hopetxt{
        flex: 1;
        font-size: 14px;
        line-height: calc(22 / 14);
        margin-left: 8px;
    }
}
/* その他 */
#boxQuestionnaire .otherlist{
    width: 100%;
}
#boxQuestionnaire .otherbox{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .otherbox + .otherbox{
    margin-top: 10px;
}
#boxQuestionnaire .othertitbox{
    width: 70px;
    padding-right: 15px;
    text-align: right;
}
#boxQuestionnaire .othertit{
    font-size: 15px;
    line-height: calc(22 / 15);
    white-space: nowrap;
}
#boxQuestionnaire .otherinputbox{
    flex: 1;
}
#boxQuestionnaire .boxInner{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .othertxt{
    font-size: 15px;
    line-height: calc(22 / 15);
    margin-left: 10px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .othertitbox{
        width: 60px;
    }
    #boxQuestionnaire .othertit{
        font-size: 14px;
        line-height: calc(22 / 14);
    }
    #boxQuestionnaire .othertxt{
        font-size: 14px;
        line-height: calc(22 / 14);
    }
    #boxQuestionnaire .otherbox .inputbox{
        max-width: 100px;
    }
}
/* ご年齢 */
#boxQuestionnaire .agebox{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .agetxt{
    font-size: 15px;
    line-height: calc(22 / 15);
    margin-left: 10px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .agetxt{
        font-size: 14px;
        line-height: calc(22 / 14);
        margin-left: 8px;
    }
    #boxQuestionnaire .agebox .inputbox{
        max-width: 100px;
    }
}
/* 家族構成 */
#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: 15px;
    line-height: calc(22 / 15);
    margin-left: 10px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .family_box{
        padding-left: 10px;
    }
    #boxQuestionnaire .family_box .familytxt{
        font-size: 14px;
        line-height: calc(22 / 14);
        margin-left: 8px;
    }
    #boxQuestionnaire .family_box .inputbox{
        max-width: 100px;
    }
}
/* 勤続年数 */
#boxQuestionnaire .fbox{
    display: flex;
    align-items: center;
}
#boxQuestionnaire .ftxt{
    font-size: 15px;
    line-height: calc(22 / 15);
    margin-left: 10px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .fbox .inputbox{
        max-width: 100px;
    }
    #boxQuestionnaire .ftxt{
        font-size: 14px;
        line-height: calc(22 / 14);
        margin-left: 8px;
    }
}
/* その他、ご年収がある方 */
#boxQuestionnaire .checkItem:has(.other_income_box){
    display: flex;
    align-items: center;
}
#boxQuestionnaire .checkItem:has(.other_income_box) .txtCheck{
    width: 100px;
}
#boxQuestionnaire .other_income_box{
    display: flex;
    align-items: center;
    padding-left: 15px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .checkItem:has(.other_income_box) .txtCheck{
        width: 100px;
    }
}

/* その他ローン */
#boxQuestionnaire .loanlist{
    width: 100%;
    margin-top: 20px;
}
#boxQuestionnaire .loanitem{
    width: 100%;
    display: flex;
    align-items: center;
}
#boxQuestionnaire .loanitem + .loanitem{
    margin-top: 10px;
}
#boxQuestionnaire .loantitbox{
    width: 150px;
}
#boxQuestionnaire .loantit{
    font-size: 15px;
    line-height: calc(22 / 15);
    white-space: nowrap;
    text-align: left;
}
#boxQuestionnaire .inputArea{
    display: flex;
    width: calc(100% - 150px);
    padding-left: 15px;
}
#boxQuestionnaire .ftit{
    font-size: 15px;
    line-height: calc(22 / 15);
    white-space: nowrap;
    text-align: left;
    margin-right: 10px;
}
#boxQuestionnaire .inputArea .fbox + .fbox{
    margin-left: 30px;
}
@media only screen and (max-width:767px){
    #boxQuestionnaire .loanlist{
        margin-top: 15px;
    }
    #boxQuestionnaire .loanitem{
        display: block;
    }
    #boxQuestionnaire .loantitbox{
        width: 100%;
    }
    #boxQuestionnaire .inputArea{
        width: 100%;
        padding-left: 0;
        display: block;
        margin-top: 10px;
    }
    #boxQuestionnaire .inputArea .fbox + .fbox{
        margin-left: 0px;
        margin-top: 10px;
    }
    #boxQuestionnaire .ftxt{
        font-size: 14px;
        line-height: calc(22 / 14);
        margin-left: 8px;
    }
    #boxQuestionnaire .inputArea .fbox .inputbox{
        max-width: 150px;
    }
}
/* ご来場特典の進呈条件 */
@media only screen and (min-width:768px){
    .secFormTable tr.tr_checkbox th{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .secFormTable .cp_checkbox{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        align-items: center;
    }
}
/* ▼アンケート外*/
.secFormTable .cp_checkbox .labelCheck{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 45px;
    border-radius: 45px;
    background-color: #12a4f0;
    margin-left: 0;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
.secFormTable .cp_checkbox .labelCheck input[type="checkbox"]{
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    visibility: hidden;
}
.secFormTable .cp_checkbox .labelCheck .txtCheck{
    display: inline-block;
    font-size: 15px;
    line-height: calc(22 / 15);
    padding: 0;
    margin: 0;
    padding-left: calc(22px + 13px);
}
.secFormTable .cp_checkbox .labelCheck .txtCheck::after{
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid;
    border-color: #dcdcdc;
    top: 0;
    left: 0;
}
.secFormTable .cp_checkbox .labelCheck .txtCheck::before{
    content: "";
    position: absolute;
    width: 14px;
    height: 7px;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(-45deg);
    top: 6px;
    left: 4px;
    z-index: 3;
}
.secFormTable .cp_checkbox .labelCheck input[type="checkbox"]:checked + .txtCheck::after{
    border-color: #12a4f0;
}
.secFormTable .cp_checkbox .labelCheck input[type="checkbox"]:checked + .txtCheck::before{
    border-color: #12a4f0;
}
.secFormTable:has(.tabBox){
    margin-top: 50px;
    padding-top: 44px;
}
/* secCpbox */
.secCpbox{
    max-width: 1100px;
    margin: 0 auto;
    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(60px + 45px) 85px 60px;
}
.secCpbox .cpTxtbox{
    text-align: left;
}
.secCpbox .cpTxtbox .cptxt{
    font-size: 16px;
    line-height: calc(35 / 16);
}
.secCpbox .cpTxtbox .f_red{
    color: #9f0209;
}
@media only screen and (max-width:767px){
    .secFormTable:has(.tabBox){
        margin-top: 20px;
        padding-top: 40px;
    }
    /* secCpbox */
    .secCpbox{
        /* width: 92%; */
        width: 100%;
        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);
    }
    .secCpbox + .tabBox{
        width: 92%;
    }
    /* .secFormTable:has(.secCpbox) .boxTable{
        padding-top: 0;
    } */
}
/* ▼co */
.secFormQuestionnaire.co,
.secFormQuestionnaire.or{
    padding-bottom: 0;
}
@media only screen and (min-width:768px){
    .secContact.co .secFormTable .boxQuestionnaire tr{
        align-items: center;
    }
    .secContact.co .secFormTable .boxQuestionnaire th{
        padding: 30px 0;
    }
    .secContact.co .secFormTable .boxQuestionnaire td{
        vertical-align: middle;
        padding-left: 30px;
    }
}
.secFormTable table + .secCpbox{
    margin-top: 50px;
}
@media only screen and (max-width:767px){
    .secFormTable table + .secCpbox{
        margin-top: 30px;
    }
}