/* 出会い研究所 画面のスタイル（デザイン仕様_v1.md §3〜§4。口コミ・比較サイト型）
   1段組み・白いパネルを1px の枠で区切る・出典と確認日はブロックごと・accent の面は札/方式ラベル/相談先だけ */
:root {
  color-scheme: light;
  --bg: #EEF2F1; --surface: #FFFFFF; --sunken: #F6F8F8;
  --ink: #15252A; --muted: #586A6F; --line: #D3DCDB; --line-strong: #15252A; --field: #586A6F;
  --accent: #0E6B63; --accent-soft: #DCEEEB; --on-accent: #FFFFFF;
  --warn: #A1520A; --warn-soft: #FBEBD7; --danger: #B0281C; --danger-soft: #FAE2DE;
  --note: #5B4FA0; --note-soft: #ECE9F8;
  --band: #15252A; --on-band: #FFFFFF; /* まとまりの見出しの帯（濃淡で締める） */
  --star: #E9A100; /* ★の棒（口コミサイトでなじみのある黄色）。白との差は 2.2:1 なので、棒の横に必ず数字を出す */
  --chart-line: #008A7A; /* グラフの線だけ。dataviz の validate_palette.js で確認（明度・彩度・対比） */
  /* 本文は端末に入っている文字（Windows は BIZ UDPゴシック・Mac と iPhone はヒラギノ・Android は Noto Sans JP）。Web フォントは見出しだけ（2026-11-10 速さのため） */
  --font-display: "Zen Kaku Gothic New", "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  --font-body: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  --font-id: "JetBrains Mono", "BIZ UDGothic", ui-monospace, monospace;
  --fs-axis: 12px; --fs-note: 14px; --fs-body: 16px; --fs-h2: 21px; --fs-h1: 28px; --fs-box: 28px; --fs-id: 21px;
  --lh-body: 1.75; --lh-head: 1.4; --lh-note: 1.6;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 64px;
  --r: 10px; --r-sm: 6px; --r-tag: 4px; --r-label: 2px;
  --hit: 44px; --page: 1040px;
  --shadow-float: 0 4px 16px rgba(0,0,0,.12);
  --scroll-hint: linear-gradient(to left, rgba(21,37,42,.14), rgba(21,37,42,0));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1618; --surface: #162125; --sunken: #121B1E;
    --ink: #E2EBEA; --muted: #91A3A6; --line: #2A3B3F; --line-strong: #E2EBEA; --field: #91A3A6;
    --accent: #52C3B5; --accent-soft: #15332F; --on-accent: #0E1618;
    --warn: #F0A650; --warn-soft: #382812; --danger: #F2897E; --danger-soft: #3B1B18;
    --note: #B4A9F0; --note-soft: #24203F; --chart-line: #36A99A; --star: #D4A017; --band: #243840; --on-band: #E2EBEA;
    --shadow-float: 0 0 0 1px var(--line);
    --scroll-hint: linear-gradient(to left, rgba(0,0,0,.45), rgba(0,0,0,0));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1618; --surface: #162125; --sunken: #121B1E;
  --ink: #E2EBEA; --muted: #91A3A6; --line: #2A3B3F; --line-strong: #E2EBEA; --field: #91A3A6;
  --accent: #52C3B5; --accent-soft: #15332F; --on-accent: #0E1618;
  --warn: #F0A650; --warn-soft: #382812; --danger: #F2897E; --danger-soft: #3B1B18;
  --note: #B4A9F0; --note-soft: #24203F; --chart-line: #36A99A; --star: #D4A017; --band: #243840; --on-band: #E2EBEA;
  --shadow-float: 0 0 0 1px var(--line);
  --scroll-hint: linear-gradient(to left, rgba(0,0,0,.45), rgba(0,0,0,0));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden 属性を、display を指定した部品でも必ず効かせる */
body { background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-head); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); border-left: 4px solid var(--accent); padding-left: var(--s1); }
h3 { font-family: var(--font-body); font-size: var(--fs-body); }
p, dl, dd, ul { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.id { font-family: var(--font-id); font-weight: 400; font-variant-numeric: tabular-nums; }
.note { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--muted); }
.note.fine { font-size: 12px; }
/* 結論の1段落（2026-11-10）。本文より少し大きく、地や枠は付けない */
.summary { font-size: 17px; line-height: 1.8; color: var(--ink); }
@media (max-width: 559px) { .summary { font-size: 16px; } }
.ext::after { content: " ↗"; }

/* 社内確認の帯（公開画面には出さない） */
.sample-bar { background: var(--note-soft); color: var(--note); padding-inline: var(--s2); padding-block: var(--s1); font-size: var(--fs-note); line-height: var(--lh-note); }
.sample-bar .in { max-width: var(--page); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; justify-content: space-between; }
.switch { display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer; font-weight: 700; min-height: var(--hit); }
.switch input { width: 18px; height: 18px; accent-color: var(--note); }
.plan-note { display: none; background: var(--note-soft); color: var(--note); border-radius: var(--r-sm); padding: var(--s1) var(--s2); font-size: var(--fs-note); line-height: var(--lh-note); }
html.show-notes .plan-note { display: block; }

/* 4-1 ヘッダー */
header.site { background: var(--surface); border-bottom: 1px solid var(--line); padding-inline: var(--s2); position: relative; }
header.site .in { max-width: var(--page); margin: 0 auto; min-height: 56px; display: flex; align-items: center; gap: var(--s2); }
.logo { display: flex; align-items: baseline; gap: var(--s1); text-decoration: none; color: var(--ink); min-width: 0; }
.logo b { font-family: var(--font-display); font-weight: 700; font-size: 21px; white-space: nowrap; }
.logo b span { color: var(--accent); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
nav.main { display: flex; }
nav.main a { font-size: var(--fs-note); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 12px; border-bottom: 2px solid transparent; }
nav.main a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 700; }
.menu-btn { display: none; min-width: var(--hit); height: var(--hit); padding: 0 var(--s1); white-space: nowrap; border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--surface); font-size: 12px; cursor: pointer; }
@media (max-width: 759px) {
  .menu-btn { display: inline-block; }
  nav.main { display: none; position: absolute; right: var(--s2); top: 56px; z-index: 20; flex-direction: column; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-float); padding: var(--s1); min-width: 220px; }
  nav.main.open { display: flex; }
  nav.main a { border-bottom: 0; border-left: 2px solid transparent; }
  nav.main a[aria-current="page"] { border-left-color: var(--accent); }
}

/* 全体 */
.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--s2); padding-block: var(--s3) var(--s5); display: grid; gap: var(--s4); }
.wrap > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); display: grid; gap: var(--s2); align-content: start; min-width: 0; }
@media (max-width: 559px) { .panel { padding: var(--s2); } }
.crumb { font-size: var(--fs-note); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px var(--s1); }
.crumb a { color: var(--muted); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s2); }
.lead { color: var(--muted); max-width: 40em; }
.stack { display: grid; gap: var(--s2); }

/* 3-3 状態の札 */
.pill { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-note); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.pill.ok { background: var(--accent-soft); color: var(--accent); }
.pill.two { background: var(--warn-soft); color: var(--warn); }
.pill.none { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.pill.hold { color: var(--muted); border: 1px dotted var(--muted); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }
.pill.pr { background: var(--surface); color: var(--muted); border: 1px solid var(--muted); border-radius: var(--r-tag); }
.pill.kind { background: var(--sunken); color: var(--ink); border-radius: var(--r-tag); min-height: 0; padding: 2px 8px; font-weight: 400; }
.pills { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* 4-2 トップ */
.hero { display: grid; gap: var(--s2); }
.search input { width: 100%; height: 48px; padding: 0 var(--s2); border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-body); }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.results { margin-top: var(--s1); display: grid; gap: 4px; }
.results button { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); min-height: var(--hit); padding: 0 var(--s2); cursor: pointer; }
/* トップの数字は1行の文で（4枚のカードに分けるのはダッシュボードの形で、ここでは大げさ。2026-11-10） */
.facts { font-size: var(--fs-note); color: var(--muted); line-height: var(--lh-note); }
.facts b { color: var(--ink); font-size: var(--fs-body); margin-right: 1px; }
.helpbox { background: var(--accent-soft); border-radius: var(--r); padding: var(--s2); display: grid; gap: 2px; }
.helpbox h3 { font-family: var(--font-body); }
/* 行の間はつめる（2026-11-10）。電話番号は文字を大きくして押しやすさを保つ */
.helpbox .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); line-height: 1.3; }
.helpbox .tel { font-family: var(--font-id); font-size: var(--fs-id); color: var(--accent); text-decoration: none; font-weight: 400; padding-block: 2px; }
.helpbox .note { color: var(--muted); margin-top: 4px; }
.chips { display: flex; gap: var(--s1); overflow-x: auto; padding-bottom: 2px; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--s2); border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--fs-note); }
.chip b { margin-left: 6px; color: var(--muted); font-weight: 400; }
/* トップのまとまりの見出し：見出しの下に一言（2026-11-10） */
.sec-head { display: grid; gap: 4px; }
.sec-head p { color: var(--muted); }
.h2-count { margin-left: 8px; color: var(--accent); }
.h2-unit { font-size: var(--fs-body); margin-left: 2px; }
/* 目的から探す：名前・アプリの数・矢印の入り口（影やグラデーションは使わない） */
.purpose { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.purpose-tile { display: grid; align-content: center; grid-template-columns: 1fr auto; grid-template-areas: "name arrow" "count arrow"; align-items: center; gap: 2px 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.purpose-tile b { grid-area: name; font-size: 17px; line-height: 1.4; word-break: auto-phrase; }
.purpose-tile span { grid-area: count; font-size: var(--fs-note); color: var(--muted); }
.purpose-tile i { grid-area: arrow; font-style: normal; font-size: 22px; color: var(--accent); }
.purpose-tile:hover, .purpose-tile:focus-visible { border-color: var(--accent); }
@media (max-width: 559px) { .purpose { grid-template-columns: 1fr 1fr; } }
/* 縦の線の見本（カードの棒の縦線と同じ形） */
.cmp-legend { font-size: var(--fs-note); color: var(--muted); line-height: var(--lh-note); }
.legend-peer { display: inline-block; width: 2px; height: 14px; background: var(--ink); border-radius: 1px; vertical-align: -2px; margin-right: 8px; }

/* 4-3 一覧カード */
.applist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s2); }
.appcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2); display: grid; gap: var(--s1); text-decoration: none; color: var(--ink); align-content: start; }
.appcard:hover, .appcard:focus-visible { border-color: var(--accent); }
.appcard .kinds { font-size: var(--fs-note); color: var(--muted); }
.appcard .kinds b { color: var(--ink); }
/* カードの札は小さくして横に並べる（幅が足りないときだけ折り返す） */
.appcard .pills { gap: 6px; }
.appcard .pill { font-size: 13px; min-height: 24px; padding: 2px 8px; gap: 2px; }
.appcard .co { font-size: var(--fs-note); color: var(--muted); }
/* App Store のアイコン（角はストアと同じくらいの丸み・白いアイコンが背景に溶けないよう薄い線） */
.app-icon { flex: none; display: block; border-radius: 22%; border: 1px solid var(--line); background: var(--surface); object-fit: cover; }
.app-icon-text { display: inline-flex; align-items: center; justify-content: center; background: var(--band); color: var(--on-band); border-color: var(--band); font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; line-height: 1; }
.appcard-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.appcard-head > div { min-width: 0; }
a.name-icon { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* 一覧のカードの比べる数字（2026-11-10）。要点の枠と同じ棒・平均の縦線を小さく */
.cmp { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: var(--s1); }
.cmp-head { font-size: var(--fs-note); color: var(--muted); }
.cmp-head b { color: var(--ink); }
.cmp .qrow { gap: 2px var(--s1); }
.cmp-none { font-size: var(--fs-note); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s1); }
table th.sticky-col { min-width: 7.5em; }
#apps .tabs button { border-bottom: 1px solid var(--line); border-radius: var(--r-sm); }
/* 口コミの投稿のフォーム（2026-11-10・テスト中） */
.postform { display: grid; gap: var(--s3); }
.postform .field { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s1); min-width: 0; }
.postform legend { padding: 0; margin-bottom: var(--s1); }
.postform .choices { display: flex; flex-wrap: wrap; gap: var(--s1); }
.postform .choices label { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0 var(--s2); border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.postform .choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.postform select, .postform textarea { width: 100%; min-height: var(--hit); padding: 8px 12px; border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.postform .agree { display: flex; gap: 8px; align-items: center; }
.btn-post { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); border-top: 1px solid var(--line); padding-top: var(--s1); }
.trio div { display: grid; gap: 2px; min-width: 0; }
.trio .k { font-size: var(--fs-note); color: var(--muted); }
.trio .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.trio .v.none { font-size: var(--fs-note); font-weight: 400; color: var(--muted); }

/* 4-4 アプリ詳細の頭 */
.alert-band { border-radius: var(--r-sm); padding: var(--s1) var(--s2); min-height: var(--hit); display: flex; align-items: center; color: var(--ink); }
.alert-band.warn { background: var(--warn-soft); }
.alert-band.bad { background: var(--danger-soft); }
.method-label { justify-self: start; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-note); font-weight: 700; padding: 4px 8px; border-radius: var(--r-label); }
.metaline { display: flex; flex-wrap: wrap; font-size: var(--fs-note); color: var(--muted); }
.metaline span + span { border-left: 1px solid var(--line); margin-left: var(--s1); padding-left: var(--s1); }
@media (max-width: 559px) { .metaline { flex-direction: column; } .metaline span + span { border-left: 0; margin-left: 0; padding-left: 0; } }
.findings { list-style: none; padding: 0; display: grid; gap: var(--s1); }
.findings li { position: relative; padding-left: var(--s4); }
.findings li i { position: absolute; left: 0; top: 0; font-style: normal; font-weight: 700; width: 24px; text-align: center; }
.findings .ok i { color: var(--accent); } .findings .two i { color: var(--warn); } .findings .bad i { color: var(--danger); } .findings .none i { color: var(--muted); }
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
@media (max-width: 759px) { .boxes { grid-template-columns: 1fr; } }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2); display: grid; gap: 4px; align-content: start; }
.box .k { font-size: var(--fs-note); font-weight: 700; }
.box .v { font-size: var(--fs-box); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.box .v small { font-size: var(--fs-note); font-weight: 400; margin-left: 2px; }
.srcband { background: var(--sunken); border-radius: var(--r-sm); padding: var(--s1) var(--s2); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--muted); }
/* ページ内の目次：角の丸い1本のバー。左に「目次」、項目は同じ太さ。今読んでいる項目だけ色を付ける（2026-11-10） */
.toc { position: sticky; top: 8px; z-index: 10; display: flex; align-items: center; gap: var(--s1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 4px 4px 14px; box-shadow: var(--shadow-float); margin-block: -8px; }
.toc-label { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); padding-right: 10px; border-right: 1px solid var(--line); line-height: 1.2; }
.toc-items { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.toc-items::-webkit-scrollbar { display: none; }
.toc a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-note); color: var(--ink); text-decoration: none; }
.toc a:hover { background: var(--sunken); }
.toc a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.toc + .part { margin-top: 0; }
@media (max-width: 559px) { .toc-items { mask-image: linear-gradient(to right, #000 82%, transparent); -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); } .toc a { padding: 0 10px; } }

/* 4-5 届出と会社情報 */
.ledger { display: grid; }
.ledger .row { display: grid; grid-template-columns: 180px 1fr; gap: var(--s1) var(--s3); padding-block: var(--s2); border-top: 1px solid var(--line); }
.ledger .row:first-child { border-top: 0; padding-top: 0; }
.ledger dt { font-weight: 700; }
.ledger dd { display: grid; gap: var(--s1); min-width: 0; }
.ledger .val { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.ledger .val .id { font-size: var(--fs-id); }
.ledger .val .txt { font-weight: 700; }
.ledger .src { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--muted); }
@media (max-width: 559px) { .ledger .row { grid-template-columns: 1fr; } .ledger .val .id { font-size: 20px; } }
/* 届出と会社情報の中は文字をひと回り小さく（2026-11-10）。番号は等幅のまま、見出し・値・原典の順に差をつける */
#s-check .box .v { font-size: 22px; }
#s-check .ledger { font-size: 15px; line-height: 1.6; }
#s-check .ledger .row { grid-template-columns: 160px 1fr; gap: 4px var(--s2); padding-block: 12px; }
#s-check .ledger dd { gap: 4px; }
#s-check .ledger .val .id { font-size: 17px; }
#s-check .ledger .src { font-size: 13px; }
#s-check .ledger .pill, #s-check .history .pill { font-size: 13px; min-height: 24px; padding: 2px 10px; }
#s-check .findings { font-size: 15px; }
#s-check .samecorp { font-size: 15px; }
#s-check > .note, #s-check .history .h { font-size: 13px; }
@media (max-width: 559px) { #s-check .ledger .row { grid-template-columns: 1fr; } #s-check .ledger .val .id { font-size: 16px; } }
.history { display: grid; }
.history .h { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--s1) var(--s2); align-items: center; padding-block: var(--s1); border-top: 1px solid var(--line); font-size: var(--fs-note); }
.history .h.rec { grid-template-columns: auto auto 1fr; }
@media (max-width: 559px) { .history .h, .history .h.rec { grid-template-columns: auto 1fr; } .history .h.rec > span:last-child { grid-column: 1 / -1; } }

/* 4-6 行政処分の記録 */
.record { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2); display: grid; gap: var(--s1); }
.record dl { display: grid; grid-template-columns: 8em 1fr; gap: 4px var(--s2); font-size: var(--fs-note); }
.record dt { color: var(--muted); font-weight: 700; }

/* 4-7 表と説明の帯 */
/* 表は枠の中で横にスクロールさせる。グリッドの子は幅を内容に合わせて広がるので、min-width: 0 で止める（表で見るがはみ出していた・2026-11-10） */
.panel > *, .stack > *, details.more { min-width: 0; }
.tablewrap { overflow-x: auto; position: relative; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 10px var(--s2); }
tbody th, tbody td { font-size: var(--fs-note); line-height: var(--lh-note); }
thead th { background: var(--sunken); font-size: var(--fs-note); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
tbody th { font-weight: 700; width: 40%; }
tbody td, tbody th { border-bottom: 1px solid var(--line); }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
.sticky-col { position: sticky; left: 0; background: var(--surface); }
thead .sticky-col { background: var(--sunken); }
@media (max-width: 559px) { tbody th { width: 9em; } th, td { padding: 12px var(--s1); } }
.explain { background: var(--sunken); border-radius: var(--r-sm); padding: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--fs-note); line-height: var(--lh-note); }
@media (min-width: 760px) { .explain { padding: var(--s2) var(--s3); } }
.explain div { display: grid; }
.explain b { color: var(--muted); }
@media (max-width: 559px) { .explain { display: grid; grid-template-columns: 1fr 1fr; } }
details.more summary { cursor: pointer; color: var(--accent); font-size: var(--fs-note); font-weight: 700; min-height: var(--hit); display: flex; align-items: center; }

/* 4-8 空の状態 */
/* 「まだありません」はただの文で（点線の箱はやめた。2026-11-10） */
.empty { color: var(--muted); font-size: var(--fs-note); line-height: var(--lh-note); }
.empty b { color: var(--ink); font-size: var(--fs-body); margin-right: 8px; }

/* 4-9 注意書き */
.caution { background: var(--warn-soft); border-radius: var(--r-sm); padding: var(--s1) var(--s2); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--ink); }
.plainbox { background: var(--sunken); border-radius: var(--r-sm); padding: var(--s2); font-size: var(--fs-note); line-height: var(--lh-note); }

/* 4-10 広告枠 */
.adbox { background: var(--sunken); border-radius: var(--r); padding: var(--s2); display: grid; gap: var(--s1); }
.adbox .head { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-note); font-weight: 700; color: var(--muted); }
.ad { border-top: 1px solid var(--line); padding-block: var(--s1); display: grid; gap: var(--s1); }
.ad .age { font-size: var(--fs-note); font-weight: 700; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s1); }
.btn-line { min-height: var(--hit); padding: 0 var(--s2); border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--surface); color: var(--accent); font-weight: 700; cursor: pointer; }
@media (max-width: 559px) { .btns { flex-direction: column; } .btn-line { width: 100%; } }

/* 4-11 比較表のタブ */
.tabs { display: flex; gap: 4px; overflow-x: auto; }
.tabs button { flex: none; min-height: var(--hit); padding: 0 var(--s2); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--surface); color: var(--accent); cursor: pointer; font-size: var(--fs-note); }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }

/* 4-12 手口 */
.scams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s3); }
.scams dl { display: grid; gap: var(--s1); }
.scams dt { font-weight: 700; }
.scams ul { padding-left: 1.2em; display: grid; gap: 4px; }

/* ストアの★の内訳（仕様 4-12 の横棒：高さ12px・角丸6px・溝 sunken・塗り accent の1色） */
.starbars { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s1) var(--s2); align-items: center; }
.starbars .lab { font-size: var(--fs-note); }
.starbars .track { height: 12px; background: var(--sunken); border-radius: 6px; overflow: hidden; }
.starbars .fill { display: block; height: 100%; background: var(--star); border-radius: 6px; }
.starbars .lab { color: var(--star); font-weight: 700; }
.starbars .val { font-size: var(--fs-note); text-align: right; }
.starbars .val small { color: var(--muted); margin-left: 4px; font-size: var(--fs-note); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s2); }
.grid-2 > * { min-width: 0; }

/* トップの挿し絵 */
.hero-top { display: grid; grid-template-columns: 1fr minmax(180px, 260px); gap: var(--s3); align-items: center; }
.hero-text { display: grid; gap: var(--s2); min-width: 0; }
.hero-art { width: 100%; height: auto; }
.hero-art .ha-bubble { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.hero-art .ha-bubble2 { fill: var(--accent-soft); stroke: none; }
.hero-art .ha-bar { fill: var(--chart-line); } .hero-art .ha-bar.soft { opacity: .45; }
.hero-art .ha-line { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; opacity: .55; }
.hero-art .ha-lens { fill: var(--surface); fill-opacity: .7; stroke: var(--ink); stroke-width: 5; }
.hero-art .ha-handle { stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.hero-art .ha-check { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px) { .hero-top { grid-template-columns: 1fr; } .hero-art { max-width: 220px; justify-self: center; order: -1; } }

/* アイコン（線のアイコンを薄い青緑の丸に入れる。見出しの縦棒の代わり） */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.ic-badge.lg { width: 44px; height: 44px; } .ic-badge.lg .ic { width: 24px; height: 24px; }
.ic-badge.sm { width: 26px; height: 26px; } .ic-badge.sm .ic { width: 16px; height: 16px; }
.has-ic { display: flex; align-items: center; gap: var(--s1); }
h2.has-ic, .acc-title.has-ic { border-left: 0 !important; padding-left: 0 !important; }
.scard-k.has-ic { gap: 6px; }

/* ページのまとまり（口コミ／料金とストア／運営会社の確認）。まとまりの間は広く、中は狭く */
.part { display: grid; gap: var(--s2); margin-top: var(--s4); scroll-margin-top: 64px; }
.part-head { background: var(--band); color: var(--on-band); border-radius: var(--r); padding: var(--s2) var(--s3); display: grid; gap: 4px; }
.part-head h2 { font-size: 24px; border-left: 0; padding-left: 0; color: var(--on-band); }
.part-head p { color: var(--on-band); opacity: .8; font-size: var(--fs-note); }
.part-head .ic-badge { background: var(--on-band); color: var(--band); }
@media (max-width: 559px) { .part-head { padding: var(--s2); } .part-head h2 { font-size: 21px; } }
.part .panel { scroll-margin-top: 64px; }

/* ストアの評価とダウンロード数：2枚のカードを横に並べる（スマホでも2列） */
.scards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.scard { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2); display: grid; gap: 2px; align-content: start; min-width: 0; }
.scard-k { font-size: var(--fs-note); font-weight: 700; color: var(--muted); }
.scard-v { font-size: var(--fs-box); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.scard-u { font-size: var(--fs-note); margin-bottom: 4px; }
.scard-none { color: var(--muted); }
@media (max-width: 420px) { .scard { padding: 12px; } .scard-v { font-size: 24px; } }

/* 表の「続きを見る」（仕様 4-11：全幅・高さ 48px・1px field・accent 16px/700） */
.btn-more { width: 100%; min-height: 48px; border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--surface); color: var(--accent); font-weight: 700; cursor: pointer; }

/* 開け閉めできる欄（料金など） */
details.acc > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); min-height: var(--hit); padding-right: 32px; position: relative; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary .acc-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); border-left: 4px solid var(--accent); padding-left: var(--s1); line-height: var(--lh-head); }
details.acc > summary::after { content: "開く"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: var(--fs-note); color: var(--accent); font-weight: 700; }
details.acc[open] > summary::after { content: "閉じる"; }
details.acc > .acc-body { display: grid; gap: var(--s2); margin-top: var(--s2); }
/* 欄の中の小さな開け閉め（業者の手口の言葉など）：見出しは h3 の大きさ、縦棒なし、上に線 */
details.acc.sub { border-top: 1px solid var(--line); padding-top: var(--s1); }
details.acc.sub > summary .acc-title { font-family: var(--font-body); font-size: var(--fs-body); border-left: 0; padding-left: 0; }

/* この1年の口コミでわかったこと（3つの問いのカード＋共通の目盛りの横棒） */
/* 「この1年の口コミでわかったこと」は、ページで1つだけの要点の枠（届出と会社情報の ul.findings と名前がぶつからないよう keypoints）（濃い枠線＋上に黄色の太線）。中のカードは薄い地で枠と分ける */
.keypoints { background: var(--surface); border: 2px solid var(--line-strong); border-top: 6px solid var(--star); border-radius: var(--r); padding: var(--s3); }
.keypoints-eyebrow { display: inline-block; justify-self: start; background: var(--star); color: #15252A; font-weight: 700; font-size: var(--fs-note); padding: 2px 10px; border-radius: var(--r-label); }
.keypoints > h2 { font-size: 26px; }
.keypoints .qcard { background: var(--sunken); border-color: transparent; }
.keypoints .plainbox { background: var(--bg); }
.keypoints .qtrack { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 559px) { .keypoints { padding: var(--s2); } .keypoints > h2 { font-size: 22px; } }
.qcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s2); }
.qcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2); display: grid; gap: var(--s1); align-content: start; }
.qcard h3 { font-family: var(--font-display); font-size: var(--fs-h2); }
.qrow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab val" "bar bar"; gap: 4px var(--s1); align-items: end; }
.qlab { grid-area: lab; font-size: var(--fs-note); }
.qval { grid-area: val; text-align: right; white-space: nowrap; }
.qval b { font-size: var(--fs-h2); }
.qval small { margin-left: 6px; color: var(--muted); font-size: var(--fs-note); }
.qtrack { grid-area: bar; position: relative; height: 12px; background: var(--sunken); border-radius: 6px; }
.qfill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart-line); border-radius: 6px; }
.qpeer { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.qrow.small .qval b { font-size: var(--fs-body); }
.qrow.small .qtrack { height: 8px; }
.qsubhead { font-size: var(--fs-note); font-weight: 700; color: var(--muted); margin-top: 4px; }

/* 年ごとの推移（小さなグラフを並べる。線は --chart-line の1色・2px、罫線と目盛りは薄く） */
.trendgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--s2) var(--s3); }
.trendpanel { margin: 0; min-width: 0; }
.trendpanel figcaption { font-size: var(--fs-note); font-weight: 700; margin-bottom: 4px; }
.trendbox { position: relative; }
svg.trend { width: 100%; height: auto; display: block; touch-action: pan-y; }
svg.trend .grid { stroke: var(--line); stroke-width: 1; }
svg.trend .axis { fill: var(--muted); font-size: var(--fs-axis); font-family: var(--font-body); }
svg.trend .line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.trend .bar { fill: var(--chart-line); }
svg.trend .end { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
svg.trend .area { fill: var(--chart-line); opacity: .12; stroke: none; }
svg.trend .peak { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
svg.trend .peaklabel { fill: var(--ink); font-size: var(--fs-axis); font-weight: 700; font-family: var(--font-body); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
svg.trend .endlabel { fill: var(--ink); font-size: var(--fs-axis); font-weight: 700; font-family: var(--font-body); }
svg.trend .cross { stroke: var(--muted); stroke-width: 1; }
svg.trend .hoverdot { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
.trendbox .tip { position: absolute; top: -6px; transform: translateY(-100%); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-float); padding: 4px 8px; font-size: var(--fs-note); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }

/* グラフの下の1行と、見解・フォロー・対策 */
.trend-cap { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--ink); margin-top: 4px; }
.ins-block { border-top: 1px solid var(--line); padding-top: var(--s2); }
details.ins > .acc-body b { font-size: var(--fs-note); color: var(--muted); }
details.ins > .acc-body p { margin-top: 2px; }
.ins-follow { background: var(--sunken); border-radius: var(--r-sm); padding: var(--s1) var(--s2); }
.ins-tips ul { margin: 4px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }

/* グラフ1枚分の「見解と対策」（小さく、その場で開く） */
details.ins-mini { margin-top: 4px; font-size: var(--fs-note); line-height: var(--lh-note); }
details.ins-mini > summary { cursor: pointer; color: var(--accent); font-weight: 700; list-style: none; display: inline-flex; align-items: center; min-height: 32px; }
details.ins-mini > summary::-webkit-details-marker { display: none; }
details.ins-mini > summary::after { content: " ›"; }
details.ins-mini[open] > summary::after { content: " ×"; }
.ins-body { display: grid; gap: 6px; padding: var(--s1) 0 0; border-top: 1px solid var(--line); }
.ins-body p { margin: 0; }
.ins-body .ins-follow { background: var(--sunken); border-radius: var(--r-sm); padding: 6px 10px; }
.ins-body .ins-h { font-weight: 700; color: var(--muted); }
.ins-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; }

/* 話題ごとの小見出し＋グラフ＋説明 */
.tsec { border-top: 1px solid var(--line); padding-top: var(--s3); display: grid; gap: var(--s2); }
.tsec h3 { font-family: var(--font-display); font-size: var(--fs-h2); }
.tsec-chart { width: 100%; } /* PC は横長のグラフ、スマホは今の形（only-pc / only-sp で出し分け） */
.tsec-chart, .tsec-text { min-width: 0; }
.tsec-text { display: grid; gap: var(--s2); }
.tsec-k { font-size: var(--fs-note); font-weight: 700; color: var(--muted); }
.tsec-follow { background: var(--sunken); border-radius: var(--r-sm); padding: var(--s1) var(--s2); display: grid; gap: 4px; }
.tsec-tips { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }

/* PC とスマホで別の絵を出す */
.only-sp { display: none; }
@media (max-width: 759px) { .only-pc { display: none; } .only-sp { display: block; } }

/* 話題の欄の「わかったこと・補足・気をつけること」：左に見出し・右に中身の表（届出と会社情報と同じ形）。色の箱は使わない */
.tdl { display: grid; margin: 0; border-top: 1px solid var(--line-strong); }
.tdl > div { display: grid; grid-template-columns: 9em 1fr; gap: var(--s1) var(--s3); padding-block: var(--s2); border-bottom: 1px solid var(--line); }
.tdl dt { font-weight: 700; font-size: var(--fs-note); color: var(--muted); padding-top: 2px; }
.tdl dd { margin: 0; min-width: 0; }
.tdl ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.period { font-size: var(--fs-note); color: var(--muted); }
.period .num { color: var(--ink); font-weight: 700; white-space: nowrap; }
/* 3つの行に差をつける（2026-11-10）：わかったこと＝主役で濃く大きく／補足＝控えめ／気をつけること＝緑の見出しと四角い点。色の箱やアイコンは使わない */
/* 主役の行だけ薄い地。表の見出し行のように角を丸めず、上下の罫線と同じ幅で（2026-11-10） */
.tdl > div { padding-inline: var(--s2); }
.tdl .r-main { background: var(--bg); }
.tdl .r-main dt { color: var(--ink); font-size: var(--fs-body); }
.tdl .r-main dd { font-size: 17px; line-height: 1.8; }
.tdl .r-sub dt { font-weight: 400; }
.tdl .r-sub dd { font-size: 15px; color: var(--muted); }
.tdl .r-tips dt { color: var(--accent); }
.tdl .r-tips dd { font-size: 15px; }
.tdl .r-tips ul { list-style: square; }
.tdl .r-tips li::marker { color: var(--accent); }
/* 話題の欄の「共通の注意へ」の1行と、話題の後ろのまとめ（2026-11-10：同じ注意のくり返しをやめた） */
.tdl .r-tips .tip-more { margin-top: 6px; font-size: var(--fs-note); color: var(--muted); }
.tdl .r-tips ul + .tip-more { margin-top: 8px; }
.tdl .r-sub dd p + p { margin-top: 6px; }
.tsec-care { scroll-margin-top: 72px; }
@media (max-width: 559px) { .tdl > div { grid-template-columns: 1fr; gap: 4px; } }

/* アプリのページのタイトルの帯（参考：占い調査団の記事の頭。濃い帯・小さな札・白い見出し・数字のカード・下に色の線） */
.app-hero { background: var(--band); color: var(--on-band); border-bottom: 3px solid var(--star); padding-inline: var(--s2); }
.app-hero-in { max-width: var(--page); margin: 0 auto; padding-block: var(--s4) 28px; display: grid; gap: var(--s2); }
.app-hero-eyebrow { color: var(--star); font-weight: 700; font-size: var(--fs-note); }
.app-hero h1 { color: var(--on-band); font-size: 28px; line-height: 1.45; text-wrap: wrap; word-break: auto-phrase; }
.app-hero h1 .nobr { white-space: nowrap; }
.app-hero-title { display: flex; align-items: center; gap: var(--s2); }
.app-hero-title .app-icon { border-color: rgba(255, 255, 255, .25); }
.app-hero-title .app-icon-text { background: var(--on-band); color: var(--band); border-color: var(--on-band); }
.app-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); font-size: var(--fs-note); opacity: .9; }
.app-hero-pr { border: 1px solid currentColor; padding: 2px 8px; border-radius: 2px; }
/* トップの帯（アプリのページの帯と同じ色・下の黄色の線。面の色だけで締め、影やグラデーションは使わない） */
.top-hero { background: var(--band); color: var(--on-band); border-bottom: 3px solid var(--star); padding-inline: var(--s2); }
.top-hero-in { max-width: var(--page); margin: 0 auto; padding-block: 48px 40px; display: grid; gap: var(--s3); }
.top-hero-main { display: grid; grid-template-columns: 1fr minmax(180px, 240px); gap: var(--s4); align-items: center; }
.top-hero-text { display: grid; gap: var(--s2); min-width: 0; }
.top-hero-eyebrow { color: var(--star); font-weight: 700; font-size: var(--fs-note); }
.top-hero h1 { color: var(--on-band); font-size: 40px; line-height: 1.35; text-wrap: wrap; word-break: auto-phrase; }
.top-hero .lead { color: var(--on-band); opacity: .88; }
.top-hero .lead b { color: var(--star); font-weight: 700; }
.top-hero .search input { height: 52px; border-color: transparent; }
.top-hero .hero-art .ha-lens { stroke: var(--on-band); fill: var(--band); fill-opacity: .4; }
.top-hero .hero-art .ha-handle { stroke: var(--on-band); }
.top-hero .hero-art .ha-check { stroke: var(--star); }
.top-hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: var(--s2); }
.top-hero-facts li { display: grid; gap: 2px; padding-inline: var(--s3); border-left: 1px solid rgba(255, 255, 255, .22); }
.top-hero-facts li:first-child { padding-left: 0; border-left: 0; }
.top-hero-facts b { font-size: 26px; line-height: 1.2; color: var(--on-band); }
.top-hero-facts b small { font-size: var(--fs-note); margin-left: 2px; font-weight: 700; }
.top-hero-facts span { font-size: var(--fs-note); opacity: .8; }
@media (max-width: 559px) {
  .top-hero-in { padding-block: var(--s3); }
  .top-hero-main { grid-template-columns: 1fr; }
  .top-hero .hero-art { display: none; }
  .top-hero h1 { font-size: 28px; }
  .top-hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .top-hero-facts li, .top-hero-facts li:first-child { padding: 0 0 0 12px; border-left: 2px solid var(--star); }
  .top-hero-facts b { font-size: 22px; }
}
@media (max-width: 559px) { .app-hero h1 { font-size: 22px; } .app-hero-in { padding-block: var(--s3) var(--s3); } .app-hero-title { align-items: flex-start; gap: 12px; } .app-hero-title .app-icon { width: 52px; height: 52px; margin-top: 4px; } }

/* 4-13 フッター */
footer.site { border-top: 1px solid var(--line); padding-inline: var(--s2); padding-block: var(--s4); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--muted); background: var(--surface); }
footer.site .in { max-width: var(--page); margin: 0 auto; display: grid; gap: var(--s3); }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s3); }
.foot-brand { display: grid; gap: var(--s1); align-content: start; }
.foot-brand p { max-width: 24em; }
footer.site nav { display: grid; align-content: start; }
.foot-h { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
footer.site nav a, footer.site nav .soon { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; }
footer.site nav a { color: var(--ink); text-decoration: none; }
footer.site nav a:hover { text-decoration: underline; }
.soon small { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.foot-copy { border-top: 1px solid var(--line); padding-top: var(--s2); }
@media (max-width: 559px) { .foot-cols { grid-template-columns: 1fr; } }
.report-link { justify-self: end; font-size: var(--fs-note); color: var(--muted); }

/* 口コミランキング（2026-11-10）：重視する点ごとの順位。金・銀・銅や上位の色分けはしない（デザイン調査メモ）。順位の箱は全カード同じ見た目 */
.rank-link { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 700; }
.rank-points li { font-size: 17px; line-height: 1.8; }
.ranklist { display: grid; gap: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: 0 var(--r) var(--r) var(--r); padding: var(--s2); }
.rankcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s2) var(--s3); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.rank-left { display: grid; gap: var(--s1); align-content: start; }
.rank-right { display: grid; gap: var(--s1); align-content: start; }
.rank-head { display: flex; align-items: center; gap: var(--s2); }
.rank-head .app-icon { flex: none; }
.rank-head .rank-name { min-width: 0; }
.rank-head .rank-icon-blank { width: 48px; height: 48px; font-size: 20px; }
@media (max-width: 559px) { .rank-head { gap: 12px; } }
.rank-no { flex: none; display: inline-flex; align-items: baseline; gap: 2px; min-width: 64px; justify-content: center; padding: 4px 10px; border: 2px solid var(--line-strong); border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-note); }
.rank-no b { font-size: 28px; line-height: 1.2; }
.rank-head h3 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-head); }
.rank-head h3 a { color: var(--ink); }
.rank-head .co { font-size: var(--fs-note); color: var(--muted); }
.rank-more { display: inline-flex; align-items: center; min-height: var(--hit); font-size: var(--fs-note); font-weight: 700; }
.rank-row .qfill { opacity: .35; }
.rank-row[data-on] .qfill { opacity: 1; }
.rank-row[data-on] .qlab { font-weight: 700; }
.rank-row:not([data-on]) .qval b { font-weight: 400; }
@media (max-width: 759px) { .rankcard { grid-template-columns: 1fr; } }
@media (max-width: 559px) {
  .ranklist { padding: var(--s1); border-radius: var(--r); }
  .rankcard { padding: 12px; }
  /* スマホは4つのタブが横に流れて見落とされるので、2列×2段にする */
  .rank-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 4px; overflow: visible; }
  .rank-tabs button { border-bottom: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; line-height: 1.4; }
}
/* ランキングのページの文（2026-11-10）：冒頭文・選ぶポイント・サイトごとの特徴・よくある質問。
   文は枠の右端まで使って折り返す（アプリのページの要点の文と同じ。幅の上限を付けると右が空く） */
.rank-intro { display: grid; gap: var(--s1); font-size: 17px; line-height: 1.85; }
.rank-points-list { display: grid; gap: var(--s2); }
.rank-point { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); display: grid; gap: var(--s1); }
.rank-point h3 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-head); display: flex; align-items: baseline; gap: var(--s1); }
.rank-point h3 .num { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--band); color: var(--on-band); font-size: var(--fs-body); }
.rank-dl { display: grid; margin: 0; border-top: 1px solid var(--line); }
.rank-dl > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px var(--s2); padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.rank-dl dt { font-weight: 700; }
.rank-dl dd { margin: 0; font-size: 15px; }
/* サイトごとの特徴：アフィリエイトサイトでよく見る「頭（アイコン・名前・目玉の数字）→スペック表＋良い点・気になる点→説明→ボタン」のカード。
   色の塗り分け・順位の金銀銅は使わない。2つのボタンは同じ大きさ・同じ強さ（デザイン仕様 V14） */
.site-cards { display: grid; gap: var(--s3); }
.site-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; display: grid; }
.site-card-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--sunken); border-bottom: 1px solid var(--line); }
.app-icon-blank { width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--font-display); font-size: 24px; color: var(--muted); }
.site-card-name { flex: 1; min-width: 0; }
.site-card-name h3 { font-family: var(--font-display); font-size: 22px; line-height: var(--lh-head); }
.site-card-name h3 a { color: var(--ink); }
.site-card-name .co { font-size: var(--fs-note); color: var(--muted); }
.site-card-key { flex: none; display: grid; justify-items: end; text-align: right; }
.site-card-key span { font-size: var(--fs-note); color: var(--muted); }
.site-card-key b { font-size: 26px; line-height: 1.2; }
.site-card-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s3); padding: var(--s2) var(--s3) 0; }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
table.spec th, table.spec td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.spec tr:first-child th, table.spec tr:first-child td { border-top: 1px solid var(--line-strong); }
table.spec th { width: 11em; background: var(--sunken); font-weight: 700; font-size: var(--fs-note); color: var(--ink); white-space: nowrap; }
table.spec td .note { display: inline; }
.procon { display: grid; gap: var(--s2); align-content: start; }
.procon > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px var(--s2); }
.procon .pc-h { font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.procon .pc-h i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 14px; }
.procon .pro .pc-h i { background: var(--accent); color: var(--on-accent); }
.procon .con .pc-h i { background: var(--warn); color: var(--on-accent); }
.procon ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 15px; }
.site-card-text { display: grid; gap: var(--s1); padding: var(--s2) var(--s3) 0; }
.site-card > .btns { padding: var(--s2) var(--s3) var(--s3); }
.site-card > .btns .btn-line { flex: 1 1 240px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 759px) { .site-card-body { grid-template-columns: 1fr; } }
@media (max-width: 559px) {
  .site-card-head, .site-card-body, .site-card-text, .site-card > .btns { padding-inline: var(--s2); }
  .site-card-head { flex-wrap: wrap; }
  .site-card-key { width: 100%; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--s1); }
  table.spec th { width: 8.5em; white-space: normal; }
  /* スマホはボタンを縦に並べる（サイト共通の .btns の決まり）。横並び用の幅の指定が高さに効かないように外す */
  .site-card > .btns .btn-line { flex: none; width: 100%; }
}
details.faq { border-top: 1px solid var(--line); }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq > summary { list-style: none; cursor: pointer; min-height: var(--hit); display: flex; align-items: center; gap: var(--s1); padding: var(--s1) 32px var(--s1) 0; position: relative; font-weight: 700; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::before { content: "Q"; flex: none; font-family: var(--font-id); color: var(--accent); }
details.faq > summary::after { content: "開く"; position: absolute; right: 0; font-size: var(--fs-note); color: var(--accent); }
details.faq[open] > summary::after { content: "閉じる"; }
.faq-a { display: grid; gap: var(--s1); padding: 0 0 var(--s2); }
/* ポイントや「気をつけること」の中の小見出し（運営の返信・キャッシュバッカーなど） */
.rank-sub { font-family: var(--font-display); font-size: 18px; line-height: var(--lh-head); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
@media (max-width: 559px) {
  .rank-intro { font-size: 16px; }
  .rank-point { padding: var(--s2); }
  .rank-dl > div { grid-template-columns: 1fr; }
}

@media print { :root { --bg: #fff; } .toc, .adbox, header.site nav, .menu-btn, .sample-bar { display: none; } .panel { break-inside: avoid; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* データで答える記事（2026-11-10）：表の中の小さな棒・出会い系とマッチングアプリの比較・気をつけること */
.g-cell { min-width: 10em; white-space: nowrap; }
.g-cell .num { display: inline-block; min-width: 3.2em; text-align: right; margin-right: 8px; }
.g-bar { display: inline-block; vertical-align: middle; width: 5em; height: 8px; }
.g-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.g-side { background: var(--sunken); border-radius: var(--r-sm); padding: var(--s2); display: grid; gap: var(--s1); }
.g-side h3 { font-size: var(--fs-body); }
.g-side p { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 6px; }
.g-side .k { font-size: var(--fs-note); color: var(--muted); }
.g-side b { font-size: 24px; }
.g-side .u { font-size: var(--fs-note); color: var(--muted); }
.care-list { padding-left: 1.2em; display: grid; gap: var(--s1); }
@media (max-width: 559px) { .g-compare { grid-template-columns: 1fr; } }
.g-cards { display: grid; gap: var(--s2); margin-top: var(--s2); }
.g-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.g-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.g-card-b { display: grid; grid-template-columns: 1fr 1fr minmax(0, .9fr); }
.g-blk { padding: var(--s2) var(--s3); display: grid; gap: 12px; align-content: start; min-width: 0; }
.g-blk + .g-blk { border-left: 1px solid var(--line); }
.g-blk-h { font-weight: 700; font-size: var(--fs-note); display: flex; justify-content: space-between; gap: 8px; }
.g-price { background: var(--sunken); }
.g-yen { display: grid; gap: 2px; }
.g-yen .k, .g-calc .k { font-size: 12px; color: var(--muted); display: block; }
.g-yen b { font-size: 28px; line-height: 1.2; }
.g-calc { font-size: var(--fs-note); line-height: var(--lh-note); }
.g-card-f { padding: var(--s2) var(--s3); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.g-row.warn .qfill { background: var(--warn); }
@media (max-width: 899px) { .g-card-b { grid-template-columns: 1fr 1fr; } .g-price { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); } }
@media (max-width: 559px) { .g-card-b { grid-template-columns: 1fr; } .g-blk + .g-blk { border-left: 0; border-top: 1px solid var(--line); } .g-card-h, .g-blk, .g-card-f { padding-inline: var(--s2); } }
.g-more { font-size: var(--fs-note); }
.g-sub { margin-top: var(--s2); }
.g-words td { min-width: 12em; font-size: var(--fs-note); line-height: var(--lh-note); }
.g-words th.sticky-col { width: 12em; }
.g-words tr.g-grp th, .g-words tr.g-grp td { background: var(--accent-soft); font-weight: 700; }
.g-words tr.g-in th.sticky-col { padding-left: 2em; font-weight: 400; }
.g-words tr.g-unused th, .g-words tr.g-unused td { background: var(--sunken); }
/* サイトごとの特徴のカードの棒の帯（見出しの下・2列） */
.site-card .g-bars { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.site-card .g-bars .g-blk { padding: var(--s2) var(--s3); }
.site-card .g-bars .g-blk + .g-blk { border-left: 1px solid var(--line); }
@media (max-width: 719px) { .site-card .g-bars { grid-template-columns: 1fr; } .site-card .g-bars .g-blk + .g-blk { border-left: 0; border-top: 1px solid var(--line); } .site-card .g-bars .g-blk { padding-inline: var(--s2); } }
/* 選ぶポイント（番号つきの3つ） */
.g-points { display: grid; gap: var(--s2); }
.g-point { border-left: 4px solid var(--accent); background: var(--sunken); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s2); display: grid; gap: 8px; }
.g-point-h { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.g-point-no { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 15px; }