/*==============================
    共通（ラッパー・メイン）
==============================*/
.wrapper600{
    width: 600px;
}
@media only screen and (max-width:767px){
    .wrapper600{
        width: 100%;
        max-width: none;
    }
    .wrapperSp{
        width: var(--wrapperSpWidth);
        margin: 0 auto;
    }
}

#main{
    padding-top: 30px;
}
@media only screen and (max-width:767px){
    #main{
        padding-top: 17px;
    }
}

/*==============================
    ヘッダー
==============================*/
#headerLoan{
    background: #fff;
    border-bottom: 1px solid #e5e6e8;
}
#headerLoan .headerInner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 19px 30px;
}
#headerLoan .logo{
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    font-size: 12px;
    font-weight: normal;
}
#headerLoan .logo a{
    display: block;
    flex-shrink: 0;
}
#headerLoan .logo img{
    display: block;
    width: 207px;
    height: auto;
}
#headerLoan .txtPage{
    position: relative;
    padding-left: 20px;
    color: #2b3339;
    font-size: 12px;
}
#headerLoan .txtPage::before{
    content: "";
    width: 1px;
    height: 22px;
    background: #e5e6e8;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
#headerLoan .boxMember{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
#headerLoan .linkMember{
    display: block;
    padding-top: 30px;
    color: inherit;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
}
#headerLoan .itemMember{
    background: url(../img/common/imgHeaderMember02.gif) center top / 22px auto no-repeat;
}
@media only screen and (max-width:767px){
    #headerLoan .headerInner{
        padding: 16px 15px 16px 20px;
    }
    #headerLoan .logo{
        gap: 10px;
    }
    #headerLoan .logo img{
        width: 113px;
    }
    #headerLoan .txtPage{
        padding-left: 10px;
        font-size: 11px;
    }
    #headerLoan .txtPage::before{
        height: 16px;
    }
    #headerLoan .itemMember{
        background: none;
    }
    #headerLoan .linkMember{
        display: flex;
        align-items: center;
        gap: 6px;
        padding-top: 0;
        font-size: 10px;
        text-align: left;
    }
    #headerLoan .linkMember::before{
        content: "";
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        background: url(../img/common/imgHeaderMember02.gif) center / contain no-repeat;
    }
}
@media only screen and (max-width:350px){
    #headerLoan .logo img{
        width: 100px;
    }
}

/*==============================
    フッター
==============================*/
#footerLoan{
    background: #fff;
    border-top: 1px solid #e5e6e8;
    margin-top: 100px;
}
#footerLoan .footerInner{
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-sizing: border-box;
    margin: 0 auto;
}
#footerLoan .footerText{
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #525c63;
}
@media only screen and (max-width:767px){
    #footerLoan{
        margin-top: 60px;
    }
    #footerLoan .footerInner{
        height: 200px;
        gap: 20px;
    }
    #footerLoan .footerText{
        font-size: 11px;
        letter-spacing: 0.02em;
    }
}

/*==============================
    住宅ローン診断（共通）
==============================*/
.secLoan{
    --loanBlue: #006ee4;
    --loanBlueDark: #0260db;
    --loanLightBlue: #00b4ff;
    --loanOrange: #ff5a00;
    --loanOrangeLight: #ff9000;
    --loanOrangeDark: #e65000;
    --loanGray: #f2f3f4;
    --loanBorder: #e5e6e8;
    --loanText: #2b3339;
    --loanMuted: #525c63;
    --loanRadio: #b3b6ba;
    margin: 0 auto;
    color: var(--loanText);
}
.secLoan .imgTop{
    margin-bottom: 50px;
}
@media only screen and (max-width:767px){
    /* .secLoan{
        margin-bottom: 40px;
    } */
    .secLoan .imgTop{
        margin-bottom: 30px;
    }
}

/*==============================
    対象物件
==============================*/
.loanEstateWrap{
    margin-bottom: 30px;
}
.loanEstateHead{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px;
}
.loanEstateHead::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--loanBorder);
}
.loanField{
    margin-bottom: 30px;
    scroll-margin-bottom: 140px;
}
[data-loan-item].isLoanReveal{
    animation: loanRevealIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes loanRevealIn{
    from{
        opacity: 0;
        transform: translateY(28px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
.loanEstateBadge{
    width: 120px;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 10px 5px;
    border-radius: 999px;
    background: #2b3339;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-align: center;
}
.loanEstate{
    display: flex;
    gap: 20px;
    box-sizing: border-box;
    padding: 20px 40px 20px 20px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(43, 51, 57, 0.12);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
}
.loanEstateImg{
    flex-shrink: 0;
    width: 80px;
    height: 53px;
}
.loanEstateBody{
    flex: 1;
    min-width: 0;
}
.loanEstateNo{
    margin: 0 0 9px;
    font-size: 12px;
    color: var(--loanText);
}
.loanEstateNoNum{
    color: var(--loanBlue);
    text-decoration: underline;
}
.loanEstateName{
    margin: 0 0 7px;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    font-weight: bold;
}
.loanEstatePrice{
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}
.loanEstatePriceUnit{
    font-size: 12px;
}
.loanEstateArrow{
    flex-shrink: 0;
    width: 12px;
    height: 6px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (max-width:767px){
    .loanEstateWrap{
        margin-bottom: 20px;
    }
    .loanEstateHead{
        margin-bottom: 20px;
    }
    .loanEstateBadge{
        width: 115px;
        padding: 10px 5px;
        font-size: 12px;
    }
    .loanEstate{
        gap: 12px;
        padding: 20px 35px 20px 20px;
        border-radius: 10px;
    }
    .loanEstateImg{
        width: 60px;
        height: 40px;
    }
    .loanEstateNo{
        margin-bottom: 4px;
        font-size: 11px;
    }
    .loanEstateName{
        margin-bottom: 5px;
        font-size: 16px;
        line-height: 1.35;
    }
    .loanEstatePrice{
        font-size: 16px;
    }
    .loanEstatePriceUnit{
        font-size: 12px;
    }
}

/*==============================
    STEP
==============================*/
.loanStep{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 32px;
}
.loanStep::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--loanBorder);
}
.loanStepBadge{
    width: 120px;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 10px 5px;
    border-radius: 999px;
    background: var(--loanBlue);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
.loanStepBadgeWide{
    width: 140px;
}
.loanStepBadgeOrange{
    background: var(--loanOrange);
}
@media only screen and (max-width:767px){
    .loanStep{
        margin-bottom: 30px;
    }
    .loanStepBadge{
        width: auto;
        padding: 10px 10px;
        font-size: 12px;
        letter-spacing: 0;
    }
    .loanStepBadgeWide{
        width: 130px;
    }
}

/*==============================
    結果ページ：入力変更ボタン
==============================*/
.loanEditNav{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 20px;
    margin: 22px 0 60px;
}
.loanEditBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 170px;
    padding: 20px 30px 19px;
    border: 1px solid var(--loanBlue);
    border-radius: 999px;
    background: #fff;
    color: var(--loanBlue);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
}
@media only screen and (max-width:767px){
    .loanEditNav{
        flex-direction: column;
        gap: 15px;
        margin: 25px 0 60px;
    }
    .loanEditBtn{
        width: 100%;
        max-width: 165px;
        min-width: 0;
        padding: 15px 5px 14px;
        font-size: 12px;
    }
}

/*==============================
    チャット吹き出し
==============================*/
.loanChat{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 30px;
}
.loanIcon{
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
.loanBubble{
    flex: 1;
    margin: 0;
    padding: 25px 30px;
    background: var(--loanGray);
    border-radius: 0 8px 8px 8px;
    font-size: 13px;
    line-height: calc(23 / 13);
    letter-spacing: 0.02em;
    font-weight: bold;
}
.loanBubbleMin{
    padding: 15px 30px;
}
@media only screen and (max-width:767px){
    .loanChat{
        gap: 11px;
        margin-bottom: 30px;
    }
    .loanBubble{
        padding: 16px 15px;
        font-size: 14px;
        line-height: calc(20 / 13);
    }
    .loanBubbleMin{
        padding: 16px 15px;
    }
    .loanBubbleNote{
        display: inline-block;
        margin-top: 5px;
    }
}
@media only screen and (max-width:330px){
    .loanBubble{
        font-size: 12px;
    }
}

/*==============================
    入力欄
==============================*/
.loanBlock{
    margin-bottom: 0;
    scroll-margin-bottom: 140px;
}
.loanBlock.loanBlockMore{
    margin-top: 50px;
}
.loanLabel{
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: bold;
}
.loanLabelSub{
    margin-left: 10px;
    font-size: 11px;
    font-weight: normal;
    color: var(--loanMuted);
}
.loanInputRow{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
}
.loanInput{
    box-sizing: border-box;
    width: 200px;
    max-width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--loanBorder);
    border-radius: 5px;
    background: #fff;
    font-size: 16px;
    line-height: calc(20 / 16);
    color: var(--loanText);
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    order: 1;
}
.loanInput:focus{
    border-color: var(--loanBlue);
}
select.loanInput{
    cursor: pointer;
}
.loanInput.error{
    border-color: #c62828;
    background-color: #fff0f0;
}
.loanInputRow .loanUnit{
    order: 2;
}
.loanInputRow .formError.loanFormError{
    order: 3;
    flex: 0 0 100%;
}
/* validationEngine インラインエラー（オカネコ風） */
.secLoan .formError.loanFormError{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 8px 0 0 !important;
    display: block;
    width: 100%;
    cursor: default;
    z-index: 1;
}
.secLoan .formError.loanFormError .formErrorContent{
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 20px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: url(../img/common/iconError.gif) left 2px / 14px no-repeat;
    color: #c62828;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
.secLoan .formError.loanFormError .formErrorArrow{
    display: none;
}
.loanUnit{
    flex-shrink: 0;
    font-size: 14px;
    font-weight: bold;
}
.loanNote{
    margin: 13px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--loanMuted);
}
@media only screen and (max-width:767px){
    .loanBlock {
        margin-bottom: 0;
    }
    .loanBlock.loanBlockMore{
        margin-top: 40px;
    }
    .loanField{
        margin-bottom: 30px;
    }
    .loanLabelSub{
        font-size: 11px;
    }
    .loanInput{
        width: 200px;
        height: 50px;
        font-size: 16px;
    }
}

/*==============================
    配偶者ラジオ
==============================*/
.loanRadioGroup{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.loanRadioGroup .loanRadio{
    order: 1;
}
.loanRadioGroup .formError.loanFormError{
    order: 2;
    flex: 0 0 100%;
}
.loanRadio{
    position: relative;
    flex: 1;
    cursor: pointer;
}
.loanRadio input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.loanRadioBtn{
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 15px 15px;
    border: 1px solid var(--loanBorder);
    border-radius: 5px;
    background: #fff;
    color: var(--loanText);
    font-size: 16px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.loanRadioBtn::before{
    content: "";
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 2px solid var(--loanRadio);
    border-radius: 50%;
    background: #fff;
}
.loanRadio input:checked + .loanRadioBtn{
    border-color: var(--loanBlue);
    background: var(--loanBlue);
    color: #fff;
}
.loanRadio input:checked + .loanRadioBtn::before{
    border-color: #fff;
    background: radial-gradient(circle, #fff 0 35%, var(--loanBlue) 50% 100%);
}
.loanRadio input:focus-visible + .loanRadioBtn{
    outline: 2px solid var(--loanBlue);
    outline-offset: 2px;
}
.loanRadio input.error + .loanRadioBtn{
    border-color: #c62828;
    background-color: #fff0f0;
}
.loanSpouseDetail{
    margin-top: 0;
}
.loanRadioGroupGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.loanRadioGroupGrid .formError.loanFormError{
    grid-column: 1 / -1;
}
.loanLoanAmount{
    margin-top: 0;
}
@media only screen and (max-width:767px){
    .loanRadioGroup{
        gap: 13px;
    }
    .loanRadioGroupGrid{
        gap: 13px;
    }
    .loanRadioBtn{
        min-height: 50px;
        padding: 15px 15px;
        font-size: 14px;
    }
    .loanLoanAmount{
        margin-top: 0;
    }
}

/*==============================
    進行度メーター + フッターボタン（追従）
==============================*/
.loanFixedBar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: #fff;
    /* box-shadow: 0 -2px 12px rgba(43, 51, 57, 0.1); */
}
.loanProgress{
    width: 500px;
    height: 6px;
    margin: 18px auto 0;
    background: var(--loanGray);
    overflow: hidden;
}
.loanProgressBar{
    width: 0%;
    height: 100%;
    background: var(--loanBlue) linear-gradient(to right, var(--loanLightBlue) 0%, var(--loanBlue) 100%);
    transition: width 0.3s ease;
}
.loanProgressBarOrange{
    background: linear-gradient(to right, var(--loanOrangeLight) 0%, var(--loanOrange) 100%);
}
.loanFooter{
    padding: 15px 20px;
    background: var(--loanGray);
    margin-top: 15px;
}
.loanBtn{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 15px 13px;
    border: none;
    border-radius: 6px;
    background: #c5c8cc;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: not-allowed;
    transition: background 0.2s, opacity 0.2s;
}
.loanBtn:not(:disabled){
    background: var(--loanBlue);
    cursor: pointer;
}
.loanBtn:not(:disabled):hover{
    background: var(--loanBlueDark);
}
.loanBtnOrange:not(:disabled){
    background: var(--loanOrange);
}
.loanBtnOrange:not(:disabled):hover{
    background: var(--loanOrangeDark);
}
#loanForm{
    padding-bottom: 120px;
}
@media only screen and (max-width:767px){
    .loanProgress{
        width: calc(100% - 40px);
        height: 6px;
        margin: 14px auto 0;
    }
    .loanFooter{
        padding: 15px 16px;
        margin-top: 12px;
    }
    .loanBtn{
        font-size: 14px;
        padding: 14px 10px 13px;
    }
    #loanForm{
        padding-bottom: 110px;
    }
}

/*==============================
    結果ページ タブ
==============================*/
.loanResultTab{
    display: flex;
    gap: 20px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}
.loanResultTabItem{
    flex: 1;
    min-width: 0;
}
.loanResultTabLabel,
.loanResultTabLink{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 19px 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: 0.02em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
.loanResultTabLabel{
    background: var(--loanBlue);
    color: #fff;
}
.loanResultTabLabel.isOrange{
    background: var(--loanOrange);
}
.loanResultTabLink{
    background: var(--loanGray);
    color: var(--loanBlue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media only screen and (max-width:767px){
    .loanResultTab{
        gap: 13px;
        margin-bottom: 16px;
    }
    .loanResultTabLabel,
    .loanResultTabLink{
        min-height: 40px;
        padding: 14px 8px 13px;
        font-size: 14px;
        letter-spacing: 0.02em;
    }
}

/*==============================
    診断結果
==============================*/
.loanResult{
    --loanResultBg: #e0efff;
    --loanResultTeal: #03b2b5;
    /* margin-bottom: 70px; */
}
.loanResultHead,
.loanNextHead{
    position: relative;
    margin: 0 0 50px;
    padding: 39px 20px 49px;
    background: var(--loanResultBg, #e0efff);
    text-align: center;
}
.loanResultHead::after,
.loanNextHead::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 15px 0;
    border-color: var(--loanResultBg, #e8f4ff) transparent transparent;
    transform: translateX(-50%);
}
.loanResultBadge,
.loanNextBadge{
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 15px;
    padding: 10px 17px 9px;
    border-radius: 999px;
    background: var(--loanBadgeBg, var(--loanBlue));
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}
.loanResultTitle,
.loanNextTitle{
    margin: 0;
    color: var(--loanText);
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.loanResultCard,
.loanNextCard{
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 36px 30px 30px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(43, 51, 57, 0.12);
    text-align: center;
}
.loanNextCard{
    padding: 44px 30px 45px;
    margin: 0;
}
.loanResultLabel{
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.loanResultAmount{
    margin: 0 0 18px;
    color: var(--loanResultTeal);
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.loanResultAmount.isGreen{
    color: #00bd61;
}
.loanResultAmountUnit{
    margin-left: 4px;
    font-size: 22px;
}
.loanResultCalc{
    margin: 0 0 15px;
    color: var(--loanMuted);
    font-size: 12px;
}
.loanResultImg{
    display: block;
    width: 179px;
    height: auto;
    margin: 0 auto -100px;
}
.loanResultImg2{
    width: 222px;
}
.loanResultNote{
    margin-top: 84px;
    color: var(--loanMuted);
    font-size: 11px;
    line-height: calc(20 / 11);
    padding: 0 20px;
}

/* 物件ページ 購入可能圏内カード */
.loanResultCardPurchase{
    background: #e5f7f7;
    padding: 40px 10px 91px;
    margin-bottom: 195px;
}
.loanResultPurchaseIcon{
    display: block;
    width: 55px;
    height: 55px;
    margin: 0 auto 20px;
    border: 7px solid var(--loanResultTeal, #03b2b5);
    border-radius: 50%;
    box-sizing: border-box;
}
.loanResultPurchaseTitle{
    margin: 0 0 15px;
    color: var(--loanResultTeal, #03b2b5);
    font-size: 24px;
    letter-spacing: 0.02em;
    font-weight: bold;
}
.loanResultPurchaseText{
    color: var(--loanText);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: calc(24 / 12);
}
.loanResultPurchaseDiff{
    margin: 0 0 14px;
    color: var(--loanText);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: calc(24 / 12);
}
.loanResultPurchaseDiffMark{
    display: inline;
    padding: 0;
    background: #ffeb89;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.loanResultCardPurchase .loanResultImg{
    position: relative;
    z-index: 1;
    margin: 0px auto -170px;
}

/* 物件ページ 購入不可（予算オーバー） */
.loanResultCardPurchase.isOverBudget{
    background: #fff4f0;
}
.loanResultCardPurchase.isOverBudget .loanResultPurchaseIcon{
    width: 66px;
    height: 56px;
    border: none;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 48'%3E%3Cpath fill='none' stroke='%23ff5a00' stroke-width='5' stroke-linejoin='miter' stroke-miterlimit='10' d='M27.5 8 L46 40 L9 40 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.loanResultCardPurchase.isOverBudget .loanResultPurchaseTitle{
    color: #ff3c00;
}
.loanResultSummaryItem.isDiff.isOverBudget{
    background: #fff4f0;
}
.loanResultSummaryItem.isDiff.isOverBudget .loanResultSummaryLabel,
.loanResultSummaryItem.isDiff.isOverBudget .loanResultSummaryValue{
    color: #ff3c00;
}

/* 資金計画の見直しポイント */
.loanAdvice{
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 22px 25px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(43, 51, 57, 0.1);
    text-align: left;
}
.loanAdviceHead{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}
.loanAdviceIcon{
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
.loanAdviceTitle{
    margin: 0;
    color: var(--loanOrange);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.loanAdviceTitle2{
    color: #87522d;
}
.loanAdviceText{
    margin: 0;
    color: var(--loanText);
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: calc(23 / 13);
}

/* 物件ページ 借入可能額サマリー */
.loanResultSummary{
    position: relative;
    z-index: 0;
    margin-top: -86px;
    padding-bottom: 20px;
}
.loanResultSummaryList{
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.loanResultSummaryItem{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 22px 25px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(43, 51, 57, 0.1);
}
.loanResultSummaryItem:last-child{
    margin-bottom: 0;
}
.loanResultSummaryItem.isDiff{
    background: #e5f7f7;
}
.loanResultSummaryItem.isAffordable{
    background: #fffbea;
}
.loanResultSummaryItem.isAffordable .loanResultSummaryLabel,
.loanResultSummaryItem.isAffordable .loanResultSummaryValue{
    color: #00bd61;
}
.loanResultSummaryLabel{
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.loanResultSummaryItem.isDiff .loanResultSummaryLabel{
    color: var(--loanResultTeal, #03b2b5);
}
.loanResultSummaryValue{
    margin: 0;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-align: right;
}
.loanResultSummaryItem.isDiff .loanResultSummaryValue{
    color: var(--loanResultTeal, #03b2b5);
}
.loanResultSummaryCalc{
    margin: 0 0 6px;
    color: var(--loanMuted);
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: calc(20 / 11);
}
.loanResultSummary .loanResultNote{
    margin-top: 0;
    padding: 0 20px;
}

/* 詳細診断結果（条件入力後） */
.loanResult.isAccurate{
    --loanResultBg: #ffeee5;
    --loanBadgeBg: var(--loanOrange);
}
.loanResultCard:not(.loanResultCardPurchase) + .loanResultSummary{
    margin-top: 110px;
}

.loanNext{
    --loanResultBg: #e8f4ff;
    margin-bottom: 50px;
}
.loanNext .loanChat{
    margin-bottom: 40px;
}
.loanNextBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 24px 20px 23px;
    border-radius: 6px;
    background: #ff5a00;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: opacity 0.2s, background 0.2s;
}
.loanNextBtn::after{
    content: "";
    display: inline-block;
    width: 12px;
    height: 6px;
    background: url(../img/loan/imgArrowWhite.png) center / contain no-repeat;
}
.loanNextNote{
    margin: 14px 0 0;
    color: var(--loanMuted);
    font-size: 12px;
    font-weight: bold;
}
.loanNextMore{
    margin: 30px 0 0;
    text-align: center;
    color: var(--loanText);
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: calc(24 / 13);
    font-weight: bold;
}
.loanNextMoreLink{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--loanBlue);
    text-decoration: underline;
}
.loanNextMoreLink::after{
    content: "";
    display: inline-block;
    width: 12px;
    height: 6px;
    background: url(../img/loan/imgArrow.png) center / contain no-repeat;
    filter: brightness(0) saturate(100%) invert(28%) sepia(98%) saturate(2476%) hue-rotate(200deg) brightness(96%) contrast(101%);
}
@media only screen and (max-width:767px){
    .loanNext{
        margin-bottom: 45px;
    }
    .loanResultHead,
    .loanNextHead{
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-bottom: 30px;
        padding: 28px 5px 38px;
    }
    .loanResultBadge,
    .loanNextBadge{
        margin-bottom: 15px;
        padding: 9px 15px 8px;
        font-size: 11px;
    }
    .loanResultTitle,
    .loanNextTitle{
        font-size: 24px;
    }
    .loanNextTitle{
        font-size: 20px;
    }
    .loanResultCard,
    .loanNextCard{
        margin-bottom: 16px;
        padding: 40px 10px 58px;
        border-radius: 15px;
    }
    .loanNextCard {
        padding: 38px 25px;
    }
    .loanResultLabel{
        margin-bottom: 15px;
        font-size: 16px;
    }
    .loanResultAmount{
        font-size: 50px;
        margin: 0 0 15px;
    }
    .loanResultAmountUnit{
        font-size: 22px;
    }
    .loanResultCalc{
        margin-bottom: 20px;
        font-size: 11px;
    }
    .loanResultImg{
        width: 120px;
        height: auto;
        margin: 0 auto -125px;
    }
    .loanResultImg2{
        width: 147px;
    }
    .loanResultNote {
        margin-top: 80px;
        padding: 0 15px;
    }
    .loanResultCardPurchase{
        padding: 30px 10px 83px;
        margin-bottom: 160px;
    }
    .loanResultPurchaseIcon{
        width: 55px;
        height: 55px;
        margin-bottom: 15px;
    }
    .loanResultPurchaseTitle{
        margin-bottom: 9px;
        font-size: 18px;
    }
    .loanResultPurchaseText,
    .loanResultPurchaseDiff{
        font-size: 11px;
        line-height: calc(21 / 11);
    }
    .loanResultCardPurchase .loanResultImg{
        position: relative;
        z-index: 1;
        width: 120px;
        margin: 6px auto -145px;
    }
    .loanResultSummary{
        margin-top: -65px;
        padding-bottom: 0;
    }
    .loanResultSummaryList{
        margin: 0 0 15px;
    }
    .loanResultSummaryItem{
        margin-bottom: 7px;
        padding: 20px 20px;
        border-radius: 15px;
    }
    .loanResultSummaryLabel{
        font-size: 12px;
    }
    .loanResultSummaryValue{
        font-size: 14px;
    }
    .loanResultSummaryCalc{
        margin-bottom: 5px;
    }
    .loanResultSummary .loanResultNote{
        padding: 0 15px;
    }
    .loanAdvice{
        margin-bottom: 16px;
        padding: 20px;
        border-radius: 15px;
    }
    .loanAdviceHead{
        gap: 11px;
        margin-bottom: 10px;
    }
    .loanResultCard:not(.loanResultCardPurchase) + .loanResultSummary{
        margin-top: 83px;
    }
    .loanNextMore{
        margin-top: 35px;
        font-size: 12px;
        line-height: calc(22 / 12);
    }
}
@media only screen and (max-width:350px){
    .loanNextTitle{
        font-size: 18px;
    }
    .loanResultBadge,
    .loanNextBadge{
        font-size: 10px;
    }
    .loanResultPurchaseTitle{
        font-size: 16px;
    }
    .loanResultSummaryLabel{
        font-size: 11px;
    }
    .loanResultSummaryValue{
        font-size: 13px;
    }
}

/*==============================
    ログインページ
==============================*/
.loanLogin{
    margin-bottom: 50px;
}
.loanLoginHead{
    position: relative;
    margin: 0 0 30px;
    padding: 39px 20px 49px;
    background: var(--loanResultBg, #e0efff);
    text-align: center;
}
.loanLoginHead::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 15px 0;
    border-color: var(--loanResultBg, #e0efff) transparent transparent;
    transform: translateX(-50%);
}
.loanLoginBadge{
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 15px;
    padding: 10px 17px 9px;
    border-radius: 999px;
    background: var(--loanBlue);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.02em;
    font-weight: bold;
}
.loanLoginTitle{
    margin: 0;
    color: var(--loanText);
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.loanLogin .loanChat{
    margin-bottom: 45px;
}
.loanLoginLead{
    margin: 0 0 25px;
    font-size: 16px;
    line-height: calc(26 / 16);
    /* font-weight: bold; */
    letter-spacing: 0.02em;
    text-align: center;
}
.loanLogin .txtError{
    color: #f00;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;
    background: url(../img/common/iconError.gif) left 2px no-repeat;
    background-size: 14px;
    padding: 0 0 0 17px;
    margin: 14px 0 0;
    text-align: left;
}
.loanLogin .loanLoginError{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    margin: 0 0 20px;
    padding: 0;
    background: none;
    text-align: center;
}
.loanLogin .loanLoginError::before{
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    background: url(../img/common/iconError.gif) center / contain no-repeat;
}
.loanLoginLeadRegister{
    margin: 45px 0 25px;
}
.loanLoginCard{
    box-sizing: border-box;
    padding: 50px 120px 50px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(43, 51, 57, 0.12);
}
.loanLoginCardRegister{
    padding: 44px 30px 40px;
    text-align: center;
}
.loanLogin .loanField{
    margin-bottom: 20px;
}
.loanLogin .loanFieldPass{
    margin-bottom: 30px;
}
.loanLogin .loanInputFull{
    width: 100%;
}
.loanLogin .loanPassWrap{
    width: 100%;
}
.loanLogin .loanInputFull.error,
.loanLogin .loanPassInput.error{
    border-color: #c62828;
    background-color: #fff0f0;
}
.loanPassWrap{
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.loanPassInput{
    padding-right: 50px;
    order: 1;
}
.loanPassWrap .formError.loanFormError{
    order: 3;
    flex: 0 0 100%;
}
.loanPassEye{
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    order: 2;
}
.loanPassEye img{
    display: block;
    width: 16px;
    height: auto;
}
.loanCheck{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 25px;
    cursor: pointer;
}
.loanCheckInput{
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--loanBlue);
}
.loanCheckLabel{
    font-size: 13px;
    letter-spacing: 0.02em;
}
.loanLoginSubmit{
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 20px;
    padding: 20px 15px 20px;
    border: none;
    border-radius: 6px;
    background: var(--loanBlue);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}
.loanLoginSubmit:hover{
    background: var(--loanBlueDark);
}
.loanLoginForgot{
    margin: 0;
    text-align: center;
}
.loanLoginForgot a{
    color: var(--loanBlue);
    font-size: 12px;
    letter-spacing: 0.02em;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.loanLoginRegisterBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 24px 20px 23px;
    border-radius: 6px;
    background: var(--loanBlue);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s;
}
.loanLoginRegisterBtn::after{
    content: "";
    display: inline-block;
    width: 12px;
    height: 6px;
    background: url(../img/loan/imgArrowWhite.png) center / contain no-repeat;
}
.loanLoginRegisterBtn:hover{
    background: var(--loanBlueDark);
}
.loanLoginRegisterNote{
    margin: 20px 0 0;
    color: var(--loanMuted);
    font-size: 12px;
    letter-spacing: 0.02em;
}
@media only screen and (max-width:767px){
    .loanLogin{
        margin-bottom: 40px;
    }
    .loanLoginHead{
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-bottom: 25px;
        padding: 28px 15px 38px;
    }
    .loanLoginBadge{
        margin-bottom: 15px;
        padding: 9px 15px 8px;
        font-size: 11px;
    }
    .loanLoginTitle{
        font-size: 24px;
    }
    .loanLogin .loanChat{
        margin-bottom: 25px;
    }
    .loanLoginLead{
        margin-bottom: 15px;
        font-size: 13px;
    }
    .loanLogin .txtError{
        font-size: 12px;
        background-size: 12px;
        padding: 0 0 0 15px;
        margin-top: 10px;
    }
    .loanLogin .loanLoginError{
        margin: 0 0 15px;
    }
    .loanLogin .loanLoginError::before{
        width: 12px;
        height: 12px;
    }
    .loanLoginLeadRegister{
        margin-top: 35px;
        margin-bottom: 15px;
    }
    .loanLoginCard{
        padding: 40px 25px 40px;
        border-radius: 15px;
    }
    .loanLogin .loanField{
        margin-bottom: 20px;
    }
    .loanCheck{
        margin-bottom: 20px;
    }
    .loanCheckLabel{
        font-size: 12px;
    }
    .loanLoginRegisterNote{
        margin: 14px 0 0;
        font-size: 11px;
    }
}