:root { --bg:#f6f7f9; --card:#fff; --surface:#fff; --ink:#1a1d21; --muted:#6b7280; --line:#e5e7eb; --acc:#0e7490; --thead:#f1f5f9; --tbody-th:#f8fafc; --pill:#f1f5f9; --code-bg:#f1f5f9; --best:#ecfdf5; --selected:#f0fdff; --input-bg:#fff; --btn-bg:#0f172a; --btn-ink:#fff; --tooltip-bg:#1a1d21; --tooltip-ink:#fff; --tooltip-link:#7dd3fc; color-scheme:light; }
:root[data-theme="dark"] { --bg:#0b1220; --card:#1e293b; --surface:#1e293b; --ink:#e2e8f0; --muted:#94a3b8; --line:#334155; --acc:#7dd3fc; --thead:#263449; --tbody-th:#1c2942; --pill:#263449; --code-bg:#263449; --best:#134e4a; --selected:#164e63; --input-bg:#1e293b; --btn-bg:#e2e8f0; --btn-ink:#0f172a; --tooltip-bg:#f1f5f9; --tooltip-ink:#0f172a; --tooltip-link:#0e7490; color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"], :root:not([data-theme]) { --bg:#0b1220; --card:#1e293b; --surface:#1e293b; --ink:#e2e8f0; --muted:#94a3b8; --line:#334155; --acc:#7dd3fc; --thead:#263449; --tbody-th:#1c2942; --pill:#263449; --code-bg:#263449; --best:#134e4a; --selected:#164e63; --input-bg:#1e293b; --btn-bg:#e2e8f0; --btn-ink:#0f172a; --tooltip-bg:#f1f5f9; --tooltip-ink:#0f172a; --tooltip-link:#0e7490; color-scheme:dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; min-height:100dvh; display:flex; flex-direction:column; }
main.wrap { flex:1; width:100%; }
.wrap { margin:0 auto; padding:0 16px; }
@media (min-width:1024px) { .wrap { padding:0 24px; } }
/* 1段目：帯（サイト名＋メニュー） */
.site-header { background:none; padding:0; }
.site-band { background:linear-gradient(135deg, #0f172a 0%, #1e3a5f 65%, #0e7490 130%); color:#fff; padding:14px 0; }
/* 2段目：ページタイトル＋パンくず（帯から分離・白地） */
.page-head { background:var(--surface); border-bottom:1px solid var(--line); padding:22px 0 16px; color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,.05); }
.page-head h1 { margin:0 0 4px; font-size:31px; font-weight:800; letter-spacing:.01em; text-wrap:balance; }
/* 上段：サイト名（左）＋メニュー（右）。DOM順序は サイト名→メニュー→h1→パンくずを維持 */
.site-head-top { display:flex; align-items:center; justify-content:space-between; gap:8px 24px; flex-wrap:wrap; }
/* 左上サイトタイトル（トップへのリンク）。h1（ページタイトル）とは別 */
.site-title { margin:0; font-family:Futura,"Century Gothic","Avenir Next",sans-serif; font-weight:700; letter-spacing:.06em; font-size:22px; line-height:1.2; white-space:nowrap; }
.site-title a { color:#fff; text-decoration:none; }
.site-title a:hover { text-decoration:underline; text-underline-offset:4px; }
.site-title a:focus-visible, .nav-list a:focus-visible, .menu summary:focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; border-radius:4px; }
.page-head .breadcrumb a:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:4px; }
.mvp { font-size:12px; background:#f59e0b; color:#000; border-radius:6px; padding:2px 8px; vertical-align:middle; }
.pr { background:#fef3c7; color:#451a03; display:inline-block; padding:4px 10px; border-radius:8px; font-size:13px; margin:0; }
.sub { color:#cbd5e1; margin:6px 0 10px; font-size:14px; }
/* 2段目内の補足文・パンくず（白地のため暗色系。順序: サイト名→メニュー→h1→パンくず） */
.page-head .tagline { color:var(--muted); margin:6px 0 0; font-size:14px; }
.page-head .breadcrumb { margin:10px 0 0; font-size:13px; color:var(--muted); }
.page-head .breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.page-head .breadcrumb li { display:inline; }
.page-head .breadcrumb li + li::before { content:"›"; margin-right:6px; color:#9ca3af; }
.page-head .breadcrumb a { color:var(--acc); text-underline-offset:3px; }
.page-head .breadcrumb a:hover { color:var(--acc); text-decoration:underline; }
.page-head .breadcrumb [aria-current="page"] { color:var(--ink); background:var(--pill); border:1px solid var(--line); padding:2px 10px; border-radius:999px; }
.nav-list { display:flex; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0; }
.nav-list a { color:#e2e8f0; font-size:14px; text-decoration:none; padding:4px 12px; border-radius:20px; border:1px solid transparent; display:inline-block; }
.nav-list a:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); }
.has-sub { position:relative; }
.has-sub .sub { display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:20; min-width:180px; list-style:none; margin:0; padding:6px; background:#0f172a; border:1px solid rgba(255,255,255,.2); border-radius:10px; }
/* 親→子の4pxの隙間でhoverが切れて消えるため、透明ブリッジで隙間を埋める */
.has-sub .sub::before { content:""; position:absolute; top:-8px; left:0; right:0; height:8px; background:transparent; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display:block; }
.theme-switch { color:#e2e8f0; font-size:13px; display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }
.theme-switch select { background:rgba(255,255,255,.1); color:#e2e8f0; border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:4px 8px; font-size:13px; }
.theme-switch select option { color:#111; background:#fff; }
/* フッターのテーマ切替（ページ地色に合わせる） */
.site-footer .theme-switch { color:var(--muted); }
.site-footer .theme-switch select { background:var(--input-bg); color:var(--ink); border:1px solid var(--line); }
.foot-theme { margin:8px 0 0; }
.menu { display:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:16px 0; box-shadow:0 1px 2px rgba(15,23,42,.06), 0 12px 32px -16px rgba(15,23,42,.18); }
.card > h2 { font-size:18px; margin:0 0 12px; padding-left:10px; border-left:4px solid var(--acc); }
/* PC時は本文カードの余白を2倍に。基本.cardより後方に置くこと（同詳細度のためソース順で勝つ） */
@media (min-width:1024px) { .card { padding:32px; } }
.filters { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; align-items:center; }
.filters label { font-size:14px; display:flex; gap:8px; align-items:center; }
select, input { padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--input-bg); color:var(--ink); }
.reel-list { display:block; }
.maker-row { margin:10px 0; position:relative; }
.maker-row-head { font-size:13px; font-weight:700; margin-bottom:6px; }
.maker-cards { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
/* 横スクロール可能であることを示す右端フェード。末端到達で非表示（.is-endはJS付与） */
.maker-row::after { content:""; position:absolute; right:0; top:22px; bottom:8px; width:56px; background:linear-gradient(to right, transparent, var(--card)); pointer-events:none; opacity:1; transition:opacity .2s; }
.maker-row.is-end::after, .maker-row.no-scroll::after { opacity:0; }
.reel-card { flex:0 0 auto; min-width:150px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:13px; line-height:1.5; cursor:pointer; background:var(--card); color:var(--ink); transition:border-color .15s, box-shadow .15s, transform .15s; }
.reel-card:hover { border-color:var(--acc); box-shadow:0 2px 8px rgba(14,116,144,.18); }
.reel-card .t { display:block; font-weight:700; font-size:13px; }
.reel-card .m { display:block; font-size:12px; color:var(--muted); }
.reel-card.is-selected { border-color:var(--acc); background:var(--selected); box-shadow:inset 0 0 0 1px var(--acc); }
.tech-chips { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.tech-chip { display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:13px; line-height:1.5; background:var(--card); color:var(--ink); font-weight:700; cursor:pointer; }
.tech-chip.on { border-color:var(--line); background:var(--best); box-shadow:none; color:var(--ink); font-weight:700; }
/* 非搭載ラベルはグレー表示 */
.tech-chip:not(.on) { color:var(--muted); font-weight:400; }
.tech-tooltip { position:absolute; z-index:50; max-width:min(320px, calc(100vw - 16px)); background:var(--tooltip-bg); color:var(--tooltip-ink); font-size:13px; line-height:1.7; border-radius:10px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.tech-tooltip a { color:var(--tooltip-link); }
.tech-tooltip strong { font-size:13px; }
/* 公式引用の出典明示（blockquote＋cite） */
.tech-tooltip blockquote { margin:8px 0 4px; padding:4px 0 4px 10px; border-left:3px solid var(--tooltip-link); }
.tech-tooltip blockquote p { margin:0; }
.tech-tooltip .tech-quote-src { margin:4px 0 0; font-size:12px; }
.tech-tooltip cite { font-style:normal; }
thead th[data-id] { cursor:grab; }
thead th[data-id]:active { cursor:grabbing; }
thead th.drop-target { outline:2px solid var(--acc); outline-offset:-2px; }
.col-ops { position:absolute; top:6px; right:6px; display:flex; gap:4px; margin:0; }
.col-ops button { padding:2px 8px; font-size:12px; background:var(--card); color:var(--ink); border:1px solid var(--line); transition:transform .12s ease, background-color .15s ease; }
.col-ops button:disabled { opacity:.35; cursor:default; }
.col-ops button[data-act="remove"] { color:#b91c1c; font-weight:700; }
.col-ops button:not(:disabled):hover { background:var(--pill); }
.col-ops button:not(:disabled):active { transform:scale(.88); }
/* 列操作アニメーション中は連打を抑止（スクロールは維持。本体＋追従見出しの両方） */
#compare.is-animating .col-ops button, #compare-head.is-animating .col-ops button { pointer-events:none; }
/* ×削除：対象列をフェードアウト（JSが520ms後に実削除＋再描画） */
#compare th.is-removing, #compare td.is-removing, #compare-head th.is-removing { animation:col-fade-out .52s ease-in forwards; }
@keyframes col-fade-out { from { opacity:1; } to { opacity:0; background:#fee2e2; transform:translateY(8px) scale(.98); } }
/* ◀▶移動：隣の列と位置を入れ替えるようにクロス（JSが520ms後に実移動＋再描画） */
#compare th.is-swapping, #compare td.is-swapping, #compare-head th.is-swapping { position:relative; z-index:6; }
#compare th.is-swap-left, #compare td.is-swap-left, #compare-head th.is-swap-left { animation:col-swap-left .52s ease forwards; }
#compare th.is-swap-right, #compare td.is-swap-right, #compare-head th.is-swap-right { animation:col-swap-right .52s ease forwards; }
@keyframes col-swap-left { from { transform:none; opacity:1; } to { transform:translateX(-105%); opacity:.65; background:var(--selected); } }
@keyframes col-swap-right { from { transform:none; opacity:1; } to { transform:translateX(105%); opacity:.65; background:var(--selected); } }
/* 旧nudgeクラスは退避（フォールバック用に残すが現行はswapを使用） */
#compare th.is-shift-left, #compare td.is-shift-left { animation:col-nudge-left .52s ease; }
#compare th.is-shift-right, #compare td.is-shift-right { animation:col-nudge-right .52s ease; }
@keyframes col-nudge-left { 0% { transform:none; } 40% { transform:translateX(-40px); opacity:.55; } 100% { transform:none; opacity:1; } }
@keyframes col-nudge-right { 0% { transform:none; } 40% { transform:translateX(40px); opacity:.55; } 100% { transform:none; opacity:1; } }
/* 移動直後の到達列フラッシュ（JSが再描画後に付与） */
#compare th.is-moved, #compare td.is-moved, #compare-head th.is-moved { animation:col-flash 1s ease; }
@keyframes col-flash { 0% { background:var(--selected); } 100% { background:transparent; } }
@media (prefers-reduced-motion: reduce) {
  .col-ops button { transition:none; }
  #compare th.is-removing, #compare td.is-removing, #compare-head th.is-removing,
  #compare th.is-shift-left, #compare td.is-shift-left,
  #compare th.is-shift-right, #compare td.is-shift-right,
  #compare th.is-swap-left, #compare td.is-swap-left, #compare-head th.is-swap-left,
  #compare th.is-swap-right, #compare td.is-swap-right, #compare-head th.is-swap-right,
  #compare th.is-moved, #compare td.is-moved, #compare-head th.is-moved { animation:none; }
  .menu summary, .menu summary::before, .menu summary::after, .menu[open] .menu-list { animation:none; transition:none; }
}
.grip { color:var(--muted); margin-right:4px; cursor:grab; }
.hint, .meta, .notes { color:var(--muted); font-size:13px; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table { border-collapse:collapse; width:max-content; min-width:100%; font-size:14px; }
th, td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
thead th { background:var(--thead); }
/* 機種が少ない時も列が引き伸ばされないよう汎用の min-width:100% を解除。モデル列幅は300px固定 */
#compare { min-width:0; }
#compare thead th:not(:first-child), #compare tbody td { width:300px; min-width:300px; max-width:300px; }
#compare thead th[data-id] { padding-top:32px; }
#compare thead th { position:sticky; top:0; z-index:4; }
#compare thead th:first-child, #compare tbody th { position:sticky; left:0; z-index:2; white-space:nowrap; }
#compare thead th:first-child { z-index:5; }
tbody th { background:var(--tbody-th); white-space:nowrap; }
.filters button#btn-reset { padding:6px 12px; font-size:13px; background:var(--card); color:var(--ink); }
.count-row { display:flex; align-items:center; gap:12px; margin:10px 0 4px; }
.count-row .meta { margin:0; }
.count-row button#btn-reset { padding:6px 12px; font-size:13px; background:var(--card); color:var(--ink); }
.pr-sub { font-size:12px; color:var(--muted); margin:10px 0 0; }
td.best { background:var(--best); font-weight:700; }
.links { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.links a { display:block; width:100%; text-align:center; margin:0; text-decoration:none; font-weight:700; font-size:13px; padding:8px 14px; border-radius:8px; border:1px solid transparent; line-height:1.4; }
.links a.btn-amazon { background:#FF9900; border-color:#e88b00; color:#fff; }
.links a.btn-amazon:hover { background:#f08c00; }
.links a.btn-rakuten { background:#BF0000; border-color:#a30000; color:#fff; }
.links a.btn-rakuten:hover { background:#a30000; }
.links a.btn-official { background:#2563eb; border-color:#1d4ed8; color:#fff; }
.links a.btn-official:hover { background:#1d4ed8; }
/* 比較表の商品画像行（楽天・ナチュラム優先。Amazon復活時も同セルに差し替え） */
.cell-image { width:100%; height:auto; background:#fff; border-radius:8px; }
/* 比較表の実売価格セル（左寄せ・楽天リンク付き価格＋出典小字） */
.cell-retail { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; }
.cell-retail a { font-weight:700; font-size:16px; }
/* 実売価格の右に表示する売り切れバッジ（価格サマリーの全件売り切れ時も共用） */
.retail-price { display:flex; align-items:baseline; gap:6px; }
.soldout { color:#b91c1c; font-size:12px; white-space:nowrap; }
:root[data-theme="dark"] .soldout { color:#f87171; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .soldout, :root:not([data-theme]) .soldout { color:#f87171; } }
/* 購入・公式リンク行の見出しはノーマルウェイト */
#compare tr.row-links th { font-weight:400; }
/* 比較表の見出しは本体から分離した追従テーブルで表示（ネイティブsticky）。
   本体の thead は非表示にする（列幅は追従側に複写・横スクロールは本体に同期） */
#compare > thead { display:none; }
.table-scroll-head { position:sticky; top:0; z-index:20; overflow:hidden; background:var(--thead); }
.table-scroll-head table { border-collapse:collapse; width:max-content; min-width:0; }
.table-scroll-head th { position:relative; border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; background:var(--thead); font-size:14px; }
.table-scroll-head th:not(:first-child) { width:300px; min-width:300px; max-width:300px; }
.table-scroll-head th[data-id] { padding-top:32px; cursor:grab; }
/* 追従見出しの項目列も左固定（本体の項目列と同期。横スクロール時にずれない） */
.table-scroll-head th:first-child { position:sticky; left:0; z-index:5; }
.table-scroll-head th[data-id]:active { cursor:grabbing; }
.table-scroll-head th.drop-target { outline:2px solid var(--acc); outline-offset:-2px; }
.cell-image-src { color:var(--muted); font-size:11px; text-align:center; }
.empty { color:var(--muted); }
.site-footer { padding:18px 0 30px; color:var(--muted); font-size:13px; margin-top:auto; }
.site-footer a { color:var(--muted); }
.site-footer .foot-inner { display:flex; justify-content:center; }
.site-footer .foot-line { text-align:center; line-height:2.2; margin:0; max-width:100%; }
.site-footer .foot-theme-inline { white-space:nowrap; margin-left:8px; }
.prose h2 { margin-top:0; }
code { background:var(--code-bg); padding:1px 6px; border-radius:6px; }
button { padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--btn-bg); color:var(--btn-ink); cursor:pointer; font-size:14px; }
button#btn-reset { background:var(--card); color:var(--ink); }
button:active { transform:translateY(1px); }
.error { color:#b91c1c; font-size:13px; }
:root[data-theme="dark"] .error { color:#fca5a5; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .error { color:#fca5a5; } }
.col-ops button[data-act="remove"] { color:#b91c1c; }
:root[data-theme="dark"] .col-ops button[data-act="remove"] { color:#fca5a5; }
/* ハンバーガー summary の「メニュー」文字はSPでは非表示（☰のみ。読み上げ用に残す） */
.menu-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* 絞り込みラベル列（折返しなし・幅そろえ） */
.flabel { display:inline-block; min-width:4.5em; white-space:nowrap; flex:0 0 auto; }
.filters label { white-space:nowrap; }
@keyframes drawer-in { from { transform:translateX(-100%); } to { transform:none; } }
/* モバイル対応（〜640px）。比較表は横スクロール維持＋10px */
@media (max-width:640px) {
  .site-band { padding:12px 0; }
  .page-head { padding:16px 0 12px; }
  .page-head h1 { font-size:22px; }
  /* SPヘッダー：☰は左に絶対配置／タイトルは真ん中（transformを使うとfixedドロワーの包含ブロックになり画面外にずれるためflexで中央寄せ） */
  .site-head-top { display:block; position:relative; }
  .site-title { text-align:center; font-size:18px; }
  .nav { position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; }
  .nav-list { display:none; }
  .menu { display:block; margin:0; }
  /* ハンバーガー：枠・背景なしの2本線（タップ領域44pxは維持・☰グリフは隠してCSS描画。HTML変更なしで全頁に適用） */
  .menu summary { width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; position:relative; font-size:0; line-height:0; color:#e2e8f0; background:transparent; border:0; cursor:pointer; list-style:none; transition:opacity .2s, transform .12s; }
  .menu summary::-webkit-details-marker { display:none; }
  .menu summary::before, .menu summary::after { content:""; position:absolute; left:50%; width:24px; height:2px; background:currentColor; border-radius:2px; transform:translateX(-50%); transition:top .25s, transform .25s, opacity .2s; }
  .menu summary::before { top:17px; }
  .menu summary::after { top:25px; }
  .menu summary:hover { opacity:.7; }
  .menu summary:active { transform:scale(.92); }
  /* 開状態は2本線→×にモーフィング。左ドロワーに覆われないよう手前に出す */
  .menu[open] summary { position:relative; z-index:101; background:transparent; }
  .menu[open] summary::before { top:21px; transform:translateX(-50%) rotate(45deg); }
  .menu[open] summary::after { top:21px; transform:translateX(-50%) rotate(-45deg); }
  /* 展開メニューは左からスライドインするドロワー（☰ボタンが左端のため） */
  .menu[open] .menu-list { position:fixed; top:0; left:0; height:100dvh; width:min(320px, 85vw); z-index:100; overflow-y:auto; margin:0; padding:64px 8px 24px; background:#0f172a; border-right:1px solid rgba(255,255,255,.2); border-radius:0; box-shadow:8px 0 24px rgba(0,0,0,.35); animation:drawer-in .25s ease-out; }
  .menu-list { list-style:none; margin:8px 0 0; padding:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:10px; }
  .menu-list a { display:block; color:#e2e8f0; font-size:14px; text-decoration:none; padding:8px 10px; border-radius:8px; }
  .menu-list a:hover { background:rgba(255,255,255,.08); }
  /* アクティブページ（theme.jsがis-active/is-ancestorを付与） */
  .menu-list a.is-active { background:rgba(125,211,252,.14); color:#fff; font-weight:700; border-radius:0; margin:6px 0; padding-top:12px; padding-bottom:12px; }
  .menu-list a.is-ancestor { color:#fff; font-weight:600; }
  /* 第2階層はガイド線付き・第3階層（スピニングリール）はもう一段インデント */
  .menu-sub { list-style:none; margin:4px 0 6px 10px; padding:0 0 0 12px; border-left:1px solid rgba(255,255,255,.16); }
  .menu-sub > li > a[href*="spinning-reel"] { margin-left:12px; padding-left:12px; border-left:1px solid rgba(255,255,255,.16); }
  .menu-list .theme-switch { display:flex; padding:8px 10px; }
  .card { padding:12px; margin:12px 0; }
  .card > h2 { font-size:16px; }
  .filters { flex-direction:column; align-items:stretch; gap:8px; }
  .filters label { display:grid; grid-template-columns:5em 1fr; align-items:center; font-size:13px; }
  .filters input, .filters select { width:100%; min-width:0; }
  .reel-card { min-width:130px; max-width:170px; font-size:12px; }
  table { font-size:13px; }
  th, td { padding:6px 8px; }
  #compare { font-size:10px; }
  #compare th, #compare td { font-size:10px; padding:6px; }
  .table-scroll-head th { font-size:10px; padding:6px; }
  #compare .tech-chip { font-size:10px; padding:6px 8px; }
  #compare thead th:not(:first-child), #compare tbody td,
  .table-scroll-head th:not(:first-child) { width:200px; min-width:200px; max-width:200px; }
  .col-ops button { padding:2px 6px; font-size:10px; }
  .links a { padding:10px 12px; font-size:12px; }
  /* SPは比較表の左列（項目列）固定を解除し、横スクロールで一緒に流す */
  #compare thead th:first-child, #compare tbody th,
  .table-scroll-head th:first-child { position:static; }
}
/* 個別ページ：商品ヒーロー（画像＋価格・CTA） */
.product-hero { display:grid; grid-template-columns:400px 1fr; gap:24px; align-items:start; }
.product-hero-media { text-align:center; }
.product-hero-img { width:100%; max-width:400px; height:auto; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:12px; }
.img-placeholder { width:100%; max-width:400px; aspect-ratio:1/1; margin:0 auto; display:flex; align-items:center; justify-content:center; background:var(--pill); border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:15px; line-height:1.8; text-align:center; }
.price-box { margin:0 0 12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.price-box > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 14px; }
.price-box > div + div { border-top:1px solid var(--line); }
.price-box dt { font-size:13px; color:var(--muted); }
.price-box dd { margin:0; font-size:20px; font-weight:800; text-align:right; }
.price-box dd small { font-size:12px; font-weight:400; color:var(--muted); }
.product-hero-info { max-width:100%; width:500px; }
.product-cta, .purchase-links { max-width:100%; width:500px; }
#aff-links { display:contents; }
.product-cta { margin:0; }
.spec-table th { white-space:nowrap; }
/* 比較表見出しの機種名→個別ページリンク */
.col-detail { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.col-detail:hover { color:var(--acc); }
/* 個別ページ：特徴リスト */
.feature-list { margin:10px 0; padding-left:1.4em; line-height:1.9; font-size:14px; }
/* 個別ページ：搭載テクノロジー */
.tech-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-top:12px; }
.tech-card { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface); }
.tech-card h3 { margin:0 0 8px; font-size:15px; }
.tech-card p { margin:8px 0 0; font-size:13px; line-height:1.8; }
.tech-card blockquote { margin:8px 0 4px; padding:4px 0 4px 10px; border-left:3px solid var(--acc); }
.tech-card blockquote p { margin:0; font-size:13px; line-height:1.8; }
.tech-card .tech-quote-src { font-size:12px; color:var(--muted); }
.tech-card cite { font-style:normal; }
/* 個別ページ：同シリーズ表 */
.series-table th, .series-table td { white-space:nowrap; }
.series-table tr.current td { background:var(--best); font-weight:700; }
/* 個別ページ：シリーズのスペックマトリクス（行＝比較表と同一項目・列＝番手）。
   横スクロール維持＋項目列のみ左sticky（SPは解除・縦stickyは .table-scroll が包含するため見送り） */
.series-spec-table thead th { background:var(--thead); white-space:nowrap; }
.series-spec-table thead th:first-child, .series-spec-table tbody th { position:sticky; left:0; z-index:2; background:var(--tbody-th); white-space:nowrap; }
.series-spec-table thead th:first-child { background:var(--thead); z-index:3; }
.series-spec-table tbody td { min-width:150px; max-width:280px; }
.series-spec-table tr.row-links th { font-weight:400; }
/* 個別ページ：紹介記事の見出し */
.card.article .catch { font-size:20px; font-weight:800; line-height:1.8; margin:1em 0 2em; text-wrap:balance; }
.card.article h3 { font-size:16px; margin:20px 0 8px; padding-left:10px; border-left:4px solid var(--acc); }
.card.article h4 { font-size:14px; margin:14px 0 6px; }
.card.article > p, .card.article li { line-height:1.9; }
/* 個別ページの購入ボタン：PC横並び300px・SP縦並び（比較表セル内の.linksは縦のまま） */
@media (min-width:1024px) {
  .product-cta, .purchase-links { flex-direction:row; flex-wrap:wrap; width:100%; }
  .product-cta a, .purchase-links a { width:300px; max-width:100%; flex:0 0 auto; }
}
/* 個別ページ：1023px以下はヒーローを1カラム化 */
@media (max-width:1023px) {
  .product-hero { grid-template-columns:1fr; gap:16px; }
  .product-hero-img, .img-placeholder { max-width:400px; }
  .product-hero-info { width:100%; }
  .product-cta, .purchase-links { width:100%; }
}
@media (max-width:640px) {
  .product-hero { grid-template-columns:1fr; gap:12px; }
  .product-hero-img, .img-placeholder { max-width:100%; }
  .price-box dd { font-size:18px; }
  /* SPは個別ページのスペック表も左列（項目列）固定を解除し、横スクロールで一緒に流す（比較表と同様・PC sticky維持） */
  .series-spec-table thead th:first-child, .series-spec-table tbody th { position:static; }
}