
:root{
  --paper:#f4f5f8; --card:#ffffff; --ink:#181c25; --sub:#66707f;
  --brand:#5646d4; --plus:#0a8a5b; --minus:#c8402f; --line:#e2e5ec;
  --amber:#a3690a;
}
*{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:12px 24px 0;font-size:.78rem;color:var(--sub)}
.crumb a{color:var(--sub)}
main{max-width:1080px;margin:0 auto;padding:8px 24px 64px}
.site-foot{max-width:1080px;margin:0 auto;padding:20px 24px 40px;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:26px 0 6px}
.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:6px;
  word-break:keep-all;overflow-wrap:anywhere}
.m-head .kana{font-size:.78rem;color:var(--sub);margin-top:2px}
.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:22px 24px 18px;margin:18px 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){
  html{font-size:14px;-webkit-text-size-adjust:100%}
  main{padding:8px 6px 48px}
  .crumb{padding:10px 8px 0}
  .sec{padding:14px 8px 12px;border-radius:8px}
  .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)}
  /* 表はフルブリード（セクション余白を突き破り実効幅≈画面-12px。8列表を画面内に収めるため） */
  .tbl-wrap{margin-left:-8px;margin-right:-8px}
  .tblu{margin-left:-8px;margin-right:-8px;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}
  .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}}

/* 機種ページタブ（設定狙い/天井狙い/朝一狙い/解析情報）均等幅（2026-07-23） */
.vtabs{flex-wrap:nowrap}
.vtabs a{flex:1 1 0;text-align:center;padding:9px 6px;white-space:nowrap}
.brand-logo{width:36px;height:36px;align-self:center;margin-right:8px}
.brand em{font-family:"IBM Plex Sans JP",sans-serif;font-weight:500;font-size:.68rem;letter-spacing:.14em;margin-left:2px;color:var(--ink)}
.top-hero{display:flex;align-items:center;gap:16px}
.hero-logo{width:64px;height:64px;flex:none}
.top-hero-tx h1{margin-top:0;font-size:1.42rem}
@media (max-width:640px){.hero-logo{width:48px;height:48px}.top-hero{gap:11px}.top-hero-tx h1{font-size:1.08rem}.top-hero-tx .kana{font-size:.72rem}
.uf-chips-tight{flex-wrap:nowrap;gap:4px}
.uf-chips-tight .uf-chip{flex:1 1 0;padding:5px 0;text-align:center;white-space:nowrap;font-size:.66rem}}
.ev-cta{display:inline-block;margin:14px 0 2px;padding:9px 16px;border-radius:8px;background:linear-gradient(135deg,#16161f 0%,#1e1c38 55%,#2a2050 100%);border:1px solid rgba(168,85,247,.45);color:#fff;font-weight:700;font-size:.85rem;text-decoration:none;box-shadow:0 2px 10px rgba(123,111,240,.22)}
.ev-cta:hover{box-shadow:0 3px 18px rgba(123,111,240,.42)}
.coming-soon{font-size:.86rem;color:var(--sub);background:#f6f5fd;border:1px dashed #cfc7ee;border-radius:8px;padding:14px 16px;margin-top:4px}
.coming-soon b{color:var(--brand)}
td.evbar,td.pbar{padding:6px 12px}
.rel-h{font-size:.88rem;font-weight:600;margin-bottom:6px}
.rel-banner{margin-top:14px}
.rel-banner a{display:inline-block;text-decoration:none}
.rel-banner img{width:100%;max-width:640px;height:auto;border-radius:10px;display:block;border:1px solid var(--line)}
.rel-banner span{display:block;font-size:.76rem;color:var(--sub);margin-top:6px}
.nb-badges{display:flex;gap:8px;margin-bottom:10px}
.nb-badge{font-size:.72rem;font-weight:600;background:#ece9fb;color:#4a3bbd;border-radius:5px;padding:3px 10px}
.ev-mark{font-family:"Chakra Petch";font-size:.6rem;background:#e0f3ea;color:#076b46;border-radius:3px;padding:1px 5px;margin-left:8px;vertical-align:middle}
.views a{font-size:.74rem;margin-right:10px}
td.views{text-align:left}
.upd-pub{font-style:normal;font-size:.68rem;background:#ece9fb;color:#4a3bbd;border-radius:3px;padding:1px 7px;white-space:nowrap}
/* 基本指標分析（設定狙いページ・2026-07-21） */
.bm-legend{font-size:.72rem;color:#667;background:#f2f5fa;border-radius:8px;padding:8px 12px;margin-bottom:10px;line-height:1.7}
.bm-h{display:flex;align-items:center;font-size:.8rem;font-weight:700;color:#1f2a44;background:#eef2f9;padding:5px 10px 3px;margin:14px 0 2px;border-bottom:1px solid #dfe5ef}
.bm-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px dashed var(--line)}
.bm-name{flex:0 0 148px;font-size:.74rem;font-weight:600;color:#1f2a44}
.bm-val{display:block;font-size:.95rem;color:#111;margin-top:1px}
.bm-scale{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.bm-side{flex:0 0 108px;font-size:.64rem;color:#667;text-align:right;line-height:1.3}
.bm-side.r{text-align:left}
.bm-track{position:relative;flex:1;height:10px;background:linear-gradient(90deg,#eef1f6,#e6eaf2 50%,#eef1f6);border-radius:5px;min-width:60px}
.bm-mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:#9aa4b8;border-radius:1px}
.bm-dot{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--brand);border:2.5px solid #fff;box-shadow:0 1px 5px rgba(31,42,68,.35);transform:translate(-50%,-50%)}
.bm-rank{flex:0 0 74px;text-align:right;font-size:.88rem;color:#1f2a44;font-weight:600}
.bm-rank .bm-n{font-size:.62rem;color:#667;font-weight:400}
.bm-rank em{display:block;font-style:normal;font-size:.64rem;color:#8a93a6;font-weight:400}
.bm-feature{margin-top:18px;background:linear-gradient(135deg,#f6f3ea,#fdfbf5);border:1px solid #e7ddc2;border-radius:10px;padding:12px 14px}
.bm-feature-h{font-size:.86rem;font-weight:700;color:#6b5b1e;margin-bottom:10px}
.bm-feature-h span{display:block;font-size:.64rem;font-weight:400;color:#8a7c4d;margin-top:2px}
.bm-feature-grid{display:flex;flex-wrap:wrap;gap:10px}
.bm-fcard{flex:1 1 150px;background:#fff;border:1px solid #eee4c8;border-radius:8px;padding:10px 12px;text-align:center}
.bm-fcap{font-size:.68rem;font-weight:600;color:#6b5b1e}
.bm-fscore{font-size:1.7rem;font-weight:700;color:#8a6d1a;line-height:1.2;margin:2px 0}
.bm-fsub{font-size:.66rem;color:#77704f;line-height:1.6}
@media(max-width:640px){
.bm-name{flex-basis:104px;font-size:.68rem}.bm-val{font-size:.85rem}
.bm-side{flex-basis:64px;font-size:.56rem}.bm-rank{flex-basis:58px;font-size:.8rem}
.bm-row{gap:7px}}
/* ── トップハブ（タブ・新着帯・更新フィード）2026-07-22 ── */
.hub-tabs{display:flex;gap:6px;margin:14px 0 4px;border-bottom:2px solid #dfe5ef}
.hub-tab{flex:1 1 0;text-align:center;padding:9px 12px 7px;font-size:.88rem;font-weight:700;color:#5a6478;text-decoration:none;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0}
.hub-tab.on{background:#e0e6f2;color:#1f2a44;border-color:#dfe5ef;position:relative}
.hub-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#e0e6f2}
.hub-tab:not(.on):hover{background:#eef2f9;color:#1f2a44}
.hub-subs{display:flex;gap:6px;margin:10px 0 2px;flex-wrap:wrap}
.hub-sub{padding:5px 14px;font-size:.76rem;font-weight:600;color:#5a6478;text-decoration:none;border:1px solid #dfe5ef;border-radius:99px;background:#fff}
.hub-sub.on{background:#1f2a44;color:#fff;border-color:#1f2a44}
.ns-sec{overflow:visible}
.newstrip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#b7a8ef transparent;cursor:grab}
.newstrip.dragging{cursor:grabbing;user-select:none}
.newstrip.dragging .ns-card{pointer-events:none}
.newstrip::-webkit-scrollbar{height:6px}
.newstrip::-webkit-scrollbar-track{background:rgba(86,70,212,.08);border-radius:99px}
.newstrip::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#8f7fe8,var(--brand));border-radius:99px}
.newstrip::-webkit-scrollbar-thumb:hover{background:var(--brand)}
.ns-card{flex:0 0 176px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:box-shadow .15s}
.ns-card:hover{box-shadow:0 3px 14px rgba(31,42,68,.14)}
.ns-img{aspect-ratio:2/1;background:#eef1f6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ns-img img{width:100%;height:100%;object-fit:cover;display:block}
.ns-noimg{font-size:.7rem;color:#8a93a6;padding:0 8px;text-align:center}
.ns-t{font-size:.72rem;font-weight:600;color:#1f2a44;padding:7px 9px 2px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.ns-sub{font-size:.64rem;color:#8a93a6;padding:0 9px 8px}
.uf-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px;align-items:center}
.uf-chip{padding:5px 12px;font-size:.72rem;font-weight:600;color:#5a6478;border:1px solid #dfe5ef;border-radius:99px;background:#fff;cursor:pointer}
.uf-chip.on{background:#1f2a44;color:#fff;border-color:#1f2a44}
.uf-list{display:flex;flex-direction:column}
.uf-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px dashed var(--line);text-decoration:none;color:#1f2a44}
.uf-row:hover{background:#f4f7fb}
.uf-date{flex:0 0 44px;font-size:.78rem;color:#8a93a6}
.ub{flex:0 0 4rem;width:4rem;text-align:center;font-size:.64rem;font-weight:700;padding:3px 0;border-radius:5px;white-space:nowrap}
.ub-new{background:#ffe9d4;color:#b45f10}
.ub-analysis{background:#fdf3c8;color:#8a6d05}
.ub-challenge{background:#fce4ef;color:#bc2f6e}
.ub-ceiling{background:#e2f6e9;color:#177245}
.ub-reset{background:#dff2fb;color:#13678a}
.ub-other{background:#eef1f6;color:#5a6478}
.uf-name{font-size:.8rem;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uf-note{font-size:.7rem;color:#8a93a6;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto;text-align:right;flex:1}
.uf-empty{font-size:.78rem;color:#8a93a6;padding:14px 4px}
.sc-q{width:100%;max-width:460px;padding:10px 14px;font-size:.92rem;border:1px solid #cbd4e4;border-radius:10px;margin-bottom:10px}
.sc-q:focus{outline:2px solid #b9c6e8}
.sc-flabel{font-size:.68rem;font-weight:700;color:#8a93a6;margin-right:2px}
.sc-mk{padding:6px 10px;font-size:.76rem;border:1px solid #dfe5ef;border-radius:8px;background:#fff;color:#1f2a44}
.sc-count{font-size:.74rem;color:#8a93a6;margin:2px 0 6px}
.sns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.sns-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;transition:box-shadow .15s}
.sns-card:hover{box-shadow:0 3px 14px rgba(31,42,68,.14)}
.sns-t{font-size:.88rem;font-weight:700;color:#1f2a44;margin-bottom:6px}
.sns-card p{font-size:.72rem;color:#5a6478;line-height:1.7;margin:0}
.sns-soon{opacity:.75;border-style:dashed}
/* EV Analyzer カード = ライト紙面に開く「ダーク分析ターミナルへの窓」（EV本体の Midnight トークンを流用） */
.sns-ev{position:relative;overflow:hidden;background:linear-gradient(150deg,#16161f 0%,#1b1a2e 52%,#241d3f 100%);border-color:#2c2a45}
.sns-ev::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 95% at 88% -12%,rgba(168,85,247,.30),transparent 55%);pointer-events:none}
.sns-ev::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#7b6ff0,#c084fc 45%,transparent 85%)}
.sns-ev .sns-t{color:#fff}
.sns-ev p{color:#b6bdd1}
.sns-ev .ext-i{opacity:.85}
.sns-ev:hover{box-shadow:0 6px 24px rgba(123,111,240,.38)}
.sns-ev-tag{display:block;font-family:'Chakra Petch',monospace;font-size:.58rem;letter-spacing:.22em;color:#c084fc;margin-bottom:7px;position:relative}
.sns-ev-logo{width:34px;height:34px;flex:0 0 34px;margin-right:10px;object-fit:contain}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.foot-links a{color:#5a6478;text-decoration:none;font-weight:600}
.foot-links a:hover{color:#1f2a44;text-decoration:underline}
.ct-btn{display:inline-block;background:var(--brand);color:#fff;font-weight:700;font-size:.88rem;padding:11px 22px;border-radius:9px;text-decoration:none}
.ct-btn:hover{opacity:.92}
.ct-mail{margin:6px 0 12px}
.ct-note{font-size:.8rem;line-height:1.9;color:#3a4358}
.sns-chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:#fff;font-size:.82rem;font-weight:700;margin-right:9px;vertical-align:middle;flex:0 0 30px}
.sns-chip svg{width:17px;height:17px;display:block}
.sns-chip-img{background:#fff;border:1px solid #e4e8f0;object-fit:contain;padding:2px}
.ev-cta-logo{height:20px;width:20px;vertical-align:-5px;margin-right:8px}
.sns-card .sns-t{display:flex;align-items:center}
.sr-th{width:72px;height:36px;object-fit:cover;border-radius:5px;flex:0 0 72px;background:#eef1f6;display:inline-flex;align-items:center;justify-content:center}
.sr-noimg{font-size:.6rem;color:#b0b8c8}
@media(max-width:640px){.sr-th{width:56px;height:28px;flex-basis:56px}}
/* ボトムナビ（全デバイス表示・2026-07-26: PCでもマイページ等へ行けるよう常時表示。移動=ボトムナビ / 現在地=上部ハブタブ で併存）
   PC=アイテム中央寄せ / モバイル=端から端まで（下記メディアクエリで flex:1） */
body.has-bn main{padding-bottom:68px}
.bottom-nav{display:flex;justify-content:center;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid #dfe5ef;box-shadow:0 -2px 10px rgba(31,42,68,.08)}
.bn-item{flex:0 1 150px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 max(8px, env(safe-area-inset-bottom));text-decoration:none;color:#8a93a6}
.bn-item svg{width:21px;height:21px}
.bn-item span{font-size:.62rem;font-weight:600}
.bn-item.on{color:var(--brand)}
@media(max-width:768px){
.hub-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:4px}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-tab{padding:8px 13px 6px;font-size:.8rem;white-space:nowrap}
.bottom-nav{justify-content:stretch}
.bn-item{flex:1 1 0}
.bn-item span{font-size:.58rem}
}
.upd-upd{font-style:normal;font-size:.68rem;background:#e0f3ea;color:#076b46;border-radius:3px;padding:1px 7px;white-space:nowrap}
/* タブ下の更新情報: 最終更新日（常時）+ 折りたたみ履歴5件（2026-07-20・ページ単位） */
.page-upd{margin:10px 0 2px;font-size:.82rem}
.page-upd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;color:var(--sub);
  background:#f4f7fb;border:1px solid var(--line);border-radius:6px;padding:5px 12px;user-select:none}
.page-upd>summary::-webkit-details-marker{display:none}
.page-upd>summary time{color:var(--ink);font-weight:700;font-family:"Roboto Condensed"}
.page-upd .pu-more{font-size:.72rem;color:var(--brand)}
.page-upd .pu-more::before{content:'▸ ';font-size:.9em}
.page-upd[open] .pu-more::before{content:'▾ '}
.page-upd .upd-list{margin:8px 0 0;padding:8px 12px;background:#fafbfd;border:1px solid var(--line);border-radius:6px;max-width:560px}
/* EV Analyzer 切替バナー（3弾クロスフェード・15秒周期・prefers-reduced-motion 対応） */
.rel-banner .evb-rot{position:relative;display:block;width:100%;max-width:640px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#070812;text-decoration:none}
.rel-banner .evb-rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;opacity:0;animation:evb-cf 15s infinite}
.rel-banner .evb-rot img:nth-child(2){animation-delay:5s}
.rel-banner .evb-rot img:nth-child(3){animation-delay:10s}
@keyframes evb-cf{0%{opacity:0}6.7%{opacity:1}33.3%{opacity:1}40%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.rel-banner .evb-rot img{animation:none;opacity:0}.rel-banner .evb-rot img:first-child{opacity:1}}
