@charset "UTF-8";
/* ==========================================================================
   リフォームローン（Figma: PC 142:519 / SP 142:1138）
   ========================================================================== */

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

/* ---- MV（文字・カードは画像。1440px デザインの座標を中央基準に換算） ---- */
.p-mv{height:550px;background-image:url(../images/mv-bg.jpg)}
.p-mv__title{top:51px;left:calc(50% - 550px);width:1086px;height:auto}
.p-mv__title img{height:auto}

/* ---- お借入れ金利（CTA の直後。Figma 192:713: 180 / 180 / 320 / 180px の 4 列） ---- */
.p-mrate{width:1100px;margin:0 auto;padding:60px 0 100px}
.p-mrate__scroll{margin-top:50px}
.p-mrate__table{width:860px;margin:0 auto;table-layout:fixed;text-align:center}
.p-mrate__table *{letter-spacing:.1em}
/* 見出し行: 4 列とも高さ 80px、文字は天地中央 */
.p-mrate__h{height:80px;padding:0;vertical-align:middle;font-size:18px;font-weight:700;line-height:1.6;background:linear-gradient(var(--h-bg),var(--h-bg)) 0 0 / 100% 100% no-repeat}
.p-mrate__h--cat{--h-bg:var(--bg-beige);width:240px;border-right:1px solid #868686}   /* 本文の縦線（th の border-right）と同じ罫線で揃える */
.p-mrate__h--special{--h-bg:var(--green);width:380px;color:#fff;font-size:20px;line-height:1.6}
.p-mrate__h--normal{--h-bg:#868686;width:240px;color:#fff}
/* 本文: 行 50px・罫線 #868686（金利区分の列は右に縦線） */
.p-mrate__table tbody tr{border-bottom:1px solid #868686}
.p-mrate__table tbody tr.p-mrate__row--sub{border-bottom:0}
.p-mrate__table tbody tr.p-mrate__row--sub > td{border-bottom:1px solid #868686}
.p-mrate__table tbody th,.p-mrate__table tbody td{height:70px;vertical-align:middle;font-size:16px;font-weight:400;line-height:1}
.p-mrate__table tbody th{border-right:1px solid #868686}
.p-mrate__special{background:var(--accent-bg);color:var(--red);font-size:22px!important;font-weight:700!important}
.p-mrate__special b{font-size:36px;line-height:1}
.p-mrate__normal{font-size:22px!important}
.p-mrate__normal b{font-size:30px;font-weight:400;line-height:1}
/* Figma: 数字の大きさに関わらず字間は 2.2px 固定・「%」は 20px（通常金利は細字）。見出しセルの height は padding を含まない */
.p-mrate__special,.p-mrate__special *,.p-mrate__normal,.p-mrate__normal *{letter-spacing:2.2px}
.p-mrate__special,.p-mrate__normal{white-space:nowrap}
.p-mrate__pct{font-size:20px}
.p-mrate__note{margin-top:40px;text-align:center;text-indent:.1em}

/* ---- メリット: 見出しは 22px・リードから画像まで 50px（説明文なし） ---- */
.p-merit__list{margin-top:50px}
.p-merit__heading{font-size:22px;line-height:1.591}

/* ---- 月々のご返済額について ---- */
.p-loanpay{width:1100px;margin:0 auto;padding-bottom:40px}
.p-loanpay__lead{margin-top:50px;font-size:22px;font-weight:700;line-height:1.591;text-align:center;text-indent:.1em}
.p-loanpay__cards{display:flex;justify-content:center;gap:40px;margin-top:40px}
.p-loanpay__card{
  --accent:var(--red);
  width:435px;padding:17px;
  border:3px solid var(--accent);border-radius:10px;background:#fff6f5;
  text-align:center;
}
.p-loanpay__card--green{--accent:var(--green);background:var(--accent-bg)}
/* 30px の数字で行ボックスが広がらないよう高さを Figma の 39px に固定 */
.p-loanpay__title{height:39px;padding-top:4px;font-size:20px;font-weight:700;line-height:35px;text-indent:.1em}   /* Figma: 文字は枠の中央より 4px 下 */
.p-loanpay__title em{color:var(--accent)}
.p-loanpay__title b{font-size:30px;line-height:1}
.p-loanpay__cond{
  display:flex;justify-content:center;align-items:center;gap:20px;
  height:46px;margin-top:15px;padding-bottom:1px;
  border-radius:5px;background:var(--accent);
  color:#fff;font-size:18px;font-weight:700;line-height:1.611;
}
.p-loanpay__cond span{margin-right:-.1em}   /* 行末の字間を幅に含めない（Figma の文字位置に合わせる） */
.p-loanpay__label{margin-top:15px;font-size:18px;font-weight:700;line-height:1.611;text-indent:.1em}
.p-loanpay__amount{height:62px;margin-top:5px;color:var(--accent);font-size:30px;font-weight:700;line-height:62px;text-indent:.1em}
.p-loanpay__amount b{font-size:48px}
/* 注記は左揃えのまま、ブロックを中央に置く（Figma は中央より 26px 右） */
.p-loanpay__note{display:table;margin:30px auto 0}
.p-loanpay__btn{margin-top:30px}

.p-detail{padding-top:0}

/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width:767px){
  .page-reform{--cta-h:8rem}
  .p-mv{height:61.8rem}
  .p-mv{background-image:none}
  .p-mv::after{height:24.4rem;background-image:url(../images/sp-mv-bg.jpg)}
  .p-mv__title{top:3rem;left:50%;width:36rem;height:auto;margin-left:-18rem}

  /* お借入れ金利: 4 列 485px を横スクロール（Figma SP なし） */
  .p-mrate{width:auto;padding:5.4rem 0 6rem}
  .p-mrate .c-title{width:35rem;margin:0 auto}
  .p-mrate__scroll{margin-top:3rem;padding:0 2rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .p-mrate__table{width:48.5rem}
  .p-mrate__h{height:6.2rem;padding:0;font-size:1.4rem;line-height:1.5;background-size:100% 100%}
  .p-mrate__h--cat{width:14rem}
  .p-mrate__h--special{width:19.5rem;font-size:1.4rem;line-height:1.5}
  .p-mrate__h--normal{width:15rem}
  .p-mrate__table tbody th,.p-mrate__table tbody td{height:6rem;font-size:1.3rem}
  .p-mrate__special,.p-mrate__normal{font-size:1.6rem!important}
  .p-mrate__special b{font-size:2.6rem}
  .p-mrate__normal b{font-size:2.2rem}
  .p-mrate__special,.p-mrate__special *,.p-mrate__normal,.p-mrate__normal *{letter-spacing:.1em}
  .p-mrate__pct{font-size:1.4rem}
  .p-mrate__note{width:35rem;margin:2rem auto 0;text-align:left;text-indent:0}

  .p-merit__heading{font-size:1.8rem;line-height:1.611}
  .p-merit__list{margin-top:3rem}
  .p-point__visual img{height:25.7rem}

  .p-loanpay{width:35rem;padding-bottom:2rem}
  .p-detail{padding-top:0}
  .p-loanpay__lead{margin-top:4rem;font-size:1.8rem;line-height:1.611}
  .p-loanpay__cards{flex-direction:column;gap:2rem;margin-top:2rem}
  .p-loanpay__card{width:auto;padding:1.7rem;border-width:.3rem;border-radius:1rem}
  /* Figma: 1,000万円の見出しは 314px でカード内側（310px）を少しはみ出す。折り返さず左右にはみ出させる */
  .p-loanpay__title{height:3.9rem;margin:0 -1rem;padding-top:.4rem;font-size:2rem;line-height:3.5rem;white-space:nowrap}
  .p-loanpay__title b{font-size:3rem}
  .p-loanpay__cond{gap:2rem;height:4.6rem;margin-top:1.5rem;border-radius:.5rem;font-size:1.8rem}
  .p-loanpay__label{margin-top:1.5rem;font-size:1.8rem}
  .p-loanpay__amount{height:6.2rem;margin-top:.5rem;font-size:3rem;line-height:6.2rem}
  .p-loanpay__amount b{font-size:4.8rem}
  .p-loanpay__note{display:block;margin-top:2rem;padding-right:.2rem}   /* Figma の改行位置に合わせる */
  .p-loanpay__btn{margin-top:3rem}

}