:root{
  --cw:204px; --ch:272px; --R:650px; --P:1500px; --pop:30px;
  --glass:color-mix(in srgb,var(--ink) 6%,transparent);
  --glass-2:color-mix(in srgb,var(--ink) 10%,transparent);
  --shade:color-mix(in srgb,var(--bg0) 45%,transparent);
  --shadow:color-mix(in srgb,var(--strip-bg) 70%,transparent);
  --vc:var(--v-wait);
}
[data-v="buy"]{--vc:var(--v-buy)} [data-v="wait"]{--vc:var(--v-wait)} [data-v="skip"]{--vc:var(--v-skip)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--font);line-height:1.65;
  background:
    radial-gradient(900px 520px at 78% 8%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 62%),
    radial-gradient(800px 600px at 8% 28%,color-mix(in srgb,var(--acc2) 22%,transparent),transparent 62%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 55%,var(--bg0));
  background-color:var(--bg0);
  overflow-x:clip;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 3.5%,transparent) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(-45deg,color-mix(in srgb,var(--ink) 3.5%,transparent) 0 1px,transparent 1px 34px);
}
img{display:block;max-width:100%;height:auto}
a{color:var(--acc)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 16px}


.site{position:relative;z-index:2;background:var(--site-bar);border-top:3px solid var(--orange);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:16px;height:54px}
.logo{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;flex:none}
.logo .mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--amber),var(--orange));display:grid;place-items:center;font-weight:900;font-size:20px;color:var(--ink-dark);box-shadow:0 2px 0 color-mix(in srgb,var(--orange) 60%,var(--ink-dark))}
.logo b{display:block;font-size:20px;font-weight:900;line-height:1.1;letter-spacing:.02em}
.logo small{display:block;font-size:10px;font-weight:500;opacity:.8;letter-spacing:.04em}
.pill{flex:none;margin-left:auto;background:var(--orange);color:var(--ink-dark);font-weight:900;font-size:12px;line-height:1.15;border-radius:22px;padding:4px 12px;white-space:nowrap;text-align:center}
.pill small{display:block;font-size:10px;font-weight:700;opacity:.85}
.tabs{background:var(--site-tabs);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .wrap{display:flex;white-space:nowrap}
.tabs a{color:var(--mut);text-decoration:none;font-size:13px;font-weight:700;padding:12px 16px;border-bottom:3px solid transparent}
.tabs a.on{color:var(--ink);border-bottom-color:var(--orange);background:var(--glass)}


.cstrip{position:relative;z-index:2;display:flex;align-items:stretch;background:var(--strip-bg);border-radius:12px;overflow:hidden;}
.cstrip-h{flex:none;background:linear-gradient(160deg,var(--amber),var(--orange));color:var(--ink-dark);display:flex;flex-direction:column;justify-content:center;font-weight:700}
.cstrip-h b{font-weight:900;}
.cstrip-v{flex:1;min-width:0;overflow:hidden;}
.cstrip-t{display:flex;gap:8px;width:max-content;animation:slide 70s linear infinite}
.cstrip-t figure{flex:none;width:136px;margin:0}
.cstrip-t img,.cstrip-t .noart{width:136px;border-radius:3px;border:2px solid var(--ink)}
.cstrip-t figcaption{font-size:10px;line-height:1.3;color:var(--mut);margin-top:2px}
@keyframes slide{to{transform:translateX(-50%)}}


.noart{position:relative;width:100%;aspect-ratio:800/419;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8% 9%;
  background:
    repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 7%,transparent) 0 2px,transparent 2px 14px),
    linear-gradient(135deg,var(--cc,var(--cat-business)),color-mix(in srgb,var(--cc,var(--cat-business)) 45%,var(--bg0)));
  color:var(--ink)}
.noart .na-c{font-size:12px;font-weight:700;letter-spacing:.08em;opacity:.85}
.noart .na-t{font-family:var(--disp);font-weight:400;font-size:1em;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;overflow-wrap:anywhere}

.mc-art .noart{font-size:12px;height:100%;padding:4px}
.mc-art .noart .na-c{display:none}
.mc-art .noart .na-t{line-height:1.3;-webkit-line-clamp:2;line-clamp:2}
.tr .noart{font-size:12px;padding:5%}
.minir .noart{font-size:12px;padding:5%}
.tr .noart .na-c,.minir .noart .na-c{display:none}
.tr .noart .na-t,.minir .noart .na-t{font-size:12px;line-height:1.3;-webkit-line-clamp:2;line-clamp:2}
.c-art .noart .na-c{display:none}
.cstrip-t .noart{padding:5%}


.hero{position:relative;z-index:1;grid-template-areas:"head" "stage" "info"}
.head{grid-area:head;min-width:0}
.cstage{grid-area:stage}
.info{grid-area:info;min-width:0}
.prtop{color:var(--ink)}
.prl{margin:0;font-size:13px;line-height:1.4;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.crumb{color:var(--mut);}
.crumb a{color:var(--mut);text-decoration:none;display:inline-block;padding:14px 6px 2px;margin:-14px -6px -2px}
.crumb a:hover{text-decoration:underline}
h1{font-family:var(--disp);font-weight:400;letter-spacing:.01em;text-shadow:0 2px 24px var(--shadow);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.byline{color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;}
.byline .sl{font-weight:700;color:var(--mut)}
.byline b{font-family:var(--disp);font-weight:400;}
.byline b small{font-family:var(--font);margin-left:4px;color:var(--mut)}
.tagline{font-weight:700;color:var(--acc);letter-spacing:.03em}

.cstage{display:flex;flex-direction:column;align-items:center;}
.card-btn{all:unset;display:block;width:100%;max-width:360px;cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:1400px}
.card-btn{scroll-margin-top:12px}
.card-btn:focus-visible{outline:3px solid var(--acc);outline-offset:6px;border-radius:22px}
.card{
  --rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  position:relative;display:grid;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.card.tilting{transition:transform .08s linear}

.face{grid-area:1/1;position:relative;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s linear .08s;
  background:conic-gradient(from 210deg at 50% 50%,var(--rim-1),var(--rim-2),var(--rim-3),var(--rim-4),var(--rim-1));
  box-shadow:0 30px 60px -18px var(--shadow),0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent) inset,0 0 44px color-mix(in srgb,var(--acc) 22%,transparent)}
.face.back{position:absolute;inset:0;grid-area:auto}
.face.front{transform:perspective(1400px) rotateY(0deg);visibility:visible}
.face.back{transform:perspective(1400px) rotateY(180deg);visibility:hidden}
.card.flipped .face.front{transform:perspective(1400px) rotateY(-180deg);visibility:hidden}
.card.flipped .face.back{transform:perspective(1400px) rotateY(0deg);visibility:visible}
.face .in{position:relative;height:100%;border-radius:16px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--card-in-1),var(--card-in-2));box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent) inset}
.holo{position:absolute;inset:0;border-radius:22px;pointer-events:none;mix-blend-mode:color-dodge;opacity:.42;
  background:linear-gradient(115deg,transparent 18%,color-mix(in srgb,var(--holo-1) 55%,transparent) 34%,color-mix(in srgb,var(--holo-2) 55%,transparent) 48%,color-mix(in srgb,var(--holo-3) 45%,transparent) 60%,transparent 76%);
  background-size:260% 260%;background-position:var(--mx) var(--my);animation:holo 7s ease-in-out infinite alternate}
@keyframes holo{from{background-position:0% 20%}to{background-position:100% 80%}}
.card.tilting .holo{animation:none}

.c-head{display:flex;align-items:center;justify-content:space-between;}
.c-no{font-family:var(--disp);color:var(--mut)}
.c-no small{font-family:var(--font);color:var(--dim)}
.c-cat{font-weight:700;border-radius:999px;background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc);white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.c-art{border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--bg1),0 6px 18px var(--shadow)}
.c-art img{object-fit:cover}

.c-judge{border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--vc) 20%,transparent),color-mix(in srgb,var(--vc) 6%,transparent));border:1px solid color-mix(in srgb,var(--vc) 50%,transparent)}
.jr{display:flex;align-items:center;min-width:0}
.jr .lab{font-weight:700;letter-spacing:.08em;color:var(--mut);flex:none}
.jr .vw{font-family:var(--disp);font-weight:400;color:var(--vc);flex:none}
.jr .vs{font-weight:700;color:var(--ink);min-width:0;}
.jr .gai{margin-left:auto;flex:none;font-weight:700;border:1px solid var(--mut);border-radius:999px;color:var(--mut);white-space:nowrap}
.gauge{display:grid;cursor:default;-webkit-user-select:none;user-select:none}
.gauge .g{display:block;font-weight:700;color:var(--dim);text-align:center;cursor:default}
.gauge .g::before{content:"";display:block;border-radius:3px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.gauge .g.on{color:var(--ink);font-weight:900}
.gauge .g-buy.on::before{background:var(--v-buy)} .gauge .g-wait.on::before{background:var(--v-wait)} .gauge .g-skip.on::before{background:var(--v-skip)}
.c-stats{display:grid;}
.box{border-radius:8px;background:var(--glass);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.box .lab{font-weight:700;letter-spacing:.06em;color:var(--mut);white-space:nowrap}
.box b{font-family:var(--disp);font-weight:400;white-space:nowrap}
.box b small{font-family:var(--font);margin-left:4px;color:var(--mut)}
.box>small{color:var(--mut);white-space:nowrap}
.c-foot{color:var(--mut);letter-spacing:.02em;}


.b-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.b-title .b-h{margin:0;font-family:var(--disp);font-weight:400;font-size:20px}
.tag{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--amber) 60%,transparent);color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent);white-space:nowrap}
.slots{list-style:none;margin:0;padding:0;display:grid;gap:6px;flex:1;align-content:start}
.slot{position:relative;padding:6px 12px 8px;border-radius:12px;background:var(--glass);border:1px dashed color-mix(in srgb,var(--ink) 28%,transparent);display:grid;gap:2px;transition:background .3s,border-color .3s}
.slot .kr{display:flex;justify-content:space-between;align-items:center;gap:8px}
.slot .k{font-size:12px;line-height:18.15px;font-weight:700;color:var(--acc);letter-spacing:.04em}
.slot .v{font-size:12px;font-weight:500;line-height:1.5}
.slot .v.none{color:var(--mut)}
.slot .res{display:none;font-size:12px;font-weight:900;align-items:center;gap:6px;white-space:nowrap}
.slot .res::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.slot.on{border-style:solid}
.slot.on .res{display:flex}
.slot.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:var(--ok)} .slot.ok .res{color:var(--ok)}
.slot.ng{background:color-mix(in srgb,var(--ng) 14%,transparent);border-color:var(--ng)} .slot.ng .res{color:var(--ng)}
.slot.un{background:color-mix(in srgb,var(--un) 12%,transparent);border-color:var(--un)} .slot.un .res{color:var(--un)}
.b-note{font-size:12px;color:var(--mut);margin:0;line-height:15.4px}

.face.back .in{overflow-y:auto;scrollbar-width:thin}

.flip-hint{display:flex;align-items:center;flex-wrap:wrap;justify-content:center}
.btn{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:14px;color:var(--ink);padding:8px 16px;border-radius:12px;border:1px solid var(--line);background:var(--glass-2);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.btn:hover{background:color-mix(in srgb,var(--ink) 16%,transparent)}
.btn.main{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--ink-dark);border:0}
.btn:focus-visible,.chip:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

.info{display:grid;gap:12px;align-content:start}
.why{border-left:4px solid var(--vc);color:var(--ink);display:flex;align-items:baseline;}
.why b{flex:none;font-weight:900;color:var(--vc);letter-spacing:.06em}
.why .wt{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.cta{display:grid;gap:6px}
.btns{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.cprice{font-size:13px;color:var(--ink);line-height:1.4}
.cprice b{font-family:var(--disp);font-weight:400;font-size:16px;margin:0 2px}
.cprice small{font-size:12px;color:var(--mut)}
.cmeta{margin:0;font-size:12px;color:var(--mut);line-height:1.5}
.cnote{margin:0;font-size:13px;color:var(--mut);line-height:1.55}

.mat{padding:16px;border-radius:16px;background:var(--shade);border:1px solid var(--line);scroll-margin-top:8px}
.mat h2{margin:0 0 4px;font-size:16px;font-family:var(--disp);font-weight:400}
.mat p{margin:0 0 12px;font-size:13px;color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:8px 16px;border-radius:999px;border:1.5px solid var(--acc2);background:color-mix(in srgb,var(--acc2) 12%,transparent);min-height:44px;transition:background .2s,transform .2s}
.chip[aria-pressed="true"]{background:var(--acc2);color:var(--ink-dark);transform:translateY(-2px)}
.sum{margin:12px 0 0;font-size:13px;min-height:1.6em;color:var(--ink)}
.sum b{font-weight:900}
.lines{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:13px}
.lines li{padding:6px 12px;border-radius:8px;border-left:4px solid var(--un);background:var(--glass)}
.lines li.ok{border-color:var(--ok)}.lines li.ng{border-color:var(--ng)}
.lines b{font-weight:900}
.lines li.ok b{color:var(--ok)}.lines li.ng b{color:var(--ng)}.lines li.un b{color:var(--un)}


h2.sech{font-family:var(--disp);font-weight:400;font-size:clamp(19px,5vw,25px);line-height:1.35;margin:0 0 6px;padding:2px 0 2px 12px;border-left:6px solid var(--orange)}
h2.sech small{font-family:var(--font);font-size:12px;font-weight:700;color:var(--acc);margin-left:8px;letter-spacing:.04em}
.sub{margin:0 0 12px;color:var(--mut);font-size:13px;max-width:52em}


.layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:6px 0 16px}
.main{display:grid;gap:16px;min-width:0}
.side{display:grid;gap:16px;min-width:0;align-content:start}
.pnl{background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}
.pnl h2.sech{font-size:clamp(18px,4.6vw,22px)}
.pnl p{margin:6px 0;font-size:14px;color:var(--ink);max-width:46em}
.pnl .note{font-size:12px;color:var(--mut);margin:8px 0 0}
.s30{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;counter-reset:s}
.s30 li{counter-increment:s;position:relative;padding:8px 12px 8px 40px;border-radius:8px;background:var(--glass);border:1px solid var(--line);font-size:14px;line-height:1.6}
.s30 li::before{content:counter(s);position:absolute;left:10px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--orange);color:var(--ink-dark);font-weight:900;font-size:12px;display:grid;place-items:center}

.pts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
.pt{border:2px solid var(--line);border-radius:8px;overflow:hidden;background:var(--shade);min-width:0}
.pt>h3{margin:0;padding:6px 12px;font-size:13px;color:var(--ink)}
.pt>div{padding:12px 12px;font-size:13px}
.pt p{margin:2px 0 0;font-size:13px;color:var(--mut)}
.p-judge>h3{background:var(--vc);color:var(--ink-dark)}
.p-star>h3{background:var(--acc2);color:var(--ink-dark)}
.p-pop>h3{background:var(--bar);color:var(--ink-dark)}
.p-price>h3{background:var(--teal);color:var(--ink-dark)}
.pt .v{font-size:24px;font-weight:900;line-height:1.3}
.pt .v small{display:block;font-size:12px;font-weight:700;color:var(--mut);line-height:1.5}
.rules{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--mut)}
.rules li{padding:6px 12px;border-left:4px solid var(--line);border-radius:0 8px 8px 0;background:var(--glass);line-height:1.55}
.rules li b{color:var(--ink)}
.rules li.cur{border-left-color:var(--vc);color:var(--ink)}
.rules li.cur b{color:var(--vc)}

.rad{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);align-items:center;margin-top:8px}
.rad svg{width:100%;max-width:230px;height:auto;margin:0 auto;display:block}
.axl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.axl li{display:grid;grid-template-columns:24px minmax(0,1fr) 54px;gap:2px 8px;align-items:center;font-size:13px}
.axl .n{font-weight:900;color:var(--acc2);text-align:center}
.axl .nm{font-weight:700;line-height:1.4}
.axl .sc{font-family:var(--disp);font-size:16px;text-align:right;white-space:nowrap}
.axl .sc small{font-family:var(--font);font-size:12px;color:var(--mut);margin-left:2px}
.axl .bar{grid-column:2/4;height:6px;border-radius:22px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.axl .bar i{display:block;height:100%;background:var(--acc2);border-radius:22px}
.avg{margin:12px 0 0;font-size:13px;color:var(--ink)}
.avg b{font-family:var(--disp);font-weight:400;font-size:20px;margin:0 4px}
.avg small{color:var(--mut);font-size:12px}

table.rec{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 0}
table.rec th,table.rec td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line)}
table.rec th{font-size:12px;color:var(--mut);font-weight:700}
table.rec td.n{font-weight:900}
dl.spec{display:grid;grid-template-columns:auto 1fr;margin:0;font-size:13px;align-items:stretch}
dl.spec dt,dl.spec dd{padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);margin:0}
dl.spec dt{color:var(--mut);font-weight:700;padding-right:16px;white-space:nowrap}
dl.spec dd{text-align:right;font-weight:700;overflow-wrap:anywhere}
.bl{margin:8px 0 0;padding:0 0 0 16px;font-size:13px;color:var(--ink);display:grid;gap:4px}
.alt{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.alt li{padding:8px 12px;border-radius:8px;background:var(--glass);border-left:4px solid var(--v-skip);font-size:14px;line-height:1.6}
.alt-hero{padding:12px 12px 12px;border:1px solid color-mix(in srgb,var(--v-skip) 55%,transparent);border-radius:12px;background:var(--shade)}
.alt-h{margin:0 0 6px;font-family:var(--disp);font-size:16px;line-height:1.4}
.alt-h small{display:block;font-family:var(--font);font-size:12px;color:var(--mut);margin-top:2px}
.alt-hero .alt{margin-top:4px}
.alt-hero .alt li{font-size:13px;padding:8px 12px}
.alt-hero .note{font-size:12px;color:var(--mut);margin:8px 0 0;line-height:1.55}
.log{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;font-size:13px}
.log li{display:grid;grid-template-columns:8.6em 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.log time{color:var(--mut);font-weight:700;white-space:nowrap}


.axbox{border:1px solid var(--line);border-radius:12px;padding:16px 16px 12px;background:var(--shade);margin:0 0 16px}
#axis{position:relative;min-height:90px}
#axis .ln{position:absolute;left:0;right:0;height:2px;background:var(--line)}
#axis .tick{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--mut);white-space:nowrap}
#axis .tick::before{content:"";position:absolute;left:50%;top:-8px;width:1px;height:6px;background:var(--line)}
#axis .dot2{position:absolute;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--bg1);border:2px solid var(--bar);color:var(--ink);font-weight:900;font-size:12px;display:grid;place-items:center}
#axis .dot2.me{background:var(--acc);border-color:var(--acc);color:var(--ink-dark);width:34px;height:34px;margin-left:-17px;font-size:13px;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent);z-index:2}
.axnote{display:grid;gap:4px;margin-top:12px;font-size:13px;color:var(--mut)}
.axnote p{margin:0}
.axnote b{color:var(--ink)}
.tools{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin:0 0 12px}
.tools .lbl{font-size:12px;font-weight:700;color:var(--mut);margin-right:6px}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:4px;gap:2px}
.seg button{font:inherit;font-size:13px;font-weight:700;color:var(--mut);background:transparent;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;min-height:36px}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--ink-dark)}
.seg button:focus-visible{outline:3px solid var(--acc);outline-offset:1px}
.tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.tr-h,.tr{display:grid;gap:12px;align-items:center;padding:8px 16px;
  grid-template-columns:36px 92px minmax(0,1fr) 112px 112px 100px 74px}
.tr-h{background:var(--glass-2);font-size:12px;font-weight:700;color:var(--mut);border-bottom:1px solid var(--line)}
.tr{border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.tr:last-child{border-bottom:0}
.tr img{width:100%;height:auto;aspect-ratio:800/419;border-radius:6px;border:1px solid var(--line)}
.tr .noart{border-radius:6px;border:1px solid var(--line)}
.rkc{font-weight:900;font-size:13px;color:var(--mut)}
.tr .nm{font-weight:700;font-size:13px;line-height:1.45}
.tr .nm a{color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.tr .nm a:hover{text-decoration:underline}
.tr .nm small{display:block;font-weight:500;font-size:12px;color:var(--mut)}
.val{font-weight:900;font-size:16px;white-space:nowrap}
.val small{font-size:12px;font-weight:700;color:var(--mut)}
.trk{display:block;height:6px;background:var(--glass-2);border-radius:22px;overflow:hidden;margin-top:4px}
.trk i{display:block;height:100%;background:var(--bar);border-radius:22px;min-width:3px}
.jpill{display:inline-block;font-size:12px;font-weight:700;color:var(--vc);background:color-mix(in srgb,var(--vc) 12%,transparent);border:1px solid color-mix(in srgb,var(--vc) 45%,transparent);border-radius:22px;padding:2px 12px;white-space:nowrap}
.stl{font-size:12px;color:var(--mut);white-space:nowrap}
.c67{display:contents}
.tr.me{background:color-mix(in srgb,var(--acc) 8%,transparent);box-shadow:inset 4px 0 0 var(--acc)}
.metag{display:inline-block;background:var(--acc);color:var(--ink-dark);font-size:12px;font-weight:700;padding:0 8px;border-radius:22px;margin-left:6px;line-height:17px;vertical-align:2px}
.tbnote{font-size:12px;color:var(--mut);margin:8px 0 0}


.shelfsec{position:relative;z-index:1;padding:8px 0 24px}
.shelf-stage{position:relative;height:344px;margin:6px auto 0;max-width:1440px;overflow:hidden;touch-action:pan-y;cursor:grab;outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--strip-bg) 8%,var(--strip-bg) 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,var(--strip-bg) 8%,var(--strip-bg) 92%,transparent 100%)}
.shelf-stage.drag{cursor:grabbing}
.shelf-stage:focus-visible{box-shadow:inset 0 0 0 3px var(--acc)}
.ring{position:absolute;left:50%;top:12px;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2)}

.cv{position:absolute;inset:0;will-change:transform}
.cv.dim .mc{filter:saturate(.9) brightness(.94)}
.plank{position:absolute;left:50%;bottom:6px;width:min(94%,980px);height:70px;transform:translateX(-50%) rotateX(72deg);border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--acc) 28%,transparent),color-mix(in srgb,var(--acc) 10%,transparent) 55%,transparent 72%);pointer-events:none}
.ctrl{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 0;padding:0 12px}
.arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass-2);color:var(--ink);font:900 18px/1 var(--font);cursor:pointer;flex:none}
.arrow:hover{background:color-mix(in srgb,var(--ink) 20%,transparent)}
.arrow:focus-visible,.dot:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.now{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:8px 16px;font-size:12px;line-height:1.5;min-width:0;flex:1;max-width:520px;text-align:left;color:var(--ink)}
.now b{font-family:var(--disp);font-weight:400;font-size:14px;color:var(--ink)}
.now .nt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:700}
.now .ns{color:var(--mut);font-size:12px}
.dots{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:12px auto 0;padding:0 16px;max-width:488px}
.dot{width:24px;height:24px;border-radius:50%;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}



.mc{position:relative;height:100%;border-radius:16px;padding:6px;overflow:hidden;
  background:conic-gradient(from 210deg at 50% 50%,var(--rim-1),var(--rim-2),var(--rim-3),var(--rim-4),var(--rim-1));
  box-shadow:0 14px 26px var(--shadow),0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent) inset,0 0 30px color-mix(in srgb,var(--acc) 22%,transparent)}
.mc .in{position:relative;height:100%;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg,var(--card-in-1),var(--card-in-2));box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent) inset}
.mc .holo{border-radius:inherit;animation:none;background-position:50% 50%}
.mc-h{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mc-no{font-family:var(--disp);font-size:13px;line-height:1.2;white-space:nowrap;color:var(--mut)}
.mc-cat{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mc-art{margin:0;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--bg1)}
.mc-art img{width:100%;aspect-ratio:800/419;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.mc-st{display:grid;grid-template-columns:1.5fr 1fr;gap:6px}
.sb{padding:4px 8px;border-radius:8px;background:var(--glass);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.sb .lab{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--mut);line-height:1.5;white-space:nowrap}
.sb b{font-family:var(--disp);font-weight:400;font-size:14px;line-height:1.2;white-space:nowrap}
.sb b small{font-family:var(--font);font-size:10px;margin-left:4px;color:var(--mut)}
.mc-j{margin-top:auto;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--vc) 20%,transparent),color-mix(in srgb,var(--vc) 6%,transparent));border:1px solid color-mix(in srgb,var(--vc) 50%,transparent);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.mc-j .lab{font-size:12px;color:var(--mut);letter-spacing:.06em}
.mc-j b{font-family:var(--disp);font-weight:400;font-size:14px;color:var(--vc)}


.minir{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
.minir img{border-radius:3px;border:1px solid var(--line)}
.minir b{display:block;font-size:13px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.minir span{font-size:12px;color:var(--mut)}
.side .note{font-size:12px;color:var(--mut);margin:8px 0 0}
.tail{position:relative;z-index:1;padding:6px 0 16px}
.disc{position:relative;z-index:1;border-top:1px solid var(--line);padding:16px 0;font-size:13px;color:var(--ink);background:var(--shade)}
.disc p{margin:0;max-width:60em}
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:16px 0 32px;font-size:13px;color:var(--mut);background:color-mix(in srgb,var(--strip-bg) 55%,transparent)}
footer p{margin:4px 0}
footer .sampleline{font-size:12px;color:var(--dim);margin-top:12px}

@media (max-width:900px){
  .tr-h{display:none}
  .tr{grid-template-columns:34px 96px minmax(0,1fr);gap:6px 12px;padding:12px;
    grid-template-areas:"rk cv nm" "rk cv pr" "rk cv sl" "rk jd jd"}
  .tr .c1{grid-area:rk;align-self:start}
  .tr .c2{grid-area:cv;align-self:start}
  .tr .c3{grid-area:nm}
  .tr .c4{grid-area:pr}
  .tr .c5{grid-area:sl}
  .c67{display:flex;align-items:center;gap:12px;grid-area:jd;flex-wrap:wrap;margin-top:4px}
}
@media (min-width:600px) and (max-width:899px){
  :root{--cw:232px;--ch:300px;--R:742px;--P:1700px;--pop:40px}
  .shelf-stage{height:376px}
  .ring{top:14px}
}
@media (min-width:640px){
  .pts{grid-template-columns:1fr 1fr}
  .rad{grid-template-columns:230px minmax(0,1fr);gap:24px}
}
/* style guide 0.5 §9: copy the approved metrics literally. */
/* 全部の幅（1000px 以上は見本の min-width:1000px の値で上書きされる） */
.cstrip{margin:14px 0 10px;border:1px solid var(--line)}
.cstrip-h{width:122px;padding:10px 12px;font-size:12px;line-height:1.35}
.cstrip-h b{font-size:20px;line-height:1.1}
.cstrip-v{padding:8px 0}
.hero{display:grid;gap:14px;padding:4px 0 24px}
.prtop{margin:0 0 4px;font-size:16px;line-height:1.5;font-weight:400}
.crumb{font-size:11px;margin:0 0 2px;line-height:1.5}
.crumb a{display:inline-block;padding:14px 6px 2px;margin:-14px -6px -2px}
h1{margin:0;font-size:clamp(19px,5vw,22px);line-height:1.28;line-break:strict}
.byline{margin:4px 0 0;font-size:13px;line-height:1.5;gap:0 10px}
.byline b{font-size:15px}
.byline b small{font-size:11px}
.tagline{margin:1px 0 0;font-size:13px;line-height:1.5}
.cstage{gap:8px;padding:2px 0 0}
.face{padding:8px}
.face .in{padding:9px 10px 8px;gap:7px}
.c-head{gap:8px}
.c-no{font-size:15px;line-height:1.2}
.c-no small{font-size:12px;line-height:13.2px}
.c-cat{font-size:12px;line-height:18.975px;padding:2px 10px;border-width:1px}
.c-art{margin:0}
.c-art img{width:100%;aspect-ratio:800/419}
.c-art .noart{font-size:16px}
.c-judge{padding:7px 10px 8px;border-width:1px}
.jr{gap:4px 8px}
.jr .lab{font-size:12px;line-height:17.325px}
.jr .vw{font-size:26px;line-height:1.1}
.jr .vs{font-size:12px;line-height:14.3px}
.jr .gai{font-size:12px;line-height:12px;padding:3px 7px;border-width:1px}
.gauge{grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}
.gauge .g{font-size:12px;line-height:13.2px}
.gauge .g::before{height:4px;margin-bottom:3px}
.c-stats{grid-template-columns:1.28fr .86fr 1.1fr;gap:6px}
.box{padding:5px 10px 6px;border-width:1px}
.box .lab{font-size:12px;line-height:15.75px}
.box b{font-size:17px;line-height:1.25}
.box b small{font-size:11px}
.box>small{font-size:12px;line-height:13.5px}
.c-foot{font-size:12px;line-height:14.175px}
.flip-hint{gap:8px}
.why{margin:0;padding:3px 0 3px 10px;font-size:12.5px;line-height:1.5;gap:8px}
.why b{font-size:12px;line-height:17.25px}

/* 600px 以下だけ */
@media (max-width:600px){
  .cstrip{margin:8px 0 6px}
  .cstrip-h{width:74px;padding:5px 8px;font-size:10px}
  .cstrip-h b{font-size:15px}
  .cstrip-v{padding:4px 0}
  .hero{gap:6px;padding-bottom:18px}
}

/* 900px 以下だけ（比べる表・0.4） */
@media (max-width:900px){
  .tr .c2{grid-area:cv;align-self:start}
}

@media (min-width:900px){
  :root{--cw:260px;--ch:320px;--R:832px;--P:1900px;--pop:48px}
  .shelf-stage{height:404px}
  .ring{top:18px}
  .mc-no{font-size:16px}
  .sb b{font-size:16px}
}
@media (min-width:1000px){
  .wrap{padding:0 32px;max-width:1320px}
  .hero{grid-template-columns:minmax(0,1fr) 580px;grid-template-areas:"head stage" "info stage";grid-template-rows:auto 1fr;column-gap:48px;align-items:start;padding-top:4px}
  .card-btn{max-width:540px}
  .face{padding:8px}
  .face .in{padding:12px 16px 12px;gap:8px}
  .c-art .noart{font-size:24px}
  .c-no{font-size:20px}
  .jr .vw{font-size:32px}
  .jr .vs{font-size:12.5px;line-height:1.3}
  .box b{font-size:24px}
  .box{padding:8px 12px 8px}
  .gauge .g{font-size:12px;line-height:1.2}
  h1{font-size:clamp(26px,2.5vw,36px);-webkit-line-clamp:4;line-clamp:4}
  .byline{font-size:16px}
  .byline b{font-size:20px}
  .tagline{font-size:16px;margin-top:4px}
  .why{font-size:14px;max-width:44em}
  .slot .v{font-size:14px}
  .slot{padding:8px 12px}
  .b-note{font-size:12px;line-height:16.8px}
}
@media (min-width:1280px){
  .layout{grid-template-columns:minmax(0,1fr) 320px;gap:16px 24px}
}
@media (max-width:600px){
  .hd{height:46px;gap:8px}
  .logo .mark{width:30px;height:30px;font-size:16px}
  .logo b{font-size:16px}
  .logo small{font-size:10px}
  .tabs a{padding:8px 12px;font-size:13px}

  .cstrip-t figure,.cstrip-t img,.cstrip-t .noart{width:84px}
  .cstrip-t figcaption{display:none}

  .pnl{padding:16px}
  .face.back .in{gap:6px;padding:8px 12px 6px}
  .slots{gap:6px}
  .slot{padding:4px 12px 6px}
  .slot .v{line-height:1.35}
}
@media (prefers-reduced-motion:reduce){
  .holo{animation:none}
  .cstrip-t{animation:none}
  .cstrip-v{overflow-x:auto}
  .card,.face{transition:none}
}

:root .latin,:root .pr{font-family:var(--lat);font-weight:400}


.face .in{border-radius:11px;}
.c-art{border-radius:6px}

.box b small{margin-left:2px}
.mc .in{padding:8px;gap:6px}
.mc .holo{animation:holo 7s ease-in-out infinite alternate}
.mc-title{margin:0;font-size:12px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.cstrip-t .noart .na-c{display:none}
.cstrip-t .noart .na-t{font-size:8px;line-height:1.3;-webkit-line-clamp:3;line-clamp:3}
@media(max-width:600px){.cstrip-t .noart .na-t{-webkit-line-clamp:2;line-clamp:2}}
h2.sech,.pnl h2.sech{font-size:clamp(18px,4.8vw,24px)}
footer .indep{font-size:14px;color:var(--ink)}
[hidden]{display:none!important}
@media(min-width:1000px){.face{padding:5px}.face .in{padding:12px 16px 12px;gap:8px}.box b{font-size:24px}}
@media(prefers-reduced-motion:reduce){.mc .holo{animation:none}}

.dot::before{content:"";width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 30%,transparent)}

.dot[aria-current="true"]::before{background:var(--acc);transform:scale(1.35)}

footer a{display:inline-block;padding:12px 6px;margin:0 -6px}

/* 案 C（運営者 10/11 の選び・style guide 0.5 §4）: 読み物の本文 16px・カードの外の札は 12px 以上。最初の 1 画面のカードの中の札は上の各規則で 12px・行の高さは px で固定 */
.pnl p,.s30 li,.pt p,.pt>div,.rules,.axl li,.avg,table.rec,dl.spec,.bl,.alt li,.alt-hero .alt li,.log,.axnote,p.sub,.mat p,.sum,.lines,.disc,footer,footer .indep,.how ul,.empty,.prose p,.prose li{font-size:16px}
.cprice small,.axl .sc small,.alt-h small,.metag,footer .sampleline{font-size:12px}
.cmeta,.avg small,table.rec th,.tr-h,.tr .nm small,.now .ns{font-size:12px}
.ring .mc-cat,.ring .sb .lab,.ring .sb .lab em,.ring .mc-j .lab,.ring .mc-j .sub,.ring .mc-j>span{font-size:12px}

/* style guide 0.6 §9: 390px 未満の判定補足と価格の記録 */
@media (max-width:389px){
  .jr .vs-x{display:none}
  table.rec th,table.rec td{padding-left:6px;padding-right:6px}
}
@media (min-width:360px) and (max-width:389px){
  table.rec th,table.rec td{white-space:nowrap}
}
.mc-title{line-break:strict;min-height:calc(2 * 1em * 1.4);flex-shrink:0}
@media (max-width:600px){
  .ring .mc-title{min-height:calc(1em * 1.4);-webkit-line-clamp:1;line-clamp:1}
}

/* style guide 0.7 §9: 600px以下の紹介ボタンの並び */
@media (max-width:600px){
    .hero{display:flex;flex-direction:column}
    .cstage,.info{display:contents}
    .card-btn{order:1;align-self:center}
    .why{order:2}
    .cta{order:3}
    .flip-hint{order:4;margin:4px 0}
    .mat{order:5}

}

/* style guide 0.7 §4・§9: 短いラベルだけの折り返し */
    .tr .nm small,.axl .nm,.avg small,#price table.rec td,dl.spec dd.cat,.disc a,.note a,footer a{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
    .metag{white-space:nowrap}
    @media (max-width:359px){
      .tr{grid-template-columns:34px 84px minmax(0,1fr);column-gap:8px}
    }

/* style guide 0.7 §9: 手前の教材のページへの導線 */
    .now-a{display:block;margin:-7px -14px;padding:7px 14px;border-radius:13px;color:inherit;text-decoration:none}
    .now-a:hover{background:var(--glass)}
    .now-a:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
    .now .go{display:block;margin-top:2px;color:var(--acc);font-weight:700;font-size:12px}
    .cv.front{cursor:pointer}

/* style guide 0.7 §9: Brain への導線（10/12） */
/* ボタン: 置き場所（hero・after-stars・foot・bar）が違っても見た目は 1 種類。判定で色・形を変えない（差は文言だけ）。自前で全部の値を持つ（一覧のページでも同じ class で使う） */
.cta-btn{appearance:none;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 12px 8px 24px;border:0;border-radius:12px;font:inherit;font-size:16px;font-weight:900;line-height:1.3;letter-spacing:.02em;text-decoration:none;color:var(--ink-dark);background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 8px 20px -8px color-mix(in srgb,var(--acc2) 70%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--ink) 45%,transparent);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.cta-btn .go{flex:none;box-sizing:border-box;display:inline-grid;place-items:center;width:28px;height:28px;padding-bottom:2px;border-radius:50%;background:var(--ink-dark);color:var(--acc);font-size:20px;font-weight:900;line-height:1;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -8px color-mix(in srgb,var(--acc2) 80%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--ink) 65%,transparent)}
.cta-btn:hover .go,.cta-btn:focus-visible .go{transform:translateX(3px)}
.cta-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* 最初の 1 画面（hero）: 判定の帯 → 理由 → ボタンの流れ。理由の行に判定の帯と同じ色の薄い地を敷き、ボタンの直上に置く */
.why{background:linear-gradient(90deg,color-mix(in srgb,var(--vc) 16%,transparent),transparent 88%);border-radius:0 8px 8px 0}
.cta .btns{gap:8px 12px}
.lead{margin:0;font-size:13px;line-height:1.5;color:var(--ink)}
.lead .nw{white-space:nowrap}
.cta .btns .cta-btn{min-width:min(100%,300px)}
/* 本文の中の出口（after-stars・foot）: 判定色の縁で、理由の行・判定の帯と同じ流れにする */
.cta-x{position:relative;display:grid;gap:8px;padding:16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--vc) 45%,transparent);border-left:6px solid var(--vc);background:linear-gradient(90deg,color-mix(in srgb,var(--vc) 14%,transparent),color-mix(in srgb,var(--ink) 4%,transparent) 75%)}
.cta-x .btns .cta-btn{min-width:min(100%,300px)}
/* 画面の下の帯（600px 以下だけ・JS が hidden を外した時だけ出る） */
.cta-bar{display:none}
/* 見送るの「代わりの選択肢」は紹介ボタンの後ろ（600px 以下の並びでは条件の駒の後ろ） */
.axtap{display:none;margin:0;font-size:12px;color:var(--mut)}
.axtap a{color:var(--acc)}
/* 流れる帯の表紙・棚のカード・グラフの丸: 全部その教材のページへのリンク */
.cstrip-t figure{position:relative}
.cstrip-t figure .cs-a{display:block;color:inherit;text-decoration:none;-webkit-user-drag:none}
.cstrip-t figure .cs-a::after{content:"";position:absolute;inset:0}
.cstrip-t figure .cs-a:hover img{border-color:var(--acc)}
.cstrip-t figure .cs-a:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}
.cstrip-v:hover .cstrip-t,.cstrip-v:focus-within .cstrip-t{animation-play-state:paused}
.cstrip-t figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cstrip-t figcaption .v{color:var(--vc);font-weight:700}
a.cv{display:block;color:inherit;text-decoration:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
a.cv:not(.front){cursor:pointer}
a.cv:focus-visible{outline:3px solid var(--acc);outline-offset:-3px;border-radius:16px}
#axis a{cursor:pointer;text-decoration:none}
#axis a .fr{fill:none;stroke:var(--ink);stroke-width:3;opacity:0;pointer-events:none;transition:opacity .15s}
#axis a:hover .fr,#axis a:focus-visible .fr{opacity:1}
#axis a:focus-visible{outline:none}
/* 内輪の番号を外した後の比べる表: 先頭の「記録」の列をなくす */
.tr-h,.tr{grid-template-columns:92px minmax(0,1fr) 112px 112px 100px 74px}
@media (max-width:900px){
  .tr{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"cv nm" "cv pr" "cv sl" "jd jd"}
}
@media (max-width:600px){
  .cta-btn{width:100%;min-height:44px;padding:8px 12px 8px 16px}
  .cta-x{padding:12px}
  .alt-hero{order:6}
  .cta .lead{order:9}   /* 最初の 1 画面（390×844）にボタンを入れるため、600px 以下の hero だけ文をボタンの後ろに置く */
  .axtap{display:block;margin-top:6px}
  .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;box-sizing:border-box;height:calc(60px + env(safe-area-inset-bottom));padding:8px 12px calc(8px + env(safe-area-inset-bottom));align-items:center;gap:10px;background:var(--site-bar);border-top:1px solid var(--line);box-shadow:0 -8px 24px color-mix(in srgb,var(--strip-bg) 70%,transparent);display:flex}
  .cta-bar[hidden]{display:none}
  .cta-bar .cta-btn{flex:none;width:auto;min-width:0;min-height:44px;padding:8px 8px 8px 16px}
  html.has-bar body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}
@media (max-width:359px){
  .tr{grid-template-columns:84px minmax(0,1fr)}
  /* 320 でも「Brain で内容と価格を確認する」を 1 行に（font-size-base 14px・余白と丸を詰める） */
  .cta-btn{font-size:14px;letter-spacing:0;padding:8px 8px 8px 12px;gap:8px}
  .cta-btn .go{width:24px;height:24px;font-size:16px}
  .cta-bar .cta-btn{padding:8px 8px 8px 12px}
}
@media (prefers-reduced-motion:reduce){
  .cta-btn,.cta-btn .go,#axis a .fr{transition:none}
  .cta-btn:hover{transform:none}
  .cta-btn:hover .go,.cta-btn:focus-visible .go{transform:none}
}
/* 主役のカードの左上の札: 番号を外して横が空いたので、省略しないで全部見せる */
.c-cat{max-width:100%}
/* W3: 流れる帯の見出し「記録している教材 20 本」の字が 1 行で入る幅にする（言葉の途中で折らない） */
.cstrip-h .nw{white-space:nowrap}
.cstrip-h{padding-inline:8px}
@media (max-width:600px){.cstrip-h{width:96px;padding:5px 6px}}
/* 「表の題名」のリンクが言葉の途中で折れないように（375 で 題／名 に割れた） */
.axtap a{white-space:nowrap}
  /* style guide 0.8 ③: 18px 未満の見出しの書体（ロゴと同じ Zen Kaku Gothic New 900） */
  .cprice b,.mat h2,.axl .sc,.alt-h,.now b,.mc-no,.sb b,.mc-j b,.byline b,.c-no,.box b,.noart .na-t{font-family:var(--font);font-weight:900}

/* 0.9.4 ①: 判定の理由の段落と箇条書き */
.rsn p{margin:0}
.rsn>*+p,.rsn>*+ul{margin-top:1em}
.rsn ul{margin-bottom:0;padding-left:1.2em}
.rsn li{color:var(--mut)}
.rsn li+li{margin-top:.25em}

/* 0.9.4 B-1 */
.pnl .tolist{margin:8px 0 16px}

/* 0.9.4 B-2: 既存のパネル・小カードの値を使うプレビュー */
.axbox{position:relative}
#axcard{position:absolute;z-index:2;width:204px;max-width:100%;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg1);color:var(--ink);font-size:12px;line-height:1.3;pointer-events:none;opacity:0;transition:opacity .12s}
#axcard[hidden]{display:none}
#axcard.visible{opacity:1}
#axcard .ax-open{display:block;min-height:44px;color:inherit;text-decoration:none}
#axcard .ax-art{width:128px;max-width:100%;margin-bottom:8px}
#axcard img,#axcard .noart{width:100%;aspect-ratio:360/188;border-radius:6px;border:1px solid var(--line)}
#axcard .noart{font-size:12px;padding:4px}
#axcard .noart .na-c{display:none}
#axcard .noart .na-t{font-family:var(--font);font-weight:900;line-height:1.3;-webkit-line-clamp:2;line-clamp:2}
#axcard .ax-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-break:strict}
#axcard .ax-price{display:block;margin:4px 0}
#axcard .jpill{font-size:12px}
#axcard.touch{position:static;width:100%;margin-top:8px;pointer-events:auto}
#axcard.touch .ax-open{display:grid;grid-template-columns:128px minmax(0,1fr);gap:8px;align-items:center}
#axcard.touch .ax-art{margin-bottom:0}
#axcard.touch .ax-title{text-decoration:underline}
#axcard .ax-open:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
#axis a .fr{transition:opacity .12s}
#axis a.selected .fr{opacity:1}
@media (prefers-reduced-motion:reduce){#axcard,#axis a .fr{transition:none}}

/* 0.9.4 B-3 */
.tb-a{display:block;border-radius:inherit;min-height:44px}
.tb-a:hover img,.tb-a:hover .noart{border-color:var(--acc)}

/* 0.9.4 分類の帯（sukeさん 10/15「おすすめでOK」）。帯の中身はどのページも TOP・総合・16 分類・評価方法の 19 本。
   案 A（.tabs-a）= 一覧・評価方法・運営者情報（list.css・text.css はこの file を @import する）。トップは top.css に同じ 4 行。
   どの幅でも折り返して 19 本を全部見せる。札は高さ 44px 以上・字は今のまま（この file では 13px）。 */
.tabs-a{overflow:visible}
.tabs-a .wrap{flex-wrap:wrap;white-space:normal}
.tabs-a a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:44px;padding:0 10px}
@media (min-width:601px){.tabs-a a{padding:12px 16px}}

/* 案 C（.tabs-c）= 記事（商品）ページ。1000px 未満は TOP・［分類を選ぶ ▾ 今の分類］・評価方法 の 1 段。押すと、すぐ後ろの .cpanel に 17 枚の札（総合＋16）が出て本文を押し下げる（JS なし）。
   1000px 以上は案 A と同じ折り返しの平らな札（.cw）。600px 以下の帯の高さは今の 40.4px のまま（§9「最初の 1 画面の紹介ボタン」: 見送るの 390 で紹介ボタン 840.4px・44px にすると 843.9px）。
   この帯の TOP・評価方法・summary は 44px の例外（パンくずと同じ扱い）。開いた札は 44px。 */
.tabs-c{overflow:visible}
.tabs-c .cwrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:6px;white-space:normal}
.tabs-c .t-top{grid-column:1;grid-row:1}
.tabs-c .t-end{grid-column:3;grid-row:1}
.tabs-c .cw{display:none}
.tabs-c .cdet{grid-column:2;grid-row:1;margin:0;min-width:0}
.tabs-c .cdet summary{display:flex;align-items:center;gap:6px;box-sizing:border-box;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--glass);color:var(--ink);font-size:13px;font-weight:700;line-height:1.3;cursor:pointer;list-style:none}
.tabs-c .cdet summary::-webkit-details-marker{display:none}
.tabs-c .cdet summary span{flex:none}
.tabs-c .cdet summary b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--acc)}
.tabs-c .cdet summary::after{content:"▾";flex:none;margin-left:auto;color:var(--acc)}
.tabs-c .cdet[open] summary::after{content:"▴"}
.tabs-c .cdet summary:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.tabs-c .cpanel{grid-column:1/-1;grid-row:2;display:none;margin:0;padding:6px 0 14px}
.tabs-c .cdet[open] ~ .cpanel{display:block}
.tabs-c .cpanel .cn-w{display:flex;flex-wrap:wrap;gap:8px}
.tabs-c .cpanel a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:22px;background:var(--glass);color:var(--ink);font-size:13px;font-weight:700;line-height:1.3;text-decoration:none;white-space:nowrap}
.tabs-c .cpanel a:hover{background:var(--glass-2)}
.tabs-c .cpanel a[aria-current]{background:var(--acc);border-color:transparent;color:var(--ink-dark)}
.tabs-c .cpanel a:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
/* 359px 以下は summary の今の分類の名前を出さない（320 では 16 分類のうち 6〜7 の名前が「…」で切れるため）。今の分類はページの中のパンくずと、開いた札の色で分かる */
@media (max-width:359px){.tabs-c .cdet summary b{display:none}}
@media (min-width:601px){.tabs-c .cdet summary{min-height:44px;padding:0 14px;font-size:14px}}
@media (min-width:1000px){
  .tabs-c .cwrap{display:flex;flex-wrap:wrap;column-gap:0}
  .tabs-c .cw{display:inline-flex;align-items:center}
  .tabs-c .cdet,.tabs-c .cpanel,.tabs-c .cdet[open] ~ .cpanel{display:none}
}