@charset "UTF-8";
/* ==========================================================================
   筑邦銀行 個人向けローン 共通スタイル
   Figma: tbtgbbTzIyZ781r8kSAVxl（PC 1440px / SP 390px）
   ページ固有の値は各ページの css/page.css で CSS 変数を上書きする
   ========================================================================== */

/* --------------------------------------------------
   0. Design tokens
   -------------------------------------------------- */
:root{
  --red:       #d44320;   /* ブランド色（ヘッダー文字・フッター・CV） */
  --blue:      #0098b7;
  --orange:    #ff9800;
  --app:       #ff7272;
  --bg-pink:   #fff6f5;
  --bg-beige:  #f6f2ee;
  --bg-row:    #f7f7f7;
  --row-gray:  #f2f2f2;
  --line:      #e2e2e2;
  --gray:      #e0e0e0;
  --nav-sep:   #cecece;
  --menu-line: #d9d9d9;
  --text:      #333333;
  --link:      #0044cc;
  --shadow:    0 4px 10px rgba(0,0,0,.25);
  --cta-h:     120px;
  /* ページごとに上書き */
  --accent:    var(--red);       /* 見出し下線・小見出し・ポイント・アコーディオン・FAQ */
  --accent-bg: var(--bg-pink);   /* お申込みについて の背景 */
  --step:      var(--red);       /* STEP バッジ */
  --flow:      var(--red);       /* 「ご融資までの流れ」 */
  --step-w:    270px;
  --step-label-top: 195px;       /* カード外枠から 198px（枠線 3px を引いた値） */
}

/* --------------------------------------------------
   1. Reset / base
   -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,dl,dd,ul,ol,table{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{vertical-align:bottom;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
a{color:inherit}
table{border-collapse:collapse;border-spacing:0}
th,td{padding:0;font-weight:inherit;text-align:inherit}
small{font-size:inherit}
em{font-style:normal}

/* フォーカス: マウス操作時はリングを出さず、キーボード操作時のみ表示する */
:focus{outline:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.625;          /* 26px。Figma は行高を整数 px に丸めるため、各所の行高も丸めた値の比率で指定 */
  letter-spacing:.1em;
  color:var(--text);
  background:#fff;
  padding-bottom:var(--cta-h);
  /* PC は 1440px デザイン（本文 1100px）。狭い画面ではページごと横スクロールさせる */
  min-width:1160px;
  overflow-wrap:anywhere;
  line-break:strict;
  text-spacing-trim:space-all;   /* Chrome の約物詰め（「）、」など）を無効にし、Figma と同じ全角幅にする */
}
body.is-no-cta{padding-bottom:0}
/* letter-spacing の em は親で px に確定して継承されるため、各要素で自分の文字サイズの .1em を取り直す
   （:where で詳細度 0。個別指定があればそちらが優先） */
:where(body *){letter-spacing:.1em}

.u-br-sp,.u-sp{display:none}
.p-mv__title picture{display:contents}

/* --------------------------------------------------
   2. 共通コンポーネント
   -------------------------------------------------- */
/* ---- セクション見出し（テーマ色の下線付き） ---- */
.c-title{
  font-size:36px;font-weight:700;line-height:1.306;   /* 47px */
  text-align:center;text-indent:.1em;
}
.c-title::after{content:"";display:block;width:50px;height:5px;margin:20px auto 0;background:var(--accent)}

/* ---- 小見出し（テーマ色） ---- */
.c-subtitle{font-size:30px;font-weight:700;line-height:1.3;color:var(--accent);text-align:center;text-indent:.1em}
.c-lead{margin-top:20px;text-align:center;text-indent:.1em}

/* ---- 角丸ピルボタン（補足＋文言＋矢印。--single は 1 行） ---- */
.c-btn{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:400px;height:80px;
  border-radius:999px;
  background:var(--red);
  box-shadow:var(--shadow);
  color:#fff;
  text-align:center;text-decoration:none;
  transition:opacity .2s;
}
.c-btn:hover{opacity:.85}
.c-btn--blue{background:var(--blue)}
.c-btn--orange{background:var(--orange)}
.c-btn__sub{font-size:16px;line-height:1.625;text-indent:.1em}
.c-btn__main{margin-top:-4px;font-size:26px;font-weight:700;line-height:1.615;text-indent:.1em}
.c-btn--single .c-btn__main{margin-top:0}
.c-btn__arrow{position:absolute;top:50%;right:25px;width:20px;height:18px;margin-top:-9px;color:#fff}

/* ---- アプリダウンロードボタン（角丸 10px） ---- */
.c-btn-app{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:400px;height:80px;margin:0 auto;
  border-radius:10px;
  background:var(--app);color:#fff;
  text-align:center;text-decoration:none;
  transition:opacity .2s;
}
.c-btn-app:hover{opacity:.85}
.c-btn-app__sub{font-size:16px;line-height:1.625;text-indent:.1em}
.c-btn-app__main{margin-top:-4px;font-size:26px;font-weight:700;line-height:1.615;text-indent:.1em}
.c-btn-app__arrow{position:absolute;top:50%;right:25px;width:20px;height:18px;margin-top:-9px}

/* ---- 白地・枠線のピルボタン（返済シミュレーション） ---- */
.c-btn-outline{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:330px;height:50px;margin:0 auto;padding-bottom:4px;   /* Figma: 文言は上 10px（中央より 2px 上） */
  border:2px solid var(--red);border-radius:999px;
  background:#fff;color:var(--red);
  font-weight:700;text-decoration:none;text-indent:.1em;
  transition:opacity .2s;
}
.c-btn-outline:hover{opacity:.7}
.c-btn-outline__arrow{position:absolute;top:50%;right:20px;width:14px;height:13px;margin-top:-6.5px}

/* ---- リスト ---- */
.c-mark-list > li{padding-left:1em;text-indent:-1em}
.c-mark-list > li::before{content:"○"}
.c-num-list > li{padding-left:1.4em;text-indent:-1.4em}
.c-circle-list > li{padding-left:1em}
.c-note-mark{padding-left:1em;text-indent:-1em}
.c-link{color:var(--link);text-decoration:none}
.c-link:hover{text-decoration:underline}

/* --------------------------------------------------
   3. header / グロナビ / SP メニュー
   -------------------------------------------------- */
/* ヘッダー＋グロナビを上部追従 */
.l-head{position:sticky;top:0;z-index:60}
.l-header{height:60px;background:#fff}
.l-header__inner{display:flex;justify-content:space-between;height:100%;padding:0 50px}
.l-header__brand{display:flex;align-items:center;gap:20px}
.l-header__logo{display:block;width:130px;height:28px;margin-top:2px}
.l-header__logo img{width:100%;height:100%}
.l-header__name{font-size:18px;font-weight:700;line-height:1.611;color:var(--red);text-decoration:none}
.l-header__links{display:flex;gap:30px;padding-top:8px}
.l-header__link{display:flex;align-items:center;gap:5px;text-decoration:none;transition:opacity .2s}
.l-header__link:hover{opacity:.7}
.l-header__link-text{display:flex;flex-direction:column;align-items:center;font-size:14px;font-weight:700;line-height:22px;letter-spacing:0;color:var(--red)}
.l-header__link-text > *{letter-spacing:0}
.l-header__link-text small{margin-top:-2px;font-size:13px;font-weight:400;line-height:21px;color:var(--text)}
.l-header__links li:last-child .l-header__link{align-items:flex-start;padding-top:9px}
.l-header__links li:last-child img{margin-top:4px}
.l-header__links li:not(:last-child) img{margin-top:2px}
.l-header__menu{display:none}

.l-gnav{height:67px;background:var(--bg-beige);border-bottom:3px solid var(--red)}
.l-gnav__list{display:flex;justify-content:center;padding-top:10px}
.l-gnav__list > li + li{border-left:1px solid var(--nav-sep)}
.l-gnav__item{
  display:flex;align-items:center;gap:10px;
  height:44px;padding:0 20px;
  font-size:14px;font-weight:500;line-height:1.571;letter-spacing:.1em;text-decoration:none;
  transition:color .2s;
}
.l-gnav__list > li:first-child .l-gnav__item{padding-left:0}
.l-gnav__list > li:last-child .l-gnav__item{padding-right:0}
/* 行末の字間は幅に含めない（Figma と同じ） */
.l-gnav__item span{margin-right:-.1em}
.l-gnav__list > li:last-child .l-gnav__item img{margin-left:3px}   /* Figma: 住まいるのアイコンのみ区切り線から 23px */
.l-gnav__item:hover{color:var(--red)}   /* Figma では現在地も #333 */

/* SP メニュー（Figma MENU 62:463）。PC では hidden のまま開かない */
.l-menu[hidden]{display:none}

/* --------------------------------------------------
   4. MV（背景写真＋文字・カードの画像。座標は page.css）
   -------------------------------------------------- */
/* 背景画像は各ページの page.css で指定（CSS 変数内の相対 URL は参照側の CSS 基準で解決されるため） */
.p-mv{position:relative;height:450px;background:var(--bg-beige) center / cover no-repeat}
.p-mv__title{position:absolute}
.p-mv__title img{width:100%;height:100%}

/* --------------------------------------------------
   5. メリット / おすすめのポイント
   -------------------------------------------------- */
.p-merit{width:1100px;margin:0 auto;padding:60px 0 100px}
.p-merit__block{margin-top:50px}
.p-merit__block--point{margin-top:100px}
.p-merit__list{display:grid;grid-template-columns:repeat(2,530px);gap:50px 40px;margin-top:40px}
.p-merit__img{display:block;width:530px;height:210px;border-radius:var(--merit-r,5px);object-fit:cover}
.p-merit__heading{margin-top:20px;font-size:18px;font-weight:700;line-height:1.611}
.p-merit__text{margin-top:10px}

.p-point{display:grid;grid-template-columns:repeat(var(--point-cols,4),1fr);gap:40px;margin-top:58px}
.p-point__visual{position:relative}
.p-point__visual img{display:block;width:100%;height:180px;border-radius:5px;object-fit:cover}
.p-point__badge{
  position:absolute;left:10px;top:-18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:16px;font-weight:700;line-height:1.1;letter-spacing:.1em;text-indent:.1em;
}
.p-point__badge small{font-size:10px;line-height:1.12}
.p-point__heading{margin-top:20px;font-size:18px;font-weight:700;line-height:1.611}
.p-point__text{margin-top:10px;margin-right:-.1em}

/* --------------------------------------------------
   6. 商品概要（アコーディオン）
   -------------------------------------------------- */
.p-detail{width:1100px;margin:0 auto;padding:100px 0}
.p-acc + .p-acc{margin-top:50px}
.p-acc__toggle{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:80px;
  border-radius:10px 10px 0 0;
  background:var(--accent);color:#fff;
}
.p-acc__title{font-size:36px;font-weight:700;line-height:1.306;text-indent:.1em}
.p-acc__icon{position:absolute;right:20px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#fff}
.p-acc__icon::before,
.p-acc__icon::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);border-radius:2px;transform:translate(-50%,-50%);transition:transform .3s,opacity .3s}
.p-acc__icon::before{width:22px;height:3px}
.p-acc__icon::after{width:3px;height:22px}
.p-acc__toggle[aria-expanded="true"] .p-acc__icon::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.p-acc__toggle[aria-expanded="false"]{border-radius:10px}

/* グリッド 0fr → 1fr で高さを自動追従させる */
.p-acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.p-acc__body.is-open{grid-template-rows:1fr}
.p-acc__body-inner{overflow:hidden;min-height:0}
.p-acc__row{padding:20px 30px}
.p-acc__row:nth-child(even){background:var(--bg-row)}
.p-acc__row dt{font-weight:700}
.p-acc__row dd{margin-top:10px}
.p-acc__sub{font-weight:700}
.p-acc__sub:not(:first-child){margin-top:10px}
/* 商品概要内の金利表（狭い画面では横スクロール + scroll-hint） */
.p-rate-scroll{margin:6px 0 10px;overflow-x:auto;overflow-y:hidden!important}   /* 縦スクロールバーを出さない。scroll-hint が style="overflow:auto" を直接付けるため !important が必要 */
.p-rate{min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.6;text-align:center}
.p-rate th,.p-rate td{padding:6px 14px;border:1px solid #cfcfcf;vertical-align:middle}
.p-rate thead th{background:#ececec;font-weight:700}
.p-rate tbody th{background:#fafafa;font-weight:700}

/* --------------------------------------------------
   7. お申込みについて / ご融資までの流れ
   -------------------------------------------------- */
.p-apply{padding:100px 0;background:var(--accent-bg)}
.p-apply__lead{margin-top:50px;font-size:22px;font-weight:700;line-height:1.591;text-align:center;text-indent:.1em}
.p-apply__app{margin-top:30px}
.p-apply__flow-title{margin-top:100px;color:var(--flow)}
.p-apply__btn{margin:50px auto 0}
.p-apply__btn.c-btn--single{padding-right:15px}   /* Figma: 文言は矢印の分 7.5px 左寄せ */

/* ---- STEP（はみ出す分は横スクロール + scroll-hint） ---- */
.p-step-scroll{
  margin-top:54px;
  padding-top:16px;          /* STEP バッジのはみ出し分 */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.p-step{display:flex;gap:20px;width:max-content}
.p-step__item{flex:0 0 var(--step-w);width:var(--step-w)}
.p-step__card{
  position:relative;
  display:block;height:280px;
  border:3px solid var(--gray);border-radius:10px;background:#fff;
}
/* カード内は Figma の座標で絶対配置（基準はパディングボックスのため枠線 3px を引いた値） */
.p-step__badge{
  position:absolute;left:50%;top:-19px;
  width:90px;height:32px;margin-left:-45px;
  border-radius:5px;background:var(--step);color:#fff;
  font-family:"Roboto",sans-serif;font-size:20px;font-weight:700;line-height:32px;letter-spacing:.1em;text-align:center;text-indent:.1em;
}
.p-step__icon{position:absolute;left:0;right:0;display:flex;justify-content:center}
.p-step__icon--web{top:47px}
.p-step__icon--doc{top:48px}
.p-step__icon--mail,.p-step__icon--phone,.p-step__icon--money{top:37px}
.p-step__label{
  position:absolute;left:12px;right:12px;top:var(--step-label-top);
  font-size:18px;font-weight:700;line-height:1.611;text-align:center;text-indent:.1em;
}
.p-step__note{margin-top:20px}

/* --------------------------------------------------
   8. よくあるご質問 / お電話でのご相談
   -------------------------------------------------- */
.p-faq{width:1100px;margin:0 auto;padding:100px 0}
.p-detail + .p-faq{padding-top:0}   /* 商品概要の直後: 余白は商品概要側の 100px だけ（Figma） */
.p-faq__head{text-align:center}
.p-faq__icon{display:block;width:120px;height:57px;margin:0 auto}
.p-faq__title{margin-top:15px;font-size:36px;font-weight:700;line-height:1.306;text-indent:.1em}
.p-faq__head .c-lead{margin-top:30px}
.p-faq__body{display:flex;align-items:flex-start;gap:40px;margin-top:50px}
.p-faq__list{width:720px}
.p-faq__item + .p-faq__item{margin-top:20px}
.p-faq__toggle{
  justify-content:space-between;
  height:49px;padding:0 23px 0 20px;
  border-radius:7px 7px 0 0;
  font-size:18px;font-weight:700;line-height:1.611;text-align:left;
}
.p-faq__toggle[aria-expanded="false"]{border-radius:7px}
.p-faq__plus{position:relative;flex:0 0 23px;width:23px;height:23px}
.p-faq__plus::before,
.p-faq__plus::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px;transform:translate(-50%,-50%);transition:transform .3s,opacity .3s}
.p-faq__plus::before{width:22px;height:2.8px}
.p-faq__plus::after{width:2.8px;height:22px}
.p-faq__toggle[aria-expanded="true"] .p-faq__plus::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.p-faq__a-inner{margin-top:-3px;padding:18px 17px 17px;border:3px solid var(--accent);border-radius:0 0 7px 7px;background:#fff}

.p-tel{
  width:340px;padding:18px 18px 18px;
  border:2px solid var(--red);border-radius:7px;background:#fff;
}
.p-tel__title{font-size:20px;font-weight:700;line-height:1.6;text-align:center;text-indent:.1em}
.p-tel__text{margin-top:20px}
.p-tel__num{
  display:block;margin:10px -5px 0;
  color:var(--red);font-size:38px;font-weight:700;line-height:1.29;text-align:center;text-indent:.1em;text-decoration:none;white-space:nowrap;
}
.p-tel__time{margin-top:5px;font-size:14px;line-height:1.571;text-align:center;letter-spacing:.1em}

/* --------------------------------------------------
   9. footer / 下部固定CTA
   -------------------------------------------------- */
.l-footer{padding:14px 0;background:var(--red);color:#fff}
.l-footer__copy{font-size:14px;line-height:22px;text-align:center;text-indent:.1em}

.p-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:var(--cta-h);
  background:rgba(255,255,255,.95);
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
}
.p-cta__inner{display:flex;justify-content:center;gap:20px;padding-top:20px}

/* ==========================================================================
   SP（767px 以下）
   html{font-size} で 390px デザインの 1px = 0.1rem に換算
   ========================================================================== */
@media screen and (max-width:767px){
  :root{--cta-h:6rem;--step-w:24rem;--step-label-top:18.5rem}
  html{font-size:calc(100vw / 39)}
  body{min-width:0;font-size:1.6rem}
  /* 行高は PC と同じく Figma の整数 px を比率で指定（15px は 24px = 1.6） */

  .u-br-sp,.u-sp{display:inline}
  .u-br-pc,.u-pc{display:none}

  /* ---- 共通 ---- */
  .c-title{font-size:2.8rem;line-height:1.607}
  .c-title::after{width:5rem;height:.5rem;margin-top:1rem}
  .c-subtitle{font-size:2.4rem;line-height:1.583}
  .c-lead{margin:1rem -1rem 0}

  .c-btn{width:32rem;height:9rem;box-shadow:0 .4rem 1rem rgba(0,0,0,.25)}
  .c-btn__sub{font-size:1.6rem}
  .c-btn__main{margin-top:-.2rem;font-size:2.2rem;line-height:1.591}
  .c-btn--single .c-btn__main{margin-top:0}
  .c-btn__arrow{right:2.5rem;width:1.6rem;height:1.44rem;margin-top:-.72rem}

  .c-btn-app{width:35rem;height:8rem;border-radius:1rem}
  .c-btn-app__sub{font-size:1.4rem;line-height:1.571}
  .c-btn-app__main{margin-top:-.2rem;font-size:2.2rem;line-height:1.591}
  .c-btn-app__arrow{right:2rem;width:2rem;height:1.8rem;margin-top:-.9rem}

  .c-btn-outline{width:33rem;height:5rem;border-width:.2rem;font-size:1.6rem}
  .c-btn-outline__arrow{right:2rem;width:1.4rem;height:1.3rem;margin-top:-.65rem}

  /* ---- header ---- */
  .l-header{height:5rem}
  .l-header__inner{align-items:center;padding:0 2rem}
  .l-header__brand{gap:1.1rem}
  .l-header__logo{width:11rem;height:2.4rem;margin-top:.2rem}
  .l-header__name{font-size:1.5rem;line-height:1.6}
  .l-header__links{display:none}
  .l-header__menu{
    display:block;position:relative;
    width:4.4rem;height:4.4rem;margin-right:-1rem;
  }
  .l-header__menu span,
  .l-header__menu span::before,
  .l-header__menu span::after{
    content:"";position:absolute;left:1rem;width:2.4rem;height:.3rem;background:var(--red);
  }
  .l-header__menu span{top:50%;margin-top:-.15rem}
  .l-header__menu span::before{left:0;top:-.75rem}
  .l-header__menu span::after{left:0;top:.75rem}
  /* 3 本の線を整数 px に揃える（端数だと線ごとに太さが変わって見える） */
  @supports (top:round(1.5px,1px)){
    .l-header__menu span,
    .l-header__menu span::before,
    .l-header__menu span::after{height:round(.3rem,1px)}
    .l-header__menu span{top:round(down,50% - .15rem,1px);margin-top:0}
    .l-header__menu span::before{top:round(-.75rem,1px)}
    .l-header__menu span::after{top:round(.75rem,1px)}
  }

  .l-gnav{display:none}

  /* ---- SP メニュー（Figma MENU 62:463: 白地全面・行 51px・区切り線 #d9d9d9） ---- */
  .l-menu{
    position:fixed;inset:0;z-index:80;
    overflow-y:auto;overscroll-behavior:contain;
    background:#fff;
    opacity:0;transition:opacity .25s;
  }
  .l-menu.is-open{opacity:1}
  .l-menu__close{position:absolute;top:.9rem;right:1.5rem;width:3.5rem;height:3.5rem;padding:.5rem}
  .l-menu__close img{display:block;width:2.5rem;height:2.5rem}
  .l-menu__list{padding-top:5.8rem}
  .l-menu__list > li{border-bottom:1px solid var(--menu-line)}
  .l-menu__list > li:last-child{border-bottom:0}
  .l-menu__item{
    display:flex;align-items:center;
    height:5rem;padding:0 2rem 0 8.1rem;position:relative;
    font-size:1.4rem;font-weight:500;line-height:1.571;text-decoration:none;
  }
  /* アイコンは Figma の中心（x=47）に揃える */
  .l-menu__item img{position:absolute;left:4.75rem;top:50%;transform:translate(-50%,-50%);height:auto}
  .l-menu__item img[width="21"]{width:2.1rem}
  .l-menu__item img[width="32"]{width:3.2rem}
  .l-menu__item img[width="36"]{width:3.6rem}
  .l-menu__item img[width="26"]{width:2.6rem}
  .l-menu__item img[width="31"]{width:3.1rem}
  .l-menu__ext{
    display:flex;align-items:center;gap:.5rem;
    height:5rem;padding:0 3rem;
    font-size:1.4rem;font-weight:700;line-height:1.571;letter-spacing:0;color:var(--red);text-decoration:none;
  }
  .l-menu__ext *{letter-spacing:0}
  .l-menu__ext small{font-size:1.3rem;font-weight:400;color:var(--text)}
  .l-menu__ext img{width:1.4rem;height:1.4rem}

  /* ---- MV ---- */
  .p-mv{background:var(--bg-beige)}
  .p-mv::after{
    content:"";position:absolute;left:0;right:0;bottom:0;
    background:center / cover no-repeat;
  }
  .p-mv__title{z-index:1;left:50%}

  /* ---- メリット ---- */
  .p-merit{width:35rem;padding:4rem 0 6rem}
  .p-merit__block{margin-top:4rem}
  .p-merit__block--point{margin-top:6rem}
  .p-merit__list{grid-template-columns:1fr;gap:4rem;margin-top:3rem}
  .p-merit__img{width:35rem;height:13.9rem}
  .p-merit__heading{margin-top:1rem;font-size:1.8rem;line-height:1.611}
  .p-merit__text{margin-top:1rem}

  .p-point{grid-template-columns:1fr;gap:4rem;margin-top:4.8rem}
  .p-point__visual img{width:35rem;height:25.7rem;border-radius:.5rem}
  .p-point__badge{width:7.8rem;height:7.8rem;top:-1.8rem;left:1rem;font-size:2.2rem}
  .p-point__badge small{font-size:1.2rem}
  .p-point__heading{margin-top:2rem;font-size:1.8rem}
  .p-point__text{margin-top:1rem}

  /* ---- 商品概要（SP は画面幅いっぱい） ---- */
  .p-detail{width:auto;padding:6rem 0}
  .p-acc + .p-acc{margin-top:3rem}
  .p-detail .p-acc__toggle{height:6rem;border-radius:0}
  .p-detail .p-acc__toggle[aria-expanded="false"]{border-radius:0}
  .p-acc__title{font-size:3rem;line-height:1.3}
  .p-acc__icon{right:2rem;width:4rem;height:4rem;margin-top:-2rem}
  .p-acc__icon::before{width:2.2rem;height:.3rem}
  .p-acc__icon::after{width:.3rem;height:2.2rem}
  .p-acc__row{padding:2rem}
  .p-acc__row:nth-child(even){background:#f3f3f3}
  .p-rate{min-width:48rem;font-size:1.4rem}
  .p-rate th,.p-rate td{padding:.6rem 1rem}

  /* ---- お申込みについて ---- */
  .p-apply{padding:6rem 0}
  .p-apply__lead{width:35rem;margin:4rem auto 0;font-size:1.8rem;line-height:1.611;text-align:left;text-indent:0}
  .p-apply__app{margin-top:3rem}
  .p-apply__flow-title{margin-top:6rem}
  .p-apply__btn{margin-top:4rem}
  .p-apply__btn.c-btn--single{padding-right:0}

  /* STEP: 240×300px カード（左端は本文に揃え、右端は画面端まで流す） */
  .p-step-scroll{margin-top:3.4rem;padding:1.6rem 0 0 2rem}
  .p-step{gap:2rem;padding-right:2rem}
  .p-step__card{height:30rem;border-width:.3rem;border-radius:1rem}
  .p-step__badge{top:-1.9rem;width:9rem;height:3.2rem;margin-left:-4.5rem;border-radius:.5rem;font-size:2rem;line-height:3.2rem}
  .p-step__icon--web,.p-step__icon--doc,.p-step__icon--money{top:3.3rem}
  .p-step__icon--mail,.p-step__icon--phone{top:3.2rem}
  /* アイコンは HTML の width 属性（Figma 原寸 px）を rem に換算して拡縮させる */
  .p-step__icon img[width="76"]{width:7.6rem}
  .p-step__icon img[width="111"]{width:11.1rem}
  .p-step__icon img[width="175"]{width:17.5rem}
  .p-step__icon img[width="102"]{width:10.2rem}
  .p-step__label{left:1.7rem;right:1.7rem;font-size:1.8rem}
  .p-step__note{margin-top:1rem;font-size:1.5rem;line-height:1.6}

  .scroll-hint-icon{width:14rem;left:calc(50% - 7rem);padding:2rem 1rem 1rem}
  .scroll-hint-text{font-size:1.1rem;letter-spacing:0;white-space:nowrap}

  /* ---- よくあるご質問 ---- */
  .p-faq{width:35rem;padding:6rem 0}
  .p-detail + .p-faq{padding-top:0}
  .p-faq__icon{width:10rem;height:4.75rem}
  .p-faq__title{margin-top:1rem;font-size:2.8rem;line-height:1.607}
  .p-faq__head .c-lead{margin-top:2rem;font-size:1.5rem;line-height:1.6}
  .p-faq__body{flex-direction:column;gap:4rem;margin-top:3rem}
  .p-faq__list{width:100%}
  .p-faq__item + .p-faq__item{margin-top:1.5rem}
  .p-faq__toggle{height:auto;min-height:4.9rem;padding:1rem 1.5rem;gap:1rem;font-size:1.6rem;border-radius:.7rem .7rem 0 0}
  .p-faq__toggle[aria-expanded="false"]{border-radius:.7rem}
  .p-faq__plus{flex-basis:2rem;width:2rem;height:2rem}
  .p-faq__plus::before{width:1.8rem;height:.25rem}
  .p-faq__plus::after{width:.25rem;height:1.8rem}
  .p-faq__a-inner{padding:1.5rem 1.2rem 2rem;border-width:.3rem;border-radius:0 0 .7rem .7rem;font-size:1.5rem;line-height:1.6}

  .p-tel{width:100%;padding:2rem 1.8rem;border-width:.2rem}
  .p-tel__title{font-size:2rem}
  .p-tel__text{margin-top:1.5rem;font-size:1.5rem;line-height:1.6}
  .p-tel__num{margin-top:1rem;font-size:3.4rem}
  .p-tel__time{font-size:1.3rem;line-height:1.6;letter-spacing:0}

  /* ---- footer ---- */
  .l-footer{height:auto;padding:1.4rem 1rem}
  .l-footer__copy{font-size:1.2rem;line-height:1.583}

  /* ---- 下部固定CTA（Figma SP の KV 直下の帯） ---- */
  .p-cta{box-shadow:none;background:none}
  .p-cta__inner{gap:0;padding:0}
  .p-cta__btn{flex:1;width:auto;height:var(--cta-h);border-radius:0;box-shadow:none}
  .p-cta__btn .c-btn__sub{font-size:1.4rem;line-height:1.571;letter-spacing:.1em}
  .p-cta__btn .c-btn__main{margin-top:-.2rem;font-size:1.6rem;line-height:1.625}
  .p-cta__btn.c-btn--single .c-btn__main{margin-top:0;font-size:1.8rem;line-height:1.611}
  .p-cta__btn .c-btn__arrow{display:none}

  /* 図の拡大モーダル */
  .c-modal{width:35rem;max-width:none;max-height:calc(100% - 4rem);padding:0;border:0;border-radius:1rem;background:#fff;color:var(--text,#333);overflow:auto}
  .c-modal::backdrop{background:rgba(0,0,0,.6)}
  .c-modal[open]{animation:c-modal-in .2s ease-out}
  .c-modal__inner{position:relative;padding:5rem 1.5rem 2.5rem}
  .c-modal__title{font-size:1.8rem;font-weight:700;line-height:1.611;text-align:center}
  .c-modal__img{display:block;width:100%;height:auto;margin-top:1.5rem}
  .c-modal__close{position:absolute;top:1rem;right:1rem;width:3.5rem;height:3.5rem;padding:.5rem;border:0;background:none}
  .c-modal__close img{display:block;width:2.5rem;height:2.5rem}
  .c-modal__back{display:block;width:20rem;height:4.4rem;margin:2.5rem auto 0;border:.2rem solid #333;border-radius:2.2rem;background:#fff;color:inherit;font-size:1.5rem;font-weight:700;text-align:center;text-indent:.1em}
  @keyframes c-modal-in{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
  /* 1 ボタンの帯は矢印あり（Figma: 20×18px・右から 20px）。2 分割（教育ローン）は Figma どおり矢印なし */
  .p-cta__btn.c-btn--single .c-btn__arrow{display:block;right:2rem;width:2rem;height:1.8rem;margin-top:-.9rem}
}

/* 500px 超（横向きスマホ／小型タブレット）では拡大を停止 */
@media screen and (min-width:500px) and (max-width:767px){
  html{font-size:12.82px}
}