/* 物置 サイズくらべ の見た目
   ============================================================
   ★ 色の変数名は姉妹サイト（hub / babycar）と同じにしてあります ★
     片方だけ直して食い違う事故を防ぐため、名前を揃えています。
   ★ 地味で堅実に ★ 装飾の紋章は置きません。白地・紺 #14507d・文字。
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --card: #ffffff;
  --card-2: #f4f6f8;
  --ink: #1a1d21;
  --head: #14171a;
  --body-text: #33383d;
  --sub: #61686f;
  --line: #e3e6ea;
  --line-strong: #c9cfd6;
  --accent: #14507d;
  --accent-deep: #0e3c60;
  --accent-soft: #e8eff5;
  --on-accent: #ffffff;
  --warn: #8a5a00;
  --radius: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15181c; --card: #1d2126; --card-2: #23282e;
    --ink: #f2f4f6; --head: #ffffff; --body-text: #dfe3e8; --sub: #a5adb5;
    --line: #2e343b; --line-strong: #3d454e;
    --accent: #8dbde0; --accent-deep: #b0d5ef; --accent-soft: #23303c;
    --on-accent: #15181c; --warn: #e0b055;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15181c; --card: #1d2126; --card-2: #23282e;
  --ink: #f2f4f6; --head: #ffffff; --body-text: #dfe3e8; --sub: #a5adb5;
  --line: #2e343b; --line-strong: #3d454e;
  --accent: #8dbde0; --accent-deep: #b0d5ef; --accent-soft: #23303c;
  --on-accent: #15181c; --warn: #e0b055;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--body-text);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.75; font-size:16px }
.wrap { max-width:1000px; margin:0 auto; padding:0 16px }
header { border-bottom:3px solid var(--accent); padding:0 0 16px }
.banner { display:block; width:100%; height:clamp(140px,22vw,240px);
  object-fit:cover; object-position:center 52%; margin:0 0 6px }
.credit { margin:0 0 10px; font-size:.72rem; color:var(--sub); text-align:right }
h1 { font-size:1.35rem; margin:0 0 4px; color:var(--head) }
h2 { font-size:1.1rem; margin:32px 0 10px; padding-left:10px;
  border-left:5px solid var(--accent); color:var(--head) }
.lead { color:var(--sub); font-size:.92rem; margin:0 }
.notice { background:var(--accent-soft); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:12px 14px; margin:18px 0; font-size:.9rem }
.notice p { margin:.35em 0 }
.notice strong { color:var(--accent-deep) }
table { border-collapse:collapse; width:100%; font-size:.86rem }
.scroll { overflow-x:auto }
th,td { border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top }
th { background:var(--card-2); white-space:nowrap; color:var(--head) }
.count { font-size:.85rem; color:var(--sub); margin:6px 0 14px }
.card { border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); padding:14px 16px; margin:0 0 12px }
.card h3 { margin:0; font-size:1.02rem; color:var(--head) }
.maker { display:inline-block; font-size:.75rem; background:var(--accent);
  color:var(--on-accent); border-radius:3px; padding:1px 7px; margin-right:7px; vertical-align:2px }
.sum { margin:6px 0 10px; font-size:.93rem }
.none { color:var(--warn) }
details { margin-top:10px; font-size:.87rem }
summary { cursor:pointer; color:var(--accent) }
a { color:var(--accent) }
.home-link { padding:14px 0 12px; margin:0; font-size:12.5px; display:flex; align-items:center; gap:12px }
.home-link a { color:var(--accent); font-weight:700; text-decoration:none }
.home-link a:hover { text-decoration:underline }
.shops { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0;
  padding-top:10px; border-top:1px dotted var(--line); font-size:.86rem }
.shops-label { color:var(--sub) }
.shops a { display:inline-block; padding:5px 12px; border:1px solid var(--accent);
  border-radius:3px; text-decoration:none }
.shops-note { flex-basis:100%; color:var(--sub); font-size:.76rem }
footer { margin:44px 0 60px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.83rem; color:var(--sub) }
.theme-switch { margin-top:14px; display:inline-flex }
.theme-switch button { font:inherit; font-size:13px; padding:6px 14px;
  border:1px solid var(--line-strong); background:var(--card); color:var(--sub); cursor:pointer }
.theme-switch button:first-of-type { border-radius:999px 0 0 999px }
.theme-switch button:last-of-type { border-radius:0 999px 999px 0 }
.theme-switch button:not(:first-of-type) { border-left:none }
.theme-switch button[aria-pressed="true"] { background:var(--accent);
  border-color:var(--accent); color:var(--on-accent); font-weight:700 }
.theme-label { align-self:center; margin-right:8px; font-size:13px; color:var(--sub) }

/* ---- 絞り込み ------------------------------------------------ */
.filters { border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--card-2); padding:14px 16px; margin:18px 0 }
.filters h2 { margin:0 0 10px; border:0; padding:0; font-size:1rem }
.frow { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px;
  padding:8px 0; border-top:1px dotted var(--line) }
.frow:first-of-type { border-top:0 }
.flabel { flex:0 0 15em; color:var(--sub); font-size:.85rem; padding-top:5px }
.flabel small { display:block; font-size:.75rem }
.chips { display:flex; flex-wrap:wrap; gap:7px; flex:1 1 20em }
.chip { font:inherit; font-size:.85rem; padding:5px 12px; cursor:pointer;
  border:1px solid var(--accent); background:var(--card); color:var(--accent);
  border-radius:999px }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); font-weight:700 }
.nums { display:flex; flex-wrap:wrap; gap:10px; flex:1 1 20em }
.num { display:flex; flex-direction:column; font-size:.82rem; color:var(--sub) }
.num input { font:inherit; font-size:.95rem; width:8.5em; padding:5px 8px;
  border:1px solid var(--line-strong); border-radius:3px;
  background:var(--card); color:var(--ink) }
.num small { font-size:.74rem }
.toggles { align-items:center; justify-content:space-between }
.toggles label { font-size:.85rem; color:var(--sub) }
.toggles label small { display:block; margin-left:1.6em }
.clear { font:inherit; font-size:.82rem; padding:5px 12px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--card);
  color:var(--sub); border-radius:3px }

/* ---- カード（小さく） ---------------------------------------- */
.card .size { margin:6px 0 2px; font-size:.95rem; color:var(--ink) }
.card .bits { margin:0; font-size:.86rem; color:var(--sub) }
.hit { margin:6px 0 0; font-size:.86rem; font-weight:700; color:var(--accent-deep) }
.hit-part { color:var(--accent-deep) }
.hit-unknown { color:var(--warn); font-weight:400 }
.src { margin:8px 0 0; font-size:.8rem }
@media(max-width:640px){ .flabel{flex-basis:100%} }

/* ―― シリーズの詳細ページ（/s/<slug>/）――――――――――――――
   ★ トップと同じ色・同じ骨組みを使います ★ 別の見た目にすると
     「同じサイトの中を移動した」と分からなくなります。 */
header.thin { padding-top:14px }
.crumbs { font-size:.8rem; color:var(--sub); margin:0 0 8px }
.crumbs .sep { margin:0 6px; color:var(--line-strong) }
.mdesc { margin:8px 0 0; font-size:.9rem }
.mdesc-src { color:var(--sub); font-size:.8rem; margin-left:4px }

/* 概要の表。左が項目名、右が値 */
table.spec th { width:12em }
table.spec td { color:var(--ink) }

/* 品番の表。★ 品番の列は行の見出し（th）にしています ★
   横に長い表なので、どの行を読んでいるか分かるようにするためです。 */
table.models { font-size:.84rem }
table.models thead th { position:sticky; top:0; z-index:1 }
table.models tbody th { font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
table.models td.find { white-space:nowrap }
table.models td.find a { margin-right:8px }

/* 品番ごとの「探す」は畳んだ中に置く（2026-09-04）。表の列から外した。
   ★ 畳んでも「広告」の断りは畳まない ★ 断りは開く前の一文に出したまま。 */
.model-finder { margin-top:14px }
.model-finder > summary { font-size:.9rem }
.mf-list { list-style:none; margin:10px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:6px 16px }
.mf-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  font-size:.84rem; padding:4px 0; border-top:1px solid var(--line, #e6e6e6) }
.mf-model { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600 }
.mf-list a { white-space:nowrap }

/* 公表値をほかのシリーズと並べて読んだ段落。地の文なので、飾らない。 */
.reading { margin:10px 0 0; font-size:.92rem; line-height:1.85 }
table.models tbody tr:nth-child(even) td,
table.models tbody tr:nth-child(even) th { background:var(--card-2) }

/* ★ 広告である一文は、表の直前に地の文で出します ★
   小さくしたり畳んだりしないこと（check.mjs が見ています）。 */
.ad-lead { margin:10px 0 0; color:var(--ink) }
.ad-lead strong { color:var(--accent-deep) }

.siblings { list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px }
.siblings li { border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); padding:8px 10px; font-size:.88rem }
.siblings small { display:block; color:var(--sub); font-size:.76rem }
.backtop { margin:28px 0 0; font-size:.92rem }

/* トップのカードから詳細へ。★ 押せる場所だと分かる大きさにする ★ */
.more { margin:8px 0 0; font-size:.9rem }
.more a { font-weight:600 }

/* ---------- 日本語の折り返し ----------
   ★ 語の途中で改行されるのを防ぎます ★
     「見てく／ださい。」のような折れ方をなくすため、文節の切れ目で折ります。
     auto-phrase は Chrome / Edge が対応。未対応のブラウザでは
     これまでどおりの折り返しになるだけで、崩れることはありません。
   ★ 消さないでください ★ 消すと読みにくさが戻ります。 */
body, p, li, dd, dt, td, th, figcaption, summary,
h1, h2, h3, h4, .lead, .tagline, .readout, .meta, .source, .note {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
h1, h2, h3, .lead, .section-title { text-wrap: pretty; }

/* ---------- ハブへの案内（本文の終わり・footer の直前）----------（2026-10-18 追加） */
.hub-cta { margin: 32px 0 8px; }
.hub-cta a { display: block; padding: 16px 20px; border-radius: 10px; background: var(--accent); color: var(--on-accent); text-decoration: none; border-left: 6px solid var(--accent-deep); }
.hub-cta a:hover, .hub-cta a:focus-visible { filter: brightness(1.12); }
.hub-cta-sub { display: block; font-size: 13px; opacity: .85; }
.hub-cta-main { display: block; font-weight: 900; font-size: 17px; margin-top: 2px; }

/* ---------- ページの先頭へ戻る「↑」----------（2026-10-18 追加）
   ★ JS が無いときは常に出ています ★ theme.js が動いたら隠し、少し下がったら出します。 */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: opacity .2s;
}
.to-top:hover, .to-top:focus-visible { filter: brightness(1.12); }
html.to-top-js .to-top:not(.is-shown) { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none; } }