:root{
  --navy:#343a40;--navy-d:#23272b;--navy-l:#495057;--navy-p:#f8f9fa;
  --w:#fff;--g1:#f8f9fa;--g2:#e9ecef;--g3:#dee2e6;--g5:#adb5bd;
  --tx:#212529;--txl:#6c757d;
  --on:#1a7a3c;--on-b:#e8f5ee;
  --di:#c0392b;--di-b:#fdf0ee;
  --so:#1565c0;--so-b:#e8f0fb;
  --r:6px;--rl:10px;
  --sh:0 1px 4px rgba(0,0,0,.08);
  --sh2:0 3px 12px rgba(0,0,0,.12);
  --tr:.15s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-family:sans-serif}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";color:var(--tx);background:var(--g1);font-size:14px;line-height:1.6}

/* HEADER (旧カスタムヘッダー — Bootstrap ヘッダーを使用のため非表示) */
.hdr{display:none!important}

/* WRAP */
.wrap{max-width:1200px;margin:0 auto;padding:16px 16px 60px}

/* ページタイトル説明文（タイトル本体はBootstrap .h2/.h6 を使用） */
.pg-ttl-desc{font-size:12px;color:var(--txl);line-height:1.7;margin-top:8px;margin-bottom:0}

/* チャート一覧表ボタン */
.pdf-ref-btn{display:inline-block;padding:6px 14px;border:1px solid var(--navy);border-radius:var(--r);font-size:12px;font-weight:600;color:var(--navy);background:var(--w);text-decoration:none;transition:all var(--tr);white-space:nowrap}
.pdf-ref-btn:hover{background:var(--navy);color:#fff;text-decoration:none}

/* STEPS 縦積み */
.steps-row{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.sc{background:var(--w);border-radius:var(--rl);box-shadow:var(--sh);border:1px solid var(--g3);overflow:hidden}
.sc.active{border-color:var(--navy-l);box-shadow:var(--sh2)}
.sc-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--g1);border-bottom:1px solid var(--g3)}
.sc-num{width:20px;height:20px;background:#17a2b8;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.sc-num.done{background:var(--on)}
.sc-ttl{font-size:12px;font-weight:700;color:var(--navy);flex:1}
.sc-sel{font-size:10px;color:var(--txl);background:var(--navy-p);padding:1px 7px;border-radius:20px;border:1px solid var(--g3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.sc-bd{padding:10px 12px}

/* フィルター */
.fil-row{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.fil-lbl{font-size:10px;color:var(--txl);white-space:nowrap}
.scb-wrap{display:flex;gap:4px;flex-wrap:wrap}
.scb{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;border:1px solid var(--g3);background:var(--w);cursor:pointer;font-size:10px;font-weight:500;transition:all var(--tr);user-select:none}
.scb input{display:none}
.scb.s-on{color:var(--on);border-color:var(--on)}.scb.s-on.ck{background:var(--on-b)}
.scb.s-di{color:var(--di);border-color:var(--di)}.scb.s-di.ck{background:var(--di-b)}
.scb.s-so{color:var(--so);border-color:var(--so)}.scb.s-so.ck{background:var(--so-b)}

/* ブランド */
.brand-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px}
.brand-btn{padding:8px 4px;border:1.5px solid var(--g3);border-radius:var(--r);background:var(--w);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:11px;font-weight:500;cursor:pointer;text-align:center;transition:all var(--tr);line-height:1.3}
.brand-btn:hover{border-color:var(--navy-l);background:var(--navy-p)}
.brand-btn.sel{border-color:var(--navy);background:var(--navy);color:#fff}
.brand-btn:disabled{opacity:.4;cursor:not-allowed}
.brand-cnt{display:block;font-size:9px;opacity:.6;margin-top:1px}

/* カメラ */
.cam-note{font-size:10px;color:var(--txl);margin-bottom:7px;line-height:1.5}
.cam-note strong{color:var(--navy)}
.cam-list{display:flex;flex-direction:column;gap:3px}
.cam-btn{padding:6px 10px;border:1px solid var(--g3);border-radius:var(--r);background:var(--w);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;transition:all var(--tr);width:100%;text-align:left}
.cam-btn:hover{border-color:var(--navy-l);background:var(--navy-p)}
.cam-btn.sel{border-color:var(--navy);background:var(--navy);color:#fff}
.cam-name{font-size:11px;font-weight:500;flex:1}
.hbdg{font-size:9px;padding:1px 5px;border-radius:8px;font-weight:500;white-space:nowrap;flex-shrink:0}
.cam-btn:not(.sel) .hb-販売中{background:var(--on-b);color:var(--on)}
.cam-btn:not(.sel) .hb-生産終了{background:var(--di-b);color:var(--di)}
.cam-btn:not(.sel) .hb-近日発売{background:var(--so-b);color:var(--so)}
.cam-btn.sel .hbdg{background:rgba(255,255,255,.2);color:#fff}

/* レンズ */
.ltabs{display:flex;gap:2px;border-bottom:2px solid var(--g3);margin-bottom:8px}
.ltab{padding:5px 10px;border:none;background:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:11px;font-weight:500;color:var(--txl);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--tr)}
.ltab:hover{color:var(--navy)}
.ltab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:700}
.lcnt{font-size:9px;background:var(--g2);padding:1px 4px;border-radius:6px;margin-left:2px}
.lens-wrap{position:relative}
.lens-sel{width:100%;padding:8px 28px 8px 10px;border:1px solid var(--g3);border-radius:var(--r);background:var(--w);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:12px;appearance:none;cursor:pointer;transition:border-color var(--tr)}
.lens-sel:focus{outline:none;border-color:var(--navy)}
.lens-sel:disabled{background:var(--g2);color:var(--g5);cursor:not-allowed}
.lens-ico{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--g5);pointer-events:none;font-size:11px}
.srch-btn{width:100%;padding:10px;background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:all var(--tr);display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px}
.srch-btn:hover{background:var(--navy-l);transform:translateY(-1px);box-shadow:var(--sh2)}
.srch-btn:disabled{background:var(--g5);cursor:not-allowed;transform:none;box-shadow:none}

/* 結果 */
.res-hd{margin-bottom:10px}
.res-ttl{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--navy);letter-spacing:1px}
.res-sub{font-size:11px;color:var(--txl);margin-top:2px}

/* 結果カード */
.rcard{background:var(--w);border-radius:var(--rl);border:1px solid var(--g3);box-shadow:var(--sh);margin-bottom:14px;overflow:hidden}
.rcard-discon{border-color:#e0c0bc;opacity:.92}
.discon-banner{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--di-b);border-bottom:1px solid #e8c8c4;font-size:11px;color:var(--di);font-weight:600}
.discon-banner i{font-size:12px}
.discon-banner-sub{font-size:10px;color:#a05050;font-weight:400;margin-left:4px}

/* パターンタブ */
.ptabs{display:flex;gap:3px;padding:8px 14px 0;background:var(--g1);border-bottom:1px solid var(--g3);overflow-x:auto;scrollbar-width:thin;flex-wrap:nowrap}
.ptab{padding:5px 12px;border:1px solid var(--g3);border-bottom:none;border-radius:6px 6px 0 0;background:var(--g2);color:var(--txl);font-size:11px;font-weight:500;cursor:pointer;transition:all var(--tr);white-space:nowrap;flex-shrink:0}
.ptab:hover{background:var(--navy-p);color:var(--navy)}
.ptab.active{background:var(--w);color:var(--navy);font-weight:700;border-color:var(--navy-l)}
.ptab-desc-block{display:none;border-bottom:1px solid var(--g3)}
.ptab-desc-block.active{display:block}
.ptab-desc{font-size:10px;color:var(--txl);padding:4px 14px 6px;background:var(--navy-p);border-bottom:1px solid var(--g3);line-height:1.5}
.ptab-desc i{color:var(--navy-l);margin-right:3px}

/* 2カラム：左=製品リスト、右=写真エリア（opt-bodyと同じ比率） */
.pcont{display:none}


/* 左：製品リスト */
.plist{border-right:1px solid var(--g3)}
.plist-ttl{font-size:11px;font-weight:700;color:var(--txl);padding:8px 12px 6px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--g2);background:var(--g1)}
.plist-ttl i{color:var(--navy-l)}
.plist-ttl-sub{font-size:9.5px;font-weight:400;color:var(--txl);opacity:.7;margin-left:4px;letter-spacing:.01em}

/* ══ 製品テーブル ══ */
/* ON状態: 明るい背景、トグルが濃紺 */
/* OFF状態: ハッチング + 薄く */
.ptbl{width:100%;border-collapse:collapse}
.ptbl tr.pr{transition:background var(--tr)}
.ptbl tr.pr.is-on td{background:#fff}
.ptbl tr.pr.is-on:hover td{background:rgba(52,58,64,.05)}
.ptbl tr.pr.is-off td:not(.td-stat){
  background:repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(0,0,0,.025) 5px,rgba(0,0,0,.025) 10px);
  opacity:.38;
}
.ptbl tr.pr.is-off .td-stat{opacity:1!important;background:transparent!important}
.ptbl td{padding:6px 8px;border-bottom:1px solid var(--g2);vertical-align:middle}
.ptbl tr.pr:last-child td{border-bottom:none}

/* ラジオ丸チェック */
.tog-wrap{display:flex;align-items:center;justify-content:center;width:32px}
.tog{position:relative;width:22px;height:22px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{position:absolute;inset:0;border-radius:50%;background:var(--w);border:2px solid var(--g3);transition:all var(--tr)}
.tog-thumb{position:absolute;width:10px;height:10px;border-radius:50%;background:transparent;transition:all var(--tr);left:50%;top:50%;transform:translate(-50%,-50%)}
/* ONの時 */
.tog input:checked ~ .tog-track{border-color:var(--navy);background:var(--w)}
.tog input:checked ~ .tog-thumb{background:var(--navy)}
/* 無効 */
.tog input:disabled ~ .tog-track{opacity:.5}
.tog input:disabled ~ .tog-thumb{opacity:.5}

/* 行 列: ジャンル | 品番 | 製品名 | タグ | 金額 | ステータス+トグル */
.td-genre{width:56px;padding:6px 4px 6px 8px}
.td-pnum{display:none}
.td-prod{padding:6px 6px}
.td-tags{padding:6px 4px}
.td-price{width:80px;text-align:right;white-space:nowrap;padding:6px 8px;vertical-align:middle}
.td-stat{width:68px;padding:6px 6px;text-align:center}
.stat-tog-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
/* 行トグル（td-stat内）*/
.row-tog{position:relative;width:28px;height:16px;cursor:pointer;display:inline-flex;align-items:center}
.row-tog input{opacity:0;width:0;height:0;position:absolute}
.row-tog .rt-track{position:absolute;inset:0;border-radius:999px;background:var(--g3);transition:all var(--tr)}
.row-tog .rt-thumb{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;top:3px;left:3px;transition:all var(--tr);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.row-tog input:checked ~ .rt-track{background:var(--navy)}
.row-tog input:checked ~ .rt-thumb{left:15px}

/* 種別ピル */
.pill{display:inline-block;font-size:10px;padding:1px 7px;border-radius:10px;font-weight:600;white-space:nowrap}
.p-h{background:#e8f0f8;color:var(--navy)}
.p-g{background:#e8f5ee;color:var(--on)}
.p-r{background:#fdf8e8;color:#b8860b}
.p-p{background:#f0e8f8;color:#6b21a8}
.p-cl{background:#e8f8f8;color:#0e7490}
.p-c{background:#f0f8f8;color:#0e7490}
.p-o{background:#f5f5f5;color:#555}
.p-str{background:#fff0e8;color:#c04010}
.p-lit{background:#e8f8ff;color:#0072aa}
.p-fib{background:#f0ffe8;color:#2a7a10}
.note-chip.corr-lens{color:#0e7490;background:#e8f8f8;border-color:rgba(14,116,144,.25)}

/* 製品情報 */
.pr-num{font-size:10px;color:var(--txl);font-family:monospace;line-height:1.2}
.pr-name{font-size:12px;font-weight:500;color:var(--navy);cursor:pointer;transition:color var(--tr)}
.pr-name:hover{text-decoration:underline;color:var(--navy-l)}
.pr-name.no-link{cursor:default}
.pr-name.no-link:hover{text-decoration:none;color:var(--navy)}
.pr-note{font-size:10px;color:var(--txl);margin-top:1px}

/* タグ */
.univ-bdg{display:inline-flex;align-items:center;gap:2px;font-size:9px;color:#7a4000;background:#fff3e0;padding:1px 6px;border-radius:10px;border:1px solid rgba(200,120,0,.25);font-weight:600;cursor:pointer;white-space:nowrap}
.note-chip{display:inline-flex;align-items:center;gap:2px;font-size:9px;color:#555;background:#f0f0f0;padding:1px 6px;border-radius:10px;border:1px solid #ddd;font-weight:500;white-space:nowrap;cursor:default}
.note-chip.warn,.note-chip-warn{color:#7a4000;background:#fff3e0;border-color:rgba(200,120,0,.25)}
.note-chip-tech{color:#0b5cab;background:#e8f0fb;border-color:rgba(21,101,192,.2)}
.note-chip-good{color:#1a7a3c;background:#e8f5ee;border-color:rgba(26,122,60,.2)}
.note-chip-soft{color:#7a4000;background:#fff3e0;border-color:rgba(200,120,0,.25)}
.tag-no-pop{cursor:default!important;pointer-events:none}
.compat-ico{display:inline-flex;align-items:center;gap:2px;font-size:9px;color:#b8860b;background:#fdf8e8;padding:1px 5px;border-radius:6px;cursor:pointer;border:1px solid rgba(184,134,11,.2)}
.leak-bdg{display:inline-flex;align-items:center;gap:2px;font-size:9px;color:var(--on);background:var(--on-b);padding:1px 6px;border-radius:10px;border:1px solid rgba(26,122,60,.2);font-weight:600;white-space:nowrap}

/* 価格 */
.prc{font-size:13px;font-weight:700;color:var(--tx)}
.prc-s{font-size:10px;color:var(--txl)}

/* ステータス */
.sbdg{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;white-space:nowrap}
.sb-販売中{background:var(--on-b);color:var(--on)}
.sb-生産終了{background:var(--di-b);color:var(--di)}
.sb-受注生産{background:#fdf8e8;color:#b8860b}
.sb-近日発売{background:var(--so-b);color:var(--so)}

/* ユニバーサルバナー（ハウジング行の直下） */
.u-ban{display:flex;align-items:center;gap:7px;padding:6px 10px;background:#fffbec;border-top:1px solid #f0e0a0;cursor:pointer;border-bottom:1px solid var(--g2)}
.u-ico{color:#e8a020;font-size:12px}
.u-txt{font-size:11px;color:#7a5c00;font-weight:500;flex:1}
.u-arr{color:var(--txl);font-size:10px;transition:transform var(--tr)}
.u-ban.open .u-arr{transform:rotate(180deg)}
.u-det{display:none;padding:6px 10px 8px;background:#fffbec;border-bottom:1px solid var(--g2);font-size:11px;color:var(--txl);line-height:1.8}
.u-det.open{display:block}

/* 基本合計 */
.base-total{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-top:2px solid var(--g2);background:var(--g1)}
.bt-lbl{font-size:11px;font-weight:700;color:var(--tx)}
.bt-items{font-size:10px;color:var(--txl)}
.bt-amt{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--navy)}
.bt-tax{display:none}

/* 右：写真エリア（opt-rightと同じ構成） */
.pslide{padding:12px;background:var(--g1);display:flex;flex-direction:column;gap:10px;position:relative}
.slide-main{flex:1;background:var(--g2);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;padding:16px;text-align:center;color:var(--g5)}
.slide-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--g5);width:100%;min-height:200px}
.slide-ph i{font-size:48px;opacity:.2;margin-bottom:8px}
.slide-ph .sph-name{font-size:11px;text-align:center;max-width:80%;line-height:1.4}
/* サムネイル行 */
.slide-thumbs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.slide-thumb{width:40px;height:40px;border-radius:6px;background:#fff;border:2px solid var(--g3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--g5);font-size:14px;cursor:pointer;transition:all var(--tr);position:relative;overflow:hidden;padding:2px}
.slide-thumb:hover{border-color:var(--navy-l);transform:scale(1.05)}
.slide-thumb.active{border-color:var(--navy);box-shadow:0 0 0 2px rgba(52,58,64,.15)}
.slide-thumb img{width:100%;height:100%;object-fit:contain}
.slide-thumb .th-lbl{font-size:8px;color:var(--txl);text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36px;margin-top:2px}
/* カラーセレクター */
.c-sel{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap}
.csw{width:18px;height:18px;border-radius:50%;border:2px solid var(--g3);cursor:pointer;transition:all var(--tr);position:relative}
.csw:hover{transform:scale(1.15)}
.csw.active{border-color:var(--navy);box-shadow:0 0 0 2px rgba(0,51,102,.3)}
.csw[data-c="ブラック"]{background:#1a1a1a}
.csw[data-c="シルバー"]{background:#c0c0c0}
.csw[data-c="ホワイト"]{background:#f0f0f0;border-color:var(--g3)}
.csw[data-c="ブルー"]{background:#1a5599}

/* ── オプション光源セット ── */
.opt-block{border-top:2px solid var(--g2);display:none}
.opt-toggle{width:100%;padding:11px 14px;background:var(--w);border:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:13px;font-weight:700;color:var(--navy);text-align:left;transition:background var(--tr)}
.opt-toggle:hover{background:var(--g1)}
.opt-ico{font-size:15px}
.opt-arr{margin-left:auto;color:var(--txl);font-size:11px;transition:transform var(--tr)}
.opt-toggle.open .opt-arr{transform:rotate(180deg)}
.opt-body{display:none;border-top:1px solid var(--g2)}
.opt-body.open{display:flex;flex-direction:column}

/* 上部：光源タイプ・機種・灯数（横並び全幅） */
.opt-top-selectors{display:flex;gap:0;border-bottom:1px solid var(--g2);background:var(--g1)}
.opt-top-sel-item{padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.opt-top-model{flex:1;border-left:1px solid var(--g3);border-right:1px solid var(--g3)}
.opt-top-qty{min-width:120px}

/* 下部：左=情報、右=画像（2カラム） */
.opt-lower{display:grid;grid-template-columns:1fr 1fr}
.opt-info-pane{border-right:1px solid var(--g3);display:flex;flex-direction:column}
.opt-info-pane .plist-ttl{font-size:11px;font-weight:700;color:var(--txl);padding:8px 12px 6px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--g2);background:var(--g1)}
.opt-info-pane .plist-ttl i{color:var(--navy-l)}
.opt-photo-pane{display:flex;flex-direction:column;position:relative;min-height:200px;background:var(--g1)}

/* 旧opt-left は使わない（互換性のため残す） */
.opt-left{padding:14px;border-right:1px solid var(--g3)}
/* 光源タイプ選択 */
.opt-type-row{display:flex;gap:8px;margin-bottom:14px}
.opt-type-btn{flex:1;padding:10px;border:2px solid var(--g3);border-radius:var(--r);background:var(--w);cursor:pointer;text-align:center;transition:all var(--tr);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:12px;font-weight:500;color:var(--txl)}
.opt-type-btn:hover{border-color:var(--navy-l);color:var(--navy)}
.opt-type-btn.active{border-color:var(--navy);background:var(--navy);color:#fff}
.opt-type-btn i{display:inline;font-size:13px;margin-right:4px;margin-bottom:0}
/* 上部セレクター内では横並びのシンプル表示 */
.opt-top-selectors .opt-type-btn i{display:inline;font-size:13px;margin-right:5px;margin-bottom:0}
.opt-top-selectors .opt-type-btn{padding:7px 12px;font-size:11px}
/* 機種選択 */
.opt-sel-lbl{font-size:11px;font-weight:600;color:var(--txl);margin-bottom:5px}
.opt-model-wrap{position:relative;margin-bottom:12px}
.opt-model-sel{width:100%;padding:8px 28px 8px 10px;border:1px solid var(--g3);border-radius:var(--r);background:var(--w);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:12px;appearance:none;cursor:pointer}
.opt-model-sel:focus{outline:none;border-color:var(--navy)}
.opt-model-ico{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--g5);pointer-events:none;font-size:11px}
/* 数量 */
.opt-qty-row{display:flex;gap:8px;margin-bottom:12px}
.opt-qty-btn{flex:1;padding:8px;border:2px solid var(--g3);border-radius:var(--r);background:var(--w);cursor:pointer;text-align:center;transition:all var(--tr);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:13px;font-weight:700;color:var(--txl)}
.opt-qty-btn:hover{border-color:var(--navy-l);color:var(--navy)}
.opt-qty-btn.active{border-color:var(--navy);background:var(--navy);color:#fff}
/* 上部セレクター内の灯数ボタン */
.opt-top-selectors .opt-qty-btn{padding:7px 14px;font-size:12px}
/* プロセット */
.pro-set-row{margin-bottom:12px;display:none}
.pro-set-row.show{display:block}
.pro-set-cb{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--g1);border-radius:var(--r);border:1px solid var(--g3);cursor:pointer;font-size:12px;font-weight:500;transition:all var(--tr)}
.pro-set-cb:hover{border-color:var(--navy-l);background:var(--navy-p)}
.pro-set-cb.active{border-color:var(--navy);background:var(--navy-p)}
.pro-set-cb i{color:#e8a020}

/* 生成された機材リスト */
.opt-result{background:var(--g1);border-radius:var(--r);border:1px solid var(--g3);overflow:hidden}
.opt-result-ttl{font-size:11px;font-weight:600;color:var(--txl);padding:7px 10px;background:var(--g2);border-bottom:1px solid var(--g3)}
/* opt-ptbl: 5列3行グリッドレイアウト（光ファイバーケーブル幅基準）
   col1 = 「光ファイバーケーブル」pill幅 = 116px固定
   col2 = 製品番号固定幅 = 72px
   col3 = 1fr（残り幅）
   col4 = 88px（金額）
   col5 = 62px（ステータス+トグル）
   行1: [ジャンル固定] [製品番号] [　　　　] [　　] [ステータス]
   行2: [← 製品名（col1〜col3）→　　　　　] [金額] [トグル    ]
   行3: [← 選択ボタン 横一列 →                                 ]
*/
.opt-ptbl{width:100%;border-collapse:separate;border-spacing:0}
.opt-ptbl tr.opr{
  display:grid;
  grid-template-columns:140px 80px minmax(0,1fr) 88px 62px;
  grid-template-rows:auto auto auto;
  border-bottom:1px solid var(--g2);
  width:100%;
}
.opt-ptbl tr.opr:last-child td{border-bottom:none}
.opt-ptbl tr.opr td{border-bottom:none;padding:0;display:block;min-width:0;overflow:hidden}
.opt-ptbl tr.opr.is-on td{background:rgba(0,51,102,.02)}
.opt-ptbl tr.opr.is-off .td-genre,.opt-ptbl tr.opr.is-off .td-stat{opacity:1!important;background:transparent!important}
.opt-ptbl tr.opr.is-off td:not(.td-genre):not(.td-stat){
  background:repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(0,0,0,.025) 5px,rgba(0,0,0,.025) 10px);
  opacity:.38;
}
/* col1 row1: ジャンル */
.opt-ptbl tr.opr .td-genre{grid-column:1;grid-row:1;padding:8px 4px 4px 6px;display:flex;align-items:center;justify-content:flex-start;overflow:visible}
.opt-ptbl tr.opr .td-genre .pill{white-space:nowrap;font-size:10px;flex-shrink:0;padding:1px 5px}
/* col2 row1: 製品番号 */
.opt-ptbl tr.opr .td-pnum{grid-column:2;grid-row:1;display:block;padding:9px 4px 4px 4px;font-size:11px;color:var(--txl);font-family:monospace;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* col5 row1-2: ステータス+トグル */
.opt-ptbl tr.opr .td-stat{grid-column:5;grid-row:1/3;padding:6px 8px 6px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
/* col1-3 row2: 製品名 */
.opt-ptbl tr.opr .td-prod{grid-column:1/4;grid-row:2;padding:2px 6px 8px 10px;min-width:0;display:flex;align-items:center}
/* col4 row2: 金額 */
.opt-ptbl tr.opr .td-price{grid-column:4;grid-row:2;padding:2px 6px 8px 0;display:flex;align-items:center;justify-content:flex-end;white-space:nowrap}
/* col1-5 row3: 選択ボタン横一列 */
.opt-ptbl tr.opr .td-tags{grid-column:1/6;grid-row:3;padding:0 8px 8px 10px;display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;align-items:center;overflow:hidden}
.opt-ptbl tr.opr .td-tags:empty{display:none;padding:0}
.opt-ctrl{display:flex;flex-direction:row;flex-wrap:nowrap;gap:3px;overflow:hidden}

/* コンバーター選択（ラジオ風） */
.conv-sel{display:flex;gap:5px;flex-wrap:wrap}
.conv-btn{padding:4px 10px;border:1px solid var(--g3);border-radius:20px;background:var(--w);cursor:pointer;font-size:11px;font-weight:500;color:var(--txl);transition:all var(--tr)}
.conv-btn:hover{border-color:#0e7490;color:#0e7490}
.conv-btn.active{border-color:#0e7490;background:#0e7490;color:#fff}

/* 右：写真エリア（新スライドショー構造） */
.opt-slide-container{padding:12px;background:var(--g1);display:flex;flex-direction:column;gap:10px;width:100%;align-items:center;flex:1}
.opt-slide-main{flex:1;background:var(--g2);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;padding:16px;position:relative}
.opt-slide-ph{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--g5);text-align:center;min-height:200px}
.opt-slide-ph img{max-width:100%;max-height:160px;object-fit:contain;border-radius:var(--r)}
.opt-slide-ph i{font-size:48px;opacity:.2;margin-bottom:8px}
.opt-slide-name{font-size:11px;text-align:center;max-width:80%;line-height:1.4}
.opt-slide-arrow{position:absolute;top:50%;transform:translateY(-50%);background:var(--w);border:1px solid var(--g3);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--tr);z-index:10}
.opt-slide-arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.opt-slide-arrow:disabled{opacity:.4;cursor:not-allowed}
.opt-slide-prev{left:8px}
.opt-slide-next{right:8px}
.opt-slide-thumbs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px;min-height:200px;align-items:center}
.opt-thumb{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;background:var(--g1);border-radius:var(--r);border:1px solid var(--g3);cursor:pointer;transition:all var(--tr);min-width:80px;min-height:80px;margin:2px}
.opt-thumb:hover{background:var(--g2);border-color:var(--navy-l)}
.opt-thumb i{font-size:24px;color:var(--g5);margin-bottom:4px}
.opt-thumb .c-sel-small{margin-top:4px;display:flex;gap:2px}
.csw-small{padding:2px 6px;font-size:10px;background:var(--g2);border-radius:3px;cursor:pointer;transition:all var(--tr)}
.csw-small:hover{background:var(--g3)}
.csw-small.active{background:var(--navy);color:#fff}
.opt-slide-thumb{width:40px;height:40px;border-radius:6px;background:var(--g2);border:2px solid var(--g3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--g5);font-size:12px;cursor:pointer;transition:all var(--tr);position:relative;overflow:hidden;padding:2px}
.opt-slide-thumb:hover{border-color:var(--navy-l);transform:scale(1.05)}
.opt-slide-thumb.active{border-color:var(--navy);box-shadow:0 0 0 2px rgba(52,58,64,.15)}
.opt-slide-thumb img{width:100%;height:24px;object-fit:contain}
.opt-slide-thumb.has-image{padding:0;justify-content:flex-start}
.opt-slide-thumb.has-image img{width:100%;height:24px;object-fit:contain;display:block}
.opt-slide-thumb .th-lbl{font-size:8px;color:var(--txl);text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36px;margin-top:2px}
.opt-setup-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;padding:16px;text-align:center;color:var(--g5);position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}
.opt-setup-ph i{font-size:48px;opacity:.2;margin-bottom:8px}
.opt-setup-ph p{font-size:11px}
.opt-setup-ph i{font-size:48px;opacity:.2;margin-bottom:8px}
.opt-setup-ph p{font-size:11px}


/* オプション小計 */
.opt-sub-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--g2);border-top:1px solid var(--g3)}
.opt-sub-lbl{font-size:11px;color:var(--txl)}
.opt-sub-amt{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--navy)}

/* グランド合計 */
.grand-bar{background:var(--navy-d);color:#fff;padding:12px 16px;display:none;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.gt-lbl{font-size:11px;color:rgba(255,255,255,.55)}
.gt-items{font-size:10px;color:rgba(255,255,255,.4);margin-top:1px}
.gt-amt{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;letter-spacing:1px}
.gt-tax{font-size:10px;color:rgba(255,255,255,.4)}

/* ポップアップ */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,51,.5);z-index:200;align-items:center;justify-content:center;padding:16px}
.ov.open{display:flex}
.pop-box{background:var(--w);border-radius:var(--rl);max-width:440px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.2);overflow:hidden;max-height:90vh;display:flex;flex-direction:column}
.pop-hd{background:var(--navy);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.pop-title{font-size:13px;font-weight:700}
.pop-close{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:17px;padding:0;transition:color var(--tr)}
.pop-close:hover{color:#fff}
.pop-body{padding:16px;overflow-y:auto}
.pop-img{display:flex;justify-content:center;align-items:center;margin-bottom:12px;background:var(--g1);border-radius:var(--r);padding:14px}
.pop-ph{font-size:48px;color:var(--g3)}
.pop-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--g2);font-size:12px}
.pop-row:last-of-type{border-bottom:none}
.pop-row .lbl{color:var(--txl)}
.pop-row .val{font-weight:500}
.pop-link{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:10px;background:var(--navy);color:#fff;border-radius:var(--r);text-decoration:none;font-size:13px;font-weight:700;transition:background var(--tr)}
.pop-link:hover{background:var(--navy-l)}
/* 互換性（双方向） */
.compat-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--g2);font-size:12px;flex-wrap:wrap}
.compat-item:last-child{border-bottom:none}
.c-arr{color:var(--on);font-size:13px;flex-shrink:0}
.compat-sub{font-size:10px;color:var(--txl);width:100%;padding-left:4px;margin-top:2px}

/* RESPONSIVE */
@media(max-width:960px){
  .steps-row{flex-direction:column}
  #s1{grid-column:auto}
  /* pcont・opt-lower 同じ比率 */
  
  .opt-lower{grid-template-columns:1fr 1fr}
  /* 右エリアは左に境界線 */
  .pslide,.opt-photo-pane{border-left:1px solid var(--g3)}
}
@media(max-width:680px){
  .steps-row{flex-direction:column}
  #s1{grid-column:auto}
  .hdr-r{display:none}
  /* スマホ：上部セレクターを縦積み */
  .opt-top-selectors{flex-direction:column}
  .opt-top-model,.opt-top-qty{border-left:none;border-right:none;border-top:1px solid var(--g3)}
  /* スマホ：下部も縦積み */
  .opt-lower{grid-template-columns:1fr;display:flex;flex-direction:column}
  .opt-info-pane{order:1;border-right:none;border-bottom:1px solid var(--g3)}
  .opt-photo-pane{order:2;border-left:none;border-top:1px solid var(--g3)}
  /* スマホ：検索情報→検索画像 の縦積み */
  
  .plist{order:1;border-right:none;border-bottom:1px solid var(--g3)}
  .pslide{order:2;border-top:1px solid var(--g3)}
}
@media(max-width:480px){
  .wrap{padding:10px 10px 48px}
  .rcard,.plist,
  /* opt-ptbl スマホ対応 */
  .opt-ptbl tr.opr{
    grid-template-columns:80px 60px minmax(0,1fr) 72px 52px;
  }
  .lens-wrap{max-width:100%;min-width:0}
  .lens-sel{min-width:0;width:100%;box-sizing:border-box}
  .ltabs{flex-wrap:wrap;gap:6px}
  .ltab{flex:1 1 auto;min-width:0}
  .ptbl tr.pr:not(.meta-row){
    grid-template-columns:80px 60px minmax(0,1fr) 72px 52px;
  }
}

/* ===== OVERRIDES ===== */
.res-sub strong{color:var(--navy)}
.pr-name{font-weight:600}
.pr-note{margin-top:2px;line-height:1.45}
.prc.ask{font-size:11px;font-weight:700;color:#8c5a00}
.prc-s2{display:none}
/* opt-inlineセパレーター */
.opt-inline-sep td{background:var(--g2);font-size:10px;font-weight:700;color:var(--navy-l);padding:3px 12px;border-top:2px solid var(--g3)}

/* 構成メモ（set.notes）表示 */
.set-notes-disp{display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding:5px 12px 8px;font-size:10px;color:var(--txl);line-height:1.6}
.set-notes-disp i{color:var(--navy-l);margin-right:5px;flex-shrink:0}
.notes-sep{color:var(--g5);font-size:11px;font-weight:700;margin:0 1px}



.u-det ul{padding-left:18px;margin:4px 0 0}
.u-det li{margin:2px 0}
.conv-sel,.size-sel{display:flex;flex-wrap:wrap;gap:5px}
.conv-btn,.size-btn{border:1px solid var(--g3);background:#fff;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:600;cursor:pointer;transition:all var(--tr)}
.conv-btn.active,.size-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.opt-row-note{font-size:10px;color:var(--txl);margin-top:3px;line-height:1.45}
.opt-sel-lbl{margin-bottom:6px}
.opt-qty-row{margin-bottom:14px}
.opt-result{margin-top:8px}

/* スライドショー */
.slide-main{width:100%;height:300px;background:var(--g1);border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:10px;border:1px solid var(--g3);overflow:hidden}
.slide-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px}
.slide-ph img{max-width:100%;max-height:100%;object-fit:contain}
.sph-name{font-size:11px;color:var(--txl);margin-top:8px;font-weight:500}
.slide-thumbs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.slide-thumb{padding:6px 8px;border:1px solid var(--g3);border-radius:var(--r);background:var(--w);cursor:pointer;font-size:10px;transition:all var(--tr);display:flex;align-items:center;gap:4px}
.slide-thumb.active{background:var(--navy);border-color:var(--navy);color:#fff}
.slide-thumb i{color:var(--g5)}
.slide-thumb.active i{color:rgba(255,255,255,.7)}
.th-lbl{font-size:10px;font-weight:500}

/* カラーセレクター */
.c-sel{display:flex;gap:4px;margin-bottom:8px}
.csw{width:20px;height:20px;border-radius:50%;border:2px solid var(--g3);cursor:pointer;transition:all var(--tr)}
.csw.active{border-color:var(--navy);border-width:3px}
.csw[title="ブラック"],.csw[data-c="ブラック"]{background:#000}
.csw[title="ホワイト"],.csw[data-c="ホワイト"]{background:#fff;border-color:#ccc}
.csw[title="シルバー"],.csw[data-c="シルバー"]{background:#c0c0c0}
.csw[title="ゴースト"],.csw[data-c="ゴースト"]{background:#e8e8e8}
.csw[title="レッド"],.csw[data-c="レッド"]{background:#dc3545}
@media(max-width:768px){
  .ptbl td{padding:5px 6px}
  .res-sub{line-height:1.5}
  /* 金額・ステータス・トグル列を固定幅で守る */
  .ptbl tr.pr:not(.meta-row){
    grid-template-columns:80px 96px minmax(0,1fr) 88px 62px;
  }
  .opt-ptbl tr.opr{
    grid-template-columns:140px 80px minmax(0,1fr) 88px 62px;
  }
}


/* ===== CUSTOM OVERRIDES 2026-03-24 ===== */

/* ── ptbl: 新5列3行グリッドレイアウト ──

   td順: .td-genre | .td-pnum | .td-prod | .td-price | .td-stat | .td-tags

   行1: [ジャンル固定] [製品番号] [　　　　　　　　  ] [　　　] [ステータス]
   行2: [← 製品名（col1〜col3）→　　　　　　　　　　] [金額  ] [トグル    ]
   行3: [← タグ 横一列 全幅 →                                              ]

   col1 = 「ハウジング」pill幅 = 80px固定
   col2 = 製品番号固定幅 = 72px
   col3 = 1fr（残り幅）
   col4 = 88px（金額）
   col5 = 62px（ステータス+トグル）
*/
.ptbl{width:100%;border-collapse:separate;border-spacing:0}
.ptbl tr.pr:not(.meta-row){
  display:grid;
  grid-template-columns:80px 96px minmax(0,1fr) 88px 62px;
  grid-template-rows:auto auto auto;
  border-bottom:1px solid var(--g2);
  width:100%;
}
.ptbl tr.pr:last-child{border-bottom:none}
.ptbl tr.pr:not(.meta-row) td{border-bottom:none;padding:0;display:block;min-width:0;overflow:hidden}

/* col1 row1: ジャンル pill */
.ptbl tr.pr:not(.meta-row) .td-genre{
  grid-column:1; grid-row:1;
  padding:8px 4px 4px 10px;
  display:flex; align-items:center; justify-content:flex-start;
  overflow:visible;
}
.ptbl tr.pr:not(.meta-row) .td-genre .pill{
  white-space:nowrap; font-size:11px; flex-shrink:0;
}

/* col2 row1: 製品番号 */
.ptbl tr.pr:not(.meta-row) .td-pnum{
  grid-column:2; grid-row:1;
  display:block;
  padding:9px 4px 4px 4px;
  font-size:11px; color:var(--txl); font-family:monospace; line-height:1.3;
  white-space:nowrap; overflow:visible;
}

/* col5 row1-2: ステータス（上）＋トグル（下） */
.ptbl tr.pr:not(.meta-row) .td-stat{
  grid-column:5; grid-row:1/3;
  padding:6px 8px 6px 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-width:62px;
}
.ptbl tr.pr:not(.meta-row) .stat-tog-wrap{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}

/* col1-3 row2: 製品名（ジャンル列〜col3まで全幅） */
.ptbl tr.pr:not(.meta-row) .td-prod{
  grid-column:1/4; grid-row:2;
  padding:2px 6px 8px 10px;
  min-width:0; display:flex; align-items:center;
}

/* col4 row2: 金額 */
.ptbl tr.pr:not(.meta-row) .td-price{
  grid-column:4; grid-row:2;
  padding:2px 6px 8px 0;
  display:flex; align-items:center; justify-content:flex-end; white-space:nowrap;
  min-width:88px;
}

/* col1-5 row3: タグ全幅・横並び・左詰め */
.ptbl tr.pr:not(.meta-row) .td-tags{
  grid-column:1/6; grid-row:3;
  padding:0 8px 8px 10px;
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:4px; align-items:center;
  overflow:hidden;
}
.ptbl tr.pr:not(.meta-row) .td-tags:empty{ display:none; padding:0; }

.pr-name{display:inline;line-height:1.4;word-break:break-word;font-weight:600;font-size:13px}
.prc{font-size:13px;font-weight:700;color:var(--tx)}
.ptbl tr.pr.meta-row td{padding:4px 12px 8px}
.td-price:empty{display:none}
.pr-num-inline{display:none}


:root{--pill-col-main:96px;--pill-col-opt:148px;}
.ptbl tr.pr:not(.meta-row){grid-template-columns:var(--pill-col-main) 96px minmax(0,1fr) 88px 68px!important}
.opt-ptbl tr.opr{grid-template-columns:var(--pill-col-opt) 84px minmax(0,1fr) 88px 68px!important}
.ptbl tr.pr:not(.meta-row) .td-stat,.opt-ptbl tr.opr .td-stat{min-width:68px}
.ptbl tr.pr:not(.meta-row) .td-tags,.opt-ptbl tr.opr .td-tags{flex-wrap:wrap;overflow:visible}
.pr-tag{display:inline-flex;align-items:center;gap:4px;font-size:9px;padding:1px 6px;border-radius:10px;border:1px solid #d7dde3;background:#f7f9fb;color:#495057;font-weight:600;cursor:pointer;white-space:nowrap}
.pr-tag.pr-tag-soft{color:#7a4000;background:#fff3e0;border-color:rgba(200,120,0,.25)}
.pr-tag.pr-tag-tech{color:#0b5cab;background:#e8f0fb;border-color:rgba(21,101,192,.2)}
.pr-tag.pr-tag-good{color:#1a7a3c;background:#e8f5ee;border-color:rgba(26,122,60,.2)}
.pr-tag.pr-tag-warn{color:#c0392b;background:#fdf0ee;border-color:rgba(192,57,43,.25)}
.row-tog.locked{visibility:hidden;pointer-events:none}
.tag-info-hero{margin:-4px 0 8px;border:1px solid var(--g3);border-radius:8px;overflow:hidden;background:#fff}
.tag-info-hero img{display:block;width:100%;height:auto;max-height:220px;object-fit:cover}
.tag-info-fallback{display:flex;align-items:center;justify-content:center;gap:10px;min-height:160px;background:linear-gradient(135deg,#eef2f7,#ffffff);color:var(--navy);font-weight:700;font-size:20px}
.connector-note{margin-top:6px;font-size:10px;line-height:1.5;color:var(--txl)}
.connector-note a{color:var(--navy);text-decoration:none;font-weight:600}
@media(max-width:768px){
  .ptbl tr.pr:not(.meta-row){grid-template-columns:92px 88px minmax(0,1fr) 84px 68px!important}
  .opt-ptbl tr.opr{grid-template-columns:132px 74px minmax(0,1fr) 84px 68px!important}
}
@media(max-width:480px){
  .ptbl tr.pr:not(.meta-row){grid-template-columns:86px 72px minmax(0,1fr) 74px 68px!important}
  .opt-ptbl tr.opr{grid-template-columns:104px 66px minmax(0,1fr) 74px 68px!important}
  .ptbl tr.pr:not(.meta-row) .td-stat,.opt-ptbl tr.opr .td-stat{padding-right:2px!important}
}

.ptbl tr.pr:not(.meta-row) .td-price,
.opt-ptbl tr.opr .td-price{overflow:visible!important}
.ptbl tr.pr:not(.meta-row) .td-price .prc,
.opt-ptbl tr.opr .td-price .prc{letter-spacing:0;display:block;white-space:nowrap}
.connector-note{margin-top:6px;font-size:10px;line-height:1.5;color:var(--txl)}
.connector-note a{color:var(--navy);text-decoration:none;font-weight:600}
@media(max-width:480px){
  .ptbl tr.pr:not(.meta-row){grid-template-columns:84px 72px minmax(0,1fr) 84px 64px!important}
  .ptbl tr.pr:not(.meta-row) .td-price{padding-right:4px!important}
  .ptbl tr.pr:not(.meta-row) .td-price .prc{font-size:12px}
  .opt-ptbl tr.opr{grid-template-columns:102px 66px minmax(0,1fr) 78px 64px!important}
}

.tag-with-icon,.note-chip.tag-with-icon,.pr-tag.tag-with-icon,.compat-ico.tag-with-icon{display:inline-flex;align-items:center;gap:4px}
.tag-with-icon i{font-size:10px;line-height:1}
.tag-with-icon .tag-label{line-height:1}
.qa-panel{margin-top:18px;background:#fff;border:1px solid var(--g3);border-radius:var(--rl);box-shadow:var(--sh);display:none!important}
.qa-panel summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.qa-panel summary::-webkit-details-marker{display:none}
.qa-panel-body{padding:0 14px 14px}
.qa-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.qa-btn{appearance:none;border:1px solid var(--g3);background:var(--g1);color:var(--tx);border-radius:var(--r);padding:8px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all var(--tr)}
.qa-btn:hover{background:#fff;border-color:var(--navy-l)}
.qa-meta{font-size:11px;color:var(--txl);margin:0 0 10px;line-height:1.7}
.qa-status{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.qa-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--g3);background:#fff}
.qa-pill.good{color:var(--on);background:var(--on-b);border-color:rgba(26,122,60,.2)}
.qa-pill.warn{color:#7a4000;background:#fff3e0;border-color:rgba(200,120,0,.25)}
.qa-pill.bad{color:var(--di);background:var(--di-b);border-color:rgba(192,57,43,.2)}
.qa-table-wrap{overflow:auto;border:1px solid var(--g3);border-radius:var(--r);background:#fff}
.qa-table{width:100%;border-collapse:collapse;font-size:12px}
.qa-table th,.qa-table td{padding:8px 10px;border-bottom:1px solid var(--g2);text-align:left;vertical-align:top;white-space:nowrap}
.qa-table th{background:var(--g1);position:sticky;top:0;z-index:1}
.qa-table td.wrap{white-space:normal;min-width:220px}
.qa-empty{padding:16px;color:var(--txl);font-size:12px}
.qa-caption{font-size:13px;font-weight:700;margin:0 0 8px;color:var(--tx)}
.qa-subcap{font-size:11px;color:var(--txl);margin:0 0 10px}
@media(max-width:640px){.qa-actions{flex-direction:column}.qa-btn{width:100%;text-align:left}}

.slide-main.has-image{padding:10px}
.slide-main-img{display:block;max-width:100%;max-height:260px;object-fit:contain;margin:0 auto 8px}
.slide-thumb.has-image{padding:0;justify-content:flex-start}
.slide-thumb.has-image img{width:100%;height:24px;object-fit:contain;display:block}
.slide-thumb.has-image .th-lbl{max-width:100%;padding:0 2px}

.opt-right.no-combo-photo .opt-setup-ph{min-height:200px}

/* ── ① ステップ番号色 #17a2b8（上記CSSで適用済み） ── */

/* ── 写真エリア背景を白に ── */
.pslide,
.slide-thumb,
.opt-right,
.opt-setup-ph,
.opt-thumb {
  background: #fff !important;
}
.slide-main {
  background: #fff !important;
  border: 1px solid var(--g3);
}
.slide-thumb {
  background: #fff !important;
}
.opt-thumb {
  background: #fff !important;
}
.opt-setup-ph {
  background: #fff !important;
  border: 1px solid var(--g3);
  border-radius: var(--r);
}

/* ── 左右矢印ボタン ── */
.slide-wrap {
  position: relative;
}
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--g3);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--navy);
  font-size: 12px;
  box-shadow: var(--sh);
  transition: all var(--tr);
}
.slide-arrow:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.slide-arrow.slide-prev { left: 4px; }
.slide-arrow.slide-next { right: 4px; }

/* ── ギア画像のイメージオーバーレイ ── */
.img-overlay-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.img-overlay-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  pointer-events: none;
  font-family: 'Barlow Condensed', sans-serif;
}

/* ── no_photo 表示 ── */
.no-photo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  background: #f8f9fa;
  border-radius: var(--r);
  color: var(--g5);
}
.no-photo-box span {
  font-size: 11px;
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #adb5bd;
}

/* ── 光源オプション：個別製品写真表示 ── */
.opt-prod-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.opt-prod-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--g3);
  border-radius: var(--r);
  padding: 6px 8px;
  cursor: pointer;
  transition: all var(--tr);
}
.opt-prod-item:hover {
  border-color: var(--navy-l);
  box-shadow: var(--sh);
}
.opt-prod-item-img {
  width: 56px;
  height: 48px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.opt-prod-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.opt-prod-item-img .no-img-icon {
  font-size: 20px;
  color: var(--g5);
  opacity: .4;
}
.opt-prod-item-info {
  flex: 1;
  min-width: 0;
}
.opt-prod-item-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opt-prod-item-cat {
  font-size: 10px;
  color: var(--txl);
  margin-top: 2px;
}

/* ── no-combo-photo時に個別製品グリッドを表示 ── */
.opt-right.with-prod-list .opt-setup-ph,
.opt-photo-pane.with-prod-list .opt-setup-ph { display: none; }
.opt-right.with-prod-list .opt-prod-grid,
.opt-photo-pane.with-prod-list .opt-prod-grid { display: flex; }
.opt-right:not(.with-prod-list) .opt-prod-grid,
.opt-photo-pane:not(.with-prod-list) .opt-prod-grid { display: none; }

/* ── 自動スライドショー インジケーター ── */
.slide-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.slide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g3);
  cursor: pointer;
  transition: background var(--tr);
}
.slide-dot.active {
  background: var(--navy);
}


/* ====================================================
   1. ルート変数：code.htmlのカラーシステム
   ==================================================== */
:root {
  --primary: #f9df00;
  --on-primary: #201c00;
  --secondary: #343a40;
  --surface: #f5f6f7;
  --surface-container: #edeeef;
  --surface-container-low: #f3f4f5;
  --surface-container-lowest: #ffffff;
  --on-surface: #191c1d;
  --on-surface-variant: #4b4732;
  --outline: #7d775f;
  --outline-variant: #cec7ab;
  --success: #1a7a3c;
  --success-container: #e8f5ee;
  --accent: #0e7490;

  /* 既存変数にマッピング */
  --navy: #343a40;
  --navy-d: #191c1d;
  --navy-l: #495057;
  --navy-p: #f3f4f5;
  --tx: #191c1d;
  --txl: #4b4732;
  --on: #1a7a3c;
  --on-b: #e8f5ee;
  --g1: #f5f6f7;
  --g2: #edeeef;
  --g3: #cec7ab;
  --g5: #7d775f;
  --w: #ffffff;
  --r: 2px;
  --rl: 4px;
}

/* ====================================================
   2. ボディ・全体レイアウト
   ==================================================== */
body {
  background: var(--surface) !important;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif !important;
  color: var(--on-surface) !important;
}

/* ====================================================
   3. ヘッダー
   ==================================================== */
.hdr {
  background: var(--secondary) !important;
  border-bottom: none !important;
  border-bottom: 3px solid var(--primary) !important;
}
.lg-txt {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
}

/* ====================================================
   4. ページタイトル（code.htmlスタイル）
   ==================================================== */
.pg-ttl h1 {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: var(--secondary) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
/* .pg-ttl::before {
  content: 'CONFIGURATION TOOL';
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--on-surface-variant, #4b4732);
  text-transform: uppercase;
  margin-bottom: 4px;
} */
.pg-ttl p {
  color: var(--on-surface-variant, #4b4732) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* ====================================================
   5. ステップカード（code.htmlスタイル）
   ==================================================== */
.steps-row {
  flex-direction: row !important;
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}
.sc {
  background: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: 0 24px 40px rgba(25,28,29,0.05) !important;
  flex: 1 !important;
  overflow: hidden !important;
}
.sc.active,
.sc#s1 {
  border-left: 4px solid var(--primary) !important;
}
.sc#s2,
.sc#s3 {
  border-left: 4px solid rgba(52,58,64,0.15) !important;
}
.sc#s2.active,
.sc#s3.active {
  border-left: 4px solid var(--primary) !important;
}
.sc-hd {
  background: transparent !important;
  border-bottom: 1px solid var(--surface-container, #edeeef) !important;
  padding: 20px 24px !important;
}
.sc-num {
  width: 28px !important;
  height: 28px !important;
  background: rgba(52,58,64,0.15) !important;
  color: var(--on-surface-variant, #4b4732) !important;
  border-radius: 50% !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.sc-num.done,
#s1 .sc-num {
  background: var(--secondary) !important;
  color: var(--primary) !important;
}
.sc-ttl {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--secondary) !important;
  letter-spacing: 0.01em !important;
}
.sc-bd {
  padding: 20px 24px !important;
}

/* ====================================================
   6. ブランドボタン
   ==================================================== */
.brand-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  gap: 8px !important;
}
.brand-btn {
  padding: 10px 6px !important;
  border: 1.5px solid var(--outline-variant, #cec7ab) !important;
  border-radius: 2px !important;
  background: var(--surface-container-lowest, #fff) !important;
  color: var(--on-surface, #191c1d) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}
.brand-btn:hover {
  border-color: var(--secondary) !important;
  background: var(--surface-container-low, #f3f4f5) !important;
}
.brand-btn.sel {
  border-color: var(--secondary) !important;
  background: var(--secondary) !important;
  color: var(--primary) !important;
}

/* ====================================================
   7. セレクトボックス・入力欄
   ==================================================== */
.lens-sel,
.cam-sel,
select {
  border-radius: 2px !important;
  border: 1px solid var(--outline-variant, #cec7ab) !important;
  background: var(--surface-container-low, #f3f4f5) !important;
  color: var(--on-surface, #191c1d) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 32px 12px 14px !important;
}
.lens-sel:focus,
select:focus {
  border-color: var(--secondary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(52,58,64,0.15) !important;
}

/* ====================================================
   8. 検索ボタン
   ==================================================== */
.srch-btn {
  background: var(--secondary) !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 12px !important;
  transition: all 0.15s !important;
}
.srch-btn:hover:not(:disabled) {
  filter: brightness(1.1) !important;
  transform: none !important;
}
.srch-btn:disabled {
  background: var(--outline-variant, #cec7ab) !important;
  cursor: not-allowed !important;
}

/* ====================================================
   9. 結果カード
   ==================================================== */
.rcard {
  background: var(--surface-container-lowest, #fff) !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: 0 24px 40px rgba(25,28,29,0.08) !important;
  overflow: hidden !important;
}

/* ====================================================
   10. パターンタブ
   ==================================================== */
.ptabs {
  background: var(--surface-container-low, #f3f4f5) !important;
  border-bottom: 1px solid var(--outline-variant, #cec7ab) !important;
  padding: 0 !important;
  gap: 0 !important;
}
.ptab {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--on-surface-variant, #4b4732) !important;
  transition: all 0.15s !important;
  margin-bottom: 0 !important;
}
.ptab:hover {
  background: rgba(52,58,64,0.05) !important;
  color: var(--secondary) !important;
}
.ptab.active {
  background: var(--surface-container-lowest, #fff) !important;
  color: var(--secondary) !important;
  border-bottom: 3px solid var(--primary) !important;
  font-weight: 900 !important;
}

/* ====================================================
   11. 製品テーブルエリア（左カラム）
   ==================================================== */
.plist-ttl {
  background: var(--surface-container, #edeeef) !important;
  border-bottom: 1px solid var(--outline-variant, #cec7ab) !important;
  padding: 10px 14px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--secondary) !important;
}
.plist-ttl i {
  color: var(--secondary) !important;
}

/* 製品行 */
.ptbl tr.pr.is-on td {
  background: #fff !important;
}
.ptbl tr.pr.is-on:hover td {
  background: var(--surface-container-low, #f3f4f5) !important;
}

/* 種別ピル - code.htmlのtag-chipスタイルに */
.pill {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 2px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.p-h { background: #e8f0f8 !important; color: #1e4d7b !important; border: none !important; }
.p-g { background: var(--success-container, #e8f5ee) !important; color: var(--success, #1a7a3c) !important; border: none !important; }
.p-r { background: #fdf8e8 !important; color: #8a6900 !important; border: none !important; }
.p-p { background: #f5eeff !important; color: #5b21b6 !important; border: none !important; }
.p-cl { background: #e8f8f8 !important; color: var(--accent, #0e7490) !important; border: none !important; }
.p-c { background: #e8f8f8 !important; color: var(--accent, #0e7490) !important; border: none !important; }
.p-str { background: #fff0e8 !important; color: #b83010 !important; border: none !important; }
.p-lit { background: #e8f5ff !important; color: #005a8e !important; border: none !important; }
.p-fib { background: #e8ffe8 !important; color: #1a5c10 !important; border: none !important; }
.p-o { background: var(--surface-container, #edeeef) !important; color: var(--on-surface-variant, #4b4732) !important; border: none !important; }

/* ステータスバッジ */
.sbdg {
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  letter-spacing: 0.05em !important;
  padding: 2px 7px !important;
}
.sb-販売中 {
  background: var(--success-container, #e8f5ee) !important;
  color: var(--success, #1a7a3c) !important;
  border: 1px solid rgba(26,122,60,0.2) !important;
}
.sb-生産終了 { background: #fdf0ee !important; color: #b83010 !important; border: 1px solid rgba(184,48,16,0.2) !important; }
.sb-受注生産 { background: #fdf8e8 !important; color: #8a6900 !important; border: 1px solid rgba(138,105,0,0.2) !important; }
.sb-近日発売 { background: #e8f0fb !important; color: #1565c0 !important; border: 1px solid rgba(21,101,192,0.2) !important; }

/* 製品名 */
.pr-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--secondary) !important;
}
.pr-name:hover { color: var(--accent, #0e7490) !important; }
.pr-num { font-size: 10px !important; color: var(--on-surface-variant, #4b4732) !important; opacity: 0.7 !important; }

/* 価格 */
.prc { font-size: 13px !important; font-weight: 800 !important; color: var(--on-surface, #191c1d) !important; }

/* 基本合計バー */
.base-total {
  background: var(--surface-container, #edeeef) !important;
  border-top: 2px solid var(--outline-variant, #cec7ab) !important;
  padding: 12px 16px !important;
}
.bt-lbl { font-size: 9px !important; font-weight: 900 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--secondary) !important; }
.bt-items { font-size: 10px !important; color: var(--on-surface-variant, #4b4732) !important; margin-top: 2px !important; }
.bt-amt {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--secondary) !important;
  letter-spacing: -0.02em !important;
}

/* グランド合計バー */
.grand-bar {
  background: var(--secondary) !important;
  padding: 16px 20px !important;
  display: flex !important;
}
.gt-lbl { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.5) !important; }
.gt-items { font-size: 10px !important; color: rgba(255,255,255,0.4) !important; margin-top: 2px !important; }
.gt-amt {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: var(--primary) !important;
  letter-spacing: -0.02em !important;
}

/* ====================================================
   12. 写真エリア（右カラム）- 動的高さ最適化
   ==================================================== */
.pslide {
  background: #fff !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* slide-main: 左カラムの高さに合わせて自動伸縮 */
.slide-main {
  flex: 1 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding: 24px !important;
  position: relative !important;
}
.slide-main.has-image {
  padding: 16px !important;
}

/* slide-ph 内の画像：最大高さを制限しつつ stretch */
.slide-ph {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
}
.slide-ph img,
.slide-main-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* サムネイル行 */
.slide-thumbs {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-top: 1px solid var(--outline-variant, #cec7ab) !important;
  background: var(--surface-container, #edeeef) !important;
  margin: 0 !important;
}
.slide-thumb {
  padding: 5px 10px !important;
  border: 1px solid var(--outline-variant, #cec7ab) !important;
  border-radius: 2px !important;
  background: #fff !important;
  cursor: pointer !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--on-surface-variant, #4b4732) !important;
  transition: all 0.15s !important;
}
.slide-thumb:hover {
  background: var(--surface-container-low, #f3f4f5) !important;
  border-color: var(--secondary) !important;
}
.slide-thumb.active {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--primary) !important;
}
.slide-thumb i { color: inherit !important; }

/* カラーセレクター */
.c-sel {
  display: flex !important;
  gap: 5px !important;
  padding: 6px 16px !important;
  border-top: 1px solid var(--outline-variant, #cec7ab) !important;
  justify-content: center !important;
  background: #fff !important;
  margin: 0 !important;
}

/* キャプション */
.sph-name {
  font-size: 10px !important;
  color: var(--on-surface-variant, #4b4732) !important;
  text-align: center !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  margin-top: 6px !important;
}

/* ====================================================
   13. オプション光源セクション
   ==================================================== */
.opt-block {
  border-top: 2px solid var(--outline-variant, #cec7ab) !important;
}
.opt-toggle {
  background: var(--surface-container, #edeeef) !important;
  color: var(--secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 14px 16px !important;
}
.opt-toggle:hover {
  background: var(--surface-container-low, #f3f4f5) !important;
}
.opt-toggle.open {
  border-bottom: 2px solid var(--primary) !important;
}
.opt-ico { color: var(--primary) !important; }

.opt-top-selectors {
  background: #fff !important;
  border-bottom: 1px solid var(--outline-variant, #cec7ab) !important;
}
.opt-sel-lbl {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--on-surface-variant, #4b4732) !important;
  margin-bottom: 6px !important;
}
.opt-type-btn {
  border: 1.5px solid var(--outline-variant, #cec7ab) !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: var(--on-surface-variant, #4b4732) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.opt-type-btn:hover {
  border-color: var(--secondary) !important;
  color: var(--secondary) !important;
}
.opt-type-btn.active {
  border-color: var(--secondary) !important;
  background: var(--secondary) !important;
  color: var(--primary) !important;
}
.opt-qty-btn {
  border: 1.5px solid var(--outline-variant, #cec7ab) !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: var(--on-surface-variant, #4b4732) !important;
  font-weight: 700 !important;
}
.opt-qty-btn:hover {
  border-color: var(--secondary) !important;
  color: var(--secondary) !important;
}
.opt-qty-btn.active {
  border-color: var(--secondary) !important;
  background: var(--secondary) !important;
  color: var(--primary) !important;
}
.opt-model-sel {
  border: 1px solid var(--outline-variant, #cec7ab) !important;
  border-radius: 2px !important;
  background: var(--surface-container-low, #f3f4f5) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--on-surface, #191c1d) !important;
}
.conv-btn, .size-btn {
  border: 1px solid var(--outline-variant, #cec7ab) !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: var(--on-surface-variant, #4b4732) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
.conv-btn:hover, .size-btn:hover {
  border-color: var(--accent, #0e7490) !important;
  color: var(--accent, #0e7490) !important;
}
.conv-btn.active, .size-btn.active {
  border-color: var(--accent, #0e7490) !important;
  background: var(--accent, #0e7490) !important;
  color: #fff !important;
}

.opt-sub-bar {
  background: var(--surface-container, #edeeef) !important;
  border-top: 1px solid var(--outline-variant, #cec7ab) !important;
  padding: 10px 16px !important;
}
.opt-sub-lbl {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--on-surface-variant, #4b4732) !important;
}
.opt-sub-amt {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--secondary) !important;
}

/* ====================================================
   14. 写真エリア（オプション光源用）
   ==================================================== */
.opt-photo-pane,
.opt-right {
  background: #fff !important;
}
.opt-slide-main {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}
.opt-setup-ph {
  background: #fff !important;
  border: none !important;
}
.opt-slide-container {
  background: #fff !important;
  padding: 16px !important;
  gap: 8px !important;
}
.opt-slide-thumbs {
  border-top: 1px solid var(--outline-variant, #cec7ab) !important;
  padding-top: 8px !important;
}
.opt-slide-thumb {
  background: #fff !important;
  border: 1.5px solid var(--outline-variant, #cec7ab) !important;
  border-radius: 2px !important;
}
.opt-slide-thumb.active {
  border-color: var(--secondary) !important;
}

/* ====================================================
   15. ポップアップ
   ==================================================== */
.ov { backdrop-filter: blur(4px) !important; }
.pop-box {
  border-radius: 4px !important;
  box-shadow: 0 40px 80px rgba(25,28,29,0.3) !important;
}
.pop-hd {
  background: var(--secondary) !important;
  padding: 16px 20px !important;
}
.pop-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.pop-link {
  background: var(--secondary) !important;
  border-radius: 2px !important;
  letter-spacing: 0.1em !important;
}
.pop-link:hover { background: #495057 !important; }

/* ====================================================
   16. 矢印ボタン改善
   ==================================================== */
.slide-arrow {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid var(--outline-variant, #cec7ab) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  box-shadow: 0 2px 8px rgba(25,28,29,0.1) !important;
}
.slide-arrow:hover {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #fff !important;
}

/* ====================================================
   17. レスポンシブ対応
   ==================================================== */
@media(max-width:960px){
  .steps-row { flex-direction: column !important; }
  .pg-ttl h1 { font-size: 36px !important; }
}
@media(max-width:680px){
  .pg-ttl h1 { font-size: 28px !important; }
  .steps-row { flex-direction: column !important; }
  .gt-amt { font-size: 28px !important; }
}

/* ====================================================
   18. pcont の正しい2カラムレイアウト
   ==================================================== */

/* pslide は flex で高さが plist に追従するように */

/* slide-main が残り高さを占める */


/* 検索結果ヘッダー */
.res-ttl {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--secondary) !important;
  letter-spacing: -0.02em !important;
}
.res-sub { font-size: 12px !important; color: var(--on-surface-variant, #4b4732) !important; }
.res-sub strong { color: var(--secondary) !important; }

/* 生産終了バナー */
.discon-banner {
  background: #fdf0ee !important;
  border-bottom: 1px solid rgba(184,48,16,0.2) !important;
  color: #b83010 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
}

/* 検索結果ヘッダー：code.htmlの検索結果ページスタイル */
.res-hd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 0 16px;
  border-bottom: 2px solid var(--outline-variant, #cec7ab);
}
.res-hd-icon {
  width: 40px;
  height: 40px;
  background: var(--primary, #f9df00);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--secondary, #343a40);
  font-size: 18px;
}
.res-hd-text { flex: 1; }
.res-ttl {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--secondary, #343a40) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}
.res-sub {
  font-size: 12px !important;
  color: var(--on-surface-variant, #4b4732) !important;
  line-height: 1.5 !important;
}

/* ステップカード - 選択済み状態のボーダー更新 */
.sc-num.done {
  background: var(--secondary) !important;
  color: var(--primary) !important;
}

/* wrap のpadding調整 */
.wrap {
  padding-top: 24px !important;
  padding-bottom: 60px !important;
}

/* pg-ttl margin */
.pg-ttl {
  margin-bottom: 24px !important;
}

/* sc-bd ラベル */
.sc-bd .fil-lbl {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--on-surface-variant, #4b4732) !important;
}

/* フィルターボタン改善 */
.scb {
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  padding: 4px 10px !important;
}
.scb.s-on.ck {
  background: var(--success-container, #e8f5ee) !important;
  color: var(--success, #1a7a3c) !important;
  border-color: rgba(26,122,60,0.4) !important;
}

/* レンズタブ */
.ltabs {
  border-bottom: 2px solid var(--outline-variant, #cec7ab) !important;
  margin-bottom: 10px !important;
}
.ltab {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--on-surface-variant, #4b4732) !important;
  padding: 6px 12px !important;
}
.ltab.active {
  color: var(--secondary) !important;
  border-bottom-color: var(--primary) !important;
  font-weight: 800 !important;
}
.ltab:hover { color: var(--secondary) !important; }
.lcnt {
  background: var(--surface-container, #edeeef) !important;
  color: var(--on-surface-variant, #4b4732) !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
  border-radius: 2px !important;
}


/* =====================================================
   ① 空白ゼロ：左右カラムを高さに追従させる
   =====================================================
   pcont は grid→flex に。左(plist)は自然な高さ、
   右(pslide)は左と同じ高さに伸縮。
*/



/* slide-main が pslide の残り高さを埋める */


/* =====================================================
   ② グランドバー廃止 → base-total を目立つデザインに
   =====================================================
*/
/* grand-bar を完全非表示 */
.grand-bar {
  display: none !important;
}

/* base-total をグランドバー風の目立つデザインに格上げ */
.base-total {
  background: var(--secondary, #343a40) !important;
  border-top: none !important;
  padding: 14px 18px !important;
  color: #fff !important;
}
.base-total .bt-lbl {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
}
.base-total .bt-items {
  font-size: 10px !important;
  color: rgba(255,255,255,0.4) !important;
  margin-top: 2px !important;
}
.base-total .bt-amt {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--primary, #f9df00) !important;
  letter-spacing: -0.02em !important;
}

/* =====================================================
   ③ サムネイル：画像ありのみ表示
   =====================================================
   画像なしサムネイルは JS で hide するが、
   CSS 側でもテキストラベルのみのものを隠す
*/
/* 画像なしサムネイル（.has-image クラスがない）を非表示 */
.slide-thumbs .slide-thumb:not(.has-image):not(.active-text) {
  display: none !important;
}
/* サムネイルが全て非表示なら行ごと隠す（JSで制御のフォールバック） */
.slide-thumbs:empty,
.slide-thumbs.all-hidden {
  display: none !important;
  padding: 0 !important;
  border-top: none !important;
}

/* サムネイルに画像がある場合のスタイル改善 */
.slide-thumbs .slide-thumb.has-image {
  display: flex !important;
  width: 48px !important;
  height: 48px !important;
  padding: 3px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 3px !important;
}
.slide-thumbs .slide-thumb.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* fa-link アイコンを持つ（画像なし）サムネイルを非表示 */
.slide-thumbs .slide-thumb:not(.has-image) {
  display: none !important;
}


/* =====================================================
   オプションブロック完全非表示（空白ゼロ）
   opt-block は display:none だが念のため padding/margin も消す
   ===================================================== */
.opt-block {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* =====================================================
   PC（769px以上）：左右並列
   ===================================================== */


/* =====================================================
   スマホ（768px以下）：縦積み
   順序：① 基本構成テーブル → ② 画像エリア → ③ 合計バー
   ===================================================== */
@media (max-width: 768px) {
  /* pcont を縦積みflexに */
  

  /* ① 基本構成（plist）を上に */
  

  /* ② 画像エリア（pslide）を中間に */
  

  /* 画像エリアは適切な高さを確保 */
  

  /* ③ 合計バー（base-total）を最下部に
     base-total は plist の中にあるが、視覚的に最下部に見えるよう
     pslide の後ろに来るように plist 自体を flex column にして
     tableとbase-totalを分離する */
  
  /* テーブルが伸びる */
  
  /* base-total は plist の末尾（自然な位置）に留まる */
  

  /* スマホ時の合計バーはやや小さめに */
  .base-total .bt-amt {
    font-size: 26px !important;
  }

  /* サムネイルはスマホでも横並び */
  .slide-thumbs {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 8px 12px !important;
  }

  /* ステップカードは縦積みを維持 */
  .steps-row {
    flex-direction: column !important;
  }
}

/* =====================================================
   より小さいスマホ（480px以下）
   ===================================================== */
@media (max-width: 480px) {
  
  .base-total .bt-amt {
    font-size: 22px !important;
  }
  .wrap {
    padding: 12px 10px 48px !important;
  }
}

/*
 * 競合するすべての pcont / plist / pslide / slide-main ルールを
 * このブロックで完全上書きする（!important で最終決定）
 *
 * PC レイアウト（769px以上）
 * ┌──────────┬──────────────┐
 * │ .plist   │ .pslide      │
 * │ 製品行群 │ 画像（stretch）│
 * │ ──────── │              │
 * │ 合計行   │              │ ← 合計行の底辺 = pslide の底辺
 * └──────────┴──────────────┘
 *
 * スマホ レイアウト（768px以下）
 * ┌──────────────┐
 * │ .plist        │
 * │ 製品行群      │
 * │ ──────────── │
 * │ 合計行        │
 * ├──────────────┤
 * │ .pslide       │
 * │ 画像エリア    │
 * └──────────────┘
 */

/* ── 非表示状態 ── */
.pcont { display: none !important; }

/* ── PC: 2カラム grid ── */


/* ── 左カラム: 自然な高さで積み上げ ── */


/* ptbl はコンテンツ量に応じて自然伸縮 */


/* base-total は plist の末尾に固定（flex末尾） */


/* ── 右カラム: 左と同じ高さに stretch ── */


/* slide-main が写真エリアの残り高さをすべて埋める */


/* サムネイル・カラー選択は flex-shrink:0 で底部に固定 */

.grand-bar {
  display: none !important;
}

/* base-total をダーク合計バーに（前パッチ上書き） */
.base-total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--secondary, #343a40) !important;
  color: #fff !important;
  padding: 14px 18px !important;
  border-top: none !important;
  flex-shrink: 0 !important;
}
.base-total .bt-lbl {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
}
.base-total .bt-items {
  font-size: 10px !important;
  color: rgba(255,255,255,.4) !important;
  margin-top: 2px !important;
}
.base-total .bt-amt {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--primary, #f9df00) !important;
  letter-spacing: -0.02em !important;
}

/* ── スマホ: 縦積み ── */
@media (max-width: 768px) {
  

  

  /* スマホでは合計行を plist 末尾（自然位置）に残す */
  

  

  

  .base-total .bt-amt {
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  
  .base-total .bt-amt {
    font-size: 20px !important;
  }
}

/*
 * 目的：右の写真エリア(.pslide)の高さ = 左の「製品行 + 合計行」の高さ
 * 手法：CSS Grid の align-items:stretch のみで実現。
 *       過去パッチとの競合を !important で完全上書き。
 *
 * PC (>768px)
 *   .pcont.active → display:grid; grid-template-columns:1fr 1fr;
 *   両カラムは自動的に同じ行高さ(stretch)になる。
 *
 * スマホ (≤768px)
 *   .pcont.active → display:flex; flex-direction:column;
 *   .plist → 自然な高さ
 *   .pslide → 固定height範囲
 *   base-total は DOM移動なし・plist末尾に留まる
 */

/* ── リセット: 過去パッチを無効化 ─────────────────── */
.pcont { display: none !important; }

/* ── PC: Grid で高さ自動一致 ─────────────────────── */
@media (min-width: 769px) {
  

  /* 左: plist ── flex列で自然に積む */
  

  /* ptbl: コンテンツ量に応じて自然伸縮 */
  

  /* base-total: plist末尾に固定（DOM移動なし） */
  

  /* 右: pslide ── grid stretchで左と高さ一致 */
  

  /* slide-main: 残り高さをすべて埋める */
  

  /* thumbs / c-sel: 底部固定 */
  
}

/* ── スマホ: 縦積み ───────────────────────────────── */
@media (max-width: 768px) {
  

  

  /* スマホではptblが自然な高さ */
  

  /* base-total: plist末尾に自然配置（DOM移動させない） */
  

  

  

  .base-total .bt-amt {
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  
  .base-total .bt-amt {
    font-size: 20px !important;
  }
}

/* =====================================================
   RESPONSIVE FIX: スマホ対応最終調整
   =====================================================
   問題1: steps-row（基本構成）がスマホで消える
   問題2: 画像エリア(pslide)がスマホで消える
   解決: 全競合ルールを上書きする最終ブロック
   ===================================================== */

/* --- steps-row: スマホで縦積みを確実に --- */
@media (max-width: 768px) {
  .steps-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sc {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  .sc-hd {
    flex-wrap: wrap !important;
  }

  .sc-bd {
    padding: 12px 16px !important;
  }

  /* pcont: plist → pslide の縦積み */
  

  

  

  

  /* pslide は plist の直下に表示 */
  

  

  .base-total .bt-amt {
    font-size: 22px !important;
  }
}

@media (max-width: 480px) {
  .steps-row {
    gap: 8px !important;
  }

  .sc-hd {
    padding: 12px 14px !important;
  }

  .sc-bd {
    padding: 10px 14px !important;
  }

  

  .base-total .bt-amt {
    font-size: 18px !important;
  }
}

/* =====================================================
   FINAL FIX PATCH
   1. 検索ボタン独立ラッパー
   2. sc-bd の余白削減（ブランド・カメラ選択の空白除去）
   3. スマホ: plist の製品行が見えない問題を修正
   ===================================================== */

/* ----- 1. 検索ボタン独立ラッパー ----- */
.srch-btn-wrap {
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}
.srch-btn-wrap .srch-btn {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
}

/* ----- 2. sc-bd の余白削減 ----- */
/* ブランド選択（s1）・カメラ選択（s2）の sc-bd は最小パディング */
#s1 .sc-bd,
#s2 .sc-bd {
  padding: 12px 16px !important;
}
/* レンズ選択（s3）も同様 */
#s3 .sc-bd {
  padding: 12px 16px 12px !important;
}
/* fil-row の下マージンを縮小 */
.fil-row {
  margin-bottom: 8px !important;
}
/* brand-grid の gap */
.brand-grid {
  gap: 6px !important;
}
/* lens-wrap の下マージンを0に（camSel直後のボタン位置対応） */
#s2 .sc-bd .lens-wrap {
  margin-bottom: 0 !important;
}

/* ----- 3. スマホ: plist の製品行を確実に表示 ----- */
@media (max-width: 768px) {

  /* plist は高さ制限なし・overflow表示 */
  

  /* ptbl は自然な高さで全行表示 */
  

  /* ptbl の各行を縦積みシンプルレイアウトに変更 */
  

  /* すべてのtdを自然表示 */
  

  /* ジャンルpill */
  

  /* 製品番号は非表示（スペース節約） */
  

  /* 製品名 */
  

  /* 金額 + ステータス: 横並びで1行に */
  
  

  /* 金額+ステータスを同行に並べるラッパー的処理 */
  /* td-price と td-stat は同一行に見えるよう float を使わず flex の親を利用 */
  
  
  

  /* タグ行 */
  

  /* pslide が plist の直後に来るよう border で区切り */
  

  /* steps-row: スマホで確実に縦積み */
  .steps-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .sc {
    flex: none !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  #s1 .sc-bd,
  #s2 .sc-bd,
  #s3 .sc-bd {
    padding: 10px 12px !important;
  }
}

/* =====================================================
   MEGA PATCH CSS: ハイライト・サムネ・スマホレイアウト
   ===================================================== */

/* ----- 現在表示中の行ハイライト ----- */
.ptbl tr.pr.slide-current td {
  background: rgba(52, 58, 64, 0.06) !important;
}
.ptbl tr.pr.slide-current {
  box-shadow: inset 3px 0 0 var(--navy) !important;
}
.ptbl tr.pr.is-off.slide-current td {
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px,
    rgba(0,0,0,.025) 5px, rgba(0,0,0,.025) 10px
  ) !important;
}

/* ----- サムネイル: ONのみ枠で強調、OFFは淡色 ----- */
.slide-thumb {
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.slide-thumb.active {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 2px rgba(52,58,64,0.18) !important;
  background: var(--w) !important;
  color: var(--navy) !important;
}
/* activeでない通常サムネ */
.slide-thumb:not(.active) {
  border-color: var(--g3) !important;
  background: #fff !important;
  box-shadow: none !important;
}
/* OFFの製品サムネ */
.slide-thumb.thumb-off {
  opacity: 0.28 !important;
  pointer-events: none !important;
  border-color: var(--g3) !important;
  box-shadow: none !important;
}

/* ----- スマホ: 縦順序 タブ→説明→基本構成(ttl)→各行→合計→画像→サムネ ----- */
@media (max-width: 768px) {

  /* pcont を flex column に（既存のoverride強化） */
  

  /* plist: order 1 = 上半分（ttl + table + base-total） */
  

  /* plist-ttl は一番上 */
  

  /* ptbl は ttl の直後 */
  

  /* base-total: ptbl の直後（合計を各行の下に） */
  

  /* set-notes-disp（構成メモ）は合計の下 */
  

  /* pslide: order 2 = base-totalの後（画像エリア全体） */
  

  /* slide-main（画像メイン）が上 */
  

  /* c-sel（カラー選択）*/
  

  /* slide-thumbs（サムネイル）が画像の下 */
  

  /* base-total ダークスタイル維持 */
  .base-total {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
}
/* ===== FINAL UI PATCH 2026-04-03 ===== */
.pg-ttl-row{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:20px !important;
}
.pg-ttl-copy{flex:1 1 auto;min-width:0}
.pdf-ref-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:0 18px !important;
  border:1px solid var(--secondary,#343a40) !important;
  background:#fff !important;
  color:var(--secondary,#343a40) !important;
  text-decoration:none !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
  border-radius:4px !important;
  transition:all .15s ease !important;
}
.pdf-ref-btn:hover{
  background:var(--secondary,#343a40) !important;
  color:#fff !important;
}









.slide-main-body{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}
.slide-main-img,
.slide-main-body img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}
.slide-main-caption{
  font-size:11px;
  line-height:1.5;
  color:var(--on-surface-variant,#4b4732);
  font-weight:700;
}
.slide-main-status{
  font-size:10px;
  color:var(--txl,#6c757d);
}
.slide-main-empty{
  color:var(--txl,#6c757d);
  font-size:12px;
  line-height:1.8;
}
.slide-main-empty i{font-size:34px;opacity:.35}
.slide-arrow{z-index:5 !important}
.slide-arrow[disabled]{opacity:.35 !important;pointer-events:none !important}
.slide-thumb,
.slide-thumbs .slide-thumb,
.slide-thumbs .slide-thumb:not(.has-image),
.slide-thumbs .slide-thumb.thumb-no-photo{
  display:flex !important;
}
.slide-thumb{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  padding:4px !important;
  background:#fff !important;
  border:1px solid var(--outline-variant,#cec7ab) !important;
  border-radius:4px !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  position:relative !important;
}
.slide-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.slide-thumb.active{
  border-color:var(--secondary,#343a40) !important;
  box-shadow:0 0 0 2px rgba(52,58,64,.15) !important;
  background:#fff !important;
  color:var(--secondary,#343a40) !important;
}
.slide-thumb.thumb-off{
  opacity:.28 !important;
  filter:grayscale(1) !important;
  border-style:dashed !important;
}
.slide-thumb.thumb-off.active{
  opacity:.42 !important;
}
.slide-thumb:disabled{cursor:not-allowed !important}
.thumb-no-photo-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  color:#9aa1a8;
  background:#fff;
  border:1px dashed #d7dde3;
  border-radius:3px;
}
.no-photo-box{
  background:#fff !important;
  border:1px dashed #d7dde3 !important;
  min-height:160px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  gap: 6px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
.slide-current td{
  background:rgba(249,223,0,.14) !important;
}
.slide-current.is-off td:not(.td-stat){
  background:rgba(249,223,0,.08) !important;
}

@media (max-width: 960px){
  .pg-ttl-row{align-items:flex-start !important}
}
@media (max-width: 768px){
  .pg-ttl-row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }
  .pdf-ref-btn{align-self:flex-end !important}
  
  
  
  
  .ptbl tr.pr:not(.meta-row){
    grid-template-columns:76px minmax(0,1fr) 82px 64px !important;
    grid-template-rows:auto auto auto !important;
  }
  .ptbl tr.pr:not(.meta-row) .td-genre{grid-column:1;grid-row:1;padding:8px 4px 4px 10px !important}
  .ptbl tr.pr:not(.meta-row) .td-pnum{grid-column:2;grid-row:1;padding:8px 4px 4px 4px !important;font-size:10px !important}
  .ptbl tr.pr:not(.meta-row) .td-stat{grid-column:4;grid-row:1 / span 2;padding:6px 8px 6px 0 !important;min-width:64px !important}
  .ptbl tr.pr:not(.meta-row) .td-prod{grid-column:1 / span 2;grid-row:2;padding:2px 6px 8px 10px !important}
  .ptbl tr.pr:not(.meta-row) .td-price{grid-column:3;grid-row:2;padding:2px 8px 8px 0 !important;min-width:82px !important}
  .ptbl tr.pr:not(.meta-row) .td-tags{grid-column:1 / span 4;grid-row:3;padding:0 8px 8px 10px !important;flex-wrap:wrap !important}
  .opt-ptbl tr.opr{
    grid-template-columns:108px minmax(0,1fr) 82px 64px !important;
    grid-template-rows:auto auto auto !important;
  }
  .opt-ptbl tr.opr .td-genre{grid-column:1;grid-row:1;padding:8px 4px 4px 8px !important}
  .opt-ptbl tr.opr .td-pnum{grid-column:2;grid-row:1;padding:8px 4px 4px 4px !important;font-size:10px !important}
  .opt-ptbl tr.opr .td-stat{grid-column:4;grid-row:1 / span 2;padding:6px 8px 6px 0 !important;min-width:64px !important}
  .opt-ptbl tr.opr .td-prod{grid-column:1 / span 2;grid-row:2;padding:2px 6px 8px 10px !important}
  .opt-ptbl tr.opr .td-price{grid-column:3;grid-row:2;padding:2px 8px 8px 0 !important;min-width:82px !important}
  .opt-ptbl tr.opr .td-tags{grid-column:1 / span 4;grid-row:3;padding:0 8px 8px 10px !important;flex-wrap:wrap !important}
}
@media (max-width: 480px){
  .wrap{padding:12px 10px 48px !important}
  .pdf-ref-btn{min-height:38px !important;padding:0 14px !important;font-size:11px !important}
  .ptbl tr.pr:not(.meta-row){grid-template-columns:72px minmax(0,1fr) 82px 66px !important}
  .opt-ptbl tr.opr{grid-template-columns:98px minmax(0,1fr) 82px 66px !important}
  .pr-name{font-size:12px !important}
  .prc{font-size:12px !important}
  .sbdg{font-size:9px !important;padding:2px 5px !important}
  .slide-thumb{width:52px !important;height:52px !important;min-width:52px !important}
  /* 価格セルの右端パディング確保 */
  .ptbl tr.pr:not(.meta-row) .td-price{padding-right:6px !important}
  .ptbl tr.pr:not(.meta-row) .td-stat,.opt-ptbl tr.opr .td-stat{padding-left:2px !important}
}

/* =====================================================
   MEGA FIX PATCH 2026-04-06
   1. 写真エリア高さ = 基本構成行数に動的追従（min-height削除）
   2. 基本構成合計とサムネイル行揃え（両者をstretch=底辺一致）
   3. メイン写真の販売ステータス非表示（JSで対応済み、CSS側でも）
   4. サムネイル中央揃え
   5. 矢印ちらつき防止（DOM再構築しない=JS側で対応済み）
   6. スマホ: 3列グリッドレイアウト（ジャンル|製品番号|販売status / 製品名|金額|トグル / タグ）
   ===================================================== */

/* ── 販売ステータスをメイン写真エリアで非表示 ── */
.slide-main-status { display: none !important; }

/* ── PC: 高さ動的追従（固定min-height完全廃止） ── */
@media (min-width: 769px) {
  /* pcont: gridで左右が同じ行高さを共有 */
  

  /* 左列: flex columnで自然な高さ */
  

  /* ptblはコンテンツ量に応じて自然伸縮 */
  

  /* 基本構成合計は plist の末尾に固定 */
  

  /* 右列: gridのstretchで左と同じ高さ */
  

  /* slide-main: 固定min-heightを廃止し残り高さをすべて埋める */
  

  /* サムネイル・カラーセレクターは底部に固定、中央揃え */
  
  
}

/* ── サムネイル常に中央揃え ── */
.slide-thumbs {
  justify-content: center !important;
}

/* =====================================================
   スマホ: 3列グリッドレイアウト（ジャンル|品番|ステータス / 製品名|金額|トグル / タグ）
   要件:
     行1: [ジャンル(左)]  [品番(左)]  [販売ステータス(右)]
     行2: [製品名(左, col1-2)]  [金額(右)]  [トグル(右)]
     行3: [タグ 全幅]
   グリッド: col1=ジャンル固定, col2=1fr(品番+製品名), col3=金額固定, col4=ステータス+トグル固定
   ===================================================== */
@media (max-width: 768px) {

  /* pcont縦積み（確定） */
  

  /* plist: 上半分 */
  
  
  
  
  

  /* pslide: 下半分 */
  
  
  
  

  /* ── スマホ ptbl: 3列グリッドレイアウト ──
     col1: 88px  (ジャンルpill)
     col2: 1fr   (品番 / 製品名)
     col3: 80px  (金額)
     col4: 68px  (ステータス + トグル)
  */
  

  

  /* row1 col1: ジャンル pill - 左寄せ */
  

  /* row1 col2: 品番 - 左寄せ */
  

  /* row1 col4: 販売ステータス + row2 col4: トグル（span 2行） */
  
  

  /* row2 col1-2: 製品名（ジャンル列 + 品番列まで） */
  

  /* row2 col3: 金額 - 右寄せ（トグルの左） */
  

  /* row3 全幅: タグ */
  
  
}



/* =====================================================
   SMARTPHONE FINAL FIX 2026-04-06 (最終確定・全競合上書き)

   スマホ目標レイアウト（768px以下）:
     .pcont.active
       └─ .plist  (order:1)
            ├─ .plist-ttl   ← 「基本構成」ラベル
            ├─ .ptbl        ← 各製品行
            └─ .base-total  ← 基本構成合計（★plistの一番下）
       └─ .pslide (order:2) ← 写真エリア（合計の下）
            ├─ .slide-main
            ├─ .c-sel
            └─ .slide-thumbs

   ptbl 各行 3列グリッド:
     行1: [ジャンル pill 左] [品番 左] .............. [ステータス 右]
     行2: [製品名 左, col1-2] ................. [金額 右] [トグル  右]
     行3: [タグ 全幅]
   ===================================================== */

@media (max-width: 768px) {

  /* ── pcont: flex column（grid完全無効化） ── */
  

  /* ── plist: order 1（上） ── */
  

  /* ptbl: 自然な高さで全行表示 */
  

  /* base-total: plist の一番下（margin-top:autoで押し下げない） */
  

  /* ── pslide: order 2（合計の下） ── */
  

  

  

  /* ── ptbl 各行: 3列グリッド ──
     col1: 84px  (ジャンル pill)
     col2: 1fr   (品番 / 製品名)
     col3: 74px  (金額)
     col4: 60px  (ステータス + トグル)
  */
  

  

  /* row1 col1: ジャンル pill（左寄せ） */
  

  /* row1 col2: 品番（左寄せ） */
  

  /* row1 col3: 空（ステータスはrow1-2 span col4） */

  /* row1-2 col4: ステータス（上）＋トグル（下）右寄せ */
  
  

  /* row2 col1-2: 製品名（左寄せ） */
  

  /* row2 col3: 金額（右寄せ）*/
  

  /* row3 全幅: タグ */
  
  
}




/* =====================================================
   SMARTPHONE FIX 2026-04-06 B
   1. base-total を plist の一番下に確定（競合する margin-top:auto を全消し）
   2. スマホ写真メインエリアを正方形に
   3. ドット（slide-dots）をサムネイルの下に（JSで挿入位置変更済み）
   ===================================================== */

/* ── base-total: PCでもスマホでも ptbl 直後に自然配置 ── */


/* スマホでは margin-top:0（自然配置）で ptbl直後に */
@media (max-width: 768px) {
  
  /* plist-ttl → ptbl → base-total の順を order で確定 */
  
  
  
  

  /* ── スマホ: メイン写真エリアを正方形に ── */
  

  /* slide-main-body を絶対配置で正方形内に収める */
  

  /* ── ドット: サムネイルの下に表示 ── */
  .slide-dots {
    order: 10 !important;  /* slide-thumbs(order:3)より後 */
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* pslide内の要素順序確定 */
  
  
  
  
}



/* =====================================================
   SMARTPHONE BASE-TOTAL BOTTOM FIX 2026-04-06
   スマホで基本構成合計を一番下に固定
   ===================================================== */
@media (max-width: 768px) {

  /* plist を flex column に */
  

  /* ptbl が残りスペースを占有 → base-total を末尾へ押し出す */
  

  /* base-total: ptbl の下・plist の末尾 */
  
}

/* =====================================================
   DEFINITIVE BASE-TOTAL FIX — PC & SP両対応
   競合するすべての過去ルールをこのブロックで上書き
   ===================================================== */

/* slide-dots を完全非表示（JS側でも生成しないよう修正済み） */
.slide-dots { display: none !important; }

/* ── plist を flex column に（PC・SP共通） ── */


/*
  ptbl は display:table のまま flex アイテムとして扱う。
  table 要素に flex:1 を与えると正しく伸びない場合があるため、
  ptbl をラップする wrapper を使わず、代わりに
  base-total に margin-top:auto を付けて末尾固定する。
  これが最もシンプルで確実な方法。
*/


/* base-total: ptbl の直後（autoは空白の原因なので0に） */


/* set-notes-disp も base-total の上に来るよう order 管理 */





/* =====================================================
   !!! ABSOLUTE FINAL FIX — base-total を常に一番下 !!!
   過去の「order:3, margin-top:0」を !important で完全上書き
   メディアクエリなし = PC・SP両方に最高優先度で適用
   ===================================================== */

/* plist は必ず flex column */


/* 各子要素の order を確定 */




/* base-total: order と margin-top を確定（グローバル） */


/* =====================================================
   FINAL DEFINITIVE FIX — 2026-04-06 v2
   ① スマホ: base-total を ptbl の直後に確定配置
   ② 矢印ボタン: pslide 相対 → slide-main に対して絶対配置
      （slide-main の外に出したので position:relative は pslide へ）
   ===================================================== */

/* ===== ① スマホ: base-total を ptbl 直後に ===== */
@media (max-width: 768px) {
  /* plist を flex column で確定 */
  

  /* 子要素の順序を order で完全固定 */
  
  
  /* base-total は ptbl の直後 — margin-top:auto / order:99 を完全上書き */
  
  

  /* plist は高さを内容に合わせる（stretch しない） */
  

  /* pslide は plist の後 */
  
}

/* ===== ② 矢印ボタン: slide-main 上に重ねる ===== */
/* JS が pslide 直下に .slide-arrow を挿入するので、
   pslide を position:relative にして slide-main の上に重ねる */

/* 矢印は slide-main の中央（上下）に重ねる */




/* スマホでも同じ絶対配置を保つ */


/* =====================================================
   ABSOLUTE LAST RULE — 全競合を上書きする最終確定
   PC: plist高さ = コンテンツのみ、pslideも同高さ
   SP: base-total は ptbl 直後（margin-top:0 固定）
   ===================================================== */

/* ── PC (769px+): flex row, 両列 stretch ── */
@media (min-width: 769px) {
  
  /* plist: コンテンツ量だけの高さ（flex columnで自然伸縮） */
  
  /* ptbl は自然な高さ */
  
  /* base-total は ptbl 直後（空白ゼロ） */
  
  /* pslide: plist と同じ高さに stretch */
  
  /* slide-main: 残り高さを全部埋める（空白ゼロ） */
  
  
  
}

/* ── SP (〜768px): flex column, base-total は ptbl 直後 ── */


/* ============================================================
   LAYOUT — SINGLE SOURCE OF TRUTH
   構造:
     pcont
       ├─ plist          (左列)
       │    ├─ plist-ttl
       │    ├─ ptbl
       │    └─ base-total  ← 常にptblの直後、plistの末尾
       └─ pslide          (右列)

   PC (769px+): grid 2列、pslideはplistと同じ高さにstretch
   SP (〜768px): 縦積み、plist→pslide の順
   base-total は PC/SP どちらも margin-top:0（autoは使わない）
   ============================================================ */

/* ── 共通: pcont は非表示デフォルト ── */
.pcont { display: none !important; }
.pcont.active { display: grid !important; }

/* ── PC (769px+) ── */
@media (min-width: 769px) {
  .pcont.active {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    align-items: start !important;   /* plistの高さ=コンテンツ量 */
  }

  /* 左列: plist — コンテンツ量で高さが決まる */
  .pcont.active > .plist {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: 1px solid var(--outline-variant, #cec7ab) !important;
    border-bottom: none !important;
  }
  .pcont.active > .plist > .plist-ttl    { order: 1 !important; flex: 0 0 auto !important; }
  .pcont.active > .plist > .ptbl         { order: 2 !important; flex: 0 0 auto !important; }
  .pcont.active > .plist > .base-total   { order: 3 !important; flex: 0 0 auto !important; margin-top: 0 !important; }
  .pcont.active > .plist > .set-notes-disp { order: 4 !important; flex: 0 0 auto !important; }

  /* 右列: pslide — plistと同じ高さにstretch */
  .pcont.active > .pslide {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;   /* ← plistと同じ行高さ */
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    border-left: none !important;
  }
  /* slide-main: 残り高さを全部埋める（空白ゼロ） */
  .pcont.active > .pslide > .slide-main {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }
  .pcont.active > .pslide > .slide-thumbs { flex: 0 0 auto !important; }
  .pcont.active > .pslide > .c-sel        { flex: 0 0 auto !important; }
}

/* ── SP (〜768px): 縦積み ── */
@media (max-width: 768px) {
  .pcont.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* plist が上 */
  .pcont.active > .plist {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: none !important;
    border-bottom: 1px solid var(--outline-variant, #cec7ab) !important;
  }
  .pcont.active > .plist > .plist-ttl    { order: 1 !important; flex: 0 0 auto !important; }
  .pcont.active > .plist > .ptbl         { order: 2 !important; flex: 0 0 auto !important; }
  .pcont.active > .plist > .base-total   { order: 3 !important; flex: 0 0 auto !important; margin-top: 0 !important; }
  .pcont.active > .plist > .set-notes-disp { order: 4 !important; flex: 0 0 auto !important; }

  /* pslide が下 */
  .pcont.active > .pslide {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    border-top: 2px solid var(--outline-variant, #cec7ab) !important;
    border-left: none !important;
  }
  .pcont.active > .pslide > .slide-main {
    flex: 0 0 auto !important;
    min-height: 220px !important;
    max-height: 360px !important;
    height: auto !important;
  }
  .pcont.active > .pslide > .slide-thumbs { flex: 0 0 auto !important; }
  .pcont.active > .pslide > .c-sel        { flex: 0 0 auto !important; }
}

/* ============================================================
   REDESIGN 2026-04-06 — base-total ダークバー / grand-bar非表示
   / 写真エリア動的高さ調整
   ============================================================ */

/* ── grand-bar（オプション込み合計）を完全非表示 ── */
.grand-bar { display: none !important; }

/* ── base-total: ダーク背景バー（添付画像仕様） ── */
.base-total {
  background: var(--navy-d) !important;
  color: #fff !important;
  padding: 12px 14px !important;
  border-top: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}
.base-total .bt-lbl {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.55) !important;
}
.base-total .bt-items {
  font-size: 10px !important;
  color: rgba(255,255,255,.4) !important;
  margin-top: 1px !important;
}
.base-total .bt-amt {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 1px !important;
}
.base-total .bt-tax { display: none !important; }

/* ── PC: slide-thumbs を base-total と同じ高さに揃える ── */
/* JS側で動的に高さを設定するためのベーススタイル */
@media (min-width: 769px) {
  .pcont.active > .pslide > .slide-thumbs {
    /* JS で height を設定する。最小値だけCSSで保証 */
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 6px 8px !important;
    background: var(--g1) !important;
    border-top: 1px solid var(--g3) !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }
  /* slide-main は ptbl の高さに追従（JS で設定） */
  .pcont.active > .pslide > .slide-main {
    flex: 1 1 0 !important;
    min-height: 120px !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  /* slide-thumb サイズ調整 */
  .pcont.active > .pslide > .slide-thumbs .slide-thumb {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── SP: 縦積み順序 plist-ttl→ptbl→base-total→slide-main→slide-thumbs ── */
@media (max-width: 768px) {
  /* pslide内のslide-mainを先、thumbsを後 */
  .pcont.active > .pslide {
    display: flex !important;
    flex-direction: column !important;
  }
  .pcont.active > .pslide > .slide-main {
    order: 1 !important;
    flex: 0 0 auto !important;
    min-height: 200px !important;
    max-height: 340px !important;
  }
  .pcont.active > .pslide > .slide-thumbs {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    border-top: 1px solid var(--g3) !important;
    background: var(--g1) !important;
  }
  .pcont.active > .pslide > .c-sel {
    order: 3 !important;
    flex: 0 0 auto !important;
  }
}

/* ============================================================
   PATCH 2026-04-06 v2
   ① SP: slide-thumbs 中央寄せ
   ② SP: slide-main を正方形（1:1アスペクト比）
   ③ SP: PDFボタンをタイトル右上（pg-ttl-row の上部）へ
   ============================================================ */

/* ① SP: サムネイル中央寄せ */
@media (max-width: 768px) {
  .pcont.active > .pslide > .slide-thumbs {
    justify-content: center !important;
  }
}

/* ② SP: スライダーを正方形 */
@media (max-width: 768px) {
  .pcont.active > .pslide > .slide-main {
    /* 親幅=100vw相当なのでpaddingを差し引いた幅を高さとして使う */
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    min-height: unset !important;
    max-height: unset !important;
    height: auto !important;
  }
}

/* ③ SP: PDFボタンをタイトルブロック右上に配置
   pg-ttl-row を flex-column→ flex-row+wrap に戻してボタンを右上に置く */
@media (max-width: 768px) {
  .pg-ttl-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .pg-ttl-copy {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .pdf-ref-btn {
    flex-shrink: 0 !important;
    align-self: flex-start !important;   /* 右上（テキストの上端に揃える） */
    margin-top: 0 !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   PATCH: SP価格表示・サムネイル・行ハイライト
   ============================================================ */

/* ── 行ハイライト（サムネイルクリック連動） ── */
tr.pr.slide-hl td {
  background: #fffbe8 !important;
  transition: background 0.2s ease !important;
}
tr.pr.slide-hl td:not(.td-stat) {
  background: #fffbe8 !important;
}

/* ── SP: 価格の下1桁が切れる問題
   方針: table-layout:auto で列幅を内容に任せ、
   td-price と td-stat の間に gap を設け右詰めを保証 ── */
@media (max-width: 768px) {
  .ptbl {
    table-layout: auto !important;
    width: 100% !important;
  }
  /* ジャンルピル列: nowrap で縮める */
  .td-genre {
    white-space: nowrap !important;
    padding: 6px 2px 6px 6px !important;
    width: 1% !important;
  }
  /* 製品名列: flex で余白を全吸収 */
  .td-prod {
    padding: 6px 4px !important;
    min-width: 0 !important;
  }
  /* タグ列: SPでも表示（flex-wrap で折り返す） */
  .td-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 8px 8px 8px !important;
    overflow: visible !important;
  }
  /* 価格列: nowrap + 右に十分な余白 */
  .td-price {
    width: 1% !important;
    white-space: nowrap !important;
    text-align: right !important;
    padding: 6px 10px 6px 4px !important;
  }
  .prc {
    white-space: nowrap !important;
    font-size: 12px !important;
    letter-spacing: -0.3px !important;
  }
  /* ステータス+トグル列: nowrap で固定、左に余白 */
  .td-stat {
    width: 1% !important;
    white-space: nowrap !important;
    padding: 6px 8px 6px 2px !important;
  }
  /* stat 内の縦積みはそのまま、間隔だけ詰める */
  .stat-tog-wrap {
    gap: 3px !important;
  }
}

/* ============================================================
   FINAL PATCH 2026-04-06 v3
   1. サムネイル背景を常に白に（非active状態も含む）
   2. 価格の下1桁が切れる問題を最終修正
   3. 金額とトグルの間隔を確保
   ============================================================ */

/* ① サムネイル背景: 常に白 */
.slide-thumb,
.slide-thumb:not(.active),
.slide-thumbs .slide-thumb {
  background: #fff !important;
}
.slide-thumb.active {
  background: #fff !important;
  border-color: var(--navy, #343a40) !important;
  box-shadow: 0 0 0 2px rgba(52,58,64,.18) !important;
}

/* ② SP: 価格列の右端パディング確保（最終確定） */
@media (max-width: 768px) {
  .ptbl tr.pr:not(.meta-row) .td-price,
  .opt-ptbl tr.opr .td-price {
    padding-right: 10px !important;
    white-space: nowrap !important;
  }
  .ptbl tr.pr:not(.meta-row) .td-price .prc,
  .opt-ptbl tr.opr .td-price .prc {
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
  }
  /* ③ 金額とトグルの間隔 */
  .ptbl tr.pr:not(.meta-row) .td-stat,
  .opt-ptbl tr.opr .td-stat {
    padding-left: 6px !important;
    padding-right: 8px !important;
  }
}

/* mobile focus/scroll suppression for slide controls */
.slide-thumb,
.slide-arrow{
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
}
.slide-thumb:focus,
.slide-thumb:active,
.slide-arrow:focus,
.slide-arrow:active{
  outline: none !important;
}

/* PATCH 2026-04-08: レンズタブSP表示・横スクロール */
@media (max-width: 768px){
  .ltabs,
  #ltabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    width:100% !important;
    min-width:0 !important;
    padding-bottom:2px !important;
  }
  .ltabs::-webkit-scrollbar,
  #ltabs::-webkit-scrollbar{
    display:none !important;
  }
  .ltab{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
}


/* =====================================================
   FIX PATCH 2026-04-13 v2
   ===================================================== */

/* 1. 基本構成ラベルを大きく・uppercase解除 */
.plist-ttl {
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  padding: 10px 16px !important;
  text-transform: none !important;
}

/* 2. カメラ・レンズ選択欄の左端ボーダーを黄色統一 */
.sc#s2,
.sc#s3 {
  border-left: 4px solid var(--primary, #f9df00) !important;
}
.sc#s2.active,
.sc#s3.active {
  border-left: 4px solid var(--primary, #f9df00) !important;
}

/* 3. スマホ時の説明文調整 */
@media (max-width: 768px) {
  .pg-ttl-desc {
    font-size: 11px;
    margin-top: 6px;
  }
  .pdf-ref-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
}

/* 4. 検索結果テキスト：spanで「検索」「結果」に分割
      PCでは横並び「検索結果」、スマホでは縦2行 */
.res-ttl-l1,
.res-ttl-l2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--secondary, #343a40);
  letter-spacing: -0.01em;
  line-height: 1;
}
/* PC: 横並びで「検索結果」 */
.res-ttl {
  display: flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}
.res-ttl-l1::after {
  content: '';
}
/* スマホ: 縦2行 */
@media (max-width: 768px) {
  .res-ttl {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  .res-ttl-l1,
  .res-ttl-l2 {
    font-size: 22px !important;
    display: block !important;
    line-height: 1.15 !important;
  }
}

/* ══════════════════════════════════════
   スライダー IMAGE オーバーレイバッジ
   画像の右上に重ねて表示
   ══════════════════════════════════════ */
.slide-media-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* PC/タブレットでIMAGEバッジを確実に右上表示するためブロック化 */
.slide-media-wrap--block {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.slide-img-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(0,0,0,0.45);
  border-radius: 3px;
  padding: 2px 6px;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  line-height: 1.4;
}

/* ══════════════════════════════════════
   生産終了品・写真なし時のスライド表示
   製品名・バッジを明示
   ══════════════════════════════════════ */
.slide-nophoto-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy, #343a40);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  max-width: 90%;
  word-break: break-all;
}
.slide-nophoto-discon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--di, #c0392b);
  background: var(--di-b, #fdf0ee);
  border: 1px solid #e8c8c4;
  border-radius: 10px;
  padding: 2px 8px;
  margin-top: 4px;
}

/* ══════════════════════════════════════
   検索結果ヘッダー：「検索\n結果」を常に2行縦固定
   res-ttl を固定幅にして res-sub が横に展開しない問題を解消
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  .res-hd {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  /* 「検索\n結果」を常に縦2行・固定幅 */
  .res-ttl {
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .res-ttl-l1,
  .res-ttl-l2 {
    display: block !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }
  /* res-sub（カメラ+レンズ名）は残りの幅で折り返す */
  .res-sub {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    word-break: break-all !important;
    margin-top: 0 !important;
    align-self: center !important;
  }
}