@charset "UTF-8";
/* ==========================================================================
   フリーローン（Figma: PC 16:2724 / SP 59:3555）
   ========================================================================== */
.page-freeloan{
  --accent:var(--red);
  --accent-bg:var(--bg-pink);
  --step:var(--red);
  --flow:var(--red);
  --step-w:260px;
}

/* ---- SP 下部固定CTA: 白い帯の内側に赤ボタンを置く（Safari 下部が赤く染まるのを防ぐ） ---- */
@media screen and (max-width:767px){
  .page-freeloan .p-cta{background:#fff;box-shadow:0 -.2rem 1rem rgba(0,0,0,.08)}
  .page-freeloan .p-cta__inner{padding:1.6rem 2rem}
  .page-freeloan .p-cta__btn{height:calc(var(--cta-h) - 3.2rem);border-radius:.8rem}
  .page-freeloan .p-cta__btn.c-btn--single .c-btn__arrow{right:2rem}
}

/* ---- MV（文字・カードは画像。1440px デザインの座標を中央基準に換算） ---- */
.p-mv{height:550px}
.p-mv__title{top:60px;left:50%;width:1110px;height:auto;margin-left:-555px}
.p-mv__title img{height:auto}

/* ---- ご返済のイメージ（CTA の直後。メリットはその 100px 下） ---- */
.p-repay{width:1100px;margin:0 auto;padding-top:60px}
.p-merit{padding-top:100px}
.p-repay__lead{margin-top:50px;font-size:22px;font-weight:700;line-height:1.591;text-align:center;text-indent:.1em}
.p-repay__cards{display:flex;justify-content:center;gap:40px;margin-top:40px}
.p-repay__card{
  --accent:var(--red);
  width:435px;padding:17px 17px 22px;
  border:3px solid var(--accent);border-radius:10px;background:#fff;
}
.p-repay__card--blue{--accent:var(--blue)}
/* 30px の数字で行ボックスが広がらないよう高さを Figma の 39px に固定 */
.p-repay__title{height:39px;font-size:20px;font-weight:700;line-height:39px;text-align:center;text-indent:.1em}
.p-repay__title em{color:var(--accent)}
.p-repay__title b{font-size:30px;line-height:1}
.p-repay__table{width:100%;margin-top:15px;font-size:18px;line-height:1.611;text-align:center}
.p-repay__table th,.p-repay__table td{height:46px;vertical-align:middle}
.p-repay__table thead th{padding-bottom:3px}   /* Figma: 見出し行の文字は上 7px / 下 10px */
.p-repay__table thead th{background:var(--accent);color:#fff;font-weight:700}
.p-repay__table thead th:first-child{border-radius:5px 0 0 0}
.p-repay__table thead th:last-child{border-radius:0 5px 0 0}
/* Figma: 各行に内側 1px の枠（行の高さ 46px に含む）。table の border だと高さが増えるため影で描く */
.p-repay__table tbody th{box-shadow:inset 1px 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.p-repay__table tbody td{box-shadow:inset -1px 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.p-repay__table tbody tr:nth-child(odd){background:var(--row-gray)}
/* Figma の文字中心（左列 93px / 右列 311px）に合わせた列幅 */
.p-repay__table th:first-child{width:187px}
.p-repay__table td,.p-repay__table thead th:last-child{padding-left:40px}
.p-repay__table td{font-weight:700;color:var(--accent)}
.p-repay__note{margin-top:30px;text-align:center;text-indent:.1em}
.p-repay__btn{margin-top:30px}

/* ---- 商品概要: メリット（下余白 100px）の直後のため上余白なし ---- */
.p-detail{padding-top:0}

/* ---- ご融資までの流れ: 260px × 4 枚を本文幅（1100px）に並べる ---- */
.p-step-scroll{width:1100px;margin-left:auto;margin-right:auto}
.p-step__item:first-child .p-step__note{margin-right:-10px}   /* Figma: STEP1 の説明文のみ幅 270px */

/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width:767px){
  .page-freeloan{--cta-h:8rem}   /* 白帯: 上下余白 1.6rem + ボタン 4.8rem */
  .p-mv{height:61.8rem}
  .p-mv__title{top:3rem;left:50%;width:36rem;height:auto;margin-left:-18rem}

  .p-repay{width:35rem;padding-top:4rem}
  .p-merit{padding-top:6rem}
  .p-repay__lead{margin-top:4rem;font-size:1.8rem;line-height:1.611;text-align:left;text-indent:0}
  .p-repay__cards{flex-direction:column;gap:4rem;margin-top:3rem}
  .p-repay__card{width:auto;padding:0;border:0;border-radius:0;background:none}
  .p-repay__title{height:3.9rem;font-size:2rem;line-height:3.9rem}
  .p-repay__title b{font-size:3rem}
  .p-repay__table{margin-top:1.5rem;font-size:1.8rem;table-layout:fixed}
  .p-repay__table th,.p-repay__table td{height:4.6rem}
  .p-repay__table tbody tr:nth-child(even){background:#fff}
  .p-repay__table th:first-child{width:19.3rem;padding-left:.4rem}   /* Figma: 左列の文字中心 98.5px・右列見出しの開始 193px */
  /* Figma: 右列の数値は中心 261.5px、見出しは右端から 20px の右揃え（行末の字間は幅に含めない） */
  .p-repay__table td{padding:0 2rem 0 0}
  .p-repay__table thead th:last-child{padding:0 calc(2rem - .1em) .3rem 0;text-align:right;white-space:nowrap}
  .p-repay__note{margin-top:3rem;text-align:left;text-indent:0}
  .p-repay__btn{margin-top:3rem}

  .p-detail{padding-top:0}
  .p-detail .p-acc__toggle{padding-bottom:.4rem}   /* Figma: 見出しは帯の中央より 2px 上 */
  .page-freeloan{--step-w:24rem}
  .p-step-scroll{width:auto}
  .p-step__item:first-child .p-step__note{margin-right:0}
}

/* Figma: 2 段目のメリット見出しのみ画像から 14px（1 段目は 20px） */
@media screen and (min-width:768px){
  .p-merit__item:nth-child(n+3) .p-merit__heading{margin-top:14px}
}

/* ---- 複数ローンのおまとめ（Figma 252:779） ---- */
.p-merit__block--matome{margin-top:100px}
.p-matome{display:flex;justify-content:center;gap:40px;margin-top:40px}
.p-matome__card{--card-accent:#0098b7;--card-bg:#eef9fb;width:435px}
.p-matome__card--karikae{--card-accent:#00b798;--card-bg:#eefbf4}
.p-matome__head{height:50px;border-radius:10px 10px 0 0;background:var(--card-accent);color:#fff;font-size:20px;font-weight:700;line-height:50px;text-align:center;text-indent:.1em}
.p-matome__body{padding:20px 30px;border-radius:0 0 10px 10px;background:var(--card-bg)}
.p-matome__heading{font-size:20px;font-weight:700;line-height:1.6;text-align:center;text-indent:.1em}
.p-matome__img{display:block;width:375px;height:auto;margin-top:30px}

@media screen and (max-width:767px){
  .p-merit__block--matome{margin-top:6rem}
  .p-matome{flex-direction:column;align-items:center;gap:3rem;margin-top:3rem}
  .p-matome__card{width:35rem}
  .p-matome__head{height:4rem;border-radius:.8rem .8rem 0 0;font-size:1.8rem;line-height:4rem}
  .p-matome__body{padding:2rem 1.5rem;border-radius:0 0 .8rem .8rem}
  .p-matome__heading{font-size:1.8rem;line-height:1.611}
  .p-matome__img{width:32rem;margin:2rem auto 0}
}