/*
 * 公開サイトの CSS（ビルド不要・この 1 ファイルだけ）。
 * デザイン：docs/www-design.md（Claude のデザイン「wwebdeww 公開サイト リデザイン案」）
 * PC とスマホは同じ HTML。切り替えは 768px。色は :root のトークンだけを使う（足さない）
 */
:root {
  --ground: #F5F6F8;
  --surface: #FFFFFF;
  --ink: #12161C;
  --ink-2: #2A313C;
  --sub: #4A5361;
  --line: #D9DDE3;
  --line-soft: #E4E7EC;
  --line-strong: #8A93A1;
  --chip-line: #C3C9D2;
  --placeholder: #EDEFF3;
  --accent: #1B45C4;
  --accent-hover: #12308C;
  --accent-tint: #E3E9FB;
  --accent-on-dark: #4F7BFF;
  --hero-sub: #C9D0DA;
  --hero-line: #3A4250;
  --good: #0B6B57;
  --mid: #8A5300;
  --bad: #B3261E;
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-chip: 4px;
  --container: 1160px;
  --sans: 'IBM Plex Sans JP', 'Noto Sans JP', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ground);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
body.is-locked { overflow: hidden; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); }
.wrap { max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.note { font-size: 13px; color: var(--sub); }
.note--s { font-size: 12px; }
.more-link { font-weight: 600; font-size: 14px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--16 { gap: 16px; }

/* ---------- ヘッダー ---------- */
.hd { background: var(--surface); border-bottom: 1px solid var(--line); }
.hd-in { max-width: var(--container); margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.logo { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-name { font-family: var(--mono); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.logo-tag { font-size: 12px; color: var(--sub); }
.gnav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.gnav a { padding: 10px 14px; min-height: 44px; display: flex; align-items: center; text-decoration: none; color: var(--ink); font-weight: 500; }
.gnav a:hover { color: var(--accent-hover); }
.gnav a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); }
.search { display: flex; }
.search input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); font-size: 14px; background: var(--surface); }
.search button { width: 48px; height: 44px; border: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--ink); color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hd .search { flex: 0 1 300px; min-width: 200px; }
.menu-btn { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }

/* ---------- スマホのメニュー（全画面） ---------- */
.mm { position: fixed; inset: 0; z-index: 100; background: var(--surface); display: flex; flex-direction: column; font-size: 16px; line-height: 1.6; overflow-y: auto; }
.mm-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line); }
.mm-head .logo { min-height: 48px; }
.mm-head .logo-name { font-size: 20px; }
.mm-head .menu-btn { display: flex; }
.mm-body { padding: 20px; display: flex; flex-direction: column; gap: 24px; flex: 1; }
.mm .search input { height: 52px; padding: 0 14px; font-size: 16px; }
.mm .search button { width: 56px; height: 52px; }
.mm-nav { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.mm-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.mm-nav .t { display: flex; flex-direction: column; }
.mm-nav .t b { font-size: 18px; font-weight: 700; }
.mm-nav .t span { font-size: 12px; color: var(--sub); }
.mm-nav .n { font-family: var(--mono); font-size: 14px; color: var(--sub); white-space: nowrap; }
.mm-nav svg { color: var(--sub); flex: none; }
.mm-pages { display: flex; flex-direction: column; font-size: 15px; margin-top: auto; }
.mm-pages a { display: flex; align-items: center; min-height: 44px; }

/* ---------- フッター ---------- */
.ft { background: var(--surface); border-top: 1px solid var(--line); }
.ft-in { max-width: var(--container); margin: 0 auto; padding: 40px 24px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 32px; }
.ft-brand { display: flex; flex-direction: column; gap: 8px; }
.ft-brand .logo-name { font-size: 18px; }
.ft-brand span + span { font-size: 13px; color: var(--sub); }
.ft nav { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ft nav .h { font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 4px; }
.ft nav a { padding: 6px 0; }
.ft-copy { max-width: var(--container); margin: 0 auto; padding: 16px 24px 32px; font-size: 12px; color: var(--sub); }

/* ---------- パンくず ---------- */
.bc { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--sub); }
.bc a { display: inline-block; }

/* ---------- チップ・ボタン ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--chip-line); border-radius: var(--radius-control); text-decoration: none; color: var(--ink); font-size: 14px; background: var(--surface); }
.chip--s { min-height: 36px; }
.chip .n, .n-mono { font-family: var(--mono); font-size: 12px; color: var(--sub); }
a.chip:hover { border-color: var(--accent); color: var(--accent-hover); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tags > li { padding: 2px 10px; border: 1px solid var(--chip-line); border-radius: var(--radius-chip); font-size: 12px; color: var(--ink-2); }
.tags--link > li { padding: 0; border: 0; }
.tags--link a { display: block; padding: 6px 12px; border: 1px solid var(--chip-line); border-radius: var(--radius-chip); font-size: 13px; color: var(--ink); text-decoration: none; }
.tags--link a:hover { border-color: var(--accent); color: var(--accent-hover); }
.pill { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; background: var(--accent-tint); border-radius: 18px; text-decoration: none; color: var(--accent-hover); font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--ink); border-radius: var(--radius-control); text-decoration: none; color: var(--ink); font-weight: 600; background: var(--surface); cursor: pointer; }
.btn:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.btn--primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: #FFFFFF; }
.select { height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); font-size: 14px; background: var(--surface); color: var(--ink); max-width: 100%; }

/* ---------- 見出し ---------- */
.sec { padding-top: 40px; padding-bottom: 24px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.sec-head--tight { gap: 4px 16px; margin-bottom: 0; }
.h-l { font-size: 24px; line-height: 1.4; }
.h-m { font-size: 20px; line-height: 1.5; }
.h-s { font-size: 18px; line-height: 1.5; }
.h-xs { font-size: 16px; line-height: 1.5; }
.count { font-family: var(--mono); font-weight: 500; font-size: 20px; color: var(--sub); white-space: nowrap; }
.h-m .count { font-size: 16px; }
.rule { border-top: 2px solid var(--ink); padding-top: 20px; }

/* ---------- カード ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.grid--230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
/* 件数が少ないとき、カードが横に伸びきらないようにする */
.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid--230.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: var(--ink); }
a.card:hover { color: var(--ink); border-color: var(--line-strong); }
.card .shot img, .prow .shot img, .mini .shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.card .shot { display: block; border-bottom: 1px solid var(--line-soft); }
.card-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-meta { font-size: 12px; color: var(--sub); }
.card-name { font-size: 17px; font-weight: 700; line-height: 1.4; }
.card-desc { font-size: 13px; color: var(--sub); line-height: 1.6; }
.card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.card-foot strong { font-family: var(--mono); font-size: 16px; }
.scard .card-body { padding: 16px; }
.grid--230 .scard .card-body { padding: 14px 16px 16px; gap: 6px; }
.scard .card-name { font-size: 15px; line-height: 1.5; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.panel > p { color: var(--sub); font-size: 14px; }
.panel > .more-link { margin-top: auto; }

/* ---------- 広告枠 ---------- */
.ad { min-height: 120px; }
.ad--dummy { border: 1px dashed var(--line-strong); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; color: var(--sub); font-family: var(--mono); font-size: 13px; background: var(--placeholder); }

/* ---------- トップ ---------- */
.hero { background: var(--ink); color: #FFFFFF; }
.hero-in { max-width: var(--container); margin: 0 auto; padding: 64px 24px 56px; display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-end; }
.hero-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.3; font-weight: 700; letter-spacing: 0.01em; text-wrap: balance; }
.hero-main > p { max-width: 560px; color: var(--hero-sub); font-size: 16px; }
.hero-search { display: flex; flex-wrap: wrap; gap: 8px; max-width: 600px; }
.hero-search input { flex: 1 1 280px; min-width: 0; height: 56px; padding: 0 16px; border: 0; border-radius: var(--radius-control); font-size: 16px; background: #FFFFFF; color: var(--ink); }
.hero-search button { height: 56px; padding: 0 28px; border: 0; border-radius: var(--radius-control); background: var(--accent-on-dark); color: #0B0E13; font-weight: 700; font-size: 16px; cursor: pointer; }
.hero-stats { flex: 1 1 300px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hero-line); }
.hero-stats > div { padding: 16px 16px 16px 0; }
.hero-stats > div:nth-child(even) { padding: 16px 0 16px 16px; border-left: 1px solid var(--hero-line); }
.hero-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--hero-line); }
.hero-stats dt { font-size: 12px; color: var(--hero-sub); }
.hero-stats dd { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.hero-stats dd small { font-size: 14px; margin-left: 4px; }
.hero-stats dd.text { font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 2.2; }
.about-data { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-start; border-top: 2px solid var(--ink); padding-top: 24px; }
.about-data h2 { flex: 1 1 220px; }
.about-data p { flex: 999 1 480px; min-width: 0; color: var(--ink-2); }

/* ---------- 一覧・詳細の 2 カラム ---------- */
.list-page { padding-top: 20px; padding-bottom: 64px; }
.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 20px 0 8px; }
.list-head h1 { font-size: 30px; line-height: 1.4; }
.sortbox { display: flex; align-items: center; gap: 8px; }
.sortbox label { font-size: 13px; color: var(--sub); white-space: nowrap; }
.lead { margin: 0 0 24px; max-width: 760px; color: var(--ink-2); }
.cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cols--detail { gap: 32px 40px; padding-top: 32px; padding-bottom: 64px; }
.col-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cols--detail .col-main { gap: 40px; }
.col-side { flex: 1 1 240px; max-width: 100%; }
.cols--detail .col-side { flex-basis: 280px; display: flex; flex-direction: column; gap: 20px; }

/* 絞り込み（スマホでは畳む。PC では常に開く＝ site.js） */
.filter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.filter > summary { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 20px 0; font-size: 16px; font-weight: 700; list-style: none; pointer-events: none; }
.filter > summary::-webkit-details-marker { display: none; }
.filter > summary svg, .filter > summary .sel { display: none; }
.filter-body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 20px; }
.filter-clear { font-size: 13px; align-self: flex-end; margin-top: -24px; position: relative; }
.filter fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filter legend { padding: 0; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.filter .check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; cursor: pointer; }
.filter .check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.filter .check .name { flex: 1; }
.selected { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.selected > span { color: var(--sub); }

/* 制作会社の行 */
.prows { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.prow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 16px 24px; }
.prow .shot { flex: 0 1 200px; min-width: 140px; align-self: flex-start; }
.prow .shot img { border: 1px solid var(--line-soft); border-radius: var(--radius-control); }
.prow-body { flex: 999 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.prow-body h2, .prow-body h3 { font-size: 19px; line-height: 1.4; }
.prow-body h2 a, .prow-body h3 a { color: var(--ink); text-decoration: none; }
.prow-body h2 a:hover, .prow-body h3 a:hover { color: var(--accent-hover); text-decoration: underline; }
.prow-body p { font-size: 14px; color: var(--ink-2); }
.prow-body .tags { margin-top: 4px; }
.prow-nums { flex: 1 1 220px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
.prow-nums dt { font-size: 12px; color: var(--sub); }
.prow-nums dd { font-family: var(--mono); font-size: 26px; font-weight: 500; line-height: 1.3; }
.prow-nums dd small { font-size: 13px; margin-left: 2px; font-family: var(--sans); }
.prow-nums .wide { grid-column: 1 / -1; }
.prow-nums .wide dd { font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.7; }

/* ページ送り */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0; }
.pager a, .pager span { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--chip-line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; }
.pager a:hover { border-color: var(--accent); color: var(--accent-hover); }
.pager [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; font-weight: 700; }
.pager .is-off { color: var(--sub); background: var(--placeholder); }
.pager .gap { border: 0; background: none; min-width: 0; padding: 0 4px; }

/* ---------- 詳細ページの見出し帯 ---------- */
.phead { background: var(--surface); border-bottom: 1px solid var(--line); }
.phead-in { max-width: var(--container); margin: 0 auto; padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.phead-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.phead-title { display: flex; flex-direction: column; gap: 6px; flex: 999 1 420px; min-width: 0; }
.phead-title h1 { font-size: 34px; line-height: 1.35; }
.phead--site .phead-title h1 { font-size: 32px; }
.phead-meta { font-size: 13px; color: var(--sub); }
.phead-url { font-family: var(--mono); font-size: 14px; color: var(--sub); }
.phead-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice { padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--mid); border-radius: var(--radius-control); background: var(--surface); font-size: 14px; }
.notice--done { border-left-color: var(--good); }
.notice--error { border-left-color: var(--bad); }
.notice ul { padding-left: 1.2em; }

.fig { display: flex; flex-direction: column; gap: 8px; }
.fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-card); }
.fig figcaption { font-size: 12px; color: var(--sub); }
.fig--pair { flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.fig--pair .pc { flex: 999 1 420px; min-width: 0; }
.fig--pair .sp { flex: 0 0 150px; }

/* スコア */
.v-good { color: var(--good); }
.v-average { color: var(--mid); }
.v-poor { color: var(--bad); }
.v-none { color: var(--sub); }
.verdict { font-size: 13px; font-weight: 700; white-space: nowrap; }
.bar { display: block; height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 6px; background: currentColor; }
.tiles { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); overflow: hidden; }
.tile { padding: 20px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin: 0 -1px -1px 0; }
.tile .label { font-size: 13px; color: var(--sub); }
.tile .val { display: flex; align-items: baseline; gap: 8px; }
.tile .val b { font-family: var(--mono); font-size: 36px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-row > .label { font-size: 13px; font-weight: 700; }

.tbox { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.tbl { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl thead th { padding: 12px 20px; font-size: 12px; font-weight: 500; color: var(--sub); border-bottom-color: var(--line); }
.tbl tbody th { font-weight: 500; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl .w34 { width: 34%; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl th small, .tbl td small { display: block; font-size: 12px; color: var(--sub); font-weight: 400; }
.tbl .score-cell { display: flex; align-items: center; gap: 10px; }
.tbl .score-cell b { font-family: var(--mono); font-size: 20px; font-weight: 500; min-width: 36px; flex: none; white-space: nowrap; color: var(--ink); }
.tbl .score-cell .bar { flex: 1; min-width: 40px; }
.tbl .score-cell .verdict { font-size: 12px; }
.tbl .vital b { font-family: var(--mono); font-size: 18px; font-weight: 400; }
.tbl .vital .verdict { font-size: 12px; margin-left: 6px; }
.tbl .nodata { color: var(--sub); }
.score { font-family: var(--mono); font-weight: 600; }
.observation { padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }

.kv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 4px 20px; font-size: 14px; }
.kv > div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { flex: 0 0 140px; color: var(--sub); }
.kv dd { font-family: var(--mono); }
.plain-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* サイドの箱 */
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.box .eyebrow { font-size: 12px; font-weight: 700; color: var(--sub); }
.info { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.info dt { font-size: 12px; color: var(--sub); }
.side-list { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.side-list .row { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; text-decoration: none; color: var(--ink); }
.side-list .row:hover { color: var(--accent-hover); }
.side-list .row span { font-size: 13px; color: var(--sub); white-space: nowrap; }
.side-list .more-link { padding: 8px 0; }
.mini { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); }
.mini:hover { color: var(--accent-hover); }
.mini .shot { flex: 0 0 96px; }
.mini .shot img { border-radius: var(--radius-chip); }
.mini .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini .t b { font-weight: 600; font-size: 14px; line-height: 1.5; }
.mini .t span { font-size: 12px; color: var(--sub); }
.side-note { padding: 0 4px; font-size: 13px; color: var(--sub); }

/* 残りを開く */
.more { display: flex; flex-direction: column; gap: 16px; }
.more > summary { align-self: center; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { display: none; }

/* ---------- 本文（Markdown） ---------- */
.narrow { max-width: 808px; margin: 0 auto; padding: 20px 24px 64px; display: flex; flex-direction: column; gap: 24px; }
.narrow h1 { font-size: 30px; line-height: 1.4; }
.md-body { font-size: 16px; line-height: 1.9; text-wrap: pretty; }
.md-body > * + * { margin-top: 1em; }
.md-body h1, .md-body h2 { font-size: 20px; line-height: 1.5; margin-top: 1.8em; }
.md-body h3 { font-size: 17px; line-height: 1.5; margin-top: 1.6em; }
.md-body h4, .md-body h5, .md-body h6 { font-size: 15px; margin-top: 1.4em; }
.md-body > :first-child { margin-top: 0; }
.md-body ul, .md-body ol { padding-left: 1.4em; }
.md-body li + li { margin-top: 0.3em; }
.md-body blockquote { margin-left: 0; margin-right: 0; padding: 4px 16px; border-left: 4px solid var(--line); color: var(--ink-2); }
.md-body code { font-family: var(--mono); font-size: 0.9em; background: var(--placeholder); padding: 1px 4px; border-radius: var(--radius-chip); }
.md-body table, .data-ranking table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; background: var(--surface); }
.md-body table { display: block; overflow-x: auto; }
.md-body th, .md-body td, .data-ranking th, .data-ranking td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.md-body thead th, .data-ranking thead th { font-size: 12px; font-weight: 500; color: var(--sub); }
.data-block { margin: 1.2em 0; }
.data-ranking { overflow-x: auto; }
.data-ranking .rank, .data-ranking .value { text-align: right; white-space: nowrap; font-family: var(--mono); }
.data-sites { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.6; }
.data-sites li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin: 0 !important; }
.data-sites .name { font-weight: 700; }
.data-sites .production { color: var(--sub); font-size: 13px; }
.sources { padding-left: 1.4em; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.sources span { font-size: 12px; color: var(--sub); margin-left: 8px; }
.article-meta { font-size: 13px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.article-lead { font-size: 17px; line-height: 1.9; color: var(--ink-2); }
.article-cards { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.article-cards li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.article-cards .title { font-size: 18px; font-weight: 700; line-height: 1.5; }
.article-cards p { font-size: 14px; color: var(--ink-2); }
.article-cards time { font-size: 12px; color: var(--sub); }
.link-list { list-style: none; display: flex; flex-direction: column; }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; }
.link-list small { font-size: 13px; color: var(--sub); white-space: nowrap; }

/* ---------- 申請フォーム ---------- */
.form { display: flex; flex-direction: column; gap: 20px; }
.form .hp { position: absolute; left: -9999px; }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.form legend, .form .field > span { padding: 0; font-size: 14px; font-weight: 700; margin-bottom: 6px; display: block; }
.form .req { font-size: 12px; font-weight: 700; color: var(--bad); margin-left: 6px; }
.form .radio { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.form .radio input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.form .field { display: block; }
.form input[type=text], .form input[type=email], .form textarea { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); font-size: 16px; }
.form .btn { align-self: flex-start; }

/* ---------- スマホ ---------- */
@media (max-width: 767.98px) {
  .hd-in { padding: 8px 8px 8px 20px; flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
  .hd .logo { min-height: 48px; }
  .hd .logo-name { font-size: 20px; }
  .hd .logo-tag, .hd .gnav, .hd .search { display: none; }
  .hd .menu-btn { display: flex; }

  .hero-in { padding: 40px 24px; }
  .hero-search button { flex: 1 1 100%; }
  .home-cards > :nth-child(n+5) { display: none; }

  .list-head h1 { font-size: 24px; }
  .narrow h1 { font-size: 24px; }
  .cols { gap: 16px; }
  .cols--detail { gap: 32px 40px; }
  .list-page .col-side { flex: 1 1 100%; }
  .filter > summary { align-items: center; min-height: 52px; padding: 0 16px; font-size: 15px; cursor: pointer; pointer-events: auto; }
  .filter > summary svg { display: block; }
  .filter > summary .sel { display: inline; }
  .filter[open] > summary svg { transform: rotate(180deg); }
  .filter-body { padding: 4px 16px 20px; }
  .filter-clear { align-self: flex-start; margin-top: 0; min-height: 32px; }
  .prow { padding: 16px; }
  .prow .shot { flex: 1 1 100%; }

  .phead-title h1 { font-size: 26px; }
  .phead--site .phead-title h1 { font-size: 24px; }
  .phead-actions { flex: 1 1 100%; }
  .phead-actions .btn { flex: 1 1 100%; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .tile { padding: 16px; }
  .tile .val b { font-size: 30px; }
  .fig--pair .pc { flex-basis: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .filter > summary svg { transition: transform 0.15s; }
}