@charset "UTF-8";

/* =========================================================
   ほくでんBANK / style.css
   構成:
     1. デザイントークン（:root）
     2. リセット
     3. ベーススタイル
     4. 共通コンポーネント
     5. ページ別セクション
     6. SP（max-width: 768px）
   ========================================================= */

/* ===== 1. デザイントークン ===== */

:root {

  --color-primary:          #0168b6;
  --color-accent:           #ff4f14;
  --color-text:             #333333;
  --color-text-mute:        #888888;
  --color-white:            #ffffff;
  --color-bg-light-blue:    #eef7ff;
  --color-bg-tab:           #e3f1ff;  /* 注意事項の開閉タブ */
  --color-border-blue:      #cce1f0;
  --color-border-blue-2:    #d2e5f2;
  --color-bg-light-orange:  #ffe9de;
  --color-primary-dark:     #094d81;
  --color-overlay-menu:     rgba(30, 30, 30, 0.9);

  --gradient-title: linear-gradient(90deg,
    #b9dcf5 0%, #f4f9ff 50%, #dfe5fb 75.481%, #ffe9df 100%);
  --gradient-panel: linear-gradient(90deg,
    #d2e5f2 0%, #e3f1ff 50%, #e9eaf9 75.481%, #ffe5d8 100%);
  --gradient-cta: linear-gradient(90deg, #ff7130 0%, #ff8a30 100%);
  --gradient-secondary: linear-gradient(90deg, #0168b6 0%, #2b9cf2 100%);

  --shadow-cta:    -4px 6px 4px 1px rgba(152, 64, 7, 0.21);
  --shadow-anchor: -4px 6px 4px 1px rgba(1, 104, 182, 0.18);
  --shadow-sticky: -3px 5px 6px 1px rgba(24, 63, 92, 0.25);

  --font-jp: 'Zen Kaku Gothic New', sans-serif;
  --font-en: 'Plus Jakarta Sans', sans-serif;

  --pc-base:        1728px;
  /* 縮小を始める下限幅。これより広い画面ではデザインを原寸のまま保ち、
     1728px との差分は左右の余白（--inner-width / --header-width の外側）だけで吸収する。
     1400px = ヘッダー 1320px + 左右 40px。これ以上狭めるとヘッダーが画面端に密着する */
  --pc-floor:       1400px;
  --inner-width:    1200px;
  --header-width:   1320px;
  --header-height:  72px;
  --sticky-height:  104px;
  --header-top:     16px;
  /* 下追従バーは全ページ共通のため、浮くヘッダーと対称の余白を持たせる */
  --sticky-bottom:  16px;
  --sticky-panel-width: 1208px;

  --body-offset-top:    calc(var(--header-top) + var(--header-height));
  --body-offset-bottom: calc(var(--sticky-height) + var(--sticky-bottom));

  --scale-unit: calc(100vw / 390);

  /* SP の --scale-unit と同じ「基準幅に対する比率」という考え方。
     PC 側は px 値を 932 箇所持つため、個々の値を calc に置き換えるのではなく
     body の zoom でレイアウトごと縮める（→ 3. ベーススタイル末尾のメディアクエリ）。
     既定値 1 は SP・および zoom 非対応ブラウザでのフォールバックを兼ねる。
     PC の実値は index.js が単位なしの数値として書き込む */
  --pc-scale: 1;
  --mv-zoom: 1;

  --radius-card:  10px;
  --radius-btn:   100px;
  --radius-pill:  50px;
  --radius-badge: 30px;
  --radius-title: 70px;

  --z-header: 1000;
  --z-sticky: 900;
  --z-modal:  1100;

  --menu-duration: 0.2s;
  --hover-duration: 0.2s;

  --hover-opacity: 0.7;

  --focus-ring-color:  #0a1f44;
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;
}

/* ===== 2. リセット ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
}

/* ===== 3. ベーススタイル ===== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--body-offset-top);
}

body {
  /* PC のキャンバス幅。--pc-floor までは画面幅に追従して左右余白だけが縮み、
     それ以下では --pc-scale の zoom でレイアウトごと縮小する。
     min-width を外すと固定幅前提の絶対配置が包含ブロックを失うため残す */
  min-width: var(--pc-floor);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  background-color: var(--color-bg-light-blue);
  padding-top: var(--body-offset-top);
  padding-bottom: var(--body-offset-bottom);
  -webkit-font-smoothing: antialiased;
}

.en {
  font-family: var(--font-en);
}

/* スクリーンリーダー専用テキスト */
/* PC / SP で改行位置が異なる箇所（Figma の折り返しが breakpoint ごとに違う） */
.br-sp { display: none; }

.txt-sp { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  /* clip-path: inset(50%) を併記するのが現代的な書き方だが、W3C CSS Validator が
     「Property clip-path doesn't exist」でエラーにするため clip 単独にしている。
     この要素は position: absolute なので clip だけで全ブラウザで意図どおり隠れる */
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.l-inner {
  width: var(--inner-width);
  margin-inline: auto;
}

/* PC のレスポンシブ（769px 以上）。画面幅の減り方を 2 段階で吸収する。

   (1) 1728px → --pc-floor（1400px）: 縮小しない。
      コンテンツ（1200px）とヘッダー（1320px）は固定幅のまま中央寄せなので、
      body の幅が画面幅に追従するだけで左右の余白が自動的に痩せていく。
      文字サイズは本文の基準値 16px を保つ。
   (2) --pc-floor 未満: これ以上余白を削れないため、--pc-scale の zoom で
      レイアウトごと等比縮小する。SP の --scale-unit（390px 基準）と同じ考え方。

   zoom を使う理由:
   - transform: scale と違い zoom はレイアウトに影響するため、高さも一緒に縮んで
     後続要素との間に余白が生まれない（MDN: zoom はページレイアウトに影響する）
   - PC 側は px 値を 932 箇所・絶対配置を 64 箇所持つため、個々の値を calc へ
     置き換えるより座標系ごと縮めるほうが Figma の設計値をそのまま保てる

   実装上の要点:
   - --pc-scale / --mv-zoom は index.js が単位なしの数値まで計算する。
     CSS の「長さ ÷ 長さ」は Firefox で zoom の数値として解決されないため使用しない
   - 幅は 100vw ではなく --vw を使う。100vw は縦スクロールバーの幅を含むため、
     クラシックスクロールバーの環境ではその幅の分だけ横スクロールが出る。
     --vw は index.js が documentElement.clientWidth（スクロールバーを含まない幅）を
     px で書き込む。当初はコンテナクエリ単位 100cqw を使っていたが、W3C CSS Validator が
     cqw を解釈できず Parse Error になるため JS 実測に切り替えた。
     JS 無効時は 100vw にフォールバックする（スクロールバー幅ぶんだけ横スクロールが出るが崩れない）
   - JS 側の min(1, …) で --pc-floor 超は等倍に頭打ちする
   - メディアクエリは zoom の影響を受けないので、768px の PC / SP 境界は変わらない */
@media (min-width: 769px) {
  html {
    scroll-padding-top: calc(var(--body-offset-top) * var(--pc-scale));
  }

  body {
    zoom: var(--pc-scale);
  }

  /* PC では data-modal-media の CTA はリンク遷移せずモーダルを開くため、
     SP の直接遷移用に付けた「別ウィンドウ」案内は読み上げない。 */
  [data-modal-media] > .visually-hidden {
    display: none;
  }
}

/* 動きを控える設定（OS の「視差効果を減らす」等）への対応。
   本サイトの動きは 4 種類しかないため、尺を持つ変数を 0 に落として個別に止める。
   - アンカーのスムーススクロール（html の scroll-behavior）
   - SP ハンバーガーの ≡ ⇔ × 変形（--menu-duration）
   - FAQ アコーディオンの開閉（--faq-duration / 5-8 の .faq__item 側で定義）
   - リンク・ボタンのホバー（--hover-duration / 4-0b）
   ※ ホバーは尺だけ 0 にして「変化そのもの」は残す。動きを止めても
     ポインタが今どこにあるかは伝える必要があるため（WCAG 2.4.7 と同じ考え方）
   JS 側のスムーススクロール（カルーセルのドット）は index.js で同じメディアクエリを見ている */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  :root {
    --menu-duration: 0s;
    --hover-duration: 0s;
  }
}

/* ===== 4. 共通コンポーネント ===== */

/* --- 4-0. フォーカスリング（キーボード操作時のみ） --- */
/* 本サイトは「薄い青／白の面」と「ブランドブルー #0168b6 の面」が混在するため、
   1 色では WCAG 1.4.11（非テキストコントラスト 3:1）を両方で満たせない。
   既定は濃紺、青ベタの面（ヘッダー・フッター青エリア・モーダルのオーバーレイ）では
   白に反転させ、どの面でも 3:1 以上を確保する。

   コントラスト比（実算出値）:
     濃紺 #0a1f44 × 地色 #eef7ff = 15.00 / × 白 = 16.25 / × CTA のオレンジ #ff7130 = 5.92
     白 #ffffff  × ブランドブルー #0168b6 = 5.74 / × オーバーレイ実効色 #717d99 = 4.12
   ※ 濃紺 × ブランドブルー は 2.83 で 3:1 に届かないため、青ベタの面では必ず白へ反転する
   トークン（--focus-ring-*）の定義は 1. デザイントークン 側にある */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* :focus-visible 非対応ブラウザ向けのフォールバック（ポインタ操作でもリングが出る） */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  [tabindex]:focus {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
}

/* スキップ先の <main> は tabindex="-1" でフォーカスを受けるだけなので、リングは出さない */
main:focus,
main:focus-visible {
  outline: none;
}

/* 本文へスキップ（WCAG 2.4.1）。フォーカスが当たったときだけ画面左上に現れる。
   Figma に指定がないためデザイントークンの範囲で組み、通常の見た目は一切変えない */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-modal) + 1);
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-card) 0;
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;

  translate: 0 -100%;
}

.skip-link:focus {
  translate: 0 0;
}

/* 青ベタの面に乗る要素はリングを白に反転する。
   フッター青エリアは「規約ボタンだけが青地」で、お問い合わせカードは白地のため
   .footer-bank 全体ではなく .btn--footer に限定する（カード内は既定の濃紺のまま） */
.header :focus-visible,
.btn--footer:focus-visible,
.modal__close:focus-visible {
  --focus-ring-color: var(--color-white);
}

/* お問い合わせカードは overflow: hidden で見出し帯を角丸に切っている。
   メールリンクはカード下端まで 2.8px しかないため、offset を詰めてリングを内側に収める */
.contact-card__mail:focus-visible {
  --focus-ring-offset: 0px;
}

/* --- 4-0b. ポインタ形状とホバー --- */

/* リンク・ボタンのポインタ形状。
   ブラウザ既定に任せると
   - <button> は多くの UA が cursor: default
   - href を持たない <a>（JS で開閉だけを足した場合）は cursor: auto
   となり、見た目が同じ部品でも形状が揃わない。
   面ではなくボタン／リンク自身に付けるので、ラッパー（p.cta-btn 等）には付けない */
a[href],
button,
[role='button'],
summary,
label[for] {
  cursor: pointer;
}

/* タップ時の演出（タッチ環境）。
   iOS / Android の既定のタップハイライトは半透明の黒い矩形で、
   - ブランドブルーのベタ面（注意事項パネルの見出しなど）では暗い板が一瞬かぶり、
     アコーディオンが開く瞬間の「ちらつき」に見える
   - 矩形なので、角丸 100px のピル型ボタンでは形が合わない
   ため消す。ホバーの演出は下の (hover: hover) で囲ってあってタッチ環境には効かないので、
   代わりに押している間だけ同じ不透明度へ落とし、タップが効いたことを伝える。
   尺は付けない（押した瞬間に返るほうが操作の手応えとして正しい）*/
a[href],
button,
[role='button'],
summary,
label[for] {
  -webkit-tap-highlight-color: transparent;
}

a[href]:active,
button:active,
[role='button']:active {
  opacity: var(--hover-opacity);
}

/* スキップリンクはフォーカス時だけ現れる案内なので、薄くしない（:hover と同じ扱い）*/
.skip-link:active {
  opacity: 1;
}

/* ホバー時の演出。
   Figma にホバー状態のデザインが無いため、レイアウトにも配色にも影響しない
   「不透明度を落とす」1 種類だけを全ページ共通で当てる。
   - opacity なので押せる範囲・文字位置・影の形は一切動かない
   - グラデーション（--gradient-cta 等）や画像ボタンも同じ見え方で暗くなる
   - 尺は --hover-duration（prefers-reduced-motion: reduce で 0s）

   マウス等の「重ねられる」ポインタでだけ有効にする。
   タッチ環境で :hover を許すと、タップ後にホバー状態が残り
   別の要素を触るまで薄いままになる（いわゆるスティッキーホバー） */
@media (hover: hover) and (pointer: fine) {
  a[href],
  button,
  [role='button'] {
    transition: opacity var(--hover-duration) ease;
  }

  a[href]:hover,
  button:hover,
  [role='button']:hover {
    opacity: var(--hover-opacity);
  }

  .skip-link:hover {
    opacity: 1;
  }
}

/* --- 4-1. ヘッダー --- */

.header {
  position: fixed;
  top: var(--header-top);
  left: 50%;
  z-index: var(--z-header);
  width: var(--header-width);
  height: var(--header-height);
  transform: translateX(-50%);
  border-radius: var(--radius-card);
  background-color: var(--color-primary);
}

.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 40px;
  padding-left: 38px;
}

.header__logo {
  flex-shrink: 0;
  width: 176px;
  height: 24px;
}

.header__logo-img--blue {
  display: none;
}

.header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header__nav {
  margin-left: auto;
}

.header__panel {
  display: contents;
}

.header__cta {
  display: none;
}

.header__toggle {
  display: none;
}

.header__list {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header__link {
  position: relative;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* 現在地のナビ項目に白い下線を引く（2026-09-14 No.79）。
   Figma に現在地の状態が描かれていないための独自実装。
   文字色を落とすと青地とのコントラストが AA を下回るため、白のまま下線で示す。
   nav の幅・座標を 1px も動かさないよう、余白ではなく疑似要素で描く。
   SP は帯（.header__link.is-current の background-color）で示すので打ち消す */
.header__link.is-current::after {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  content: "";
}

/* --- 4-2. ボタン 3 種 --- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* 右端に絶対配置する矢印（プライマリ / セカンダリ / アンカー / フッター） */
.btn__arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
}

.btn__arrow--inline {
  position: static;
  translate: none;
}

/* ページ内リンク（Anker）の矢印は下向き。書き出しは右向き 1 種のため 90deg 回す */
.btn__arrow--down {
  rotate: 90deg;
}

/* ボタン上半分のツヤ帯（プライマリ / セカンダリ）
   z-index: -1 で「背景の上・テキストの下」に敷く */
.btn--primary,
.btn--secondary {
  z-index: 0;
}

.btn--primary::before,
.btn--secondary::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 50%;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  background-color: rgba(255, 255, 255, 0.2);
}

.btn--primary {
  width: 680px;
  height: 80px;
  border-radius: var(--radius-btn);
  background-image: var(--gradient-cta);
  box-shadow: var(--shadow-cta);
  color: var(--color-white);
  font-size: 24px;
}

.btn--primary .btn__arrow {
  width: 40px;
  height: 40px;
}

.btn--secondary {
  width: 520px;
  height: 56px;
  border-radius: var(--radius-btn);
  background-image: var(--gradient-secondary);
  box-shadow: var(--shadow-anchor);
  color: var(--color-white);
  font-size: 20px;
}

.btn--anchor {
  width: 360px;
  height: 56px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-btn);
  background-color: var(--color-white);
  box-shadow: var(--shadow-anchor);
  color: var(--color-primary);
  font-size: 20px;
}

.btn--footer {
  width: 588px;
  height: 56px;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-btn);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.btn--footer .btn__arrow {
  right: 24px;
}

.btn--text {
  gap: 4px;
  width: 240px;
  height: 32px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.btn__arrow--link {
  width: 16px;
  height: 16px;
}

.btn--w680 { width: 680px; }
.btn--w588 { width: 588px; }
.btn--w580 { width: 580px; }
.btn--w520 { width: 520px; }
.btn--w360 { width: 360px; }
.btn--w262 { width: 262px; }
.btn--w240 { width: 240px; }

.btn--h56 { height: 56px; }
.btn--h80 { height: 80px; }

.btn--primary.btn--h56 {
  font-size: 20px;
}

.btn--primary.btn--h56 .btn__arrow {
  width: 32px;
  height: 32px;
}

.btn--secondary.btn--h80 {
  font-size: 24px;
}

.btn--secondary.btn--h80 .btn__arrow {
  width: 40px;
  height: 40px;
}

/* --- 4-3. セクション見出し --- */

.section-title {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 12px var(--title-band-offset);
  color: var(--color-text);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  --title-band-height: 20px;
  --title-band-offset: 13px;
}

.section-title::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: var(--title-band-height);
  background-image: var(--gradient-title);
}

.section-title--lg {
  padding-inline: 16px;
  font-size: 48px;
  --title-band-height: 24px;
  --title-band-offset: 15px;
}

.section-title--pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--color-border-blue);
  border-radius: var(--radius-title);
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: 24px;
}

.section-title--pill::after {
  content: none;
}

/* --- 4-4. CTA セクション --- */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: var(--pc-floor);
  height: 440px;
  padding-top: 180px;
  /* 白い平行四辺形は画面幅いっぱいに広がる帯。1728px 固定だと 1728px 超の画面で
     左右に地色が残るため、幅は 100% にして横方向へ引き伸ばす
     （SVG 側に preserveAspectRatio="none" を付けて縦横比の固定を外してある）。
     高さは固定するので、変わるのは斜線の角度だけ */
  background: url('../images/bg-cta.svg') no-repeat center top / 100% 440px;
  background-origin: border-box;
}

.cta--footer {
  height: 393px;
  padding-top: 196px;
  background-image: url('../images/bg-cta-footer.svg');
  background-size: 100% 393px;
}

/* --- 4-5. 下追従バー --- */

.sticky-bar {
  --sticky-duration: 0.3s;

  position: fixed;
  bottom: var(--sticky-bottom);
  left: 50%;
  z-index: var(--z-sticky);
  display: flex;
  align-items: flex-start;
  width: var(--header-width);
  height: var(--sticky-height);
  transform: translateX(-50%);
}

/* PC は MV の下端がバーの表示位置まで上がり、重ならなくなった時点で表示する
   （2026-09-14 No.55 / ユーザー確認済み）。
   付け外しは index.js の initStickyBar() が行う。

   隠す条件は PC（769px 以上）かつ MV を持つページ（通年 TOP / キャンペーン TOP）だけ。
   MV の無いページ・SP・JS 無効時は従来どおり常時表示になる。
   visibility も併せて切るのは、隠れている間にタブキーでパネルへ入れないようにするため */
@media (min-width: 769px) {
  /* 遷移は .is-ready（初回判定の直後に index.js が付ける）が付いてから効かせる。
     最初から transition を持たせると、読み込み時に隠す場合でも
     表示 → 非表示のフェードが 1 回走ってバーが一瞬見えてしまう */
  .sticky-bar.is-ready {
    transition:
      opacity var(--sticky-duration) ease,
      visibility var(--sticky-duration) ease,
      transform var(--sticky-duration) ease;
  }

  .sticky-bar.is-hidden {
    visibility: hidden;
    opacity: 0;
    /* バーの高さ + 浮き量ぶん下げて画面外へ逃がす */
    transform: translateX(-50%) translateY(calc(var(--sticky-height) + var(--sticky-bottom)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-bar {
    --sticky-duration: 0s;
  }
}

.sticky-bar__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sticky-panel-width);
  height: var(--sticky-height);
  border: 4px solid var(--color-primary);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sticky);
}

.sticky-bar__top {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-top: 12px;
  margin-left: 32px;
}

/* 書き出した SVG はドロップシャドウ（PC: dx -2 / dy 4 / blur 6 / spread 1）の分だけ
   94×94 と一回り大きく、円は左 9px・上 3px の位置にある。
   要素に押し込めると円が 80px → 68px に縮むため、原寸のまま絶対配置してずらす */
.sticky-bar__top img {
  position: absolute;
  top: -3px;
  left: -9px;

  max-width: none;
  width: 94px;
  height: 94px;
}

.sticky-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sticky-bar__lead {
  width: 552px;
  margin-left: 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.sticky-bar__marker {
  background: var(--gradient-title) no-repeat 0 100% / 100% 10px;
}

/* 1 行目は Figma のテキストが行末に全角スペースを 1 つ持つため、
   中央より 12px 左に寄る（Rectangle 254 = x 409 / 360 幅） */
.sticky-bar__marker--1 {
  margin-right: 24px;
}

/* 2 行目の帯（Rectangle 255 = 557 幅）は文字＋ロゴ 545 より左右 6px 大きい。
   padding で帯だけ広げ、負マージンで字送りは変えない。
   右の 1px は Figma のテキストノード幅 552 に合わせる差分 */
.sticky-bar__marker--2 {
  padding-inline: 6px;
  margin-right: 1px;
  margin-left: -6px;
}

.sticky-bar__logo {
  display: inline-block;
  width: 199px;
  height: 27px;
  /* Figma はロゴを「、」の字送りへ 14px 食い込ませている
     （テキスト終端 684 に対しロゴ左端 670）。これを入れないと
     文字 360 + ロゴ 199 = 559 が 552 に収まらず 3 行に折り返す */
  margin-left: -14px;

  vertical-align: -1px;
}

/* 口座開設 CTA の画像。2026-09-01 のクライアント指示で「（無料）」を削除したため、
   text-open-account.svg が 397 → 332.198px に縮んでいる（SP は 6 章） */
.sticky-bar__cta {
  flex-shrink: 0;
  width: 332.198px;
  height: 58px;
}

/* 絶対配置の基準は border の内側になるため、枠線の幅を差し引く */
.sticky-bar--campaign .sticky-bar__panel {
  display: block;
}

.sticky-bar__campaign-logo {
  position: absolute;
  top: 28px;
  left: 72px;
  width: 303px;
  height: 41px;
}

.sticky-bar__campaign-text {
  position: absolute;
  top: 29px;
  left: 375px;
  color: var(--color-primary);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

/* 1 文字目の「リ」だけ字送りが -3.6px（Figma 実測）。
   これが無いと 40 × 10 文字 = 400 になり、Figma の 397 と 3px ずれる */
.sticky-bar__campaign-text-a {
  letter-spacing: -3.6px;
}

.sticky-bar__campaign-state {
  position: absolute;
  top: 10px;
  left: 780px;
  color: #ff7330;
  font-size: 68px;
  font-weight: 900;
  line-height: 1;
}

/* 「実施中」に重なる白 20%（SP は 25%）のツヤ帯（Rectangle 250）。
   右下がりの四角形なので CSS では描けず、書き出した SVG を前面に敷く。
   DOM 順で「実施中」の後ろに置いてあるため z-index を持たせなくても手前に出る */
.sticky-bar__state-marker {
  position: absolute;
  top: 15px;
  left: 783px;
  width: 203px;
  height: 42px;
}

.sticky-bar__more {
  position: absolute;
  top: 35px;
  left: 1030px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ff7330;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

/* 事前エントリー CTA（キャンペーンTOP）。パネル全体が 1 つのリンクで、
   中身は Figma 座標そのままの絶対配置。基準は border（4px）の内側。
   overflow: hidden は期限帯（.sticky-bar__entry-deadline）を padding box
   ＝枠線の内側（角丸 10 - 4 = 6px）で切り抜くため。これが無いと、拡大率の丸めで
   帯の背景が青い枠線の上に乗る（2026-09-01 のクライアント指摘）*/
.sticky-bar--entry .sticky-bar__panel {
  display: block;
  overflow: hidden;
}

/* 2026-08-25 のクライアント指示で「（無料）」を削除した。テキスト幅が
   Figma の 641 → 481.25px に縮み、左端 78px のままだと右に 271px 空くため、
   期限帯の手前（パネル内側 0～752px）で中央に寄せ直している。
   左端 = (752 - 481.25) ÷ 2 = 135.375px（ヘッドレス実測 / ローカル TTF 使用）*/
.sticky-bar__entry-text {
  position: absolute;
  top: 10px;
  left: 135.375px;
  color: #ff7330;
  font-size: 55px;
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
}

/* 長音符と閉じ括弧だけ字送りが詰まる（Figma 実測）。
   これが無いとテキスト幅が Figma の 641px に収まらない */
.sticky-bar__entry-text-a {
  letter-spacing: -13.75px;
}

/* 「事前エントリーする」に重なる白 25% のツヤ帯（Rectangle 250）。
   右下がりの四角形なので CSS では描けず、書き出した SVG を前面に敷く。
   Figma は「テキストと同じ左端・6px だけ右に長い」（text 641 / marker 647）ので、
   （無料）削除後もその関係を保って 481.25 + 6 = 487.25px にしてある。
   SVG は preserveAspectRatio="none" なので width を変えれば斜辺の角度だけが変わる */
.sticky-bar__entry-marker {
  position: absolute;
  top: 22px;
  left: 135.375px;
  width: 487.25px;
  height: 41px;
}

/* 期限の帯（Rectangle 254）はパネル内側の右端いっぱい（448×96）。
   角丸 6px は パネルの radius 10 - 枠線 4px と一致する。
   グラデーションは --gradient-panel の逆向き。
   Figma のテキストノードは先頭に半角スペースを 1 つ持つ（x=987 / 幅 387）が、
   スペースを除いた見え幅の中心は帯の中心と一致するため中央寄せで組む */
.sticky-bar__entry-deadline {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 448px;
  /* Figma は 448×96（パネル内側の高さそのもの）。+2px はパネル側の
     overflow: hidden に吸収されるので枠線には出ず、拡大率の丸めで
     下端に隙間が出ることも防げる */
  height: calc(100% + 2px);
  border-radius: 0 6px 6px 0;
  background-image: linear-gradient(270deg,
    #d2e5f2 0%, #e3f1ff 50%, #e9eaf9 75.481%, #ffe5d8 100%);
  color: var(--color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* 口座開設 CTA。PC は modifier なしの base（おトクポイント）と
   完全に同一の外形・座標で、差分は SP だけ（→ 6 章）。
   リード文は「新しい銀行サービス、」で、base の「新しい金融サービス、」とは別文言。

   2026-09-01 のクライアント指示で、よくある質問の下追従バーは
   .sticky-bar--campaign（キャンペーン告知版）へ差し替えた。そのため
   .sticky-bar--account / base（__inner・__lead・__marker・__logo・__cta）と
   text-open-account*.svg は現在どのページからも参照されていないが、
   10/14 の切替で使うので残してある（組み込み手順は SWITCH-1014.md §1-⑧）*/

/* --- 4-6. フッター（ほくでんBANK 情報エリア / 青ベタ） --- */

.footer-bank {
  min-width: var(--pc-floor);
  padding: 56px 0;
  background-color: var(--color-primary);
}

.footer-bank__logo {
  width: 352px;
  height: 48px;
  margin-inline: auto;
}

.footer-bank__contact {
  position: relative;
  width: var(--inner-width);
  margin-block: 48px 0;
  margin-inline: auto;
  padding: 96px 56px 48px;
  background: url('../images/bg-panel-contact.svg') no-repeat 0 32px / 1200px 749px;
  background-origin: border-box;
}

.footer-bank__contact-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.footer-bank__legal {
  width: var(--inner-width);
  margin: 24px auto 0;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* 1 行 = 1 ブロック。PC はラベル揃え・ぶら下げを持たないので、
   従来の <br> 区切りと同じ見た目になる */
.footer-bank__legal-row {
  display: block;
}

.footer-bank__legal-heading {
  font-weight: 500;
}

.footer-bank__terms {
  display: flex;
  justify-content: space-between;
  width: var(--inner-width);
  margin: 32px auto 0;
}

.contact-card {
  /* 見出し帯（.contact-card__title の --gradient-panel）を角丸に切り抜くために必要。
     外す・clip に変えるといずれも角が階段状になる（実測で確認済み）。
     この clip でメールリンクのフォーカスリングが切れるため、リング側で offset を 0 にしている */
  overflow: hidden;
  border: 2px solid var(--color-border-blue);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.contact-card + .contact-card {
  margin-top: 16px;
}

.contact-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background-image: var(--gradient-panel);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.contact-card__center {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

.contact-card__tel {
  margin-left: 8px;
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  line-height: 0.97;
}

.contact-card__hours {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

.contact-card__hours-note {
  font-size: 14px;
  font-weight: 400;
}

.contact-card__mail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
}

/* line-height を inline-flex の実高（20px）に揃えないと、行ボックスに
   ストラットの descent 分（0.8px）が残ってリンク行が 36.8px に膨らむ。
   下の 24px は枠線 2px を含むため padding は 22px */
.contact-card__mail-wrap {
  margin-bottom: 22px;
  line-height: 20px;
  text-align: center;
}

.contact-table {
  width: 1008px;
  margin: 16px auto 12px;
  table-layout: fixed;
  text-align: left;
}

.contact-table th {
  padding-bottom: 12px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.contact-table td {
  padding: 12px 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  vertical-align: middle;
}

/* 点線をセル（td）に敷くと列幅へ圧縮され、
   破線のピッチが列ごとに 1.5px / 0.55px / 0.92px と変わるうえ、
   位相も列頭でリセットされるため境目で線が途切れる。
   行（tr）に敷き、等倍の SVG 1 枚で端まで通す。
   ※ 縦罫は PC には無い（SP のみ。→ 6-6 の .contact-table） */
.contact-table tbody tr {
  background: url('../images/divider-dotted.svg') no-repeat 0 0 / 100% 1px;
}

.contact-table__col--subject { width: 514px; }
.contact-table__col--voice   { width: 184px; }
.contact-table__col--hours   { width: 310px; }

/* .contact-table td の padding ショートハンド（0,1,1）が
     クラス単独（0,1,0）に勝ってしまうため、必ず要素で修飾して指定する */
.contact-table th.contact-table__col--subject,
.contact-table td.contact-table__col--subject { padding-left: 8px; }
.contact-table td.contact-table__col--voice   { padding-left: 23px; }

.contact-table__voice {
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.contact-table__list li {
  line-height: 1.2;
}

/* --- 4-6b. フッター（北海道電力 共通 / 支給マークアップ） ---
   HTML はクライアント支給の hepco 共通フッターをそのまま入れているため、
   クラス名は hepco 側の体系（単一アンダースコア）で BEM ではない。
   矢印アイコンと区切り線は支給 HTML に <img> が無いので、
   既存アセットを疑似要素の background-image で敷いて再現している */

/* 下追従バーの TOP ボタン（.sticky-bar__top）と役割が重複するため出さない */
.returntop {
  display: none;
}

/* body は下追従バーの高さぶん padding-bottom（--body-offset-bottom）を持つが、
   そこは body の地色（--color-bg-light-blue）が出るため、バーの左右と下に薄青が残る。
   padding-bottom に --body-offset-bottom を足して白を伸ばし、同じ量の負マージンで
   ページ全体の高さを変えずにバーの裏へ潜り込ませる。
   Figma の白エリア 260px は「padding-top 56 + 内容 154.8 + padding-bottom 49.2」で作る。
   height 固定にしないのは、コピーライトが折り返しても白が切れないようにするため */
.footer {
  min-width: var(--pc-floor);
  margin-bottom: calc(var(--body-offset-bottom) * -1);
  padding-top: 56px;
  padding-bottom: calc(49.2px + var(--body-offset-bottom));
  background-color: var(--color-white);
}

.footer_inner {
  width: var(--inner-width);
  margin-inline: auto;
}

/* 8 項目の合計幅を 1200px の中で中央に置く。
   Figma の nav 行はハグ幅で 1728px の中央に配置されているため、
   左詰め（既定）だと右に余りが出て 7 番目以降が左へずれる */
.footernav_list {
  display: flex;
  justify-content: center;
  gap: 26px;
}

/* <li> をフレックスにして行ボックスを作らせない。
   ブロックのままだと li の strut（16px x line-height 1.4 = 22.4px）が
   リンクの高さ 19.2px を上回り、下部リンク以降が 3px 下がる。
   リンク側の flex-grow は SP でグリッドのセル幅いっぱいをタップ領域にするためのもの
   （PC は li 自体が内容幅なので効かない） */
.footernav_item {
  display: flex;
}

.footernav_link {
  display: inline-flex;
  flex-grow: 1;
  align-items: flex-start;
  gap: 5px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.footernav_link::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: url('../images/icon-arrow-nav-16.svg') no-repeat center / 16px 16px;
}

.footer_middle {
  margin-top: 40px;
}

/* 項目間は「12px + 区切り線 1px + 12px」= 25px。線は .footerlink_item の ::after で描く */
.footerlink {
  display: flex;
  align-items: center;
  column-gap: 25px;
}

.footerlink_item {
  position: relative;
  display: flex;
  align-items: center;
}

/* 区切り線を持つ項目は線の高さ（20px）で行の高さが決まっていた。
   線を絶対配置にして幅も高さも持たせないぶん、ここで明示して行送りを保つ */
.footerlink_item:not(:last-child) {
  height: 20px;
}

/* 区切り線。絶対配置にするのは、項目の幅に線が加算されて
   SP の折り返し位置が変わるのを防ぐため（従来は幅 0 の flex アイテムだった）。
   右側に置くのは、行末に来た線が現行と同じくその行の末尾に残るようにするため */
.footerlink_item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -13px;
  width: 1px;
  height: 20px;
  margin-top: -10px;
  background: url('../images/divider-vertical.svg') no-repeat center / 1px 20px;
}

.footerlink_link {
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.footer_bottom {
  margin-top: 56px;
}

/* <small> はインラインなのでブロック化してから中央寄せする */
.copyright {
  display: block;
  color: #adadad;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

/* 支給マークアップが持つ SP 専用改行（コピーライト内） */
.sp_vis {
  display: none;
}

/* ===== 5. ページ別セクション ===== */

/* .section-title は帯幅をテキスト幅に合わせるため inline-block。
   見出し単体で使う箇所はブロック化して、行ボックスのディセンダ分の余白を作らない */
.point__head .section-title,
.flow__head .section-title,
.faq__head .section-title,
.point-block__body .section-title {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

/* --- 5-1. index: MV --- */
/* リボンとキャッチはアウトライン化された vector なので、書き出した SVG を
   背景に敷き、テキストは DOM に残す（画像置換）。
   タグラインは Zen Kaku Gothic New（採用フォント）なので PC だけライブテキスト。
   現行は PC 2954:13 / SP 2956:4309（旧版 PC 2809:3466「MV_bk」・SP 2956:4042 は hidden） */

.mv {
  position: relative;
  height: 690px;
  margin-top: calc(var(--body-offset-top) * -1);
}

/* 画面幅いっぱいに伸ばすため、SVGの白い下地も背景色として一緒に伸ばす
   （Figma の Rectangle 282 は 1728x690 の白ベタなので背景色で代用する） */
.mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1728px;
  height: 690px;
  background-color: var(--color-white);
}

/* MV だけは 1728px のキャンバスを必要とする（端末が右端 1711px まで届き、
   キャッチとの間に詰められる余白がないため、他セクションのように余白では吸収できない）。
   そこで MV には body とは別のスケールを与え、1728px 基準で単独に縮小する。
   - index.js が --mv-zoom = （MV に要る総倍率 1728 基準）÷（body の --pc-scale）を算出
     1728px 超 … 1 ／ 1400～1728px … 画面幅/1728 ／ 1400px 未満 … 1400/1728 で一定
   - 背景（グラデーションの帯）だけは全幅に伸ばすので、キャンバスの外へはみ出させる */
@media (min-width: 769px) {
  .mv {
    width: var(--pc-base);
    margin-inline: auto;

    margin-top: calc(var(--body-offset-top) * -1 / var(--mv-zoom));
    zoom: var(--mv-zoom);
  }

  /* 1728px 超の画面では画面幅まで、それ以下ではキャンバス幅まで伸ばす
     （mv-bg.svg は preserveAspectRatio="none" のため横方向にだけ伸びる）。
     max-width はリセットの img { max-width: 100% } を解除するために要る
     （包含ブロック = .mv の 1728px で頭打ちになってしまうため）*/
  .mv__bg {
    left: 50%;
    width: max(var(--pc-base), var(--vw, 100vw));
    max-width: none;
    translate: -50%;
  }
}

/* --- タグライン --- */
/* PC は Zen Kaku Gothic New（採用フォント）なのでライブテキストで組む。
   ロゴを挟んで 2 行に分かれており、SP は 2 行ともアウトライン化された vector なので
   6 章で背景画像に差し替える */

.mv__tagline {
  position: absolute;
  top: 134px;
  left: 263.088px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.88px;
  white-space: nowrap;
}

/* 「おトク」だけ 43px・青。Figma 実測は #0068b7 で、
   --color-primary（#0168b6）とは別指定なのでそのまま書く */
.mv__tagline-em {
  color: #0068b7;
  font-size: 43px;
  letter-spacing: -0.86px;
}

/* 2 行目は 32px で、行の高さは中の「おトク」（43px x 1.45 = 62.35px）が決める。
   Figma のテキスト枠 930x62 と一致するので top は Figma の y をそのまま書く */
.mv__tagline--sub {
  top: 362px;
  left: 262px;
  font-size: 32px;
  line-height: 1.45;
  letter-spacing: -0.66px;
}

/* 「。」だけ Figma の字送りが -13.44px（= -42%）。以降の文字が 13.44px 左へ寄るので、
   入れないと 2 行目全体が Figma より 13.44px 長くなる */
.mv__tagline-kern {
  letter-spacing: -13.44px;
}

/* ロゴ枠は Figma 上 955x134 だが、中の画像は 954.618x131.132 に置かれている。
   枠ではなく画像の実寸で敷かないと縦に伸びる */
.mv__logo {
  position: absolute;
  top: 211.434px;
  left: 264.382px;
  width: 954.618px;
  height: 131.132px;
}

/* --- リボンとキャッチ（画像置換） --- */

.mv__ribbon,
.mv__lead {
  position: absolute;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-indent: 100%;
  white-space: nowrap;
}

/* リボンは房の片側が反転しているため get_metadata の bbox が数 px ずれる。
   位置は export SVG の祖先 rect の translate(-839 -103.001) を符号反転して取った */
.mv__ribbon {
  top: 103.001px;
  left: 839px;
  width: 446px;
  height: 160px;
  background-image: url('../images/mv-ribbon.svg');
}

/* --- キャッチのパネルとイラスト --- */

.mv__pill {
  position: absolute;
  top: 550px;
  left: 264px;
  width: 870px;
  height: 100px;
  border-radius: var(--radius-card);
  background-color: #fbfdff;
}

.mv__lead {
  top: 17.737px;
  left: 72.74px;
  width: 727px;
  height: 56px;
  background-image: url('../images/mv-catch.svg');
}

.mv__coin {
  position: absolute;
}

.mv__coin--left {
  top: 11px;
  left: 15px;
  width: 56px;
  height: 76px;
}

.mv__coin--right {
  top: 14.292px;
  left: 800.48px;
  width: 56px;
  height: 73px;
}

/* --- スマホ --- */
/* Figma の bbox（310.954x457.981）は回転後の外接矩形なので、回転前の
   277.302x437.465 を bbox の中心に合わせてから回す。
   影は画像のアルファに沿わせたいので box-shadow ではなく drop-shadow を使う
   （角が透明な PNG なので box-shadow だと四角い影になる）。
   drop-shadow は回転と同じ座標系で掛かるため影も 4.53 度回るが、
   ずれは 0.4px 未満なので Figma（親座標系で影を掛ける）との差は無視できる */
.mv__phone {
  position: absolute;
  top: 221.248px;
  left: 1170.046px;
  width: 277.297px;
  height: 437.458px;
  rotate: 4.53deg;
  filter: drop-shadow(1px 5px 5px rgba(12, 55, 87, 0.35));
}

/* PC は枠と画像が同寸なので、そのまま枠いっぱいに敷く（切り落としは SP だけ）*/
.mv__phone-img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- キラキラ --- */
/* 6 個とも色・大きさの違う別ノード（opacity 0.5 は SVG 側に入っている）。
   位置と寸法は export SVG の祖先 rect の translate と viewBox から取った。
   PC と SP は形状こそ相似だが export の枠が別々に整数へ丸められるため、
   PC の SVG を SP の枠へ入れると最大 1px ずれる。6 本とも -sp を用意して 6 章で差し替える */

.mv__sparkle {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mv__sparkle--1 {
  top: 121.825px;
  left: 1255.17px;
  width: 28px;
  height: 32px;
  background-image: url('../images/mv-sparkle-1.svg');
}

.mv__sparkle--2 {
  top: 151.72px;
  left: 1277.06px;
  width: 19px;
  height: 22px;
  background-image: url('../images/mv-sparkle-2.svg');
}

.mv__sparkle--3 {
  top: 262.056px;
  left: 1460.66px;
  width: 28px;
  height: 32px;
  background-image: url('../images/mv-sparkle-3.svg');
}

.mv__sparkle--4 {
  top: 245.141px;
  left: 1485.58px;
  width: 19px;
  height: 22px;
  background-image: url('../images/mv-sparkle-4.svg');
}

.mv__sparkle--5 {
  top: 447.731px;
  left: 1010.38px;
  width: 23px;
  height: 29px;
  background-image: url('../images/mv-sparkle-5.svg');
}

.mv__sparkle--6 {
  top: 430px;
  left: 992.039px;
  width: 19px;
  height: 22px;
  background-image: url('../images/mv-sparkle-6.svg');
}

/* --- 5-2. index: CTA (1)と注釈 --- */
/* 注釈は PC がボタンの上、SP がボタンの下で前後関係が逆なので、
   縦積みの flex にして SP 側だけ order で入れ替える */

.mv-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* line-height 1.4だと行送りは19.6pxになるが、
   ここを行送り任せにすると以降のセクションが 0.4px ずつ上へずれるため実測値で固定する */
.mv-cta__note {
  width: var(--inner-width);
  height: 20px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.mv-cta__note a {
  color: var(--color-primary);
  text-decoration: underline;
}

.cta-btn {
  width: 726px;
  margin-top: 12px;
}

/* MV の CTA だけ幅 726・字送り 0.48px（他ページの CTA は 680・字送りなし） */
.btn--primary.btn--mv {
  width: 726px;
  letter-spacing: 0.48px;
}

/* --- 5-3. index: 重要なお知らせ --- */

.news {
  position: relative;
  /* 公開後は運用担当者が件数を増減させるため、高さは固定せず124pxを下限として伸ばす。
     固定にすると 3 件目や 2 行の見出しが白枠の外へはみ出す（→ index.html のコメント） */
  min-height: 124px;
  margin-top: 80px;
  border: 2px solid var(--color-border-blue);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

/* 絶対配置の基準はborderの内側。縦は上下中央に置き、枠が伸びても中央を保つ */
.news__head {
  position: absolute;
  top: 50%;
  left: 46px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transform: translateY(-50%);
}

.news__icon {
  width: 24px;
  height: 28px;
}

.news__title {
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

/* 枠を件数に追従させるため絶対配置ではなくフローで置く。
   左 262・上下 22 は Figma 実測（左 264 / 上下 24）から border 2px を引いた値 */
.news__list {
  width: 888px;
  margin-left: 262px;
  padding: 22px 0;
}

.news__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.news__item + .news__item {
  margin-top: 12px;
  padding-top: 13px;
  background: url('../images/divider-news.svg') no-repeat left top / 888px 1px;
}

.news__body {
  position: relative;
  min-width: 0;
  padding-left: 80px;
}

.news__date {
  position: absolute;
  top: 7px;
  left: 0;
  color: var(--color-text-mute);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.news__link {
  display: block;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

/* リンク文の末尾に付くため inline-block。行ボックスは 16px/1.6 のまま保ち、
   26px のアイコン中心を行の中央へ寄せる（Zen Kaku の ascent 0.88 / descent 0.12 前提） */
.news__pdf {
  display: inline-block;
  width: 15px;
  height: 26px;
  margin-left: 6px;
  vertical-align: -6.92px;
}

/* --- 5-4. index: ほくでんBANKとは --- */

.about {
  margin-top: 112px;
}

.about__title {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 40px;
}

.about__logo {
  width: 290px;
  height: 40px;
}

.about__title-suffix {
  margin-top: 4px;
  margin-left: 3px;
  color: var(--color-text);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.about__lead {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

/* 矢印を絶対配置する基準。上マージンをトラックではなくラッパーが持つのは、
   マージン相殺でラッパーの上端がどこに来るかを曖昧にしないため（SP の矢印の top はここ基準） */
.about__carousel {
  position: relative;
  margin-top: 40px;

  --carousel-duration: 0.3s;
}

/* アニメーションを控える設定では矢印を即座に移動させる */
@media (prefers-reduced-motion: reduce) {
  .about__carousel {
    --carousel-duration: 0s;
  }
}

.about__cards {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.about-card {
  overflow: hidden;
  border: 2px solid var(--color-border-blue);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.about-card--main { width: 460px; height: 435px; }
.about-card--sub  { width: 346px; height: 394px; }

.about-card__title {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14px;
  background-image: var(--gradient-panel);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.about-card--main .about-card__title { height: 50px; line-height: 1; }
.about-card--sub  .about-card__title { height: 54px; line-height: 1.2; }

.about-card__illust {
  display: flex;
  justify-content: center;
}

.about-card--main .about-card__illust { margin-top: 24px; }
.about-card--sub  .about-card__illust { margin-top: 20px; }

.about-card__btn {
  display: flex;
  justify-content: center;
}

.about-card__btn .btn__arrow--inline {
  rotate: 90deg;
}

.about-card--main .about-card__btn { margin-top: 12px; }
.about-card--sub  .about-card__btn { margin-top: 18px; }

/* 注釈の幅で改行位置を制御する。「スマホで楽々銀行取引」カードには注釈が無い。
   No.90 でエネモポイントの注釈が長くなり、PC は読点の後ろの <br class="br-pc"> で
   2 行に割る。幅 364px はその 2 行目の実測幅（ローカルフォントで計測）で、
   狭めると 3 行目に「さい。」だけが落ちる */
.about-card__note {
  margin-top: 8px;
  margin-inline: auto;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.4;
}

.about-card--point .about-card__note       { width: 364px; }
.about-card--electricity .about-card__note { width: 250px; }

/* カルーセルの操作部は SP のみ（PC は 3 枚を横並び表示するため不要） */
.about__controls,
.about__dots {
  display: none;
}

.about__more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.about + .cta {
  margin-top: 64px;
}

/* --- 5-5. index: ポイント --- */

.point {
  margin-top: 64px;
}

.point__head {
  text-align: center;
}

/* 36px の中に 52px の数字が入るため、帯位置のオフセットが通常の見出しと異なる */
.point__title {
  --title-band-offset: 11px;
}

.point__title-num {
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 52px;
  font-weight: 700;
}

.point__title-unit {
  font-family: var(--font-en);
  font-weight: 800;
}

.point__divider {
  height: 2px;
  border: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-white) 0 4px,
    transparent 4px 8px
  );
}

/* 区切り線は前後に余白を取って独立して置く（直前ブロックへの食い込みは
   2026-08-26 の Figma 更新で無くなった）。線自体の高さ 2px を差し引いて
   直後のブロックの margin-top と分け合う（達成条件 40 + 2 + 54 / 電気料金 56 + 2 + 44） */
.condition + .point__divider  { margin-top: 40px; }
.point-block + .point__divider { margin-top: 56px; }

.condition {
  margin-top: 40px;

  padding-bottom: 28px;
}

.condition__title {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}

.condition__panel {
  position: relative;
  height: 705px;
  margin-top: -32px;
  background: url('../images/bg-panel-condition.svg') no-repeat center top / 1200px 705px;
}

.condition__inner {
  width: 1088px;
  margin-inline: auto;
  padding-top: 20.55px;
}

.condition__btn {
  position: absolute;
  bottom: -28px;
  left: 50%;
  display: flex;
  translate: -50% 0;
}

.condition-req {
  position: relative;
  height: 127.45px;
}

.condition-req__illust {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 143.09px;
  height: 111.45px;
}

.condition-req__illust img {
  display: block;
  width: 100%;
  height: 100%;
}

.condition-req__badge {
  display: none;
}

.condition-req__row {
  position: absolute;
  top: 43.45px;
  left: 30px;
  width: 1058px;
  height: 84px;
  /* Figma の stroke はグラデーション。border-color には指定できないので、
     padding box に白・border box にグラデーションを敷いて枠だけを見せる。
     背景色は background-image が効かない環境向けのフォールバック */
  border: 3px solid transparent;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  background-image:
    linear-gradient(var(--color-white), var(--color-white)),
    var(--gradient-panel);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.condition-req__label {
  position: absolute;
  top: 29px;
  left: 95px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.condition-req__desc {
  position: absolute;
  top: 13px;
  left: 463px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.condition-req__strong {
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 700;
}

.condition-req__limit {
  position: absolute;
  top: 44px;
  left: 455px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.condition-req__row::before,
.condition-req__row::after {
  content: '';
  position: absolute;
  top: 13px;
  width: 1px;
  height: 52px;
  background-color: var(--color-border-blue);
}

.condition-req__row::before { left: 399px; }
.condition-req__row::after  { left: 869px; }

.condition-req__rate {
  position: absolute;
  top: 9px;
  left: 933px;
  line-height: 1;
}

.condition-req__num {
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 600;
}

.condition-req__unit {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 800;
}

.condition-up {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-top: 24px;
  border-radius: var(--radius-card);
  background-color: var(--color-bg-light-blue);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.condition-up::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  translate: -50% 0;
  border-right: 14.5px solid transparent;
  border-bottom: 22px solid var(--color-bg-light-blue);
  border-left: 14.5px solid transparent;
}

.condition-up__strong {
  color: var(--color-accent);
  font-size: 28px;
  font-weight: 700;
}

.condition-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 1086px;
  margin-top: 24px;
  margin-inline: auto;
}

.condition-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 354px;
  height: 140px;
  border: 1.5px solid var(--color-border-blue);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

/* 2 段目の 2 枚は注釈のぶんだけ背が高い */
.condition-card:nth-child(n + 4) {
  height: 157px;
}

/* バッジ＋見出しと注釈をまとめる箱。max-content で見出しの右端に幅を合わせ、
   注釈を text-align: right でその右端に揃える（Figma の注釈は見出し右端揃え） */
.condition-card__body {
  width: max-content;
}

.condition-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 14.5px;
}

.condition-card__badge {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 96px;
  height: 24px;
  padding-top: 3px;
  border-radius: var(--radius-badge);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.condition-card__label {
  margin-top: 1px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

/* カード内の小さい補足。__cond = 達成条件の内訳 / __limit = 付与上限 */
.condition-card__cond,
.condition-card__limit {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1;
  text-align: right;
}

.condition-card__cond + .condition-card__limit {
  margin-top: 5px;
}

/* ＋N％ はどのカードも下端から 16px。カードの高さが 2 種類あるので auto で寄せる */
.condition-card__rate {
  margin-top: auto;
  margin-bottom: 14.5px;
  line-height: 1;
  text-align: center;
}

.condition-card__sign,
.condition-card__unit {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 800;
}

.condition-card__num {
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 600;
}

.condition__note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* PCは 2 件が 1 行に並び、間隔は全角スペース 1 つぶん（= 14px）。
   point.html の注意事項は <br> 区切りの <p> で同じクラスを使っているため、
   flex にするのは <ul> で組んだリスト版だけに限る */
ul.condition__note {
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* index / campaign は <ul> の横並び、point は <p> 内の縦積み。
   どちらも「※ 1 件 = 1 行」なのでブロックで持つ（横並びは flex 側が上書きする） */
.condition__note-item {
  display: block;
}

.condition__note a {
  color: var(--color-primary);
  text-decoration: underline;
}

.point-block {
  display: flex;
  align-items: flex-start;
  width: 1070px;
  height: 320px;
}

/* 区切り線からの距離は Figma 実測。電気料金 56px / スマホ 46px（線の 2px を含む）で揃っていない */
.point-block--electricity {
  justify-content: space-between;
  margin-top: 54px;
}

.point-block--smartphone {
  gap: 14px;
  margin-top: 44px;
  margin-left: auto;
}

.point-block__illust {
  flex-shrink: 0;
  width: 320px;
}

.point-block__illust img {
  width: 320px;
  height: 320px;
}

.point-block__body {
  text-align: center;
}

.point-block--electricity .point-block__body {
  width: 721px;
  margin-top: 47px;
}

.point-block--smartphone .point-block__body {
  width: 736px;
  margin-top: 35px;
}

.point-block__text {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.point-block--electricity .point-block__text {
  text-align: left;
}

.point-block__btn {
  display: flex;
  margin-top: 32px;
  padding-left: 111px;
}

.point-block__btns {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

/* テキストは必ず .point-btn__bubble-text で 1 つに包む。
   フレックスコンテナの直下に地の文・<span class="en">・<br> を並べると
   それぞれが別のフレックスアイテムに分解され、<br> が効かずに 1 行になる */
.point-btn__bubble {
  position: relative;
  /* .btn--primary / --secondary が z-index: 0 でスタッキングコンテキストを作るため、
     指定しないと DOM 順で後ろのボタンがしっぽの下 7px を覆ってしまう */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-inline: auto;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.point-btn__bubble-text {
  text-align: center;
}

.point-btn--fee .point-btn__bubble      { width: 285px; }
.point-btn--security .point-btn__bubble { width: 222px; }

/* 書き出した bg（285×65）の Polygon 1 は 25.98×17.25。吹き出しの下端から 15px 出て、
   残りの 2.25px が吹き出しに重なる */
.point-btn__bubble::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  translate: -50% 0;
  border-top: 17.25px solid var(--color-white);
  border-right: 12.99px solid transparent;
  border-left: 12.99px solid transparent;
}

.point-btn .btn {
  margin-top: 8px;
}

.point + .cta {
  margin-top: 64px;
}

/* --- 5-6. index: ご利用の流れ --- */

/* 上マージンは Figma 実測（CTA `1745:1052` の下端 4649 → ご利用の流れ `1745:635` が y=4731） */
.flow {
  margin-top: 82px;
}

.flow__head {
  text-align: center;
}

/* Anker（矢印タブ 400×80 / 380×80。形状が特殊なため背景は書き出した SVG） */
.anker {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.anker__btn {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80px;
  padding-top: 18px;
  color: var(--color-primary);
}

/* 書き出した SVG はドロップシャドウ分だけ左 8px・下 10px はみ出しているため、
   要素より一回り大きい擬似要素に敷いて形状を原寸で保つ */
.anker__btn::before {
  content: '';
  position: absolute;
  inset: 0 0 -10px -8px;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
}

.anker__btn--step1 {
  width: 400px;
  padding-right: 33px;
}

.anker__btn--step1::before {
  background-image: url('../images/bg-anker-step1.svg');
}

.anker__btn--step2 {
  width: 380px;
  margin-left: -21px;
  padding-right: 9px;
}

.anker__btn--step2::before {
  background-image: url('../images/bg-anker-step2.svg');
}

.anker__lead {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.anker__sub {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.anker__arrow {
  position: absolute;
  top: 24px;
  right: 40px;
  width: 32px;
  height: 32px;
  rotate: 90deg;
}

.anker__btn--step2 .anker__arrow {
  right: 20px;
}

.step {
  margin-top: 64px;

  padding-bottom: 28px;
}

/* STEP01 → STEP02 の間だけ 40px（Figma: STEP01 下端 5520 → STEP02 上端 5560） */
.step + .step {
  margin-top: 40px;
}

.step__title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 561px;
  height: 64px;
  margin-inline: auto;
  border: 2px solid var(--color-border-blue);
  border-radius: var(--radius-title);
  background-color: var(--color-white);
  color: var(--color-primary);
}

.step__title--wide {
  width: 897px;
}

.step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 107px;
  height: 37px;
  border-radius: var(--radius-pill);
  background-image: var(--gradient-panel);
  font-size: 20px;
  font-weight: 700;
  line-height: 0.97;
}

.step__title-sub {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.step__title-main {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.step__panel {
  position: relative;
  margin-top: -32px;
  padding-top: 64px;
  background-repeat: no-repeat;
  background-position: center top;
}

.step__panel--1 {
  height: 496px;
  background-image: url('../images/bg-panel-step1.svg');
  background-size: 1200px 496px;
}

.step__panel--2 {
  height: 1598px;
  background-image: url('../images/bg-panel-step2.svg');
  background-size: 1200px 1598px;
}

.step__btns {
  position: absolute;
  bottom: -28px;
  left: 50%;
  display: flex;
  gap: 32px;
  translate: -50% 0;
}

/* STEP カード（Step 円 80×80 がカード本体の上に 40px はみ出す） */
.step-list {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.step-card {
  position: relative;
  width: 352px;
  padding-top: 40px;
}

.step-card__num {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding-top: 23px;
  translate: -50% 0;
  background: url('../images/badge-step.svg') no-repeat center / 80px 80px;
  color: var(--color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 0.97;
}

.step-card__body {
  height: 324px;
  border: 2px solid var(--color-border-blue);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.step-card__text {
  margin-top: 50px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.step-card__illust,
.step-card__shot {
  display: flex;
  justify-content: center;
}

.step-list .step-card:nth-child(1) .step-card__illust { margin-top: 18px; }
.step-list .step-card:nth-child(2) .step-card__illust { margin-top: 10.65px; }
.step-list .step-card:nth-child(3) .step-card__illust { margin-top: 20px; }

.step__intro {
  width: 812px;
  margin-inline: auto;
  text-align: center;
}

.step__intro-lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.step__marker {
  background: linear-gradient(var(--color-bg-light-orange), var(--color-bg-light-orange)) no-repeat left bottom / 100% 7px;
  color: var(--color-primary);
  font-weight: 700;
}

.step__intro-note {
  margin-top: 16px;
  padding-left: 1em;
  font-size: 14px;
  line-height: 1.4;
  text-indent: -1em;
}

.step__intro-links {
  display: flex;
  justify-content: center;
  gap: 54px;
  margin-top: 8px;
}

.step__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: underline;
}

.step__link img {
  width: 20px;
  height: 20px;
}

/* カードは 2 行。1 行目（01 + 02）と 2 行目（03）で左右端が 1046px 幅に揃う。
   行間 24px は 1 行目のカード下端 6353 → 2 行目の Step 円上端 6377 */
.step-list--2 {
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 24px;
  margin-top: 32px;
}

/* STEP02 の 02 は画面キャプチャを 2 枚並べるため、01（352px）より広い。
   03 は 1 行を占有する（352 + 20 + 674 = 1046 = 03 の幅） */
.step-list--2 .step-card:nth-child(2) {
  width: 674px;
}

.step-list--2 .step-card:nth-child(3) {
  width: 1046px;
}

.step-list--2 .step-card__body {
  height: 599px;
}

.step-list--2 .step-card:nth-child(3) .step-card__body {
  height: 619px;
}

.step-list--2 .step-card__shot {
  position: relative;
  gap: 40px;
  margin-top: 22px;
}

/* 03 はキャプチャ 3 枚。上端がカード上端から 44（枠 2 を引いて 42） */
.step-list--2 .step-card:nth-child(3) .step-card__shot {
  gap: 60px;
  margin-top: 42px;
}

.step-list--2 .step-card__shot > img {
  width: 292px;
  height: 567px;
}

/* キャプチャをつなぐ三角。縦位置はカード 02・03 とも 257px
   （Figma の y=6035 / 6718 から、それぞれの .step-card__shot の上端を引いた値）。
   横位置はキャプチャ 1 枚目の右端から +13px（Figma 実測。すき間 40px より三角が広いため
   2 枚目に 8px 重なる）*/
.step-card__shot-arrow {
  position: absolute;
  top: 257px;
  left: 328px;
  width: 35px;
  height: 53px;
}

/* 03 の 2 本は Figma だと x=653 / 1033 で、1 本目は左のキャプチャすれすれ、
   2 本目は右のキャプチャに 5px 食い込むという非対称になっている。
   同じ部品が別々の位置になるのはデザイン側のずれと判断し、
   どちらもすき間 60px の中央（キャプチャ右端 +12.5px）に揃えた */
.step-card__shot-arrow--a {
  left: 327.5px;
}

.step-card__shot-arrow--b {
  left: 679.5px;
}

.step-card__shot-arrow img {
  width: 100%;
  height: 100%;
}

/* --- 5-7. index: 動画 --- */
/* 要確定リスト #8: 埋め込み方式・URL が未定のためプレースホルダー */

.movie {
  margin-top: 88px;
}

.movie__title {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}

.movie__panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  height: 450px;
  margin-top: -32px;
  padding-top: 72px;
  background: url('../images/bg-panel-movie.svg') no-repeat center top / 1200px 450px;
}

.movie__frame {
  position: relative;
  width: 544px;
  height: 306px;
  background-color: #d9d9d9;
}

/* 支給の埋め込みコードは 560x315 だが、枠（PC 544x306 / SP 310x175）を満たすよう伸縮させる。
   廃止属性の frameborder="0" はここの border で代替する */
.movie__video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 5-8. index: よくある質問 --- */

/* 上マージンは Figma 実測（ご利用の流れ `1745:635` の下端 7081 → よくある質問 `1745:585` が y=7143）。
   campaign は .faq--campaign、faq ページは .faq--page が margin-top を上書きする。
   campaign の #general-faq は index と同じ余白にする指定なので、この値をそのまま共有する */
.faq {
  width: 1008px;
  margin: 62px auto 0;
}

.faq__head {
  text-align: center;
}

.faq__list {
  margin-top: 40px;
}

.faq__item {
  border: 1.5px solid var(--color-border-blue);
  border-radius: var(--radius-card);
  background-color: var(--color-white);

  --faq-duration: 0.3s;
  --faq-dash: 3px;
}

.faq__item + .faq__item {
  margin-top: 8px;
}

/* ブラウザは1.5pxのborderを
   1px にスナップするため、引くのは 3px ではなく 2px。
   上下の padding は対称に取る（button は中身を縦中央に置くため、
   padding-bottom を 0 にすると min-height の余りぶん質問テキストが下へずれる） */
.faq__question {
  position: relative;
  display: block;
  width: 100%;
  min-height: 70px;
  margin: 0;
  padding: 25.5px 70.5px;
  border: 0;
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
}

.faq__mark {
  position: absolute;
  top: 14.5px;
  left: 14.5px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding-top: 10px;
  background: url('../images/badge-q.svg') no-repeat center / 40px 40px;
  font-size: 20px;
  font-weight: 700;
  line-height: 0.97;
}

.faq__icon {
  position: absolute;
  top: 50%;
  right: 22.5px;
  width: 24px;
  height: 24px;
  background: url('../images/icon-faq-plus.svg') no-repeat center / 24px 24px;
  translate: 0 -50%;
}

/* マイナスの書き出しは 24×2。preserveAspectRatio="none" のため
   24×24 に伸ばすと線が塗りつぶしに見えてしまう */
.faq__item.is-open .faq__icon {
  background-image: url('../images/icon-faq-minus.svg');
  background-size: 24px 2px;
}

/* 区切り線は左 18px / 右 72px のインセット（Figma 実測 918px 幅）。
   開閉は grid-template-rows を 0fr → 1fr で補間してアニメーションさせるため、
   余白・区切り線は内側の .faq__a-text 側に持たせる（高さ 0 のときに残らないように） */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  margin-right: 70.5px;
  margin-left: 16.5px;
  transition: grid-template-rows var(--faq-duration) ease;
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

/* 閉じている間は読み上げ・フォーカスの対象から外す。
   visibility は尺 0s・遅延ありで切り替えるので、閉じるアニメーションは最後まで見える */
.faq__answer-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--faq-duration);
}

.faq__item.is-open .faq__answer-inner {
  visibility: visible;
  transition-delay: 0s;
}

/* Q/A の区切りは 3-3 の破線（書き出した Line 27 が stroke-dasharray="3 3"）。
   index / campaign / faq の 3 ページとも Figma は破線 */
.faq__a-text {
  background: repeating-linear-gradient(
      90deg,
      var(--color-border-blue) 0 var(--faq-dash),
      transparent var(--faq-dash) calc(var(--faq-dash) * 2)
    )
    no-repeat left top / 100% 1px;
  padding: 16px 0 22.5px 54px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* 支給シートの回答文は空行で段落が分かれている。空行 1 つ ＝ 1 行ぶんの空きなので、
   段落間は line-height と同じ 1.4em を空けてシートの見た目と 1 対 1 で対応させる
   （Figma には複数段落の回答が無いため設計値ではなく本文の行送りから決めた値） */
.faq__a-text > p + p {
  margin-top: 1.4em;
}

/* 回答文中のリンク。Figma に指定が無いため、モーダル 05 のアプリリンク（Phase 54）と
   フッターのメールリンクに合わせてブランドブルー + 下線で示す */
.faq__link {
  color: var(--color-primary);
  text-decoration: underline;
}

/* URL を本文にそのまま出しているリンク。SP は内容幅が約 310px しかなく、
   分割不能な英数字列のままだと祖先の .faq__answer-inner（overflow: hidden）で
   末尾が切れるため、任意の位置で折り返させる */
.faq__link--url {
  word-break: break-all;
}

/* 行頭の記号（※・丸数字・中黒）の下へ本文が回り込まないようぶら下げる。
   text-indent はブロックの 1 行目にしか効かないため、<br> ではなく行ごとの要素で持つ
   （.point-terms__note-item と同じ手法） */
.faq__a-note {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

/* 「※ 」のように記号のあとに半角スペースが入る行は、その送り幅（0.28em）ぶん余計に戻す
   （.terms-block__item--nested と同じ考え方）。支給文言に手を入れずに揃えるための分岐 */
.faq__a-note--space {
  padding-left: 1.28em;
  text-indent: -1.28em;
}

/* アニメーションを控える設定では即時に開閉する */
@media (prefers-reduced-motion: reduce) {
  .faq__item {
    --faq-duration: 0s;
  }
}

.faq__more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* フッター直前の余白は 4 ページとも共通値に統一する（2026-08-25 クライアント指示）。
   Figma 実測は PC が campaign 40 / index 72 / benefits 80 / faq 96 と別々だったが、
   ページ間で揃わず表示ずれに見えるとの指摘があり、index の値へ寄せた。
   ページ個別の上書き（.page-campaign / .page-point / .page-faq）は復活させないこと */
.cta--footer {
  margin-top: 72px;
}

/* --- 5-9. モーダル 05 --- */
/* 背景は実ページが担い、main・オーバーレイ・×ボタンだけを実装する */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.modal[hidden] {
  display: none;
}

/* オーバーレイ兼スクロール層。パネル自身は高さを持たず内容で伸びる。
   Rectangle 264 の実測は rgba(10,25,70,.55) + backdrop-blur 4px。
   背景をこの層に直接持たせることで「パネルの外側をクリック = 閉じる」を
   event.target の一致だけで判定できる */
.modal__scroll {
  position: absolute;
  inset: 0;
  /* 縦スクロール用。横は PC の等比スケール（--pc-scale）でパネル 1200px が
     常に画面内に収まるため、ここで横スクロールが出ることはない */
  overflow: auto;
  overscroll-behavior: contain;
  background-color: rgba(10, 25, 70, 0.55);
  backdrop-filter: blur(4px);
}

/* 口座開設方法モーダルは閉じるボタンの下に固定のセーフエリアを持たせる。
   スクロール層をセーフエリアの下から始めることで、カードがボタンの背後へ入らない。 */
.modal--account {
  background-color: rgba(10, 25, 70, 0.55);
  backdrop-filter: blur(4px);
}

.modal--account .modal__scroll {
  top: 112px;
  background-color: transparent;
  backdrop-filter: none;
}

.modal__panel {
  width: var(--inner-width);
  margin-inline: auto;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
}

/* 書き出した SVG は線幅（3px）の分だけ 64×64 より上下左右にはみ出す */
.modal__close img {
  position: absolute;
  top: -1.0775px;
  left: -1.5536px;
  width: 65.5536px;
  height: 66.155px;
}

/* 口座開設方法モーダルは長いため、閉じる操作をカード上部の余白に常時表示する。
   body の zoom 内でもパネル右端と揃うよう、実ビューポート幅を倍率で割り戻す。 */
.modal__close--account {
  top: 48px;
  right: calc((var(--vw, 100vw) / var(--pc-scale) - var(--inner-width)) / 2);
  z-index: 1;
  width: 47px;
  height: 47px;
}

.modal__close-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.modal__close-icon::before,
.modal__close-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-white);
  content: '';
  translate: -50% -50%;
  rotate: 45deg;
}

.modal__close-icon::after {
  rotate: -45deg;
}

/* --- 5-9-1. モーダル 05: 口座開設ポップアップ --- */

.modal__panel--account {
  margin-top: 8px;
  margin-bottom: 120px;
  padding-top: 64px;
  padding-bottom: 72px;
  text-align: center;
}

.modal__title {
  margin-inline: auto;
}

.modal__lead {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

/* Figma 実測は 704px。「お申込み」→「お申し込み」の表記統一で 3 項目目が
   656px になり内幅 640px を超えて折り返すため、内幅 656px ぶんに広げてある */
.modal-note {
  width: 720px;
  margin-top: 24px;
  margin-inline: auto;
  padding: 32px;
  border-radius: var(--radius-card);
  background-color: var(--color-bg-light-blue);
  text-align: left;
}

.modal-note__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.modal-note__list {
  margin-top: 16.4px;
  padding-top: 12px;
  border-top: 1px solid var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* 行頭の「・」の幅だけぶら下げる（SP は 1 項目が 2～3 行に折り返す） */
.modal-note__item {
  padding-left: 1em;
  text-indent: -1em;
}

.modal-step-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 1088px;
  margin-top: 40px;
  margin-inline: auto;
  text-align: left;
}

.modal-step {
  position: relative;
}

.modal-step__num {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding-top: 23px;
  translate: 0 -50%;
  background: url('../images/badge-step.svg') no-repeat center / 80px 80px;
  color: var(--color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 0.97;
  text-align: center;
}

.modal-step__num--pre {
  padding-top: 16px;
  font-size: 22px;
  line-height: 1.1;
}

.modal-step__num--any {
  padding-top: 28px;
  font-size: 24px;
}

.modal-step__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 40px;
  padding-right: 40px;
  padding-left: 72px;
  border: 2px solid var(--color-border-blue);
  border-radius: 20px 10px 10px 20px;
  background-color: var(--color-white);
}

/* 事前準備は NO.86 で QR（160px）を削除したため、右余白は他の 4 枚と同じ 40px に戻す。
   カードの高さ（Figma PC `802:35751` の 256px）は据え置き */
.modal-step--pre .modal-step__card {
  height: 256px;
}
.modal-step--1 .modal-step__card   { height: 556px; }
.modal-step--2 .modal-step__card   { height: 526px; }
.modal-step--3 .modal-step__card   { height: 556px; }
.modal-step--4 .modal-step__card   { height: 556px; }

.modal-step__text {
  width: 648px;
}

/* QR が抜けたぶん、事前準備だけ本文をカード内幅いっぱいに広げる
   （1088 - カード左マージン 40 - 枠 4 - 左 padding 72 - 右 padding 40 = 932px）*/
.modal-step--pre .modal-step__text {
  width: 100%;
}

.modal-step__heading {
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.modal-step__desc {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.modal-step__desc + .modal-step__desc {
  margin-top: 22.4px;
}

/* 外国籍のお客さま向け注記だけ 14px Regular。
   block にしないと親（16px）の strut が行ボックスを決めてしまい、
   Figma の行送り（14 × 1.4 = 19.6）より 2.8px 高くなる */
.modal-step__desc-note {
  display: block;
  font-size: 14px;
  font-weight: 400;
}

/* 10/14 までの注釈（NO.32）。行頭の「※」ぶんをぶら下げる（.faq__a-note と同じ考え方）。
   PC・SP とも本文の直後に出る（NO.86 で SP のボタンも消えたため。SP 側の order を参照）。
   当初は .modal-step__desc-note と同じ 14px Regular だったが、NO.86 の強調指示で
   本文（.modal-step__desc）と同じ 16px の Bold にしてある（ユーザー確認済み）*/
.modal-step__note {
  margin-top: 8px;
  padding-left: 1em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-indent: -1em;
}

.modal-step__shot {
  flex-shrink: 0;
  width: 240px;
}

/* QR は PC フレームにだけ存在する（Figma `802:35751` 160×160 / 実画像 1 枚）。
   NO.86 で～10/13 版からは削除したので main では参照 0 件だが、
   10/14 版（release/2026-10-14）が使うので残してある（`.sticky-bar--account` と同じ扱い）*/
.modal-step__qr {
  flex-shrink: 0;
  width: 160px;
}

.modal-step__qr img {
  width: 160px;
  height: 160px;
}

/* アプリのダウンロードリンクは SP フレームにだけ存在する。
   NO.86 で～10/13 版からは削除したので main では参照 0 件だが、
   10/14 版（release/2026-10-14）が使うので残してある（`.modal-step__qr` と同じ扱い）*/
.modal-step__applink {
  display: none;
}

/* --- 5-9-2. CTA ポップアップ（PC のみ / Figma 2376:3096） --- */

/* パネルは 940x481 の固定サイズ。中身はすべて Figma の座標で絶対配置する。
   縦方向は margin: auto で中央に置く（align-items: center だと画面より高いときに上が切れる） */
.modal--cta .modal__scroll {
  display: flex;
}

.modal__panel--cta {
  position: relative;
  width: 940px;
  height: 481px;
  margin: auto;
  border-radius: 20px;
}

.modal-cta__head {
  position: absolute;
  top: 0;
  left: 0;
  width: 940px;
  height: 174px;
  border-radius: 20px 20px 0 0;
  background-color: var(--color-primary);
}

/* 青帯から QR へ向かう下向きの三角（Polygon 3 / 104.789x39.75）。
   底辺は帯の中にあり、帯の下端（174px）から 22px だけはみ出して見える。
   この Polygon は 180° 回転しているため get_metadata の x / y は右下角を指す。
   左上に直した値（頂点 x = 276.606 が QR の中心と一致する）をここに書いている */
.modal-cta__head::after {
  position: absolute;
  top: 156.25px;
  left: 224.211px;
  border-top: 39.75px solid var(--color-primary);
  border-right: 52.3945px solid transparent;
  border-left: 52.3945px solid transparent;
  content: "";
}

.modal-cta__logo {
  position: absolute;
  top: 24px;
  left: 189px;
}

.modal-cta__pill {
  position: absolute;
  top: 70px;
  left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 488px;
  height: 75px;
  border: 2.5px solid var(--color-white);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.modal-cta__qr {
  position: absolute;
  top: 204px;
  left: 176px;
}

/* QR の下の説明文。QR（中心 276.5）に対して中央揃えで、幅 420px は
   1 行目「スマートフォンから…」の実測幅。折り返しではなく <br> で明示的に改行する */
.modal-cta__note {
  position: absolute;
  top: 413px;
  left: 67px;
  width: 420px;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* Figma の画像フィルは「幅を枠に合わせて上端で切る」指定。
   mv-app.png（1040x1374）は原本の上 1374 行で、切り取り位置（1374 行目）とちょうど一致する */
.modal-cta__app {
  position: absolute;
  top: 24px;
  left: 554px;
  overflow: hidden;
  width: 346px;
  height: 457px;
}

.modal-cta__app img {
  width: 346px;
  height: auto;
}

/* 05 と違い、パネルの右上角に重なる位置に置く */
.modal__close--cta {
  top: -23px;
  right: -24px;
  width: 47px;
  height: 47px;
}

.modal__close--cta img {
  position: static;
  width: 47px;
  height: 47px;
}

/* --- 5-10. campaign: MV --- */

.mv--campaign {
  /* 中身は 1200px の画像 1 枚で 1400px のキャンバスに収まるため、
     index の MV に掛けている独立スケールは要らない（他セクションと同じ倍率で動く）*/
  --mv-zoom: 1;
  width: auto;
  height: auto;
  margin-top: 27px;
}

.mv__image {
  display: block;
  width: var(--inner-width);
  height: 670px;
  margin-inline: auto;
}

/* --- 5-11. campaign: プレゼント特典の条件 --- */

.campaign {
  margin-top: 26px;
}

.campaign-benefit {
  position: relative;
  width: var(--inner-width);
  height: 374px;
  margin-inline: auto;
}

/* イラストはカード下端を 185px、inner（1464）を 9px はみ出す。
   下に続く .campaign-period の中身（x 529～1209）とは x が重ならないので干渉しない */
.campaign-benefit__illust {
  position: absolute;
  top: 360px;
  left: 987.6016px;
  width: 221.3985px;
  height: 199px;
}

.benefit-card {
  position: absolute;
  top: 42px;
  border: 2px solid var(--color-border-blue);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

/* 幅・高さはカードごとに違う（Figma 実測。5,000 は 576×331 / 6,000 は 606×332）*/
.benefit-card--5000 { left: 0;     width: 576px; height: 331px; }
.benefit-card--6000 { left: 594px; width: 606px; height: 332px; }

/* カード上端から 15px はみ出す吹き出し */
.benefit-card__badge {
  position: absolute;
  top: -17px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 358px;
  height: 29px;
  border-radius: 20px;
  background-image: var(--gradient-title);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.benefit-card__badge-tail {
  position: absolute;
  top: 6px;
  width: 16.4545px;
  height: 11.25px;
  transform: scaleY(-1);
}

/* 尻尾の left は「吹き出しの left + 169 + 1.2726」。
   1.2726 は 19×15 の三角のうち描画部分が内側へ 6.7% 寄っている分 */
.benefit-card--5000 .benefit-card__badge { left: 107px; }
.benefit-card--5000 .benefit-card__badge-tail { left: 277.2726px; }
.benefit-card--6000 .benefit-card__badge { left: 122px; }
.benefit-card--6000 .benefit-card__badge-tail { left: 292.2726px; }

.benefit-card__cond {
  position: absolute;
  top: 23px;
  right: 0;
  left: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.benefit-card__mark {
  background: linear-gradient(var(--color-bg-light-orange), var(--color-bg-light-orange)) no-repeat left bottom / 100% 7px;
  color: var(--color-primary);
  font-size: 26px;
}

.benefit-card__amount {
  position: absolute;
}

.benefit-card--6000 .benefit-card__amount {
  top: 88px;
  left: 99px;
  width: 399px;
  height: 72px;
}

.benefit-card__max {
  position: absolute;
  top: 8px;
  left: 0;
  width: 29px;
  color: var(--color-text);
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.benefit-card__price {
  position: absolute;
  top: 0;
  left: 0;
  color: #ff7330;
  font-family: var(--font-en);
  font-size: 70px;
  font-weight: 800;
  line-height: 1;
}

.benefit-card__price-a     { letter-spacing: -9.1px; }
.benefit-card__price-comma { font-size: 57px; letter-spacing: -10.26px; }
.benefit-card__price-b     { letter-spacing: -5.6px; }

/* 数字に重なる白のツヤ帯。包含ブロックが数字の span 幅しかないため、
   リセットの max-width: 100% を解除する。left は 2 枚で違うので modifier 側に置く
   （SP も 2 枚で違うため、base に置くと PC 値が SP へ漏れる）*/
.benefit-card__price-marker {
  position: absolute;
  top: 10px;
  max-width: none;
  width: 170px;
  height: 46px;
}

.benefit-card__suffix {
  position: absolute;
  display: flex;
  flex-direction: column;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.benefit-card__yen {
  color: #ff7330;
}

.benefit-card__note {
  position: absolute;
  top: 166px;
  left: 80px;
  width: 442px;
  color: var(--color-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* Figma はマーカー帯を行ごとの矩形（PC 396 / 437px・SP 300 / 310 / 82px）で持つが、
   いずれもその行のテキスト実幅と一致する。PC 2 行・SP 3 行で折り返し位置が違うため
   行を span で切れないので、インライン 1 つの背景を行ごとに複製して敷く */
.benefit-card__note-mark {
  background: linear-gradient(var(--color-bg-light-orange), var(--color-bg-light-orange)) no-repeat left bottom / 100% 7px;
  box-decoration-break: clone;
}

.benefit-card--6000 .benefit-card__price {
  left: 33px;
  width: 184px;
  font-size: 72px;
}

.benefit-card--6000 .benefit-card__price-a { letter-spacing: -9.36px; }
.benefit-card--6000 .benefit-card__price-comma { font-size: 49px; letter-spacing: -8.82px; }
.benefit-card--6000 .benefit-card__price-b { letter-spacing: -5.76px; }

.benefit-card--6000 .benefit-card__price-marker {
  left: 2px;
  width: 179px;
}

.benefit-card--6000 .benefit-card__suffix {
  top: 8px;
  left: 219px;
  width: 180px;
}

/* Figma の箱は 437px（1 行目 439.53px に合わせた幅）で、2 行目は中で中央寄せされていた。
   No.98 で 2 行目が「左記」2 文字ぶん伸びて 468.58px になり、nowrap のため箱から右へあふれる。
   Chromium はあふれた行を左端起点で描くため中央寄せが効かず、2 行目だけ右へ 29px 長く見える。
   箱を 2 行目の実測幅へ広げ、1 行目の描画位置（CSS x=80）が動かないよう
   左端を 80 + 439.53/2 - 468.58/2 = 65.475px へ戻して両行を同じ中心軸に載せている */
.benefit-card__breakdown {
  position: absolute;
  top: 31px;
  left: 65.475px;
  width: 468.58px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.benefit-card__breakdown-price {
  color: #ff7330;
  font-size: 30px;
}

.benefit-card__breakdown-yen {
  color: #ff7330;
  font-size: 16px;
  letter-spacing: -0.32px;
}

/* 2 つ目の「円」だけ Figma が 14.5px（1 つ目は 16px）*/
.benefit-card__breakdown-yen--sm {
  font-size: 14.5px;
  letter-spacing: -0.29px;
}

.benefit-card--5000 .benefit-card__cond {
  top: 29px;
  right: auto;
  left: 79px;
  width: 412px;
  white-space: nowrap;
}

.benefit-card--5000 .benefit-card__amount {
  top: 109px;
  right: auto;
  left: 103px;
  width: 363px;
  height: 70px;
}

.benefit-card--5000 .benefit-card__price,
.benefit-card--5000 .benefit-card__yen {
  color: var(--color-accent);
}

.benefit-card--5000 .benefit-card__price {
  width: 182px;
}

.benefit-card--5000 .benefit-card__price-marker {
  left: 9px;
}

.benefit-card--5000 .benefit-card__suffix {
  top: 10px;
  left: 183px;
  width: 180px;
}

.benefit-card__method {
  position: absolute;
  top: 196px;
  left: 110px;
  width: 350px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.benefit-card__method a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* 期間のラベル（グラデ帯）と日付。2 枚とも Figma でカード中央に置かれているので
   left/right + margin-inline: auto で寄せ、カードごとに違う top だけ modifier で持つ */
.benefit-card__term {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 29px;
  margin-inline: auto;
  border-radius: 20px;
  background-image: var(--gradient-title);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.benefit-card__term-date {
  position: absolute;
  right: 0;
  left: 0;
  color: var(--color-text);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.benefit-card--5000 .benefit-card__term      { top: 229px; }
.benefit-card--5000 .benefit-card__term-date { top: 274px; }
.benefit-card--6000 .benefit-card__term      { top: 230px; }
.benefit-card--6000 .benefit-card__term-date { top: 275px; }

/* --- 5-12. campaign: キャンペーン期間 --- */

/* 2026-09-01 の Figma 更新で「事前エントリー期間／キャンペーン期間」の 2 ブロックパネルは
   廃止され、各カード内の .benefit-card__term へ移った。残るのは適用条件文・CTA・注記の 3 つ */
.campaign-period {
  position: relative;
  left: 0;
  width: var(--inner-width);
  margin: 24px auto 0;
}

.campaign-period__terms-note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.campaign-period__terms-note a {
  color: var(--color-primary);
  text-decoration: underline;
}

.campaign-period__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.campaign-period__note {
  height: 20px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.campaign-period__note a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --- 5-13. 規約・注意事項パネル --- */
/* 青ヘッダー（80px + 32×2 の白線）と白い本文の体裁が両ページで完全に一致するため
   1 ブロックとして共有し、ページ固有の外余白・ブロック間余白だけ modifier で分ける */

/* 開閉は本文側のトラックを 0fr → 1fr で補間して行う
   （FAQ の .faq__answer と同じ手法。高さを JS で測らずに済む）。

   グリッドは開閉する行「だけ」を持たせ、見出しは外に置く。
   見出しを同じグリッドの auto 行に同居させると、補間途中（0 < fr < 1）で
   グリッドの高さと fr トラックの解決結果がずれ、その余りを auto 行が吸って
   見出しが伸び縮みする（実測: 80px → 440px → 80px）。

   本文は padding を持つため、トラックが 0 でも padding 分は潰れない。
   そこで .terms-panel__collapse 側で切り落とし、
   ・minmax(0, Nfr) … トラックの auto 最小値（＝本文の padding）を外す
   ・本文は align-self: start … トラックに合わせて縮ませず、常に原寸で敷く
   の 2 点で、見えている高さと白背景の高さを一致させる */
.terms-panel {
  width: var(--inner-width);
  margin-inline: auto;

  --terms-duration: 0.3s;
}

.terms-panel--campaign {
  margin-top: 96px;
}

.terms-panel--campaign .terms-panel__body {
  min-height: 901px;
}

.terms-panel__head {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

/* 閉じている間は下に本文が無いので、見出しだけで角丸を完結させる。
   閉じる側は本文が消えてから角を丸めたいので、尺 0s・遅延ありで切り替える
   （閉じアニメーション中に見出しの下端だけ丸くなるのを防ぐ） */
.terms-panel:not(.is-open) .terms-panel__head {
  border-radius: var(--radius-card);
  transition: border-radius 0s linear var(--terms-duration);
}

.terms-panel__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
}

/* 見出し帯いっぱいのボタンなので、リングは白へ反転したうえで内側に描く
   （既定の offset 2px だと薄青の地色の上に白いリングが乗ってしまう） */
.terms-panel__toggle:focus-visible {
  --focus-ring-color: var(--color-white);
  --focus-ring-offset: -4px;
}

.terms-panel__label {
  white-space: nowrap;
}

/* Figma の Line 29（32×2 の白い横線）は「開いた状態」の - にあたる。
   閉じた状態のデザインが無いため、同じ線をもう 1 本 90° 回して重ね、＋ を作る */
.terms-panel__icon {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  width: 32px;
  height: 32px;
}

.terms-panel__icon::before,
.terms-panel__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  translate: 0 -50%;
}

.terms-panel__icon::before {
  rotate: 90deg;
  transition: rotate var(--terms-duration) ease;
}

.terms-panel.is-open .terms-panel__icon::before {
  rotate: 0deg;
}

/* 開閉するのはこの 1 行だけ。閉じている間は読み上げ・フォーカスの対象から外す。
   visibility は尺 0s・遅延ありで切り替えるので、閉じるアニメーションは最後まで見える */
.terms-panel__collapse {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  visibility: hidden;
  transition:
    grid-template-rows var(--terms-duration) ease,
    visibility 0s linear var(--terms-duration);
}

.terms-panel.is-open .terms-panel__collapse {
  grid-template-rows: minmax(0, 1fr);
  visibility: visible;
  transition-delay: 0s;
}

.terms-panel__body {
  display: flex;
  flex-direction: column;

  align-self: start;
  gap: 8px;
  padding: 24px 48px 48px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background-color: var(--color-white);
}

/* アニメーションを控える設定では即時に開閉する */
@media (prefers-reduced-motion: reduce) {
  .terms-panel {
    --terms-duration: 0s;
  }
}

.terms-block__title {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.terms-block__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.terms-block__note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* 記号付きの文章は、折り返しを記号ではなく本文の先頭へ揃える。
   通常項目は SP だけ、入れ子項目と補足行は PC / SP 共通で字下げする */
.terms-block__list {
  list-style: none;
}

/* 「① 」は丸数字 1em + 半角スペース 0.28em（Zen Kaku Gothic New の実測送り幅）。
   1em だけ戻すと折り返し行がスペースぶん左にずれるので 1.28em 戻し、
   1 行目の位置（左端から 1em）が変わらないよう padding も同じだけ足す */
.terms-block__item--nested {
  padding-left: 2.28em;
  text-indent: -1.28em;
}

/* 条件判定の各項目は「・条件名：」で改行し、説明文を全角 2 文字ぶん字下げする。
   text-indent だと 1 行目しか下がらないので、説明文をブロック化して padding-left で持つ。
   親の .terms-block__item が SP で text-indent: -1em を持ち、それが継承されるため 0 に戻す */
.terms-block__desc {
  display: block;
  padding-left: 2em;
  text-indent: 0;
}

/* 「■ 必須条件」の直下に来る説明行は、PC でも SP と同じく ■ より全角 1 文字ぶん下げて
   見出しと中身の親子関係を見せる。PC は 1120px の行幅に対し 783.8px で 1 行に収まるため
   回り込みは起きないが、■ と同じ左端に並ぶと「■ 追加条件」配下の「・…」と同列に見えるため。
   SP は .terms-panel--notes .terms-block__subitem が同値の 1em を持つので変化しない。
   注釈側の subitem（例：／10,000円）は PC 現状のままにするので、modifier で対象を絞る */
.terms-block__subitem--indent {
  padding-left: 1em;
}

/* 「・」「※」始まりの本文は、折り返し行と 2 文目以降が記号の下へ回り込まないよう
   PC でもぶら下げにする。SP は .terms-panel--notes / --campaign の .terms-block__item が
   同値（padding-left: 1em / text-indent: -1em）を持つので見え方は変わらない。
   他の .terms-block__item は Figma 指定の改行位置を <br class="br-pc"> で持っており、
   一律に下げると PC の行頭がずれるため modifier で対象を絞る */
.terms-block__item--hang {
  padding-left: 1em;
  text-indent: -1em;
}

/* point の注意事項は 5 ブロックがそれぞれ開閉タブになり、外側パネルとの二重アコーディオンになる。
   ブロックはパネル幅いっぱい（PC 1200 / SP 350）に敷き、左右の余白はタブと本文が個別に持つ。
   ブロック間の余白は 0（タブ同士を隣接させる）。Figma の 24px は「開いた本文の下」の余白なので、
   .terms-block__body の padding-bottom として開閉トラックの内側に持たせ、閉じたら一緒に潰れるようにする。

   overflow: hidden は使わない。この箱は内側ブロックの開閉で毎フレーム伸縮するので、
   .terms-panel__body の border-radius と組み合わせると「毎フレーム寸法の変わる角丸クリップ」になり、
   WebKit がマスクを作り直し続けて iPhone Safari で内側だけコマ落ちする。
   （実測: 外側の開閉ではこの箱の高さは 325px から 1px も動かず、動くのは角丸を持たない
   .terms-panel__collapse のクリップ矩形だけ。だから外側は滑らかだった）
   下端の切り落としは、伸縮しない最後のタブ自身の角丸で代替する（すぐ下の規則） */
.terms-panel--notes .terms-panel__body {
  gap: 0;
  padding: 0;
}

/* 最後のブロックを閉じるとタブがパネルの下端に来る（PC / SP とも）ので、タブ自身を丸める。
   開いている間は下に本文が続くので丸めない。
   閉じアニメーションの途中で角だけ先に丸まるのを防ぐため、.terms-panel__head と同じく
   尺 0s・遅延ありで切り替える。
   相手が <button> なので、4-0b のホバー（opacity）を打ち消さないよう併記する */
.terms-panel--notes .terms-block:last-child:not(.is-open) .terms-block__toggle {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  transition:
    opacity var(--hover-duration) ease,
    border-radius 0s linear var(--terms-duration);
}

.terms-block__head {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

/* Figma: タブ 1200×65（下線 2px を含む）。アイコンが上 16・下 15（+ 下線 2）に来るよう
   高さではなくパディングで組み、テキスト（28px）はアイコンの行の中央に置く */
.terms-block__toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 16px 40px 15px;
  border: 0;
  border-bottom: 2px dashed var(--color-primary);
  background-color: var(--color-bg-tab);
  color: var(--color-primary);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
}

/* Figma の icon は 32px の青丸 + 18×2 の白い横棒（＝開いた状態の -）。
   閉じた状態のデザインが無いため、同じ棒をもう 1 本 90° 回して重ねて ＋ を作る
   （.terms-panel__icon と同じ考え方）。棒の位置は 32px 基準の比率で置き、SP でもそのまま効かせる */
.terms-block__icon {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.terms-block__icon::before,
.terms-block__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 21.875%;
  width: 56.25%;
  height: 2px;
  background-color: var(--color-white);
  translate: 0 -50%;
}

.terms-block__icon::before {
  rotate: 90deg;
  transition: rotate var(--terms-duration) ease;
}

.terms-block.is-open .terms-block__icon::before {
  rotate: 0deg;
}

/* 内側だけはパネル側の 0fr → 1fr ではなく height で補間する。--terms-duration は .terms-panel から継承する。
   外側パネル（.terms-panel__collapse）の fr トラックの中で内側も fr で動かすと、
   入れ子ぶんのトラックサイジングが毎フレーム走り、iPhone Safari で開閉がコマ落ちする
   （2026-08-27 のクライアント指摘）。height の px → px はどの環境でも確実に補間される。
   実測値の出し入れ（0 ⇔ px ⇔ auto）は index.js の initTermsPanel が持つ。

   visibility は使わない。閉じるたびに hidden へ戻すと、iOS WebKit は次の展開時に長い本文の
   再描画と height 補間を同時に始め、開くときだけコマ落ちする。見た目は height + overflow で閉じ、
   読み上げ対象からの除外は JS が aria-hidden で同期する */
.terms-block__collapse {
  height: 0;
  overflow: hidden;
  transition: height var(--terms-duration) ease;
}

/* Figma: 本文はタブ下端から 24px、左右 40px、下も 24px。
   下の 24px をパネルの gap / padding-bottom ではなく本文側に持たせることで、
   閉じている間は開閉トラックごと潰れてタブ同士が隣接する。
   align-self: start はグリッドだったころの名残なので持たない（高さは親の height が決める） */
.terms-block__body {
  padding: 24px 40px;
}

/* Figma は「空行 + 次行の行送り 0.5」で段落を分けている（実質 8px の空き）。
   連続 <br> は markuplint の no-consecutive-br に触れるため、段落を分けて margin で空ける */
.terms-block__body .terms-block__text + .terms-block__text {
  margin-top: 8px;
}

.terms-block__body .terms-block__text + .terms-block__list--continuation {
  margin-top: 0;
}

.terms-block__body .terms-block__note {
  margin-top: 16px;
}

/* --- 5-14. campaign: キャンペーン FAQ・FAQ ページへの導線 --- */
/* FAQ はキャンペーン直後（PC y=2672 / SP y=3583）へ移動し、3 カテゴリに分かれる。
   カテゴリ見出しは faq ページと同じ .faq-group を使い回すが、
   左右パディング（56px）とカテゴリ間の余白（40px）が faq ページと違う */

.faq--campaign {
  margin-top: 96px;
}

.faq__groups {
  margin-top: 40px;
}

.faq--campaign .faq-group + .faq-group {
  margin-top: 40px;
}

.faq--campaign .faq-group__title {
  padding: 0 56px;
}

.faq--campaign .faq__list {
  margin-top: 16px;
}

/* 2 行に折り返す設問（Q4）が 1 枚だけある。Figma は 1 行 72 / 2 行 94 で
   行の増分が 22px なので、SP と同じ 22px 行送りに揃えて padding を 24 にする
   （1 行は 24 + 22 + 24 = 70 で min-height と一致し、外形 72 は変わらない）。
   .faq の共通値（行送り 1 / padding 25.5）はほかのページのために残す */
.faq--campaign .faq__question {
  padding: 24px 70.5px;
  line-height: calc(22 / 18);
}

/* 「ほくでんBANK全体のよくある質問はこちら」。2026-08-25 の追加依頼で
   新設した #general-faq の中に入り、index の「もっと見る」（.faq__more）と
   同じ位置・同じ余白になった（それ以前は動画の後ろに単独で置いて 120px） */
.faq-link {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.faq + .about {
  margin-top: 120px;
}

/* --- 5-15. point: ページ見出し・Anker --- */

.point-page__title {
  display: block;
  width: fit-content;
  margin: 64px auto 0;
  text-align: center;
}

.anchor-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 72px;
}

/* --- 5-16. point: エネモポイントが貯まる --- */

.enemo {
  margin-top: 72px;
}

/* SP は 3 行に折り返す。3 行とも中央 195 に揃うので、
   fit-content で絞った箱の中でさらに中央寄せする（既定の左揃えだと
   帯の掛かる 3 行目だけが幅を決め、1・2 行目が左に寄ってしまう） */
.enemo__title {
  display: block;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
}

/* 達成条件パネル。index の 5 枚横並びとは別レイアウトのため --detail で分岐する */
.condition--detail {

  padding-bottom: 0;
}

.condition--detail .condition__panel {
  /* pointはindexのようなl-innerを持たないため、パネル自身で1200pxに絞る */
  width: var(--inner-width);
  /* Figma は 1132 → 984 だが、Phase 63 で必須条件行の注釈を削除して行が 46px 縮んだぶん
     938 まで詰める。パネル下端の余白 42px は維持している */
  height: 938px;
  margin-inline: auto;
  margin-top: -38px;

  border-radius: var(--radius-card);
  background: var(--color-white);
}

.condition--detail .condition__inner {
  padding-top: 38px;
}

/* Phase 63 で行内の注釈（`.condition-req__note`）を削除したため、Figma の 1058×154 ではなく
   リード文（3 行 = 67.2px）＋上下の余白 17 / 17.8 に詰めた 1058×108 で持つ。
   ラベル・還元率・縦罫線は content box（102px）の中心 51px に揃える */
.condition--detail .condition-req {
  height: 152px;
}

.condition--detail .condition-req__row {
  top: 44px;
  height: 108px;
}

.condition--detail .condition-req__label {
  top: 41px;
  left: 61px;
}

.condition--detail .condition-req__row::before,
.condition--detail .condition-req__row::after {
  height: 76px;
}

.condition--detail .condition-req__row::before { left: 361px; }
.condition--detail .condition-req__row::after  { left: 881px; }

.condition--detail .condition-req__desc {
  top: 17px;
  left: 421px;
  width: 400px;
  font-size: 16px;
}

.condition-req__marker {
  background: linear-gradient(var(--color-bg-light-orange), var(--color-bg-light-orange)) no-repeat left bottom / 100% 6px;
  color: var(--color-primary);
  font-weight: 700;
}

.condition--detail .condition-req__rate {
  top: 23px;
  left: 941px;
}

.condition--detail .condition-list {
  justify-content: flex-start;
  gap: 8px;
  width: 1008px;
}

.condition--detail .condition-card {
  display: block;
  position: relative;
  width: 500px;
  height: 152px;
  padding: 30.5px 30.5px 22.5px;
}

.condition--detail .condition-card__head {
  justify-content: flex-start;
  margin-top: 0;
}

.condition--detail .condition-card__rate {
  position: absolute;
  top: 16.5px;
  right: 30.5px;
  margin-top: 0;
  margin-bottom: 0;
}

.condition--detail .condition-card__sign {
  font-size: 24px;
  font-weight: 600;
}

.condition--detail .condition-card__num {
  font-size: 44px;
}

.condition--detail .condition-card__unit {
  font-size: 20px;
}

.condition-card__desc {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-blue);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.condition--detail .condition__note {
  margin-top: 16px;
  text-align: left;
}

/* --- 5-17. point: 注意事項 --- */

/* ポイントが貯まる (415+1113=1528) → 注意事項 (1608) の 80px */
.terms-panel--notes {
  margin-top: 80px;
}

/* 注意事項 (1608+2527=4135) → CTA (1) (4231) の 96px */
.terms-panel--notes + .cta {
  margin-top: 96px;
}

/* --- 5-18. point: ポイントサービス規約への導線 --- */

/* CTA (1) (4231+440=4671) → 規約ボタン群 (4719) の 48px */
.point-terms {
  margin-top: 48px;
  text-align: center;
}

.point-terms__lead {
  width: 721px;
  margin-inline: auto;
  opacity: 0.8;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.point-terms__btn {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* No.93: 「真ん中揃え」はブロックだけ中央・行内は左揃えのまま。
   行ごと中央にすると各行のぶら下がりインデントが成立しないため、
   箱を最長行の幅（fit-content）まで縮めて中央へ寄せる */
.point-terms__note {
  width: fit-content;
  max-width: var(--inner-width);
  margin: 32px auto 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

/* ※ ごとに行を分ける（PC  は 2 行）。SPは折り返した行を
   全角スペース 1 つぶん字下げしているので、行単位のぶら下げインデントにする。
   text-indent はブロックの 1 行目にしか効かないため、<br> ではなく行ごとの要素で持つ */
.point-terms__note-item {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

.point-terms__note a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --- 5-19. point: 貯めたポイントを電気料金に充当 --- */

.exchange {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: var(--inner-width);
  margin: 120px auto 0;
}

.exchange__body {
  width: 840px;
  margin-top: 32px;
  text-align: center;
}

.exchange__title {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

.exchange__text {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

/* マーカー帯と注釈は、通年TOP / キャンペーンTOP の「電気料金に充当」ブロック
   （.point-block--electricity）と同じあしらいを使う（0824 修正指示）。
   おトクな手数料の .fee__marker も同じあしらいで目立たせる（0902 修正指示）*/
.exchange__marker,
.fee__marker,
.point-block__marker {
  --marker-height: 7px;

  background: linear-gradient(var(--color-bg-light-orange), var(--color-bg-light-orange)) no-repeat left bottom / 100% var(--marker-height);
  color: var(--color-primary);
  font-weight: 700;
}

.exchange__note,
.point-block__note {
  font-size: 14px;
  line-height: 1.4;
}

/* おトクなところ: 注釈はボタンの上・左揃え（Figma 812:38675）。
   SPは 2 行目を全角スペース 1 つぶん字下げしているのでぶら下げにする
   （PC  は 1 行に収まるため見た目は変わらない） */
.exchange__note {
  margin-top: 12px;
  padding-left: 1em;
  text-align: left;
  text-indent: -1em;
}

/* 通年TOP / キャンペーンTOP: 注釈はボタンの下 16px・中央揃え
   （Figma 2373:226 / 2376:3650）。DOM もボタンの後ろに置いてある。
   このルールは .exchange__note との共有ルールより後ろから動かさないこと
   （詳細度が同じなので、前に置くと margin-top が 12px に戻る） */
.point-block__note {
  margin-top: 16px;
  text-align: center;
}

.exchange__note a,
.point-block__note a {
  color: var(--color-primary);
  text-decoration: underline;
}

.exchange__btn {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.exchange__illust {
  flex-shrink: 0;
  width: 320px;
  height: 320px;
}

.exchange__illust img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- 5-20. point: おトクな商品 --- */

.product {
  margin-top: 120px;
}

.product__title {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

.product__list {
  display: flex;
  gap: 8px;
  width: var(--inner-width);
  margin: 40px auto 0;
}

.product-card {
  position: relative;
  width: 294px;
  height: 379px;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

/* 枠線（2px）は Figma の重ね順どおり見出し帯の上に描くため疑似要素で重ねる。
   border にするとカードの内容ボックスが 2px 内側に寄り、帯と inner の位置がずれる。
   ※ この疑似要素はカード全面を覆うため pointer-events: none でクリックを透過させたいが、
      W3C CSS Validator が同プロパティをエラーにする。代わりにカード内のリンク側を
      z-index: 2 で枠線より前面に出して、クリックが奪われないようにしている
      （枠線はカード外周の 2px なのでリンクとは重ならず、見た目は変わらない） */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid var(--color-border-blue);
  border-radius: inherit;
}

.product-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background-image: var(--gradient-panel);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.product-card__body {
  padding: 16px 14px 0 16px;
}

.product-item {
  position: relative;
  --product-dash: 3px;
}

.product-item + .product-item {
  margin-top: 32px;
}

.product-item + .product-item::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 2px;
  width: 262px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-border-blue) 0 var(--product-dash),
    transparent var(--product-dash) calc(var(--product-dash) * 2)
  );
}

.product-item__label {
  position: relative;
  z-index: 2;
  padding-left: 28px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.product-item__label a {
  color: var(--color-primary);
  text-decoration: underline;
}

.product-item__check {
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
}

.product-item__btn {
  position: relative;
  z-index: 2;
  margin-top: 6px;
}

/* 単一項目カードでは .product-card を絶対配置の基準にするため、
   .product-item の position を外す */
.product-card--single .product-card__body {
  padding: 0;
}

.product-card--single .product-item {
  position: static;
}

.product-card--single .product-item__label {
  position: absolute;
  top: 165.5px;
  left: 16px;
  translate: 0 -50%;
}

.product-card--single .product-item__btn {
  position: absolute;
  top: 227px;
  left: 16px;
  margin-top: 0;
}

/* --- 5-21. point: おトクな手数料 --- */

.fee {
  /* おトクな商品 (5471+468=5939) → 手数料 (6019) の 80px */
  margin-top: 80px;
  text-align: center;
}

.fee__title {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

/* 白パネル 1200×176 → No.95 で注釈を枠内に入れて 1200×219.6 になった。
   padding は Figma のテキスト上端 36px から border 2px を引いた値。
   box-sizing: border-box で 2 + 34 + 本文 104 + 24 + 注釈 19.6 + 34 + 2 = 219.6。
   本文 104 は No.88 の 3 行（20px × 1.6 = 32px）＋ 2 文の間の 8px */
.fee__panel {
  width: var(--inner-width);
  margin: 40px auto 0;
  padding: 34px 0;
  border: 2px solid var(--color-border-blue);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

/* 本文と「詳しく見る」の横並び。No.95 以前は .fee__panel が直接持っていた。
   align-items: center なので「詳しく見る」は本文ブロックに対して縦中央に並ぶ */
.fee__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

.fee__text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

/* No.88: パネル内の 2 文の間に少しだけ余白を入れる（行送り 32px の 1/4） */
.fee__text--atm {
  margin-top: 8px;
}

.fee__btn {
  display: flex;
  justify-content: center;
}

/* No.59 で白パネルの直下に追加し、No.88 で本文（ATM の説明）だけをパネルへ移した注釈。
   No.95 で注釈もパネルの中へ入れたので、外側の器（.fee__details）は廃止した。
   幅 988px = 本文 668 + 余白 80 + 「詳しく見る」240 で、中央寄せすると
   左端が .fee__main の中身の左端に揃う。.fee の text-align: center を打ち消す */
.fee__note {
  width: 988px;
  margin: 24px auto 0;
  padding-left: 1em;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  text-indent: -1em;
}

.fee__note a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --- 5-22. faq: ページ見出し・カテゴリ別 FAQ --- */

.faq-page__title {
  display: block;
  width: fit-content;
  margin: 64px auto 0;
  text-align: center;
}

.faq-anchor {
  display: grid;
  grid-template-columns: repeat(2, 510px);
  grid-auto-rows: 56px;
  gap: 32px 40px;
  width: 1060px;
  margin: 64px auto 0;
}

.faq-anchor__link {
  width: 510px;
  height: 56px;
}

/* PC の番号は「ボタン外形左から 42px」が中心。Figma の 8 ノードの x が 29～31px と
   1px ずつ揺れているのは各テキスト枠が自動幅で中心合わせされているためなので、
   左端ではなく中心を固定する。border 2px の内側が絶対配置の基準になるので 40px で書く */
.faq-anchor__number {
  position: absolute;
  top: 50%;
  left: 40px;
  line-height: 1;
  translate: -50% -50%;
}

.faq-anchor__label {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.faq-anchor__link .btn__arrow {
  right: 14px;
}

.faq--page {
  margin-top: 80px;
}

.faq-group + .faq-group {
  margin-top: 48px;
}

.faq-group__title {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  border-radius: var(--radius-card);
  background-image: var(--gradient-panel);
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

/* 「01.」（Plus Jakarta Sans）と見出し文字を 1 つの行として折り返させるラッパー。
   これがないと flex アイテムが 2 つに分かれ、SP で番号と本文が別々に折り返す */
.faq-group__title-text {
  display: block;
}

.faq--page .faq__list {
  margin-top: 16px;
}

/* --- 5-23. cushion: サイト移動のご案内 --- */

/* このページだけ header / 下追従バーが無いので body の余白を解除する */
.page-cushion {
  padding-top: 0;
  padding-bottom: 0;
}

.cushion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* フレーム高 1117px を下限にしつつ、これより高いビューポートでは画面いっぱいに広げる。
     1117px のとき上 366 / 下 367 となり Figma の配置と一致する。
     100vh は zoom の内側でも実ビューポート高のまま解釈され、描画時に --pc-scale 倍されて
     縮んでしまうため、あらかじめ割り戻して画面高と一致させる */
  min-height: max(1117px, calc(100vh / var(--pc-scale)));
}

.cushion__title {
  position: relative;
  width: var(--inner-width);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.cushion__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.cushion__logo {
  width: 471px;
  height: 64px;
}

.cushion__title-sub {
  margin-bottom: 1px;
}

.cushion__title-main {
  display: block;
  margin-top: 32px;
}

/* エネモは 2 行目の行末に重なる位置に置く。
   SP では位置が変わる（ボタンの下）ため見出しの外に出してあり、基準は .cushion。
   .cushion は高さ 1117 以上でコンテンツ（384）を上下中央に置くので、
   コンテンツ天端は常に「中心 - 192」。イラストはその 25px 下（391 - 366）＝ 中心 - 167。
   left はフレーム中心 864 からの実測差（1295 - 864 = 431） */
.cushion__illust {
  position: absolute;
  top: calc(50% - 167px);
  left: calc(50% + 431px);
  width: 123px;
  height: 133px;
}

.cushion__lead {
  margin-top: 48px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

.cushion__count {
  font-variant-numeric: tabular-nums;
}

.cushion__btns {
  display: flex;
  justify-content: center;
  gap: 40px;
  width: var(--inner-width);
  margin-top: 80px;
}

/* ===== 6. SP（max-width: 768px） ===== */
/* Figma の px 値は calc(X * var(--scale-unit)) へ機械的に変換する。
   border-width / 比率 line-height / 無単位値 / box-shadow のオフセットは固定 px のまま */

@media (max-width: 768px) {
  :root {
    /* 掛け算は var を先に書く。「数値 * var」の順だと W3C CSS Validator が型を取り違え、
       この変数を別の calc に入れた箇所（.header__nav の 100dvh - ヘッダー高）がエラーになる */
    --header-height:  calc(var(--scale-unit) * 56);
    --sticky-height:  calc(152 * var(--scale-unit));
    --header-top:     0px;
    --sticky-bottom:  calc(8 * var(--scale-unit));
    --inner-width:    calc(350 * var(--scale-unit));
    --radius-card:    calc(10 * var(--scale-unit));
    --radius-btn:     calc(100 * var(--scale-unit));
    --radius-pill:    calc(50 * var(--scale-unit));
    --radius-title:   calc(50 * var(--scale-unit));

    --shadow-cta:    -1px 3px 4px 1px rgba(152, 64, 7, 0.21);
    --shadow-sticky: -1px 3px 6px 1px rgba(24, 63, 92, 0.25);
    --shadow-secondary: -1px 3px 4px 1px rgba(1, 104, 182, 0.21);
  }

  /* 通年 TOP のキャンペーン下追従だけ SP のパネルが 85（他ページは 96）で、
     バー全体も 152 → 141 になる。--body-offset-bottom は :root で解決済みの値が
     継承されてくるため、body 側で --sticky-height と一緒に組み直す */
  body:has(.sticky-bar--campaign) {
    --sticky-height:       calc(141 * var(--scale-unit));
    --body-offset-bottom:  calc(var(--sticky-height) + var(--sticky-bottom));
  }

  /* 事前エントリー CTA（キャンペーンTOP）は TOP 48 ＋ 余白 8 ＋ パネル 81 = 137 */
  body:has(.sticky-bar--entry) {
    --sticky-height:       calc(137 * var(--scale-unit));
    --body-offset-bottom:  calc(var(--sticky-height) + var(--sticky-bottom));
  }

  /* 口座開設 CTA（よくある質問）は TOP 48 ＋ 余白 8 ＋ パネル 68 = 124 */
  body:has(.sticky-bar--account) {
    --sticky-height:       calc(124 * var(--scale-unit));
    --body-offset-bottom:  calc(var(--sticky-height) + var(--sticky-bottom));
  }

  body {

    min-width: auto;
    font-size: calc(16 * var(--scale-unit));
  }

  .header {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    transform: none;
    border-radius: 0;
  }

  .header__inner {
    padding-right: calc(6 * var(--scale-unit));
    padding-left: calc(14 * var(--scale-unit));
  }

  .header__logo {
    width: calc(162 * var(--scale-unit));
    height: calc(22 * var(--scale-unit));
  }

  .header__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--scale-unit));
    width: calc(44 * var(--scale-unit));
    height: calc(44 * var(--scale-unit));
    margin-left: auto;
    border-radius: calc(3 * var(--scale-unit));
    background-color: var(--color-white);
  }

  .header__toggle-bar {
    width: calc(20 * var(--scale-unit));
    height: calc(2 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
    background-color: var(--color-primary);

    transition:
      translate var(--menu-duration),
      rotate var(--menu-duration),
      opacity var(--menu-duration),
      width var(--menu-duration),
      height var(--menu-duration),
      background-color var(--menu-duration);
  }

  /* 開いている間は「×」に変形（青地 44×44 に白い 2 本）。
     グリフは 25×25、バーは対角 33.13×2.22 / radius 10。
     3 本のうち中央は消し、残り 2 本を ±45deg に開く */
  .header__toggle[aria-expanded='true'] {
    background-color: var(--color-primary);
  }

  .header__toggle[aria-expanded='true'] .header__toggle-bar {
    width: calc(33.13 * var(--scale-unit));
    height: calc(2.22 * var(--scale-unit));
    background-color: var(--color-white);
  }

  .header__toggle[aria-expanded='true'] .header__toggle-bar:nth-child(1) {
    translate: 0 calc(7 * var(--scale-unit));
    rotate: 45deg;
  }

  .header__toggle[aria-expanded='true'] .header__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .header__toggle[aria-expanded='true'] .header__toggle-bar:nth-child(3) {
    translate: 0 calc(-7 * var(--scale-unit));
    rotate: -45deg;
  }

  .header:has(> .header__inner > .header__toggle[aria-expanded='true']) {
    background-color: var(--color-white);
  }

  .header:has(> .header__inner > .header__toggle[aria-expanded='true']) .header__logo-img--white {
    display: none;
  }

  .header:has(> .header__inner > .header__toggle[aria-expanded='true']) .header__logo-img--blue {
    display: block;
  }

  body:has(.header__toggle[aria-expanded='true']) .sticky-bar {
    display: none;
  }

  /* 暗幕は rgba(30,30,30,.9)。
     .header__nav は .header の
     子で親の背景より必ず手前に出るため、実装では暗幕を白帯の下端（56px）から始める。
     白帯は不透明なので見た目は変わらない */
  .header__nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    height: calc(100dvh - var(--header-height));
    margin-left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-overlay-menu);
  }

  .header__toggle[aria-expanded='false'] + .header__nav {
    display: none;
  }

  /* 上 56px は白帯が占めるため、青パネルの実体は437px */
  .header__panel {
    display: block;
    height: calc(437 * var(--scale-unit));
    border-radius: 0 0 calc(20 * var(--scale-unit)) calc(20 * var(--scale-unit));
    background-color: var(--color-primary);
  }

  .header__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    margin-inline: 0;
  }

  .header__list li {
    border-bottom: 1px solid var(--color-white);
  }

  .header__link {
    display: flex;
    align-items: center;
    gap: 0;
    height: calc(59 * var(--scale-unit));
    padding-inline: calc(40 * var(--scale-unit));
    color: var(--color-white);
    font-size: calc(20 * var(--scale-unit));
    font-weight: 700;
    line-height: 1;
  }

  .header__link::before {
    content: none;
  }

  .header__link.is-current {
    background-color: var(--color-primary-dark);
  }

  .header__link.is-current::after {
    content: none;
  }

  .header__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(40 * var(--scale-unit));
  }

  .btn--primary.btn--menu {
    width: calc(310 * var(--scale-unit));
  }

  .btn--primary.btn--menu .btn__arrow {
    right: calc(9.74 * var(--scale-unit));
    width: calc(30.116 * var(--scale-unit));
    height: calc(30.116 * var(--scale-unit));
  }

  .btn__arrow {
    right: calc(12 * var(--scale-unit));
  }

  .btn--primary {
    width: var(--inner-width);
    height: calc(56 * var(--scale-unit));
    font-size: calc(18 * var(--scale-unit));
  }

  .btn--primary .btn__arrow {
    width: calc(32 * var(--scale-unit));
    height: calc(32 * var(--scale-unit));
  }

  .btn--secondary {
    width: var(--inner-width);
    height: calc(48 * var(--scale-unit));
    box-shadow: var(--shadow-secondary);
    font-size: calc(16 * var(--scale-unit));
    line-height: 1.2;
  }

  .btn--secondary .btn__arrow {
    width: calc(28 * var(--scale-unit));
    height: calc(28 * var(--scale-unit));
  }

  .btn--anchor {
    width: var(--inner-width);
    height: calc(48 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .btn--anchor .btn__arrow {
    right: calc(13 * var(--scale-unit));
    width: calc(28 * var(--scale-unit));
    height: calc(28 * var(--scale-unit));
  }

  /* 右側にアイコン 1 個ぶんの余白を確保し、テキストを視覚的に中央へ置く */
  .btn--footer {
    width: var(--inner-width);
    height: calc(48 * var(--scale-unit));
    padding-right: calc(45 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  /* 絶対配置の基準は border の内側なので、枠線 2px を差し引く */
  .btn--footer .btn__arrow {
    right: calc(18 * var(--scale-unit));
    width: calc(27 * var(--scale-unit));
    height: calc(27 * var(--scale-unit));
  }

  /* 別ウィンドウアイコンだけは 16px のまま、テキスト上端に揃える */
  .btn--footer .btn__arrow--link {
    top: calc(23 * var(--scale-unit));
    width: calc(16 * var(--scale-unit));
    height: calc(16 * var(--scale-unit));
  }

  .btn--text {
    gap: calc(4 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    height: calc(40 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .btn--text .btn__arrow--inline {
    width: calc(20 * var(--scale-unit));
    height: calc(20 * var(--scale-unit));
  }

  .btn--w680,
  .btn--w588,
  .btn--w580,
  .btn--w520,
  .btn--w360 {
    width: var(--inner-width);
  }

  .btn--w262,
  .btn--w240 {
    width: calc(310 * var(--scale-unit));
  }

  .btn--h56 {
    height: calc(56 * var(--scale-unit));
  }

  /* PC の .btn--primary.btn--h56（20px / 矢印 32px）は詳細度が .btn--primary より高く、
     打ち消さないと SP でも固定 px のまま残る */
  .btn--primary.btn--h56 {
    font-size: calc(16 * var(--scale-unit));
  }

  .btn--primary.btn--h56 .btn__arrow {
    width: calc(28 * var(--scale-unit));
    height: calc(28 * var(--scale-unit));
  }

  /* PC の 580×80 は SP では他のボタンと同じ 350×56 に丸める。
     .btn--secondary は既定が 48px / 16px なので、文字・矢印もプライマリと揃える */
  .btn--h80 {
    height: calc(56 * var(--scale-unit));
  }

  .btn--secondary.btn--h80 {
    font-size: calc(18 * var(--scale-unit));
  }

  .btn--secondary.btn--h80 .btn__arrow {
    width: calc(32 * var(--scale-unit));
    height: calc(32 * var(--scale-unit));
  }

  .section-title {
    padding: 0 calc(10 * var(--scale-unit)) var(--title-band-offset);
    font-size: calc(24 * var(--scale-unit));

    line-height: 1.3;
    --title-band-height: calc(15 * var(--scale-unit));
    --title-band-offset: calc(5 * var(--scale-unit));
  }

  .section-title--lg {
    font-size: calc(35 * var(--scale-unit));
    line-height: 1.2;
    --title-band-height: calc(16 * var(--scale-unit));
    --title-band-offset: calc(2 * var(--scale-unit));
  }

  .section-title--pill {
    width: calc(240 * var(--scale-unit));
    height: calc(48 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
  }

  .cta {
    min-width: auto;
    height: calc(248 * var(--scale-unit));
    padding-top: calc(96 * var(--scale-unit));
    background-image: url('../images/bg-cta-sp.svg');
    background-size: 100% calc(248 * var(--scale-unit));
  }

  .cta--footer {
    height: calc(208 * var(--scale-unit));
    background-image: url('../images/bg-cta-footer-sp.svg');
    background-size: 100% calc(208 * var(--scale-unit));
  }

  .txt-pc { display: none; }

  .txt-sp { display: inline; }

  .sticky-bar {
    width: calc(374 * var(--scale-unit));
    height: var(--sticky-height);

    flex-direction: column;
    align-items: flex-end;
  }

  .sticky-bar__panel {

    align-items: flex-start;
    width: 100%;
    height: calc(96 * var(--scale-unit));
    padding-top: calc(8 * var(--scale-unit));
    border-width: 1.5px;
  }

  .sticky-bar__top {
    order: -1;
    width: calc(48 * var(--scale-unit));
    height: calc(48 * var(--scale-unit));
    margin-top: 0;
    margin-bottom: calc(8 * var(--scale-unit));
    margin-left: 0;
  }

  /* SPはシャドウが PC と別値（dx -1 / dy 1 / blur 5 / spread 1）で、
     書き出しは 60×60・円は左 7px・上 5px。PC 版の縮小では合わないため専用アセットを使う */
  .sticky-bar__top img {
    top: calc(-5 * var(--scale-unit));
    left: calc(-7 * var(--scale-unit));
    width: calc(60 * var(--scale-unit));
    height: calc(60 * var(--scale-unit));
  }

  .sticky-bar__inner {
    flex-direction: column;
    gap: calc(5.2 * var(--scale-unit));
    align-items: center;
    width: 100%;
  }

  .sticky-bar__lead {
    width: 100%;
    margin-left: 0;
    font-size: calc(16 * var(--scale-unit));
  }

  /* SP のリードにはグラデーションのマーカー帯が入らない。
     PC 用の字送り調整（帯のはみ出し・1 行目の全角スペース分）も外す */
  .sticky-bar__marker {
    background: none;
  }

  .sticky-bar__marker--1 {
    margin-right: 0;
  }

  .sticky-bar__marker--2 {
    padding-inline: 0;
    margin-inline: 0;
  }

  .sticky-bar__logo {
    width: calc(118 * var(--scale-unit));
    height: calc(16 * var(--scale-unit));
    margin-left: calc(-7 * var(--scale-unit));
    vertical-align: calc(-1 * var(--scale-unit));
    object-fit: contain;
  }

  .sticky-bar__cta {
    width: calc(205.346 * var(--scale-unit));
    height: calc(30 * var(--scale-unit));
  }

  /* キャンペーン告知 modifier
     バーは 374×141（TOP 48 ＋ 余白 8 ＋ パネル 85）。パネルだけ他ページの 96 と高さが違う。
     absolute の基準は border の内側なので枠線の1.5pxを差し引く */
  .sticky-bar--campaign .sticky-bar__panel {
    height: calc(85 * var(--scale-unit));
    padding-top: 0;
  }

  .sticky-bar__campaign-logo {
    top: calc(16 * var(--scale-unit) - 1.5px);
    left: calc(19 * var(--scale-unit) - 1.5px);
    width: calc(182 * var(--scale-unit));
    height: calc(25 * var(--scale-unit));
    object-fit: contain;
  }

  .sticky-bar__campaign-text {
    top: calc(45 * var(--scale-unit) - 1.5px);
    left: calc(14 * var(--scale-unit) - 1.5px);
    font-size: calc(20 * var(--scale-unit));
    letter-spacing: calc(-0.8 * var(--scale-unit));
    line-height: 1.2;
  }

  .sticky-bar__campaign-text-a {
    letter-spacing: calc(-4.6 * var(--scale-unit));
  }

  .sticky-bar__campaign-state {
    top: calc(17 * var(--scale-unit) - 1.5px);
    left: calc(212 * var(--scale-unit) - 1.5px);
    font-size: calc(48 * var(--scale-unit));
    letter-spacing: calc(1.44 * var(--scale-unit));
  }

  .sticky-bar__state-marker {
    top: calc(21 * var(--scale-unit) - 1.5px);
    left: calc(209 * var(--scale-unit) - 1.5px);
    width: calc(148 * var(--scale-unit));
    height: calc(31 * var(--scale-unit));
  }

  .sticky-bar__more {
    display: none;
  }

  /* 事前エントリー CTA（キャンペーンTOP）
     バーは 374×137（TOP 48 ＋ 余白 8 ＋ パネル 81）。
     absolute の基準は border の内側なので枠線の 1.5px を差し引く */
  .sticky-bar--entry .sticky-bar__panel {
    height: calc(81 * var(--scale-unit));
    padding-top: 0;
  }

  /* SP は期限帯が下端の全幅なので、テキストが置ける領域はパネル内側の全幅。
     （無料）削除で幅が縮んだぶん、左右 0 の中央寄せに変える（元は左端 33px 固定）*/
  .sticky-bar__entry-text {
    top: calc(8 * var(--scale-unit) - 1.5px);
    right: 0;
    left: 0;
    text-align: center;
    font-size: calc(27 * var(--scale-unit));
    line-height: 1.2;
  }

  .sticky-bar__entry-text-a {
    letter-spacing: calc(-8.1 * var(--scale-unit));
  }

  /* SP にツヤ帯は無い */
  .sticky-bar__entry-marker {
    display: none;
  }

  /* SP の期限帯（Rectangle 295）はパネル内側の下端いっぱい（371×33）。
     グラデーションは PC と逆で --gradient-panel と同じ向き */
  .sticky-bar__entry-deadline {
    top: auto;
    bottom: 0;
    width: 100%;
    height: calc(33 * var(--scale-unit));
    border-radius: 0 0 calc(8 * var(--scale-unit)) calc(8 * var(--scale-unit));
    background-image: var(--gradient-panel);
    font-size: calc(18 * var(--scale-unit));
    letter-spacing: calc(0.9 * var(--scale-unit));
  }

  /* 口座開設 CTA（10/14 用。現在どのページからも参照していない → 4-5 章）
     SP はリード文とロゴを出さず、「口座開設」だけをパネル中央に置く。
     パネル 68 - 枠線 1.5×2 の内側に 44 を中央寄せすると、上端から 12px（Figma 実測）になる */
  .sticky-bar--account .sticky-bar__panel {
    align-items: center;
    height: calc(68 * var(--scale-unit));
    padding-top: 0;
  }

  .sticky-bar--account .sticky-bar__lead {
    display: none;
  }

  /* （無料）削除で text-open-account-short-sp.svg が 266.807 → 182.695px に縮んだ */
  .sticky-bar--account .sticky-bar__cta {
    width: calc(182.695 * var(--scale-unit));
    height: calc(44 * var(--scale-unit));
  }

  .footer-bank {
    min-width: auto;
    padding: calc(40 * var(--scale-unit)) 0 calc(32 * var(--scale-unit));
  }

  .footer-bank__logo {
    width: calc(294 * var(--scale-unit));
    height: calc(40 * var(--scale-unit));
  }

  .footer-bank__contact {
    z-index: 0;
    width: var(--inner-width);
    margin-block: calc(24 * var(--scale-unit)) 0;
    padding: calc(72 * var(--scale-unit)) calc(22 * var(--scale-unit)) calc(24 * var(--scale-unit));
    background: none;
  }

  .footer-bank__contact::before {
    content: '';
    position: absolute;
    inset: calc(24 * var(--scale-unit)) 0 0;
    z-index: -1;
    border-radius: var(--radius-card);
    background-color: var(--color-white);
  }

  .contact-card {
    padding-bottom: calc(24 * var(--scale-unit));
  }

  .contact-card + .contact-card {
    margin-top: calc(17 * var(--scale-unit));
    padding-bottom: calc(14 * var(--scale-unit));
  }

  .contact-card__title {
    display: block;
    height: auto;
    padding: calc(15 * var(--scale-unit)) calc(4 * var(--scale-unit)) calc(17 * var(--scale-unit)) calc(8 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
  }

  .contact-card__center {
    margin-top: calc(15 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .contact-card__tel {
    display: block;
    margin-top: calc(8.4 * var(--scale-unit));
    margin-left: 0;
    font-size: calc(30 * var(--scale-unit));
  }

  .contact-card__hours {
    margin-top: calc(7.9 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  /* 左右対称の8pxマージンで置くと内容幅286pxになり、
     1 行目（276.48）は収まり「～」を足した 290.48 は収まらないので、
     br が効かない場合でも同じ位置で折り返す */
  .contact-card__hours-note {
    display: block;
    margin: calc(4.4 * var(--scale-unit)) calc(8 * var(--scale-unit)) 0;
    font-size: calc(14 * var(--scale-unit));
    text-align: left;
  }

  .contact-card__mail {
    margin-top: calc(15.2 * var(--scale-unit));
    gap: calc(4 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .contact-card__mail-wrap {
    margin-bottom: 0;
    line-height: calc(20 * var(--scale-unit));
  }

  .contact-card__mail img {
    width: calc(20 * var(--scale-unit));
    height: calc(20 * var(--scale-unit));
  }

  /* 縦罫はセルごとに引くと破線の位相がずれるため、
     table 自身の背景として列境界（125 / 177）に 2 本敷く。
     横罫は実線なので tbody td の border-top のまま */
  .contact-table {
    width: calc(290 * var(--scale-unit));
    margin: calc(24 * var(--scale-unit)) auto 0 calc(2 * var(--scale-unit));
    background-image:
      repeating-linear-gradient(
        180deg,
        var(--color-border-blue) 0 3px,
        transparent 3px 6px
      ),
      repeating-linear-gradient(
        180deg,
        var(--color-border-blue) 0 3px,
        transparent 3px 6px
      );
    background-repeat: no-repeat;
    background-position: calc(125 * var(--scale-unit)) top, calc(177 * var(--scale-unit)) top;
    background-size: 1px 100%;
  }

  .contact-table th {
    padding-block: calc(7 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
    vertical-align: middle;
  }

  .contact-table td {
    padding-block: calc(16 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
    line-height: calc(17 / 14);
    vertical-align: top;
  }

  .contact-table__list li {
    line-height: inherit;
  }

  .contact-table tbody tr {
    background: none;
  }

  .contact-table tbody td {
    border-top: 1px solid var(--color-border-blue);
  }

  .contact-table__col--subject {
    width: calc(125 * var(--scale-unit));
  }

  .contact-table__col--voice {
    width: calc(52 * var(--scale-unit));
    text-align: center;
  }

  .contact-table__col--hours {
    width: calc(113 * var(--scale-unit));
  }

  /* 見出し「受付時間」は Figma `2557:9056`（x=254）＝ 内容ボックス（231～336）の中央のまま。
     本文セルだけ Figma `2557:9063`（x=231 ＝ 内容ボックスの左端）に合わせて左揃えにする */
  .contact-table th.contact-table__col--hours {
    text-align: center;
  }

  .contact-table td.contact-table__col--hours {
    text-align: left;
  }

  /* 継続行は頭に全角スペース（= 1em = 14px）が入ったぶら下げインデントなので、
     padding-left 12+14=26 と text-indent -14 で同じ字下げを作る。
     PC 側と同じく .contact-table td に負けないよう要素で修飾する */
  .contact-table th.contact-table__col--subject {
    padding-left: calc(12 * var(--scale-unit));
  }

  .contact-table td.contact-table__col--subject {
    padding-right: calc(8 * var(--scale-unit));
    padding-left: calc(26 * var(--scale-unit));
    text-indent: calc(-14 * var(--scale-unit));
  }

  .contact-table td.contact-table__col--voice {
    padding-left: 0;
  }

  /* 見出しは「音声 / 案内」の2行。テキスト幅28pxでは
     ブラウザでは端数で 1 文字ずつに折れて 4 行になるため 2px の余裕を持たせて 30px にする */
  .contact-table th.contact-table__col--voice {
    padding-inline: calc(11 * var(--scale-unit));
  }

  .contact-table th.contact-table__col--hours,
  .contact-table td.contact-table__col--hours {
    padding-left: calc(8 * var(--scale-unit));
  }

  .contact-table__voice {
    font-size: calc(18 * var(--scale-unit));
  }

  .footer-bank__legal {
    margin-top: calc(24 * var(--scale-unit));
    font-size: calc(12 * var(--scale-unit));
  }

  /* 「所属銀行　　：」のようにラベルを全角 6 文字ぶんへ揃え、
     取扱業務の継続行は「取扱業務　　：」= 全角 7 文字ぶんぶら下げる（計 8 行 / h136）。
     全角スペースを本文に打たずに CSS で作るため、法令表示の文言は変わらない */
  .footer-bank__legal-label {
    display: inline-block;
    width: 6em;
  }

  .footer-bank__legal-row--business {
    padding-left: 7em;
    text-indent: -7em;
  }

  .footer-bank__terms {
    flex-direction: column;
    gap: calc(24 * var(--scale-unit));
    width: var(--inner-width);
    margin-top: calc(24 * var(--scale-unit));
  }

  /* Figma の白エリア 504px は「padding-top 32 + 内容 311.6 + padding-bottom 160.4」。
     下の 160.4 には下追従バーの裏に敷く白（--body-offset-bottom）が含まれる。
     バーの高さはページごとに違う（通年 TOP 141 / キャンペーン 137 / よくある質問 124）ため、
     ここは --body-offset-bottom を足さずに 160.4 の実数で置き、
     旧実装（height: 504）と同じ見え方をどのページでも保つ */
  .footer {
    min-width: auto;
    padding-top: calc(32 * var(--scale-unit));
    padding-bottom: calc(160.4 * var(--scale-unit));
  }

  .footernav_list {
    display: grid;
    grid-template-columns: calc(231 * var(--scale-unit)) 1fr;
    gap: calc(16 * var(--scale-unit)) 0;
  }

  .footernav_link {
    gap: calc(5 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .footernav_link::before {
    width: calc(16 * var(--scale-unit));
    height: calc(16 * var(--scale-unit));
    margin-top: calc(2 * var(--scale-unit));
    background-size: calc(16 * var(--scale-unit)) calc(16 * var(--scale-unit));
  }

  .footer_middle {
    margin-top: calc(32 * var(--scale-unit));
  }

  /* 項目間は「19px + 区切り線 0px + 19px」= 38px。
     線は絶対配置で幅を持たないため、350px の行の折り返し位置は
     項目のテキスト幅だけで決まる（従来の「幅 0 の img」と同じ扱い） */
  .footerlink {
    flex-wrap: wrap;
    column-gap: calc(38 * var(--scale-unit));
    row-gap: calc(14 * var(--scale-unit));
  }

  .footerlink_item:not(:last-child) {
    height: calc(20 * var(--scale-unit));
  }

  .footerlink_item:not(:last-child)::after {
    right: calc(-19 * var(--scale-unit));
    height: calc(20 * var(--scale-unit));
    margin-top: calc(-10 * var(--scale-unit));
    background-size: 1px calc(20 * var(--scale-unit));
  }

  .footerlink_link {
    font-size: calc(14 * var(--scale-unit));
  }

  .footer_bottom {
    margin-top: calc(24 * var(--scale-unit));
  }

  .copyright {
    font-size: calc(14 * var(--scale-unit));
  }

  .sp_vis {
    display: inline;
  }

  .br-sp { display: inline; }
  .br-pc { display: none; }

  /* SP のキャッチとタグラインはアウトライン化された vector で、フォントサイズという概念を持たない。
     書き出した SVG を敷き、テキストは DOM に残す（画像置換）。
     フレームはヘッダー下端より 1px 上（ページ y = 55）から始まるので、
     PC の打ち消しマージンを戻したうえで -1px だけ残す。はみ出した 1px は固定ヘッダーの下に隠れる。
     以下の top はすべてフレーム上端（ページ 55px）からの相対値 */

  .mv {
    overflow: hidden;
    height: calc(386 * var(--scale-unit));
    margin-top: calc(var(--scale-unit) * -1);
  }

  .mv__bg {
    left: 0;
    width: 100%;
    height: calc(386 * var(--scale-unit));
  }

  /* 位置は export SVG の translate(-239.071 -160.213) から取った（bbox は房の反転でずれる）。
     y はページ座標なので、フレーム上端 55 を引いた値を書く */
  .mv__ribbon {
    top: calc(105.213 * var(--scale-unit));
    left: calc(239.071 * var(--scale-unit));
    width: calc(135 * var(--scale-unit));
    height: calc(57 * var(--scale-unit));
    background-image: url('../images/mv-ribbon-sp.svg');
  }

  /* SP のタグラインは 2 行ともアウトライン化された vector。PC のライブテキストを画像へ差し替える */
  .mv__tagline {
    top: calc(20 * var(--scale-unit));
    left: calc(102 * var(--scale-unit));
    overflow: hidden;
    width: calc(185 * var(--scale-unit));
    height: calc(18 * var(--scale-unit));
    background-image: url('../images/mv-tagline-sp.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-indent: 100%;
    white-space: nowrap;
  }

  /* 2 行組が 1 枚の vector になっているので、PC の font-size / line-height は効かない */
  .mv__tagline--sub {
    top: calc(109 * var(--scale-unit));
    left: calc(19 * var(--scale-unit));
    width: calc(222 * var(--scale-unit));
    height: calc(38 * var(--scale-unit));
    background-image: url('../images/mv-tagline-sub-sp.svg');
  }

  /* SP のロゴは枠と画像が同寸（350x48.982）*/
  .mv__logo {
    top: calc(46 * var(--scale-unit));
    left: calc(19 * var(--scale-unit));
    width: calc(350 * var(--scale-unit));
    height: calc(48.982 * var(--scale-unit));
  }

  .mv__pill {
    top: calc(164 * var(--scale-unit));
    left: calc(20 * var(--scale-unit));
    width: calc(204 * var(--scale-unit));
    height: calc(63 * var(--scale-unit));
    border-radius: calc(5 * var(--scale-unit));
    background-color: var(--color-bg-light-blue);
  }

  .mv__lead {
    top: calc(7 * var(--scale-unit));
    left: calc(12 * var(--scale-unit));
    width: calc(180 * var(--scale-unit));
    height: calc(45 * var(--scale-unit));
    background-image: url('../images/mv-catch-sp.svg');
  }

  .mv__coin--left {
    top: calc(29.808 * var(--scale-unit));
    left: calc(22.3223 * var(--scale-unit));
    width: calc(23 * var(--scale-unit));
    height: calc(26 * var(--scale-unit));
  }

  .mv__coin--right {
    top: calc(30.846 * var(--scale-unit));
    left: calc(157.806 * var(--scale-unit));
    width: calc(23 * var(--scale-unit));
    height: calc(25 * var(--scale-unit));
  }

  /* SP は回転が無く、画像は枠（158x164）の下端で切り落とされる。
     枠の下端はフレーム下端（386）より 59px 手前なので、.mv の overflow には任せられない。
     画像は枠幅いっぱい（158）に原寸比で伸ばして上端合わせ。高さ 249.275 は
     原本 2417x3813 の比から出した値で、export と重ねて実測したものと一致する */
  .mv__phone {
    top: calc(163 * var(--scale-unit));
    left: calc(206 * var(--scale-unit));
    overflow: hidden;
    width: calc(158 * var(--scale-unit));
    height: calc(164 * var(--scale-unit));
    rotate: none;
  }

  .mv__phone-img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(158 * var(--scale-unit));
    height: calc(249.275 * var(--scale-unit));
  }

  /* 6 本とも PC とは別の SVG に差し替える（形状は相似だが export の枠の丸めが違う）*/
  .mv__sparkle--1 {
    top: calc(13.973 * var(--scale-unit));
    left: calc(349.157 * var(--scale-unit));
    width: calc(15 * var(--scale-unit));
    height: calc(18 * var(--scale-unit));
    background-image: url('../images/mv-sparkle-1-sp.svg');
  }

  .mv__sparkle--2 {
    top: calc(27.79 * var(--scale-unit));
    left: calc(360.292 * var(--scale-unit));
    width: calc(11 * var(--scale-unit));
    height: calc(12 * var(--scale-unit));
    background-image: url('../images/mv-sparkle-2-sp.svg');
  }

  .mv__sparkle--3 {
    top: calc(30.851 * var(--scale-unit));
    left: calc(36.6602 * var(--scale-unit));
    width: calc(14 * var(--scale-unit));
    height: calc(16 * var(--scale-unit));
    background-image: url('../images/mv-sparkle-3-sp.svg');
  }

  .mv__sparkle--4 {
    top: calc(20.991 * var(--scale-unit));
    left: calc(44.1279 * var(--scale-unit));
    width: calc(10 * var(--scale-unit));
    height: calc(11 * var(--scale-unit));
    background-image: url('../images/mv-sparkle-4-sp.svg');
  }

  .mv__sparkle--5 {
    top: calc(167.099 * var(--scale-unit));
    left: calc(236.399 * var(--scale-unit));
    width: calc(12 * var(--scale-unit));
    height: calc(15 * var(--scale-unit));
    background-image: url('../images/mv-sparkle-5-sp.svg');
  }

  .mv__sparkle--6 {
    top: calc(159 * var(--scale-unit));
    left: calc(229.02 * var(--scale-unit));
    width: calc(10 * var(--scale-unit));
    height: calc(12 * var(--scale-unit));
    background-image: url('../images/mv-sparkle-6-sp.svg');
  }

  /* 注釈は PC と逆でボタンの下に来るため、orderで入れ替えて中央寄せにする。
     さらに SP は CTA が MV の背景に 105px 重なる（Figma: ボタン y=336 / MV 下端 441）。
     内部の余白（16 / 13）を保ったまま塊ごと引き上げたいので、負マージンは .cta-btn ではなく
     .mv-cta に置く（-121 = -105 - 16）。.mv は position: relative なので、
     .mv-cta 側にも position を与えないと MV のほうが上に描かれる */

  .mv-cta {
    position: relative;
    z-index: 1;
    margin-top: calc(-121 * var(--scale-unit));
  }

  .mv-cta__note {
    order: 1;
    height: calc(20 * var(--scale-unit));
    margin-top: calc(13 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
    text-align: center;
  }

  .cta-btn {
    width: calc(350 * var(--scale-unit));
    margin-top: calc(16 * var(--scale-unit));
  }

  .btn--primary.btn--mv {
    width: var(--inner-width);
    letter-spacing: normal;
  }

  .news {
    min-height: 0;
    margin-top: calc(48 * var(--scale-unit));

    padding: calc(24 * var(--scale-unit) - 1.5px) calc(24 * var(--scale-unit) - 1.5px);
    border-width: 1.5px;
    border-radius: calc(5 * var(--scale-unit));
  }

  .news__head {
    position: static;
    justify-content: center;
    gap: calc(12 * var(--scale-unit));
    /* PC の上下中央寄せ（translateY(-50%)）を解除する。
       transform は position: static でも効いてしまうため必ず打ち消す */
    transform: none;
  }

  .news__icon {
    width: calc(24 * var(--scale-unit));
    height: calc(28 * var(--scale-unit));
  }

  .news__title {
    margin-top: calc(2 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
  }

  .news__list {
    width: auto;
    margin-top: calc(16 * var(--scale-unit));
    margin-left: 0;
    padding: calc(16 * var(--scale-unit)) 0 0;
    border-top: 1px solid var(--color-primary);
  }

  .news__item {
    display: block;
  }

  .news__item + .news__item {
    padding-top: calc(13 * var(--scale-unit));
    background: repeating-linear-gradient(
        90deg,
        var(--color-border-blue) 0 calc(3 * var(--scale-unit)),
        transparent calc(3 * var(--scale-unit)) calc(6 * var(--scale-unit))
      )
      no-repeat left top / 100% 1px;
  }

  .news__body {
    padding-left: 0;
  }

  .news__date {
    position: static;
    display: block;
    font-size: calc(12 * var(--scale-unit));
  }

  .news__link {
    margin-top: calc(4 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .news__pdf {
    width: calc(15 * var(--scale-unit));
    height: calc(26 * var(--scale-unit));
    margin-left: calc(6 * var(--scale-unit));
    vertical-align: calc(-5.52 * var(--scale-unit));
  }

  .about {
    margin-top: calc(54 * var(--scale-unit));
  }

  .about__title {
    height: calc(34 * var(--scale-unit));
  }

  .about__logo {
    width: calc(230 * var(--scale-unit));
    height: calc(32 * var(--scale-unit));
  }

  .about__title-suffix {
    margin-top: calc(10 * var(--scale-unit));
    margin-left: calc(2 * var(--scale-unit));
    font-size: calc(24 * var(--scale-unit));
  }

  .about__lead {
    margin-top: calc(20 * var(--scale-unit));
    font-size: calc(18 * var(--scale-unit));
    text-align: left;
  }

  /* 上マージンは lead 下端（1400 + 3 行 86.4 = 1486.4）→ カルーセル上端 1506 の差 */
  .about__carousel {
    margin-top: calc(19.6 * var(--scale-unit));
  }

  /* カルーセル: 370 のビューポート（.l-inner の 350 から右へ 20 はみ出して画面端まで）に
     320 幅のカードを 8px 間隔で並べ、次カードを覗かせる */
  .about__cards {
    width: calc(370 * var(--scale-unit));
    gap: calc(8 * var(--scale-unit));
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .about__cards::-webkit-scrollbar {
    display: none;
  }

  .about-card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-width: 1.5px;
    border-radius: calc(5 * var(--scale-unit));
  }

  .about-card--main,
  .about-card--sub {
    width: calc(320 * var(--scale-unit));
    height: calc(388 * var(--scale-unit));
  }

  .about-card--point      { order: 1; }
  .about-card--electricity { order: 2; }
  .about-card--smartphone { order: 3; }

  /* 表示順の最終カード（order: 3）に trailing margin を持たせ、スクロール終端でも
     右端カードの右側に .l-inner と同じ 20px の余白を残す。
     容器側の padding-right だと box-sizing: border-box で 370 のビューポートが痩せ、
     次カードの覗く量が変わってしまうため、カード側のマージンで足している */
  .about-card--smartphone {
    margin-right: calc(20 * var(--scale-unit));
  }

  .about-card--main .about-card__title,
  .about-card--sub .about-card__title {
    align-items: center;
    height: calc(48 * var(--scale-unit));
    padding-top: 0;
    font-size: calc(20 * var(--scale-unit));
    line-height: 1.2;
  }

  .about-card--electricity .about-card__title {
    height: calc(64 * var(--scale-unit));
  }

  .about-card__illust {
    justify-content: flex-start;
  }

  .about-card--main .about-card__illust,
  .about-card--sub .about-card__illust {
    margin-top: 0;
  }

  .about-card--point .about-card__illust {
    padding-top: calc(24 * var(--scale-unit));
    padding-left: calc(30 * var(--scale-unit));
  }

  .about-card--point .about-card__illust img {
    width: calc(266 * var(--scale-unit));
    height: calc(188 * var(--scale-unit));
  }

  .about-card--electricity .about-card__illust {
    padding-top: calc(16 * var(--scale-unit));
    padding-left: calc(61 * var(--scale-unit));
  }

  .about-card--electricity .about-card__illust img {
    width: calc(210.753 * var(--scale-unit));
    height: calc(180 * var(--scale-unit));
  }

  .about-card--smartphone .about-card__illust {
    justify-content: center;
    padding-top: calc(26 * var(--scale-unit));
  }

  .about-card--smartphone .about-card__illust img {
    width: calc(204.653 * var(--scale-unit));
    height: calc(184 * var(--scale-unit));
  }

  /* btn 上端 276 / 下端 316。カード高さが固定なので、下から積んだ余白で位置が決まる
     （btn 下端から注釈上端までの 8px は注釈側の margin-top が持つ） */
  .about-card--main .about-card__btn,
  .about-card--sub .about-card__btn {
    margin-top: auto;
    margin-bottom: 0;
  }

  .about-card--smartphone .about-card__btn {
    margin-bottom: calc(72 * var(--scale-unit));
  }

  .about-card__note {
    margin-top: calc(8 * var(--scale-unit));
    margin-bottom: calc(24 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .about-card--point .about-card__note       { width: calc(280 * var(--scale-unit)); }
  .about-card--electricity .about-card__note { width: calc(238 * var(--scale-unit)); }

  .about-card__btn .btn--text {
    width: calc(250 * var(--scale-unit));
  }

  .about__controls:not([hidden]) {
    display: flex;
    justify-content: center;
    margin-top: calc(16 * var(--scale-unit));
  }

  /* 矢印は「左右にカードが続いている」ことを示す部品なので、ドット行ではなく
     表示中のカードの左右端へ縦中央で重ねる。
     .about__carousel の左端＝カードの左端（どちらも .l-inner の左端 20）なので、
     next も right ではなく left で書けば、ラッパー幅 350 とトラック幅 370 の差に依存しない。
     40px の円の外へ 2px ずつ広げて 44px のタップ領域を確保する。
     --carousel-shift は index.js が入れる「表示中のカードが左端から右にずれて止まる量」で、
     左端まで来られない最終カードでも矢印がカードの縁に乗る（既定は 0） */
  .about__arrow {
    position: absolute;
    top: calc(172 * var(--scale-unit));  /* カード中心 388 / 2 = 194 から円の半径 + 2 を引く */
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(44 * var(--scale-unit));
    height: calc(44 * var(--scale-unit));
    padding: 0;
    border: 0;
    background: transparent;
    transition: left var(--carousel-duration) ease;
  }

  /* 円をカードの縁から 12 外へはみ出させる（-14 = -12 - タップ領域の 2 /
     290 = カード幅 320 - 円 40 + 12 - 2）。12 なのは、左円の外縁を画面 x=8 、
     つまり SP の下追従バーと同じ端マージンに合わせるため */
  .about__arrow--prev { left: calc(var(--scale-unit) * -14 + var(--carousel-shift, 0px)); }
  .about__arrow--next { left: calc(var(--scale-unit) * 290 + var(--carousel-shift, 0px)); }

  .about__arrow img {
    width: calc(40 * var(--scale-unit));
    height: calc(40 * var(--scale-unit));
  }

  .about__arrow--prev img {
    rotate: 180deg;
  }

  .about__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .about__dots {
    display: flex;
    gap: calc(32 * var(--scale-unit));
  }

  .about__dot {
    width: calc(12 * var(--scale-unit));
    height: calc(12 * var(--scale-unit));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-border-blue);
  }

  .about__dot.is-current {
    background-color: var(--color-primary);
  }

  .about__more {
    margin-top: calc(32 * var(--scale-unit));
  }

  .about + .cta {
    margin-top: calc(56 * var(--scale-unit));
  }

  .section-title--band {
    padding: 0;
    line-height: 1.3;
  }

  .section-title--band::after {
    content: none;
  }

  .section-title__band {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 0 calc(8 * var(--scale-unit)) var(--title-band-offset);
  }

  .section-title__band::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: var(--title-band-height);
    background-image: var(--gradient-title);
  }

  .point {
    margin-top: calc(48 * var(--scale-unit));
  }

  .point__title {
    --title-band-offset: calc(2 * var(--scale-unit));
  }

  .point__title .section-title__band {
    padding-inline: calc(10 * var(--scale-unit));
  }

  .point__title-num {
    font-size: calc(32 * var(--scale-unit));
  }

  .point__title-unit {
    font-size: calc(24 * var(--scale-unit));
  }

  .condition {
    margin-top: calc(32 * var(--scale-unit));
    padding-bottom: calc(24 * var(--scale-unit));
  }

  .condition__panel {
    height: auto;
    margin-top: calc(-24 * var(--scale-unit));
    padding-bottom: calc(48 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
    background: var(--color-white);
  }

  .condition__inner {
    /* .condition-req の負マージン（イラストのはみ出し分）がパネルへ
       マージン相殺で吸われないよう BFC を作る */
    display: flow-root;
    width: 100%;
    padding-top: 0;
  }

  .condition__btn {
    bottom: calc(-24 * var(--scale-unit));
  }

  .condition-req {
    height: calc(272 * var(--scale-unit));
    margin-top: calc(-5 * var(--scale-unit));
  }

  .condition-req__illust {
    left: calc(55 * var(--scale-unit));
    width: calc(76 * var(--scale-unit));
    height: calc(92 * var(--scale-unit));
  }

  .condition-req__badge {
    display: block;
    position: absolute;
    top: calc(16 * var(--scale-unit));
    left: calc(1 * var(--scale-unit));
    z-index: 2;
    width: calc(67 * var(--scale-unit));
    height: calc(63 * var(--scale-unit));
  }

  .condition-req__row {
    top: calc(65 * var(--scale-unit));
    left: calc(20 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    height: calc(207 * var(--scale-unit));
    border-width: 2px;
  }

  .condition-req__label {
    top: calc(40 * var(--scale-unit) - 2px);
    left: calc(15 * var(--scale-unit) - 2px);
    width: calc(280 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
    text-align: center;
    white-space: nowrap;
  }

  .condition-req__row::before {
    top: calc(76 * var(--scale-unit) - 2px);
    left: calc(20 * var(--scale-unit) - 2px);
    width: calc(270 * var(--scale-unit));
    height: 1px;
  }

  .condition-req__row::after {
    top: calc(94 * var(--scale-unit) - 2px);
    left: calc(193 * var(--scale-unit) - 2px);
    width: 1px;
    height: calc(64 * var(--scale-unit));
  }

  .condition-req__desc {
    top: calc(92 * var(--scale-unit) - 2px);
    left: calc(40 * var(--scale-unit) - 2px);
    font-size: calc(18 * var(--scale-unit));
    line-height: 1.3;
  }

  .condition-req__strong {
    font-size: calc(20 * var(--scale-unit));
  }

  .condition-req__limit {
    top: calc(173 * var(--scale-unit) - 2px);
    left: calc(31 * var(--scale-unit) - 2px);
    font-size: calc(14 * var(--scale-unit));
    line-height: 1.3;
  }

  .condition-req__rate {
    top: calc(98 * var(--scale-unit) - 2px);
    left: calc(220 * var(--scale-unit) - 2px);
  }

  .condition-req__num {
    font-size: calc(56 * var(--scale-unit));
  }

  .condition-req__unit {
    font-size: calc(28 * var(--scale-unit));
  }

  .condition-up {
    flex-direction: column;
    justify-content: flex-start;
    width: calc(310 * var(--scale-unit));
    height: calc(101 * var(--scale-unit));
    margin-top: calc(32 * var(--scale-unit));
    margin-inline: auto;
    padding-top: calc(16 * var(--scale-unit));
    font-size: calc(18 * var(--scale-unit));
  }

  .condition-up::before {
    top: calc(-16 * var(--scale-unit));
    border-right-width: calc(14.5 * var(--scale-unit));
    border-bottom-width: calc(22 * var(--scale-unit));
    border-left-width: calc(14.5 * var(--scale-unit));
  }

  .condition-up__strong {
    display: block;
    font-size: calc(28 * var(--scale-unit));
  }

  .condition-list {
    flex-direction: column;
    gap: calc(8 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    margin-top: calc(16 * var(--scale-unit));
  }

  .condition-card,
  .condition-card:nth-child(n + 4) {
    display: block;
    position: relative;
    width: 100%;
    border-color: var(--color-border-blue-2);
    height: calc(142 * var(--scale-unit));
    padding: calc(24 * var(--scale-unit) - 1.5px);
    border-radius: calc(10 * var(--scale-unit));
  }

  /* 無担保ローンだけ「残高が10万円以上」の 1 行ぶん背が高い */
  .condition-card:nth-child(4) {
    height: calc(162 * var(--scale-unit));
  }

  .condition-card__body {
    width: auto;
  }

  .condition-card::before {
    content: '';
    position: absolute;
    top: calc(24 * var(--scale-unit) - 1.5px);
    left: calc(184 * var(--scale-unit) - 1.5px);
    width: 1px;
    height: calc(76 * var(--scale-unit));
    background-color: var(--color-border-blue);
  }

  .condition-card__head {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: calc(8 * var(--scale-unit));
    width: calc(128 * var(--scale-unit));
    margin-top: 0;
  }

  .condition-card__badge {
    width: calc(128 * var(--scale-unit));
    height: calc(24 * var(--scale-unit));
    padding-top: calc(3 * var(--scale-unit));
    border-radius: calc(30 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .condition-card__label {
    width: calc(108 * var(--scale-unit));
    margin-top: 0;
    font-size: calc(18 * var(--scale-unit));
  }

  .condition-card__rate {
    position: absolute;
    top: calc(30 * var(--scale-unit) - 1.5px);
    left: calc(208 * var(--scale-unit) - 1.5px);
    margin-top: 0;
    margin-bottom: 0;
  }

  /* SP の補足は右揃えではなく左揃え（Figma は見出しの左端に光学的に揃えている） */
  .condition-card__cond,
  .condition-card__limit {
    position: absolute;
    top: calc(108 * var(--scale-unit) - 1.5px);
    margin-top: 0;
    font-size: calc(14 * var(--scale-unit));
    line-height: 1.3;
    text-align: left;
  }

  .condition-card__limit { left: calc(25 * var(--scale-unit) - 1.5px); }
  .condition-card__cond  { left: calc(34 * var(--scale-unit) - 1.5px); }

  .condition-card__cond + .condition-card__limit {
    top: calc(128 * var(--scale-unit) - 1.5px);
    margin-top: 0;
  }

  .condition-card__sign,
  .condition-card__unit {
    font-size: calc(28 * var(--scale-unit));
  }

  .condition-card__num {
    font-size: calc(56 * var(--scale-unit));
  }

  /* SPは 2 件が別行。折り返した 2 行目は全角スペース 1 つぶん
     字下げしてあるので、ぶら下げインデントにして「※」の下へ本文が回り込まないようにする */
  ul.condition__note {
    display: block;
  }

  .condition__note {
    width: calc(310 * var(--scale-unit));
    margin-top: calc(8 * var(--scale-unit));
    margin-inline: auto;
    font-size: calc(14 * var(--scale-unit));
    text-align: left;
  }

  .condition__note-item {
    padding-left: 1em;
    text-indent: -1em;
  }

  .condition + .point__divider,
  .point-block + .point__divider {
    margin-top: calc(32 * var(--scale-unit) - 1px);
  }

  .point-block,
  .point-block--electricity,
  .point-block--smartphone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    height: auto;
    margin-top: calc(32 * var(--scale-unit));
    margin-left: 0;
  }

  .point-block--electricity .point-block__body,
  .point-block--smartphone .point-block__body {
    display: contents;
  }

  .point-block__body .section-title { order: 1; }
  .point-block__text               { order: 2; }
  .point-block__note               { order: 3; }
  .point-block__illust             { order: 4; }
  .point-block__btn,
  .point-block__btns               { order: 5; }

  .point-block__body .section-title {
    --title-band-offset: calc(5 * var(--scale-unit));
  }

  .point-block__text,
  .point-block--electricity .point-block__text {
    width: calc(350 * var(--scale-unit));
    margin-top: calc(24 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
    text-align: left;
  }

  .exchange__marker,
  .fee__marker,
  .point-block__marker {
    --marker-height: calc(7 * var(--scale-unit));
  }

  /* SP は PC と違ってボタンの上・左揃え（order: 3）なので、
     PC 側で .exchange__note に寄せたぶら下げ指定をここで持たせ直す */
  .point-block__note {
    width: calc(350 * var(--scale-unit));
    margin-top: calc(16 * var(--scale-unit));
    padding-left: 1em;
    font-size: calc(14 * var(--scale-unit));
    text-align: left;
    text-indent: -1em;
  }

  .point-block__illust {
    width: calc(240 * var(--scale-unit));
    margin-top: calc(16 * var(--scale-unit));
  }

  .point-block__illust img {
    width: calc(240 * var(--scale-unit));
    height: calc(240 * var(--scale-unit));
  }

  .point-block__btn {
    margin-top: calc(24 * var(--scale-unit));
    padding-left: 0;
  }

  .point-block__btns {
    flex-direction: column;
    gap: calc(16 * var(--scale-unit));
    margin-top: calc(24 * var(--scale-unit));
  }

  .point-btn__bubble,
  .point-btn--fee .point-btn__bubble,
  .point-btn--security .point-btn__bubble {
    width: calc(285 * var(--scale-unit));
    height: calc(50 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .point-btn__bubble::after {
    bottom: calc(-15 * var(--scale-unit));
    border-top-width: calc(17.25 * var(--scale-unit));
    border-right-width: calc(12.99 * var(--scale-unit));
    border-left-width: calc(12.99 * var(--scale-unit));
  }

  .point-btn .btn {
    margin-top: calc(8 * var(--scale-unit));
  }

  .point + .cta {
    margin-top: calc(56 * var(--scale-unit));
  }

  .flow {
    margin-top: calc(40 * var(--scale-unit));
  }

  .anker {
    flex-direction: column;
    align-items: center;
    margin-top: calc(32 * var(--scale-unit));
  }

  .anker__btn {
    padding-top: calc(16 * var(--scale-unit));
  }

  .anker__btn::before {
    inset: 0 0 calc(-10 * var(--scale-unit)) calc(-8 * var(--scale-unit));
  }

  .anker__btn--step1 {
    width: calc(350 * var(--scale-unit));
    height: calc(80 * var(--scale-unit));
    padding-right: calc(32 * var(--scale-unit));
  }

  .anker__btn--step1::before {
    background-image: url('../images/bg-anker-step1-sp.svg');
  }

  .anker__btn--step2 {
    width: calc(350 * var(--scale-unit));
    height: calc(89 * var(--scale-unit));
    margin-top: calc(-10 * var(--scale-unit));
    margin-left: 0;
    padding-top: calc(34.7 * var(--scale-unit));
    padding-right: calc(36 * var(--scale-unit));
  }

  /* svgAssets は上下反転を含まないため、切り欠きが下向きのまま書き出される。
     exportで反転を焼き込んだ版を使用する。
     ドロップシャドウは反転しないため、はみ出しは左下のまま */
  .anker__btn--step2::before {
    background-image: url('../images/bg-anker-step2-sp.svg');
  }

  .anker__lead {
    font-size: calc(18 * var(--scale-unit));
  }

  .anker__sub {
    margin-top: calc(8 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .anker__arrow {
    top: calc(16 * var(--scale-unit));
    right: calc(28 * var(--scale-unit));
    width: calc(32 * var(--scale-unit));
    height: calc(32 * var(--scale-unit));
  }

  .anker__btn--step2 .anker__arrow {
    top: calc(36.8 * var(--scale-unit));
    right: calc(28 * var(--scale-unit));
  }

  .step {
    margin-top: calc(32 * var(--scale-unit));
    padding-bottom: calc(88 * var(--scale-unit));
  }

  .step + .step {
    margin-top: calc(40 * var(--scale-unit));
  }

  .step__title,
  .step__title--wide {
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0;
    width: calc(310 * var(--scale-unit));
    height: calc(89 * var(--scale-unit));
    padding-top: calc(14 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
  }

  .step__title--wide {
    height: calc(117 * var(--scale-unit));
  }

  .step__badge {
    width: calc(107 * var(--scale-unit));
    height: calc(35 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
  }

  .step__title-sub {
    font-size: calc(18 * var(--scale-unit));
  }

  .step__title-main {
    width: 100%;
    margin-top: calc(4 * var(--scale-unit));
    font-size: calc(22 * var(--scale-unit));
    text-align: center;
  }

  .step__title--wide .step__title-main {
    margin-top: calc(1.7 * var(--scale-unit));
    line-height: 1.2;
  }

  /* 2 行目は文字ごとに字送りを詰めてピル内へ収める
     （ア -0.8 / カウ -1.44 / ン -2.72 / 携 -3.2 / ・ -4 の計 -13.6px）。
     14 文字へ均等割りした -0.971px を字送りとして当て、素の 308px を 294.4px にする */
  .step__title-tight {
    letter-spacing: calc(-0.971 * var(--scale-unit));
  }

  .step__panel {
    margin-top: calc(-40 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
    background-color: var(--color-white);
    background-image: none;
  }

  .step__panel--1 {
    height: calc(662 * var(--scale-unit));
    padding-top: calc(56 * var(--scale-unit));
  }

  .step__panel--2 {
    height: calc(4054 * var(--scale-unit));
    margin-top: calc(-60 * var(--scale-unit));
    padding-top: calc(76 * var(--scale-unit));
  }

  .step__btns {
    left: 0;
    flex-direction: column;
    gap: calc(16 * var(--scale-unit));
    width: 100%;
    translate: none;
  }

  .step__panel--1 .step__btns {
    bottom: calc(-88 * var(--scale-unit));
  }

  .step__panel--2 .step__btns {
    bottom: calc(-88 * var(--scale-unit));
  }

  .step__btns .btn--h56 {
    height: calc(48 * var(--scale-unit));
  }

  .step-list {
    flex-direction: column;
    gap: calc(8 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    margin-inline: auto;
  }

  .step-card {
    width: calc(310 * var(--scale-unit));
    padding-top: calc(27 * var(--scale-unit));
  }

  .step-card__num {
    left: 0;
    width: calc(67 * var(--scale-unit));
    height: calc(67 * var(--scale-unit));
    padding-top: calc(18 * var(--scale-unit));
    translate: none;
    background-size: 100% 100%;
    font-size: calc(32 * var(--scale-unit));
  }

  .step-card__body {
    position: relative;
    height: calc(151 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
  }

  .step-card__text {
    margin-top: calc(48 * var(--scale-unit) - 2px);
    padding-left: calc(20 * var(--scale-unit) - 2px);
    font-size: calc(18 * var(--scale-unit));
    text-align: left;
  }

  .step-list .step-card__illust {
    position: absolute;
    margin-top: 0;
  }

  /* PC 側の .step-list .step-card:nth-child(n) .step-card__illust（margin-top）は
     .step-list .step-card__illust より詳細度が高く SP でも生き残るため、ここで打ち消す。
     left は Figma のブロック内 x（150 / 211 / 126）から枠線 2px を引いた値 */
  .step-list .step-card:nth-child(1) .step-card__illust {
    top: calc(13 * var(--scale-unit));
    left: calc(150 * var(--scale-unit) - 2px);
    margin-top: 0;
  }

  .step-list .step-card:nth-child(1) .step-card__illust img {
    width: calc(150 * var(--scale-unit));
    height: calc(124 * var(--scale-unit));
  }

  .step-list .step-card:nth-child(2) .step-card__illust {
    top: calc(14 * var(--scale-unit));
    left: calc(211 * var(--scale-unit) - 2px);
    margin-top: 0;
  }

  .step-list .step-card:nth-child(2) .step-card__illust img {
    width: calc(89.727 * var(--scale-unit));
    height: calc(120 * var(--scale-unit));
  }

  .step-list .step-card:nth-child(3) .step-card__illust {
    top: calc(12 * var(--scale-unit));
    left: calc(126 * var(--scale-unit) - 2px);
    margin-top: 0;
  }

  .step-list .step-card:nth-child(3) .step-card__illust img {
    width: calc(175 * var(--scale-unit));
    height: calc(133 * var(--scale-unit));
  }

  .step__intro {
    width: calc(310 * var(--scale-unit));
    text-align: left;
  }

  .step__intro-lead {
    font-size: calc(18 * var(--scale-unit));
  }

  .step__marker {
    background-size: 100% calc(7 * var(--scale-unit));
  }

  .step__intro-note {
    margin-top: calc(16 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .step__intro-links {
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--scale-unit));
    margin-top: calc(16 * var(--scale-unit));
  }

  .step__link {
    gap: calc(4 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .step__link img {
    width: calc(20 * var(--scale-unit));
    height: calc(20 * var(--scale-unit));
  }

  /* STEP02 のカードだけ Step 円のはみ出しが 33.5px = 円 67px の半分（STEP01 の 27px と違う） */
  .step-list--2 {
    gap: calc(16 * var(--scale-unit));
    margin-top: calc(12 * var(--scale-unit));
  }

  .step-list--2 .step-card {
    padding-top: calc(33.5 * var(--scale-unit));
  }

  /* PC の 02 / 03 は横並びで幅が違う。SP は縦積みなので 01 と同じ幅に戻す */
  .step-list--2 .step-card:nth-child(2),
  .step-list--2 .step-card:nth-child(3) {
    width: calc(310 * var(--scale-unit));
  }

  .step-list--2 .step-card__body {
    height: calc(571 * var(--scale-unit));
  }

  .step-list--2 .step-card:nth-child(2) .step-card__body {
    height: calc(1201 * var(--scale-unit));
  }

  .step-list--2 .step-card:nth-child(3) .step-card__body {
    height: calc(1808 * var(--scale-unit));
  }

  /* 01 のキャプチャはパネル上端に接する（02 だけ 24px 下げる） */
  .step-list--2 .step-card__shot {
    flex-direction: column;
    align-items: center;
    gap: calc(45 * var(--scale-unit));
    margin-top: 0;
  }

  .step-list--2 .step-card:nth-child(2) .step-card__shot,
  .step-list--2 .step-card:nth-child(3) .step-card__shot {
    gap: calc(45 * var(--scale-unit));
    margin-top: calc(24 * var(--scale-unit) - 2px);
  }

  .step-list--2 .step-card__shot > img {
    width: calc(290 * var(--scale-unit));
    height: calc(562 * var(--scale-unit));
    object-fit: cover;
  }

  /* SP はキャプチャが縦積みなので三角も下向き（53×35）。
     すき間 45px は「上 5 + 三角 35 + 下 5」なので、キャプチャの 5px 下に置く */
  .step-card__shot-arrow {
    top: calc(567 * var(--scale-unit));
    left: calc(128 * var(--scale-unit) - 2px);
    width: calc(53 * var(--scale-unit));
    height: calc(35 * var(--scale-unit));
  }

  /* 03 の 2 本目は 562 + 45 + 562 + 5 の位置。PC 用の left は上のルールで打ち消し済み */
  .step-card__shot-arrow--b {
    top: calc(1174 * var(--scale-unit));
  }

  .movie {
    margin-top: calc(48 * var(--scale-unit));
  }

  .movie__title {
    width: calc(292 * var(--scale-unit));
  }

  .movie__panel {
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--scale-unit));
    height: auto;
    margin-top: calc(-24 * var(--scale-unit));
    padding-top: calc(48 * var(--scale-unit));
    padding-bottom: calc(24 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
    background: var(--color-white);
  }

  .movie__frame {
    width: calc(310 * var(--scale-unit));
    height: calc(175 * var(--scale-unit));
  }

  /* SP も Figma 実測（ご利用の流れ `1745:6741` の下端 9476 → `1745:6676` が y=9532） */
  .faq {
    width: var(--inner-width);
    margin-top: calc(56 * var(--scale-unit));
  }

  .faq__list {
    margin-top: calc(24 * var(--scale-unit));
  }

  .faq__item {
    border-radius: calc(10 * var(--scale-unit));
  }

  .faq__item + .faq__item {
    margin-top: calc(8 * var(--scale-unit));
  }

  /* 質問の行数に応じてカードを伸ばす。
     Q バッジは上端 16 に固定のまま、質問テキストは行に対して中央に置く。
     枠線 1.5px はブラウザが 1px にスナップするため、差し引くのは 1px / 2px。
     行送りは端数の累積を避けるため22pxに固定する */
  .faq__question {
    display: flex;
    align-items: center;
    min-height: calc(72 * var(--scale-unit) - 2px);

    padding: calc(16 * var(--scale-unit) - 1px) calc(60 * var(--scale-unit) - 1.5px)
      calc(16 * var(--scale-unit) - 1px) calc(68 * var(--scale-unit) - 1.5px);
    font-size: calc(18 * var(--scale-unit));
    line-height: calc(22 / 18);
  }

  .faq__mark {
    top: calc(16 * var(--scale-unit) - 1.5px);
    left: calc(20 * var(--scale-unit) - 1.5px);
    width: calc(40 * var(--scale-unit));
    height: calc(40 * var(--scale-unit));
    padding-top: calc(10 * var(--scale-unit));
    background-size: 100% 100%;
    font-size: calc(20 * var(--scale-unit));
  }

  .faq__icon {
    right: calc(20 * var(--scale-unit) - 1.5px);
    width: calc(24 * var(--scale-unit));
    height: calc(24 * var(--scale-unit));
    background-size: 100% 100%;
  }

  .faq__item.is-open .faq__icon {
    background-size: 100% calc(2 * var(--scale-unit));
  }

  .faq__item {
    --faq-dash: calc(3 * var(--scale-unit));
  }

  .faq__answer {
    margin-right: calc(20 * var(--scale-unit) - 1.5px);
    margin-left: calc(20 * var(--scale-unit) - 1.5px);
  }

  .faq__a-text {
    padding: calc(16 * var(--scale-unit)) 0;
    font-size: calc(16 * var(--scale-unit));
  }

  .faq__more {
    margin-top: calc(24 * var(--scale-unit));
  }

  .cta--footer {
    margin-top: calc(56 * var(--scale-unit));
  }

  .modal__scroll {

    -webkit-overflow-scrolling: touch;
  }

  .modal--account .modal__scroll {
    top: calc(68 * var(--scale-unit));
  }

  .modal__panel {
    width: var(--inner-width);
  }

  .modal__close {
    top: 0;
    right: 0;
    width: calc(40 * var(--scale-unit));
    height: calc(40 * var(--scale-unit));
  }

  .modal__close img {
    top: calc(-0.67 * var(--scale-unit));
    left: calc(-0.97 * var(--scale-unit));
    width: calc(40.97 * var(--scale-unit));
    height: calc(41.34 * var(--scale-unit));
  }

  .modal__close--account {
    top: calc(16 * var(--scale-unit));
    right: calc(20 * var(--scale-unit));
    width: calc(40 * var(--scale-unit));
    height: calc(40 * var(--scale-unit));
  }

  .modal__close-icon {
    width: calc(40 * var(--scale-unit));
    height: calc(40 * var(--scale-unit));
  }

  .modal__close-icon::before,
  .modal__close-icon::after {
    width: calc(18 * var(--scale-unit));
    height: calc(2 * var(--scale-unit));
  }

  .modal__panel--account {
    margin-top: calc(8 * var(--scale-unit));
    margin-bottom: calc(76 * var(--scale-unit));
    padding: calc(17 * var(--scale-unit)) calc(20 * var(--scale-unit))
      calc(40 * var(--scale-unit));
  }

  .modal__lead {
    margin-top: calc(16 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  /* 05: 見出しは 32px・帯 16px（共通の .section-title は 24px / 帯 15px のため上書きする）。
     テキスト 192 に対し帯 222 = 左右 15px */
  .modal__title {
    padding-inline: calc(15 * var(--scale-unit));
    font-size: calc(32 * var(--scale-unit));
    line-height: 1;
    --title-band-height: calc(16 * var(--scale-unit));
    --title-band-offset: calc(5 * var(--scale-unit));
  }

  .modal__lead {
    white-space: nowrap;
  }

  .modal-note {
    width: 100%;
    margin-top: calc(16 * var(--scale-unit));
    padding: calc(16 * var(--scale-unit)) calc(10 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
  }

  .modal-note__title {
    font-size: calc(18 * var(--scale-unit));
    text-align: center;
  }

  .modal-note__list {
    margin-top: calc(8 * var(--scale-unit));
    padding-top: 0;
    border-top: none;
    font-size: calc(16 * var(--scale-unit));
  }

  .modal-step-list {
    gap: calc(16 * var(--scale-unit));
    width: 100%;
    margin-top: calc(24 * var(--scale-unit));
  }

  .modal-step {
    padding-top: calc(31 * var(--scale-unit));
  }

  .modal-step__num {
    top: 0;
    width: calc(65 * var(--scale-unit));
    height: calc(65 * var(--scale-unit));
    padding-top: calc(17 * var(--scale-unit));
    translate: none;
    background-size: calc(65 * var(--scale-unit)) calc(65 * var(--scale-unit));
    font-size: calc(32 * var(--scale-unit));
  }

  .modal-step__num--pre {
    padding-top: calc(13 * var(--scale-unit));
    font-size: calc(18 * var(--scale-unit));
  }

  .modal-step__num--any {
    padding-top: calc(22 * var(--scale-unit));
    font-size: calc(22 * var(--scale-unit));
  }

  .modal-step__card,
  .modal-step--pre .modal-step__card,
  .modal-step--1 .modal-step__card,
  .modal-step--2 .modal-step__card,
  .modal-step--3 .modal-step__card,
  .modal-step--4 .modal-step__card {
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-left: 0;
    padding: calc(50 * var(--scale-unit) - 2px) calc(10 * var(--scale-unit) - 2px)
      calc(24 * var(--scale-unit) - 2px);
    border-radius: calc(20 * var(--scale-unit)) calc(10 * var(--scale-unit))
      calc(10 * var(--scale-unit)) calc(20 * var(--scale-unit));
  }

  .modal-step__text {
    width: 100%;
  }

  .modal-step__heading {
    font-size: calc(20 * var(--scale-unit));
  }

  .modal-step__desc {
    margin-top: calc(8 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .modal-step__desc + .modal-step__desc {
    margin-top: calc(var(--scale-unit) * 22.4);
  }

  .modal-step__desc-note {
    font-size: calc(14 * var(--scale-unit));
  }

  .modal-step__shot {
    width: calc(260 * var(--scale-unit));
    height: calc(500 * var(--scale-unit));
    margin-top: calc(24 * var(--scale-unit));
  }

  .modal-step__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .modal-step--1 .modal-step__shot img { object-position: 50% 19%; }
  .modal-step--3 .modal-step__shot img { object-position: 50% 23%; }
  .modal-step--4 .modal-step__shot img { object-position: 50% 10%; }

  .modal-step__qr {
    display: none;
  }

  /* NO.33 で「アプリのダウンロード」がボタンになり、その下に NO.32 の注釈が入った。
     カード下端の余白は Figma 実測（34.6）の前提（本文 8 行＋テキストリンクで終わる構成）が
     崩れたため、上の一括指定（24）に戻して他の 4 枚と揃える。
     注釈は本文の下＝ .modal-step__text の中にあるが、SP ではボタンより下に出す。
     text の箱を display: contents で外して見出し・本文・注釈をカード直下の flex 項目にし、
     注釈だけ order で最後へ送る（カードは align-items: center なので幅は個別に 100% を与える）。

     NO.86 で～10/13 版のボタンを削除したため、main では並べ替えの対象が無く
     この 3 本は見た目に効かない（注釈はもともと最後）。10/14 版でボタンが戻ると効き始めるので、
     .modal-step__applink の CSS と一緒に残してある */
  .modal-step--pre .modal-step__text {
    display: contents;
  }

  .modal-step--pre .modal-step__heading,
  .modal-step--pre .modal-step__desc,
  .modal-step__note {
    width: 100%;
  }

  .modal-step__note {
    order: 1;
    margin-top: calc(8 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  /* 本文の下端からボタン上端までは Figma のリンク上端と同じ 24.8 を保つ。
     main では参照 0 件（上記のとおり 10/14 版のための温存）*/
  .modal-step__applink {
    display: block;
    width: 100%;
    margin-top: calc(var(--scale-unit) * 24.8);
  }

  /* パネル 350 -（左右マージン 20）= カード外形 310 -（カード padding 左右 10）= 内幅 290 に収める。
     .btn--primary の SP 既定は 350×56 / 18px Bold なので、幅だけカード内幅へ絞る */
  .modal-step__applink .btn {
    width: 100%;
  }

  .mv--campaign {
    height: auto;
    margin-top: 0;
  }

  .mv__image {
    width: 100%;
    height: calc(377 * var(--scale-unit));
  }

  .campaign {
    margin-top: calc(5 * var(--scale-unit));
  }

  .campaign-benefit {
    height: calc(869 * var(--scale-unit));
  }

  /* PC はカード下端の外（top: 360px）だが、SP はカード群の上に重なる */
  .campaign-benefit__illust {
    top: 0;
    left: calc(220 * var(--scale-unit));
    width: calc(123.7568 * var(--scale-unit));
    height: calc(112.797 * var(--scale-unit));
  }

  /* PC は幅を modifier 側に持つので、同じ詳細度（0,2,0）で打ち消す */
  .benefit-card--5000,
  .benefit-card--6000 {
    width: 100%;
  }

  .benefit-card--5000 {
    top: calc(82 * var(--scale-unit));
    left: 0;
    height: calc(353 * var(--scale-unit));
  }

  .benefit-card--6000 {
    top: calc(481 * var(--scale-unit));
    left: 0;
    height: calc(388 * var(--scale-unit));
  }

  .benefit-card__badge {
    top: calc(-16 * var(--scale-unit));
    height: calc(29 * var(--scale-unit));
    border-radius: calc(20 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .benefit-card__badge-tail {
    top: calc(7 * var(--scale-unit));
    width: calc(16.4545 * var(--scale-unit));
    height: calc(11.25 * var(--scale-unit));
  }

  .benefit-card--5000 .benefit-card__badge {
    left: calc(18 * var(--scale-unit));
    width: calc(220 * var(--scale-unit));
  }

  .benefit-card--5000 .benefit-card__badge-tail {
    left: calc(120.2726 * var(--scale-unit));
  }

  .benefit-card--6000 .benefit-card__badge {
    left: calc(18 * var(--scale-unit));
    width: calc(220 * var(--scale-unit));
  }

  .benefit-card--6000 .benefit-card__badge-tail {
    left: calc(119.2726 * var(--scale-unit));
  }

  .benefit-card__cond {
    top: calc(29.2 * var(--scale-unit));
    right: auto;
    left: calc(19 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
    line-height: 1.5;
    text-align: left;
  }

  .benefit-card__mark {
    background-size: 100% calc(7 * var(--scale-unit));
    font-size: calc(24 * var(--scale-unit));
  }

  .benefit-card__amount {
    right: auto;
  }

  .benefit-card--6000 .benefit-card__amount {
    top: calc(113 * var(--scale-unit));
    left: calc(18 * var(--scale-unit));
    width: calc(315 * var(--scale-unit));
    height: calc(60 * var(--scale-unit));
  }

  .benefit-card__max {
    top: calc(15 * var(--scale-unit));
    width: calc(20 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
  }

  .benefit-card__price {
    font-size: calc(62 * var(--scale-unit));
  }

  .benefit-card__price-a     { letter-spacing: calc(-8.06 * var(--scale-unit)); }
  .benefit-card__price-comma { font-size: calc(50 * var(--scale-unit)); letter-spacing: calc(-9 * var(--scale-unit)); }
  .benefit-card__price-b     { letter-spacing: calc(-3.72 * var(--scale-unit)); }

  .benefit-card__price-marker {
    top: calc(10 * var(--scale-unit));
    width: calc(170 * var(--scale-unit));
    height: calc(46 * var(--scale-unit));
  }

  .benefit-card__suffix {
    font-size: calc(24 * var(--scale-unit));
  }

  .benefit-card--6000 .benefit-card__price {
    left: calc(23 * var(--scale-unit));
    width: calc(155 * var(--scale-unit));
    font-size: calc(60 * var(--scale-unit));
  }

  .benefit-card--6000 .benefit-card__price-a { letter-spacing: calc(-7.8 * var(--scale-unit)); }
  .benefit-card--6000 .benefit-card__price-comma { font-size: calc(47 * var(--scale-unit)); letter-spacing: calc(-8.46 * var(--scale-unit)); }
  .benefit-card--6000 .benefit-card__price-b { letter-spacing: calc(-4.8 * var(--scale-unit)); }

  .benefit-card--6000 .benefit-card__price-marker {
    top: calc(8 * var(--scale-unit));
    left: calc(3 * var(--scale-unit));
    width: calc(151 * var(--scale-unit));
  }

  .benefit-card--6000 .benefit-card__suffix {
    top: calc(7 * var(--scale-unit));
    left: calc(178 * var(--scale-unit));
    width: calc(137 * var(--scale-unit));
    letter-spacing: calc(-1.2 * var(--scale-unit));
  }

  .benefit-card__suffix-tight {
    letter-spacing: calc(-2.64 * var(--scale-unit));
  }

  .benefit-card__breakdown {
    top: calc(30 * var(--scale-unit));
    left: calc(18 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
    line-height: 1.25;
    text-align: left;
    white-space: normal;
  }

  .benefit-card__breakdown-price {
    font-size: calc(21 * var(--scale-unit));
    font-weight: 900;
  }

  /* SP の「円」は Figma が本文色・同サイズ（PC はオレンジで 16px / 14.5px の 2 種）。
     PC の --sm も同じ詳細度（0,1,0）なので、後勝ちでここに揃う */
  .benefit-card__breakdown-yen {
    color: var(--color-text);
    font-size: calc(16 * var(--scale-unit));
    letter-spacing: normal;
  }

  .benefit-card__note {
    top: calc(186 * var(--scale-unit));
    left: calc(19 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
    white-space: normal;
  }

  .benefit-card__note-mark {
    background-size: 100% calc(7 * var(--scale-unit));
  }

  .benefit-card--5000 .benefit-card__cond {
    top: calc(27 * var(--scale-unit));
    left: calc(17 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    white-space: normal;
  }

  .benefit-card--5000 .benefit-card__amount {
    top: calc(104 * var(--scale-unit));
    left: calc(21 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    height: calc(62 * var(--scale-unit));
  }

  .benefit-card--5000 .benefit-card__price {
    width: calc(172 * var(--scale-unit));
  }

  /* PC の 9px（詳細度 0,2,0）を同じ詳細度で Figma の SP 値へ戻す */
  .benefit-card--5000 .benefit-card__price-marker {
    left: calc(2 * var(--scale-unit));
  }

  .benefit-card--5000 .benefit-card__suffix {
    top: calc(8 * var(--scale-unit));
    left: calc(163 * var(--scale-unit));
    width: calc(147 * var(--scale-unit));
    letter-spacing: calc(0.48 * var(--scale-unit));
  }

  .benefit-card__method {
    top: calc(178 * var(--scale-unit));
    left: calc(17 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
    line-height: 1.2;
    white-space: normal;
  }

  .benefit-card__term {
    width: calc(309 * var(--scale-unit));
    height: calc(29 * var(--scale-unit));
    border-radius: calc(20 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
    line-height: 1.6;
  }

  .benefit-card__term-date {
    font-size: calc(24 * var(--scale-unit));
    line-height: 1.3;
  }

  .benefit-card--5000 .benefit-card__term      { top: calc(228 * var(--scale-unit)); }
  .benefit-card--5000 .benefit-card__term-date { top: calc(265 * var(--scale-unit)); }
  .benefit-card--6000 .benefit-card__term      { top: calc(263 * var(--scale-unit)); }
  .benefit-card--6000 .benefit-card__term-date { top: calc(300 * var(--scale-unit)); }

  .campaign-period {
    margin-top: calc(16 * var(--scale-unit));
  }

  .campaign-period__terms-note {
    height: calc(40 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
    line-height: 1.4;
    text-align: left;
  }

  .campaign-period__cta {
    margin-top: calc(32 * var(--scale-unit));
  }

  .campaign-period__note {
    height: calc(40 * var(--scale-unit));
    margin-top: calc(16 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
    text-align: left;
  }

  .terms-panel {
    margin-top: calc(56 * var(--scale-unit));
  }

  .terms-panel__head {
    font-size: calc(24 * var(--scale-unit));
  }

  .terms-panel__toggle {
    height: calc(80 * var(--scale-unit));
    padding: 0 calc(19 * var(--scale-unit)) 0 calc(18 * var(--scale-unit));
  }

  .terms-panel__icon {
    width: calc(30 * var(--scale-unit));
    height: calc(30 * var(--scale-unit));
  }

  .terms-panel__title-tight {
    letter-spacing: calc(-6.56 * var(--scale-unit));
  }

  .terms-panel__body {
    gap: calc(12 * var(--scale-unit));
    padding: calc(24 * var(--scale-unit)) calc(19 * var(--scale-unit)) calc(24 * var(--scale-unit)) calc(21 * var(--scale-unit));
  }

  .terms-panel--campaign .terms-panel__body {
    min-height: calc(1806 * var(--scale-unit));
  }

  .terms-block__title { font-size: calc(18 * var(--scale-unit)); }
  .terms-block__text  { font-size: calc(16 * var(--scale-unit)); }
  .terms-block__note  { font-size: calc(14 * var(--scale-unit)); }

  .terms-panel--campaign .terms-block__item,
  .terms-panel--notes .terms-block__item {
    padding-left: 1em;
    text-indent: -1em;
  }

  .terms-panel--notes .terms-block__subitem {
    padding-left: 1em;
  }

  /* 親の .terms-block__item が padding-left: 1em を持つぶん、説明文側は 1em で足りる
     （・の位置から数えて全角 2 文字ぶん＝ 2em になる） */
  .terms-panel--notes .terms-block__desc {
    padding-left: 1em;
  }

  /* 直前の .terms-block__item が同詳細度で text-indent: -1em を指定しているため、
     半角スペースぶん（0.28em）を足した値をここでも明記して打ち消す */
  .terms-panel--campaign .terms-block__item--nested {
    padding-left: 2.28em;
    text-indent: -1.28em;
  }

  .terms-block__head {
    font-size: calc(20 * var(--scale-unit));
  }

  /* SP のタブは見出しの行数で 60 / 88 / 116 と伸びる。
     Figma の高さは「16 + テキスト + 14 + 下線 2px」で、アイコンは高さに影響しないので
     絶対配置に切り替える（PC は左に置いた 32px が行の高さを決めるため flex のまま） */
  .terms-block__toggle {
    position: relative;
    display: block;
    padding: calc(16 * var(--scale-unit)) calc(52 * var(--scale-unit)) calc(14 * var(--scale-unit)) calc(20 * var(--scale-unit));
  }

  /* 下線 2px はパディングボックスの外側なので、中央を 1px 下げて枠線込みの中央に合わせる
     （Figma のアイコン上端 14 / 28 / 42 と一致する） */
  .terms-block__icon {
    position: absolute;
    top: calc(50% + 1px);
    right: calc(20 * var(--scale-unit));
    width: calc(32 * var(--scale-unit));
    height: calc(32 * var(--scale-unit));
    translate: 0 -50%;
  }

  .terms-block__body {
    padding: calc(16 * var(--scale-unit)) calc(20 * var(--scale-unit));
  }

  .terms-block__body .terms-block__text + .terms-block__text {
    margin-top: calc(8 * var(--scale-unit));
  }

  .terms-block__body .terms-block__note {
    margin-top: calc(8 * var(--scale-unit));
  }

  /* --- 5-14. campaign: キャンペーン FAQ・FAQ ページへの導線 --- */

  .faq--campaign {
    margin-top: calc(56 * var(--scale-unit));
  }

  .faq__groups {
    margin-top: calc(32 * var(--scale-unit));
  }

  .faq--campaign .faq-group + .faq-group {
    margin-top: calc(24 * var(--scale-unit));
  }

  /* カテゴリ見出しは 3 本とも 1 行。faq ページ（2 行あり）と違い高さ 56 で固定する */
  .faq--campaign .faq-group__title {
    min-height: calc(56 * var(--scale-unit));
    padding: 0 calc(20 * var(--scale-unit));
    line-height: 1;
  }

  .faq--campaign .faq__list {
    margin-top: calc(16 * var(--scale-unit));
  }

  /* PC 側の .faq--campaign .faq__question（詳細度 0,2,0）が SP まで効いてしまうため、
     同じ詳細度で SP の余白へ戻す。行送りは SP 既定と同じ 22px なので上書き不要 */
  .faq--campaign .faq__question {
    padding: calc(16 * var(--scale-unit) - 1px) calc(60 * var(--scale-unit) - 1.5px)
      calc(16 * var(--scale-unit) - 1px) calc(68 * var(--scale-unit) - 1.5px);
  }

  .faq-link {
    margin-top: calc(24 * var(--scale-unit));
  }

  /* SP は「ほくでんBANK全体の／よくある質問はこちら」の 2 行（350×48） */
  .faq-link__label {
    line-height: 1.15;
  }

  .faq + .about {
    margin-top: calc(56 * var(--scale-unit));
  }

  .point-page__title {
    margin-top: calc(40 * var(--scale-unit));
    line-height: 1.2;
  }

  .point-page__title .section-title__band {
    padding-inline: 0;
  }

  /* 1 行目の帯は padding で行ボックスを広げず、はみ出させて重ねる
     （見出し全体の高さを Figma の 86px に合わせるため） */
  .point-page__title .section-title__band:first-child {
    padding-bottom: 0;
  }

  .point-page__title .section-title__band:first-child::after {
    bottom: calc(-1 * var(--title-band-offset));
  }

  .anchor-nav {
    flex-direction: column;
    align-items: center;
    margin-top: calc(48 * var(--scale-unit));
  }

  .enemo {
    margin-top: calc(56 * var(--scale-unit));
  }

  /* パネル下端からはみ出すボタンを持たない（PC 側と同じ。SP の .condition が
     後勝ちで 24px を戻してしまうため、SP でも明示する） */
  .condition--detail {
    padding-bottom: 0;
  }

  .condition--detail .condition__panel {
    width: calc(350 * var(--scale-unit));
    height: auto;
    margin-inline: auto;
    margin-top: calc(-24 * var(--scale-unit));
    padding-bottom: calc(24 * var(--scale-unit));
  }

  .condition--detail .condition__inner {
    padding-top: 0;
  }

  /* PC と同じく注釈ぶん（注釈 58.8 ＋ リード文との間隔 8.8 = 67.6px）を詰める。
     SP は中身が全て上端基準の絶対配置なので、行の高さだけ変えればよい */
  .condition--detail .condition-req {
    height: calc(280 * var(--scale-unit));
  }

  .condition--detail .condition-req__row {
    top: calc(65 * var(--scale-unit));
    height: calc(215 * var(--scale-unit));
  }

  .condition--detail .condition-req__label {
    top: calc(40 * var(--scale-unit) - 2px);
    left: calc(30 * var(--scale-unit) - 2px);
    width: auto;
    text-align: left;
    white-space: normal;
  }

  /* 1 行目「電気またはガス料金」は 20px のままだと右端 214px で縦罫線（200px）を
     14px 突き抜ける。「または」だけ 14px に落とすと右端 196px となり、
     縦罫線の手前に 4px 残る（ローカルフォント実測。15px だと 1px しか残らない）。
     PC と index / campaign は縦罫線と行が別なので SP・benefits 限定で当てる */
  .condition--detail .condition-req__or {
    font-size: calc(14 * var(--scale-unit));
  }

  .condition--detail .condition-req__row::before {
    top: calc(99 * var(--scale-unit) - 2px);
    left: calc(20 * var(--scale-unit) - 2px);
    width: calc(270 * var(--scale-unit));
    height: 1px;
  }

  .condition--detail .condition-req__row::after {
    top: calc(40 * var(--scale-unit) - 2px);
    left: calc(200 * var(--scale-unit) - 2px);
    width: 1px;
    height: calc(43 * var(--scale-unit));
  }

  .condition--detail .condition-req__desc {
    top: calc(115 * var(--scale-unit) - 2px);
    left: calc(20 * var(--scale-unit) - 2px);
    width: calc(275 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
  }

  .condition-req__marker {
    background-size: 100% calc(6 * var(--scale-unit));
  }

  .condition--detail .condition-req__rate {
    top: calc(30 * var(--scale-unit) - 2px);
    left: calc(224 * var(--scale-unit) - 2px);
  }

  .condition--detail .condition-list {
    gap: calc(8 * var(--scale-unit));
    /* index / campaign は 16 に詰まったが point は据え置き（→ TODO §12 で要再確認） */
    margin-top: calc(24 * var(--scale-unit));
    width: calc(310 * var(--scale-unit));
  }

  .condition--detail .condition-card {
    width: 100%;
    height: auto;
    border-color: var(--color-border-blue);
    padding: calc(24 * var(--scale-unit) - 1.5px) calc(20 * var(--scale-unit) - 1.5px);
  }

  /* カードの地色を交互に変えるのは SP だけ（PC は 5 枚とも白）。
     奇数枚目はベースの .condition-card が持つ白のままでよい */
  .condition--detail .condition-card:nth-child(even) {
    background-color: var(--color-bg-light-blue);
  }

  .condition--detail .condition-card__head {
    margin-left: calc(4 * var(--scale-unit));
  }

  .condition--detail .condition-card::before {
    height: calc(76 * var(--scale-unit));
  }

  .condition--detail .condition-card__rate {
    top: calc(30 * var(--scale-unit) - 1.5px);
    right: auto;
    left: calc(208 * var(--scale-unit) - 1.5px);
  }

  .condition--detail .condition-card__sign,
  .condition--detail .condition-card__unit {
    font-size: calc(28 * var(--scale-unit));
    font-weight: 800;
  }

  .condition--detail .condition-card__num {
    font-size: calc(56 * var(--scale-unit));
  }

  .condition-card__desc {
    margin-top: calc(16 * var(--scale-unit));
    padding-top: calc(16 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
    line-height: 1.3;
  }

  .condition--detail .condition__note {
    margin-top: calc(16 * var(--scale-unit));
  }

  /* ポイントが貯まる (462+2106=2568) → 注意事項 (2608) の 40px */
  .terms-panel--notes {
    margin-top: calc(40 * var(--scale-unit));
  }

  /* Figma: 「注意事項」の文字はパネル左端から 39px（campaign 版は 18px）。
     この 21px の差を見出し（h2）の padding で作ると、中の <button> が 21px 痩せて
     左端 21px がタップできない帯になり、iOS のタップハイライトも左端に届かない。
     ボタン自身の padding として持たせれば、文字位置はそのままで箱だけパネル幅いっぱいになる */
  .terms-panel--notes .terms-panel__toggle {
    padding-left: calc(39 * var(--scale-unit));
  }

  /* SP はタブが隣接するのでブロック間の余白は 0、本文の左右 20px はブロック側が持つ */
  .terms-panel--notes .terms-panel__body {
    gap: 0;
    padding: 0;
  }

  .terms-panel--notes + .cta {
    margin-top: calc(48 * var(--scale-unit));
  }

  /* CTA (1) (6416+248=6664) → 規約ボタン群 (6704) の 40px */
  .point-terms {
    margin-top: calc(40 * var(--scale-unit));
  }

  .point-terms__lead {
    width: var(--inner-width);
    font-size: calc(18 * var(--scale-unit));
  }

  .point-terms__btn {
    margin-top: calc(24 * var(--scale-unit));
  }

  .point-terms__note {
    width: var(--inner-width);
    margin-top: calc(24 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .exchange {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: calc(56 * var(--scale-unit));
  }

  .exchange__body {
    display: contents;
  }

  .exchange__title { order: 1; }
  .exchange__text  { order: 2; }
  .exchange__note  { order: 3; }
  .exchange__illust { order: 4; }
  .exchange__btn   { order: 5; }

  .exchange__text {
    width: var(--inner-width);
    margin-top: calc(24 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
  }

  .exchange__note {
    width: var(--inner-width);
    margin-top: calc(16 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .exchange__illust {
    width: calc(240 * var(--scale-unit));
    height: calc(240 * var(--scale-unit));
    margin-top: calc(16 * var(--scale-unit));
  }

  .exchange__btn {
    margin-top: calc(24 * var(--scale-unit));
  }

  .product {
    margin-top: calc(56 * var(--scale-unit));
  }

  .product__list {
    flex-direction: column;
    gap: calc(8 * var(--scale-unit));
    width: var(--inner-width);
    margin-top: calc(16 * var(--scale-unit));
  }

  .product-card {
    width: 100%;
    height: auto;
  }

  .product-card__title {
    height: calc(56 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
  }

  .product-card__body {
    padding: calc(24 * var(--scale-unit)) calc(20 * var(--scale-unit));
  }

  .product-item {
    --product-dash: calc(3 * var(--scale-unit));
  }

  .product-item + .product-item {
    margin-top: calc(40 * var(--scale-unit));
  }

  .product-item + .product-item::before {
    top: calc(-24 * var(--scale-unit));
    left: calc(25 * var(--scale-unit));
    width: calc(262 * var(--scale-unit));
  }

  .product-item__label {
    padding-left: calc(32 * var(--scale-unit));
    font-size: calc(18 * var(--scale-unit));
  }

  /* Figma SP `1067:164` / `1067:176` だけ字送りが -0.72px（-4%）。
     これが無いと 16 文字 × 18px = 288px がテキスト枠 278px を超え、
     「プ」だけ 2 行目へ落ちる（カード 1 枚目の高さも 371 → 422 になる）。
     他の 4 本は Figma でも字送り 0 なので一律には当てない */
  .product-item__label--tight {
    letter-spacing: calc(-0.72 * var(--scale-unit));
  }

  .product-item__check {
    top: calc(3 * var(--scale-unit));
    width: calc(20 * var(--scale-unit));
    height: calc(20 * var(--scale-unit));
  }

  .product-item__btn {
    margin-top: calc(16 * var(--scale-unit));
  }

  .product-card--single .product-card__body {
    padding: calc(24 * var(--scale-unit)) calc(20 * var(--scale-unit));
  }

  .product-card--single .product-item__label {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
  }

  /* static ではなく relative + top/left の解除で PC の絶対配置を戻す。
     static にすると基底規則の z-index: 2 が効かなくなり、
     .product-card::after の枠線がボタンを覆ってクリックを奪う */
  .product-card--single .product-item__btn {
    position: relative;
    top: auto;
    left: auto;
    margin-top: calc(16 * var(--scale-unit));
  }

  .fee {
    /* おトクな商品 (7681+1053=8734) → 手数料 (8790) の 56px */
    margin-top: calc(56 * var(--scale-unit));
  }

  .fee__title {
    line-height: 1;
  }

  .product__title,
  .fee__title {
    padding-inline: calc(15 * var(--scale-unit));
  }

  /* SP は縦積み。パネル 350×162 で padding は Figma の 24px から border 2px を引いた値 */
  .fee__panel {
    margin-top: calc(24 * var(--scale-unit));
    padding: calc(22 * var(--scale-unit)) 0;
  }

  .fee__main {
    display: block;
  }

  .fee__text {
    font-size: calc(18 * var(--scale-unit));
  }

  /* No.88: SP のパネルは左右 padding が 0 なので、追加した ATM の説明文だけ枠線から離す。
     パネル側に余白を付けると 1 文目の 2 行目（実測 315px）が収まらず折り返しが増えるため */
  .fee__text--atm {
    margin-top: calc(8 * var(--scale-unit));
    padding-inline: calc(20 * var(--scale-unit));
  }

  .fee__btn {
    margin-top: calc(16 * var(--scale-unit));
  }

  /* No.95: SP のパネルも左右 padding が 0 なので、.fee__text--atm と同じく
     注釈側で枠線から離す。行頭のぶら下げ（1em）はその内側に足す */
  .fee__note {
    width: auto;
    margin: calc(24 * var(--scale-unit)) 0 0;
    padding-left: calc(var(--scale-unit) * 20 + 1em);
    padding-right: calc(20 * var(--scale-unit));
    font-size: calc(14 * var(--scale-unit));
  }

  .faq-page__title {
    margin-top: calc(40 * var(--scale-unit));
    padding-inline: calc(15 * var(--scale-unit));
    --title-band-offset: calc(5 * var(--scale-unit));
  }

  .faq-anchor {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: calc(18 * var(--scale-unit));
    width: var(--inner-width);
    margin-top: calc(40 * var(--scale-unit));
  }

  .faq-anchor__link {
    width: var(--inner-width);
    height: calc(48 * var(--scale-unit));
  }

  .faq-anchor__link--tall {
    height: calc(68 * var(--scale-unit));
  }

  /* SP は 8 ノードとも x=24px（07 だけ 25px）で左揃え。PC の中心合わせを打ち消す */
  .faq-anchor__number {
    left: calc(22 * var(--scale-unit));
    translate: 0 -50%;
  }

  .faq-anchor__label--mypage {
    line-height: 1.1;
  }

  .faq-anchor__label--points {
    letter-spacing: calc(-1.04 * var(--scale-unit));
  }

  .faq-anchor__link .btn__arrow {
    right: calc(11 * var(--scale-unit));
  }

  .faq--page {
    width: var(--inner-width);
    margin-top: calc(48 * var(--scale-unit));
  }

  .faq-group + .faq-group {
    margin-top: calc(40 * var(--scale-unit));
  }

  /* カテゴリ見出しは 1 行 52 / 2 行 80（上下 16 の余白）。
     Figma の 1 行ノードは行ボックスが 20px（= leading-none）で高さ 52 になるが、
     2 行ノードは 24px×2 なので、実装は上下 16 + line-height 1.2 に寄せた
     （1 行の見出しだけ Figma より 4px 高い） */
  .faq-group__title {
    height: auto;
    min-height: calc(52 * var(--scale-unit));
    padding: calc(16 * var(--scale-unit)) calc(20 * var(--scale-unit));
    border-radius: calc(10 * var(--scale-unit));
    font-size: calc(20 * var(--scale-unit));
    line-height: 1.2;
  }

  .faq--page .faq__list {
    margin-top: calc(16 * var(--scale-unit));
  }

  /* 端末のブラウザ UI で可視高が変わるため、100svh の上下中央揃えを維持する */

  .cushion {

    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(40 * var(--scale-unit));
  }

  /* SP はロゴ・見出し・リード・ボタンが左端 40 で揃う左揃えレイアウト（PC は中央揃え） */
  .cushion__title {
    width: calc(310 * var(--scale-unit));
    font-size: calc(24 * var(--scale-unit));
    text-align: left;
  }

  .cushion__title-row {
    justify-content: flex-start;
    gap: calc(3 * var(--scale-unit));
  }

  .cushion__logo {
    width: calc(281 * var(--scale-unit));
    height: calc(38 * var(--scale-unit));
  }

  /* 「の」の下端はロゴ下端の 2px 下 */
  .cushion__title-sub {
    margin-bottom: calc(-2 * var(--scale-unit));
  }

  /* 2 行目は「サイトを離れ、」から始まり、幅 310 の自動折り返しで 2 行になる */
  .cushion__title-main {
    margin-top: calc(8 * var(--scale-unit));
    line-height: 1.35;
  }

  /* リードは左揃えで3行に折り返す */
  .cushion__lead {
    width: calc(310 * var(--scale-unit));
    margin-top: calc(32 * var(--scale-unit));
    font-size: calc(16 * var(--scale-unit));
    text-align: left;
  }

  .cushion__btns {
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--scale-unit));
    margin-top: calc(40 * var(--scale-unit));
  }

  /* このページのボタンだけ 310 幅。
     共通の .btn--w580 は他ページの 580 ボタンに効くため触らない */
  .cushion__btns .btn {
    width: calc(310 * var(--scale-unit));
  }

  .cushion__btns .btn .btn__arrow {
    right: calc(9.74 * var(--scale-unit));
    width: calc(30.116 * var(--scale-unit));
    height: calc(30.116 * var(--scale-unit));
  }

  .cushion__illust {
    position: static;
    align-self: flex-end;
    width: calc(143 * var(--scale-unit));
    height: calc(155 * var(--scale-unit));
    margin-top: calc(24 * var(--scale-unit));
    margin-right: calc(20 * var(--scale-unit));
  }
}
/* =========================================================
   口座開設ボタンの一括非表示スイッチ

   ▼ 現在の状態: 有効（＝口座開設ボタンは全 16 箇所とも非表示 / 2026-09-04 の NO.40）

   支給リンクリスト（`gid=1443928388`）の「口座開設ボタン ... 2026年10月14日以降表示」に
   対応するための切り替え。遷移先の URL は 16 箇所すべての `data-account-cta` に入っているので、
   HTML を触らずにこのブロックだけで表示・非表示を切り替えられる。

   ■ 隠す   : 下のブロックを囲むコメント記号の 2 行を削除する ← いまはこの状態
   ■ 表示   : そのコメント記号の 2 行で下のブロックを囲み直す（元に戻すのはこの 1 手だけ）
   ■ 10/14  : このコメントと下のブロックを丸ごと削除する

   ファイル末尾に置いてあるのは、SP ブロックの `.header__cta { display: flex }`
   （詳細度が同じ）に後勝ちで打ち勝つため。移動させないこと。

   10/14 の作業はもう 1 手ある。HTML 側で `data-until-1014` を付けた要素も削除すること
   （`grep -rn data-until-1014 .` で全部出る）。
   「10/13 まで表示して 10/14 に消す」テキストなので、このブロックの削除では消せない。
   いまは HTML 側 3 件（すべて同じ文言「※アプリストアからのアプリのダウンロードは10月14日以降に可能となります。」）:
   `faq/index.html` の Q6 の注釈 `.faq__a-note`（SWITCH-1014.md ③）と、
   `index.html` / `campaign_info/index.html` のモーダル 05 事前準備の `.modal-step__note`（同 ⑨ / Phase 95 で追加）。

   対象と、隠したあとに何が残るかは TODO.md の §A-1 を参照。

   各セレクタの担当:
   - `.cta`
     全幅の CTA セクション（9 箇所）。中身が口座開設ボタンだけなので帯ごと消す。
     `.cta--footer` も `.cta` を併せ持つのでこの 1 行で両方に効く
   - `.header__cta`
     SP メニュー内の CTA（4 ページ）。中身がボタンだけなのでラッパーごと消す
   - `.cta-btn`
     index の MV 直下の CTA。`.mv-cta__note`（※ポイント還元に係る各種条件はこちら）は残す
   - `.mv:not(.mv--campaign)` / `同 > picture` / `.mv__phone` / `.mv__phone-img` / `.mv-cta { margin-top }`
     （いずれも SP のみ）
     `.mv` はキャンペーン TOP の MV（`.mv--campaign` / 画像 1 枚）とクラスを共有している。
     このブロックはファイル末尾＝`.mv--campaign { height: auto }`（6 章）より後ろなので、
     素の `.mv` で書くと後勝ちでキャンペーン側の高さまで 333px に潰れる。`:not()` で外すこと
     ボタンを隠した SP の MV には専用のフレームが支給されている（Figma `3235:11669` / 390x333）。
     ボタンのある版（`3230:2633` / 390x386）との差分は、ボタンが消えたぶん下側を詰めた 3 点だけ:
       ① 背景が 390x386 → 390x301（波と街並みは Mask group で下端が切り落とされる）
       ② スマホ写真の枠が 158x164 → 158x146 になり、さらに外枠（Frame 111 / 194x143）が
          背景の下端 301 で切る。結果、写真はフレーム上端から 163～301 の 138px ぶんだけ見える
       ③ 注釈がフレームの中に入り、rel 313（= MV 下端 -20 / 背景の下端 +12）へ上がる
     ① は `.mv__bg` の高さを 301 に縮めると `preserveAspectRatio="none"` の SVG が縦に潰れるため、
     ラッパーの `<picture>` を絶対配置してクリップする（SVG は 386 のまま敷く）
     ② は影も外枠で切りたいので、`filter` を枠から `<img>` へ移す。枠に掛けたままだと
     切り落とした下端から影が背景の外へはみ出す（Figma は Frame 111 が影ごと切っている）
     ③ の引き上げ量は -49px → -33px（-33 + 注釈の上マージン 13 = MV 下端 -20）。
     もともとの -121px は「CTA が MV の背景に 105px 重なる」設計値で、
     ボタンではなくラッパーの `.mv-cta` に載っているため、ボタンを消すだけでは引き上げが残る。
     重要なお知らせとの間隔（注釈の下 48px）は支給フレームに写っていないので変更していない
     ＝ MV から下が丸ごと 37px 上がる。PC は `3235:11669` に含まれないので無変更
   - `.step__btns [data-account-cta]`
     STEP01 は「詳しい手順を見る」と 2 つ並ぶので、口座開設側だけ消す
   - `.header__panel { height: auto }`
     SP メニューの青パネルはナビ 5 項目に合わせた 437px 固定で、うち下 137px が CTA の領域。
     CTA を消すと青い余白だけが残るので、高さをリストに合わせて詰める。
     PC は `.header__panel { display: contents }` なので height は効かない（＝影響なし）
   - `.header__list li:last-child { border-bottom: none }`
     SP メニューの区切り線はナビ 5 項目すべての下端に引いてある。CTA を消すと最後の
     「お問い合わせ」の線だけが青パネルの下端に残り、下線のように見える（2026-09-14 のクライアント指摘）。
     パネルの下角丸 20px も、線が全幅にまっすぐ引かれることで打ち消される。
     10/14 は CTA が戻ってナビとの区切りとして機能するので、このブロックごと削除すれば元どおりになる。
     PC は border 自体が SP の media query の中にしか無いので影響なし
   - `#main { padding-bottom }`
     `.cta--footer` が消えると main の最下端がフッター青エリアの上端に 0px で接する。
     ボタンの影が青に落ちる（index / campaign_info）／白カードが青に貼り付く（benefits / faq）ため、
     `.cta--footer` が持っていた上マージンと同じ PC 72px / SP 56px を main の下に足して同じ空きを作る。
     帯があったときの上余白と同じく body の地色（--color-bg-light-blue）が出るので見え方も揃う。
     クッションページの `<main>` は id を持たないので当たらない（このページに `.cta--footer` は無い）
   ========================================================= */

.cta,
.header__cta,
.cta-btn,
.step__btns [data-account-cta] {
  display: none;
}

.header__panel {
  height: auto;
}

.header__list li:last-child {
  border-bottom: none;
}

#main {
  padding-bottom: 72px;
}

@media (max-width: 768px) {
  #main {
    padding-bottom: calc(56 * var(--scale-unit));
  }

  .mv:not(.mv--campaign) {
    height: calc(333 * var(--scale-unit));
  }

  .mv:not(.mv--campaign) > picture {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: calc(301 * var(--scale-unit));
  }

  .mv__phone {
    top: calc(158 * var(--scale-unit));
    left: calc(194 * var(--scale-unit));
    width: calc(194 * var(--scale-unit));
    height: calc(143 * var(--scale-unit));
    filter: none;
  }

  .mv__phone-img {
    top: calc(5 * var(--scale-unit));
    left: calc(12 * var(--scale-unit));
    filter: drop-shadow(1px 5px 5px rgba(12, 55, 87, 0.35));
  }

  .mv-cta {
    margin-top: calc(-33 * var(--scale-unit));
  }
}