: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; 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; 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; 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; }
/* ハンバーガー summary の「メニュー」文字はSPでは非表示（☰のみ。読み上げ用に残す） */
.menu-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@keyframes drawer-in { from { transform:translateX(-100%); } to { transform:none; } }
@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; }
}
@media (prefers-reduced-motion: reduce) {
  .menu summary, .menu summary::before, .menu summary::after, .menu[open] .menu-list { animation:none; transition: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; } }
/* SP時は余白を絞る（基本・PCルールより後方に置くこと） */
@media (max-width:640px) { .card { padding:12px; margin:12px 0; } .card > h2 { font-size:16px; } }
.filters { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; }
.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); }
.prose a, .card p a:not(.btn-amazon):not(.btn-rakuten):not(.btn-official) { color:var(--acc); }
.reel-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.reel-item { border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; gap:10px; align-items:flex-start; }
.reel-item input { margin-top:4px; }
.reel-item .t { font-weight:700; }
.reel-item .m { color:var(--muted); font-size:13px; }
/* トップのカテゴリーカード：画像上・タイトル下・幅400px程度 */
.reel-item.category-card { flex-direction:column; align-items:center; text-align:center; max-width:400px; width:100%; padding:12px; text-decoration:none; color:inherit; }
.reel-item.category-card img { width:100%; max-width:400px; height:auto; border-radius:8px; background:#fff; }
.reel-item.category-card .t { font-size:18px; margin-top:8px; }
.reel-item.category-card .m { font-size:11px; }
.hint, .meta, .notes { color:var(--muted); font-size:13px; }
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; min-width:640px; font-size:14px; }
th, td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
thead th { background:var(--thead); }
tbody th { background:var(--tbody-th); white-space:nowrap; position:sticky; left:0; }
td.best { background:var(--best); font-weight:700; }
.links a { display:inline-block; margin:2px 8px 2px 0; color:var(--acc); }
.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; }