/* eco-solu.cloud v2 — 案A（ライト&クリーン）ベース + UX機構
   常時ヘッダー / 追随サイドバー / ページ内目次 / 読み幅制御 */
/* ================================================================
   デザイントークン（単一マスター・CLAUDE.md §2-1）
   ⚠️ :root はこの 1 ブロックだけ。散らすと「先頭の表が嘘になる」。
      実際 2026-09-01 まで :root は 3 ブロックに分裂し、L4 の --navy と
      --accent は後段に上書きされて死んでいた（誰も気づけない状態）。
      再発防止＝tools/check_css_tokens.py（build.py ガード10）が2つ目を禁止。
   由来: 2026-08-19 ブランド刷新（自社LP helpdesk から実測したネイビー）
         2026-08-19 UX追補（本文コントラストを強化）
         2026-09-01 3ブロックを統合（勝っていた値のみ採用＝描画結果は不変）
   ================================================================ */
:root {
  /* ブランド（基準色） */
  --brand:      #1e3a8a;
  --brand-dark: #16295f;
  --brand-700:  #1d4ed8;
  --brand-50:   #eef2fb;
  --brand-100:  #dde5f5;

  /* 意味づけ（用途で呼ぶ。生 hex を本文へ書かない） */
  --navy:       #1e3a8a;
  --accent:     #1d4ed8;
  --accent-bg:  #eef2fb;
  --ink:        #1a2530;   /* 本文 */
  --soft:       #4a5866;   /* 補助テキスト */
  --q:          #0f2f6b;   /* FAQ の Q */
  --line:       #e5eaf0;
  --bg:         #ffffff;   /* 地の白（ページ・カードの面） */
  --on-brand:   #ffffff;   /* ブランド色の上に載る前景の白。--bg と値は同じだが意味が違う
                              （2026-09-09 新設・DESIGN.md §8 が積み残していた #fff の意味分離） */
  --bg-soft:    #f7f9fb;
  --danger:     #b42318;   /* 入力の不備・送信の失敗（2026-09-28 §8.7 L1 で欄の直下にも使う） */
  --danger-bg:  #fef3f2;
  --danger-line:#fecdca;
  --off-bg:     #e9edf2;   /* 営業日カレンダーの休業日の面（2026-10-01）＝閉まっている日は灰色。警告色にしない（DESIGN §2.5） */
  --marker:     #fff0a8;   /* コラムのマーカー（2026-10-03・CONTENT-TEMPLATE §2.12.3）＝強調の黄。赤・橙の警告色とは別（DESIGN §10） */

  /* 寸法 */
  /* --header-h ＝ ヘッダー上段（ロゴ・ナビの行）の高さ。.header-inner の height にも使うので、
     ここへ「ヘッダー全体の高さ」を入れてはいけない（入れると上段が太る→全体が伸びる→また太る
     の無限ループになる）。 */
  --header-h: 64px;
  /* --header-total ＝ 検索バーまで含めたヘッダー全体の実寸。固定して隠れる物の逃げ場所に使う
     （sticky の top・アンカー飛びの余白）。🔴 実寸は幅で変わるため定数では原理的に正しくできない
     （2026-09-11 実測＝1440px で 133px・768/390px で 161px。宣言値 64px のままだったので、
     右カラムの目次と、目次クリック後の見出しがヘッダーの下に潜っていた）。base.html の
     インラインスクリプトが実寸を測って上書きする。ここの値は JS が動く前と JS 無しの保険なので、
     実測の最大値を置く＝小さすぎると隠れるが、大きすぎても余白が増えるだけで済む。 */
  --header-total: 161px;
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px;
  /* 5段では届かない中間。2026-09-09 に 12px だけ追加（実測で決めたタイルの余白）。
     ⚠️ スケール全体の再設計は CUTOVER.md の P2 持ち越し起票のまま */
  --sp-15: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-total) + 16px); }
body { margin: 0; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.9; font-size: 16px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; border-radius: 8px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-3); }

/* ---- 常時ヘッダー（スクロールに追随） ---- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); height: var(--header-h); }
.brand { display: flex; flex-direction: column; line-height: 1.25; }
.brand:hover { text-decoration: none; }
.brand-mark { font-weight: 700; font-size: 1.1rem; color: var(--navy); letter-spacing: .05em; }
.brand-sub { font-size: .66rem; color: var(--soft); letter-spacing: .14em; }
.global-nav { display: flex; gap: 2px; align-items: center; }
.global-nav a { color: var(--soft); padding: var(--sp-1) 14px; border-radius: 999px; font-size: .92rem; font-weight: 500; }
.global-nav a:hover { background: var(--bg-soft); text-decoration: none; }
.global-nav a.on { color: var(--navy); background: var(--accent-bg); }
/* ⚠️ .wrap と同じ要素なので左右は書かない（DESIGN §12 G1・check_css_tokens の Rule D） */
.searchbar { position: relative; padding-top: 10px; padding-bottom: 12px; }
.searchbar #q { padding: 11px 18px; font-size: .95rem; }

/* ---- 検索 ---- */
#q { width: 100%; padding: 15px 22px; font-size: 1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg-soft); font-family: inherit; }
#q:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--accent-bg); }
#search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 120; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 48px rgba(26,58,107,.14); max-height: 60vh; overflow-y: auto; text-align: left; }
#search-results a { display: block; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--ink); }
#search-results a:last-child { border-bottom: 0; }
#search-results a:hover, #search-results a.sel { background: var(--accent-bg); text-decoration: none; }
#search-results .r-sec { font-size: .72rem; color: var(--accent); font-weight: 700; margin-right: var(--sp-1); }
#search-results .r-x { display: block; font-size: .78rem; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#search-results .r-none { padding: var(--sp-2) 18px; color: var(--soft); font-size: .9rem; }

/* ---- トップ（ヘルプセンター型ハブ） ---- */
.hero-v2 { text-align: center; padding: var(--sp-5) 0 var(--sp-1); }
.hero-v2 h1 { font-size: 1.85rem; color: var(--navy); margin: 0 0 var(--sp-1); }
.hero-v2 .lead { color: var(--soft); margin: 0 0 26px; }
/* 表札（2026-09-16）＝h1 の上に所属と用途の1行。h1 より弱く、lead と同じ色で主張しない */
.hero-v2 .hero-eyebrow { color: var(--soft); font-size: .88rem; letter-spacing: .04em; margin: 0 0 .4em; }
/* SP 390 で「…サイ／トです」と語の途中で折れた（2026-09-16 実画面）→ 意味の塊ごとに折る */
.hero-v2 .hero-eyebrow span { display: inline-block; }
.hero-search { position: relative; max-width: 640px; margin: 0 auto; }
.symptom-section { padding: var(--sp-4) 0 var(--sp-1); }
.symptom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.symptom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-1); background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 14px 20px; color: var(--ink); transition: all .16s; }
.symptom:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 6px 24px rgba(47,111,237,.10); transform: translateY(-2px); }
.sym-icon { font-size: 2.1rem; }
.sym-label { font-weight: 700; color: var(--navy); line-height: 1.5; }
.sym-sub { font-size: .78rem; color: var(--soft); }
section h2 { font-size: 1.2rem; color: var(--navy); margin: 0 0 var(--sp-2); }
.popular-section { padding: var(--sp-4) 0 var(--sp-1); }
.popular-list { list-style: none; counter-reset: pop; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.popular-list li { counter-increment: pop; border-bottom: 1px solid var(--line); }
.popular-list li a { display: flex; gap: 14px; align-items: baseline; padding: 15px 6px; color: var(--ink); font-weight: 500; }
.popular-list li a::before { content: counter(pop); flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; transform: translateY(4px); }
.popular-list li a:hover { color: var(--accent); text-decoration: none; }
.more-link { text-align: right; margin: 12px 0 0; font-size: .92rem; }
.svc-section, .docs-section { padding: var(--sp-4) 0 var(--sp-1); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.svc-tile { display: flex; justify-content: space-between; align-items: center; background: var(--bg-soft); border: 1px solid transparent; border-radius: 10px; padding: 13px var(--sp-2); color: var(--ink); font-weight: 500; font-size: .92rem; }
.svc-tile:hover { border-color: var(--accent); background: #fff; text-decoration: none; }
.svc-count { color: var(--soft); font-size: .78rem; }
.docs-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.docs-grid a { border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px; color: var(--navy); font-weight: 500; font-size: .92rem; }
.docs-grid a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.prospect-band { margin: var(--sp-5) 0 0; background: var(--bg-soft); border-radius: 20px; }
.prospect-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: 34px 38px; }
.prospect-band h2 { margin: 0 0 6px; }
.prospect-band p { margin: 0; color: var(--soft); font-size: .95rem; max-width: 560px; }
.prospect-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 12px var(--sp-3); border-radius: 10px; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .92; text-decoration: none; }
.btn-ghost { border: 1.5px solid var(--line); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--accent); text-decoration: none; }
.unresolved-band { text-align: center; padding: var(--sp-4) 0 var(--sp-5); }
.unresolved-band p { margin: 0 0 14px; }
.unresolved-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- 2カラムレイアウト（追随サイドバー） ---- */
.layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding: var(--sp-3) 0 var(--sp-5); }
.layout-rev { grid-template-columns: minmax(0, 1fr) 248px; }
.side { position: sticky; top: calc(var(--header-total) + 16px); max-height: calc(100vh - var(--header-total) - 32px); overflow-y: auto; font-size: .9rem; }
.side-title { font-size: .78rem; font-weight: 700; color: var(--soft); letter-spacing: .08em; margin: 0 0 var(--sp-1); }
.side-nav { list-style: none; margin: 0 0 22px; padding: 0; }
.side-nav li { margin: 1px 0; }
.side-nav a, .side-nav button { display: flex; justify-content: space-between; gap: var(--sp-1); width: 100%; text-align: left; padding: var(--sp-1) 12px; border-radius: 8px; color: var(--ink); border: 0; background: none; font: inherit; cursor: pointer; }
.side-nav a:hover, .side-nav button:hover { background: var(--bg-soft); text-decoration: none; }
.side-nav .active { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.side-nav .cnt { color: var(--soft); font-size: .78rem; }
.side-card { background: var(--bg-soft); border-radius: 12px; padding: var(--sp-2) 18px; font-size: .85rem; margin-top: 18px; }
.side-card b { color: var(--navy); }
.side-card .btn { display: block; text-align: center; margin-top: 10px; padding: 10px 12px; font-size: .88rem; }

/* ページ内目次（追随） */
.toc { border-left: 2px solid var(--line); padding-left: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 2px 0; }
.toc a { display: block; color: var(--soft); padding: 4px 6px; border-radius: 6px; font-size: .85rem; line-height: 1.5; }
.toc a:hover { color: var(--accent); text-decoration: none; }
.toc a.active { color: var(--accent); font-weight: 700; }
.toc .toc-l2 { padding-left: 18px; font-size: .8rem; }

/* ---- コンテンツページ ---- */
.crumb { font-size: .82rem; color: var(--soft); padding: var(--sp-2) 0 0; }
.page-head h1 { font-size: 1.55rem; color: var(--navy); margin: 10px 0 var(--sp-1); line-height: 1.5; }
.page-head .lead { color: var(--soft); margin: 0 0 10px; font-size: 1.02rem; }
.page-head { margin-bottom: var(--sp-2); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: .72rem; background: var(--accent-bg); color: var(--navy); border-radius: 4px; padding: 2px var(--sp-1); font-weight: 500; }
.tag-theme { background: #ecfeff; color: #0e7490; }
.tag-mini { background: var(--bg-soft); color: var(--soft); }
.prose { max-width: 760px; }
.prose h1 { font-size: 1.28rem; color: var(--navy); border-left: 4px solid var(--accent); padding-left: 12px; margin: var(--sp-4) 0 14px; }
.prose h2 { font-size: 1.12rem; color: var(--navy); margin: var(--sp-3) 0 10px; }
.prose h3 { font-size: 1rem; color: var(--navy); margin: 20px 0 var(--sp-1); }
.prose p { margin: 12px 0; }
.prose blockquote { margin: var(--sp-2) 0; padding: 14px 20px; background: var(--bg-soft); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; }
.prose blockquote p { margin: 4px 0; }
.prose table { border-collapse: collapse; width: 100%; margin: var(--sp-2) 0; font-size: .9rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--sp-1) 12px; text-align: left; }
.prose th { background: var(--bg-soft); }
.prose code { background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; font-size: .88em; }
.prose pre { margin: var(--sp-2) 0; padding: var(--sp-15) var(--sp-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; font-size: .88em; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-3) 0; }
.prose details { margin: 10px 0; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px var(--sp-2); }
.prose summary { cursor: pointer; font-weight: 500; color: var(--navy); }
.box { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-2); max-width: 760px; }
.box h2 { font-size: 1.05rem; color: var(--navy); margin: 0 0 10px; }
.doc-links { list-style: none; padding: 0; margin: 0; }
.doc-links li { padding: var(--sp-1) 0; border-bottom: 1px dashed var(--line); }
.faq-links { padding-left: 1.2em; margin: 0; }
.faq-links li { margin: 6px 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
/* 枚数が少ない面（FAQ の関係商品＝実測 1〜2枚・解決ページ＝5〜8枚）用。auto-fill は空トラックを
   残すので 1 枚のとき 230px の痩せたカードになる。auto-fit なら空トラックが潰れて幅いっぱいに伸びる。
   2026-09-11 追加＝商品カードを FAQ・解決ページへ広げた回（DESIGN §9-③ 改定）。 */
.card-grid-fit { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px var(--sp-2); color: var(--ink); transition: all .15s; display: flex; flex-direction: column; gap: 6px; }
.card:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 4px 18px rgba(47,111,237,.09); transform: translateY(-1px); }
.card-title { font-weight: 700; color: var(--navy); font-size: .96rem; }
.card-desc { font-size: .82rem; color: var(--soft); line-height: 1.6; }
.back { margin-top: var(--sp-3); }
.unresolved-box { margin-top: var(--sp-4); background: var(--bg-soft); border-radius: 14px; padding: 22px 26px; max-width: 760px; }
.unresolved-box b { color: var(--navy); }
/* ⚠️ ここに justify-content: flex-start を書かない（2026-09-11 是正）。後から入った
   `.unresolved-box { text-align: center }`（下方）と矛盾し、text-align は flex の子を
   動かせないのでボタンだけが左に残る。中央寄せは .unresolved-actions の既定に従う。 */
.unresolved-box .unresolved-actions { margin-top: 12px; }

/* ---- 商品一覧（/products/） ---- */
.cat-section { padding: var(--sp-3) 0 var(--sp-1); scroll-margin-top: calc(var(--header-total) + 12px); }
.cat-section h2 { border-left: 4px solid var(--accent); padding-left: 10px; }
.theme-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 15px; cursor: pointer; font-family: inherit; font-size: .88rem; display: inline-flex; gap: 7px; align-items: baseline; transition: all .15s; }
.chip b { color: var(--navy); font-weight: 500; }
.chip span { color: var(--soft); font-size: .76rem; }
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent-bg); border-color: var(--accent); }
.chip.active b { color: var(--accent); }
.card.hidden-by-theme { display: none; }

/* ---- FAQ 一覧 ---- */
#faq-filter { width: 100%; padding: 14px 20px; font-size: 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-soft); font-family: inherit; }
#faq-filter:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--accent-bg); }
.faq-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.faq-list li { padding: 13px 4px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.faq-list li summary a { flex: 1 1 60%; font-weight: 500; color: var(--ink); }
.faq-list li summary a:hover { color: var(--accent); }
.faq-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.none-msg { color: var(--soft); padding: var(--sp-3) 0; }
.doc-section { margin-bottom: 22px; }
.doc-section h2 { font-size: 1.02rem; color: var(--navy); margin: 0 0 6px; }

/* ---- フッター / ページトップ ---- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); color: var(--soft); font-size: .85rem; margin-top: var(--sp-4); }
.foot-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 30px; }
.foot-brand { font-weight: 700; color: var(--navy); }
.foot-addr { font-size: .78rem; margin-top: 4px; }
.foot-nav { display: flex; flex-direction: column; gap: 6px; }
.foot-nav a { color: var(--soft); }
#to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; border: 0; cursor: pointer; font-size: 1.1rem; box-shadow: 0 6px 20px rgba(26,58,107,.3); opacity: 0; pointer-events: none; transition: opacity .2s; }
#to-top.show { opacity: .9; pointer-events: auto; }

@media (max-width: 860px) {
  .layout, .layout-rev { grid-template-columns: 1fr; }
  /* フォームの側面の注意書き＝欄の下（最後）に落ちるので、1画面目の見出しの直下の写し（.cf-tip）に替える（2026-09-28 §8.7 L7） */
  .cf-layout > .side { display: none; }
  /* 詳細度を上げる＝後段の「.cf-step-hint, .cf-tip { display: none }」（PC 用）に負けないように */
  .cf-layout .cf-tip { display: block; background: var(--bg-soft); border-radius: 10px; padding: var(--sp-1) var(--sp-2); font-size: .88rem; margin: 0 0 var(--sp-2); line-height: 1.7; }
  .cf-layout .cf-tip b { color: var(--navy); display: block; }
  .side { position: static; max-height: none; order: 2; }
  .layout-rev .side { order: 2; }
  /* minmax(0,1fr)＝中身の長さで列幅が変わらないように（1fr は minmax(auto,1fr)） */
  .symptom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 和文は中黒・読点で折る（既定だと「Wi-／Fi」「故／障」「お選びく／ださい。」のように語の途中で折れていた・2026-10-02） */
  .sym-label, .sym-sub, .hero-v2 .lead { word-break: keep-all; overflow-wrap: anywhere; }
  .hero-v2 { padding-top: var(--sp-4); }
  .hero-v2 h1 { font-size: 1.45rem; }
  .prospect-inner { padding: 26px 22px; }
  .global-nav a { padding: var(--sp-1); font-size: .85rem; }
}

/* ================================================================
   UX 追補（2026-08-19）: コントラスト強化・Q&Aメリハリ・回遊ナビ
   ================================================================ */
/* トークンは先頭の :root に統合済み（2026-09-01）。ここでは定義しない。 */

/* ヘッダー CTA（常時追随・問い合わせフォームのみ） */
.nav-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: var(--sp-1) var(--sp-2) !important;
  background: var(--accent); color: #fff !important; border-radius: 999px; font-weight: 700; }
.nav-cta:hover { background: #2560d8; text-decoration: none; }
.cta-label { letter-spacing: .02em; }

/* 見出しの区切りを視覚的に強く（H2 に帯） */
.prose h2 { background: var(--bg-soft); border-left: 5px solid var(--accent); padding: 9px 14px; border-radius: 0 8px 8px 0; }
.prose h3 { border-bottom: 2px solid var(--line); padding-bottom: 5px; }
.prose p { color: var(--ink); }
.prose a { text-decoration: underline; }        /* リンクは青＋下線＝押せると分かる */
.btn { box-shadow: 0 2px 0 rgba(16,40,80,.16); }  /* ボタンは立体感 */
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-sm { padding: var(--sp-1) var(--sp-2); font-size: .86rem; }

/* FAQ 記事: Q/A のメリハリ */
.q-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: var(--accent); color: #fff; font-weight: 800; margin-bottom: var(--sp-1); }
.page-head h1 { font-size: 1.6rem; }
.answer-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: var(--bg-soft); color: var(--accent); font-weight: 800; border: 1.5px solid var(--accent); margin-bottom: 10px; }

/* FAQ 一覧: アコーディオン（Q 太字・グループ間余白＝ゲシュタルト） */
.faq-list li { display: block; padding: 0; border-bottom: 1px solid var(--line); }
.faq-list details { padding: 4px 0; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: baseline;
  padding: var(--sp-2) 34px var(--sp-2) 4px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "＋"; position: absolute; right: 8px; top: 15px; color: var(--accent);
  font-weight: 700; font-size: 1.05rem; transition: transform .15s; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:hover .q-text { color: var(--accent); }
.q-mark { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; background: var(--accent-bg);
  color: var(--accent); font-weight: 800; font-size: .82rem; display: inline-flex; align-items: center;
  justify-content: center; transform: translateY(3px); }
.q-text { flex: 1 1 auto; font-size: 1.06rem; font-weight: 700; color: var(--q); line-height: 1.65; }
.faq-list .faq-meta { flex: 0 0 auto; }
.faq-peek { padding: 0 34px 20px var(--sp-4); color: var(--soft); font-size: .93rem; }
.faq-peek p { margin: 0 0 12px; }

/* サイドバー: 同カテゴリ回遊リスト */
.side-list { margin-bottom: 6px; }
.side-list li a { display: block; padding: var(--sp-1) 12px; border-radius: 8px; color: var(--ink); font-size: .87rem;
  line-height: 1.6; }
.side-list li a:hover { background: var(--bg-soft); color: var(--accent); text-decoration: none; }
.side-more { margin: 0 0 22px; padding-left: 12px; font-size: .82rem; }

/* 前後ページャ */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--sp-4); max-width: 760px; }
.pager-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); }
.pager-item:hover { border-color: var(--accent); background: var(--bg-soft); text-decoration: none; }
.pager-item span { font-size: .78rem; color: var(--soft); font-weight: 700; }
.pager-item b { font-size: .9rem; font-weight: 500; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pager-next { text-align: right; }

/* タグをリンク化した際の見た目維持 */
a.tag:hover { background: var(--accent); color: #fff; text-decoration: none; }

@media (max-width: 860px) {
  .pager { grid-template-columns: 1fr; }
  .cta-label { display: none; }
  .nav-cta { padding: var(--sp-1) 12px !important; }
}

/* サイドバー回遊リストは2行で打ち切る（縦の暴れ防止） */
.side-list li a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toc a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* clamp の行高を固定して中途半端な見切れを防ぐ */
.side-list li a { line-height: 1.55; max-height: 3.1em; }
.toc a { line-height: 1.5; max-height: 3em; }

/* ---- FAQ 第2軸（商品）フィルタ ---- */
.filter-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.filter-label { font-size: .84rem; color: var(--soft); font-weight: 700; white-space: nowrap; }
#faq-product { flex: 1 1 320px; padding: 11px 14px; font-size: .93rem; font-family: inherit;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; }
#faq-product:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }

/* 適用中フィルタのチップ表示 */
.active-filters { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-top: 12px; }
.af-label { font-size: .8rem; color: var(--soft); font-weight: 700; }
.af-chip { border: 0; background: var(--accent); color: #fff; border-radius: 999px; padding: 5px 12px;
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.af-chip:hover { background: #2560d8; }
.af-clear { border: 0; background: none; color: var(--soft); font: inherit; font-size: .8rem;
  text-decoration: underline; cursor: pointer; padding: 4px; }
.af-clear:hover { color: var(--accent); }

/* 商品バッジ（どの商品の質問か一目で分かる） */
.tag-prod { background: var(--accent-bg); color: var(--navy); font-weight: 700; }
.tag-common { background: #f0f3f7; color: var(--soft); font-weight: 700; }

/* 0件時の案内（行き止まりにしない） */
.none-box { background: var(--bg-soft); border-radius: 14px; padding: var(--sp-3) 26px; margin-top: var(--sp-2); }
.none-box p { margin: 0 0 6px; }
.none-hint { color: var(--soft); font-size: .9rem; margin-bottom: 14px !important; }

/* モバイル: 一覧系ページはフィルタを本文の上に出す（記事系は下のまま） */
@media (max-width: 860px) {
  .layout > .side { order: 0; }
  .layout-rev > .side { order: 2; }
  .faq-list summary { flex-wrap: wrap; }
  .faq-list .faq-meta { width: 100%; padding-left: 36px; }
}

/* 行内バランス: タイトルを優先し、タグ列は右端で折り返す */
.faq-list summary { align-items: flex-start; }
.q-text { flex: 1 1 52%; min-width: 240px; }
.faq-list .faq-meta { max-width: 44%; justify-content: flex-end; padding-top: 3px; }

/* ================= モバイル最適化（2026-08-19 追補） ================= */
@media (max-width: 860px) {
  /* ヘッダー: 1行目=ブランド+電話 / 2行目=横スクロールのナビ */
  /* ⚠️ 左右は .wrap の余白（--sp-3）を生かす。2026-10-02 まで `padding: 10px 0 4px` の一括指定で
     左右が 0 に上書きされ、スマホでロゴが画面の左端・問い合わせボタンが右端に貼り付いていた
     （実測 390px で左 0 / 右 0。本文は左右 24px）。上下だけを指定する。 */
  .header-inner { height: auto; padding-top: 10px; padding-bottom: 4px; flex-wrap: wrap; row-gap: 6px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-mark { font-size: 1rem; }
  .brand-sub { display: none; }
  .nav-cta { order: 1; margin-left: auto; flex: 0 0 auto; }
  /* 横スクロールの帯だけは画面の端まで広げる（指で送る面が端で切れないように）。
     左の余白＝--sp-2 ＋ リンクの左余白 --sp-1 ＝ 24px でロゴ・本文の左端と揃う */
  .global-nav { order: 2; flex: 0 0 calc(100% + 2 * var(--sp-3)); margin: 0 calc(-1 * var(--sp-3));
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 0 var(--sp-2) 2px; }
  .global-nav::-webkit-scrollbar { display: none; }
  .global-nav a { white-space: nowrap; flex: 0 0 auto; }
  .searchbar { padding-top: 6px; padding-bottom: 10px; }

  /* 一覧のカテゴリ絞り込み: 縦リスト→横スクロールのチップ列（画面を占有させない） */
  .layout > .side { position: static; max-height: none; overflow: visible;
    background: var(--bg-soft); border-radius: 12px; padding: 12px 12px var(--sp-1); margin-bottom: 6px; }
  .layout > .side .side-title { margin-bottom: 6px; }
  .layout > .side .side-nav { display: flex; gap: var(--sp-1); overflow-x: auto; margin: 0; padding-bottom: 4px;
    scrollbar-width: none; }
  .layout > .side .side-nav::-webkit-scrollbar { display: none; }
  .layout > .side .side-nav li { flex: 0 0 auto; margin: 0; }
  .layout > .side .side-nav button, .layout > .side .side-nav a {
    white-space: nowrap; border: 1px solid var(--line); background: #fff; border-radius: 999px;
    padding: 7px 14px; width: auto; }
  .layout > .side .side-nav .active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .layout > .side .side-nav .active .cnt { color: rgba(255,255,255,.8); }
  /* 一覧ページのサイドカードは重複するので隠す（本文末尾に同等の導線あり） */
  .layout > .side .side-card { display: none; }

  /* 記事系サイドバー（右）は本文の下・通常の縦積み */
  .layout-rev > .side { background: none; padding: 0; }

  .filter-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-label { font-size: .8rem; }
  .q-text { flex: 1 1 100%; min-width: 0; font-size: 1rem; }
  .faq-list .faq-meta { max-width: 100%; justify-content: flex-start; }
  .prose { max-width: 100%; }
  .page-head h1 { font-size: 1.3rem; }
}

/* ---- 横オーバーフロー防止（長いURL・長語の折返し） ---- */
html { overflow-x: hidden; }
body { overflow-wrap: break-word; }
.prose a, .faq-peek, .card-desc, .side-list li a { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .brand { flex: 0 1 auto; }                 /* 伸ばさない＝電話ボタンを同じ行に収める */
  .filter-row { align-items: stretch; }
  #faq-product { flex: 0 0 auto; width: 100%; }   /* column 時に flex-basis が高さ化するのを防ぐ */
}

/* 🔧 モバイル横溢れの真因: grid の 1fr は minmax(auto,1fr) のため
   横スクロール要素（チップ列）の min-content が列幅を押し広げる。明示的に minmax(0,1fr) にする。 */
@media (max-width: 860px) {
  .layout, .layout-rev { grid-template-columns: minmax(0, 1fr); }
  .layout > *, .layout-rev > * { min-width: 0; }
  .side, .side-nav, .global-nav { min-width: 0; }
}

/* 2行クランプの下端が切れないよう余裕を持たせる */
.side-list li a, .toc a { max-height: none; }
.side-list li a { -webkit-line-clamp: 2; }

/* ================================================================
   ブランド刷新（2026-08-19）: 既存自社LP（helpdesk）から実測した
   ネイビー系 #1e3a8a / #1d4ed8 を基準色に。デフォルト青を廃止。
   ================================================================ */
/* トークンは先頭の :root に統合済み（2026-09-01）。ここでは定義しない。 */

/* --- アイコン（オリジナル線画・currentColor 追従） --- */
.svg-sprite { display: none; }
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; flex: 0 0 auto; }
.ico .f { fill: currentColor; stroke: none; }
.ico-r { width: 1em; height: 1em; margin-left: .1em; transition: transform .18s; }
a:hover > .ico-r, .btn:hover .ico-r { transform: translateX(3px); }
.ico-chev { width: .95em; height: .95em; color: var(--soft); transition: transform .18s, color .18s; }

/* --- 面で区切る（フルブリードの淡色帯） --- */
.band-tint { background: var(--brand-50); box-shadow: 0 0 0 100vmax var(--brand-50);
  clip-path: inset(0 -100vmax); padding-bottom: var(--sp-1); margin-bottom: var(--sp-4); }
.hero-band .hero-v2 { padding-top: 56px; }
.hero-band #q { background: #fff; border-color: var(--brand-100); }

/* --- 症状カード（線画アイコン・ブランド色） --- */
.sym-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; background: #fff;
  border: 1px solid var(--brand-100); color: var(--brand); margin-bottom: 2px; }
.sym-icon .ico { width: 24px; height: 24px; }
.symptom { background: #fff; border-color: var(--brand-100); box-shadow: 0 1px 2px rgba(30,58,138,.05); }
.symptom:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(30,58,138,.13); transform: translateY(-3px); }
.symptom:hover .sym-icon { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- UIパーツの統一（タイル: 右にシェブロン・ホバーで浮く） --- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.svc-tile { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px var(--sp-2);
  color: var(--ink); font-weight: 500; font-size: .93rem; transition: all .16s; }
.svc-tile:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(30,58,138,.10);
  transform: translateY(-2px); text-decoration: none; }
.svc-tile:hover .ico-chev { color: var(--brand); transform: translateX(3px); }
.svc-right { display: inline-flex; align-items: center; gap: var(--sp-1); }
.svc-count { color: var(--soft); font-size: .78rem; }

/* --- ボタン（ブランド色・立体感・ホバーで浮く） --- */
.btn { display: inline-flex; align-items: center; gap: var(--sp-1); border-radius: 10px;
  box-shadow: 0 2px 6px rgba(30,58,138,.18); transition: all .16s; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); opacity: 1; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30,58,138,.26); text-decoration: none; }
.btn-ghost { border: 1.5px solid var(--brand-100); color: var(--brand); background: #fff;
  box-shadow: 0 1px 3px rgba(30,58,138,.08); }
.btn-ghost:hover { border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30,58,138,.14); text-decoration: none; }
.btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(30,58,138,.2); }

/* ヘッダー CTA */
.nav-cta { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
  padding: 9px 18px !important; background: var(--brand); color: #fff !important;
  border-radius: 10px; font-weight: 700; box-shadow: 0 2px 6px rgba(30,58,138,.2); transition: all .16s; }
.nav-cta:hover { background: var(--brand-dark); transform: translateY(-1px); text-decoration: none; }

/* 帯・見出し・フォーカスリングを新ブランド色へ */
.prospect-band { background: var(--brand-50); }
.hero-v2 h1, section h2, .page-head h1, .card-title, .sym-label { color: var(--brand); }
#q:focus, #faq-filter:focus, #faq-product:focus { border-color: var(--brand-700); box-shadow: 0 0 0 4px var(--brand-50); }
.q-mark, .q-badge { background: var(--brand); color: #fff; }
.answer-mark { border-color: var(--brand); color: var(--brand); }
.af-chip { background: var(--brand); }
.af-chip:hover { background: var(--brand-dark); }
.popular-list li a::before { background: var(--brand-50); color: var(--brand); }
.tag-prod { background: var(--brand-50); color: var(--brand); }
#to-top { background: var(--brand); }
.side-nav .active { background: var(--brand-50); color: var(--brand); }
.prose h2 { border-left-color: var(--brand); }
.prose blockquote { border-left-color: var(--brand); }
.more-link a { font-weight: 700; }

@media (max-width: 860px) {
  .band-tint { margin-bottom: var(--sp-3); }
  .hero-band .hero-v2 { padding-top: 32px; }
  .cta-label { display: none; }
  .nav-cta { padding: 9px 12px !important; }
}

/* ================= お問い合わせフォーム ================= */
.cform { max-width: 760px; margin-top: var(--sp-3); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.cf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.cf-field label { font-size: .88rem; font-weight: 700; color: var(--brand); }
.req { display: inline-block; background: var(--brand); color: #fff; font-size: .68rem;
  border-radius: 4px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; font-weight: 700; }
/* 任意＝必須と対で全欄に付ける（2026-09-28 §8.7 L5＝help に「任意」と書いたり書かなかったりの揺れをやめた） */
.opt { display: inline-block; background: var(--bg-soft); color: var(--soft); border: 1px solid var(--line); font-size: .68rem;
  border-radius: 4px; padding: 0 .5em; margin-left: .5em; vertical-align: 1px; font-weight: 700; }
.cf-field input, .cf-field select, .cf-field textarea {
  font: inherit; font-size: .96rem; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%; }
.cf-field textarea { resize: vertical; line-height: 1.8; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 4px var(--brand-50); }
.cf-note { font-size: .85rem; color: var(--soft); background: var(--bg-soft);
  border-radius: 10px; padding: 14px 18px; margin: 4px 0 20px; }
.cf-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-status { font-size: .88rem; color: var(--soft); }
.cf-status.err { color: var(--danger); font-weight: 700; }
.cf-fallback { margin-top: var(--sp-2); background: var(--danger-bg); border: 1px solid var(--danger-line);
  border-radius: 10px; padding: 14px 18px; font-size: .9rem; }
.cf-fallback p { margin: 0 0 6px; }
#cf-submit:disabled { opacity: .6; cursor: default; transform: none; }

/* 送信完了 */
.thanks-box { max-width: 700px; background: var(--bg-soft); border-radius: 16px;
  padding: var(--sp-4) 42px; margin-top: var(--sp-3); }
.thanks-mark { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: var(--brand); color: #fff; margin-bottom: 14px; }
.thanks-mark .ico { width: 26px; height: 26px; }
.thanks-box h1 { font-size: 1.4rem; color: var(--brand); margin: 0 0 12px; }
.thanks-note { font-size: .88rem; color: var(--soft); }

@media (max-width: 860px) { .cf-row { grid-template-columns: 1fr; gap: 0; } }

/* 🔧 ボタン色は常に最優先（一覧内のリンク色指定に負けないよう明示） */
.btn-primary, a.btn-primary, .faq-list a.btn-primary { color: #fff !important; }
.btn-ghost, a.btn-ghost { color: var(--brand) !important; }
.faq-peek .btn-primary { box-shadow: 0 2px 6px rgba(30,58,138,.25); }

/* ================= ヒーロー装飾: オリジナル線画スカイライン =================
   freee の「そっけなさの無さ」の正体＝①広い淡色面 ②統一色のイラスト ③反復。
   ①③は実装済みのため、②を自作 SVG（権利クリーン・ブランド色追従）で補う。 */
.skyline { margin: 26px -24px -8px; line-height: 0; }
.skyline svg { width: 100%; height: 132px; display: block; }
.sky-b { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round;
  stroke-linejoin: round; opacity: .30; }
.sky-b rect { fill: #fff; fill-opacity: .55; }
.sky-net { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: .40; stroke-linecap: round; }
.sky-net .nd { fill: var(--brand); stroke: none; opacity: .55; }
.sky-ground { stroke: var(--brand); stroke-width: 1.5; opacity: .22; }

/* ================= 症状カードを freee 型に（アイコンを主役へ） ================= */
.sym-icon { width: 60px; height: 60px; border-radius: 16px; background: var(--brand-50);
  border: 0; color: var(--brand); margin-bottom: 6px; transition: all .18s; }
.sym-icon .ico { width: 30px; height: 30px; stroke-width: 1.55; }
.symptom { padding: 30px var(--sp-2) var(--sp-3); gap: 10px; border-radius: 18px; }
.sym-label { font-size: 1rem; }
.symptom:hover .sym-icon { transform: scale(1.06); }

/* ================= セクションを交互に面で区切る ================= */
.band-soft { background: var(--bg-soft); box-shadow: 0 0 0 100vmax var(--bg-soft);
  clip-path: inset(0 -100vmax); padding: var(--sp-1) 0 var(--sp-3); margin: var(--sp-4) 0; }
.popular-section { padding-top: var(--sp-3); }
.svc-section h2, .docs-section h2, .popular-section h2 {
  display: flex; align-items: center; gap: 10px; }
.svc-section h2::before, .docs-section h2::before, .popular-section h2::before {
  content: ""; width: 5px; height: 1.05em; border-radius: 3px; background: var(--brand); }

/* ================= かんたん検索チャット（段2・端末内で完結） ================= */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 200;
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 13px 20px;
  border: 0; border-radius: 999px; background: var(--brand); color: #fff;
  font: inherit; font-size: .93rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 22px rgba(30,58,138,.32); transition: all .18s; }
.chat-fab:hover { background: var(--brand-dark); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(30,58,138,.38); }
.chat-fab .ico { width: 20px; height: 20px; }
body.chat-open .chat-fab { transform: scale(.9); opacity: .55; }
/* chat 一旦停止中は to-top を通常位置(22px)へ戻す。チャット復帰時は次行を有効化: #to-top { bottom: 84px; } */

.chat-panel { position: fixed; right: 22px; bottom: 84px; z-index: 210;
  width: 380px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 130px);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(13,31,60,.28); display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: var(--sp-2) 18px; background: var(--brand); color: #fff; }
.chat-head b { display: block; font-size: 1rem; }
.chat-head span { font-size: .74rem; opacity: .82; line-height: 1.5; display: block; margin-top: 2px; }
.chat-close { background: none; border: 0; color: #fff; cursor: pointer; padding: 2px; opacity: .85; }
.chat-close:hover { opacity: 1; }
.chat-close .ico { width: 19px; height: 19px; }

.chat-log { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-2); background: var(--bg-soft);
  display: flex; flex-direction: column; gap: 10px; }
.cmsg { display: flex; }
.cmsg.bot { justify-content: flex-start; }
.cmsg.me { justify-content: flex-end; }
.bub { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: .89rem; line-height: 1.75; }
.cmsg.bot .bub { background: #fff; border: 1px solid var(--line); border-top-left-radius: 4px; color: var(--ink); }
.cmsg.me .bub { background: var(--brand); color: #fff; border-top-right-radius: 4px; }
.cwait { color: var(--soft); }

.ccand { display: flex; align-items: center; gap: var(--sp-1); padding: 10px 12px; margin: 6px 0;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 10px;
  color: var(--ink); text-decoration: none; }
.ccand:hover { border-color: var(--brand); text-decoration: none; }
.ccand:hover .ico-chev { color: var(--brand); transform: translateX(2px); }
.csec { flex: 0 0 auto; font-size: .66rem; font-weight: 700; color: var(--brand);
  background: #fff; border-radius: 4px; padding: 2px 6px; }
.ctit { flex: 1 1 auto; font-size: .85rem; font-weight: 500; line-height: 1.55; }

.cacts { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.cacts button, .cchips button { border: 1px solid var(--brand-100); background: #fff; color: var(--brand);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.cacts button:hover, .cchips button:hover { border-color: var(--brand); background: var(--brand-50); }
.cacts .cprimary { background: var(--brand); color: #fff; border-radius: 999px; padding: var(--sp-1) var(--sp-2);
  font-size: .82rem; font-weight: 700; text-decoration: none; }
.cacts .cprimary:hover { background: var(--brand-dark); text-decoration: none; }
.cchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chint { display: block; margin-top: var(--sp-1); font-size: .74rem; color: var(--soft); }

.chat-input { display: flex; gap: var(--sp-1); padding: 12px 14px 6px; background: #fff; }
.chat-input input { flex: 1 1 auto; font: inherit; font-size: .9rem; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg-soft); }
.chat-input input:focus { outline: none; border-color: var(--brand-700); background: #fff; }
.chat-input button { flex: 0 0 auto; width: 42px; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; cursor: pointer; }
.chat-input button:hover { background: var(--brand-dark); }
.chat-input .ico { width: 18px; height: 18px; }
.chat-note { margin: 0; padding: 2px var(--sp-2) 12px; font-size: .68rem; color: var(--soft); background: #fff; }

@media (max-width: 640px) {
  .chat-fab span { display: none; }
  .chat-fab { padding: 15px; border-radius: 50%; }
  .chat-panel { right: 12px; left: 12px; bottom: 80px; width: auto; height: calc(100vh - 120px); }
}

/* footer 著作権表示（2026-08-20 追加・淡色フッターに合わせる） */
.foot-copy { padding-top: 14px; padding-bottom: 26px; border-top: 1px solid var(--line); }
.foot-copy small { color: var(--soft); font-size: .72rem; line-height: 1.7; }

/* ================================================================
   タイポグラフィ調整（2026-08-21・参考: tele-marker.co.jp/lp/it-diagnosis 実測値）
   狙い＝文字のバランス（palt＋字間）・段落リズム・スマホ可読性。
   レイアウト（grid/配色/構造）には触れない追補レイヤー。
   ================================================================ */

/* 1) 和文の詰め＋わずかな字間 = 参考サイトの「文字の質感」の正体
      palt でカナ・約物の間延びを締め、0.02em で窮屈さを戻す（参考実測と同値） */
body {
  font-feature-settings: 'palt';
  letter-spacing: .02em;
  line-height: 1.8;               /* 1.9 → 1.8（参考実測。段落リズムと釣り合わせる） */
}

/* 2) 段落リズム: 行間 1.8 に対し段落間 12px は狭すぎて塊に見える。
      参考は本文 1em (1.6rem)。段落の切れ目 > 行の切れ目 を明確に */
.prose p { margin: 1em 0; }
.prose li { margin: .35em 0; }

/* 3) 見出しの前後比: 前を広く・後ろを狭く（見出しは次の本文に属する） */
.prose h2 { margin: 2.2em 0 .7em; line-height: 1.4; }
.prose h3 { margin: 1.8em 0 .5em; line-height: 1.4; }
.prose h2:first-child, .prose h1 + h2 { margin-top: 1em; }

/* 4) 見出し・リード文は詰めすぎない（palt の副作用を打ち消す） */
.page-head h1, .hero-v2 h1, .prose h1 { letter-spacing: .03em; line-height: 1.45; }
.page-head .lead { line-height: 1.75; }

/* 5) スマホ: 15px へ半段下げ（参考実測 960px 以下 1.5rem）＋余白のリズムを確保 */
@media (max-width: 860px) {
  body { font-size: 15px; }
  .prose { font-size: 1rem; }
  .container { padding-left: 18px; padding-right: 18px; }
  .prose h2 { margin-top: 2em; }
  .prose table { font-size: .88rem; }
  .prose th, .prose td { padding: var(--sp-1) 10px; }
}

/* ================================================================
   商品ページの視覚階層（2026-08-21・参考: tele-marker LP の構造要素）
   狙い＝非IT の決裁者が「見た瞬間に構造が分かる」:
   大見出し / 悩みのカード化 / STEP カード / 大きな CTA。
   .prose-product（商品テンプレのみ）に限定＝FAQ・docs には波及させない。
   ================================================================ */

/* ページタイトル: 商品名を主役に */
.page-head h1 { font-size: 1.9rem; font-weight: 900; line-height: 1.35; }
.page-head .lead { font-size: 1.05rem; }

/* 本文キャッチコピー（型の h1）: 帯を外して大きく */
.prose-product h1 {
  font-size: 1.5rem; font-weight: 800; line-height: 1.4;
  border-left: none; padding-left: 0; margin: 1.6em 0 .6em;
}

/* セクション見出し（h2）: 帯 → 大きな見出し＋短いアクセントバー */
.prose-product h2 {
  background: none; border-left: none; padding: 0;
  font-size: 1.38rem; font-weight: 800; line-height: 1.4;
  margin: 2.8em 0 1em;
}
.prose-product h2::after {
  content: ''; display: block; width: 44px; height: 4px;
  background: var(--brand, var(--accent)); border-radius: 2px; margin-top: .35em;
}

/* 「こんな時に」等の箇条書き → カードのグリッド（参考LP の悩みカード） */
.prose-product > ul {
  list-style: none; padding: 0; margin: 1em 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px;
}
.prose-product > ul > li {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px var(--sp-2) 13px 44px; position: relative; line-height: 1.7;
}
.prose-product > ul > li::before {
  content: '✓'; position: absolute; left: 14px; top: 12px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand, var(--accent)); color: #fff;
  font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.prose-product > ul > li > ul { list-style: disc; padding-left: 1.2em; margin: .4em 0 0; }

/* 進め方（ol）→ STEP カード（参考LP の STEP01〜04） */
.prose-product > ol {
  list-style: none; padding: 0; margin: 1em 0; counter-reset: step;
  display: grid; gap: 10px;
}
.prose-product > ol > li {
  counter-increment: step;
  background: var(--bg-soft); border-radius: 12px;
  padding: 14px var(--sp-2) 14px var(--sp-5); position: relative; line-height: 1.7;
}
.prose-product > ol > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 14px; top: 12px;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand, var(--accent)); color: #fff;
  font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}

/* 大きな CTA（参考LP の丸ボタン） */
.unresolved-box { text-align: center; padding: 26px 20px; }
.unresolved-box .btn { border-radius: 999px; padding: 14px 32px; font-size: 1.02rem; font-weight: 700; }

/* SP */
@media (max-width: 860px) {
  .page-head h1 { font-size: 1.5rem; }
  .prose-product h1 { font-size: 1.28rem; }
  .prose-product h2 { font-size: 1.22rem; margin-top: 2.4em; }
  .prose-product > ul { grid-template-columns: 1fr; }
}

/* ---- 2カラム（説明＋図版）: 元 Wraptas ページの左右並びを再現・SPは縦積み ---- */
.prose .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin: 18px 0; }
.prose .two-col > div > :first-child { margin-top: 0; }
.prose .two-col img { border: 1px solid var(--line); }
@media (max-width: 860px) { .prose .two-col { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ---- 図版に添えるボタン・バナー ---- */
.prose .btn-center { text-align: center; margin: 14px 0 0; }
.prose .btn-outline { display: inline-block; padding: 11px 26px; border: 2px solid var(--navy, var(--navy));
  color: var(--navy, var(--navy)); border-radius: 999px; font-weight: 700; text-decoration: none; background: #fff; }
.prose .btn-outline:hover { background: var(--bg-soft); text-decoration: none; }
/* 認定バナー・ロゴは中央に置く（2026-09-16 田中さん指示）。本文の段落と同じ左揃えだと、
   幅の狭い画像が左に寄って余白が右に偏る。文章ではなく「印」なので中央が収まる */
.prose .banner-link { text-align: center; margin: 1.4em 0 1.6em; }
.prose .banner-link img { border: 0; max-width: 320px; height: auto; display: inline-block; }

/* ---- 蛍光マーカー（元ページの黄色ハイライト） ---- */
.prose mark { background: linear-gradient(transparent 58%, #fff3a3 58%); color: inherit; padding: 0 1px; font-weight: 700; }

/* ---- 表: セル内改行を活かす・見出し列を固定幅に ---- */
.prose table td, .prose table th { vertical-align: top; line-height: 1.75; }
.prose .two-col table td:first-child { width: 8.5em; white-space: nowrap; background: var(--bg-soft); font-weight: 700; }

/* ================================================================
   ① お困りごとから探す（型F 解決ページ）— 2026-08-21
   読み手＝「何が必要かも分からない」状態。
   共感 → 痛みの可視化 → 解決の筋道 → 組み合わせ提示、の順で
   温度を変える。商品ページ（検討中の人向け）とは別設計。
   ※ 従来 .body には CSS が一切当たっていなかった（実測）ため新規。
   ================================================================ */

/* 見出し: 商品ページより一段大きく（相談の入口＝最初の1ページ） */
.page-solution .page-head h1 { font-size: 2.05rem; font-weight: 900; line-height: 1.35; }
.page-solution .page-head .lead { font-size: 1.08rem; line-height: 1.8; max-width: 760px; }

.prose-solution h2 {
  background: none; border-left: none; padding: 0;
  font-size: 1.45rem; font-weight: 800; line-height: 1.4; margin: 2.6em 0 .9em;
}
.prose-solution h2::after {
  content: ''; display: block; width: 52px; height: 4px;
  background: var(--brand, var(--accent)); border-radius: 2px; margin-top: .4em;
}

/* 1) 共感パート「こんな状況では」: 箇条書き → 淡色カード（読み手が自分を見つける） */
.prose-solution > ul {
  list-style: none; padding: 0; margin: 1.1em 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px;
}
.prose-solution > ul > li {
  background: var(--bg-soft); border-radius: 12px;
  padding: 14px var(--sp-2) 14px 42px; position: relative; line-height: 1.75;
}
.prose-solution > ul > li::before {
  content: '？'; position: absolute; left: 14px; top: 13px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand, var(--accent)); color: #fff;
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* 2) 構造の説明「なぜ〈その状態〉になるのか」: h3 単位の症状カード
      🔴 警告色（オレンジ・赤）は使わない。実測3サイト（invox / OTC /
      ウィザーズプラス・2026-08-21）はいずれも未使用で、このジャンルは
      「煽る」でなく「構造を教える」で信頼を取る（CONTENT-TEMPLATE §2.5）。 */
.prose-solution h3 {
  font-size: 1.08rem; font-weight: 700; color: var(--brand, var(--navy));
  margin: 1.6em 0 .5em; padding-left: 12px; border-left: 3px solid var(--brand, var(--accent));
  line-height: 1.5;
}
.prose-solution h3 + p {
  background: var(--bg-soft); border-radius: 10px;
  padding: 14px 18px; margin: 0 0 .4em; line-height: 1.85;
}

/* 3) 核心「組み合わせで解決します」: サービス表を主役に */
.prose-solution table { display: table; width: 100%; font-size: .97rem; margin: 1.2em 0; border-radius: 12px; overflow: hidden; }
.prose-solution thead th { background: var(--brand, var(--accent)); color: #fff; font-weight: 700; padding: 12px 14px; border-color: transparent; }
.prose-solution tbody td { padding: 14px; vertical-align: top; line-height: 1.75; }
.prose-solution tbody td:first-child { width: 34%; font-weight: 700; background: var(--bg-soft); }
.prose-solution tbody tr:nth-child(even) td:not(:first-child) { background: #fbfcfe; }

/* 4) 進め方: 商品ページと同じ STEP タイル（体験を揃える） */
.prose-solution > ol { list-style: none; padding: 0; margin: 1em 0; counter-reset: step; display: grid; gap: 10px; }
.prose-solution > ol > li {
  counter-increment: step; background: var(--bg-soft); border-radius: 12px;
  padding: 14px var(--sp-2) 14px var(--sp-5); position: relative; line-height: 1.75;
}
.prose-solution > ol > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 14px; top: 12px;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand, var(--accent)); color: #fff; font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}

/* 5) 締めの CTA: 相談の敷居を下げる面 */
.solution-cta { background: var(--bg-soft); border: 0; border-radius: 16px; padding: 30px 26px; text-align: center; margin-top: var(--sp-4); }
.solution-cta h2 { font-size: 1.3rem; margin: 0 0 var(--sp-1); }
.solution-cta p { max-width: 620px; margin: 0 auto 18px; line-height: 1.85; }
.solution-cta .btn { border-radius: 999px; padding: 14px 34px; font-size: 1.02rem; font-weight: 700; }

/* 6) 一覧ページ: 状況カードとして選ばせる */
.solutions-list { list-style: none; padding: 0; margin: var(--sp-3) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.solutions-list li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; transition: box-shadow .15s, transform .15s; }
.solutions-list li:hover { box-shadow: 0 6px 20px rgba(30,58,138,.10); transform: translateY(-2px); }
.solutions-list li a { text-decoration: none; }
.solutions-list li b { display: block; font-size: 1.12rem; color: var(--brand, var(--navy)); margin-bottom: 6px; line-height: 1.5; }
.solutions-list li .r-x { color: var(--soft); font-size: .93rem; line-height: 1.7; display: block; }

@media (max-width: 860px) {
  .page-solution .page-head h1 { font-size: 1.6rem; }
  .prose-solution h2 { font-size: 1.28rem; }
  .prose-solution > ul, .solutions-list { grid-template-columns: 1fr; }
  .prose-solution table { display: block; overflow-x: auto; }
  .prose-solution tbody td:first-child { width: auto; }
}

/* ================================================================
   マーケ要件 V2 統合（2026-08-21）— 既存原則へ吸収した4点
   ================================================================ */

/* ① Before / After 対比（型F ブロック2.5）
      ⚠️ 数字は入れない運用（CONTENT-TEMPLATE §2.5）。状態の対比に徹する。
      ⚠️ 直下の子は .ba-col の2つだけにする（p/ul を直に置くと 2×2 に崩れる） */
.prose-solution .ba, .prose-product .ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: 1.2em 0; align-items: stretch; }
.prose-solution .ba-col, .prose-product .ba-col { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.prose-solution .ba-col h4, .prose-product .ba-col h4 { margin: 0; padding: 12px var(--sp-2); font-size: 1.02rem; font-weight: 700; }
.prose-solution .ba-before h4, .prose-product .ba-before h4 { background: #eceff3; color: #5a6674; }
.prose-solution .ba-after h4, .prose-product .ba-after h4 { background: var(--brand, var(--accent)); color: #fff; }
.prose-solution .ba-col ul, .prose-product .ba-col ul { display: block; list-style: none; margin: 0; padding: 14px var(--sp-2); }
.prose-solution .ba-col li, .prose-product .ba-col li { position: relative; padding: 0 0 0 var(--sp-3); margin: .55em 0; line-height: 1.75; background: none; border-radius: 0; }
.prose-solution .ba-col li::before, .prose-product .ba-col li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
  display: inline; width: auto; height: auto; background: none; border-radius: 0;
}
.prose-solution .ba-before li, .prose-product .ba-before li { color: #6b7683; }
.prose-solution .ba-before li::before, .prose-product .ba-before li::before { content: '×'; color: #9aa5b1; }
.prose-solution .ba-after li::before, .prose-product .ba-after li::before { content: '✓'; color: var(--brand, var(--accent)); }

/* ② 窓口一本化バンド（型F 共通・CTA 直前に自動挿入） */
.onestop-band {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) 22px; text-align: center;
  background: var(--brand, var(--accent)); color: #fff; border-radius: 12px; font-size: 1.05rem; line-height: 1.7;
}
.onestop-band b { font-weight: 800; }
.onestop-band span { display: block; font-size: .9rem; opacity: .88; margin-top: 2px; }

/* ③ CTA マイクロコピー（心理的ハードルの低下・全3箇所共通） */
.cta-micro { margin: 12px 0 0; font-size: .85rem; line-height: 1.75; color: var(--soft); }
.solution-cta .cta-micro { max-width: 560px; margin: 14px auto 0; }
.side-card .cta-micro { margin-top: 10px; font-size: .78rem; }

/* ④ FAQ → 解決ページの逆導線（静かな1行・CTA は1つのまま） */
.unresolved-deep { margin: 10px 0 0; font-size: .9rem; color: var(--soft); line-height: 1.75; }
.unresolved-deep a { font-weight: 600; }

@media (max-width: 860px) {
  .prose-solution .ba, .prose-product .ba { grid-template-columns: 1fr; gap: 10px; }
  .onestop-band { font-size: .98rem; padding: 14px var(--sp-2); }
}

/* 型E の症状 h3: 解決ページと同じ「見出し＋淡色カード」で具体に落とす
   （2026-08-21・invox 実測「h2 だけで並べず h3 で具体に落とす」の商品ページ版） */
.prose-product h3 {
  font-size: 1.06rem; font-weight: 700; color: var(--brand, var(--navy));
  margin: 1.7em 0 .5em; padding-left: 12px; border-left: 3px solid var(--brand, var(--accent));
  line-height: 1.5;
}
.prose-product h3 + p {
  background: var(--bg-soft); border-radius: 10px;
  padding: 14px 18px; margin: 0 0 .4em; line-height: 1.85;
}

/* ================================================================
   ③ FAQ ページ — 2026-08-22
   読み手＝困っていて急いでいる人。商品ページ（検討中）・解決ページ（相談）とは
   向きが逆で、設計は「足す」でなく「引く」。
   実測した出発点（2026-08-22・PC 1280px）: 答えが始まるのは y≈440px で、
   その手前に パンくず／Qバッジ／h1／タグ／Aの丸印 の5行が積まれていた。
   右カラムには 目次・同カテゴリ8件・CTA の3ブロックが答えより先に並んでいた。
   ∴ ①ページ上部を h1 の1ブロックへ圧縮 ②右カラムは目次専用（無ければ1カラム）
     ③回遊は読み終わった後ろへ ④目立つ出口は「解決しない場合は」の1つだけ。
   ================================================================ */

/* 1) 上部の圧縮: Q は h1 に同居させ、独立行を作らない */
.page-faq .page-head { margin-bottom: var(--sp-2); }
.page-faq .page-head h1 {
  font-size: 1.62rem; font-weight: 800; line-height: 1.55;
  display: block; margin: 6px 0 0;
}
.page-faq .page-head h1 .q-badge {
  width: 27px; height: 27px; font-size: .9rem; border-radius: 7px;
  margin-right: 10px; transform: translateY(2px);
}

/* 2) 答えの入口: 本文の頭を「まず結論」の体裁にする（DESIGN §4-4 の視覚化）。
      装飾を足しているのではなく、削った Aの丸印 の役割をここへ移している */
.prose-faq { border-top: 2px solid var(--brand, var(--accent)); padding-top: var(--sp-2); }
.prose-faq > p:first-child { font-size: 1.06rem; line-height: 1.9; color: var(--ink); }

/* 3) 本文は静かに: 商品ページのカード化（ul→タイル / ol→STEP）を持ち込まない。
      h2 の帯も外す＝ FAQ は1問1答で、面を割る必要がない */
.prose-faq h2 {
  background: none; border-left: none; padding: 0;
  font-size: 1.18rem; font-weight: 700; color: var(--brand, var(--navy));
  margin: 2.2em 0 .6em; padding-bottom: .35em; border-bottom: 1px solid var(--line);
}
.prose-faq h3 {
  font-size: 1.03rem; font-weight: 700; color: var(--ink);
  margin: 1.7em 0 .4em; padding-left: 11px;
  border-left: 3px solid var(--brand, var(--accent)); line-height: 1.5;
}

/* 4) 画像は主役にしない: 手順のスクショが本文幅いっぱいに出ると答えが押し出される */
.prose-faq img { max-width: 540px; width: 100%; display: block; margin: 1.1em auto; }

/* 5) 目次が立たない短い回答は1カラム（空のサイドバーを出さない・行長も適正化） */
.faq-solo > article { max-width: 760px; }

/* 6) 読み終わった後の回遊: カードにせずリンクの列に留める（CTA は1つのまま） */
.faq-more { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.faq-more h2 {
  font-size: 1.06rem; font-weight: 700; color: var(--soft);
  background: none; border: 0; padding: 0; margin: 0 0 14px; letter-spacing: .06em;
}
.faq-more-label { font-size: .84rem; color: var(--soft); margin: var(--sp-2) 0 6px; font-weight: 600; }
.faq-more-label:first-of-type { margin-top: 0; }
.faq-more-list { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px 22px; }
.faq-more-list li { padding: 7px 0; border-bottom: 1px dotted var(--line); line-height: 1.6; }
.faq-more-list li a { font-weight: 500; }
.faq-more-list li span { display: block; color: var(--soft); font-size: .84rem; margin-top: 1px; }

/* 7) 分類タグは記事の最後（読者の用事ではないので、答えの前に置かない） */
.faq-foot { margin-top: var(--sp-3); padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px var(--sp-2); align-items: center; justify-content: space-between; }
.faq-foot .back { margin: 0; }

@media (max-width: 860px) {
  .page-faq .page-head h1 { font-size: 1.32rem; }
  .faq-more-list { grid-template-columns: 1fr; }
}

/* ================================================================
   ④ 手続き・書式 — 2026-08-22
   読み手は用事がはっきりしている（申し込みたい／やり方を知りたい／
   いくらか知りたい／規約を確認したい）。迷わせない＝探す時間を消す設計。
   実測した出発点: 分類が提供側の都合の語彙で、published 48 件中 20 件が
   未設定＝巨大な「その他のご案内」に落ち、一覧が4割を取りこぼしていた。
   さらにフォーム（外部で行動する）と規約（読む）とガイド（手順）が
   同じ青リンクの羅列で、見た目から用事を区別できなかった。
   ================================================================ */

/* 用事へ飛ぶ横並びナビ（48件を上から舐めさせない） */
.doc-jump { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-3); }
.doc-jump a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: var(--sp-1) 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--ink);
}
.doc-jump a:hover { border-color: var(--brand, var(--accent)); color: var(--brand, var(--accent)); text-decoration: none; }
.doc-jump a span { font-size: .78rem; color: var(--soft); font-weight: 500; }

.page-docs .doc-section { margin-top: var(--sp-4); }
.page-docs .doc-section h2 {
  background: none; border: 0; padding: 0; margin: 0;
  font-size: 1.24rem; font-weight: 800; color: var(--brand, var(--navy)); line-height: 1.4;
}
.doc-section-lead { color: var(--soft); font-size: .92rem; margin: 6px 0 14px; line-height: 1.7; }

/* 一覧はカード。フォーム群だけ「押すもの」に見せる（用事の違いを見た目で出す） */
.doc-cards { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-1); }
.doc-cards li { display: flex; }
.doc-cards li a {
  display: flex; width: 100%; align-items: center; gap: 10px;
  padding: 13px 14px 13px var(--sp-2); border: 1px solid var(--line); border-radius: 10px;
  background: #fff; text-decoration: none; color: var(--ink); line-height: 1.6;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.doc-cards li a:hover {
  border-color: var(--brand, var(--accent)); text-decoration: none;
  box-shadow: 0 4px 14px rgba(30,58,138,.08); transform: translateY(-1px);
}
.doc-card-title { flex: 1 1 auto; font-weight: 500; }
.doc-card-chev { flex: 0 0 auto; width: 17px; height: 17px; color: var(--soft); }
.doc-cards li a:hover .doc-card-chev { color: var(--brand, var(--accent)); }
/* 行動する群＝左に色の縦帯を立てて「ここから手続きが始まる」を示す */
.doc-cards-action li a { border-left: 4px solid var(--brand, var(--accent)); padding-left: 14px; background: var(--bg-soft); }
.doc-cards-action li a:hover { background: #fff; }
/* 題名の下の1行（中身の広さが題名だけでは伝わらない物＝build.py DOC_CARD_SUB） */
.doc-card-sub { display: block; font-size: .84rem; font-weight: 400; color: var(--soft); margin-top: .15em; }
/* 用事でない物（規約・カレンダー・読み物・受付終了）は群の下に小さく */
.doc-foot { margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--line); font-size: .9rem; color: var(--soft); line-height: 1.9; }
.doc-foot p { margin: 0 0 var(--sp-1); }
.doc-foot b { color: var(--ink); margin-right: .5em; font-weight: 600; }
.doc-foot-sep { color: var(--line); margin: 0 .3em; }

/* 記事側: どの用事の書類かを見出しの上に置く（パンくずより目に入る） */
.doc-eyebrow {
  margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  color: var(--brand, var(--accent));
}
/* 最終更新（2026-09-27・templates/_updated.html）。本文の前に小さく1行＝読み手が「今の情報か」を見分ける */
.page-updated { margin: 0 0 var(--sp-2); font-size: .8rem; color: var(--soft); }
.page-doc .page-head h1 { font-size: 1.55rem; font-weight: 800; line-height: 1.45; margin: 6px 0 0; }

/* 手順・ガイドの本文: 番号付き手順を STEP に（やり終えるための面） */
.prose-doc h2 {
  background: none; border-left: none; padding: 0 0 .35em;
  border-bottom: 1px solid var(--line);
  font-size: 1.2rem; font-weight: 700; color: var(--brand, var(--navy)); margin: 2.2em 0 .7em;
}
.prose-doc > ol { list-style: none; padding: 0; margin: 1em 0; counter-reset: step; display: grid; gap: var(--sp-1); }
.prose-doc > ol > li {
  counter-increment: step; background: var(--bg-soft); border-radius: 10px;
  padding: 13px var(--sp-2) 13px 58px; position: relative; line-height: 1.75;
}
.prose-doc > ol > li::before {
  content: counter(step); position: absolute; left: 14px; top: 11px;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--brand, var(--accent)); color: #fff; font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}

/* 営業日カレンダー（/docs/business-calendar/・2026-10-01）。日付は build が営業日の正本から描く（tools/calendar_page.py）。
   休業日は灰色の面＝閉まっている日。会社の休業期間（年末年始など）は面に加えて下辺にブランド色の線を引いて分ける。
   .prose table の既定（罫線・横スクロールのための block 表示）はカレンダーに合わないので打ち消す */
/* align-items: start＝同じ段の月の表を同じ高さへ伸ばさない（伸ばすと4週の月だけ行が太る） */
.bcal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); align-items: start; margin: var(--sp-2) 0 var(--sp-3); }
.prose .bcal-table { display: table; table-layout: fixed; width: 100%; margin: 0; font-size: .85rem; border-collapse: separate; border-spacing: 2px; }
.prose .bcal-table caption { text-align: left; font-weight: 700; color: var(--brand); padding: 0 0 .25rem; }
.prose .bcal-table th, .prose .bcal-table td { border: 0; padding: .3rem 0; text-align: center; line-height: 1.3; }
.prose .bcal-table th { background: none; color: var(--soft); font-size: .75rem; font-weight: 500; }
.prose .bcal-table td { border-radius: 4px; font-variant-numeric: tabular-nums; }
.prose .bcal-table td.is-off { background: var(--off-bg); color: var(--soft); }
.prose .bcal-table td.is-co { box-shadow: inset 0 -3px 0 var(--brand); }
.prose .bcal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: 0; margin: var(--sp-2) 0 0; font-size: .85rem; color: var(--soft); }
.prose .bcal-legend li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.bcal-key { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); }
.bcal-key.is-off { background: var(--off-bg); border-color: var(--off-bg); }
.bcal-key.is-co { box-shadow: inset 0 -3px 0 var(--brand); }
.prose .bcal-days ul { columns: 2; column-gap: var(--sp-3); }
.prose .bcal-days li { break-inside: avoid; margin: 0 0 var(--sp-1); }   /* 上の余白を持たせない＝2列の頭が揃う */
@media (max-width: 860px) { .bcal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } }
@media (max-width: 600px) { .prose .bcal-days ul { columns: 1; } }
@media print {
  /* 印刷・PDF保存＝カレンダーと一覧だけを残す（前後の書類への案内は紙に要らない） */
  .page-doc:has(.bcal) .pager, .page-doc:has(.bcal) .back { display: none; }
  .bcal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bcal-table { break-inside: avoid; }
}

/* 規約の本文: 読み切るための面。装飾を足さず、条の切れ目だけを明確にする */
.page-terms .page-head h1 { font-size: 1.45rem; }
.prose-terms { font-size: .97rem; }
.prose-terms h2 {
  background: none; border-left: none; padding: 0;
  font-size: 1.1rem; font-weight: 700; color: var(--ink);
  margin: 2.4em 0 .6em; padding-bottom: .3em; border-bottom: 2px solid var(--line);
}
.prose-terms h3 {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  border: 0; padding: 0; margin: 1.8em 0 .4em;
}
.prose-terms p, .prose-terms li { line-height: 1.95; }
.prose-terms blockquote {
  background: var(--bg-soft); border-radius: 10px; padding: 14px 18px; margin: 1em 0;
}

@media (max-width: 860px) {
  .doc-cards { grid-template-columns: 1fr; }
  .page-doc .page-head h1 { font-size: 1.3rem; }
  .doc-jump { gap: 6px; }
  .doc-jump a { padding: 7px 12px; font-size: .84rem; }
}

/* ================================================================
   ① トップ — 2026-08-22
   ヘルプセンター型ハブ（DESIGN §3）の器は出来ていたが、見た目の階層が無く
   全セクションが同格に並んでいた。実測した出発点:
   ・スカイラインの下に白帯が挟まり、淡色帯 → 白 → 淡色帯 と面が途切れていた
   ・h2 が本文と同じ大きさ＋青い縦棒で、4 セクションのどれが主かを読めない
   ・「よく見られている質問」5件と「手続き・書式」3件がテンプレートのベタ書き
     （前者は閲覧数の主張・後者は選定根拠なし）→ どちらもデータ由来へ移した
   ・「解決しない場合は」が新規向け分離ブロックの後ろ＝役割1（既存客）が最後尾
   ================================================================ */

/* 1) 面の継ぎ目を殺す: ヒーローの淡色帯とスカイラインが次の面へそのまま着地する */
.hero-band.band-tint { margin-bottom: 0; padding-bottom: 0; }
.hero-band .skyline { margin-bottom: 0; }
/* ⚠️ :first-of-type は「div のうち最初」なので .hero-band に当たってしまい効かない
   （2026-08-22 実測。白帯が残り続けた原因）。隣接兄弟で指定する */
.hero-band + .band-soft { margin-top: 0; }
.band-soft { padding: var(--sp-4) 0; }

/* 2) セクション見出し: トップの h2 は本文の h2 と別物（面の表札）。
      縦棒は残しつつ一段大きく、直下に用途を1行で添えて迷いを消す */
.home-section { margin: var(--sp-4) 0; }
.band-soft > .home-section:first-child { margin-top: 0; }
.band-soft > .home-section:last-child { margin-bottom: 0; }
.home-head { margin-bottom: var(--sp-2); }
.home-head h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.45rem; font-weight: 800; line-height: 1.4; margin: 0;
  color: var(--brand, var(--navy));
}
.home-head h2::before {
  content: ""; flex: 0 0 auto; width: 5px; height: 1.05em;
  border-radius: 3px; background: var(--brand, var(--accent));
}
.home-head p { margin: 7px 0 0 15px; color: var(--soft); font-size: .95rem; line-height: 1.75; }

/* 3) 解決ページ導線は一覧ページと同じカード（体験を揃える・素の ul をやめる） */
.home-section .solutions-list { margin: 0; }
.home-section .solutions-list li b { font-size: 1.06rem; }

/* 4) ピックアップ FAQ: 番号は控えめに（順位ではなく並びの目印） */
.home-section .popular-list { border-top: 1px solid var(--line); }
.home-section .more-link { margin-top: 14px; text-align: right; }

@media (max-width: 860px) {
  .home-head h2 { font-size: 1.2rem; }
  .home-head p { font-size: .89rem; margin-left: 0; }
}

/* ================================================================
   ブランドロックアップ（2026-08-22）
   ロゴを画像ではなく SVG で持つ＝ブランド色に追従・Retina で滲まない・
   配信物が増えない（孤児アセットの検査対象を増やさない）。
   色は既存ロゴ画像から実測抽出（brand-tokens.md が正本）:
     緑 #82b15f（ECO・リング） / 青 #16509e（ロゴの錠前）
   ⚠️ ロゴの青はサイトの基調ネイビー #1e3a8a とは別の値。
      ロゴタイプの「SOLUTION」は**サイト側の基調色のまま**にしてある
      （田中さん指示＝変えるのは ECO だけ）。
   ================================================================ */
.brand { flex-direction: row; align-items: center; gap: 9px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-logo { flex: 0 0 auto; width: 27px; height: 27px; display: block; }
.brand-eco { color: #82b15f; }

@media (max-width: 860px) {
  .brand { gap: 7px; }
  .brand-logo { width: 22px; height: 22px; }
}

/* ==========================================================================
   物から探す（2026-09-09 本採用・DESIGN.md §9）
   現行の「サービス別に探す」は提供側のライフサイクル軸で、1つの物（例: 電話）の情報が
   契約・機器・工事・障害・保守の5枠に散っていた。∴ 探し口を顧客が持っている物へ替えた。

   寸法の根拠（他社4社の実画面を PC1440 / スマホ実寸390 で撮って目視・2026-09-08・E1）:
   - Microsoft サポート(ja) … SP390 で 179x53px のタイルを2列。絵は左・ラベルは右。
     多枠を見せるには横並びが効率的（縦積みの約半分の高さ）
   - バッファロー サポート … SP390 で 14カテゴリを1列・約40px の行リスト＝枠数が多くても成立する
   - ソフトバンク 法人サポート … 8カテゴリを青の線画アイコン＋ラベル＋補助1行で提示
     ＝当社が採る絵の種類が、法人向けで現に使われている
   ⚠️ 絵だけで辿り着ける設計にはしない。NN/g「アイコンのラベルは常時可視であるべき」／
      デジタル庁「アイコンは必ずラベルと組み合わせて」／GOV.UK "Avoid using icons in most cases"。
      狙いは「絵で読ませる」ではなく「一般名詞のラベル＋線画で、2回目から速い」。
   ========================================================================== */
/* ---- 物から探す（トップのタイル）---- */
.mono-grid {
  display: grid;
  /* PC(コンテナ約1080px) で4列。⚠️ 5列にすると「インターネット回線」「社内のLAN・配線」等の
     9文字級のラベルが2行に折れて読みにくくなる（2026-09-08 実測で確認して 196px→240px へ） */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-15);
  margin-top: var(--sp-2);
}
.mono-tile {
  display: flex; align-items: center; gap: var(--sp-15);
  background: var(--bg); border: 1px solid var(--brand-100); border-radius: 13px;
  padding: var(--sp-15) var(--sp-15); color: var(--ink); min-height: 64px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mono-tile:hover {
  text-decoration: none; border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(30, 58, 138, .10); transform: translateY(-2px);
}
.mono-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  background: var(--brand-50); display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.mono-tile:hover .mono-ico { background: var(--brand); }
.mono-ico .ico { width: 24px; height: 24px; color: var(--brand); }
.mono-tile:hover .mono-ico .ico { color: var(--on-brand); }
.mono-body { min-width: 0; }
/* ⚠️ 和文は既定だと語の途中でも折れる。「複合機・プリンタ／ー」「インターネット回／線」のように
   意味の切れ目でない位置で折れると読みにくい。keep-all で中黒などの区切りを優先させ、
   どうしても入らない時だけ break-word で逃がす（2026-09-08 実測で確認して追加） */
.mono-name { display: block; font-weight: 700; font-size: .95rem; line-height: 1.35;
  word-break: keep-all; overflow-wrap: break-word; }
.mono-sub { display: block; margin-top: 2px; color: var(--soft); font-size: .78rem; line-height: 1.45;
  word-break: keep-all; overflow-wrap: break-word; }

@media (max-width: 720px) {
  /* 🔴 repeat(2, 1fr) は minmax(auto,1fr) なので、keep-all で折れない長いラベル（インターネット回線）の
     幅が左の列を押し広げ、左右の列幅が揃わなかった（2026-10-02 実測 390px で 184/150px、360px で
     184/143px・右の余白が 1px）。列は等分に固定し、折れ目はラベル側（mono.label_html の <wbr>）で作る */
  .mono-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
  .mono-tile { padding: var(--sp-1) var(--sp-1); gap: var(--sp-1); min-height: 60px; border-radius: 11px; }
  .mono-ico { width: 34px; height: 34px; border-radius: 9px; }
  .mono-ico .ico { width: 20px; height: 20px; }
  .mono-name { font-size: .83rem; line-height: 1.3; }
  .mono-sub { font-size: .7rem; line-height: 1.35; margin-top: 1px; }
}
/* 360px 級（iPhone SE・小型 Android）。2列タイルの文字幅が 92px しかなく「インターネッ／ト回線」
   「ビジネスフォン／・番号」と語の途中で折れていた（2026-10-02 実測＝「インターネット」7字が 97px に
   対し入る幅 96px）。絵を 6px 縮め、字間を 0 にして文字へ回す（360px で約 5px の余裕）。
   症状ボタンも同じ理由で左右の内余白を詰める（「ホームページ／を」の1文字送りを防ぐ） */
@media (max-width: 380px) {
  .mono-ico { width: 28px; height: 28px; border-radius: 8px; }
  .mono-ico .ico { width: 18px; height: 18px; }
  .mono-name { letter-spacing: 0; }
  .symptom { padding-left: var(--sp-15); padding-right: var(--sp-15); }
}
/* 折らない語（mono.label_html が Wi-Fi 等のハイフン語に付ける） */
.nowrap { white-space: nowrap; }


/* ---- 物ページ（タイルの着地面） ---- */
.mono-head { display: flex; align-items: center; gap: var(--sp-2); }
.mono-head .mono-ico { width: 58px; height: 58px; border-radius: 15px; }
.mono-head .mono-ico .ico { width: 32px; height: 32px; }
.mono-head h1 { margin: 0; }
.mono-head .lead { margin: var(--sp-1) 0 0; }
/* 見出しは既存の .home-head を再利用する（同じ物を2度定義しない） */
.svc-stage { display: inline-block; margin-left: var(--sp-1); font-size: .74rem; font-weight: 500;
  color: var(--brand); background: var(--brand-50); border-radius: 999px; padding: 2px 9px; vertical-align: 2px; }

/* ================================================================
   図版（P2・2026-09-15）: 商品ページの構成図・断面図
   型別のスロット＝CONTENT-TEMPLATE §2.11／絵の作法＝DESIGN §10。
   本文は図が無くても成立させる（P1 の原則）。図は「像」を足すだけ。
   余白は em で書き、ガード10（生 hex / px のラチェット）に触れない。
   ================================================================ */
.prose .fig { margin: 1.4em 0 1.8em; }
.prose .fig img { display: block; width: 100%; max-width: 32rem; margin: 0 auto; }
.prose .fig figcaption { margin-top: .6em; color: var(--soft); font-size: .9rem; line-height: 1.6; text-align: center; }

/* ---- 一覧ページの入口（2026-09-15・P2）: トップと同じ物タイルを再利用。余白は em（ガード10 非接触） ---- */
.idx-mono { margin-bottom: 2.2em; }
.idx-all { margin-top: .5em; }
.idx-all h2 { font-size: 1.15rem; }

/* ================================================================
   商品ページのヒーロー（P2・2026-09-15 田中さん「B で進めて」・DESIGN §11）
   表札（物のアイコン＋商品名＋キャッチ＋一言＋段階・費用の形）＋ 2つの入口 ＋ 比較の1行。
   中身は build.py の product_hero が既存項目から導出する（新しい入力欄は無い）。
   余白は var(--sp-*) と em、白は var(--bg)＝ガード10（生 hex / 余白 px）に触れない。
   ================================================================ */
.page-head.hero-p { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-2); align-items: start; margin-bottom: var(--sp-3); }
.hero-p .hero-ico { width: 64px; height: 64px; border-radius: 16px; margin-top: .45em; }
.hero-p .hero-ico .ico { width: 34px; height: 34px; }
.hero-p .hero-main { min-width: 0; }
.hero-p h1 { margin: 0 0 .15em; }
.hero-catch { font-size: 1.28rem; font-weight: 800; color: var(--ink); line-height: 1.45; margin: 0 0 .35em; }
.hero-p .lead { margin: 0 0 .6em; }
.hero-routes { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1em; }
.hero-route {
  flex: 1 1 16rem; display: flex; align-items: center; gap: .75em; min-width: 0;
  border: 1px solid var(--brand-100); border-radius: 12px; padding: .65em .9em;
  background: var(--bg); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.hero-route:hover { border-color: var(--brand); text-decoration: none; box-shadow: 0 4px 14px rgba(30, 58, 138, .08); }
.hero-route.is-primary { border-color: var(--brand); background: var(--brand-50); }
.hero-route .ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--brand); }
.hero-route-text { min-width: 0; }
.hero-route-text b { display: block; font-size: .95rem; color: var(--brand); line-height: 1.4; }
.hero-route-text span { display: block; font-size: .8rem; color: var(--soft); line-height: 1.45;
  word-break: keep-all; overflow-wrap: break-word; }
.hero-alt { font-size: .9rem; margin: .7em 0 0; }
@media (max-width: 720px) {
  .page-head.hero-p { grid-template-columns: 1fr; gap: .6em 0; }
  .hero-p .hero-ico { width: 52px; height: 52px; border-radius: 13px; margin-top: 0; }
  .hero-p .hero-ico .ico { width: 28px; height: 28px; }
  .hero-catch { font-size: 1.1rem; }
}

/* ---- 自作フォーム（templates/form.html・FORMS.md・2026-09-17）---- */
/* 既存の .cf-field { display: flex } が hidden 属性を上書きして、隠したはずの項目が見えていた（2026-09-17 実測） */
.cform [hidden] { display: none; }
.cf-help { font-size: .82rem; color: var(--soft); margin: 0; line-height: 1.7; }
/* 選択肢は横並び（2026-09-18 田中さん）。増えたり長くなったら wrap で自然に折り返る＝定義側に設定を足さない */
.cf-radios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
/* 見出しと補足は幅100%＝選択肢の横に回り込ませない */
.cf-radios > legend, .cf-radios > .cf-help { flex: 0 0 100%; width: 100%; }
/* 送信中のボタン（2026-09-18）＝動きが無いと止まって見え、再クリック・再読み込みを招く */
.btn.is-sending { cursor: progress; opacity: .9; }
.btn.is-sending::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .6em; vertical-align: -.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ff-spin .8s linear infinite;
}
@keyframes ff-spin { to { transform: rotate(360deg); } }
/* 依頼の枠（1件目・2件目…）と「もう1件追加する」（2026-09-18・Web更新依頼） */
.cf-card { border: 1px solid var(--line); border-radius: var(--sp-15); padding: var(--sp-2) var(--sp-2) 0; margin: 0 0 var(--sp-3); background: var(--bg-soft); }
.cf-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-15); margin-bottom: var(--sp-2); }
.cf-card-head h2 { font-size: 1.05rem; margin: 0; color: var(--brand); }
.cf-cancel { background: none; border: 0; padding: 0; color: var(--soft); font-size: .85rem; text-decoration: underline; cursor: pointer; }
.cf-add { margin: 0 0 var(--sp-3); }
/* 行を足していく表（2026-10-06・type: rows）。PC＝列の名前を上に1回だけ出し、1組を1行に横並び。
   スマホ＝1組を枠にして「1組目｜削除」の下に欄を縦に並べ、欄ごとに名前を出す（横並びだと 390px で欄が狭すぎる） */
.cf-rows { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cf-rows > legend { font-size: .88rem; font-weight: 700; color: var(--brand); margin-bottom: .4em; padding: 0; }
.cf-rows-head, .cf-rows-row { display: flex; align-items: center; gap: var(--sp-1); }
.cf-rows-head { font-size: .82rem; color: var(--soft); }
.cf-rows-head > span:not(.cf-rows-no):not(.cf-rows-act) { flex: 1 1 0; min-width: 0; }
.cf-rows-no { flex: 0 0 1.75em; text-align: center; font-size: .88rem; color: var(--soft); }
.cf-rows-act { flex: 0 0 3.5em; text-align: center; }
.cf-rows .cf-rows-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .25em; font-weight: 400; color: inherit; }
.cf-rows-label { display: none; font-size: .82rem; color: var(--soft); }
.cf-rows-del { background: none; border: 0; padding: 0; min-height: 2.75rem; color: var(--soft); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.cf-rows-add { align-self: flex-start; }
.cf-rows-full { font-size: .82rem; color: var(--soft); margin: 0; line-height: 1.7; }
/* 不備は該当の1欄だけ赤く（既定の「欄の箱の入力欄をすべて赤」だと表の全部が赤くなる） */
.cf-field.is-error .cf-rows input:not([aria-invalid="true"]) { border-color: var(--line); box-shadow: none; }
@media (max-width: 600px) {
  .cf-rows-head { display: none; }
  .cf-rows-row { flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--sp-15); padding: var(--sp-1) var(--sp-15) var(--sp-15); background: var(--bg-soft); }
  .cf-rows-no { flex: 1 1 auto; order: 0; text-align: left; font-weight: 700; color: var(--brand); }
  .cf-rows-no::after { content: "組目"; }
  .cf-rows-act { order: 1; flex: 0 0 auto; }
  .cf-rows .cf-rows-cell { order: 2; flex: 0 0 100%; }
  .cf-rows-label { display: block; }
}
/* 日付＝営業日のカレンダー（2026-09-18）。選べない日は薄く、押すと理由が下に出る */
.cf-date { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); width: 100%;
  border: 1px solid var(--line); border-radius: var(--sp-1); background: var(--bg); color: var(--ink);
  padding: var(--sp-15) var(--sp-2); font: inherit; text-align: left; cursor: pointer; }
.cf-date:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 1px; }
.cf-date-text { font-weight: 700; }
.cf-date-change { font-size: .85rem; color: var(--brand-700); text-decoration: underline; }
.cf-cal { border: 1px solid var(--line); border-radius: var(--sp-15); background: var(--bg); padding: var(--sp-15);
  margin-top: var(--sp-1); max-width: 24rem; }
.cf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.cf-cal-nav { border: 1px solid var(--line); background: var(--bg); border-radius: var(--sp-1); width: 2.25rem; height: 2.25rem;
  font-size: 1.1rem; cursor: pointer; color: var(--ink); }
.cf-cal-nav:disabled { opacity: .3; cursor: default; }
.cf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; text-align: center; }
.cf-cal-dow { font-size: .75rem; color: var(--soft); padding: .25rem 0; }
.cf-cal-day { border: 0; background: none; padding: .55rem 0; border-radius: var(--sp-1); font: inherit; font-size: .95rem;
  color: var(--ink); cursor: pointer; }
.cf-cal-day:hover { background: var(--brand-50); }
.cf-cal-day.is-off { opacity: .35; cursor: help; }
.cf-cal-day.is-off:hover { background: none; }
.cf-cal-day.is-sel { background: var(--brand); color: var(--bg); font-weight: 700; }
.cf-cal-why { min-height: 1.4em; font-size: .85rem; color: var(--ink); margin: var(--sp-1) 0 0; }
.cf-cal-note { font-size: .8rem; color: var(--soft); margin: .25rem 0 0; }
@media (prefers-reduced-motion: reduce) { .btn.is-sending::after { animation-duration: 2.4s; } }
.cf-radios legend { font-size: .88rem; font-weight: 700; color: var(--brand); margin-bottom: .4em; padding: 0; }
/* ○と文字は1行に固定（2026-09-28 §8.7 L2）＝以前の flex-wrap: wrap は、長い選択肢で ○ だけが前の行に残り文字が次の行へ落ちた
   （スマホのお問い合わせ・困りごと受付で実測）。文字は .cf-radio-text の1箱にし、箱の中で折り返す */
.cf-radio { display: flex; align-items: flex-start; gap: var(--sp-1); font-size: .95rem; font-weight: 400; color: inherit; cursor: pointer; }
.cf-radio input { width: 18px; height: 18px; margin: .2em 0 0; flex: 0 0 auto; }
.cf-radio-text { display: block; min-width: 0; }
/* 選択肢の下の1行の説明（2026-09-25・NTT 公式の申込の「選択肢の下に説明」だけ取り入れた）。説明のある選択肢は1行を占める */
.cf-radio:has(.cf-opt-help) { flex: 0 0 100%; }
.cf-opt-help { display: block; font-size: .8rem; color: var(--soft); line-height: 1.6; }
/* 質問の下の外部リンク（2026-09-25）＝別タブで開く。複数は「／」で区切る */
.cf-links a { color: var(--brand-700); text-decoration: underline; }
.cf-links a::after { content: "↗"; font-size: .8em; margin-left: .15em; }
.cf-links a + a::before { content: "／"; color: var(--soft); margin: 0 .4em; text-decoration: none; display: inline-block; }
/* 添付＝ブラウザ既定の「Choose Files / No file chosen」をやめてボタンに（2026-09-28 §8.7 L6）。input は見えなくするだけで
   キーボードでは届く（ボタンの直前にあるので :focus-visible + でボタンに枠を出す）。選んだ名前は .cf-files に並ぶ */
.cf-field { position: relative; }
.cf-file input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; opacity: 0; }
.cf-file input[type="file"]:focus-visible + .cf-file-btn { outline: 2px solid var(--brand-700); outline-offset: 2px; }
.cf-file-btn { align-self: flex-start; }
/* 不備＝欄の直下に赤字・枠を赤に（2026-09-28 §8.7 L1）。以前はボタン横の .cf-status だけで、フォーカスした欄からは見えなかった */
.cf-field.is-error input:not([type="file"]), .cf-field.is-error select, .cf-field.is-error textarea, .cf-field.is-error .cf-date,
.cf-field.is-error .cf-file-btn { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.cf-error { color: var(--danger); font-weight: 700; font-size: .85rem; margin: 0; line-height: 1.6; }
.cf-error::before { content: "！"; display: inline-block; margin-right: .25em; }
.cf-radios > .cf-error { flex: 0 0 100%; width: 100%; }
.cf-error-summary { border: 2px solid var(--danger); border-radius: var(--sp-15); padding: var(--sp-15) var(--sp-2); margin: 0 0 var(--sp-2); background: var(--bg); }
.cf-error-summary:focus { outline: none; box-shadow: 0 0 0 3px var(--danger-bg); }
.cf-error-summary p { margin: 0 0 var(--sp-1); font-weight: 700; color: var(--danger); }
.cf-error-summary ul { margin: 0; padding-left: 1.2em; font-size: .9rem; }
.cf-error-summary a { color: var(--danger); text-decoration: underline; }
/* 入力の目安（定義の minutes・2026-09-28 §8.7 L3） */
.cf-minutes { font-size: .85rem; color: var(--soft); margin: 0 0 var(--sp-1); }
/* 折りたたみの補足（定義の details_md・2026-09-28 §8.7 L3） */
.cf-details { border: 1px solid var(--line); border-radius: var(--sp-15); padding: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-3); font-size: .92rem; }
.cf-details summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: var(--sp-1) 0; }
.cf-details .prose { margin-top: var(--sp-1); }
.cf-details .prose > :last-child { margin-bottom: var(--sp-1); }
/* スマホ用＝「次は」の1行と、側面の注意書きの写し（PC では隠す） */
.cf-step-hint, .cf-tip { display: none; }
.cf-files { margin: 0; padding-left: 1.2em; font-size: .85rem; color: var(--soft); }
.cf-note p { margin: 0 0 var(--sp-1); }
.cf-turnstile { margin: 0 0 var(--sp-2); min-height: 65px; }

/* ---- 段階（2026-09-24・FORMS.md §8.3）＝1画面に1つの話題・進み具合を名前つきで先に見せる ---- */
.cf-steps { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); counter-reset: none; }
.cf-steps li { display: flex; align-items: center; gap: var(--sp-1); font-size: .88rem; color: var(--soft); }
.cf-steps-btn { display: flex; align-items: center; gap: var(--sp-1); background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.cf-steps-btn:disabled { cursor: default; }
.cf-steps-btn:not(:disabled):hover .cf-steps-name { text-decoration: underline; }
.cf-steps-btn:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 4px; }
.cf-steps li + li::before { content: "›"; color: var(--line); font-size: 1.1rem; margin-right: var(--sp-1); }
.cf-steps-no { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--bg); font-size: .8rem; font-weight: 700; color: var(--soft); }
.cf-steps li.is-current { color: var(--brand); font-weight: 700; }
.cf-steps li.is-current .cf-steps-no { background: var(--brand); border-color: var(--brand); color: var(--bg); }
.cf-steps li.is-done .cf-steps-no { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); }
.cf-step-title { font-size: 1.2rem; color: var(--brand); margin: 0 0 var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 2px solid var(--brand-100); }
/* 個別リンクで途中の画面から始めた時の1行（FORMS.md §8.6・forms.js が見出しの直後に入れる） */
.cf-carried { margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); }
.cf-step-title:focus { outline: none; }
.cf-step-actions { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.cf-step-actions [data-step-next], .cf-step-actions #ff-submit { margin-left: auto; }
.cf-step-actions .cf-status { flex: 0 0 100%; order: 3; }
/* 確認画面の一覧＝画面ごとに見出し＋「修正する」。値は改行を保つ（備考・依頼の本文） */
.cf-summary { margin: 0 0 var(--sp-3); }
.cf-summary-sec { border: 1px solid var(--line); border-radius: var(--sp-15); padding: var(--sp-2); margin: 0 0 var(--sp-2); background: var(--bg); }
.cf-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-15); margin-bottom: var(--sp-1); }
.cf-summary-head h3 { font-size: 1rem; margin: 0; color: var(--brand); }
.cf-summary-fix { background: none; border: 0; padding: 0; color: var(--brand-700); font-size: .88rem; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.cf-summary dl { display: grid; grid-template-columns: minmax(8em, 14em) 1fr; gap: var(--sp-1) var(--sp-2); margin: 0; }
.cf-summary dt { font-size: .85rem; color: var(--soft); }
.cf-summary dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-summary dt.cf-summary-sub { grid-column: 1 / -1; font-weight: 700; color: var(--ink); margin-top: var(--sp-1); }
/* 控え（2026-09-24）＝送信先の確認・印刷ボタン・受付完了ページの控え */
.cf-mail-note { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--sp-15); padding: var(--sp-15) var(--sp-2); margin: 0 0 var(--sp-2); font-size: .92rem; }
.cf-mail-note b { font-size: 1.05rem; overflow-wrap: anywhere; }
.cf-print-row { margin: 0 0 var(--sp-3); }
/* 送信の次にお願いすること（定義の next_step・2026-09-24）＝受付完了ページで一番目立つ次の一手 */
.cf-next { text-align: left; margin: var(--sp-3) 0; background: var(--bg); border: 2px solid var(--brand);
  border-radius: 12px; padding: var(--sp-2) var(--sp-3); }
.cf-next h2 { font-size: 1.1rem; color: var(--brand); margin: 0 0 var(--sp-1); }
/* スマホでは枠の内側が狭い＝ボタンを折り返せるようにし、枠からはみ出さない（.btn は既定で折り返さない） */
.cf-next .btn { max-width: 100%; white-space: normal; }
@media (max-width: 860px) { .cf-next { padding: var(--sp-2); } }
.cf-copy { text-align: left; margin: var(--sp-3) 0; }
.cf-copy h2 { font-size: 1.1rem; color: var(--brand); margin: 0 0 var(--sp-1); }
@media print {
  /* 印刷・PDF保存＝題名と控えだけを残す（サイトの枠・進み具合・ボタン・同意欄・Turnstile は出さない） */
  .site-header, .site-footer, .crumb, .side, .cf-steps, .cf-step-actions, .cf-note, .cf-turnstile, .cf-minutes, .cf-details, .cf-tip, .cf-step-hint, .cf-error-summary,
  #ff-fallback, [data-print], .cf-print-row, .cf-summary-fix, .thanks-mark, .thanks-box > .cf-actions, .cf-copy > .cf-help,
  .cf-step-confirm > .cf-help { display: none !important; }
  body { background: var(--bg); }
  .layout { display: block; }
  .cf-summary-sec { break-inside: avoid; border-color: var(--soft); }
}
@media (max-width: 600px) {
  /* スマホ＝進み具合は番号の丸を線でつないだ1行に畳む（名前の列は折り返して高さを取るため）。
     名前は画面の見出しに1回だけ出す＝旧「2 / 5　回線を引く場所」の1行は真下の見出しと同じ名前を2度並べていた（2026-09-24 スマホの回）。
     名前は読み上げには残す（見えなくするだけ）。丸は PC と同じく押せる＝当たり判定は丸（32px）の周りの余白まで取って 48px */
  .cf-steps { flex-wrap: nowrap; align-items: center; gap: 0; margin-bottom: var(--sp-2); }
  .cf-steps li { flex: 1 1 0; gap: 0; }
  .cf-steps li:first-child { flex: 0 0 auto; }
  .cf-steps li + li::before { content: ""; flex: 1 1 auto; height: 2px; margin: 0; background: var(--line); }
  .cf-steps li.is-done + li::before { background: var(--brand-100); }
  .cf-steps-btn { padding: var(--sp-1); }
  .cf-steps-no { width: 2rem; height: 2rem; font-size: .9rem; }
  .cf-steps-btn:not(:disabled):active .cf-steps-no { background: var(--brand-100); }
  .cf-steps-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  /* 進み具合は番号だけ＝次に何を聞かれるかを見出しの下に1行（2026-09-28 §8.7 L4）。名前を2度並べない（現在の画面名は見出しに1回） */
  .cf-step-hint { display: block; font-size: .85rem; color: var(--soft); margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); }
  /* 選択肢は縦1列・1行1選択肢・行全体が押せる（2026-09-28 §8.7 L2）。PC は横並び（2026-09-18 田中さん）のまま */
  .cf-radios { flex-direction: column; align-items: stretch; gap: 0; }
  .cf-radio { padding: var(--sp-1) 0; }
  .cf-step-actions { flex-direction: column-reverse; align-items: stretch; }
  .cf-step-actions .btn { justify-content: center; width: 100%; }
  .cf-step-actions [data-step-next], .cf-step-actions #ff-submit { margin-left: 0; }
  .cf-summary dl { grid-template-columns: 1fr; gap: 0; }
  .cf-summary dd { margin-bottom: var(--sp-1); }
}

/* ==========================================================================
   スマホ表示の作法（2026-10-02・DESIGN.md §12 が正本。記号は §12 の表と同じ）
   田中さんが実機で見つけた崩れを、ページごとに直すのではなく全ページ共通の規則にした。
   検査＝tools/check_mobile_layout.py（release.py prepare が全ページで実行する）
   ========================================================================== */

/* W 送り字: 見出し・ボタン・題名・中央寄せの短文は「文節」で折り、行の長さをそろえる。
   最終行に1〜2文字だけ送られる形（「…いたしま／す。」）も、語の途中で割れる形（「立／ち会い」）も防ぐ。
   切れ目は build が HTML に書き込む（tools/phrase.py＝BudouX で文節に分けて <wbr>）。
   keep-all＝<wbr> と句読点のところでだけ折る／balance＝行の長さをそろえる／
   anywhere＝それでも入らない長い英数字だけは最後の手段として折る（はみ出させない）。
   🔴 CSS だけで文節を推測させる形（auto-phrase）は Chrome にしか無く iPhone で効かない。
      keep-all を <wbr> 無しで使うと、区切りの無い複合語を1語扱いして最後の1字だけ送る
      （全 258 ページ × 360/390px 実測＝送り字 374 件）。∴ 切れ目は build で書く
   li:has(> a:only-child)＝リンクだけの項目（一覧の題名）。題名なので見出しと同じに折る */
h1, h2, h3, h4, .lead, .btn, summary, legend, figcaption, label, .card-title, .sym-label,
.hero-v2 p, .hero-catch, .more-link, .unresolved-band, .unresolved-box, .solution-cta, .prose .btn-center, .prose .banner-link,
.prospect-band p, li:has(> a:only-child), .solutions-list a {
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
/* W 送り字: 本文は普通に折るが、最終行に「す。」だけが残る形を避ける（Chrome 117+・Safari 26+。古い端末は従来どおり） */
p, li, dd, td, th, blockquote, small, label, .foot-addr { text-wrap: pretty; }

/* コラムの読み手・読む時間・書き手（CONTENT-TEMPLATE §2.12.2・2026-10-03） */
.col-meta { margin: var(--sp-1) 0 0; color: var(--soft); font-size: .88rem; }
.col-sep { margin: 0 .5em; color: var(--line); }
/* スマホでは読み手と読む時間を2行に分ける（1行に入らず「｜」が次の行の頭に来ていた・2026-10-03） */
@media (max-width: 600px) { .col-readers { display: block; } .col-sep { display: none; } }
.col-filter { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-2); }
.col-for { display: block; }
/* 書き手の囲み（2026-10-09 田中さん「この見せ方に統一」→ 同日「名前を目立たせず・文字を詰めて・縦を低く」→「太字をやめて同じ大きさに」）＝
   見出し／名前と社名・役職（1行）／紹介文。全部同じ大きさ・太字なし＝本文より小さく控えめに。下の問い合わせの箱より目立たせない。枠は確認欄と同じ線と角丸 */
.col-author { margin: var(--sp-3) 0 0; padding: var(--sp-1) var(--sp-2) .6rem; max-width: 760px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--soft); font-size: .82rem; line-height: 1.65; }
.col-author p { margin: 0; }
.col-author .col-author-name { margin-top: .15em; }
.col-author .col-author-person { color: var(--ink); margin-right: .8em; }
.col-author .col-author-bio { margin-top: .3em; }
/* 下書きの帯（確認用ビルドだけに出る・build.py GUIDE_PREVIEW_DRAFTS）＝本番の記事と取り違えないこと */
.col-draft { margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--danger-line); background: var(--danger-bg); color: var(--ink); font-size: .9rem; }
.col-draft b { display: block; color: var(--danger); }
.col-draft ul { margin: var(--sp-1) 0 0; }
/* 新しい経営者に届ける見せ方の部品（CONTENT-TEMPLATE §2.12.3・2026-10-03）。色は自社の青系とマーカーの黄だけ＝警告色を使わない */
.col-points { margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); max-width: 760px;
  background: var(--brand-50); border-left: 4px solid var(--brand); border-radius: 0 10px 10px 0; }
.col-points-title { margin: 0 0 var(--sp-1); color: var(--brand); font-size: .95rem; font-weight: 700; }
.col-points ul { margin: 0; padding-left: 1.2em; }
.col-points li { margin: .3em 0; line-height: 1.7; }
/* 確認の一覧をチェック欄の見た目に（本文で <div class="checklist" markdown="1"> に包む）。欄は飾り＝入力ではない */
.prose .checklist ul { list-style: none; margin: 1em 0; padding: var(--sp-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; }
.prose .checklist li { position: relative; margin: .5em 0; padding-left: 2em; }
.prose .checklist li::before { content: ""; position: absolute; left: .15em; top: .3em; width: 1.05em; height: 1.05em;
  border: 2px solid var(--brand); border-radius: 4px; background: var(--bg); }
.prose mark { background: linear-gradient(transparent 58%, var(--marker) 58%); color: inherit; padding: 0 .1em; }
.col-cta { margin: var(--sp-3) 0 0; padding: var(--sp-3); max-width: 760px;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 12px; }
.col-cta h2 { margin: 0 0 var(--sp-1); color: var(--brand); font-size: 1.15rem; line-height: 1.5; }
.col-cta p { margin: 0 0 var(--sp-2); line-height: 1.8; }
.col-cta .col-cta-stance { font-weight: 700; }
.col-cta .col-cta-btn { margin: 0; }
.col-cta .col-cta-place { margin: var(--sp-2) 0 0; color: var(--soft); font-size: .85rem; }
@media (max-width: 600px) { .col-points, .col-cta { padding: var(--sp-2); } .col-cta .btn { display: flex; justify-content: center; } }

/* 単位を割らない: 住所の「番地」と「建物名」など、途中で切ると意味が崩れるまとまり。
   build.py の seg フィルタが空白区切りで <span class="seg"> に包む（「…ビル8／階」を防ぐ） */
.seg { display: inline-block; max-width: 100%; }

@media (max-width: 860px) {
  /* Z 入力欄は 16px 以上。iOS Safari は 16px 未満の入力欄を触ると画面を拡大し、拡大したまま戻らない
     （2026-10-02 実機＝検索窓 15.2px を触った後、余白が 17px に縮み現在地のタブが画面外に切れて見えた） */
  .searchbar #q, #faq-product, .chat-input input,
  .cf-field input, .cf-field select, .cf-field textarea, input, select, textarea { font-size: 1rem; }

  /* F 固定ボタン（トップへ戻る＝右下 22px＋44px）の下に文字を潜らせない。ページの最後に逃げ場を作る */
  .foot-copy { padding-bottom: calc(var(--sp-5) + var(--sp-2)); }
}

@media (max-width: 600px) {
  /* N2 ナビは 4 項目が横スクロール無しで画面に収まり、左右の余白がそろう（2026-10-03 実機＝
     「手続き・書式」が右端 9px まで寄り、左 24px と不揃い）。4 項目の文字幅の合計が 337px で、
     360px 端末の幅 328px に入らなかった＝余白の調整では直らない。∴ スマホだけ「お困りごと」と短く呼ぶ
     （PC は「お困りごとから探す」のまま）。両端を本文の線（24px）にそろえて間を均等に割る */
  .nav-long { display: none; }
  /* 5 項目目（実務ガイド・2026-10-09）はスマホのナビに出さない＝4 項目でも余白が無い（上の N2）。
     スマホはトップの「社内 IT の実務ガイド」の節とフッターから届く */
  .global-nav .nav-wide-only { display: none; }
  .global-nav { justify-content: space-between; gap: 0; }
  .global-nav a { letter-spacing: 0; }
  /* S ボタン: 縦に並ぶボタンは画面の幅いっぱいでそろえる（2026-10-03 実機＝左寄せで幅の違うボタンが
     2 つ重なり、見出しと本文は左、ボタンだけ別の幅で浮いていた）。押しやすさ（指の届く面積）も上がる */
  .prospect-actions, .unresolved-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .prospect-actions .btn, .unresolved-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 389px) {
  /* N2 の続き: 360〜375px 級は字を 1 段だけ小さくして 4 項目を収める（13.6px → 12.8px）。
     375px（iPhone SE・mini）でも 13.6px のままだと 8px 足りなかった（実測） */
  .global-nav a { font-size: .8rem; }
}