*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--bg);
  line-break: strict;
}
/* 見出しは文節で折り返す。「契約前にどこまで確／認できるのか」のように
   語の途中で改行されるのを避ける。未対応ブラウザは既定のまま（害はない） */
h1, h2, h3 { line-height: 1.5; letter-spacing: 0; font-weight: 700; text-wrap: pretty;
  word-break: auto-phrase; margin: 0; }
/* 見出しと本文の差が小さいと、ページ全体が「同じ文章の塊」に見える。
   段差をはっきりつける（1.0 の指摘1・4への対応） */
h1 { font-size: var(--fs-h1); line-height: 1.32; letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); }
p, ul, ol, dl { margin: 0; }
ul, ol { padding-left: 1.35em; }
a { color: var(--accent); text-underline-offset: .18em; }
/* キーボード操作で「いまどこにいるか」が分かること。
   ナビ・ブランド・出典リンクは下線を消しているため、既定の輪郭だけでは見失う。 */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
/* 本文へスキップ。ふだんは見えず、Tab で最初に現れる。
   スクリーンリーダー・キーボード利用者が毎ページ5本のナビを読み飛ばさずに済む */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-1);
  font-size: 15px; text-decoration: none;
}
.skip-link:focus { top: var(--sp-2); color: var(--accent-ink); }
a:hover { color: var(--accent-hov); }
small, .note { font-size: 13px; line-height: 1.7; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }



/* --- layout: §9.4 ページ種別ごとに幅を変える --- */
.wrap-detail { max-width: 700px; margin: 0 auto; padding: 0 var(--sp-4); }
.wrap-list   { max-width: 820px; margin: 0 auto; padding: 0 var(--sp-4); }

/* 個別ページ: ≥1024px で非対称2カラム（本文700 + サイド260） */
@media (min-width: 1024px) {
  .detail-grid {
    display: grid;
    grid-template-columns: 700px 260px;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
    align-items: start;
  }
  .detail-grid > .wrap-detail { max-width: none; padding: 0; }
  .side { position: sticky; top: 72px; font-size: 13px; color: var(--ink-3); }
}
@media (max-width: 1023px) { .side { display: none; } }

/* --- header / footer --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  max-width: 1060px; margin: 0 auto; padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: baseline; gap: var(--sp-4);
}
/* サイト名が「探偵事務所し／らべ」と割れていた。名前は割らない */
.site-header a.brand { font-weight: 700; text-decoration: none; color: var(--ink); white-space: nowrap; }
/* WCAG 2.5.8（AA）はタップ領域に 24×24px を求める。文字だけだと 26px しかなく余裕がない */
.site-header nav a { font-size: 14px; color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 28px; }
.site-header nav a:hover { text-decoration: underline; }

.site-footer {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  font-size: 13px; line-height: 1.8; color: var(--ink-2);
}
.site-footer .inner { max-width: 1060px; margin: 0 auto; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.site-footer li a { display: inline-flex; align-items: center; min-height: 28px; }

main { padding-top: var(--sp-6); }
/* 帯で区切るページでは、main 自身の余白を持たせない（帯が余白を持つ） */
main:has(> .band) { padding-top: 0; }
main > .band:first-child { padding-top: var(--sp-7); }

/* --- sections: 区切りは影ではなく1px罫線（§9.4） --- */
section { margin-top: var(--sp-6); }
section.spaced { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
/* 直前が信頼の帯（下罫線あり）なので、罫線と余白を二重にしない。
   比較表をできるだけ上に出すため、最初のセクションだけ詰める */
section.spaced.first { margin-top: var(--sp-5); padding-top: 0; border-top: 0; }
section > h2 { margin-bottom: var(--sp-3); }

.breadcrumb { font-size: 13px; color: var(--ink-3); margin-bottom: var(--sp-4); }
.breadcrumb a { color: var(--ink-2); }

/* --- agency header --- */
.agency-head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.avatar {
  width: 64px; height: 64px; flex: 0 0 64px;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--bg-3); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.meta-row { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: 13px; color: var(--ink-3); margin-top: var(--sp-2); }

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin-top: var(--sp-4); }
.tags li {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 1px 10px;
}

/* --- CTA: アクセントはCTAとリンクのみ。影・グラデ・アニメーションなし --- */
.cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent); border: 1px solid var(--accent);
  color: var(--accent-ink); text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  padding: 11px 20px; border-radius: var(--r-1);
  transition: background-color 120ms linear;
}
.cta:hover { background: var(--accent-hov); color: var(--accent-ink); }
.cta svg { flex: 0 0 auto; }
.disclosure { font-size: 13px; color: var(--ink-3); margin-bottom: var(--sp-2); }

/* モバイルのみ固定CTAバー（§14.1 確定） */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--bg); border-top: 1px solid var(--line-2);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  }
  .sticky-cta .who { font-size: 13px; color: var(--ink-3); min-width: 0; }
  .sticky-cta .who strong { display: block; color: var(--ink); font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body { padding-bottom: 88px; }
}

/* --- 強み / 課題: 隣接させる（逸脱#4の対で読ませる要件） --- */
.pair { border: 1px solid var(--line); border-radius: var(--r-1); }
.pair > div { padding: var(--sp-4) var(--sp-5); }
.pair > div + div { border-top: 1px solid var(--line); }
.pair h3 { font-size: 15px; margin-bottom: var(--sp-2); }
.pair ul { list-style: none; padding: 0; }
.pair li { margin-bottom: var(--sp-3); padding-left: 1.5em; position: relative; }
.pair li:last-child { margin-bottom: 0; }
.pair li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pair .good li::before { content: "＋"; color: var(--ok); }
.pair .bad  li::before { content: "－"; color: var(--caution); }
.evidence { display: block; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); margin-top: 2px; }
/* 出典のホスト名は長い（www.keishicho.metro.tokyo.lg.jp など）。
   区切りがないと折り返せず、375px で 3px はみ出していた。
   anywhere は「入りきらないときだけ」折るので、収まる出典は今までどおり1行のまま */
.evidence a { color: var(--ink-3); overflow-wrap: anywhere; }

/* --- 定義リスト（基本情報） --- */
.facts { border: 1px solid var(--line); border-radius: var(--r-0); }
.facts .row { display: flex; gap: var(--sp-4); padding: 10px var(--sp-4); font-size: 14px; line-height: 1.65; }
.facts .row + .row { border-top: 1px solid var(--line); }
.facts dt { flex: 0 0 128px; color: var(--ink-2); }
.facts dd { margin: 0; flex: 1 1 auto; min-width: 0; }
.facts .none { color: var(--ink-3); }

/* --- 料金 --- */
.plan { border: 1px solid var(--line); border-radius: var(--r-1); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.plan .kind { font-size: 12.5px; color: var(--ink-2); background: var(--bg-3); border-radius: var(--r-1); padding: 1px 8px; }
.plan .amount { font-size: 20px; font-weight: 700; margin-top: var(--sp-2); }
.plan .amount .unit { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.badge-disclosure { font-size: 13px; color: var(--ink-2); background: var(--accent-bg); border-radius: var(--r-1); padding: 2px 10px; display: inline-block; }

/* --- 一覧行（RankingRow の Phase 0 版） --- */
.rows { list-style: none; padding: 0; }
.rows li + li { margin-top: var(--sp-3); }
.row-link {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-1);
  padding: var(--sp-4); text-decoration: none; color: inherit;
  transition: background-color 120ms linear;
}
.row-link:hover { background: var(--bg-2); color: inherit; }
.row-link .avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 16px; }
.row-link > span { min-width: 0; flex: 1 1 auto; }
.row-link .name { display: block; font-weight: 700; }
.row-link .lead { display: block; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin-top: var(--sp-1); }

/* --- 出典・更新履歴 --- */
.sources { font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.sources ul { padding-left: 1.2em; }
.empty { font-size: 13.5px; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r-1); padding: var(--sp-4); }

.steps { list-style: none; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; padding-left: 2.2em; position: relative; margin-bottom: var(--sp-3); font-size: 14.5px; line-height: 1.75; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: .1em;
  width: 1.6em; height: 1.6em; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-2); }
.steps b { display: block; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* 紹介サービスページ: 最初に読ませたい注意書き。色で驚かせず、罫線で区切る */
.callout { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0; margin-top: var(--sp-5); }
.callout h2 { margin-bottom: var(--sp-3); }
.callout p + p { margin-top: var(--sp-3); }
ul.plain { list-style: none; padding: 0; }
ul.plain li { padding: 10px 0; border-bottom: 1px solid var(--line); }

/* --- 開示スコア --- */
.bar { display: block; height: 8px; background: var(--bg-3); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-2); }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
/* 比較表の中では、その列の群の色を使う。数値だけの表に、量の手触りを与える */
.bar.sm { height: 8px; margin-top: 6px; }
.matrix td[data-group] .bar > span { background: var(--gc, var(--accent)); }
.gscore { margin-top: var(--sp-5); }
.gscore h3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  font-size: 15px; border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); }
.gscore h3 .num { font-weight: 400; color: var(--ink-2); font-size: 14px; }
.gscore .facts { border: 0; margin-top: var(--sp-2); }
.gscore .facts .row { padding: 8px 0; align-items: flex-start; }
.gscore .facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.gscore .facts dd .evidence { flex-basis: 100%; margin-top: 0; }
.pts { color: var(--ink-3); font-size: 13px; }
h2 .num.big { font-size: 30px; font-weight: 700; margin-left: var(--sp-2); }

/* 開示の状態。★赤を使わない。「記載を確認できず」は落ち度ではない。
   色が見えない環境でも区別がつくよう、記号（●◐○—）を必ず添える（WCAG 1.4.1）。 */
.mark { display: inline-flex; align-items: center; gap: 5px; min-width: 5.4em; font-size: 12.5px; line-height: 1.7;
  border: 1px solid var(--line-2); border-radius: var(--r-1); padding: 2px 8px; color: var(--ink-2); }
.mark::before { font-size: 11px; line-height: 1; }
.mark.m-verified, .mark.m-range {
  border-color: var(--st-open); color: var(--st-open); background: color-mix(in srgb, var(--st-open) 7%, transparent); }
.mark.m-verified::before, .mark.m-range::before { content: "\25CF"; }        /* ● */
.mark.m-partial { border-color: var(--st-part); color: var(--st-part);
  background: color-mix(in srgb, var(--st-part) 7%, transparent); }
.mark.m-partial::before { content: "\25D0"; }                                 /* ◐ */
.mark.m-undisclosed { border-color: var(--st-closed); color: var(--st-closed); }
.mark.m-undisclosed::before { content: "\25CB"; }                             /* ○ */
.mark.m-not_found { border-color: var(--line-2); color: var(--st-none); }
.mark.m-not_found::before { content: "\2014"; }                               /* — */
.mark.m-unknown, .mark.m-not_applicable { border-style: dashed; color: var(--st-none); }
.mark.m-unknown::before, .mark.m-not_applicable::before { content: "\2014"; }

/* --- マトリクス: 横スクロールに逃げず、狭い画面では行をブロック化する --- */
.matrix table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* 表は容器より広くなりがち。帯の内側余白ぶんを取り返して、左右を揃える */
@media (min-width: 768px) { .band > .inner > section > .matrix-lens,
  .band > .inner > section > .matrix { margin-inline: calc(var(--sp-4) * -1); } }
.matrix caption { caption-side: top; text-align: left; font-size: 13px; line-height: 1.7;
  color: var(--ink-3); padding-bottom: var(--sp-3); }
.matrix th, .matrix td { border: 1px solid var(--line); padding: 14px 14px; text-align: left; vertical-align: top; }
/* 記事の表は列が多い。トップの比較表ほど余白を取れない */
.guide .matrix th, .guide .matrix td { padding: 10px 12px; }
/* 行を目で追えるようにする。1行が5列にまたがるので、縞と当たりが要る */
.matrix tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.matrix tbody tr:hover td, .matrix tbody tr:hover th { background: var(--accent-bg); }
/* 事務所の列が主役。順位・名前・スコアの3段を、大きさで区別する。
   ★最小幅はトップの開示マトリクスにだけ効かせる。
     記事の表にも効かせると、列が多い表（拠点・届出番号・出典）が画面からはみ出す。 */
/* 事務所名が「HAL／探偵／社」と3行に割れないだけの幅は、どの表でも確保する */
.matrix tbody th { background: var(--bg-2); min-width: 7.5em; }
.matrix table[data-filterable] tbody th { min-width: 176px; }
.matrix tbody th a { font-size: 16px; }
/* 縦にスクロールしても、どの列を見ているか分かるように見出しを残す。
   サイトヘッダ（56px）の下に貼りつく */
.matrix thead th { background: var(--bg-2); font-size: 13px; font-weight: 700; white-space: nowrap;
  position: sticky; top: 56px; z-index: 5; box-shadow: 0 1px 0 var(--line); }
/* 列のかたまりを示す帯。順位ではなく「どの群か」を示すためのもの。
   ★群は5つある。4つに丸めない（data/criteria.yml が配点の単位にしている） */
.matrix thead th[data-group] { border-top: 3px solid var(--gc, var(--line-2)); }
.matrix td[data-group] { border-left: 3px solid color-mix(in srgb, var(--gc, var(--line)) 22%, transparent); }
.matrix [data-group="cost"]        { --gc: var(--grp-cost); }
.matrix [data-group="exit"]        { --gc: var(--grp-exit); }
.matrix [data-group="identity"]    { --gc: var(--grp-identity); }
.matrix [data-group="deliverable"] { --gc: var(--grp-deliverable); }
.matrix [data-group="contact"]     { --gc: var(--grp-contact); }
.matrix tbody th a { font-weight: 700; }
.matrix .score { display: inline-block; margin-left: var(--sp-2); font-size: 16px; font-weight: 700; }
.matrix .of { color: var(--ink-3); font-weight: 400; font-size: 12px; }

/* --- スマホ: 1社1カードにする -------------------------------------------
   HTML は表のまま。Google はモバイル版を基準に読むので、
   行を消したり JS で作り直したりしない。見せ方だけ変える。 */
@media (max-width: 767px) {
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix caption { display: block; width: 100%; }
  .matrix table, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix tr { border: 1px solid var(--line-2); border-radius: var(--r-2);
    margin-bottom: var(--sp-5); overflow: hidden; background: var(--bg); }
  .matrix th, .matrix td { border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .matrix tbody th { background: var(--bg-2); padding: var(--sp-3) 12px; }
  .matrix tr:last-child { margin-bottom: 0; }
  /* カードの導線。事務所名のすぐ下に、幅いっぱいで置く（44px） */
  .matrix .row-cta { display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: 0 2px; font-size: 14px; font-weight: 700; text-decoration: none; }
  .matrix .row-cta::after { content: "\203A"; font-size: 20px; color: var(--ink-3); }
}
/* 広い画面ではカード末尾の導線を出さない。事務所名そのものがリンクになっている */
@media (min-width: 768px) { .matrix .row-cta { display: none; } }

/* --- ボタン。**主導線だけに使う。**押すものと読むものを見分けられるように ---- */
/* ===== ボタンの階層 =======================================================
   Primary   8社を比較する      塗り・48px
   Secondary 調べ方を見る       枠・48px
   Card      詳細を見る         44px・カード内
   External  公式サイトを開く   枠＋外部アイコン（事務所ページのみ）
   ★役割ごとに見た目を変える。増やすときは、この4つのどれかに入れる。 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5); border-radius: var(--r-2); text-decoration: none;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15.5px;
  border: 1px solid var(--accent); box-shadow: var(--sh-1); }
.btn:hover { background: var(--accent-hov); border-color: var(--accent-hov); color: var(--accent-ink); }
.btn::after { content: "\2193"; font-size: 16px; }
.btn.go::after { content: "\203A"; font-size: 18px; }
.btn-2 { background: var(--bg); color: var(--accent); border-color: var(--line-2); box-shadow: none; }
.btn-2:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.btn-2::after { content: "\203A"; font-size: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (max-width: 600px) { .btn-row { gap: var(--sp-2); } .btn-row .btn { flex: 1 1 100%; } }

/* ===== レイアウトのリズム =================================================
   区切りを1px罫線だけに頼ると、ページ全体が1本の灰色の柱に見える。
   全幅の帯（band）で背景を変え、セクションの切れ目を面で示す。 */
.band { padding-block: var(--sp-8); }
.band + .band { padding-top: var(--sp-8); }
.band-2 { background: var(--bg-2); border-block: 1px solid var(--line); }
.band-tight { padding-block: var(--sp-6); }
.band > .inner { max-width: 1060px; margin: 0 auto; padding-inline: var(--sp-4); }
.band > .inner.narrow { max-width: 820px; }
@media (max-width: 600px) { .band { padding-block: var(--sp-6); } }

/* セクションの見出し。目・見出し・説明の3点セットで統一する */
.sec-head { margin-bottom: var(--sp-5); }
/* 帯の中の見出しは中央。記事本文の見出しは左のまま（読む順路を折らない） */
.band > .inner > section > .sec-head { text-align: center; }
.band > .inner > section > .sec-head .sub { max-width: 46em; margin-inline: auto; }
.sec-head .eyebrow { display: block; font-size: var(--fs-cap); font-weight: 700;
  letter-spacing: .08em; color: var(--accent); margin-bottom: var(--sp-2); }
.sec-head h2 { margin: 0; }
.sec-head .sub { margin-top: var(--sp-2); color: var(--ink-2); font-size: 15px; line-height: 1.8; }

/* ===== カード ============================================================
   ★情報をまとめる必要がある場所だけ。飾りで増やさない。 */
.card { background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: var(--sp-5); box-shadow: var(--sh-1); }
.card-grid { display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* 統計カード。★検証できる数字だけを出す。累計利用者数のような数は持っていない */
.stats { list-style: none; padding: 0; display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(3, 1fr); margin: var(--sp-5) 0 0; }
.stats .card { padding: var(--sp-4); text-align: left; }
/* ★数字をビジュアルの起点にする。本文の延長サイズでは、資産にならない */
.stats .n { display: block; font-size: var(--fs-display); font-weight: 700;
  line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--accent); }
.stats .n .u { font-size: .38em; letter-spacing: 0; margin-left: .12em; color: var(--ink-2); font-weight: 700; }
.stats .n.txt { font-size: clamp(22px, 1rem + 1.3vw, 30px); letter-spacing: -.02em; }
.stats .k { display: block; font-size: var(--fs-cap); color: var(--ink-2); margin-top: var(--sp-2); line-height: 1.6; }
.stats .card { padding: var(--sp-5); }
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; gap: var(--sp-2); }
  .stats .card { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .stats .n { font-size: 22px; flex: none; }
  .stats .k { margin-top: 0; }
}

/* 記事カード。★上部を色面にして、4枚並んだときに「一覧」ではなく
   「メディアのコンテンツ群」に見えるようにする */
.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  padding: 0; overflow: hidden; }
.post-card .visual { display: block; padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--pc-bg, var(--bg-2)); border-bottom: 1px solid var(--line); }
.post-card .art-card { width: 100%; max-width: 132px; margin: 0 auto; }
.post-card .body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column;
  gap: var(--sp-2); flex: 1; }
.post-card .cat { font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  color: var(--pc-key, var(--accent)); text-transform: none; }
.post-card .t { font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink); letter-spacing: -.01em; }
.post-card .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
.post-card .go { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-cap);
  color: var(--pc-key, var(--accent)); font-weight: 700; }
a.card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
a.post-card:hover .visual { background: var(--pc-hov, var(--bg-3)); }
/* 記事ごとに面の色を変える。比較表の群色と対応させ、どの項目の記事かを面で示す */
.pc-cost   { --pc-bg: #eef1f5; --pc-hov: #e4eaf1; --pc-key: var(--grp-cost); }
.pc-exit   { --pc-bg: #edf3ee; --pc-hov: #e2ece4; --pc-key: var(--grp-exit); }
.pc-ident  { --pc-bg: #e9f1f0; --pc-hov: #dceae8; --pc-key: var(--grp-identity); }
.pc-deliv  { --pc-bg: #f5efe8; --pc-hov: #eee5da; --pc-key: var(--grp-deliverable); }

/* ===== 図版 ==============================================================
   すべて自作のインラインSVG（src/lib/art.mjs）。
   ★装飾のために置かない。どの図も何を伝えるかを持つ。
   ★SVG内の文字はCSSで指定する。図の中に px を直書きしない。 */
.art { display: block; max-width: 100%; height: auto; }
.art text { font-family: var(--font-sans); fill: var(--ink); }
.art .art-t1 { font-size: 15px; font-weight: 700; }
.art .art-t2 { font-size: 12.5px; fill: var(--ink-2); font-weight: 400; }
.art .art-n { font-size: 17px; font-weight: 700; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.art .art-score { font-size: 30px; font-weight: 700; fill: #fff; letter-spacing: -.03em; }
.art .art-score-u { font-size: 12px; fill: #fff; font-weight: 700; }

/* ヒーローの図。文字の右に置く。狭い画面では上に回す */
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-6);
  align-items: center; text-align: left; }
.hero-grid .art-hero { width: 100%; max-width: 420px; margin-inline: auto; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: var(--sp-5); }
  .hero-grid .art-hero { max-width: 280px; order: -1; }
}

/* 横に流れる図。狭い画面では横スクロールに逃げず、縦に積む */
.art-flow { width: 100%; }
.flow-wrap { margin-top: var(--sp-5); }
@media (max-width: 900px) { .art-flow { display: none; } }
.flow-list { list-style: none; padding: 0; margin: 0; display: none; }
@media (max-width: 900px) {
  .flow-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
  .flow-list li { display: flex; align-items: baseline; gap: var(--sp-3);
    background: var(--bg); border: 1px solid var(--line-2); border-left-width: 5px;
    border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); }
  .flow-list .t { font-weight: 700; font-size: 15px; flex: none; }
  .flow-list .s { font-size: 13px; color: var(--ink-2); }
}

.art-process { width: 100%; max-width: 420px; margin: var(--sp-5) auto 0; }
.art-limits { width: 100%; max-width: 460px; margin: var(--sp-5) auto 0; }

/* 記事カードの識別ビジュアル */
.post-card .art-card { width: 100%; max-width: 120px; margin-bottom: var(--sp-2); }

/* ===== 手順の大型ブロック（/process/）================================== */
.steps { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
.steps li { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: var(--sp-4);
  background: var(--bg); border: 1px solid var(--line); border-left: 6px solid var(--sc, var(--accent));
  border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-1); }
.steps .no { font-size: clamp(30px, 1.6rem + 1.4vw, 44px); font-weight: 700; line-height: 1;
  letter-spacing: -.04em; color: var(--sc, var(--accent)); font-variant-numeric: tabular-nums; opacity: .35; }
.steps .h { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.steps .s { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.75; }
.steps li:nth-child(1) { --sc: var(--grp-cost); }
.steps li:nth-child(2) { --sc: var(--grp-exit); }
.steps li:nth-child(3) { --sc: var(--grp-identity); }
.steps li:nth-child(4) { --sc: var(--grp-deliverable); }
.steps li:nth-child(5) { --sc: var(--grp-contact); }
@media (max-width: 600px) { .steps li { grid-template-columns: 56px 1fr; gap: var(--sp-3); padding: var(--sp-4); } }

/* ===== 分かる／分からない（/limitations/）============================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
.split > div { border-radius: var(--r-3); padding: var(--sp-5); }
.split .can { background: #edf3ee; border: 1px solid #cbdccf; }
.split .cannot { background: var(--bg-2); border: 1px dashed var(--line-2); }
.split h3 { font-size: 15px; letter-spacing: .02em; margin-bottom: var(--sp-3); }
.split .can h3 { color: var(--st-open); }
.split .cannot h3 { color: var(--ink-2); }
.split ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.split li { display: flex; gap: var(--sp-2); font-size: 14.5px; line-height: 1.7; align-items: flex-start; }
.split .can li::before { content: "\2713"; color: var(--st-open); font-weight: 700; flex: none; }
.split .cannot li::before { content: "\2014"; color: var(--ink-3); font-weight: 700; flex: none; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }

/* ===== フッタを面にする ================================================ */
.site-footer { background: var(--accent); color: #cfd9e5; border-top: 0; }
.site-footer a { color: #fff; }
.site-footer ul { gap: var(--sp-2) var(--sp-5); }
.site-footer .inner > p { color: #b9c9dc; }

/* ===== 大型CTA。ページの終わりを「リンク」で終わらせない =============== */
.cta-band { background: var(--accent); color: #fff; padding-block: var(--sp-9); text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(22px, 1.2rem + 1.6vw, 34px); letter-spacing: -.02em; }
.cta-band p { color: #cfd9e5; margin-top: var(--sp-3); font-size: var(--fs-lead); }
.cta-band .btn { background: #fff; color: var(--accent); border-color: #fff; margin-top: var(--sp-6);
  min-height: 56px; font-size: 17px; padding-inline: var(--sp-7); }
.cta-band .btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bg); }
.cta-band .fine { display: block; margin-top: var(--sp-4); font-size: var(--fs-cap); color: #b9c9dc; }
@media (max-width: 600px) { .cta-band { padding-block: var(--sp-7); } .cta-band .btn { width: 100%; } }

/* ===== 濃い面のセクション ================================================
   白と淡色の2種類だけだと、どこまでスクロールしても同じリズムに見える。
   図版を置く節にだけ濃い面を使い、ページに山を作る。 */
/* ヒーローの面。白のままだと「文書」に見える。一段沈めて、主役の比較表を白で浮かせる */
.band-hero { background: var(--hero-bg); border-bottom: 1px solid var(--line); }
.band-hero .stats .card { border-color: #d6dde6; box-shadow: var(--sh-2); }

.band-3 { background: var(--accent); color: #fff; border-block: 0; }
.band-3 h2, .band-3 .art text { color: #fff; fill: #fff; }
.band-3 .sec-head .eyebrow { color: #b9c9dc; }
.band-3 .sec-head .sub, .band-3 .note { color: #cfd9e5; }
.band-3 .art rect[fill*="--bg"] { fill: #1d4471; }
.band-3 .art .art-t2 { fill: #cfd9e5; }
.band-3 .flow-list li { background: #1d4471; border-color: #2f5a8a; }
.band-3 .flow-list .s { color: #cfd9e5; }
.band-3 a { color: #fff; }

/* --- ヒーロー。3秒で「何を・何社・どの項目で」を出す ----------------------
   ★中央に組む。左寄せのまま置くと「文書」に見え、サイトの顔にならない。
     ただし本文の長い段落は中央揃えだと読みにくいので、幅を絞って行長を保つ。 */
/* 下の余白は帯（.band）が持つ。ヒーロー自身が持つと二重になり、
   チップと信頼帯のあいだに大きな空白が空く */
.hero { padding-bottom: 0; }
/* 図版と並ぶ広い画面では左揃え（図が右にあるので視線が左から右に流れる）。
   図が上に回る狭い画面では中央に切り替える。 */
.hero .hero-copy .lead { max-width: 32em; }
.hero .hero-cols { justify-content: center; }
.hero .hero-cols-head { text-align: center; }
@media (max-width: 900px) {
  .hero .hero-copy h1 { max-width: 20em; margin-inline: auto; }
  .hero .hero-copy .lead { max-width: 34em; margin-inline: auto; }
  .hero .hero-copy .note { max-width: 46em; margin-inline: auto; }
  .hero .btn-row { justify-content: center; }
}
/* 統計カードは、数字を左に揃えると読み比べやすい。箱ごと中央に置く */
.stats .card { text-align: left; }
.hero-cols-head { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: var(--sp-5); }
.hero-cols { list-style: none; padding: 0; margin: var(--sp-2) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero-cols a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 4px var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: 13.5px; text-decoration: none; color: var(--ink); background: var(--bg);
  /* 「費用が事前に分かる／か」と語中で割れるのを防ぐ（README §1-8） */
  word-break: auto-phrase; }
.hero-cols a:hover { border-color: var(--accent); }
.hero-cols .num { font-size: 12px; }
/* 画面に見えているものへ飛ばすボタンは置かない。
   ★比較表がファーストビューに入っている状態を保つことが優先（82bf535）。
     ジャンプボタンを置くと、その分だけ表が下がって見えなくなる。 */
.lbl-short { display: none; }
/* 狭い画面では、比べている項目を2列に詰める。
   ★消さない。何を比べるサイトかを最初に伝える要素であり、
     隠すと Google のモバイルファーストでも評価が下がる。 */
@media (max-width: 600px) {
  .hero { padding-bottom: var(--sp-3); }
  .hero-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  /* リンクなのでタップ領域は 44px 以上（README §1-8） */
  .hero-cols a { min-height: 44px; padding: 4px var(--sp-2); font-size: 12.5px; gap: 4px; line-height: 1.45; }
  /* 比較表を先に見せる。区切りの余白だけ詰める（要素は減らさない） */
  section.spaced.first { margin-top: var(--sp-5); padding-top: var(--sp-4); }
  .hero-cols li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* 狭い画面では短い名前に切り替える。完全な名前は比較表の見出しにある。
     幅に合わせて自然に折り返す（格子に固定すると空きが出て行数が増える） */
  .hero-cols { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .hero-cols-head { margin-top: var(--sp-4); }
  .hero { padding-bottom: 0; }
  .hero-cols a { min-height: 40px; }
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
  section.spaced.first { margin-top: var(--sp-4); }
}

/* --- データが示す特徴。**順位ではない。**枠も色も1種類にして、優劣に見せない -- */
.feat { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--sp-2); word-break: auto-phrase;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 2px 10px; background: var(--bg); }
.feat::before { content: "\2713"; color: var(--st-open); font-weight: 700; }

/* --- よくある質問 -------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); margin-top: var(--sp-4); }
.qa { border-bottom: 1px solid var(--line); }
.qa > summary { cursor: pointer; padding: var(--sp-4) var(--sp-2); min-height: 48px;
  display: flex; align-items: center; font-size: 16px; font-weight: 700; }
.qa > summary::marker { color: var(--ink-3); }
.qa-a { padding: 0 var(--sp-2) var(--sp-4); }
.qa-a p + p { margin-top: var(--sp-3); }

/* --- 手順（/process/） --------------------------------------------------- */
.steps { list-style: none; padding: 0; counter-reset: st; margin-top: var(--sp-4); }
.steps > li { counter-increment: st; position: relative;
  padding: 0 0 var(--sp-5) var(--sp-8); border-left: 2px solid var(--line); }
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before { content: counter(st); position: absolute; left: -15px; top: -2px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700; }
.steps > li > strong { display: block; font-size: 16px; }
.steps > li > .evidence { margin-top: var(--sp-2); }

/* --- 記事末尾「この項目で比較する」 --------------------------------------- */
.jump { background: var(--bg-2); border-radius: var(--r-2); padding: var(--sp-5);
  border-top: 0; }
.jump h2 { margin-top: 0; border: 0; padding-top: 0; }
.jump .btn { margin-top: var(--sp-3); }

/* リード文。ファーストビューで読ませる1文なので、本文より少し大きく */
.lead { font-size: 18px; line-height: 1.8; margin-top: var(--sp-4); }
@media (max-width: 600px) { .lead { font-size: 16.5px; } }
.wrap-list > .note { margin-top: var(--sp-2); }

/* 絞り込みと列の切り替えは、たたんでおく。
   ★開いた状態で置くと、控えめに見積もっても 300px ぶん比較表が下がる。
     このページで最初に見せるべきものは表であって、操作パネルではない。
   ★<details> はブラウザの機能。JavaScript を使っていない。 */
.controls { border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg-2); margin-top: var(--sp-3); }
.controls > summary { cursor: pointer; padding: var(--sp-2) var(--sp-4); min-height: 44px;
  display: flex; align-items: center; font-size: 14px; font-weight: 700; }
.controls > summary::marker { color: var(--ink-3); }
.controls[open] > summary { border-bottom: 1px solid var(--line); }
.controls .filters, .controls .lens { border: 0; background: transparent; margin-top: 0; }

/* --- 先に見る列（JavaScript を使わない） --------------------------------
   ラジオと :has() だけ。JS の方針（README §1-6）に触れない。
   ★強調するだけで、他の列を暗くしない。暗くすると「そちらは重要でない」と読める。
   ★:has() 未対応のブラウザでは何も起きない。表はそのまま全部読める。 */
.lens { border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--bg-2); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.lens legend { font-size: 14px; font-weight: 700; padding: 0 var(--sp-2); }
.lens label { display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; cursor: pointer; min-height: 44px; }
.lens input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.lens .note { flex-basis: 100%; margin: 0; }

/* 列の着地点。表の手前に置くゼロ高さの目印。
   ★見出しの <th> は sticky で、スマホでは視覚的に隠している。
     そこへ飛ばすと表の途中に着地し、1枚目のカードが切れる。 */
/* ★着地位置は固定ヘッダの高さから計算する。数値を直書きしない。
   直書きしていたせいで、ヘッダがナビ6項目で2段（123px）になったとき、
   説明の帯がヘッダの下に潜って1行目が読めなくなっていた。 */
.col-anchor { display: block; height: 0; }
.matrix-lens .col-anchor, [id^="g-"].col-anchor { scroll-margin-top: calc(var(--header-h) + 20px); }

/* いま何を強調しているかを、文字でも出す。色だけに意味を持たせない */
.lens-note { display: none; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-2) 0 var(--sp-4); font-size: 14.5px; }
.lens-note .txt { flex: 1 1 auto; min-width: 0; line-height: 1.7; }
.lens-note a { margin-left: auto; font-size: var(--fs-cap); flex: none; }
/* ★記事から「#g-exit」で飛んできたとき、その列を光らせる。
   飛んだのに何も変わらないと、読者は自分がどこに来たのか分からない。
   :target と :has() だけ。JavaScript は使わない。 */
.matrix-lens:has(#g-cost:target)        [data-group="cost"],
.matrix-lens:has(#g-exit:target)        [data-group="exit"],
.matrix-lens:has(#g-identity:target)    [data-group="identity"],
.matrix-lens:has(#g-deliverable:target) [data-group="deliverable"],
.matrix-lens:has(#g-contact:target)     [data-group="contact"],
.matrix-lens:has(input[value="cost"]:checked)        .matrix [data-group="cost"],
.matrix-lens:has(input[value="exit"]:checked)        .matrix [data-group="exit"],
.matrix-lens:has(input[value="identity"]:checked)    .matrix [data-group="identity"],
.matrix-lens:has(input[value="deliverable"]:checked) .matrix [data-group="deliverable"],
.matrix-lens:has(input[value="contact"]:checked)     .matrix [data-group="contact"] {
  background: color-mix(in srgb, var(--gc) 16%, transparent);
  border-left-color: var(--gc);
  border-left-width: 5px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 35%, transparent);
}
/* スマホはチップなので、枠と文字の色まで変えないと差が見えない */
@media (max-width: 767px) {
  .matrix-lens:has(#g-cost:target)        td[data-group="cost"]::before,
  .matrix-lens:has(#g-exit:target)        td[data-group="exit"]::before,
  .matrix-lens:has(#g-identity:target)    td[data-group="identity"]::before,
  .matrix-lens:has(#g-deliverable:target) td[data-group="deliverable"]::before,
  .matrix-lens:has(#g-contact:target)     td[data-group="contact"]::before { color: var(--gc); font-weight: 700; }
}
/* 説明の帯を、その列が選ばれているときだけ出す */
.matrix-lens:has(#g-cost:target)        .lens-note[data-for="cost"],
.matrix-lens:has(#g-exit:target)        .lens-note[data-for="exit"],
.matrix-lens:has(#g-identity:target)    .lens-note[data-for="identity"],
.matrix-lens:has(#g-deliverable:target) .lens-note[data-for="deliverable"],
.matrix-lens:has(#g-contact:target)     .lens-note[data-for="contact"] { display: flex; }
.matrix-lens:has(input[value="cost"]:checked)        .matrix td[data-group="cost"] .num,
.matrix-lens:has(input[value="exit"]:checked)        .matrix td[data-group="exit"] .num,
.matrix-lens:has(input[value="identity"]:checked)    .matrix td[data-group="identity"] .num,
.matrix-lens:has(input[value="deliverable"]:checked) .matrix td[data-group="deliverable"] .num,
.matrix-lens:has(input[value="contact"]:checked)     .matrix td[data-group="contact"] .num {
  font-weight: 700;
}

/* --- 信頼の帯。ファーストビューに置く ------------------------------------
   ★書けるのは実際に持っているものだけ。監修者はいない。
     「最終確認」は各社サイトを見た日であって、サイトの更新日ではない。 */
.band .trustbar { border: 0; padding-block: 0; margin: 0; }
.trustbar { list-style: none; padding: 0; margin: var(--sp-4) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: var(--sp-3); }
.trustbar li { display: flex; gap: var(--sp-2); align-items: flex-start; }
@media (max-width: 600px) {
  /* 内容は1つも減らさず、行間と余白だけ詰める */
  .trustbar { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); margin-top: var(--sp-3); }
  .trustbar strong { font-size: 13px; line-height: 1.5; }
  .trustbar .note { font-size: 12px; line-height: 1.45; }
}
.trustbar .ic { flex: none; margin-top: 3px; color: var(--ink-2); }
.trustbar strong { display: block; font-size: 14px; }
.trustbar time { white-space: nowrap; }
.trustbar .note { display: block; font-size: 12.5px; margin-top: 1px; }
.trustbar a { display: inline-block; min-height: 24px; }
.evidence .ic { vertical-align: -2px; margin-right: 3px; }
/* 狭い画面では、見出しと注記を1行にまとめて縦を詰める。
   ★注記を消さない。「各社サイトを見た日」が無いと、最終確認日の意味が変わる。 */
@media (max-width: 600px) {
  .trustbar { padding-block: var(--sp-2); gap: var(--sp-1) var(--sp-3); grid-template-columns: 1fr 1fr; }
  .trustbar li { align-items: baseline; }
  .trustbar .ic { width: 14px; height: 14px; margin-top: 0; }
  .trustbar strong { display: inline; font-size: 13px; }
  .trustbar .note { display: inline; font-size: 12px; }
  .trustbar .note::before { content: "・"; }
}

/* --- ランキング --- */
.rank-list { list-style: none; padding: 0; counter-reset: r; }
.rank-list > li { counter-increment: r; border-top: 1px solid var(--line); padding: var(--sp-5) 0; display: flex; gap: var(--sp-4); }
.rank-list > li::before { content: var(--rk, counter(r)); font-size: 14px; font-weight: 700; color: var(--ink-2);
  flex: 0 0 3.6em; padding-top: 3px; white-space: nowrap; }
.rank-list > li.pending::before { color: var(--ink-3); font-weight: 400; }
.rank-list h3 { font-size: 17px; }
.rank-list .score-line { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); }
.rank-list .score-line .n { font-size: 22px; font-weight: 700; }
.site-header nav { display: flex; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; }
/* 狭い画面では、サイト名と同じ行にナビを詰め込むと2段に折れて頭が重くなる。
   ナビを独立した1行にすると、4本が1段に収まりヘッダが下がる */
@media (max-width: 600px) {
  :root { --header-h: 123px; }   /* ナビ6項目が2段になる。実測値 */
  .site-header .inner { flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .site-header nav { flex-basis: 100%; gap: var(--sp-4); }
}
.matrix .score { display: block; margin-left: 0; margin-top: 2px; }
@media (max-width: 767px) {
  /* 順位・事務所名・スコアを1行、末尾の導線を次の行に置く */
  .matrix .rk { font-size: 30px; }
  .matrix tbody th { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
    row-gap: var(--sp-2); }
  .matrix .score { margin-top: 0; }
  .matrix tbody th > .row-cta { flex-basis: 100%; }
}
/* WCAG 2.5.8（AA）はタップ領域に 24px を求める。
   単独で置かれたリンクは inline のままだと箱の高さが文字サイズ（14px）になる。
   inline-block にすると箱が行の高さになり、行送りは変えずに当たり判定だけ広がる */
.matrix tbody th a, .rank-list h3 a, .plain > li > a { display: inline-block; min-height: 24px; }
/* カード表示のときは、事務所名も主要な導線なので 44px を確保する */
@media (max-width: 767px) { .matrix tbody th > a { min-height: 44px; display: inline-flex; align-items: center; } }
/* ★順位とスコアはこのサイトの資産。本文サイズの延長では読ませられない。
   視線順: 順位 → 事務所名 → スコア → 特徴 → 詳細へ */
.matrix .rk { display: block; font-size: 26px; font-weight: 700; color: var(--ink-3);
  line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-bottom: var(--sp-2); }
.matrix .rk .u { font-size: 13px; letter-spacing: 0; margin-left: 2px; }
.matrix table[data-filterable] .score { font-size: 22px; letter-spacing: -.02em; }
/* 「同順位」は装飾ではなく、順位の意味を変えるラベル。可読性の下限（12px）を割らない */
.matrix .rk .tie { font-weight: 400; font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.matrix .rk.pending { color: var(--ink-3); font-weight: 400; }
.matrix .score.none { color: var(--ink-3); font-size: 14px; }
/* 「いつ時点のデータか」。順位の直上に置く。フッターの小さい表記では機能しない */
.asof { border-left: 3px solid var(--accent); background: var(--accent-bg);
  padding: var(--sp-3) var(--sp-4); font-size: 14px; line-height: 1.75; margin-top: var(--sp-3);
  border-radius: 0 var(--r-2) var(--r-2) 0; }
/* 記事の冒頭では、見出しより先に大きな囲みが来ると主従が逆になる。細い帯にする */
.guide > .asof { background: transparent; border-left: 0; border-block: 1px solid var(--line);
  padding: var(--sp-2) 0; font-size: var(--fs-cap); color: var(--ink-2); border-radius: 0; }
.guide > .asof strong { font-weight: 700; color: var(--ink); }
.cta-block .disclosure { margin-bottom: var(--sp-2); }
/* 「広告リンクを含みます」は、このサイトで最も省いてはいけない一文。
   11.5px は .tie に決めた可読性の下限（12px）を割っていた。同じ下限を適用する */
.sticky-cta .disclosure-short { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* --- 目次（事務所ページ）。「この事務所の概要」の直後に入る --------------
   カードにも囲み枠にもしすぎない。読み物の途中に置く索引であって、
   ここで選ばせるための装置ではない（docs/README.md §1-9）。 */
.toc { border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--bg-2); padding: var(--sp-4); margin-top: var(--sp-6); }
.toc-head { font-size: 14px; font-weight: 700; margin: 0 0 var(--sp-2); }
.toc-list { list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: var(--sp-5); font-size: 14px; }
.toc-list li { break-inside: avoid; }
/* 単独リンクなので当たり判定を 24px 以上に（§1-8） */
.toc-list a { display: inline-block; min-height: 24px; line-height: 24px; }
@media (max-width: 600px) { .toc-list { columns: 1; } }
/* 目次から飛んだとき、見出しが sticky ヘッダの下に隠れないようにする */
/* アンカーで飛んだとき、固定ヘッダの下に見出しが隠れないようにする。
   スマホはヘッダが2段（79px）なので少し多めに取る */
.wrap-detail h2[id], #matrix, [id^="g-"] { scroll-margin-top: calc(var(--header-h) + 16px); }


/* --- 解説記事 --- */
.guide { max-width: 680px; margin: 0 auto; padding: 0 var(--sp-4); }
.guide h2 { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.guide h3 { margin-top: var(--sp-5); }
.guide p { margin-top: var(--sp-4); }
.guide ul, .guide ol { margin-top: var(--sp-4); }
.guide li { margin-bottom: var(--sp-2); }
.guide .matrix { margin-top: var(--sp-4); }
/* 出典は「（host 2026年8月24日確認）」と長い。折り返せないと、
   列の多い記事の表が画面からはみ出す（1366px で 31px はみ出していた）。
   ホスト名と日付の間でだけ折る。 */
.cite { font-size: 12.5px; color: var(--ink-3); }
.cite a { white-space: nowrap; }
.cite a { color: var(--ink-3); }
.checklist ol { counter-reset: c; list-style: none; padding-left: 0; }
.checklist li { counter-increment: c; position: relative; padding-left: 2.4em; margin-bottom: var(--sp-4); }
.checklist li::before { content: counter(c); position: absolute; left: 0; top: .15em;
  width: 1.7em; height: 1.7em; border: 1px solid var(--accent); border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--accent); }
.guide-nav { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: 14px; }
.guide-nav li { margin-bottom: var(--sp-3); }

/* --- 軸B（小説流入）。静かに保つ。ボタン・強い色・密度を持ち込まない --- */
.site-header.story { background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header.story .inner { justify-content: flex-start; }
.site-footer.story { background: var(--bg); border-top: 1px solid var(--line); }

.story-body { font-size: 17px; line-height: 1.95; letter-spacing: .02em; }
.story-body .narrow { max-width: 620px; margin: 0 auto; padding: 0 var(--sp-4); }
.story-body .wide   { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-4); }
.story-body h1 { font-size: 25px; line-height: 1.5; }
.story-body h2 { font-size: 19px; margin-top: var(--sp-7); }
.story-body p { margin-top: var(--sp-4); }
.story-body ul { margin-top: var(--sp-4); }
.story-body li { margin-bottom: var(--sp-3); }

/* トピック一覧。カードにしない・グリッドにしない・番号を振らない */
.quiet { margin-top: var(--sp-5); }
.quiet a { font-size: 16.5px; }
.quiet .sub { display: block; margin-top: 4px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }

.handoff { max-width: 620px; margin: var(--sp-8) auto 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line-2); }
.handoff .mark-line { font-size: 14px; line-height: 1.8; color: var(--ink-2); margin: 0; }
.handoff .go { margin-top: var(--sp-3); }
.story-stamp { max-width: 620px; margin: var(--sp-6) auto 0; padding: 0 var(--sp-4); }

/* --- 静的フィルタ（JS が有効なときだけ現れる） --------------------------
   HTML には全社の行が常にある。JS 無効なら hidden のままで、表は全社が見える。 */
.filters { border: 1px solid var(--line); border-radius: var(--r-1);
  padding: var(--sp-4); margin-top: var(--sp-4); background: var(--bg-2); }
.filters[hidden] { display: none; }
.filters-head { font-size: 14px; font-weight: 700; margin: 0 0 var(--sp-3); }
.filters-head .note { display: block; font-weight: 400; margin-top: 2px; }
.filters-row { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
/* ラベル全体がタップ領域。実測 22px で WCAG 2.5.8（AA）の 24px を割っていた */
/* ラベル全体がタップ領域。WCAG 2.5.8（AA）の下限は 24px だが、
   カード表示で指で押す前提なので 44px（Apple HIG）に揃える */
.filters label { display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 1.6; cursor: pointer; min-height: 44px; }
.filters input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.filters-status { font-size: 13px; color: var(--ink-2); margin: var(--sp-3) 0 0; min-height: 1.6em; }
.matrix tr[data-hidden] { display: none; }

/* --- モバイルの比較表: 隠さず詰める ------------------------------------
   隠すと Google のモバイルファーストで評価が下がるため、情報は1つも減らさない。
   群スコアを1行1項目からチップの折り返しに変え、高さだけを下げる。 */
@media (max-width: 767px) {
  .matrix tr { margin-bottom: var(--sp-3); }
  .matrix tbody th { padding: 8px 12px; }
  /* 群ごとの色を、チップの左の線で示す。色だけに意味を持たせないよう短縮名も出す */
  .matrix tbody td {
    display: inline-flex; width: auto; flex: 0 1 auto;
    align-items: baseline; gap: 6px;
    border: 0; border-inline-start: 3px solid var(--gc, var(--line-2));
    padding: 6px 10px; margin: 4px 0 0 12px;
    background: color-mix(in srgb, var(--gc, var(--line)) 6%, transparent);
    border-radius: 0 var(--r-1) var(--r-1) 0;
    font-size: 13px;
  }
  /* 長いラベルは1行1項目になってしまうので、モバイルだけ短縮名を使う */
  .matrix tbody td::before { content: attr(data-short); font-size: 12px; color: var(--ink-3); }
  .matrix tbody td .bar.sm { display: none; }   /* 数値は残す。装飾のバーだけ落とす */
  .matrix tbody td .num { font-weight: 700; }
  .matrix tbody td .of { font-weight: 400; }
  .matrix tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; padding-bottom: var(--sp-3); }
  .matrix tbody tr > th { flex: 1 0 100%; border-bottom: 1px solid var(--line); }
}