@charset "UTF-8";
/* =========================================================================
   あんしんプラス - style.css
   設計書 5.2 デザイントークン / 7.5 レスポンシブ方針 に準拠
   - 色・角丸・余白・影の直値は :root にのみ記述する（コンポーネント層では var() 参照のみ）
   - モバイルファースト。min-width のメディアクエリで拡張する
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. デザイントークン（唯一の直値定義箇所）
   ------------------------------------------------------------------------- */
:root {
  /* --- カラー（5.2） --- */
  --color-primary: #12386B;
  --color-secondary: #3B7DD8;
  --color-surface: #EEF4FC;
  --color-accent: #C7325A;
  --color-text: #1C2733;
  --color-muted: #5B6B7C;
  --color-border: #D9E2EC;
  --color-bg: #FFFFFF;
  --color-danger: #C0392B;

  /* --- カラー派生（hover / 反転文字色など。ここ以外に直値を置かないための補助トークン） --- */
  --color-primary-strong: #0C2A52;
  --color-primary-soft: #E3ECF8;
  /* --color-secondary(#3B7DD8) は白地で 4.11:1 のため「文字」には使わない。
     テキストリンク・小さな見出しには下記のコントラスト確保用トークンを使う（白地 6.43:1）。 */
  --color-link: #2A5EA8;
  --color-link-strong: #1F4E91;
  /* CTA 専用のローズ（色相 344°）。参照サイトのオレンジ系アクセント（色相 17°）から
     色相を 33° 離してある。白文字で 5.21:1、ホバーは暗側へ振って 6.58:1 を確保する。
     ※ 受け入れ条件 F の grep を汚さないため、参照サイトの色値はコメントにも書かない。 */
  --color-accent-hover: #AC2A4D;
  --color-accent-border: #A8264A;
  /* --color-accent-soft は「面」専用。この上に載せる文字は --color-text を使う。 */
  --color-accent-soft: #FBF2F5;
  --color-on-primary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-danger-soft: #FBEAE7;
  --color-timeline-line: #C3D6EE;

  /* --- タイポグラフィ（5.2） --- */
  --font-ja: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
  --font-en: 'Outfit', 'Zen Kaku Gothic New', system-ui, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  --lh-body: 1.8;
  --lh-heading: 1.4;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* --- 形状（5.2） --- */
  --radius-card: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --border-hair: 1px;
  --border-thick: 2px;

  --shadow-sm: 0 2px 8px rgba(18, 56, 107, .06);
  --shadow-md: 0 8px 24px rgba(18, 56, 107, .10);
  --shadow-focus: 0 0 0 3px rgba(59, 125, 216, .35);

  /* --- 余白スケール（8px 基準） --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- レイアウト --- */
  --container: 1120px;
  --container-narrow: 760px;
  --tap-min: 44px;
  --header-h: 56px;

  /* --- セクション縦余白（SP 既定 = 64px） --- */
  --section-y: var(--space-8);

  /* --- モーション --- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .2s;
}

@media (min-width: 1024px) {
  :root {
    --section-y: var(--space-9); /* PC = 96px */
    --header-h: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
}

/* -------------------------------------------------------------------------
   2. リセット / ベース
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-ja);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
}

/* -------------------------------------------------------------------------
   2-1. 日本語組版（行末処理・禁則）

   方針:
   - `word-break: auto-phrase` で**文節単位**の改行にする。
     「こわしても、ぬらして／も。」のような文節途中での分断を防ぐ。
   - 未対応ブラウザ（Safari / Firefox）ではこの宣言だけが破棄され、
     `word-break: normal`（= UA 既定の JIS 準拠の行分割）に**そのまま**フォールバックする。
     崩れるのではなく「文節単位の最適化が効かないだけ」なので、致命的な破綻は起きない。
   - `line-break: strict` で行頭禁則を厳格化する。
     小書き仮名（っ ゃ ゅ ょ）・長音符（ー）・句読点・閉じ括弧が行頭に来るのを防ぐ。
   - `overflow-wrap` は `anywhere` を使わない。
     `anywhere` は最小コンテンツ幅を 0 として扱うため、flex/grid の中で
     「お申／し込み」のように**単語の途中で強制分割**される原因になる。
     長い URL 等の救済は `break-word` で足りる（他に分割点が無いときだけ効く）。
   ------------------------------------------------------------------------- */
body {
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}

/* grid トラックの自動最小サイズ対策。
   `auto` / `1fr`（= minmax(auto, 1fr)）のトラックは最小が min-content になる。
   文節単位の改行では min-content が「文節1つ分」まで広がるため、
   例：「（例：1000001）」のような分割不可の連なりがトラックごと親をはみ出させる。
   下限を 0 に固定して、必ず親幅の内側に収める。
   `:where()` で詳細度 0 にしてあるので、各コンポーネントの
   多カラム指定（.grid--3 等）は従来どおり優先される。 */
:where(
  .hero__points, .check-list, .note-list, .price-card, .price-card__links,
  .legal-links, .site-footer__grid, .doc-body ul, .doc-body ol,
  .form, .field, .form-actions, .confirm-list, .consent-list, .method-list,
  .method__external, .method-empty, .receipt, .apply-footer__inner,
  .status-page__inner
) {
  grid-template-columns: minmax(0, 1fr);
}

/* ※ 明示的な grid-template-columns を持つコンポーネント
   （.check-list > li / .consent-item / .confirm-list__row / .hero__inner 等）は、
   それぞれの定義箇所で `1fr` を `minmax(0, 1fr)` に直してある。 */

/* 見出し: 文節改行 + 行数バランス（短い行が1行だけ残る「泣き別れ」を防ぐ） */
.hero__title,
.section__title,
.card__title,
.timeline__title,
.spec-card__label,
.device-card__name,
.price-card__label,
.method__label,
.method-empty__title,
.doc-header__title,
.status-page__title,
.apply-title,
.site-footer__title,
.hero__point-title,
.form-errors__title,
.subhead,
.howto__title,
.doc-body h2,
.doc-body h3 {
  text-wrap: balance;
}

/* 中央寄せのリード文は行長をそろえる（左右のラグが目立つ配置のため） */
.section__lead,
.price-card__note,
.status-page__desc {
  text-wrap: balance;
}

/* 左揃えの本文系: 最終行が1〜2文字だけ残る「取り残し」を防ぐ */
.hero__subtitle,
.apply-lead,
.doc-header__meta,
.hero__note,
.hero__point-desc,
.sticky-cta__text,
.card__desc,
.spec-card__note,
.feature__lead,
.pillar__role,
.timeline__desc,
.howto__desc,
.method__desc,
.check-list > li,
.note-list > li,
.doc-body p,
.doc-body li {
  text-wrap: pretty;
}

/* 数字・英字が主体の要素は文節解析の対象外にして、意図しない分割を避ける */
.section__eyebrow,
.timeline__step,
.brand__sub,
.site-footer__copy,
.status-page__code,
.spec-card__value,
.price-card__amount {
  word-break: normal;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

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

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

a {
  color: var(--color-link);
  text-underline-offset: .2em;
}
a:hover { color: var(--color-link-strong); }

/* フォーカスリングは絶対に消さない（設計書 7.5 / アクセシビリティ） */
:focus-visible {
  outline: var(--border-thick) solid var(--color-secondary);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

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

table { border-collapse: collapse; width: 100%; }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: calc(var(--space-1) * -1);
  padding: var(--space-0);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-9) * -1);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus {
  top: var(--space-4);
  color: var(--color-on-primary);
}

/* -------------------------------------------------------------------------
   3. レイアウト部品
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow { max-width: var(--container-narrow); }

@media (min-width: 768px) {
  .container { padding-inline: var(--space-5); }
}

.section {
  padding-block: var(--section-y);
}

.section--surface { background-color: var(--color-surface); }
.section--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.section__head {
  margin-bottom: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .section__head { margin-bottom: var(--space-7); }
}

.section__eyebrow {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-link);
  margin-bottom: var(--space-2);
}

.section__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: .02em;
}

@media (min-width: 768px) {
  .section__title { font-size: clamp(var(--fs-2xl), 3.2vw, var(--fs-3xl)); }
}

.section--primary .section__title,
.section--primary .section__eyebrow { color: var(--color-on-primary); }

.section__lead {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-base);
}

.section--primary .section__lead { color: var(--color-on-primary); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* -------------------------------------------------------------------------
   4. ボタン（ピル形で統一）
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  border: var(--border-thick) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-ja);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* ボタンラベルは短い定型句。文中で割らず1行に保つ（「申請フォームを開／く」の防止）。
     はみ出し対策として max-width を併せて指定し、狭幅では padding 側を詰める（下の 360px 未満の指定）。 */
  white-space: nowrap;
  max-width: 100%;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* 塗りつぶしボタンのフォーカスリング。
   リングの内側が濃い面（例: CTA のローズ）に直接触れると、その境目のコントラストが
   3:1 を割ってしまう。ボタン面とリングの間に地色のハローを1枚挟むことで、
   リングの内側・外側の**どちらの隣接色に対しても 3:1 以上**を確保する。
   内側: 地色 vs CTA面 5.21:1 / 外側: リング vs 地色 4.11:1（白地）・3.71:1（surface地）。 */
.btn:focus-visible {
  outline-offset: var(--border-thick);
  box-shadow: 0 0 0 var(--border-thick) var(--color-bg), var(--shadow-md);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

.btn--accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent-border);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-md);
}
.btn--accent:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--primary:hover {
  background-color: var(--color-primary-strong);
  color: var(--color-on-primary);
}

.btn--outline {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--outline:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-link);
  border-color: transparent;
  padding-inline: var(--space-3);
}

.btn--lg {
  font-size: var(--fs-lg);
  padding: var(--space-4) var(--space-7);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn__note {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  /* 補足はラベルと違い複数行になりうるので nowrap を解除する */
  white-space: normal;
}

/* 極小幅（〜359px）では左右パディングを1段階詰めて、ラベルを折らずに収める */
@media (max-width: 359px) {
  .btn { padding-inline: var(--space-4); }
  .btn--lg { padding-inline: var(--space-5); }

  /* 320px 帯のヘッダー2行化の解消。
     実測: ブランド 187px ＋ gap 16px ＋ メニューボタン 98px = 301px が
     コンテナ内寸 288px を超え、flex-wrap でヘッダーが 119px（2行）になっていた。
     ボタンのラベルを *視覚的にのみ* 隠してアイコンだけにし、1行に収める。
     display:none にしないのは、ボタンのアクセシブルな名前（「メニュー」）を
     残してスクリーンリーダーから従来どおり読めるようにするため。
     宣言は .u-visually-hidden と同一。タップ領域は min-width/min-height の
     var(--tap-min) が効くので 44px を下回らない。 */
  .nav-toggle {
    gap: var(--space-0);
    padding-inline: var(--space-2);
  }
  .nav-toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: calc(var(--space-1) * -1);
    padding: var(--space-0);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* -------------------------------------------------------------------------
   5. アイコン
   ------------------------------------------------------------------------- */
.icon {
  width: var(--space-5);
  height: var(--space-5);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--border-thick);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--lg { width: var(--space-7); height: var(--space-7); }
.icon--sm { width: var(--space-4); height: var(--space-4); }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.icon-sprite { display: none; }

/* -------------------------------------------------------------------------
   6. ヘッダー / グローバルナビ
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-bg);
  border-bottom: var(--border-hair) solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 狭い画面で右側の要素（安心表示など）が入りきらないときは、
     横にはみ出させず次の行へ送る */
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-2);
}

/* 申込フローのヘッダーに置く安心表示（鍵アイコン + 通信の暗号化） */
.secure-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-heading);
  color: var(--color-muted);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-primary);
}

.brand__mark { color: var(--color-secondary); }

.brand__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  line-height: var(--lh-heading);
}

.brand__sub {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .14em;
  color: var(--color-muted);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  color: var(--color-primary);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.global-nav {
  display: none;
}

.global-nav[data-open="true"] {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: var(--color-bg);
  border-bottom: var(--border-hair) solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-4) var(--space-5);
}

.global-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.global-nav__link {
  display: block;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.global-nav__link:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.site-header__cta { display: none; }

/* デスクトップの横並びナビは 1200px 以上でだけ出す。
   ナビが5項目になり、1024〜1199px では項目名が2行に折り返して
   ヘッダーが 99px まで伸びていた（実測）。その帯はハンバーガーに任せる。
   ※ここは「ヘッダーのナビ」専用のブレークポイント。
     ヒーローの2カラム化や横タイムラインは別途 1024px のままで正しい。 */
@media (min-width: 1200px) {
  .nav-toggle { display: none; }

  .global-nav,
  .global-nav[data-open="true"] {
    display: block;
    position: static;
    box-shadow: none;
    border: 0;
    padding: var(--space-0);
    margin-left: auto;
  }

  .global-nav__list { flex-direction: row; gap: var(--space-1); }

  /* ナビが5項目になり、既定の左右余白（--space-3）ではブランド＋ナビ＋CTA が
     1120px のコンテナに収まらず、CTA が2行目へ折り返していた（実測 header 128px）。
     デスクトップでは左右余白だけ詰めて1行に収める。上下は tap ターゲットのため維持。 */
  .global-nav__link { padding-inline: var(--space-2); white-space: nowrap; }
  .global-nav { min-width: 0; }
  .site-header__inner { flex-wrap: nowrap; }

  .site-header__cta { display: inline-flex; flex: 0 0 auto; }
}

/* -------------------------------------------------------------------------
   7. ヒーロー（ファーストビュー・独自の組み方）
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  padding-block: var(--space-7) var(--section-y);
}

/* ファーストビューの空気感。
   参照サイトはぼかした室内写真を敷いているが、当LPでは写真を使わず CSS だけで奥行きを出す。
   理由: (1) 写真背景は参照サイトのヒーロー構図そのもので差別化が相殺される
         (2) 当LPはヒーローの文字量が多く、写真上ではコントラスト 4.5:1 の担保が崩れる
         (3) ヒーロー背景画像は LCP を直撃する。主動線が チラシ→QR→スマホ（モバイル回線）のため避ける
   color-mix 未対応ブラウザでは各宣言が破棄され、単色の --color-surface に戻るだけで崩れない。

   ★濃度の上限は実測で決めている。--color-muted は素の --color-surface 上で 4.94:1 しかなく
     頭上が狭い。ブロブが文字の下に回り込んでも 4.5:1 を割らない最大値が
     secondary=8% / primary=5%（実測 4.51 / 4.55）。ここを上げてはいけない。
     もっと濃い階調が欲しい場合は「文字が乗らない領域」＝ .hero__figure の中で行うこと。 */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
}
.hero::before {
  inset-block-start: -18%;
  inset-inline-end: -12%;
  inline-size: 60%;
  aspect-ratio: 1;
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
}
.hero::after {
  inset-block-end: -22%;
  inset-inline-start: -14%;
  inline-size: 46%;
  aspect-ratio: 1;
  background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
}

.hero__title {
  margin-top: var(--space-4);
  font-size: clamp(var(--fs-2xl), 8vw, var(--fs-3xl));
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: .01em;
}

.hero__title em {
  font-style: normal;
  color: var(--color-link);
}

.hero__subtitle {
  margin-top: var(--space-4);
  font-size: var(--fs-base);
  color: var(--color-muted);
}

.hero__points {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__point {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

/* 3点の情景イラスト。テキストが主・イラストが従になる比率に抑える */
.hero__point-illust {
  flex: 0 0 auto;
  width: 96px;
  color: var(--color-secondary);
}

/* 見出しと説明はインライン連結だと同じ行に流れて主従が読み取れないため、
   ブロックに分けて視覚階層をつくる */
.hero__point-title {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-heading);
}

.hero__point-desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-muted);
  line-height: var(--lh-heading);
}

.hero__actions {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
  justify-items: stretch;
}

.hero__note {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  text-align: center;
}

/* ヒーローのイラストはモバイルでは出さない（2026-08-22 依頼元指示）。
   1カラムではコピーと CTA の下に取り残され、縮小・右寄せでも収まりが悪かった。
   モバイルはコピーと CTA だけで完結させ、イラストは 2カラムになる 768px 以上でだけ見せる。
   ※ display:none にするが、画像は装飾（alt="" / aria-hidden）なので情報は失われない。
     ただし読み込みまで止めるため、モバイルでの無駄な転送も同時に無くなる。 */
.hero__figure {
  display: none;
}

@media (min-width: 768px) {
  .hero__figure {
    position: relative;
    display: grid;
    place-items: center;
    padding: var(--space-4) 0 0;
    color: var(--color-secondary);
  }
  .hero__figure .illust { max-width: 300px; }
}
/* 切り抜きイラストを白いカードに入れると「額縁」に見えて背景から浮くため、
   カード（背景色・影・角丸）をやめ、背後のやわらかいグロウで奥行きを出す。
   この領域には文字が乗らないので、ページ全体のブロブより濃くしてよい。 */
.hero__figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6%;
  border-radius: 50%;
  background-image: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-secondary) 30%, transparent),
    transparent
  );
  filter: blur(28px);
}

/* タブレット幅ではヒーローが1カラムになるため、イラストが主役になりすぎないよう上限を置く */


/* 情景イラスト共通。
   - 素材イラスト（Loose Drawing の PNG）は width/height 属性で比率を固定し、ここで可変幅にする
   - 機器モチーフの線画（インライン SVG）は線幅 2px でアイコンと統一 */
.illust {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (min-width: 768px) {
  .hero__points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__point { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  /* 縦積みになる幅では、イラストをカード幅いっぱいに使って情景を読み取りやすくする */
  .hero__point-illust { width: 100%; }
  .hero__actions { grid-auto-flow: column; justify-content: start; justify-items: start; }
  /* CTA が左揃えになる幅では、補足も左端に合わせる（中央寄せのままだと軸がずれる） */
  .hero__note { text-align: left; }
}

@media (min-width: 1024px) {
  .hero__figure {
    justify-items: center;
    place-items: center;
    padding: var(--space-5);
    margin-top: 0;
  }
  .hero__figure .illust { max-width: 420px; }

  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: var(--space-8);
  }
  .hero__points { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   8. カード / グリッド
   ------------------------------------------------------------------------- */
.card {
  background-color: var(--color-bg);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card--flat { box-shadow: none; }

.card--plain {
  background-color: var(--color-surface);
  border-color: transparent;
}

/* アイコンバッジ + 見出しテキスト。インライン流し込みのままだと、
   折り返した2行目がバッジの下（左端）に回り込んで字下げが崩れるため、
   flex にしてテキストを独立したボックスにする。 */
.card__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-4);
  /* 見出しはカード幅を絶対に超えさせない。
     本文は word-break: auto-phrase（文節改行）だが、見出しは
     「通信端末修理費用保険」のように文節で切れない複合名詞が多く、
     min-content が親幅を超えるとカードから溢れる。
     見出しに限り JIS の標準的な行分割（normal）に戻し、
     入り切らないときだけ折り返させる。幅に余裕があれば1行のままで見た目は変わらない。 */
  min-width: 0;
  word-break: normal;
}

/* 見出しの中のアイコンは 48px に落とす（単独で置くバッジは 64px のまま）。
   64px だとカード幅 341px でも「通信端末修理費用保険」が2行に折り返していた。
   16px 詰めることで1行に収まり、見出しの高さがカード間で揃う。 */
.card__title > .icon-badge {
  width: var(--space-7);
  height: var(--space-7);
}

.card__desc {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

@media (min-width: 1024px) {
  .card { padding: var(--space-6); }
}

/* 既定の1カラムでも `minmax(0, 1fr)` を明示する。
   暗黙の `auto` トラックは最小サイズが min-content になるため、
   文節単位の改行（word-break: auto-phrase）で min-content が広がると
   トラックごと横にはみ出す。0 を下限にして必ず親幅に収める。 */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .grid { gap: var(--space-5); }
  /* 768〜1023px は2列。3列にするとカード幅が約224pxとなり、
     アイコンバッジ(64px)＋左右パディング(32px×2)を引いた残りが約84pxしかなく、
     「通信端末修理費用保険」のような長い見出しがカードから溢れていた（実測 最大58px）。
     3列は 1024px 以上でだけ使う。 */
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 対象機器カード */
.device-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

.device-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-heading);
  /* 320px では2列×136px（内寸112px）まで縮み、「ワイヤレスイヤホン」(126px)が
     文節改行では切れずカードから溢れる（実測 左右 各7px）。
     機器名に限り JIS の標準的な行分割に戻して折り返させる。 */
  word-break: normal;
}

/* 補償スペックカード。
   縦積みだとアイコンバッジが1行を独占し、その右側が丸ごと空白になっていた。
   アイコンとラベルを同じ行に置き、金額と注記だけを全幅で下に流す。
   ラベル側の列は必ず minmax(0, 1fr)。auto にすると word-break: auto-phrase の
   min-content（文節ひとかたまり）が効いてカードごと横に溢れる。 */
.spec-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon  label"
    "value value"
    "note  note";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  height: 100%;
}

.spec-card > .icon-badge { grid-area: icon; }
.spec-card .spec-card__label { grid-area: label; }
.spec-card .spec-card__value { grid-area: value; }
.spec-card .spec-card__note { grid-area: note; }

.spec-card__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-link);
}

.spec-card__value {
  font-family: var(--font-en);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

.spec-card__value small {
  font-family: var(--font-ja);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.spec-card__note {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

/* 箇条書き（チェック） */
.check-list { display: grid; gap: var(--space-3); }

.check-list > li {
  display: grid;
  grid-template-columns: var(--space-5) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
}

.check-list__icon { color: var(--color-secondary); margin-top: var(--space-1); }

.note-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.note-list > li { padding-left: var(--space-5); text-indent: calc(var(--space-5) * -1); }

/* -------------------------------------------------------------------------
   9. 「保険金請求の流れ」タイムライン
      SP: 縦タイムライン / PC: 横タイムライン（設計書 5.3）
   ------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  /* .grid と同じ理由で下限を 0 にする（min-content によるはみ出し防止） */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding-left: var(--space-7);
}

.timeline::before {
  content: "";
  position: absolute;
  left: var(--space-5);
  top: var(--space-4);
  bottom: var(--space-4);
  width: var(--border-thick);
  background-color: var(--color-timeline-line);
  border-radius: var(--radius-pill);
}

.timeline__item {
  position: relative;
  background-color: var(--color-bg);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.timeline__marker {
  position: absolute;
  left: calc(var(--space-7) * -1);
  top: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* 各ステップの情景イラスト。情報はすべて見出しと本文にあり、イラストは補助に徹する */
.timeline__figure {
  display: block;
  width: 100%;
  max-width: 200px;
  /* PC ではカード幅とほぼ同じ。SP ではカードのほうが広いので中央に置いて余白を左右で分ける */
  margin-inline: auto;
  margin-bottom: var(--space-3);
  color: var(--color-secondary);
}

.timeline__step {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  color: var(--color-link);
}

.timeline__title {
  display: flex;
  /* 見出しが2行になったときにアイコンが上下中央へ落ちないよう、1行目に揃える */
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-heading);
}

.timeline__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.timeline__action { margin-top: var(--space-4); }

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    padding-left: var(--space-0);
    padding-top: var(--space-7);
  }

  .timeline::before {
    left: var(--space-6);
    right: var(--space-6);
    top: var(--space-5);
    bottom: auto;
    width: auto;
    height: var(--border-thick);
  }

  .timeline__marker {
    left: 50%;
    top: calc(var(--space-7) * -1);
    transform: translate(-50%, 0);
  }

  .timeline__item { padding-top: var(--space-6); }
  .timeline__title { display: block; }
}

/* -------------------------------------------------------------------------
   10. 料金セクション
   ------------------------------------------------------------------------- */
.price-card {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
}

.price-card__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-link);
}

.price-card__amount {
  font-family: var(--font-en);
  font-size: clamp(var(--fs-3xl), 12vw, calc(var(--fs-3xl) + var(--space-5)));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

.price-card__amount small {
  font-family: var(--font-ja);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.price-card__note { font-size: var(--fs-xs); color: var(--color-muted); }

.price-card__links {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

/* 単独で並ぶリンクはタップ領域を 44px 確保する（設計書 7.5） */
.price-card__links a,
.legal-links__inline a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

@media (min-width: 1024px) {
  .price-card { padding: var(--space-7); }
}

/* 法令ページへの導線（注意事項エリアの代替） */
.legal-links {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5);
  background-color: var(--color-bg);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  font-size: var(--fs-sm);
}

.legal-links__inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* -------------------------------------------------------------------------
   10-1. よくあるご質問（FAQ）
        details/summary で実装。JS を使わないためスクリプトが落ちても開閉できる。
   ------------------------------------------------------------------------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.faq > li { list-style: none; }

.faq__item {
  background-color: var(--color-bg);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.faq__item[open] {
  border-color: var(--color-timeline-line);
  box-shadow: var(--shadow-md);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: var(--tap-min);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
  /* 既定の三角マーカーを消し、自作のシェブロンに置き換える */
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__q-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.faq__q-text { flex: 1 1 auto; min-width: 0; }

.faq__chevron {
  flex: 0 0 auto;
  margin-top: var(--space-2);
  color: var(--color-link);
  transform: rotate(90deg);
  transition: transform var(--dur) var(--ease);
}

.faq__item[open] .faq__chevron { transform: rotate(-90deg); }

.faq__a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-0) var(--space-4) var(--space-4);
}

.faq__a-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-link);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.faq__a p {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.faq__a strong {
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .faq__q { padding: var(--space-5); }
  .faq__a { padding: var(--space-0) var(--space-5) var(--space-5); }
}

/* -------------------------------------------------------------------------
   10-2. お申し込みに必要なもの・所要時間
        「何が必要か分からない」という離脱要因を、申込ボタンの直前で解消する
   ------------------------------------------------------------------------- */
.ready {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background-color: var(--color-bg);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.ready__figure {
  width: 100%;
  max-width: 200px;
  margin-inline: auto;
  color: var(--color-secondary);
}

.ready__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

.ready__time {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-heading);
  color: var(--color-link);
}

.ready__time .icon { flex: 0 0 auto; margin-top: var(--space-1); }
/* flex コンテナ直下の inline 要素は個別のフレックスアイテムになり、
   その境目で行が折り返せなくなる。テキストは span でひとまとめにしてから配置する。 */
.ready__time > span { flex: 1 1 auto; min-width: 0; }
.ready__time strong { font-weight: var(--fw-bold); }

.ready__list { margin-top: var(--space-4); }

.ready__secure {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  font-size: var(--fs-xs);
  color: var(--color-text);
}

.ready__secure .icon { flex: 0 0 auto; margin-top: var(--space-1); color: var(--color-primary); }
.ready__secure strong { color: var(--color-primary); }

@media (min-width: 768px) {
  .ready {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .ready__figure { max-width: none; }
}

/* -------------------------------------------------------------------------
   10-2. 3本柱カード / 特典セクションの図版ブロック
   ------------------------------------------------------------------------- */

/* 「サービス」「加入者特典」の区分を示す小さなラベル。
   ※依頼元指示(2026-08-22)により表示上は「本体サービス」ではなく「サービス」とする。
   淡いネイビー面（--color-primary-soft）にネイビー文字で 12:1 以上を確保する。 */
.pillar__role {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/* セクションが3本柱のどれの話なのかを、見出しの前に言い切るラベル。
   #about の .pillar__role と同じ配色にそろえてある。
   従属セクション（#documents / #flow）では特典名まで書いて所属を明示する。 */
.section__role {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-3);
  text-align: left;
}

.section__role .icon { flex: 0 0 auto; }

/* 加入者特典1（通信端末修理費用保険）に従属する2セクション。
   直前の #device と地の色を変えずに続け、左のラインと字下げで
   「ここは端末保険の話であって、サービス全体の流れではない」と示す。 */
.section--sub { padding-block-start: var(--space-0); }

.benefit-sub {
  border-left: var(--border-thick) solid var(--color-timeline-line);
  padding-left: var(--space-5);
}

@media (min-width: 768px) {
  .benefit-sub { padding-left: var(--space-6); }
}

/* 各柱のセクション内に置く手順リスト。
   #flow の横タイムライン（端末保険専用）とは別物で、
   カード1枚ずつが縦に積み上がる従属リストとして見せる。 */
.howto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.howto__item {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  background-color: var(--color-bg);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  /* 320px でも本文の行長を確保するため、狭い画面では内側の余白を詰める */
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .howto__item {
    gap: var(--space-4);
    padding: var(--space-5);
  }
}

.howto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.howto__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

.howto__desc {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
}

.pillar .card__title { margin-top: var(--space-0); }

/* セクション内の小見出し（カードの外に置く見出し） */
.subhead {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

/* 特典セクションの「イラスト + 本文」ブロック。
   単一カラムの grid は min-content で横に溢れるため minmax(0, 1fr) を明示する */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
}

.feature__figure {
  width: 100%;
  max-width: 200px;
  margin-inline: auto;
  color: var(--color-secondary);
}

.feature__body > * + * { margin-top: var(--space-4); }

.feature__lead {
  font-size: var(--fs-base);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .feature {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-7);
  }
  .feature__figure { max-width: none; }

  /* 特典が2つ続くため、2つめは図版を反対側に置いてリズムをつくる。
     order だけを入れ替えると図版が 1fr 側のトラックに入って巨大化するため、
     トラック幅の並びも合わせて反転させる。 */
  .feature--reverse { grid-template-columns: minmax(0, 1fr) 240px; }
  .feature--reverse .feature__figure { order: 2; }
}

/* -------------------------------------------------------------------------
   11. 追従CTA（SP）
   ------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: var(--space-0);
  right: var(--space-0);
  bottom: var(--space-0);
  z-index: 45;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-bg);
  border-top: var(--border-hair) solid var(--color-border);
  box-shadow: var(--shadow-md);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}

.sticky-cta[data-visible="true"] { transform: translateY(0); }

.sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container);
  margin-inline: auto;
}

.sticky-cta__text {
  flex: 1 1 auto;
  /* min-width: auto のままだと文節単位の min-content がバーを押し広げるため 0 にする */
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  line-height: var(--lh-heading);
}

.sticky-cta .btn { flex: 0 0 auto; }

/* 追従CTA がある画面だけ、フッターが隠れないよう下部に余白を確保する */
body:has(.sticky-cta) { padding-bottom: var(--space-9); }

@media (min-width: 1024px) {
  .sticky-cta { display: none; }
  body:has(.sticky-cta) { padding-bottom: var(--space-0); }
}

/* -------------------------------------------------------------------------
   12. フッター
   ------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  padding-block: var(--space-7) var(--space-6);
}

.site-footer a {
  color: var(--color-on-primary);
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
}

.site-footer__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}

.site-footer__body { font-size: var(--fs-sm); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hair) solid var(--color-secondary);
  font-size: var(--fs-xs);
  display: grid;
  gap: var(--space-3);
}

.site-footer__copy { font-family: var(--font-en); letter-spacing: .04em; }

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   13. 法務・文書ページ
   ------------------------------------------------------------------------- */
.doc-header {
  background-color: var(--color-surface);
  padding-block: var(--space-7);
}

.doc-header__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.doc-header__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

/* パンくずのリンクも最低 24px の当たり判定を確保する（WCAG 2.5.8） */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-5);
}

.doc-body { padding-block: var(--section-y); }

.doc-body h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thick) solid var(--color-border);
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

.doc-body h2:first-child { margin-top: var(--space-0); }

.doc-body h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

.doc-body p + p { margin-top: var(--space-4); }

.doc-body ul,
.doc-body ol {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-left: var(--space-5);
}

.doc-body ul > li { list-style: disc; }
.doc-body ol > li { list-style: decimal; }

.doc-body .toc {
  padding: var(--space-5);
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-7);
}

.doc-body .toc ul { padding-left: var(--space-5); }

.doc-table {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.doc-table th,
.doc-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hair) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.doc-table tr:last-child th,
.doc-table tr:last-child td { border-bottom: 0; }

.doc-table--stack { display: block; }
.doc-table--stack thead { display: none; }
.doc-table--stack tbody,
.doc-table--stack tr,
.doc-table--stack th,
.doc-table--stack td { display: block; width: 100%; }
.doc-table--stack th { white-space: normal; }

@media (min-width: 768px) {
  .doc-table--stack { display: table; }
  .doc-table--stack tbody { display: table-row-group; }
  .doc-table--stack tr { display: table-row; }
  .doc-table--stack th { display: table-cell; width: 30%; white-space: nowrap; }
  .doc-table--stack td { display: table-cell; width: auto; }
}

/* 未確定プレースホルダ。公開前に必ず実値へ差し替える必要があるため、
   制作側には確実に気づける強さを持たせる（破線枠 + 濃い文字色）。
   一方で顧客向けの警告色（.field__error 等の --color-danger 実面）とは
   別物に見えるよう、面は淡色のままにして「編集中の付箋」の見え方に留める。 */
.tbd {
  display: inline-block;
  padding: var(--space-0) var(--space-2);
  border: var(--border-hair) dashed var(--color-danger);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-soft);
  color: var(--color-danger);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  /* 前後の括弧・句読点に破線枠（角丸）が食い込まないよう左右を離す */
  margin-inline: var(--space-2);
  /* 「【要確定】」が行末で割れないようにする */
  white-space: nowrap;
  /* 本文の行送り（1.8）を押し広げて行間を不揃いにしないよう、
     チップ自身の高さを行ボックスに収める */
  line-height: var(--lh-heading);
  vertical-align: baseline;
}

.callout {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-left: var(--space-1) solid var(--color-secondary);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* -------------------------------------------------------------------------
   14. 申込フロー（入力 / 同意 / 支払い方法選択）
   ------------------------------------------------------------------------- */
.apply-page { background-color: var(--color-surface); }

.apply-main {
  padding-block: var(--space-6) var(--section-y);
}

.apply-panel {
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

@media (min-width: 768px) {
  .apply-panel { padding: var(--space-7); }
}

.apply-title {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.apply-lead {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* ステップインジケータ */
.steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.steps__item {
  flex: 1 1 0;
  display: grid;
  gap: var(--space-1);
  justify-items: center;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  border: var(--border-hair) solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  text-align: center;
  line-height: var(--lh-heading);
}

.steps__item[aria-current="step"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--fw-bold);
}

.steps__num {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* フォーム */
.form { display: grid; gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); }

.field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.field__badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.field__badge--required {
  background-color: var(--color-accent-soft);
  color: var(--color-danger);
}

.field__badge--optional {
  background-color: var(--color-surface);
  color: var(--color-muted);
}

.field__hint { font-size: var(--fs-xs); color: var(--color-muted); }

.field__control {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field__control:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-focus);
}

.field__control[aria-invalid="true"] { border-color: var(--color-danger); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-danger);
}

.form-errors {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background-color: var(--color-danger-soft);
  border: var(--border-hair) solid var(--color-danger);
  color: var(--color-danger);
  font-size: var(--fs-sm);
}

.form-errors__title { font-weight: var(--fw-bold); }

.form-errors ul {
  margin-top: var(--space-2);
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-5);
}

.form-errors li { list-style: disc; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .form-actions { grid-auto-flow: column; justify-content: center; }
  .form-actions .btn { min-width: calc(var(--container-narrow) / 3); }
}

/* 確認テーブル（同意画面） */
.confirm-list {
  display: grid;
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.confirm-list__row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-bottom: var(--border-hair) solid var(--color-border);
}

.confirm-list__row:last-child { border-bottom: 0; }

.confirm-list__key {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-muted);
}

.confirm-list__value { font-size: var(--fs-base); }

@media (min-width: 768px) {
  .confirm-list__row {
    grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* 同意チェック */
.consent-list { display: grid; gap: var(--space-3); }

.consent-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.consent-item__box {
  width: var(--space-5);
  height: var(--space-5);
  margin: var(--space-1) var(--space-0) var(--space-0);
  accent-color: var(--color-secondary);
}

.consent-item__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/* 受付の完了表示。
   2026-08-22 依頼元指示でコンパクト化し、受付IDの表示をやめた。
   これに伴い .receipt__label / .receipt__id / .receipt__note は不要になったため削除。 */
.receipt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.receipt > .icon { color: var(--color-primary); }

/* 支払い方法選択 */
.method-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.method {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.method__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  flex: none;
}

.method__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-heading);
}

.method__desc { font-size: var(--fs-sm); color: var(--color-muted); }

/* .method__external / .method__domain は 2026-08-22 の依頼元指示で画面から削除したため撤去。
   外部サイトへ移動する旨は、画面上部のリード文と、押下時の確認ダイアログ（apply.js）で伝える。 */
.method__notice { font-size: var(--fs-xs); color: var(--color-muted); }

.method-empty {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  font-size: var(--fs-sm);
}

.method-empty__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-heading);
}

/* 申込ページの簡易フッター */
.apply-footer {
  padding-block: var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.apply-footer a { color: var(--color-on-primary); text-decoration: underline; }

.apply-footer__inner { display: grid; gap: var(--space-4); }

/* -------------------------------------------------------------------------
   15. エラーページ
   ------------------------------------------------------------------------- */
.status-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding-block: var(--section-y);
  background-color: var(--color-surface);
}

.status-page__inner {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  max-width: var(--container-narrow);
  padding: var(--space-7) var(--space-5);
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

.status-page__code {
  font-family: var(--font-en);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-link);
  letter-spacing: .08em;
}

.status-page__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

.status-page__desc { font-size: var(--fs-sm); color: var(--color-muted); }

/* -------------------------------------------------------------------------
   16. ユーティリティ
       （コンポーネント層より後ろに置いて、同詳細度でも確実に勝たせる）
   ------------------------------------------------------------------------- */

/* 狭い画面で重複する補助導線を隠す。
   文書ページのヘッダー「トップへ戻る」は、直下のパンくずに同じ「ホーム」リンクが
   あるため、幅の足りない 〜479px では隠して横はみ出しを防ぐ。
   リンク自体は失われないので到達性は落ちない。 */
@media (max-width: 479px) {
  .u-hide-narrow { display: none; }
}

/* -------------------------------------------------------------------------
   17. 印刷
   ------------------------------------------------------------------------- */
@media print {
  .sticky-cta,
  .site-header__cta,
  .nav-toggle,
  .skip-link { display: none !important; }
  body:has(.sticky-cta) { padding-bottom: var(--space-0); }
}

/* -------------------------------------------------------------------------
   18. スクロールに合わせた出現（抑制の効いた範囲：フェード＋わずかな上移動）
       `js-reveal` は lp.js が「IntersectionObserver が使えるときだけ」付与する。
       非対応環境・JS 無効時はクラスが付かないため、要素は最初から表示されている。
   ------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-3));
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.js-reveal [data-reveal="shown"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}