.cat-hero{padding:46px 0 26px;border-bottom:1px solid var(--line)}
.cat-hero .eyebrow{margin-bottom:14px}
.cat-hero h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.015em;margin-bottom:12px}
.cat-hero p{color:var(--ink-dim);max-width:62ch;font-size:17px}
.cat-hero .actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.legend .li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--ink-dim)}
.legend .dot{width:10px;height:10px;border-radius:2px}

/* jump nav */
.jump{position:sticky;top:var(--masthead-h,69px);z-index:40;background:linear-gradient(180deg,rgba(13,17,23,.96),rgba(13,17,23,.7));backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:11px 0}
.jump .wrap{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.jump a{font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:6px 12px;border:1px solid var(--line-bright);border-radius:20px;color:var(--ink-dim)}
.jump a:hover{border-color:var(--accent);color:var(--accent)}
.jump .cnt{color:var(--ink-faint)}

section.catgroup{padding:38px 0 8px}
.cg-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.cg-head h2{font-size:25px;letter-spacing:-.01em}
.cg-head .en{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.cg-head .qty{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--accent)}
.cg-sub{color:var(--ink-faint);font-size:14.5px;margin-bottom:16px}

/* spec table */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:15.5px}
thead th{
  font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);text-align:left;padding:11px 12px;background:var(--panel-2);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;
}
tbody tr{border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
tbody tr.main:hover{background:var(--panel)}
tbody td{padding:11px 12px;vertical-align:middle}
td.code{font-family:var(--mono);font-size:14px;color:var(--ink-faint);white-space:nowrap}
td.name{font-weight:600;min-width:180px}
td.name .flag{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;background:var(--accent);color:#0d1117;padding:1px 6px;border-radius:3px;margin-left:7px;font-weight:700;vertical-align:middle}
td.soc{font-family:var(--mono);font-size:14px;color:var(--ink-dim);white-space:nowrap}
td.tops{font-family:var(--mono);font-weight:600;text-align:right;white-space:nowrap;font-size:15px}
td.tops .u{color:var(--ink-faint);font-size:13px;font-weight:400;margin-left:2px}
td.ff{font-family:var(--mono);font-size:14px;color:var(--ink-dim);white-space:nowrap}
.accdot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:middle}
tr.detail{display:none;background:var(--bg)}
tr.detail.open{display:table-row}
tr.detail td{padding:0}
.detail-inner{padding:16px 18px 20px;border-left:3px solid var(--accent)}
.detail-inner .cat-thumb{display:none;float:right;width:200px;aspect-ratio:4/3;margin:0 0 12px 18px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel-2)}
.detail-inner .cat-thumb.has{display:block}
.detail-inner .cat-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:560px){.detail-inner .cat-thumb{float:none;width:100%;margin:0 0 12px 0}}
.detail-inner .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 28px}
.detail-inner .drow{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.detail-inner .dk{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.detail-inner .dv{color:var(--ink);font-family:var(--mono);font-size:13px}
.detail-inner .foot{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.detail-inner .tags span{font-family:var(--mono);font-size:13px;color:var(--ink-dim);border:1px solid var(--line-bright);padding:3px 8px;border-radius:3px;margin-right:5px}
@media print{
  .jump,.masthead,.cat-hero .actions{display:none}
  tr.detail{display:table-row!important}
  body::before{display:none}
  body{background:#fff;color:#111}
}
/* ===== RESPONSIVE (catalog) ===== */
@media(max-width:820px){
  .cat-hero h1{font-size:26px}
  .cat-hero p{font-size:15px}
  /* モバイルはmastheadが折り返し高さが可変なので二段stickyを解除 */
  .jump{position:static;top:auto}
  /* テーブルは横スクロールで全列を保持（データ欠落を避ける） */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl-wrap table{min-width:720px}
  .tbl-wrap::after{content:"← 横スクロールで全項目を表示 →";display:block;font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-align:center;padding:8px;border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .jump .wrap{gap:5px}
  .detail-inner .dgrid{grid-template-columns:1fr!important}
  .detail-inner .foot{flex-direction:column;align-items:stretch;gap:10px}
  .detail-inner .foot .btn{margin-left:0!important;text-align:center}
}

/* ===== BRAND LOGO (v42) — 背景完全透過・色は継承 ===== */
.brand{display:flex;align-items:center;gap:0;white-space:nowrap;color:var(--ink);text-decoration:none}

.brand:hover 
@media(max-width:640px){}

.brand-logo 
.brand-logo 
.brand-logo 
.brand:hover{opacity:.85;transition:opacity .15s}
@media(max-width:640px){}

.brand{display:flex;align-items:center;gap:0;white-space:nowrap;color:var(--ink);text-decoration:none}
.brand-logo{height:32px;width:auto;display:block;transition:opacity .15s}
.brand:hover .brand-logo{opacity:.82}
@media(max-width:640px){.brand-logo{height:26px}}

/* ===== ACCESSIBILITY (v43) ===== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--accent);color:#000;padding:12px 20px;font-family:var(--mono);font-size:14px;font-weight:600;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}
/* フォーカス可視化（キーボード操作） */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* タップ領域を最低36px確保（モバイル操作性・WCAG 2.5.5） */
.chip-btn,.tile,.mast-nav a,.btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}
.gal-thumb{min-width:44px;min-height:36px}
@media(max-width:640px){
  .chip-btn,.tile,.btn{min-height:40px}
}
/* prefers-reduced-motion 対応 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ===== CONTACT CTA & COMPARE (v43) ===== */
.mast-nav .nav-cta{background:var(--accent);color:#04121a;font-weight:700;border-color:var(--accent)}
.mast-nav .nav-cta:hover{background:color-mix(in srgb,var(--accent) 85%,#fff);color:#04121a}
/* 製品ページ 問い合わせボックス */
.contact-box{margin-top:22px;padding:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel-2));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--radius)}
.contact-box h3{font-size:16px;margin:0 0 6px;color:var(--ink)}
.contact-box p{font-size:13.5px;color:var(--ink-dim);margin:0 0 14px;line-height:1.7}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.contact-actions .btn{min-height:40px}
/* 比較バー */
.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--panel);border-top:1px solid var(--accent);box-shadow:0 -6px 24px rgba(0,0,0,.4);transform:translateY(110%);transition:transform .25s ease;padding:12px 20px}
.cmp-bar.on{transform:translateY(0)}
.cmp-inner{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cmp-label{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.08em}
.cmp-items{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0}
.cmp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line-bright);border-radius:6px;padding:5px 8px;font-family:var(--mono);font-size:11.5px;color:var(--ink-dim)}
.cmp-chip button{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;min-height:auto}
.cmp-chip button:hover{color:#ff6b6b}
.cmp-actions{display:flex;gap:8px}
/* カードの比較チェック */
.cmp-add{position:absolute;top:8px;left:8px;z-index:3;width:30px;height:30px;border-radius:6px;border:1px solid var(--line-bright);background:rgba(13,17,23,.82);color:var(--ink-faint);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0;min-height:auto}
.cmp-add:hover{border-color:var(--accent);color:var(--accent)}
.cmp-add.on{background:var(--accent);color:#04121a;border-color:var(--accent);font-weight:700}
/* 比較モーダル */
.cmp-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.cmp-modal.on{display:flex}
.cmp-sheet{background:var(--panel);border:1px solid var(--line-bright);border-radius:12px;max-width:1200px;width:100%;max-height:88vh;overflow:auto;padding:24px}
.cmp-sheet h2{margin:0 0 16px;font-size:20px;display:flex;align-items:center;justify-content:space-between}
.cmp-close{background:none;border:1px solid var(--line);color:var(--ink-dim);border-radius:8px;width:36px;height:36px;cursor:pointer;font-size:18px}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp-table th,.cmp-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp-table thead th{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.06em;position:sticky;top:0;background:var(--panel);z-index:1}
.cmp-table tbody th{font-family:var(--mono);font-size:12px;color:var(--ink-faint);white-space:nowrap;width:130px;font-weight:400}
.cmp-table td{color:var(--ink)}
.cmp-table .diff{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cmp-img{width:100%;max-width:150px;aspect-ratio:4/3;object-fit:contain;background:#f8f9fa;border-radius:6px;display:block}
@media(max-width:640px){
  .cmp-bar{padding:10px 12px}
  .cmp-sheet{padding:16px}
  .cmp-table{font-size:12px}
  .cmp-table th,.cmp-table td{padding:7px 8px}
}


/* 比較モーダル: ヘッダーより確実に上へ（クリック阻害を防ぐ） */
.cmp-modal{z-index:9998}
.lb{z-index:9999}
body.modal-open .masthead{pointer-events:auto}
body.modal-open{overflow:hidden}


/* タップ領域拡大 (WCAG 2.5.5) — 見た目を保ちつつ判定領域を44pxに */
.cmp-add{position:relative}
.cmp-add::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.hero-dot{position:relative}
.hero-dot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}


/* フッター強化 */






/* ===== unified site footer (v144) ===== */
.pf{border-top:1px solid var(--line);margin-top:8px;padding:26px 0 30px}
.pf .pf-nav{display:flex;gap:22px;flex-wrap:wrap;row-gap:9px;margin-bottom:14px}
.pf .pf-nav a{color:var(--ink-dim);text-decoration:none;font-size:14px;line-height:1.6;transition:.15s}
.pf .pf-nav a:hover{color:var(--accent)}
.pf .pf-biz{padding-top:13px;border-top:1px solid var(--line)}
.pf .pf-biz a{color:var(--ink-faint);font-size:13.5px}
.pf .pf-copy{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-faint);line-height:1.7}
@media(max-width:640px){.pf .pf-nav{gap:16px}.pf .pf-nav a{font-size:13.5px}}

/* --- touch target sizing (v147) --- */
@media(hover:none) and (pointer:coarse){
  .chip-btn{min-height:40px;padding-top:9px;padding-bottom:9px}
  .cmp-add{width:38px;height:38px}
  .card-detail{min-height:38px;padding:9px 14px}
  .mast-nav a{min-height:40px;padding:8px 10px}
  .pf .pf-nav a{min-height:40px;display:inline-flex;align-items:center}
}

/* --- タップ領域の確保 (v170) --- */
@media(max-width:760px){
  .btn{min-height:44px;padding-top:10px;padding-bottom:10px}
  .cmp-add{width:38px;height:38px;top:6px;left:6px;font-size:18px}
  .mast-nav a{padding-top:10px;padding-bottom:10px}
  .radios label{min-height:44px;display:flex;align-items:center}
  .consent label{padding:4px 0}
}
@media(hover:none){
  .chip-btn,.tile,.solcard,.ucard{min-height:44px}
}

/* --- スクリーンリーダー専用テキスト (v181) --- */
.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}