html{
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Local Noto Sans JP';
    src: 
      local('Noto Sans JP'), /* Windows用 */
      local('Noto Sans CJK JP Regular') /* Android用 */;
  }
body{
    max-width: 1920px;
    font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
    font-weight: 400;
    overflow-x: hidden;
}

img{
    display: block;
    width: 100%;
    height: auto;
}

.pc{
    display: block;
}
.sp{
    display: none;
}

/* PCではクリックを無効化する（一例） */
@media (min-width: 769px) {
    a[href^="tel:"] {
        pointer-events: none; /* クリックに反応しなくなる */
        cursor: default;      /* 指マークにならない */
    }
}

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 94px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 580px;
    background-color: #fff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.logo{
    width: 52px;
    height: 73px;
}

.tel-number_business-hours-set{
    display: flex;
    justify-content: center;
    gap: 12px;
}
.header-tel-number-image_01{
    width: 189px;
}
.business-hours-image{
    width: 121px;
    height: 55px;
}

@media (max-width: 768px){
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }

    header{
        height: 55px;
    }

    .logo{
        width: 29px;
        height: 40px;
    }

    .tel-number_business-hours-set{
        display: none;
    }
}

.c-section{
    position: relative;
    width: 100%;
}

.bg-image{
    position: relative;
    width: 1920px;
    z-index: -1;
    left: 50%;           /* 4. 画面の真ん中を始点に */
    transform: translateX(-50%);/* 【重要】左右は中央、上下は上を基準にする */
}

.object-image{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
@media (max-width: 768px){
    .bg-image{
      width: 100%;
      max-width: 768px;
    }
}


.sec_01{
    margin-top: 94px;
}
.btn-for-contact-form_01{
    width: 897px;
}

.sec_01-image_01{
    width: 984px;
    top: 18px;
}
.sec_01-image_02_sp{
    display: none;
}
.sec_01 .btn-for-contact-form_01{
    top: 671px;
}
.sec_01 .tel-number-image_01{
    display: none;
}
.sec_01-image_03{
    width: 937px;
    top: 909px;
}
@media (max-width: 768px){
    .sec_01{
        margin-top: 55px;
    }
    .sec_01-image_01{
        width: 88.8%;
        top: 0.27%;
    }
    .sec_01-image_02_sp{
        display: block;
        width: 87.47%;
        top: 24.5%;
    }
    .sec_01 .btn-for-contact-form_01{
        width: 79.47%;
        top: 28.3%;
    }
    .sec_01 .tel-number-image_01_sp{
        width: 78.93%;
        top: 35.6%;
    }
    .sec_01-image_03{
        width: 84.8%;
        top: 47.55%;
    }
}


.sec_02-image_01{
    width: 977px;
    top: 71px;
}
.sec_02-image_02{
    width: 945px;
    top: 1536px;
}
@media (max-width: 768px){
    .sec_02-image_01{
        width: 90.93%;
        top: 3.9%;
    }
    .sec_02-image_02{
        width: 75.2%;
        top: 41.42%;
    }
}


.sec_03-image_01{
    width: 951px;
    top: 40px;
}
.sec_03 .btn-for-contact-form_01{
    top: 303px;
}



.sec_04-image_01{
    width: 730px;
    top: 87px;
}
.happy-voice-card-wrapper{
    width: 100%;
    position: absolute;
    top: 360px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.happy-voice-card-wrapper picture{
    display: flex;
    justify-content: center;
    width: 100%;
}
.happy-voice-card{
    width: 965px;
}
.sec_04-image_05{
    width: 938px;
}
@media (max-width: 768px){
    .sec_04-image_01{
        width: 86.4%;
        top: 2.2%;
    }
    .happy-voice-card-wrapper{
        top: 9.1%;
        gap: 20px;
    }
    .happy-voice-card{
        width: 97.87%;
    }
    .sec_04-image_05{
        width: 87.2%;
    }
}


.strong-reason-wrapper{
    width: 100%;
    position: absolute;
    top: 354px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 43px;
}
.strong-reason-wrapper picture{
    display: flex;
    justify-content: center;
    width: 100%;
}
.strong-reason{
    width: 962px;
}
@media (max-width: 768px){
    .strong-reason-wrapper{
        top: 7.04%;
        gap: 20px;
    }
    .strong-reason{
        width: 88%;
    }
}


.sec_06 {
    margin-top: -11px;
}
.company-comparison-wrapper{
    position: absolute;
    top: 305px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 11px;
}
.sec_06-image_01{
    position: relative;
    top: -86px;
    width: 409px;
}
.sec_06-image_02{
    width: 510px;
}
@media (max-width: 768px){
    .sec_06 {
        margin-top: -11px;
    }
    .company-comparison-wrapper{
        top: 15.54%;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .company-comparison-wrapper picture{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .sec_06-image_01{
        width: 71.73%;
        top: 0;
    }
    .sec_06-image_02{
        position: relative;
        top: -5px;
        width: 88.27%;
    }
}


.sec_07-image_01{
    width: 563px;
    top: 33px;
}
.sec_07-image_02{
    width: 767px;
    top: 220px;
}
@media (max-width: 768px){
    .sec_07-image_01{
        width: 85.07%;
        top: 1.7%;
    }
    .sec_07-image_02{
        width: 79.2%;
        top: 13.9%;
    }
}


.sec_08-image_01{
    width: 384px;
    margin: 0 auto;
    padding-top: 80px;
}
.q-and-a-wrapper{
    max-width: 850px;
    margin: 71px auto 0 auto;
}
.accordion-004 {
    max-width: 850px;
    margin-bottom: 20px;
    border: 1px solid #06a074;
}

.accordion-004 summary {
    display: block;
    position: relative;
    padding: 0.833em 1.667em 1em 3.563em;
    color: #fff;
    font-size: 18px;
    background-color: #06A074;
    font-weight: 400;
    cursor: pointer;
}

.accordion-004 summary::-webkit-details-marker {
    display: none;
}
.accordion-004 summary::before{
    position: absolute;
    top: 24%;
    left: 3%;
    content: "";
    width: 26px;
    height: 51px;
    background-image: url(../img/Q.webp);
    background-repeat: no-repeat;
    background-size: contain;
}
.accordion-004 summary::after {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-65%) rotate(45deg);
    width: 13px;
    height: 13px;
    margin-left: 10px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-004[open] summary::after {
    transform: rotate(225deg);
}

.accordion-004 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0.938em 3.563em;
    color: #424242;
    font-size: 16px;
    transition: transform .5s, opacity .5s;
}
.accordion-004[open] p {
    transform: none;
    opacity: 1;
    color: #424242;
    font-size: 16px;
}
@media (max-width: 768px){
    .sec_08{
        padding-bottom: 11%;
    }
    .sec_08-image_01{
        width: 57.33%;
        padding-top: 13.33%;
    }
    .q-and-a-wrapper{
        max-width: 325px;
    }
    .accordion-004{

    }
    .accordion-004 summary{
        padding: 0.5em 0.938em 0.563em 3.625em;
        font-size: 16px;
    }
    .accordion-004 summary::before{
        top: 28%;
        left: 6%;
    }
    .accordion-004 summary::after{
        right: 3%;
    }
    .accordion-004 p{
        padding: 1.429em 1em;
        font-size: 14px;
    }
    .breakpoint.sp{
        display: block;
    }
}

.sec_09{
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #F6FFFC;
}
.sec_09-image_01{
    width: 944px;
    margin: 0 auto;
}
.sec_09-image_02{
    width: 854px;
    margin: 82px auto 0 auto;
}
.line-btn{
    width: 640px;
    top: 778px;
}


.contact-form {
    max-width: 850px;
    margin: 99px auto 0;
    padding: 60px 46px 50px;
    border: 2px solid #FB6002;
    background-color: #fff;
    border-radius: 10px;
}
.form-title{
    font-size: 36px;
    color: #FB6002;
    font-weight: bold;
    text-align: center;
    margin-bottom: 55px;
}
/* 1行分のラッパー（ここで横並びにする） */
.form-group {
    display: flex;
    align-items: center; /* 縦の中央で揃える */
    margin-bottom: 31px; /* 次の項目との余白 */
}
.form-group:last-of-type{
    margin-bottom: 52px;
}
/* 項目名と必須マークのエリア */
.form-label-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 250px; /* 左側の幅を固定する（PC版） */
    flex-shrink: 0; /* 幅が縮まないようにする */
    font-weight: bold;
}
label{
    font-size: 16px;
    font-weight: 400;
}

/* 必須マークのデザイン */
.required-badge {
    background-color: #FB6002; /* 赤系の目立つ色 */
    color: #fff;
    font-size: 14px;
    padding: 1px 5px;
    margin-right: 10px;
    font-weight: 400;
}
/* 入力欄のエリア */
.form-input-area {
    flex-grow: 1; /* 残りの右側の幅をすべて入力欄に割り当てる */
}
/* 実際の入力欄（input, textareaなど） */
* input, select, textarea 
.form-input-area input,
.form-input-area select,
.form-input-area textarea {
    width: 100%;
    padding: 11px 17px;
    background-color: #F3F3F3;
    font-size: 16px; 
    border: none; /* もし枠線が出る場合は消します */
    border-radius: 4px; /* 少し角丸にすると綺麗です */
    font-family: inherit; /* textareaのフォントがズレるのを防ぐ */
}
/* textarea（ご相談内容）特有の設定 */
.form-input-area textarea {
    resize: vertical; /* ユーザーが縦方向のみサイズを変更できるようにする */
    line-height: 1.5; /* 文章を読みやすくする */
}
/* select（セレクトボックス）特有の設定 */
.form-input-area select {
    cursor: pointer; /* マウスを乗せたら指のマークにする */
    font-size: 14px;
}
.form-input-area.sel{
    position: relative;
}
.form-input-area.sel::after{
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-65%) rotate(45deg);
    width: 11px;
    height: 11px;
    margin-left: 10px;
    border-bottom: 2px solid #4E4E4E;
    border-right: 2px solid #4E4E4E;
}
.form-input-area textarea{
        height: 153px;
    }
form button{
    display: block;
   margin: 0 auto;
}
.form-btn{
    width: 431px;
}
/* ==========================================
   送信ボタンの切り替えアニメーション
   ========================================== */
#submit-btn {
    transition: opacity 0.3s ease; /* 0.3秒かけてフワッと変化させる */
}

/* ボタンが無効化されている（チェックが入っていない）時の状態 */
#submit-btn:disabled {
    opacity: 0.4; /* 画像を40%の濃さ（薄く）にする */
    cursor: not-allowed; /* マウスを乗せた時に「禁止」マークにする（PCのみ） */
}
/*免責事項*/
.disclaimer{
    width: 100%;
    max-width: 706px;
    margin-bottom: 30px;
    padding: 12px 23px;
    border: 1px solid #000;
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 768px){
    .sec_09{
        padding-top: 14%;
    }
    .sec_09-image_01{
        width: 85.33%;
    }
    .sec_09-image_02{
        position: relative;
        width: 86.4%;
        margin: 50px auto 0 auto;
    }
    .line-btn{
        width: 85.49%;
        top: 76.8%;
    }
    .contact-form{
        width: 95%;
        padding: 30px 18px 51px;
        margin-top: 46px;
    }
    .form-title{
        font-size: 24px;
        margin-bottom: 35px;
    }
    .form-group {
        flex-direction: column; /* 要素を「縦並び」に変更 */
        align-items: flex-start; /* 左寄せに戻す */
        margin-bottom: 20px;
    }
    .form-group:last-of-type{
        margin-bottom: 40px;
    }
    .form-label-area {
        width: 100%; /* 横幅いっぱいに広げる */
        /* ▼ ここがポイント！左に項目名、右に必須マークを散らす ▼ */
        justify-content: space-between; 
        margin-bottom: 10px; /* 下の入力欄との隙間 */
    }
    label{
        font-size: 14px;
    }
    .required-badge{
        font-size: 12px;
        padding: 1px 4px;
    }
    .form-input-area {
        width: 100%; /* 入力欄も横幅いっぱいに */
    }
    .form-input-area input{
        font-size: 14px;
        padding: 11px 12px;
    }
    * input, select, textarea 
    .form-input-area input,
    .form-input-area select,
    .form-input-area textarea {
        font-size: 13px;
    }
    .form-input-area.sel::after{
        right: 15px;
    }
    .pref-sel::after {
        display: none;
    }
    .form-btn{
        width: 290px;
    }
    
    .disclaimer{
        margin-bottom: 20px;
        padding: 11px 9px;
        font-size: 12px;
    }
}

/* ==========================================
   プライバシーポリシー同意チェックボックス
   ========================================== */
.form-privacy {
    margin: 15px 0; /* 送信ボタンや免責事項との縦の余白（お好みで調整してください） */
    text-align: center; /* 全体を中央揃えにします */
}

.privacy-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px; /* 【PC版】チェックボックスと文字の隙間 */
    font-size: 16px; /* 【PC版】フォントサイズ */
    cursor: pointer;
}

/* リンクテキストのデザイン */
.privacy-label a {
    color: #06A074; /* メインカラー（緑）にします */
    text-decoration: underline; /* クリックできることが分かるように下線を引きます */
}

/* ▼魔法の記述：標準のチェックボックスを消してカスタムする▼ */
.privacy-label input[type="checkbox"] {
    appearance: none; /* ブラウザ標準のデザインを無効化 */
    -webkit-appearance: none; /* Safari用の無効化 */
    width: 20px; /* 【PC版】チェックボックスの幅 */
    height: 20px; /* 【PC版】チェックボックスの高さ */
    padding: 1px;
    border: 1px solid #000; /* 太さ1pxの枠線（色は薄いグレー） */
    background-color: #fff;
    border-radius: 0px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0; /* スマホなどで文字が改行されてもボックスが潰れないようにする */
}
.privacy-label input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;           /* レ点の横幅 */
    height: 15px;         /* レ点の高さ */
    border-right: 3px solid #FB6002;  /* ★ご指定のカラー */
    border-bottom: 3px solid #FB6002; /* ★ご指定のカラー */
    transform: translate(-50%, -60%) rotate(45deg); /* 中央に置いて45度傾ける */
    opacity: 0;           /* チェックされるまでは透明にして隠す */
}

/* チェックが入った瞬間にレ点を表示する */
.privacy-label input[type="checkbox"]:checked::after {
    opacity: 1;
}


/* ==========================================
   スマホ版（768px以下）の切り替え
   ========================================== */
@media (max-width: 768px) {
    .privacy-label {
        gap: 4px; /* 【スマホ版】チェックボックスと文字の隙間 */
        font-size: 14px; /* 【スマホ版】フォントサイズ */
    }
    
    .privacy-label input[type="checkbox"] {
        width: 17px; /* 【スマホ版】チェックボックスの幅 */
        height: 17px; /* 【スマホ版】チェックボックスの高さ */
    }

    .privacy-label input[type="checkbox"]::after {
        width: 7px;           /* レ点の横幅 */
        height: 13px;         /* レ点の高さ */
        border-right: 3px solid #FB6002;  /* ★ご指定のカラー */
        border-bottom: 3px solid #FB6002; /* ★ご指定のカラー */
    }
}


.sec_10{
    padding-top: 20px;
    padding-bottom: 81px;
}
.sec_10-image_01{
    width: 940px;
    margin: 0 auto;
}
.btn-for-contact-form_02{
    width: 718px;
    margin: 75px auto 0 auto;
}
@media (max-width: 768px){
    .sec_10-image_01{
        width: 91.2%;
    }
    .btn-for-contact-form_02{
        width: 86.67%;
        margin: 10.67% auto 0 auto;
    }
}


footer{
    color: #fff;
    text-align: center;
    background-color: #424242;
    font-weight: 300;
}
.footer-inner{
    padding-bottom: 15px;
}
.footer-logo{
    width: 90px;
    margin: 0 auto;
}
footer h2{
    font-size: 24px;
    font-weight: 400;
    margin-top: -10px;
    margin-bottom: 5px;
}
footer p{
    font-size: 14px;
}
.info-grid {
    margin-top: 10px;
    display: grid;
    /* 魔法の1行：左・中央・右の「3列」のマス目を作ります */
    grid-template-columns: auto auto auto; 
    /* グリッド全体を画面（親要素）の「中央」に配置します */
    justify-content: center; 
    align-items: center;
    row-gap: 0;    /* 上下の行間（お好みで調整） */
    column-gap: 8px;  /* 「：」の左右の余白（お好みで調整） */
    font-size: 14px;
 }
.label {
    text-align: right; /* 「：」に向かって右寄せにする */
}
.value {
    text-align: left; /* 「：」から離れるように左寄せにする */
}
.privacy-policy{
    font-size: 12px;
    margin-top: 18px;
}
/*ローンに関する基本情報*/
.loaninfo{
    width: 500px;
    margin: 1.0em auto;
    text-align: left;
}
.loaninfo p{
    font-size: .7em;
    color: #C8C0C0;
    line-height: 1.6;
}
.copyright{
    padding-top: 10px;
    padding-bottom: 33px;
    color: #424242;
    background-color: #fff;
}
@media (max-width: 768px){
    .footer-inner{
        padding-bottom: 20px;
    }
    footer h2{
        font-size: 20px;
        margin-top: 1px;
        margin-bottom: 10px;
    }
    footer p{
        font-size: 12px;
    }
    .info-grid{
        font-size: 12px;
    }
    .privacy-policy{
        font-size: 10px;
        margin-top: 15px;
    }
    .loaninfo{
        width: 90%;
        margin: .5em auto 0;
    }
    .loaninfo p{
        font-size: 0.65em;
    }
    .copyright{
        font-size: 10px;
        margin-top: 10px;
        margin-bottom: 14px;
    }
}