/* トップページ(色・文字・ヘッダー・フッターは base.css と共通) */
:root{--w:1240px}
html{scroll-padding-top:96px;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-size:15px;line-height:1.65}
.bar{position:sticky;top:0;z-index:10}
.bar-in{max-width:var(--w);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:24px}
.logo{display:block;flex:none;line-height:0;color:#fff}
.logo svg{display:block;height:30px;width:auto}
.tb{position:relative;flex:1;min-width:0;height:46px;display:flex;align-items:stretch;background:var(--panel);border-radius:6px;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)}
.tb:focus-within{outline:3px solid var(--amber);outline-offset:2px}
.menu{flex:none;border-right:1px solid var(--line);color:var(--ink)}
.menu summary{list-style:none;height:100%;display:flex;align-items:center;gap:10px;padding:0 16px;font-weight:700;cursor:pointer;user-select:none;border-radius:6px 0 0 6px;background:var(--field)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.menu[open] summary{background:var(--amber);color:#1e262d}
.menu[open] summary::after{transform:rotate(225deg) translate(-1px,0)}
.menu ol{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:300px;max-height:min(70vh,520px);overflow:auto;margin:0;padding:4px 0;list-style:none;background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--edge);border-radius:6px;box-shadow:0 14px 28px -10px rgba(0,0,0,.45)}
.menu li+li{border-top:1px solid var(--line)}
.menu a{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;text-decoration:none;font-weight:700;color:var(--ink)}
.menu a span{font-weight:400;color:var(--mute);font-variant-numeric:tabular-nums}
.menu a:hover,.menu a:focus-visible{background:var(--amber);color:#1e262d;outline-offset:-3px}
.menu a:hover span,.menu a:focus-visible span{color:#1e262d}
.tb input{flex:1;min-width:0;border:0;border-radius:0;background:transparent;color:var(--ink);font:inherit;padding:0 16px;outline:none;-webkit-appearance:none;appearance:none;box-shadow:none}
.tb input::placeholder{color:var(--mute)}
.tb input::-webkit-search-cancel-button{-webkit-appearance:none}
.tot{flex:none;display:flex;align-items:center;padding:0 16px;border-left:1px solid var(--line);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

main{max-width:var(--w);margin:0 auto;padding:26px 24px 72px}
/* 冒頭: 見出し + 計器風の数値 */
.intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px}
.intro h1{margin:0 0 6px;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.35;font-weight:800;border-left:8px solid var(--amber);padding-left:14px}
.lead{margin:0;color:var(--mute);font-size:.92rem;max-width:42em}
.specs{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.specs li{min-width:112px;padding:9px 14px 8px;background:var(--readout);border-radius:5px;border-bottom:3px solid #000;color:var(--ro-sub);font-size:.78rem;line-height:1.4}
.specs b{display:block;font-size:1.7rem;line-height:1.15;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ro-ink)}
.genre{margin-top:30px}
.row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.g{margin:0;font-size:1.25rem;line-height:1.35;font-weight:800;line-break:strict;overflow-wrap:anywhere}
.gbtn{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;min-height:152px;padding:16px;text-align:left;font:inherit;font-weight:800;color:#fff;background:var(--plate);border:0;border-top:6px solid var(--amber);border-bottom:3px solid #000;border-radius:6px;cursor:pointer}
.gbtn small{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:400;font-variant-numeric:tabular-nums;color:#c3ccd5}
.car{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.gbtn[aria-expanded=true] .car{transform:rotate(225deg) translate(-2px,-2px)}
.gbtn:hover{background:#34434f}
@media(prefers-color-scheme:dark){.gbtn:hover{background:#1f2831}}
.gbtn:focus-visible{outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.gbtn{transition:background .15s}.car{transition:transform .3s}}

.t{display:flex;flex-direction:column;gap:6px;min-height:152px;padding:14px;background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--edge);border-radius:6px;text-decoration:none;color:var(--ink)}
.t i{font-style:normal;font-size:.75rem;color:var(--mute);line-height:1.4}
.t b{font-size:1rem;line-height:1.45}
.t span{margin-top:auto;font-size:.8rem;line-height:1.55;color:var(--mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t:hover{border-color:var(--ink);border-bottom-color:var(--amber)}
@media(prefers-reduced-motion:no-preference){.t{transition:transform .12s,border-color .12s}.t:hover{transform:translateY(-2px)}}

.more{display:flex;flex-direction:column;justify-content:space-between;min-height:152px;padding:14px;text-align:left;font:inherit;color:var(--ink);background:var(--field);border:1px dashed var(--edge);border-radius:6px;cursor:pointer}
.more b{font-size:1rem}
.more small{color:var(--mute);font-size:.85rem;font-variant-numeric:tabular-nums}
.more:hover{border-color:var(--ink);border-style:solid}
.more[aria-expanded=true]{background:var(--panel);border:1px solid var(--ink)}

.all{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),visibility 0s .45s}
.all.open{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.all-in{min-height:0;overflow:hidden}
.pane{margin-top:12px;padding:18px 18px 22px;background:var(--bench);border:1px solid var(--line);border-top:4px solid var(--plate);border-radius:6px;opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.all.open .pane{opacity:1;transform:none;transition-delay:.08s}
@media(prefers-reduced-motion:reduce){.all,.pane{transition:none}}
.pane h3{margin:22px 0 10px;font-size:.92rem}
.pane h3:first-child{margin-top:0}
.pane h3 small{margin-left:.5em;font-weight:400;color:var(--mute)}
.pane ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pane .t{height:100%;min-height:104px}
.pane .t span{-webkit-line-clamp:2}

.cnt{margin:20px 0 14px;font-weight:700}
.rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.none{margin:20px 0;color:var(--mute)}

@media(max-width:1000px){
 .row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(168px,188px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:0 0 10px}
 .row>*{scroll-snap-align:start}
}
@media(max-width:720px){
 .bar-in{flex-wrap:wrap;gap:10px;padding:10px 16px}
 .tb{flex-basis:100%;height:44px}
 .tot{display:none}
 .menu ol{width:min(300px,calc(100vw - 36px))}
 main{padding:18px 16px 56px}
 .specs li{min-width:0;flex:1}
 html{scroll-padding-top:124px}
}
@media(max-width:380px){.menu summary{padding:0 12px}}
.specs li{white-space:nowrap}
@media(max-width:720px){.specs li{padding:9px 10px 8px}.specs b{font-size:1.5rem}}