/* =============================================================================
   GOLFGEAR — デザインシステム（mock/index.html からの移植）
   =============================================================================
   このファイル1本で完結させる。app.css / page.css（CARTEX由来）は読み込まない。
   併読すると .chip / .pill / .mall-* が衝突し、どちらが勝つかが読み込み順の
   偶然に左右されるため。

   【絶対に崩さない前提】
   - 色は必ずトークン経由。@media (prefers-color-scheme) や [data-theme] の中で
     色を初出定義しない（初出は必ず素の :root）
   - -webkit-text-size-adjust:100% は必須。iOS Safari だけ右端が切れる
   - グリッドは minmax(0,1fr)。1fr だと中身の幅で列が広がって崩れる
   - flex の align-items:stretch + height:100% は高さの循環参照を起こす
   - 絞り込み・ナビは横スクロールにしない。折り返す
   - 本文16px以上・タップ領域44px以上（コース参加人口は50代以上が約71%）
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --ground:#EDF0EA; --ground-2:#E4E9E0; --surface:#FAFBF8; --surface-2:#F1F4EE;
  --line:#CCD6C8; --line-soft:#DEE4D9;
  --ink:#16211C; --ink-2:#3B4941; --ink-3:#5F6C65; --dim:#6E7B74;
  --accent:#0E4A32; --accent-ink:#0C4029; --accent-wash:#DEEAE1;
  --brass:#7E5A0E; --brass-bright:#B98A2C; --brass-wash:#F2E7CE;
  --warn:#7C4B0E; --warn-wash:#F6E9D6;
  --deal:#C0231A; --deal-wash:#FBE3E0; --deal-line:#E0574C;
  --c3:#3E6E96;
  --on-accent:#F7FBF8;
  --deal-pill-ink:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(22,33,28,.07);
  --shadow-md:0 1px 2px rgba(22,33,28,.06), 0 10px 28px -14px rgba(22,33,28,.28);
  --shadow-up:0 -2px 18px -6px rgba(22,33,28,.22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A110D; --ground-2:#0E1611; --surface:#121B15; --surface-2:#17221B;
    --line:#2A3830; --line-soft:#1F2A24;
    --ink:#E7EDE5; --ink-2:#BBC7BE; --ink-3:#95A199; --dim:#8A968E;
    --accent:#5FC094; --accent-ink:#7CD0A9; --accent-wash:#12291F;
    --brass:#D8A54C; --brass-bright:#EBBE71; --brass-wash:#2A2013;
    --warn:#D9A155; --warn-wash:#2A2013;
    --deal:#FF8574; --deal-wash:#331613; --deal-line:#FF8574;
    --c3:#7FB4D8;
    --on-accent:#07130D;
    --deal-pill-ink:#2A0B08;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.8);
    --shadow-up:0 -2px 20px -6px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0A110D; --ground-2:#0E1611; --surface:#121B15; --surface-2:#17221B;
  --line:#2A3830; --line-soft:#1F2A24;
  --ink:#E7EDE5; --ink-2:#BBC7BE; --ink-3:#95A199; --dim:#8A968E;
  --accent:#5FC094; --accent-ink:#7CD0A9; --accent-wash:#12291F;
  --brass:#D8A54C; --brass-bright:#EBBE71; --brass-wash:#2A2013;
  --warn:#D9A155; --warn-wash:#2A2013;
  --deal:#FF8574; --deal-wash:#331613; --deal-line:#FF8574;
  --c3:#7FB4D8;
  --on-accent:#07130D;
  --deal-pill-ink:#2A0B08;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.8);
  --shadow-up:0 -2px 20px -6px rgba(0,0,0,.7);
}

/* ----------------------------------------------------------------- base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-size:16px; line-height:1.8; font-feature-settings:"palt" 1;
  overflow-wrap:break-word;
  padding-bottom:0; transition:padding-bottom .18s;
}
/* 下部ドックの実高は js/gg.js が ResizeObserver で body の padding に反映する。
   固定値にすると折り返しでフッターが隠れる */
h1,h2,h3,h4{margin:0; line-height:1.4; text-wrap:balance; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit}
img{max-width:100%; height:auto}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select{font:inherit}
:focus-visible{outline:3px solid var(--brass-bright); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

.lat{font-family:"Bodoni Moda",Didot,"Times New Roman",serif; font-weight:700}
.num{font-family:"Barlow Semi Condensed","Zen Kaku Gothic New",sans-serif; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"Barlow Semi Condensed",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim); display:block}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* --------------------------------------------------------------- header */
.hdr{background:var(--surface); border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:60}
.hdr-in{max-width:1180px; margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:24px}
.logo{display:flex; align-items:baseline; gap:1px; text-decoration:none; min-height:44px; align-self:center}
.logo .mark{font-family:"Bodoni Moda",Didot,serif; font-weight:700; font-size:23px; color:var(--ink); align-self:center}
.logo .dot{color:var(--brass-bright); font-family:"Bodoni Moda",Didot,serif; font-weight:700; font-size:23px}
.logo .tld{font-family:"Barlow Semi Condensed",sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:.1em; color:var(--dim); padding-left:2px}
.nav{display:flex; gap:22px; font-size:14.5px; color:var(--ink-2); flex-wrap:wrap}
.nav a{text-decoration:none; border-bottom:1px solid transparent; display:inline-flex; align-items:center; min-height:44px}
.nav a:hover{border-bottom-color:var(--brass-bright)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent); color:var(--ink); font-weight:500}
.hdr-search{margin-left:auto; display:flex; align-items:center; gap:9px; border:1px solid var(--line);
  background:var(--ground); border-radius:3px; padding:0 8px 0 13px; min-width:240px; min-height:44px}
.hdr-search .lat{color:var(--dim); flex:none}
.hdr-search input{border:none; background:none; color:var(--ink); font-size:16px; min-width:0; flex:1 1 auto; padding:0; min-height:42px}
.hdr-search input::placeholder{color:var(--ink-3)}
.hdr-search input:focus{outline:none}
.hdr-search button{min-height:40px; min-width:44px; border-radius:3px; font-size:13.5px; color:var(--accent-ink); flex:none}
.hdr-search button:hover{background:var(--accent-wash)}
@media (max-width:900px){
  .hdr-in{flex-wrap:wrap; gap:10px 16px; padding:11px 22px}
  .hdr-search{order:2; margin-left:auto; min-width:0; flex:1 1 160px}
  .nav{order:3; width:100%; gap:8px; font-size:13.5px}
  .nav a{border:1px solid var(--line); border-radius:3px; padding:0 12px; background:var(--surface-2); min-height:44px}
}
@media (max-width:640px){
  .hdr-in{padding:10px 16px}
  .logo .mark,.logo .dot{font-size:20px}
}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  padding:0 18px; border-radius:3px; font-size:15px; text-decoration:none; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); transition:border-color .15s,color .15s}
.btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.btn.p{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700}
.btn.p:hover{filter:brightness(1.1); color:var(--on-accent)}
.btn.sm{min-height:44px; padding:0 13px; font-size:14px}
.btn.xl{min-height:56px; font-size:16.5px; padding:0 26px}
.btn.wide{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--ground-2); border-color:var(--line); color:var(--dim); cursor:not-allowed}

/* 比較に追加 */
.addcmp{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px;
  padding:0 13px; border:1px solid var(--line); border-radius:3px; font-size:14px; color:var(--ink-2);
  background:var(--surface); white-space:nowrap; transition:border-color .15s,background .15s,color .15s}
.addcmp:hover{border-color:var(--brass-bright); color:var(--brass)}
.addcmp .bx{width:15px; height:15px; border:1.5px solid currentColor; border-radius:2px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1}
.addcmp[aria-pressed="true"]{background:var(--brass-wash); border-color:var(--brass-bright); color:var(--brass); font-weight:500}

/* ----------------------------------------------------------------- hero */
.hero{padding:52px 0 40px; border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:50px; align-items:start}
@media (max-width:940px){.hero-grid{grid-template-columns:minmax(0,1fr); gap:32px}.hero{padding:32px 0 28px}}
.hero h1{font-size:clamp(27px,3.2vw,39px); line-height:1.34; letter-spacing:-.01em; margin:14px 0 0; text-wrap:pretty}
.hero h1 em{font-style:normal; color:var(--accent-ink); border-bottom:2px solid var(--brass-bright); padding-bottom:1px}
.hero-lead{margin-top:18px; color:var(--ink-2); font-size:16px; max-width:34em}
.props{display:flex; flex-direction:column; gap:11px; margin-top:26px}
.props li{display:flex; gap:11px; align-items:baseline; font-size:15px; color:var(--ink-2)}
.props .lat{color:var(--brass-bright); flex:none}
.props b{color:var(--ink); font-weight:700}
/* 画像スロット。実ファイルが置かれたときだけ描画される（api/_ui.php gg_image_slot） */
.figslot{margin:0 0 20px; border-radius:4px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-soft)}
.figslot img{display:block; width:100%; height:auto}

/* --------------------------------------------------------------- picker */
.picker{background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow-md); overflow:hidden}
.picker-hd{padding:14px 20px; border-bottom:1px solid var(--line-soft); background:var(--surface-2);
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.picker-hd h2{font-size:15px}
.picker-body{padding:20px}
.step{display:flex; align-items:baseline; gap:9px; margin-bottom:11px}
.step-n{font-family:"Barlow Semi Condensed",sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--on-accent); background:var(--accent); border-radius:2px; padding:1px 7px}
.step-t{font-size:14.5px; font-weight:500; color:var(--ink-2)}
/* 絞り込みは横スクロールにしない。折り返す（画面外の選択肢に気づけず選び漏れる） */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:3px; min-height:44px;
  padding:0 15px; font-size:14.5px; color:var(--ink-2); text-decoration:none;
  display:inline-flex; align-items:center; transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--accent); color:var(--ink)}
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--accent); border-color:var(--accent);
  color:var(--on-accent); font-weight:500}
.heads{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:22px}
@media (max-width:540px){.heads{grid-template-columns:repeat(2,minmax(0,1fr))}}
.head-opt{border:1px solid var(--line); border-radius:3px; background:var(--surface); padding:10px 12px;
  min-height:56px; text-align:left; line-height:1.4; text-decoration:none; display:flex; flex-direction:column;
  justify-content:center; transition:border-color .15s,background .15s}
.head-opt:hover{border-color:var(--accent)}
.head-opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash)}
.head-opt .m{display:block; font-size:15px; font-weight:500; color:var(--ink)}
.head-opt .y{display:block; font-size:12.5px; color:var(--dim);
  font-family:"Barlow Semi Condensed",sans-serif; letter-spacing:.05em}
.picker-out{margin-top:14px; font-size:14px; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:12px}
.picker-out b{color:var(--accent-ink); font-weight:700}

/* ------------------------------------------------------------- sections */
.sec{padding:50px 0; border-bottom:1px solid var(--line-soft)}
.sec:last-of-type{border-bottom:none}
.sec-hd{margin-bottom:26px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.sec-hd > div{min-width:0}
.sec-hd h2{font-size:clamp(21px,2.4vw,27px); letter-spacing:-.005em}
.sec-hd p{font-size:15px; color:var(--ink-3); margin-top:7px; max-width:52em}
.sec-hd a{font-size:14.5px; color:var(--accent-ink); text-decoration:none; border-bottom:1px solid var(--line);
  padding-bottom:2px; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px}
.sec-hd a:hover{border-bottom-color:var(--accent)}
.sec-hd .upd{font-size:13px; color:var(--dim)}

/* --------------------------------------------------------------- 要点 */
.answer{border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface);
  border-radius:4px; padding:18px 20px; margin:0 0 26px; box-shadow:var(--shadow-sm)}
.answer-lead{font-size:17px; font-weight:700; line-height:1.8; color:var(--ink)}
.answer-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 22px; margin:16px 0 0}
.answer-facts > div{display:flex; flex-direction:column; gap:1px; min-width:0}
.answer-facts dt{font-size:12.5px; color:var(--dim); letter-spacing:.04em}
.answer-facts dd{margin:0; font-size:20px; font-weight:600; color:var(--ink);
  font-family:"Barlow Semi Condensed","Zen Kaku Gothic New",sans-serif; font-variant-numeric:tabular-nums}
.answer-src{margin:9px 0 0; font-size:13.5px}
/* 単独で置くリンクは押せる大きさにする（行の高さのままだと20pxしかない） */
.answer-src a{color:var(--accent-ink); display:inline-flex; align-items:center; min-height:44px}

/* -------------------------------------------------------------- entries */
.entries{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:860px){.entries{grid-template-columns:minmax(0,1fr)}}
.entry{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:22px;
  display:flex; flex-direction:column; gap:9px; text-decoration:none; transition:border-color .15s,transform .15s}
.entry:hover{border-color:var(--accent); transform:translateY(-1px)}
.entry .ic{font-family:"Bodoni Moda",serif; font-size:20px; color:var(--brass-bright); line-height:1}
.entry h3{font-size:17px}
.entry p{font-size:14.5px; color:var(--ink-3)}
.entry .path{font-family:"Barlow Semi Condensed",sans-serif; font-size:12.5px; color:var(--dim);
  letter-spacing:.03em; margin-top:auto; padding-top:9px; border-top:1px solid var(--line-soft)}

/* --------------------------------------------------------------- tables */
.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:4px; background:var(--surface)}
.tbl-scroll table{border-collapse:collapse; width:100%}
.tbl-scroll th,.tbl-scroll td{text-align:left; padding:12px 15px; border-bottom:1px solid var(--line-soft);
  font-size:15px; vertical-align:middle}
.tbl-scroll thead th{background:var(--surface-2); font-size:12px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); font-family:"Barlow Semi Condensed",sans-serif;
  white-space:nowrap; border-bottom:1px solid var(--line)}
.tbl-scroll tbody tr:last-child td{border-bottom:none}
.tbl-scroll tbody tr:hover{background:var(--surface-2)}
td.n,th.n{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap}
.price{font-size:19px; font-weight:600; color:var(--ink)}
.sub{font-size:12.5px; color:var(--dim); display:block; line-height:1.5}
.mall{display:flex; flex-direction:column; line-height:1.45}
.mall b{font-size:15px; font-weight:500}
.tbl-scroll a{color:var(--accent-ink)}
/* 表の1列目の名前リンクも主要な導線。行の高さのままだと23pxしかない。
   min-width も要る。「Qi10」のような短い名前だと幅が40pxを切る */
.tbl-scroll td b > a{display:inline-flex; align-items:center; min-height:44px; min-width:44px}
tr.linkonly td{color:var(--ink-3)}

.pill{display:inline-block; font-family:"Barlow Semi Condensed",sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; padding:2px 8px; border-radius:2px; white-space:nowrap}
.pill.best{background:var(--brass-bright); color:#1B1405}
.pill.ok{background:var(--accent-wash); color:var(--accent-ink)}
.pill.chk{background:var(--warn-wash); color:var(--warn)}
.pill.deal{background:var(--deal); color:var(--deal-pill-ink); font-weight:700}

/* --------------------------------------------------------- お得 / おすすめ
   赤字は「中古の実価格が中古相場の中央値を1,000円以上かつ3%以上下回る」ときだけ。
   新品は中古相場と比較しない。乱発すると意味を失うのでしきい値は緩めない */
.deal{color:var(--deal); font-weight:700}
.price.deal{color:var(--deal)}
.dealnote{display:block; font-size:12.5px; color:var(--deal); font-weight:700; line-height:1.5; margin-top:2px}
tr.deal-row{background:var(--deal-wash)}
tr.deal-row:hover{background:var(--deal-wash)}
tr.deal-row td:first-child{box-shadow:inset 3px 0 0 var(--deal-line)}
tr.rec-row{background:var(--accent-wash)}
tr.rec-row:hover{background:var(--accent-wash)}
tr.rec-row td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

.rec{border:2px solid var(--accent); border-radius:4px; background:var(--accent-wash); padding:16px 18px;
  margin-top:20px; display:flex; gap:15px; align-items:flex-start; flex-wrap:wrap}
.rec-badge{font-family:"Barlow Semi Condensed",sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; background:var(--accent); color:var(--on-accent); border-radius:2px; padding:3px 10px; flex:none}
.rec-body{flex:1 1 260px; min-width:0}
.rec-body h3{font-size:17px; margin-bottom:4px}
.rec-body p{font-size:14.5px; color:var(--ink-2)}
.rec-body .why{font-size:14px; color:var(--accent-ink); margin-top:6px}

/* ------------------------------------------------------- 購入ブロック */
.buy{border:1px solid var(--line); border-radius:4px; background:var(--surface); box-shadow:var(--shadow-md);
  margin-top:22px; overflow:hidden}
.buy-main{padding:22px 24px; display:flex; gap:22px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--line-soft)}
.buy-fig{flex:1 1 250px; min-width:0}
.buy-fig .k{font-family:"Barlow Semi Condensed",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--dim); display:block}
.buy-fig .v{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  font-size:38px; font-weight:600; line-height:1.1; display:block; color:var(--ink)}
.buy-fig .v.is-deal{color:var(--deal)}
.buy-fig .v small{font-size:15px; color:var(--ink-3); font-weight:400; margin-left:5px;
  font-family:"Zen Kaku Gothic New",sans-serif}
.buy-fig .d{font-size:14.5px; color:var(--deal); font-weight:700; margin-top:4px; display:block}
.buy-fig .st{font-size:14px; color:var(--ink-3); margin-top:3px; display:block}
.buy-act{flex:0 1 auto; display:flex; flex-direction:column; gap:8px; min-width:230px}
.buy-alt{padding:13px 24px; background:var(--surface-2); font-size:14px; color:var(--ink-2);
  display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.buy-alt b{color:var(--ink)}
.buy-alt a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid var(--line);
  display:inline-flex; align-items:center; min-height:44px}
.buy-alt a:hover{border-bottom-color:var(--accent)}
.buy-note{padding:11px 24px; font-size:12.5px; color:var(--dim); border-top:1px solid var(--line-soft)}

/* ------------------------------------------------------------ API出典 */
.api{display:inline-flex; align-items:center; gap:5px; font-family:"Barlow Semi Condensed",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.07em; padding:1px 6px; border-radius:2px;
  white-space:nowrap; border:1px solid transparent}
.api.rk{background:var(--deal-wash); color:var(--deal); border-color:var(--deal-line)}
.api.yh{background:var(--warn-wash); color:var(--warn); border-color:var(--warn)}
.api.own{background:var(--accent-wash); color:var(--accent-ink); border-color:var(--accent)}
.api.man{background:var(--surface-2); color:var(--ink-3); border-color:var(--line)}
.api.non{background:var(--ground-2); color:var(--dim); border-color:var(--line)}
.prov{border:1px solid var(--line); border-radius:4px; background:var(--surface-2); padding:15px 18px; margin-top:18px}
.prov h4{font-family:"Barlow Semi Condensed",sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dim); margin-bottom:11px}
.prov ul{display:flex; flex-direction:column; gap:8px}
.prov li{display:grid; grid-template-columns:120px minmax(0,1fr); gap:13px; align-items:baseline;
  font-size:14px; color:var(--ink-2)}
@media (max-width:600px){.prov li{grid-template-columns:minmax(0,1fr); gap:3px}}
.prov li b{color:var(--ink); font-weight:500}
.prov .upd{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  color:var(--dim); font-size:12.5px}

/* --------------------------------------------------------------- 出典注記 */
.src{margin-top:15px; font-size:13.5px; color:var(--ink-3); display:flex; gap:9px; align-items:baseline;
  border-left:2px solid var(--line); padding-left:12px}
.src a{color:var(--accent-ink)}
.warnbox{border:1px solid var(--warn); border-left-width:3px; background:var(--warn-wash); border-radius:3px;
  padding:15px 18px; font-size:14.5px; color:var(--warn); margin-top:20px}
.warnbox b{display:block; margin-bottom:3px; font-size:15px}
.emptybox{background:var(--surface); border:1px dashed var(--line); border-radius:4px; padding:34px 22px;
  color:var(--ink-3); font-size:15px}
.emptybox b{display:block; color:var(--ink); font-size:17px; margin-bottom:8px}

/* --------------------------------------------------- 値動きグラフ（SVG） */
.chartbox{border:1px solid var(--line); border-radius:4px; background:var(--surface); padding:20px 22px; margin-top:20px}
.chart-t{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px}
.chart-t h3{font-size:16.5px}
.chart-t .verdict{font-size:14.5px; font-weight:700; color:var(--deal)}
.chart-t .verdict.high{color:var(--warn)}
.chart-t .verdict.flat{color:var(--ink-3); font-weight:400}
.lchart{width:100%; height:auto; display:block; margin-top:8px; overflow:visible}
.lchart .gl{stroke:var(--line-soft); stroke-width:1; stroke-dasharray:3 3}
.lchart .axl{fill:var(--dim); font-size:11px; font-family:"Barlow Semi Condensed",sans-serif}
.lchart .refl{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:5 4; opacity:.8}
.lchart .ln{fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
.lchart .s1{color:var(--accent)} .lchart .s2{color:var(--brass-bright)} .lchart .s3{color:var(--c3)}
.chart-lg{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--ink-3)}
.chart-lg span{display:flex; align-items:center; gap:7px}
.chart-lg i{width:16px; height:2.5px; border-radius:2px; flex:none}
.chart-lg .l1 i{background:var(--accent)} .chart-lg .l2 i{background:var(--brass-bright)} .chart-lg .l3 i{background:var(--c3)}
.chart-lg .lr i{background:none; border-top:2px dashed var(--ink-3); height:0}
.chart-none{font-size:14px; color:var(--ink-3); margin-top:8px}

/* ------------------------------------------------------- 相場レンジバー */
.range{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:22px 24px}
.range-t{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap}
.range-t h3{font-size:16.5px}
.range-t .n{font-size:13.5px; color:var(--dim)}
.bar{position:relative; height:8px; border-radius:4px; background:var(--ground-2); margin:60px 0 56px}
.bar .fill{position:absolute; top:0; bottom:0; border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--brass-bright))}
.bar .med{position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--ink)}
.bar .lab{position:absolute; transform:translateX(-50%); white-space:nowrap; text-align:center}
.bar .lab.s{transform:none; text-align:left}
.bar .lab.e{transform:translateX(-100%); text-align:right}
.bar .lab .v{display:block; font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:600; line-height:1.25}
.bar .lab .k{display:block; font-size:11.5px; color:var(--dim); line-height:1.3}
.bar .lab.top{bottom:16px} .bar .lab.bot{top:16px}

/* 値が密集するとラベル同士が重なって読めなくなる（サンプルが少ないと
   中央値と四分位が同じ値になることが実際に起きる）。
   そのときは位置に置くのをやめ、下の一覧で数字を読ませる。
   スマホは幅が足りず必ず重なるので、常に一覧に切り替える。 */
.bar-list{display:none; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px 14px; margin-top:6px}
.bar-list > div{display:flex; flex-direction:column; gap:1px; min-width:0}
.bar-list dt{font-size:11.5px; color:var(--dim); line-height:1.3}
.bar-list dd{margin:0; font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  font-size:17px; font-weight:600; line-height:1.25; color:var(--ink)}
.range.is-tight .bar .lab{display:none}
.range.is-tight .bar{margin:18px 0 22px}
.range.is-tight .bar-list{display:grid}
@media (max-width:560px){
  .bar .lab{display:none}
  .bar{margin:18px 0 22px}
  .bar-list{display:grid}
}
.cond{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:8px}
@media (max-width:660px){.cond{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cond div{border:1px solid var(--line-soft); border-radius:3px; padding:11px 13px; background:var(--surface-2)}
.cond .r{font-family:"Bodoni Moda",serif; font-size:16px; color:var(--brass); display:block}
.cond .p{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums; font-size:16px;
  font-weight:600; margin-top:2px; display:block}
.cond .c{font-size:12.5px; color:var(--dim); display:block}
.spark{width:100%; height:66px; display:block}

/* ----------------------------------------------------------------- 諸元 */
.specs{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line-soft);
  border:1px solid var(--line); border-radius:4px; overflow:hidden}
.specs.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:800px){.specs,.specs.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec{background:var(--surface); padding:15px 17px; display:flex; flex-direction:column; gap:3px; min-width:0}
.spec .k{font-family:"Barlow Semi Condensed",sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim)}
.spec .v{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums; font-size:23px;
  font-weight:600; line-height:1.2}
.spec .v small{font-size:13px; font-weight:400; color:var(--ink-3); margin-left:2px}
.spec .v.ja{font-family:"Zen Kaku Gothic New",sans-serif; font-size:17px; font-weight:700}
.spec .v.down{color:var(--accent-ink)}
.spec .v.up{color:var(--warn)}

/* ------------------------------------------- シャフトカード（スマホ用）
   中核コンテンツ（価格比較・一覧）を横スクロールの表にしない。820px以下でカードへ */
.scards{display:none; flex-direction:column; gap:10px}
@media (max-width:820px){
  .scards{display:flex}
  .tbl-scroll.swap{display:none}
}
.scard{border:1px solid var(--line); border-radius:5px; background:var(--surface); padding:14px 15px;
  display:flex; flex-direction:column; gap:10px}
.scard.is-deal{border-color:var(--deal-line); border-width:2px; background:var(--deal-wash)}
.scard.is-rec{border-color:var(--accent); border-width:2px; background:var(--accent-wash)}
.sc-hd{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.sc-hd .nm{font-size:16px; font-weight:700; line-height:1.4; flex:1 1 auto; min-width:0}
/* カードの見出しは主要な導線。指で押せる高さを確保する */
.sc-hd .nm a{text-decoration:none; display:flex; align-items:center; min-height:44px}
.sc-sub{font-size:13px; color:var(--dim); line-height:1.5}
.sc-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.sc-meta > span:not(.api){font-size:13px; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:3px; padding:2px 8px}
.scard.is-deal .sc-meta > span:not(.api),.scard.is-rec .sc-meta > span:not(.api){background:var(--surface)}
.sc-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:10px}
.sc-price .v{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  font-size:26px; font-weight:600; line-height:1.1}
.scard.is-deal .sc-price .v{color:var(--deal)}
.sc-price .gap{font-size:13.5px; font-weight:700; color:var(--deal)}
.sc-price .gap.up{color:var(--warn)}
.sc-price .gap.flat{color:var(--ink-3); font-weight:400}
.sc-price .nw{font-size:13px; color:var(--ink-3); font-family:"Barlow Semi Condensed",sans-serif;
  font-variant-numeric:tabular-nums; width:100%; margin-top:-4px}
.sc-act{display:flex; gap:8px; flex-wrap:wrap}
.sc-act .addcmp{flex:1 1 130px; min-height:48px}
.sc-act .btn{flex:1 1 130px; min-height:48px}
.sc-none{font-size:13.5px; color:var(--ink-3); border-top:1px solid var(--line-soft); padding-top:10px}

/* ------------------------------------------- 価格カード（スマホの価格比較） */
.pcards{display:none; flex-direction:column; gap:11px}
@media (max-width:820px){.pcards{display:flex}}
.pcard{border:1px solid var(--line); border-radius:5px; background:var(--surface); padding:15px 16px 16px;
  display:flex; flex-direction:column; gap:11px}
.pcard.is-deal{border-color:var(--deal-line); border-width:2px; background:var(--deal-wash)}
.pcard.is-rec{border-color:var(--accent); border-width:2px; background:var(--accent-wash)}
.pcard.is-off{opacity:.92}
.pc-hd{display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap}
.pc-hd .nm{font-size:16.5px; font-weight:700; line-height:1.4}
.pc-hd .shop{font-size:13px; color:var(--dim); width:100%; line-height:1.5; margin-top:-4px}
.pc-badges{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.pc-total{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:11px}
.pc-total .k{font-family:"Barlow Semi Condensed",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--dim)}
.pc-total .v{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  font-size:30px; font-weight:600; line-height:1.1}
.pcard.is-deal .pc-total .v{color:var(--deal)}
.pc-total .gap{font-size:14px; font-weight:700; color:var(--deal); width:100%; line-height:1.4}
.pc-total .gap.high{color:var(--warn)}
.pc-total .gap.flat{color:var(--ink-3); font-weight:400}
.pc-break{font-size:13.5px; color:var(--ink-3); font-family:"Barlow Semi Condensed",sans-serif;
  font-variant-numeric:tabular-nums; margin-top:-6px}
.pc-meta{display:flex; gap:7px; flex-wrap:wrap}
.pc-meta span{font-size:13px; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:3px; padding:3px 9px}
.pcard.is-deal .pc-meta span,.pcard.is-rec .pc-meta span{background:var(--surface)}
.pc-none{font-size:14px; color:var(--ink-3); border-top:1px solid var(--line-soft); padding-top:11px}

/* --------------------------------------------------- 分布図（重量×調子） */
.chart-wrap{background:var(--surface); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.chart-scroll{overflow-x:auto}
.plot{position:relative; min-width:720px; height:340px; margin:28px 32px 40px 50px;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line)}
.grid-l{position:absolute; left:0; right:0; border-top:1px dashed var(--line-soft)}
.grid-v{position:absolute; top:0; bottom:0; border-left:1px dashed var(--line-soft)}
.ax-y{position:absolute; left:-40px; transform:translateY(-50%); font-family:"Barlow Semi Condensed",sans-serif;
  font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}
.ax-x{position:absolute; bottom:-26px; transform:translateX(-50%); font-size:12px; color:var(--dim); white-space:nowrap}
.pdot{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px; white-space:nowrap}
.pdot.l{flex-direction:row-reverse}
.pdot i{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);
  flex:none; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:0;
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; color:var(--on-accent)}
.pdot.b i{background:var(--brass-bright); box-shadow:0 0 0 3px var(--brass-wash); color:#1B1405}
.pdot .dlab{font-size:13px; color:var(--ink-2); font-weight:500}
/* スマホはラベルを載せる余地が無いので、番号入りの点＋下の凡例で読ませる */
.plotlegend{display:none; flex-direction:column; gap:1px; background:var(--line-soft); border-top:1px solid var(--line-soft)}
.plotlegend li{background:var(--surface)}
.plotlegend a,.plotlegend .pl-row{width:100%; display:flex; align-items:center; gap:11px; padding:10px 20px;
  min-height:48px; text-align:left; text-decoration:none}
.plotlegend a:hover{background:var(--surface-2)}
.plotlegend .pl-row{color:var(--ink-3)}
.plotlegend .pl-row .pn{background:var(--ground-2); color:var(--dim)}
.plotlegend .pn{width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  flex:none; display:flex; align-items:center; justify-content:center;
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:13px}
.plotlegend .b .pn{background:var(--brass-bright); color:#1B1405}
.plotlegend .pnm{font-size:15px; font-weight:500; flex:1 1 auto; min-width:0; line-height:1.4}
.plotlegend .psp{font-size:13px; color:var(--dim); font-family:"Barlow Semi Condensed",sans-serif;
  font-variant-numeric:tabular-nums; flex:none; white-space:nowrap}
@media (max-width:900px){
  .plot{min-width:0 !important; margin:24px 26px 34px 44px; height:300px}
  .pdot .dlab{display:none}
  .pdot i{width:24px; height:24px; font-size:12px; box-shadow:0 0 0 2px var(--surface)}
  .plotlegend{display:flex}
  .plotlegend a,.plotlegend .pl-row{padding:10px 16px}
}
.chart-foot{display:flex; gap:20px; flex-wrap:wrap; align-items:center; padding:14px 26px;
  border-top:1px solid var(--line-soft); background:var(--surface-2); font-size:13px; color:var(--dim)}
.lgd{display:flex; align-items:center; gap:6px}
.lgd i{width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none}
.lgd.b i{background:var(--brass-bright)}

/* ------------------------------------------- 下部ドック（トレイ＋購入バー） */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:70; pointer-events:none}
.dock > *{pointer-events:auto}
.tray{background:var(--surface); border-top:1px solid var(--line); box-shadow:var(--shadow-up); display:none}
body.tray-on .tray{display:block}
.tray-in{max-width:1180px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.tray-lb{font-family:"Barlow Semi Condensed",sans-serif; font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); flex:none}
.tray-items{display:flex; gap:8px; flex-wrap:wrap; flex:1 1 260px; min-width:0}
.tray-item{display:inline-flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:3px; padding:0 5px 0 13px; min-height:48px; font-size:14px; max-width:100%}
.tray-item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tray-item button{width:44px; height:44px; border-radius:3px; color:var(--dim); font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center; flex:none}
.tray-item button:hover{background:var(--ground-2); color:var(--ink)}
.tray-act{display:flex; gap:9px; align-items:center; flex:none; margin-left:auto}
.tray-hint{font-size:13px; color:var(--dim); flex:none}
.tray-count{display:none; align-items:center; gap:7px; font-size:14.5px; font-weight:700; white-space:nowrap; flex:none}
.tray-count b{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  font-size:20px; color:var(--brass)}
@media (max-width:700px){
  .tray-lb,.tray-hint,.tray-items{display:none}
  .tray-count{display:inline-flex}
  .tray-in{padding:10px 14px; gap:10px}
  .tray-act{gap:8px}
}
/* 購入バー：スマホのシャフト詳細だけに出す。指の届く位置に最安値とCTAを固定する。
   比較中は意図が「買う」から「比べる」に移るので隠す */
.buybar{display:none; background:var(--surface); border-top:1px solid var(--line); box-shadow:var(--shadow-up)}
@media (max-width:900px){ body[data-page="shaft"]:not(.tray-on) .buybar{display:block} }
.buybar-in{display:flex; align-items:center; gap:13px; padding:7px 16px; max-width:1180px; margin:0 auto}
.bb-fig{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.bb-k{font-family:"Barlow Semi Condensed",sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim)}
.bb-v{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums; font-size:24px;
  font-weight:600; color:var(--ink); line-height:1.15}
.bb-v.is-deal{color:var(--deal)}
.bb-d{font-size:12px; color:var(--deal); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.buybar .btn{flex:none; min-height:48px; padding:0 20px; font-size:15px}

/* ------------------------------------------------------ パンくず / ページ頭 */
.crumb{display:flex; gap:9px; flex-wrap:wrap; align-items:center; padding:8px 0 0; font-size:13.5px; color:var(--dim)}
/* パンくずも指で押す。見た目は変えず、当たり判定だけ44pxにする */
.crumb a{text-decoration:none; color:var(--ink-3); display:inline-flex; align-items:center; min-height:44px}
.crumb a:hover{color:var(--accent-ink)}
.crumb i{font-style:normal; opacity:.5}
.phd{padding:18px 0 30px; border-bottom:1px solid var(--line-soft)}
.phd h1{font-size:clamp(25px,3.3vw,37px); letter-spacing:-.01em; margin-top:10px}
.phd .lead{margin-top:11px; color:var(--ink-2); font-size:15.5px; max-width:48em}
.phd-act{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; align-items:center}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
/* タグがリンクのときは押せる大きさにする（バッジのままだと24pxしかない） */
.tags a.pill{display:inline-flex; align-items:center; min-height:44px; padding:0 13px;
  font-size:13px; text-decoration:none; letter-spacing:.05em}
.tags a.pill:hover{filter:brightness(.96)}

/* ------------------------------------------------------------------ FAQ */
.faq{border:1px solid var(--line); border-radius:4px; background:var(--surface); overflow:hidden}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:none}
.faq summary{padding:16px 19px; cursor:pointer; font-size:15.5px; font-weight:500; list-style:none;
  display:flex; gap:12px; align-items:baseline; min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; font-family:"Bodoni Moda",serif; color:var(--brass-bright); font-size:15px; flex:none}
.faq summary:hover{background:var(--surface-2)}
.faq .a{padding:0 19px 18px 43px; font-size:15px; color:var(--ink-2)}

/* -------------------------------------------------------------- 互換表 */
.mx td.mark{text-align:center; font-family:"Bodoni Moda",serif; font-size:16px}
.mx td.mark.y{color:var(--accent-ink)}
.mx td.mark.n{color:var(--dim); opacity:.45}
.mx td.mark.q{color:var(--warn)}
.mx td.mark.c{color:var(--deal)}
.mx th.row{font-family:"Zen Kaku Gothic New",sans-serif; text-transform:none; letter-spacing:0; font-size:15px;
  font-weight:500; color:var(--ink); background:var(--surface); white-space:nowrap;
  border-bottom:1px solid var(--line-soft); text-align:left; padding:12px 15px}
.mxlgd{display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; font-size:13.5px; color:var(--ink-3)}
.mxlgd span{display:flex; align-items:center; gap:6px}
.mxlgd b{font-family:"Bodoni Moda",serif; font-size:15px}
.golinks{display:flex; gap:7px; flex-wrap:wrap}
.golinks a{font-size:13.5px; text-decoration:none; color:var(--accent-ink); border:1px solid var(--line);
  border-radius:3px; padding:0 12px; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px}
.golinks a:hover{border-color:var(--accent); background:var(--accent-wash)}

/* -------------------------------------------------------------- 関連 */
.rel{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
@media (max-width:860px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.rel{grid-template-columns:minmax(0,1fr)}}
.rel a{border:1px solid var(--line); border-radius:3px; padding:12px 14px; text-decoration:none;
  background:var(--surface); display:flex; flex-direction:column; gap:2px; transition:border-color .15s;
  min-height:60px; justify-content:center}
.rel a:hover{border-color:var(--accent)}
.rel .t{font-size:14.5px; font-weight:500}
.rel .s{font-size:12.5px; color:var(--dim); font-family:"Barlow Semi Condensed",sans-serif; letter-spacing:.03em}

/* --------------------------------------------------------------- 比較表 */
.cmp-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:4px; background:var(--surface)}
table.cmp{border-collapse:collapse; width:100%; min-width:640px}
table.cmp th,table.cmp td{padding:12px 15px; border-bottom:1px solid var(--line-soft); font-size:15px;
  text-align:left; vertical-align:middle}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:none}
table.cmp th.rowk{width:150px; background:var(--surface-2); font-family:"Barlow Semi Condensed",sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap; border-right:1px solid var(--line-soft)}
table.cmp thead th.col{background:var(--surface); border-bottom:1px solid var(--line); vertical-align:top;
  padding:16px 15px; text-transform:none; letter-spacing:0; font-family:"Zen Kaku Gothic New",sans-serif}
table.cmp thead th.col .cn{font-size:16.5px; font-weight:700; color:var(--ink); display:block; line-height:1.4}
table.cmp thead th.col .cn a{display:inline-flex; align-items:center; min-height:44px; min-width:44px}
table.cmp thead th.col .cm{font-size:13px; color:var(--dim); font-weight:400; display:block}
table.cmp thead th.col .cx{margin-top:9px; display:inline-flex}
table.cmp td.cv{font-family:"Barlow Semi Condensed",sans-serif; font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; white-space:nowrap}
table.cmp td.cv .u{font-size:13px; font-weight:400; color:var(--ink-3); margin-left:2px}
table.cmp td.cv.ja{font-family:"Zen Kaku Gothic New",sans-serif; font-size:15.5px; font-weight:700}
table.cmp td.win{background:var(--accent-wash)}
table.cmp td.win::after{content:"最安"; font-family:"Barlow Semi Condensed",sans-serif; font-size:10.5px;
  letter-spacing:.09em; color:var(--accent-ink); margin-left:8px; vertical-align:2px}
table.cmp td.diff{color:var(--brass)}
.cmp-note{display:flex; gap:9px; align-items:baseline; margin-top:15px; font-size:13.5px; color:var(--ink-3);
  border-left:2px solid var(--line); padding-left:12px}
.cmp-log{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:18px 20px;
  margin-top:22px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.cmp-log .ic{font-family:"Bodoni Moda",serif; font-size:22px; color:var(--brass-bright); line-height:1.2; flex:none}
.cmp-log div{flex:1 1 300px}
.cmp-log h3{font-size:15.5px; margin-bottom:5px}
.cmp-log p{font-size:14px; color:var(--ink-2)}

/* 横スクロールする表は1列目を固定して行を見失わないようにする */
@media (max-width:900px){
  table.cmp th.rowk{position:sticky; left:0; z-index:3; width:96px; min-width:96px; box-shadow:1px 0 0 var(--line)}
  table.cmp thead th.col{min-width:172px}
  .mx th.row{position:sticky; left:0; z-index:3; box-shadow:1px 0 0 var(--line)}
  .mx{min-width:700px}
}
/* 2本比較はスマホでも横スクロールせずに収まるよう列を詰める（3本のときだけスクロール） */
.lb-n{display:none}
@media (max-width:520px){
  table.cmp{min-width:0}
  table.cmp th.rowk{width:72px; min-width:72px; font-size:10.5px; letter-spacing:.02em; padding:10px 6px}
  table.cmp thead th.col{min-width:0; padding:12px 6px}
  table.cmp thead th.col .cn{font-size:13.5px; line-height:1.35}
  table.cmp thead th.col .cm{font-size:11.5px}
  table.cmp td{padding:9px 6px}
  table.cmp td.cv{font-size:16px}
  table.cmp td.cv.ja{font-size:13.5px; white-space:normal}
  table.cmp .btn{padding:0 10px; font-size:13.5px; white-space:nowrap}
  table.cmp thead th.col .cx{display:block}
  table.cmp thead th.col .cx .btn,table.cmp thead th.col .cx .addcmp{width:100%; padding:0 8px; font-size:12.5px}
  table.cmp .lb-w{display:none}
  table.cmp .lb-n{display:inline}
}
.scrollhint{display:none; align-items:center; gap:7px; font-size:13px; color:var(--dim); margin-bottom:9px}
.scrollhint .lat{color:var(--brass-bright)}
@media (max-width:900px){ .scrollhint{display:flex} }

/* -------------------------------------------------------------- footer */
.ftr{background:var(--surface-2); border-top:1px solid var(--line); padding:44px 0 30px; margin-top:20px}
.ftr-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px}
@media (max-width:860px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px}}
.ftr h4{font-family:"Barlow Semi Condensed",sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin-bottom:11px}
.ftr a{font-size:14.5px; color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.ftr a:hover{color:var(--accent-ink)}
.ftr .about{font-size:14px; color:var(--ink-3); max-width:30em; margin-top:11px}
.ftr-btm{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--dim);
  display:flex; gap:18px; flex-wrap:wrap}

/* ----------------------------------------------------------- 本文の地の文 */
.prose p{margin:0 0 14px; color:var(--ink-2); max-width:62ch; font-size:16px}
.prose p strong{color:var(--ink)}
.prose ul{display:flex; flex-direction:column; gap:8px; margin:0 0 16px}
.prose ul li{padding-left:17px; position:relative; color:var(--ink-2); font-size:16px}
.prose ul li::before{content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px;
  border-radius:50%; background:var(--brass-bright)}
.prose h2{font-size:clamp(20px,2.3vw,25px); margin:34px 0 12px}
.prose h3{font-size:18px; margin:24px 0 8px}
.prose a{color:var(--accent-ink)}
.prose small{color:var(--ink-3); font-size:13.5px}

/* -------------------------------------------------------------- スマホ */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .sec{padding:34px 0}
  .sec-hd{margin-bottom:20px}
  .hero{padding:26px 0 24px}
  .phd{padding:14px 0 24px}
  .picker-body{padding:16px}
  .range{padding:18px 16px}
  .chartbox{padding:16px 14px}
  .prov{padding:14px 15px}
  .buy-main{padding:18px 16px; gap:16px}
  .buy-alt,.buy-note{padding-left:16px; padding-right:16px}
  .buy-act{min-width:0; width:100%}
  .buy-fig .v{font-size:34px}
  .rec{padding:15px 16px}
  .rec > .btn{width:100%}
  .faq summary{padding:15px 16px}
  .faq .a{padding:0 16px 16px 40px}
  .tbl-scroll th,.tbl-scroll td{padding:11px 12px}
  .answer{padding:15px 16px}
  .answer-lead{font-size:16px}
}

/* ============================================================================
   初回アクセス時の使い方ガイド
   ========================================================================== */
.gg-guide[hidden]{display:none}
.gg-guide{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,17,13,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px; overscroll-behavior:contain;
}
.gg-guide-card{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 20px 60px -24px rgba(0,0,0,.5);
  width:100%; max-width:460px; padding:26px 26px 22px; position:relative;
}
.gg-guide-close{
  position:absolute; top:8px; right:8px;
  width:44px; height:44px; border:none; background:none; cursor:pointer;
  color:var(--dim); font-size:22px; line-height:1; border-radius:4px;
}
.gg-guide-close:hover{background:var(--surface-2); color:var(--ink)}
.gg-guide-step{
  font-family:"Barlow Semi Condensed",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.14em; color:var(--brass);
}
.gg-guide-card h2{
  font-size:20px; line-height:1.5; margin:8px 0 10px; color:var(--ink);
  text-wrap:pretty;
}
.gg-guide-card p{ font-size:15px; line-height:1.85; color:var(--ink-2); margin:0 }
.gg-guide-dots{ display:flex; gap:7px; margin:18px 0 0 }
.gg-guide-dot{
  width:7px; height:7px; border-radius:50%; background:var(--line);
}
.gg-guide-dot.is-on{ background:var(--accent); width:20px; border-radius:4px }
.gg-guide-actions{
  display:flex; gap:10px; align-items:center; margin-top:18px; flex-wrap:wrap;
}
.gg-guide-actions a{
  flex:1 1 auto; min-height:48px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:4px; text-decoration:none;
  color:var(--ink-2); font-size:14.5px; background:var(--surface); padding:0 14px;
}
.gg-guide-actions a:hover{ border-color:var(--accent); color:var(--accent-ink) }
.gg-guide-actions button{
  flex:0 0 auto; min-height:48px; padding:0 26px; border:none; border-radius:4px;
  background:var(--accent); color:var(--on-accent); font-weight:700; font-size:15px;
  cursor:pointer;
}
.gg-guide-actions button:hover{ filter:brightness(1.12) }
.gg-guide-skip{
  display:block; margin:14px auto 0; background:none; border:none; cursor:pointer;
  color:var(--dim); font-size:13px; min-height:44px; padding:0 12px;
}
.gg-guide-skip:hover{ color:var(--ink-2) }
@media (max-width:520px){
  .gg-guide{ padding:14px; align-items:flex-end }
  .gg-guide-card{ padding:22px 18px 18px; max-width:none }
  .gg-guide-card h2{ font-size:18px }
  .gg-guide-actions{ flex-direction:column-reverse; gap:8px }
  .gg-guide-actions a,.gg-guide-actions button{ width:100%; flex:none }
}

/* --- メインビジュアル（全幅バナー）-----------------------------------------
   右カラムに置くと本文と高さが合わずズレるため、全幅で置く。
   PCは横長（1600x848）、スマホは縦長（720x1456）を出し分ける。 */
.hero-banner{
  margin:0 0 26px;
  border-radius:8px;
  overflow:hidden;
  background:var(--surface-2,#F1F4EE);
  line-height:0;                 /* img下の余白を消す */
}
.hero-banner img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
@media (max-width:760px){
  .hero-banner{ margin:0 0 20px; border-radius:6px }
}