:root{
  --paper:#f4f5f8; --card:#ffffff; --ink:#181c25; --sub:#66707f;
  --brand:#5646d4; --plus:#0a8a5b; --minus:#c8402f; --line:#e2e5ec;
  --amber:#a3690a;
  /* 余白スケール（4px基準）。個別に数値を書かず必ずここから選ぶ */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px;
  --sp6:24px; --sp7:32px; --sp8:40px; --sp9:48px;
  /* ページ左右の共通ガター。crumb/main/footer/見出しがこれ1つで揃う */
  --gutter:32px;
  /* .sec の内側パディング（フルブリード表がここから逆算して画面端まで抜ける） */
  --sec-pad:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:"IBM Plex Sans JP",sans-serif;background:var(--paper);color:var(--ink);line-height:1.7}
a{color:var(--brand)}
.num{font-family:"Roboto Condensed","IBM Plex Sans JP",sans-serif;font-feature-settings:'tnum' 1;letter-spacing:.01em}
.eyebrow{font-family:"Chakra Petch",sans-serif;font-size:.72rem;letter-spacing:.28em;color:var(--brand);text-transform:uppercase}

.review-bar{position:sticky;top:0;z-index:50;display:flex;gap:12px;align-items:center;
  background:var(--ink);color:#cfd4e0;font-size:.78rem;padding:7px 16px}
.review-bar .rb-label{font-family:"Chakra Petch",sans-serif;color:#8f86ec;letter-spacing:.2em}
.review-bar button{margin-left:auto;background:none;border:1px solid #444b5c;color:#cfd4e0;
  border-radius:4px;padding:3px 10px;font-size:.75rem;cursor:pointer}
.review-bar button:hover{border-color:#8f86ec;color:#fff}

.site-head{padding:18px 24px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;color:var(--ink)}
.brand b{font-family:"Chakra Petch",sans-serif;font-size:1.35rem;letter-spacing:.04em;color:var(--brand)}
.brand span{font-family:"Chakra Petch",sans-serif;color:var(--sub)}
.brand em{font-style:normal;font-family:"Chakra Petch",sans-serif;font-size:.62rem;letter-spacing:.3em;color:var(--sub);margin-left:14px}
.crumb{max-width:1080px;margin:0 auto;padding:var(--sp3) var(--gutter) 0;font-size:.78rem;color:var(--sub)}
.crumb a{color:var(--sub)}
main{max-width:1080px;margin:0 auto;padding:var(--sp2) var(--gutter) var(--sp9)}
.site-foot{max-width:1080px;margin:0 auto;padding:var(--sp5) var(--gutter) var(--sp8);font-size:.72rem;color:var(--sub);border-top:1px solid var(--line)}
/* 機種ページ最下部: メーカー公式リンク + 著作権表記(©) */
.machine-credit{max-width:1080px;margin:26px auto 0;padding:16px 24px 4px;border-top:1px solid var(--line)}
.mc-official{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--brand);text-decoration:none;font-weight:600}
.mc-official:hover{text-decoration:underline}
.mc-official .ext-i{margin-left:0}
.mc-copyright{margin-top:8px;font-size:.68rem;line-height:1.7;color:var(--sub)}

.m-head{padding:var(--sp8) 0 var(--sp6)}
.m-eye{max-width:480px;margin-bottom:14px}
.m-eye img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block;box-shadow:0 2px 12px rgba(20,28,50,.12)}
@media(max-width:640px){.m-eye{max-width:100%}}
.m-head h1{font-size:1.7rem;font-weight:700;letter-spacing:.01em;line-height:1.35;margin-top:var(--sp3);
  word-break:keep-all;overflow-wrap:anywhere}
.m-head .kana{font-size:.78rem;color:var(--sub);margin-top:var(--sp3)}
.axis-badge{font-size:.8rem;background:var(--brand);color:#fff;border-radius:4px;padding:2px 10px;margin-left:12px;vertical-align:middle;font-family:"IBM Plex Sans JP"}
.meta-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0}
.meta-chips li{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:.78rem;display:flex;flex-direction:column;min-width:96px}
.meta-chips span{color:var(--sub);font-size:.66rem}
.meta-chips b{font-weight:600}
.vtabs{display:flex;gap:6px;margin:20px 0 4px;flex-wrap:wrap}
.vtabs a{padding:9px 22px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;
  background:#eceef3;color:var(--sub);text-decoration:none;font-size:.88rem;font-weight:500}
.vtabs a.on{background:var(--card);color:var(--ink);font-weight:700;border-color:var(--brand);border-bottom:2px solid var(--card);position:relative;top:1px}
.vtabs a.cta{margin-left:auto;border-radius:8px;background:var(--brand);color:#fff;border-color:var(--brand);font-size:.8rem}
.vtabs a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.sec{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:var(--sp6) var(--sec-pad) var(--sp5);margin:var(--sp5) 0;position:relative}
.sec h2{font-size:1.05rem;font-weight:700;margin-bottom:14px;padding-left:10px;border-left:3px solid var(--brand)}
.sec h3{font-size:.88rem;font-weight:600;margin:10px 0 6px}
.sec-tag{position:absolute;top:-10px;left:14px;display:flex;gap:6px;align-items:center}
.sec-tag b{background:var(--ink);color:#fff;font-size:.68rem;border-radius:4px;padding:2px 8px;letter-spacing:.06em}
.src{font-style:normal;font-size:.66rem;border-radius:4px;padding:2px 8px;font-weight:600}
.src-input{background:#ece9fb;color:#4a3bbd}
.src-auto{background:#eceef3;color:#5a6372}
.src-analyzer{background:#e0f3ea;color:#076b46}
.src-score{background:#e3ecfb;color:#1d4fa8}
.src-block{background:#f7edd8;color:#8a5806}
.src-legacy{background:#f3f4f6;color:#6b7280;border:1px dashed #c6cbd4}
body.no-review .sec-tag,body.no-review .review-bar span,body.no-review .sec-note{display:none}
.sec-note{font-size:.74rem;color:var(--sub);border-top:1px dashed var(--line);margin-top:14px;padding-top:8px}
.spec-tbl{max-width:560px;table-layout:fixed}
.spec-tbl th{text-align:center}
.spec-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.spec-tbl td.lbl{white-space:nowrap;padding-right:12px}
.spec-notes{margin-top:10px}
.spec-notes p{font-size:.72rem;color:var(--sub);margin:2px 0;line-height:1.6}
.ifl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:8px 0}
.ifl-box{background:var(--bg-alt,#f4f6fa);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.ifl-label{font-weight:700;font-size:.78rem;color:var(--ink);margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.ifl-list{list-style:none;margin:0;padding:0;font-size:.82rem;line-height:1.7}
.ifl-list>li{position:relative;padding-left:14px}
.ifl-list>li::before{content:"・";position:absolute;left:0;color:var(--brand)}
.ifl-list ul{list-style:none;margin:2px 0 2px 6px;padding:0}
.ifl-list ul li{position:relative;padding-left:14px;color:var(--sub);font-size:.78rem}
.ifl-list ul li::before{content:"└";position:absolute;left:0;color:var(--sub)}

.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th{font-size:.72rem;color:var(--sub);font-weight:600;text-align:center;padding:6px 10px;border-bottom:2px solid var(--line);white-space:normal;word-break:keep-all;overflow-wrap:break-word;line-height:1.3}
th:first-child{text-align:left}
.rank-table th:nth-child(2){text-align:left}
td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
td.lbl{text-align:left;font-weight:500;font-size:.72rem}
td.rank{font-size:1rem;font-weight:600}
.plus{color:var(--plus)} .minus{color:var(--minus)} .dim{color:#b6bcc7}
tr.total td{background:#f6f5fd;font-weight:700;border-top:2px solid var(--brand)}
.rank-table .rel{display:block;font-size:.68rem;color:var(--sub);font-weight:400}
.zcell{position:relative;min-width:130px}
.zbar{position:absolute;left:8px;top:50%;transform:translateY(-50%);height:8px;border-radius:4px;background:linear-gradient(90deg,#c7c0f2,var(--brand));opacity:.35}
.zcell b{position:relative}

.ev-strip-wrap{margin:6px 0 18px}
.ev-strip{display:flex;height:38px;border-radius:6px;overflow:hidden;position:relative;border:1px solid var(--line)}
.ev-strip i{flex:1}
.strip-border{position:absolute;top:0;bottom:0;border-left:2px dashed var(--ink)}
.strip-border span{position:absolute;top:2px;left:6px;font-size:.66rem;background:var(--ink);color:#fff;border-radius:3px;padding:1px 6px;white-space:nowrap}
.strip-axis{display:flex;justify-content:space-between;font-size:.68rem;color:var(--sub);margin-top:4px}
.strip-legend{display:flex;gap:14px;font-size:.68rem;color:var(--sub);margin-top:6px;align-items:center}
.strip-legend i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.axis-label{font-size:.76rem;color:var(--sub);margin-bottom:8px}
.border-callout{font-size:.8rem;background:#f6f5fd;border:1px solid #d9d4f5;border-radius:6px;padding:8px 12px;margin-top:12px}

.score-cards,.cmp-cards{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.score-card{border:1px solid var(--line);border-radius:8px;padding:12px 18px;min-width:150px}
.score-card span{font-size:.7rem;color:var(--sub);display:block}
.score-card b{font-size:1.5rem;font-weight:600}
.score-card em{font-style:normal;font-size:.74rem;color:var(--sub);display:block}
.score-card i{font-style:normal;color:var(--amber);font-size:.8rem}
.cmp-card{border:1px solid var(--line);border-radius:8px;padding:12px 18px}
.cmp-card span{font-size:.7rem;color:var(--sub);display:block}
.cmp-card b{font-size:1.4rem}
.cmp-vs{color:var(--sub);font-size:.8rem}
.cmp-result{border:2px solid var(--plus);border-radius:8px;padding:12px 18px;background:#f2faf6}
.cmp-result span{font-size:.7rem;color:var(--plus);display:block;font-weight:600}
.cmp-result b{font-size:1.4rem}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two-col ul,.flow-list{padding-left:1.2em;font-size:.85rem}
.flow-list li{margin:2px 0}
.block-sample{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
.suggest-row{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:8px 0}
.suggest-row p{font-size:.76rem;color:var(--sub)}
.suggest-row img{max-width:180px;width:auto;height:auto;border-radius:6px;flex-shrink:0}
@media (max-width:720px){.suggest-row img{max-width:130px}}
.sg-grid{display:grid;gap:12px}
.sg-h2,.sg-v2{grid-template-columns:repeat(2,1fr)}
.sg-h3,.sg-v3{grid-template-columns:repeat(3,1fr)}
.sg-h4,.sg-v4{grid-template-columns:repeat(4,1fr)}
.sg-v5{grid-template-columns:repeat(5,1fr)}
.sg-v6{grid-template-columns:repeat(6,1fr)}
.sg-hcard{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:8px}
.sg-hcard img{width:min(320px,56%);height:auto;border-radius:6px;flex-shrink:0}
.sg-hcard .txt{min-width:0}
.sg-hcard b{display:block;font-size:.78rem;font-weight:600;line-height:1.4}
.sg-hcard p{font-size:.75rem;color:var(--sub);margin-top:2px;line-height:1.5}
.sg-card{border:1px solid var(--line);border-radius:8px;padding:8px}
.sg-card img{width:100%;height:auto;border-radius:6px;display:block}
.sg-card b{display:block;font-size:.78rem;font-weight:600;margin-top:6px;line-height:1.4}
.sg-card p{font-size:.75rem;color:var(--sub);margin-top:2px;line-height:1.5}
.sg-card .conf,.sg-hcard .conf{margin-left:6px;font-size:.68rem}
/* 期待度順・横ジグザグ（display=ladder・2026-07-24）: 上下2段互い違い（半列スパン）＝横幅約半分でスマホに収まる。
   右にいくほど期待度UP＝カード上端カラーバー+両端の低/高チップ+最下部の右向きグラデーション矢印ライン */
.sg-zig{display:grid;column-gap:8px;row-gap:10px;margin-top:4px;overflow-x:auto;padding-bottom:2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#b7a8ef transparent}
.sg-zig::-webkit-scrollbar{height:6px}
.sg-zig::-webkit-scrollbar-track{background:rgba(86,70,212,.08);border-radius:99px}
.sg-zig::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#8f7fe8,#5646d4);border-radius:99px}
.sg-lcard{position:relative;padding-top:12px;background:var(--card,#fff)}
.sg-rkbar{position:absolute;left:0;right:0;top:0;height:4px;border-radius:8px 8px 0 0}
.sg-lh{position:absolute;top:9px;right:6px;z-index:1;font-size:.68rem;font-weight:700;color:#fff;border-radius:4px;padding:1px 7px;letter-spacing:.08em;box-shadow:0 1px 4px rgba(20,26,44,.25)}
.sg-zline{display:block;height:12px;margin-top:2px;
  background:linear-gradient(90deg,#5b8fd6,#c9a52f,#3f9e6e,#d85868,#8f5fd6);
  clip-path:polygon(0 32%,94% 32%,94% 0,100% 50%,94% 100%,94% 68%,0 68%)}
table.sg-table{font-size:.8rem}
table.sg-table td{white-space:normal;text-align:left}
table.sg-table td.lbl{white-space:nowrap;width:1%;padding-right:18px}
@media (max-width:720px){
  .sg-h2,.sg-h3,.sg-h4{grid-template-columns:1fr}
  /* 縦カードのスマホ縮小は自動判定時のみ（.sg-x=表示形式を手動指定＝指定列数を全幅で維持・2026-07-23） */
  .sg-v2:not(.sg-x),.sg-v3:not(.sg-x),.sg-v4:not(.sg-x){grid-template-columns:repeat(2,1fr)}
  .sg-v5:not(.sg-x),.sg-v6:not(.sg-x){grid-template-columns:repeat(3,1fr)}
  .sg-hcard img{width:44%}
  .sg-grid{gap:8px}
}

/* 多列表（シナリオ一覧等・9列以上に自動付与）: 9px 下限 + 先頭列固定 + 横スクロール。scale 不使用 */
table.tbl-dense{font-size:10px}
table.tbl-dense th,table.tbl-dense td{padding:3px 5px}
table.tbl-sticky th:first-child,table.tbl-sticky td:first-child{
  position:sticky;left:0;background:var(--card);z-index:1;
  box-shadow:2px 0 0 var(--line)}
table.tbl-sticky thead th:first-child{background:#eef0f5}

/* 比率グラフ（ビルド時SVG・EChartsは不使用） */
/* セル内バー: セル端から 4px 内側・高さ 62% に収める＝隣セルのバーと視覚的に分離（2026-07-23） */
td.cellbar{background:linear-gradient(90deg,rgba(86,70,212,.18) var(--w),transparent var(--w)) no-repeat;
  background-size:calc(100% - 8px) 62%;background-position:4px 50%}
.hbar{width:100%;max-width:480px;display:block;margin:10px 0 4px}
.hb-lab{font-size:10px;fill:var(--sub)}
.hb-bar{fill:#5646d4;opacity:.72}
.hb-val{font-size:10px;fill:var(--ink);font-weight:600;font-family:"Roboto Condensed"}
/* 多系列SVGグラフ（vbar/shbar/svbar・2026-07-24） */
.svgc{max-width:560px}
.hb-seg{font-size:8.5px;fill:#fff;font-weight:600;font-family:"Roboto Condensed"}
.hb-val2{font-size:9px;fill:var(--ink);font-weight:600;font-family:"Roboto Condensed"}
.txt-block p{font-size:.86rem;line-height:1.8}
.txt-block p+p{margin-top:6px}
.txt-block::after{content:"";display:block;clear:both}
.txt-ul{margin:6px 0;padding-left:1.25em;list-style:disc}
.txt-ul li{font-size:.86rem;line-height:1.7;margin:3px 0}
.txt-ol{margin:6px 0;padding-left:1.45em;list-style:decimal}
.txt-ol li{font-size:.86rem;line-height:1.7;margin:3px 0}
.txt-ul li::marker{color:var(--brand,#6d28d9)}
.txt-block .txt-ul+p,.txt-block p+.txt-ul{margin-top:8px}
dl.terms{margin:8px 0;display:grid;grid-template-columns:auto 1fr;gap:1px 14px;align-items:baseline}
dl.terms dt{font-weight:600;color:#1f2a44;font-size:.84rem;padding:4px 0}
dl.terms dd{margin:0;color:#374151;font-size:.84rem;line-height:1.7;padding:4px 0}
dl.terms dt+dd{border-top:1px solid transparent}
@media(max-width:640px){dl.terms{grid-template-columns:1fr;gap:0}dl.terms dt{padding:6px 0 0}dl.terms dd{padding:2px 0 6px .9em}}
.ref-img{height:auto;border-radius:8px;border:1px solid var(--line)}
.ref-img.ref-left{float:left;margin:2px 14px 8px 0}
.ref-img.ref-right{float:right;margin:2px 0 8px 14px}
.ref-img.ref-half{width:50%}
.ref-img.ref-third{width:33%}
.ref-img.ref-quarter{width:25%}
.panel2{display:flex;gap:12px;align-items:flex-start;margin:8px 0 14px}
.panel-col{min-width:0}
.panel-1-1>.panel-col{flex:1 1 0}
.panel-2-1>.panel-col:first-child{flex:2 1 0}.panel-2-1>.panel-col:last-child{flex:1 1 0}
.panel-1-2>.panel-col:first-child{flex:1 1 0}.panel-1-2>.panel-col:last-child{flex:2 1 0}
.panel-3-2>.panel-col:first-child{flex:3 1 0}.panel-3-2>.panel-col:last-child{flex:2 1 0}
.panel-img{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);display:block;margin-bottom:8px}
.panel2 .tblu{margin:0}
.panel2 .panel-img+.tblu{margin-top:2px}
.txt-block a.ext{color:#2563eb;text-decoration:underline;text-underline-offset:3px;font-weight:500}
.txt-block a.ext:hover{color:#1d4ed8}
svg.ext-i{width:12px;height:12px;margin-left:3px;vertical-align:-1px;display:inline-block}
/* ── 小役カラーチップ（割当は管理画面「小役色設定」タブ＝MySQL yaku_colors が SSOT。
   ここはパレット15色の実体＝Blocks.jsx YAKU_PALETTE / YakuColor::COLORS と一致必須） ── */
.yk{font-weight:600;display:inline-block;padding:1px 8px;border-radius:5px;background:#eceef2}
.yk-gray-l{background:#eceef2}
.yk-gray-d{background:#d3d8e0}
.yk-sky{background:#dcf1fc}
.yk-blue{background:#bfdcfa}
.yk-yellow{background:#fdf3cd}
.yk-amber{background:#fce39d}
.yk-green-l{background:#ddf3e4}
.yk-green-d{background:#b7e7c8}
.yk-pink{background:#fce0eb}
.yk-red{background:#f9c9cd}
.yk-purple-l{background:#efe6fb}
.yk-purple-d{background:#dcc8f5}
.yk-orange-l{background:#fdeada}
.yk-orange-d{background:#f9d3ac}
.yk-rainbow{background:linear-gradient(90deg,#f9cdd3,#fbe3c4,#fdf3c4,#cdeecd,#c8e3fb,#e0cdf7)}
/* ── 記号セル（値セルの完全一致・中央配置+背景色。パレット15色= .yk-* と同期必須） ── */
td.sym{text-align:center;font-weight:700}
th.th-c{text-align:center}
td.tac{text-align:center}
/* 値セルの整列（表ごとに選択・既定 left）。td.num より後方＝優先。記号/ヒート列(td.tac)は対象外で中央維持 */
td.al-l{text-align:left}
td.al-c{text-align:center}
td.al-r{text-align:right}
/* 横スクロール表（scroll=True）: 自然幅・内容で改行しない・枠外はスクロール */
table.tbl-scroll{table-layout:auto;width:auto;min-width:100%}
table.tbl-scroll th,table.tbl-scroll td{white-space:nowrap}
/* 均等幅（table-layout:fixed）。記号表=ラベル列26%+値均等 / 数値表=全列均等（colgroupなし） */
table.tbl-eq{table-layout:fixed}
table.tbl-eq td.num{overflow:hidden;text-overflow:ellipsis}
/* fixed 表のラベル列・ヘッダーは半角スペースで折り返し（CJKは keep-all で分割しない・長すぎる時のみ break-word） */
table.tbl-eq td.lbl{white-space:normal;word-break:keep-all;overflow-wrap:break-word;line-height:1.35}
.sb-gray-l{background:#eceef2}
.sb-gray-d{background:#d3d8e0}
.sb-sky{background:#dcf1fc}
.sb-blue{background:#bfdcfa}
.sb-yellow{background:#fdf3cd}
.sb-amber{background:#fce39d}
.sb-green-l{background:#ddf3e4}
.sb-green-d{background:#b7e7c8}
.sb-pink{background:#fce0eb}
.sb-red{background:#f9c9cd}
.sb-purple-l{background:#efe6fb}
.sb-purple-d{background:#dcc8f5}
.sb-orange-l{background:#fdeada}
.sb-orange-d{background:#f9d3ac}
.sb-rainbow{background:linear-gradient(90deg,#f9cdd3,#fbe3c4,#fdf3c4,#cdeecd,#c8e3fb,#e0cdf7)}
/* ── リールブロック: 手順ol（図はステップに紐付け 1枚=横/2枚=矢印カラム）+ 左=配列/右=停止形2列 ── */
.reel-steps{list-style:none;margin:8px 0 14px;display:flex;flex-direction:column;gap:7px}
.reel-steps>li{font-size:.85rem;line-height:1.7}
.rs-no{color:var(--brand);font-weight:700;margin-right:6px}
.rs-one{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rs-one img{width:220px;max-width:46%;border:1px solid var(--line);border-radius:0}
.rs-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:6px 0 2px;max-width:560px}
.rs-flow img{display:block;width:100%;border:1px solid var(--line);border-radius:0}
.rs-arrow{color:var(--brand);display:flex}
.rs-arrow svg{width:22px;height:22px}
/* ── リールブロック: 左=リール配列 / 右=停止形 grid（配列を見ながら狙える）・画像は丸みなし ── */
.reelu{display:grid;grid-template-columns:33% 1fr;gap:16px;align-items:start;margin:10px 0 18px}
.reelu img{display:block;width:100%;height:auto;border-radius:0}
.reelu.reelu-solo{grid-template-columns:minmax(0,240px);justify-content:start}
.reel-mains{display:flex;gap:4px;align-items:flex-start}
.reel-mains img{flex:1 1 0;min-width:0}
.reelu .reel-main{border:1px solid var(--line)}
.reel-right>.bh5{margin:0 0 8px}
.reel-stops{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.reel-stops.reel-stops-wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:6px 0 16px}
.reel-stops.reel-stops-wide figure img{width:100%;height:auto;display:block}
.reel-stops figure{margin:0;padding:5px 5px 4px}
.reel-stops figure.sb-def{background:#eceef2}
.reel-stops figure img{border:1px solid var(--line)}
.reel-stops figcaption{margin-top:3px;text-align:center;font-size:.75rem;font-weight:700;color:#1f2a44}
/* ── YouTubeメンバー限定ブロック（ティーザー＋ボタン。本文は my.flick7 が会員判定して表示） ── */
.member-cta{margin:14px 0 18px;padding:18px 18px 16px;border-radius:14px;
  background:linear-gradient(180deg,#faf8ff 0%,#f3efff 100%);border:1px solid #ddd2f7}
.mem-lock{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;
  color:#7c3aed;background:#efe9ff;border-radius:20px;padding:3px 11px;letter-spacing:.02em}
.mem-lock-i{font-style:normal;font-size:.8rem}
.mem-teaser{margin:10px 0 14px;color:#3b3550;font-size:.94rem;line-height:1.8}
.mem-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;
  background:linear-gradient(135deg,#5646d4,#7c3aed);color:#fff;font-weight:700;font-size:.9rem;
  text-decoration:none;box-shadow:0 2px 12px rgba(88,70,212,.28)}
.mem-btn:hover{box-shadow:0 4px 18px rgba(88,70,212,.42)}
.mem-arrow{transition:transform .15s}
.mem-btn:hover .mem-arrow{transform:translateX(3px)}
/* ── 表内グループタイトル行（1セル行を自動判定・旧 data-title 由来） ── */
/* 端から端まで極淡背景の小見出し帯＋見出し風のグレー・バーアイコン（2026-07-20） */
tr.tgroup td{background:#f4f7fb;color:#33405c;font-weight:700;font-size:.78rem;text-align:left;
  padding:6px 12px 2px;border-bottom:1px solid var(--line)}
.mk-s{color:inherit}
/* 表内タイトル用グレーバー（見出し .hb 相当・グループ行=2本(H4相当)/キャプション=1本(H3相当)） */
.tgb{display:inline-block;width:3px;background:#9aa4b8;border-radius:1px;vertical-align:middle;margin-right:3px}
.tgb-m{height:13px;margin-right:7px}
.tgb-s{height:9px}
tr.tgroup .tgb{width:2px}  /* グループ行の2本バーは細め */
/* ── 表内タブ（row_tabs=区切り行をタブ化・縦長の表対策 2026-07-23） ── */
.ttab-bar{display:flex;flex-wrap:wrap;gap:5px;margin:8px 6px 4px}
.ttab-btn{border:1px solid var(--line);background:#f4f7fb;color:#33405c;font-weight:600;font-size:.74rem;
  padding:4px 12px;border-radius:99px;cursor:pointer;font-family:inherit;white-space:nowrap}
.ttab-btn.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.ttab-pane{display:none}
.ttab-pane.is-on{display:block}
/* ── 解析まとめ等のサブタブ（H2=タブ境界・タブ名=H2タイトル） ── */
.vtab-bar{display:flex;gap:6px;margin:26px 0 0;overflow-x:auto}
.vtab-btn{flex:1 1 0;min-width:76px;text-align:center;background:#e0e6f2;color:#55617a;font-weight:700;font-size:.9rem;padding:9px 12px;
  border:1px solid var(--line);border-bottom:none;cursor:pointer;white-space:nowrap;font-family:inherit}
.vtab-btn.is-on{background:var(--card);color:#1f2a44;border-top:3px solid var(--brand);padding-top:7px}
.vtab-pane{display:none}
.vtab-pane.is-on{display:block}
/* ── 解析ブロック レイアウト体系（2026-07-17 ユーザー確定）
   H2=端から端までの単独帯（背景色+白テキストの逆転） / H3=白カード先頭・バー1本
   H4=バー2本(小+中) / H5=バー3本(小小+小+中) ＝ バー本数が階層アイコン ── */
.sec>h2{padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:16px}
/* 見出し共通トーン: 薄い青系グレー背景 + 濃紺文字 + 角丸なし（EV Analyzerリンク紫との被り回避・
   表内グループ行 tr.tgroup と同じ色言語）。階層アイコン= H2:太ボーダー / H3〜H5:バー1〜3本 */
.bsec-band{background:#e0e6f2;color:#1f2a44;border-left:6px solid var(--brand);
  padding:9px 14px;font-size:1rem;font-weight:700;letter-spacing:.02em;margin:34px 0 4px}
.bh{line-height:1.5;display:flex;align-items:center;background:#e0e6f2;color:#1f2a44}
.hb{display:inline-block;width:3.5px;background:var(--brand);flex-shrink:0;margin-right:3px}
.hb-m{height:15px;margin-right:8px}
.hb-s{height:11px}
.hb-xs{height:7px}
.bh3{font-size:.95rem;font-weight:700;padding:7px 10px;margin:2px 0 12px}
.bh3 .hb-m{width:4px}
.bh4{font-size:.86rem;font-weight:700;padding:5px 10px;margin:22px 0 8px}
.bh5{font-size:.8rem;font-weight:600;padding:4px 10px;margin:16px 0 6px}
.bh5 .hb-m{height:13px}
.blk-sec .txt-block{margin:8px 0 14px}
/* 表ユニット: キャプション帯 + 表 + ※注釈 を1枠に（表とその説明の一体化） */
.tblu{margin:10px 0 18px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
/* 表キャプション(figcaption)=表タイトル: 端から端まで淡背景の帯＋グレーバー。
   グループ行 tr.tgroup(#f4f7fb) より一段強い #eef2f9＝2パターンの上位（2026-07-20） */
.tblu-cap{background:#eef2f9;margin:6px 6px;padding:4px 10px 2px;font-size:.84rem;font-weight:700;color:#33405c;border-bottom:1px solid var(--line)}
.tblu-cap .mk{color:inherit}
.tblu .tbl-wrap{margin:0}
.tblu-note{display:flex;align-items:flex-start;gap:6px;padding:7px 12px;font-size:.72rem;color:var(--sub);border-top:1px dashed var(--line)}
/* 2カラム表（tbl-slim）: 内容幅にフィット＝端から端に引き伸ばさない・ラベル/見出しは値と同じ通常サイズ（2026-07-21）
   セレクタ specificity をモバイル規則（td.lbl .68rem 等）より高くして全画面で有効 */
figure.tblu-slim{width:-moz-fit-content;width:fit-content;min-width:300px;max-width:100%;margin-left:0;margin-right:0;border-radius:8px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
table.tbl-slim{table-layout:auto}
table.tbl-slim td.lbl,table.tbl-slim th{font-size:.9rem;white-space:nowrap}
table.tbl-slim td.lbl{padding-right:26px}
@media(max-width:640px){table.tbl-slim td.lbl,table.tbl-slim th{font-size:.85rem}}
.note-i{width:12px;height:12px;flex-shrink:0;margin-top:2px;color:#8494b3}
.blk-heading{margin:22px 0 4px}
.blk-heading.h2{font-size:1.2rem;border-left:4px solid var(--brand);padding-left:12px}
.blk-heading.h3{font-size:1rem;color:var(--sub)}
.blk-heading.h4{font-size:.9rem;color:var(--sub);margin:18px 0 2px}
.blk-heading.h5{font-size:.84rem;color:var(--sub);opacity:.85;margin:14px 0 2px}
.inline-tag{position:static;display:inline-flex;gap:6px;margin-top:10px}
.img-ph{width:88px;height:56px;border-radius:6px;background:repeating-linear-gradient(45deg,#eceef3,#eceef3 6px,#f6f7fa 6px,#f6f7fa 12px);
  display:flex;align-items:center;justify-content:center;font-size:.66rem;color:var(--sub);flex-shrink:0}
.conf{margin-left:auto;font-size:.72rem;color:var(--amber);white-space:nowrap}
.empty-state{border:1px dashed #c6cbd4;border-radius:8px;padding:18px;font-size:.82rem;color:var(--sub);background:#fafbfc}
.reset-note p{font-size:.85rem}
.upd-list{list-style:none}
.upd-list li{display:flex;gap:10px;font-size:.82rem;padding:6px 0;border-bottom:1px solid var(--line)}
.upd-list time{color:var(--sub);font-family:"Roboto Condensed";min-width:74px}
.upd-list i{font-style:normal;color:var(--brand);font-size:.74rem;white-space:nowrap}
.rel-list{list-style:none;font-size:.85rem}
.rel-list li{padding:7px 0;border-bottom:1px solid var(--line)}
.tag{font-size:.66rem;border-radius:3px;padding:2px 7px;margin-right:8px;color:#fff}
.tag.yt{background:#c00} .tag.note{background:#2cb696}
td.star{color:var(--amber);font-size:.8rem;letter-spacing:.06em}
.placement-banner{background:#fdf6e7;border:1px solid #e8d5a8;border-radius:8px;padding:10px 14px;font-size:.8rem;margin:14px 0 4px;color:#6b4e08}
.formula-box{font-size:.85rem;background:#f6f7fa;border-radius:8px;padding:14px 16px}
.formula-box p+p{margin-top:6px;font-size:.78rem;color:var(--sub)}
.idx-list,.legend{list-style:none;font-size:.88rem}
.idx-list li{padding:8px 0;border-bottom:1px solid var(--line)}
.idx-list b{font-family:"Chakra Petch";color:var(--sub);font-size:.76rem;margin-right:10px}
.how-list{padding-left:1.4em;font-size:.86rem}
.how-list li{margin:4px 0}
.legend{margin-top:12px}
.legend li{display:flex;gap:10px;align-items:center;padding:4px 0;font-size:.78rem;color:var(--sub)}

@media (max-width:720px){
  /* モバイルはガターを詰める。表のフルブリードはこの2値から逆算されるので個別調整は不要 */
  :root{--gutter:12px; --sec-pad:8px}
  html{font-size:14px;-webkit-text-size-adjust:100%}
  main{padding:var(--sp2) var(--gutter) var(--sp9)}
  .crumb{padding:10px var(--gutter) 0}
  .sec{padding:var(--sp4) var(--sec-pad) var(--sp3);border-radius:8px}
  .m-head{padding:var(--sp7) 0 var(--sp5)}
  .two-col{grid-template-columns:1fr}
  .vtabs a{padding:8px 12px;font-size:.8rem}
  .vtabs a.cta{margin-left:0}
  .meta-chips li{min-width:calc(33% - 8px)}
  /* 表はセクション余白ぶんだけフルブリード＝**カードの内側いっぱい**まで。
     ⚠ ここに --gutter を足すと表がカード（白枠）の外へ 12px はみ出し、
       右端の列が枠に食い込んで「表が崩れて」見える（2026-07-28 ユーザー指摘・実害）。
       横幅が足りない表は .tbl-wrap の overflow-x:auto で横スクロールさせる。 */
  .tbl-wrap{margin-left:calc(-1 * var(--sec-pad));margin-right:calc(-1 * var(--sec-pad))}
  .tblu{margin-left:calc(-1 * var(--sec-pad));margin-right:calc(-1 * var(--sec-pad));border-radius:0;border-left:none;border-right:none}
  .reelu{grid-template-columns:33% 1fr;gap:8px}
  .reel-stops{grid-template-columns:repeat(2,1fr);gap:6px}
  .reel-stops figure{padding:3px 3px 2px}
  .reel-stops figcaption{font-size:.68rem}
  .tblu .tbl-wrap{margin-left:0;margin-right:0}
  /* スマホの表サイズ設計（2026-07-17 ユーザー確定）:
     値=.85rem / タイトル(th・td.lbl)=.68rem / padding 横3px
     → ラベル7字 + 「12.3%」×7列 = 計8列 ≈355px が 390px端末で折返しなし
     （Roboto Condensed 数字幅0.494em 実測ベース。EV Analyzer より列数が少ないぶん値を大きく） */
  table{font-size:.85rem}
  th{font-size:.68rem}
  td.lbl{font-size:.68rem}
  th,td{padding:4px 3px}
  /* 左端セル（項目名）は左に 6px 取る。右 12px / 左 3px は見た目が明らかに片寄る
     （2026-07-28 ユーザー確定＝ td.lbl は 4px 9px 4px 6px）。
     ⚠ .spec-tbl td.lbl は padding-right:12px を持つので specificity を合わせて上書きする */
  th:first-child,td:first-child{padding-left:6px}
  td.lbl,.spec-tbl td.lbl{padding-right:9px}
  .yk{padding:1px 5px}
  table.tbl-dense{font-size:9px}
  table.tbl-dense th,table.tbl-dense td{padding:2px 3px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}