/* v3＝案1「巨大タイポ（KINETIC TYPE）」 全ページ共通（プライバシー・規約・404 は legal.css のまま）
 * 動きは transform / clip-path / opacity だけ。prefers-reduced-motion と html.still（〔動きを止める〕）で全部止まる。
 * スマホ（〜759px）は断面2枚・移動8px以内・カーソル追従なし。 */
@property --flow { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root{
  --k:#050505; --k2:#111; --ink:#F4EEDF; --mute:#A6A196; --y:#FFE600; --line:rgba(244,238,223,.8); --line2:rgba(244,238,223,.18);
  --gut:clamp(16px,3vw,44px);
  --disp:"Avenir Next Condensed","AvenirNextCondensed-Heavy","Roboto Condensed","Arial Narrow",Impact,"Helvetica Neue",sans-serif;
  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",var(--jp);
  --hi:#2FD3FF; --bg:#050505; --glow:#fff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--k)}
body{margin:0;background:var(--k);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--y);color:#000;padding:10px 16px;font-weight:800}
.skip:focus{top:8px}
.dp{font-family:var(--disp);font-weight:900;letter-spacing:-.005em;text-transform:uppercase;line-height:.9}
.ico{width:1em;height:1em;flex:none}

/* ---------- ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px var(--gut);border-bottom:2px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.logo img{width:42px;height:42px;border-radius:50%;border:3px solid var(--ink);background:var(--ink)}
.logo span{font-family:var(--disp);font-weight:900;font-size:17px;letter-spacing:.04em}
.hd-nav{display:flex;align-items:center;gap:clamp(8px,1.6vw,22px)}
.hd-games{font-family:var(--disp);font-weight:900;font-size:clamp(17px,1.6vw,24px);text-decoration:none;min-height:44px;display:flex;align-items:center;padding:0 4px;position:relative}
.hd-games::after{content:"";position:absolute;left:4px;right:4px;bottom:8px;height:3px;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hd-games:hover::after{transform:scaleX(1)}
.lang{display:flex;align-items:center;font-family:var(--disp);font-weight:900;font-size:clamp(17px,1.6vw,24px);border-left:2px solid var(--line);padding-left:clamp(8px,1.6vw,22px)}
.lang i{font-style:normal;padding:0 4px;opacity:.7}
.lang a{text-decoration:none;min-height:44px;min-width:32px;display:flex;align-items:center;justify-content:center}
.lang a:hover{color:var(--y)}
.lang [aria-current]{color:var(--y)}
.motion{appearance:none;background:none;border:2px solid var(--line2);color:var(--ink);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:16px}
.motion:hover{border-color:var(--y);color:var(--y)}
.motion .py{display:none}
.motion[aria-pressed="true"] .pz{display:none}
.motion[aria-pressed="true"] .py{display:block}

/* ---------- 黄色のボタン ---------- */
.play{position:relative;display:inline-flex;align-items:center;gap:.5em;min-height:52px;padding:.35em 1em .3em;background:var(--y);color:#000;text-decoration:none;
  font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(20px,2.1vw,30px);line-height:1;letter-spacing:.01em;
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);overflow:hidden;transition:transform .2s}
.play .pi{display:flex;flex-direction:column;align-items:flex-start}
.play .pj{font-family:var(--jp);font-style:normal;font-weight:800;font-size:.46em;letter-spacing:.04em;margin-top:.25em}
.play .ico{font-size:.8em}
.play:hover{transform:translateY(-2px) scale(1.03)}
.play::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);
  animation:shine 3.6s 1.4s ease-in-out infinite}
@keyframes shine{0%,70%{left:-40%}100%{left:130%}}
.play-glow{font-size:clamp(24px,2.8vw,40px);min-height:64px;box-shadow:none;filter:drop-shadow(0 0 0 rgba(255,230,0,0));animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,230,0,.4))}50%{filter:drop-shadow(0 0 22px rgba(255,230,0,.85))}}
.ghost{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:0 4px;font-weight:800;text-decoration:none;border-bottom:2px solid var(--line);font-size:15px}
.ghost:hover{color:var(--y);border-color:var(--y)}
.ghost .ico{transition:transform .2s}
.ghost:hover .ico{transform:translateX(4px)}

/* ---------- 巨大見出し（トップ・一覧） ---------- */
.kt{position:relative;overflow:hidden;min-height:calc(100svh - 62px);padding:clamp(12px,2vw,28px) var(--gut) 68px;display:flex;flex-direction:column;justify-content:flex-end;
  --p:0;--mx:0;--my:0;isolation:isolate}
.kt-s{min-height:min(74svh,760px)}
.kt-stage{position:relative}
.kt-h{margin:0;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:-.025em;
  font-size:clamp(96px,min(23vw,41svh),420px)}
.kt-ja .kt-h{font-family:var(--jp);font-weight:900;text-transform:none;letter-spacing:-.04em;line-height:1.02;font-size:clamp(64px,min(14vw,25svh),250px)}
.kt-ja:not(.kt-s) .fill,.kt-ja:not(.kt-s) .sl i{-webkit-text-stroke:2px rgba(244,238,223,.92)}
.kt-s .kt-h{font-size:clamp(84px,min(20vw,30svh),340px)}
.kt-ja.kt-s .kt-h{font-family:var(--disp);letter-spacing:-.01em;line-height:.8;text-transform:uppercase}
.l1{display:block;color:var(--ink);transform:translate3d(calc(var(--p) * -9vw),0,0);will-change:transform}
.l2{position:relative;display:block;width:fit-content;margin-left:auto;margin-top:.02em}
.fill{display:block;color:var(--ink);white-space:nowrap;padding:0 .02em}
.sl{display:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fill,.sl i{background:var(--img) no-repeat,var(--hi);background-size:116% auto;
    background-position:calc(50% + var(--mx) * -70px + var(--flow)) calc(50% + var(--p) * 120px + var(--my) * -30px);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.kt-sub{display:block;font-family:var(--jp);font-weight:800;font-size:clamp(16px,1.6vw,22px);letter-spacing:.02em;text-transform:none;line-height:1.4;margin-top:14px;color:var(--ink);text-align:right}
/* 断面（飾り）。止まっているときは本物の見出しと寸分違わず重なる */
html.js:not(.still) .sl{display:block;position:absolute;inset:0;pointer-events:none}
.sl i{position:absolute;inset:0;font-style:normal;white-space:nowrap;padding:0 .02em;will-change:transform}
.sl i:nth-child(1){clip-path:inset(0 0 64% 0);transform:translate3d(calc(var(--p) * -16vw + var(--mx) * -26px),0,0)}
.sl i:nth-child(2){clip-path:inset(35.5% 0 31% 0);transform:translate3d(calc(var(--p) * 11vw + var(--mx) * 18px),0,0)}
.sl i:nth-child(3){clip-path:inset(68.5% 0 0 0);transform:translate3d(calc(var(--p) * -7vw + var(--mx) * -12px),0,0)}
html.js:not(.still) .kt .l2 .fill{filter:brightness(.22) saturate(.5)}
/* 最初の3秒：0.2〜0.9秒で断面がずれて、絵が流れる */
html.js:not(.still) .sl i:nth-child(1){animation:cut1 .75s .2s cubic-bezier(.2,.8,.2,1) both}
html.js:not(.still) .sl i:nth-child(2){animation:cut2 .75s .2s cubic-bezier(.2,.8,.2,1) both}
html.js:not(.still) .sl i:nth-child(3){animation:cut3 .75s .2s cubic-bezier(.2,.8,.2,1) both}
html.js:not(.still) .kt{animation:flow 1.6s .2s cubic-bezier(.3,.7,.2,1) both}
html.js:not(.still) .kt.swap .sl i:nth-child(1){animation:cut1 .55s cubic-bezier(.2,.8,.2,1)}
html.js:not(.still) .kt.swap .sl i:nth-child(2){animation:cut3 .55s cubic-bezier(.2,.8,.2,1)}
html.js:not(.still) .kt.swap .sl i:nth-child(3){animation:cut2 .55s cubic-bezier(.2,.8,.2,1)}
@keyframes cut1{0%{translate:0}25%{translate:-7vw 0}55%{translate:2.5vw 0}100%{translate:0}}
@keyframes cut2{0%{translate:0}30%{translate:9vw 0}60%{translate:-2vw 0}100%{translate:0}}
@keyframes cut3{0%{translate:0}20%{translate:-4vw 0}50%{translate:5vw 0}100%{translate:0}}
@keyframes flow{0%{--flow:-160px}100%{--flow:0px}}
.kt-cta{position:absolute;top:clamp(16px,4svh,48px);right:var(--gut);display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:3}
.play-hero{font-size:clamp(28px,4.2vw,68px);min-height:64px;transform:rotate(-4deg);padding:.3em .8em .25em}
.play-hero:hover{transform:rotate(-4deg) scale(1.04)}
.now{margin:6px 6px 0 0;font-size:13px;letter-spacing:.06em;color:var(--mute);display:flex;gap:8px;align-items:baseline}
.now-l{font-weight:800;color:var(--hi)}
.now-n{font-family:var(--disp);font-weight:900;color:var(--ink);font-size:18px}
.now-t{color:var(--ink);font-weight:700}
.explore{position:absolute;left:0;bottom:6%;z-index:3;display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:.3em .9em;background:var(--y);color:#000;text-decoration:none;
  font-family:var(--disp);font-weight:900;font-size:clamp(18px,1.8vw,28px);text-transform:uppercase;clip-path:polygon(0 0,100% 0,97% 100%,0 100%)}
.kt-ja .explore span{font-family:var(--jp);font-weight:900;font-size:.82em}
.explore:hover .ico{transform:translateX(5px)}
.explore .ico{transition:transform .2s}
.sweep{position:absolute;left:-10%;top:52%;width:120%;height:clamp(46px,10svh,110px);background:var(--y);z-index:4;pointer-events:none;mix-blend-mode:difference;
  transform:rotate(-7deg) translateX(-130%);display:none}
html.js:not(.still) .sweep{display:block;animation:sweep 1s 1s cubic-bezier(.7,0,.25,1) forwards}
@keyframes sweep{0%{transform:rotate(-7deg) translateX(-130%)}100%{transform:rotate(-7deg) translateX(130%)}}
.cue{position:absolute;left:50%;bottom:8px;margin:0;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:6px}
.cue::after{content:"";width:2px;height:26px;background:linear-gradient(var(--y),transparent);transform-origin:top;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.kt-s .cue{display:none}

/* ---------- 流れる帯 ---------- */
.tk{overflow:hidden;padding:18px 0;margin-top:-10px}
.tk-band{background:var(--y);color:#000;transform:rotate(-1.6deg);margin:0 -20px}
.tk-run{display:flex;width:max-content;font-family:var(--disp);font-weight:900;font-size:clamp(20px,2.2vw,32px);text-transform:uppercase;white-space:nowrap;padding:8px 0;animation:run 38s linear infinite}
.tk-run span{padding:0 .5em}
.tk-run b{font-weight:900}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- 一覧（5本） ---------- */
.idx{padding:clamp(28px,5vw,64px) var(--gut) 24px}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:2px solid var(--line);padding-top:14px;margin-bottom:18px}
.sec-hd h2{margin:0;font-size:clamp(34px,4vw,56px)}
.more{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:800;text-decoration:none}
.more:hover{color:var(--y)}
.ix{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px)}
.ix a,.rl a{position:relative;display:flex;flex-direction:column;text-decoration:none;transform:perspective(800px) rotateX(calc(var(--ry,0) * 1deg)) rotateY(calc(var(--rx,0) * 1deg));transition:transform .25s}
.ix-ph{display:block;overflow:hidden;aspect-ratio:16/10;background:#222;outline:2px solid transparent;transition:outline-color .2s}
.ix-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ix a:hover .ix-ph img,.rl a:hover .ix-ph img,.ix a:focus-visible .ix-ph img{transform:scale(1.09)}
.ix a:hover .ix-ph,.rl a:hover .ix-ph{outline-color:var(--hi)}
.ix-n{position:absolute;top:8px;left:10px;font-family:var(--disp);font-weight:900;font-size:clamp(28px,2.6vw,40px);color:var(--ink);text-shadow:0 2px 0 #000,0 0 16px rgba(0,0,0,.6);line-height:1}
.ix-t{display:block;margin-top:10px;font-family:var(--disp);font-weight:900;font-size:clamp(19px,1.7vw,26px);line-height:1.05;position:relative;padding-bottom:6px}
.ix-t::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--hi);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.ix a:hover .ix-t::after,.rl a:hover .ix-t::after{transform:scaleX(1)}
.ix-j{display:block;font-size:13px;color:var(--mute);font-weight:700;margin-top:4px}
.ix-go{display:none}
.note{color:var(--mute);font-size:14px;margin:16px 0 0}
.note-c{padding:0 var(--gut) 40px}

/* ---------- 1本ずつ（横長の絵＋動詞） ---------- */
.feats{padding:0 var(--gut)}
.fg{position:relative;display:grid;grid-template-columns:1.35fr 1fr;grid-template-areas:"vis body";gap:clamp(18px,3vw,48px);align-items:center;
  padding:clamp(28px,4vw,64px) 0;border-top:2px solid var(--line2);overflow:hidden;--e:0}
.fg-r{grid-template-columns:1fr 1.35fr;grid-template-areas:"body vis"}
.fg-vis{grid-area:vis;display:block;overflow:hidden;aspect-ratio:16/10;position:relative;background:var(--bg);z-index:1}
.fg-vis img{width:100%;height:100%;object-fit:cover;transform:scale(1.12) translate3d(0,calc(var(--e) * -3.5%),0);will-change:transform;transition:filter .3s}
.fg-vis::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--hi);opacity:.0;transition:opacity .3s}
.fg:hover .fg-vis::after{opacity:1}
.fg-big{position:absolute;left:0;right:0;bottom:-.08em;margin:0;z-index:0;pointer-events:none;white-space:nowrap;font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(80px,13vw,220px);line-height:1;color:transparent;-webkit-text-stroke:2px var(--hi);opacity:.42;transform:translate3d(calc(var(--e) * 10vw - 4vw),0,0);will-change:transform}
.fg-big span{padding-right:.35em}
.fg-body{grid-area:body;position:relative;z-index:1}
.fg-n{margin:0;font-family:var(--disp);font-weight:900;font-size:clamp(44px,5vw,84px);line-height:.9;color:var(--hi)}
.fg-n span{font-size:.36em;color:var(--mute);margin-left:.4em}
.fg-t{margin:10px 0 0;font-family:var(--disp);font-weight:900;font-size:clamp(34px,3.8vw,64px);line-height:.95}
.fg-t a{text-decoration:none}
.fg-t a:hover{color:var(--y)}
.fg-jn{margin:8px 0 0;font-weight:800;color:var(--mute)}
.fg-v{margin:14px 0 0;font-family:var(--disp);font-weight:900;font-size:clamp(20px,1.8vw,28px);color:var(--y);letter-spacing:.02em}
.fg-vj{margin:2px 0 0;font-weight:800;font-size:15px}
.fg-d{margin:12px 0 0;max-width:34em}
.fg-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px}

/* ---------- チャンネル・投稿アプリ ---------- */
.chan{padding:clamp(48px,7vw,110px) var(--gut) 24px;border-top:2px solid var(--line);margin-top:24px}
.eyebrow{margin:0;font-family:var(--disp);font-weight:900;letter-spacing:.14em;color:var(--y);font-size:16px}
.chan-h{margin:8px 0 0;font-family:var(--jp);font-weight:900;font-size:clamp(30px,4.4vw,64px);line-height:1.15;letter-spacing:-.02em}
html[lang="en"] .chan-h{font-family:var(--disp);text-transform:uppercase;line-height:.95;letter-spacing:0}
.chan-p{max-width:40em;margin:14px 0 0;color:var(--ink)}
.sns{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--line2)}
.sns a{position:relative;display:flex;align-items:center;gap:18px;min-height:76px;padding:10px 6px;border-bottom:2px solid var(--line2);text-decoration:none;overflow:hidden;isolation:isolate}
.sns a::before{content:"";position:absolute;inset:0;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.25,1);z-index:-1}
.sns a:hover::before,.sns a:focus-visible::before{transform:scaleX(1)}
.sns a:hover,.sns a:focus-visible{color:#000}
.sn{font-family:var(--disp);font-weight:900;font-size:clamp(30px,4vw,56px);text-transform:uppercase;line-height:1}
.sh{color:var(--mute);font-weight:700}
.sns a:hover .sh{color:#000}
.sns .ico{margin-left:auto;font-size:28px}
.about{margin:40px var(--gut) 48px;padding:20px 0 0;border-top:2px solid var(--line2);max-width:860px}
.about h2{font-size:20px;margin:0 0 6px}
.about p{margin:8px 0;color:#D7D1C3;font-size:15px}
.about a{color:var(--y)}

/* ---------- フッター ---------- */
.ft{border-top:2px solid var(--line);padding:22px var(--gut) 30px}
.ft-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px}
.ft nav{display:flex;flex-wrap:wrap;gap:0 18px}
.ft nav a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;font-weight:700;text-decoration:none;color:#D7D1C3}
.ft nav a:hover{color:var(--y)}
.ft-copy{margin:12px 0 0;color:var(--mute);font-size:13px}
.crumb{padding:10px var(--gut) 0;font-size:13px;color:var(--mute)}
.crumb a{color:#D7D1C3;text-decoration:none;display:inline-block;padding:10px 0}
.crumb a:hover{color:var(--y)}

/* ---------- ゲームのページ ---------- */
.gp{background:var(--bg)}
.gh{position:relative;overflow:hidden;min-height:min(70svh,760px);display:flex;align-items:flex-end;background:var(--bg);--p:0;--mx:0;--my:0;isolation:isolate}
.gh-art{position:absolute;top:0;right:0;bottom:0;width:74%;overflow:hidden;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.gh-bg{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.1) translate3d(calc(var(--mx) * -16px),calc(var(--my) * -10px + var(--p) * 60px),0);will-change:transform}
html.js:not(.still) .gh-bg{animation:kb 16s ease-in-out infinite alternate}
@keyframes kb{from{scale:1}to{scale:1.07}}
.gh-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,transparent 55%),linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.gh-in{position:relative;z-index:3;padding:0 var(--gut) clamp(28px,5svh,60px);max-width:min(66%,980px)}
.gh-in .crumb{padding:0 0 8px}
.gh-tw{position:relative}
.gh-t,.gh-echo{margin:0;font-family:var(--disp);font-weight:900;font-size:clamp(56px,8.2vw,150px);line-height:.86;letter-spacing:-.012em}
.gh-t{position:relative;z-index:1;color:var(--ink);text-shadow:0 6px 40px rgba(0,0,0,.45)}
.ln{display:block}
.gh-echo{position:absolute;inset:0;z-index:0;color:transparent;-webkit-text-stroke:1.5px var(--hi);opacity:.8;
  transform:translate3d(calc(12px + var(--mx) * 26px),calc(10px + var(--my) * 16px),0);will-change:transform}
html.js:not(.still) .gh-echo{animation:echo .9s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes echo{0%{translate:-30px 0;opacity:0}100%{translate:0;opacity:1}}
.gh-jn{margin:14px 0 0;font-weight:900;font-size:clamp(18px,1.8vw,24px);color:var(--glow)}
.gh-lead{margin:10px 0 0;max-width:30em;font-size:clamp(16px,1.3vw,19px);font-weight:600}
.gh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:22px}
.gh-cta .play{transform:rotate(-3deg)}
.gh-cta .play:hover{transform:rotate(-3deg) scale(1.04)}

/* 演出の粒（ゲームごと） */
.fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx i{position:absolute;left:var(--x);display:block}
.fx-bubbles i{bottom:-60px;width:calc(var(--s) * 34px);height:calc(var(--s) * 34px);border-radius:50%;border:2px solid rgba(255,255,255,.75);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9) 0 12%,rgba(255,230,242,.18) 13% 60%,transparent 61%);box-shadow:0 0 14px rgba(47,211,255,.5);
  animation:rise calc(9s + var(--s) * 6s) var(--d) linear infinite}
@keyframes rise{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,-55vh,0)}100%{transform:translate3d(-10px,-115vh,0)}}
.fx-steam i{bottom:6%;left:calc(40% + var(--x) * .45);width:calc(var(--s) * 120px);height:calc(var(--s) * 120px);border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,230,.55),rgba(255,244,230,0) 68%);animation:steam calc(6s + var(--s) * 3s) var(--d) ease-out infinite}
@keyframes steam{0%{transform:translate3d(0,0,0) scale(.4);opacity:0}25%{opacity:.9}100%{transform:translate3d(30px,-60vh,0) scale(1.6);opacity:0}}
.fx-night::before{content:"";position:absolute;top:9%;left:8%;width:clamp(70px,9vw,140px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#FFF6CF,#FFD86B 60%,#E9B94A);box-shadow:0 0 60px 18px rgba(255,216,107,.35),0 0 160px 60px rgba(169,184,255,.18);animation:moon 6s ease-in-out infinite}
@keyframes moon{50%{box-shadow:0 0 80px 26px rgba(255,216,107,.45),0 0 200px 80px rgba(169,184,255,.22)}}
.fx-night i{top:var(--y);width:calc(var(--s) * 5px);height:calc(var(--s) * 5px);border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(169,184,255,.9);animation:tw calc(2s + var(--s) * 2s) var(--d) ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
.fx-balloons i{bottom:-120px;width:calc(var(--s) * 40px);height:calc(var(--s) * 50px);border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.7),transparent 30%),var(--c,#FFE14D);
  animation:rise calc(12s + var(--s) * 8s) var(--d) ease-in-out infinite}
.fx-balloons i::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:40px;background:rgba(255,255,255,.6)}
.fx-balloons i:nth-child(3n+1){--c:#6FD6FF}.fx-balloons i:nth-child(3n+2){--c:#7EE787}.fx-balloons i:nth-child(4n){--c:#FF7BA6}
.fx-sunset::before{content:"";position:absolute;top:10%;left:6%;width:clamp(110px,14vw,220px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#FFE7A0,#FF9E4A 55%,rgba(255,122,61,0) 72%);animation:sun 5s ease-in-out infinite}
@keyframes sun{50%{transform:scale(1.12)}}
.fx-sunset i{bottom:-20px;width:calc(var(--s) * 6px);height:calc(var(--s) * 6px);border-radius:50%;background:#FFD36B;box-shadow:0 0 10px 3px rgba(255,122,61,.8);animation:rise calc(8s + var(--s) * 5s) var(--d) linear infinite}

/* 3コマ */
.beats{padding:clamp(18px,3vw,36px) var(--gut);border-top:2px solid var(--line)}
.bts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.bt{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:center;padding:6px clamp(10px,1.4vw,22px);border-left:2px solid var(--line2)}
.bt:first-child{border-left:0;padding-left:0}
.bt-f{position:relative;margin:0;overflow:hidden;aspect-ratio:16/9;background:#000;outline:2px solid transparent;transition:outline-color .3s,box-shadow .3s}
.bt-f img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.bt-f::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);opacity:0}
.bn{margin:0;font-family:var(--disp);font-weight:900;font-size:clamp(44px,4.6vw,78px);line-height:.85;color:var(--hi)}
.bv{margin:0;font-family:var(--disp);font-weight:900;font-size:clamp(30px,3.4vw,58px);line-height:.9;text-transform:uppercase}
.bj{margin:6px 0 0;font-weight:900;font-size:17px;color:var(--glow)}
.bl{margin:6px 0 0;font-size:14px;line-height:1.6;color:#E4DED0}
.bt.on .bt-f{outline-color:var(--hi);box-shadow:0 0 28px color-mix(in srgb,var(--hi) 60%,transparent)}
.bt.on .bt-f img{transform:scale(1.08)}
html.js:not(.still) .bt.on .bt-f::after{animation:sheen 1s ease-out}
@keyframes sheen{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
html.js:not(.still) .bt.in .bn{animation:hop .7s calc(var(--i) * .14s) cubic-bezier(.3,1.6,.5,1) both}
@keyframes hop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-18px) scale(1.12)}100%{transform:none}}

/* 遊び方 */
.how{padding:clamp(18px,3vw,36px) var(--gut) clamp(28px,4vw,56px);border-top:2px solid var(--line)}
.ctrl{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;font-family:var(--disp);font-weight:900;text-transform:uppercase}
.ctrl-l{margin:0;color:var(--y);font-size:clamp(20px,1.8vw,28px)}
.ctrl ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0}
.ctrl li{font-size:clamp(17px,1.4vw,22px);padding:0 16px;border-left:2px solid var(--line2);text-transform:none;font-family:var(--body);font-weight:700}
.ctrl li:first-child{border-left:0;padding-left:0}
.ctrl li b{font-family:var(--disp);font-weight:900;text-transform:uppercase;margin-right:.4em;color:var(--ink)}
html[lang="ja"] .ctrl li b::after{content:"："}
html[lang="en"] .ctrl li b::after{content:":"}
.sec-t{margin:28px 0 8px;font-size:clamp(24px,2.4vw,34px);font-weight:900}
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rules li{display:flex;gap:12px;border-top:2px solid var(--line2);padding-top:12px}
.rn{font-family:var(--disp);font-weight:900;font-size:34px;line-height:1;color:var(--hi)}
details.dmore{margin-top:26px;border:2px solid var(--line2)}
details.dmore summary{cursor:pointer;min-height:52px;display:flex;align-items:center;padding:8px 16px;font-weight:800;list-style:none}
details.dmore summary::-webkit-details-marker{display:none}
details.dmore summary::before{content:"+";font-family:var(--disp);font-weight:900;font-size:26px;color:var(--y);margin-right:12px;transition:transform .2s}
details.dmore[open] summary::before{transform:rotate(45deg)}
details.dmore summary:hover{color:var(--y)}
.mo{padding:6px 18px 12px;border-top:1px solid var(--line2)}
.mo h3{margin:10px 0 4px;font-size:17px}
.mo p{margin:6px 0}
.mute{color:var(--mute)}
.btns{border-collapse:collapse;width:100%;max-width:720px}
.btns th,.btns td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
.btns th{font-family:var(--disp);font-weight:900;white-space:nowrap;color:var(--y);font-size:18px}
.week{list-style:none;padding:0;margin:0}
.week li{padding:6px 0}
.week b{display:inline-block;min-width:8em;color:var(--hi);font-weight:900}

/* もう一度 */
.ready{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:clamp(24px,4vw,52px) var(--gut);border-top:2px solid var(--line);
  background:linear-gradient(100deg,color-mix(in srgb,var(--hi) 22%,transparent),transparent 60%)}
.ready-t{margin:0;font-weight:900;font-size:clamp(24px,3.2vw,46px);line-height:1.15}
html[lang="en"] .ready-t{font-family:var(--disp);text-transform:uppercase}

/* ほかのゲーム */
.rel{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,44px);align-items:start;padding:clamp(22px,3vw,40px) var(--gut);border-top:2px solid var(--line);background:var(--k)}
.rel-h{margin:0;border-right:2px solid var(--line2);padding-right:clamp(16px,3vw,44px)}
.rel-h .dp{display:block;font-size:clamp(34px,4vw,62px)}
.rel-j{display:block;margin-top:8px;font-size:15px;color:var(--mute)}
.rl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}

/* ---------- タブレット ---------- */
@media (max-width:1080px){
  .ix{grid-template-columns:repeat(3,1fr)}
  .bt{grid-template-columns:1fr;padding:6px 12px}
  .rules{grid-template-columns:1fr}
}
/* ---------- スマホ ---------- */
@media (max-width:759px){
  .logo span{display:none}
  .hd-in{padding:6px var(--gut)}
  .kt{min-height:auto;padding-top:24px;padding-bottom:28px;justify-content:flex-start}
  .kt-h{font-size:clamp(84px,27vw,180px);line-height:.82}
  .kt-ja .kt-h{font-size:clamp(56px,20.5vw,130px);line-height:1.04}
  .kt-s .kt-h{font-size:clamp(84px,26vw,170px)}
  .l2{margin-left:0;width:auto}
  .l1{transform:translate3d(calc(var(--p) * -8px),0,0)}
  .sl i:nth-child(1){clip-path:inset(0 0 50% 0);transform:translate3d(calc(var(--p) * -8px),0,0)}
  .sl i:nth-child(2){clip-path:inset(50% 0 0 0);transform:translate3d(calc(var(--p) * 8px),0,0)}
  .sl i:nth-child(3){display:none}
  html.js:not(.still) .sl i:nth-child(2){animation-name:cut3}
  @keyframes cut1{0%{translate:0}30%{translate:-8px 0}100%{translate:0}}
  @keyframes cut3{0%{translate:0}30%{translate:8px 0}100%{translate:0}}
  .explore{position:relative;left:auto;bottom:auto;display:flex;justify-content:space-between;margin-top:22px;min-height:60px;font-size:24px;padding:.3em .9em}
  .kt-cta{position:relative;top:auto;right:auto;align-items:stretch;margin-top:14px}
  .play-hero{transform:none;justify-content:space-between;font-size:30px}
  .kt .explore{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);clip-path:none;font-size:20px;min-height:52px}
  .kt-stage{display:contents}
  .kt-h{order:1}.kt-cta{order:2}.kt .explore{order:3}
  .play-hero:hover{transform:none}
  .now{margin:2px 0 0;flex-wrap:wrap}
  .cue{display:none}
  .sweep{top:40%}
  .kt-sub{text-align:left}
  .ix{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line2)}
  .ix li{border-bottom:1px solid var(--line2)}
  .ix a{transform:none;display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto auto;column-gap:14px;align-content:center;padding:12px 0;min-height:96px}
  .ix-ph{grid-row:1 / span 2;aspect-ratio:16/10}
  .ix-n{top:16px;left:6px;font-size:24px}
  .ix-t{align-self:end;margin-top:0;font-size:20px;padding-right:44px}
  .ix-go{display:flex;position:absolute;right:0;top:50%;margin-top:-17px;width:46px;height:34px;align-items:center;justify-content:center;background:var(--y);color:#000;font-size:20px;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}
  .ix-j{align-self:start;padding-right:44px}
  .fg,.fg-r{grid-template-columns:1fr;grid-template-areas:"vis" "body";gap:16px}
  .fg-vis img{transform:scale(1.06) translate3d(0,calc(var(--e) * -8px),0)}
  .fg-big{bottom:auto;top:clamp(20px,4vw,40px);font-size:22vw;transform:translate3d(calc(var(--e) * 8px - 4px),0,0);opacity:.35}
  .fg-row .play{flex:1 1 100%;justify-content:space-between}
  .gh{display:block;min-height:0}
  .gh-art{position:relative;width:100%;aspect-ratio:16/11}
  .gh-bg{transform:scale(1.06) translate3d(0,calc(var(--p) * 8px),0)}
  .gh-shade{background:linear-gradient(0deg,var(--bg) 0%,transparent 40%);height:calc(100vw * 11 / 16 + 2px);bottom:auto}
  .gh-in{max-width:none;margin-top:-56px;padding-bottom:28px}
  .gh-in .crumb{display:none}
  .gh-t,.gh-echo{font-size:clamp(44px,13.2vw,80px)}
  .gh-echo{transform:translate3d(5px,5px,0)}
  .gh-cta .play{flex:1 1 100%;justify-content:space-between;transform:none}
  .gh-cta .play:hover{transform:none}
  .fx i:nth-child(n+7){display:none}
  .fx-night::before,.fx-sunset::before{top:6%;left:auto;right:8%;width:64px}
  .bts{grid-template-columns:1fr;gap:18px}
  .bt{grid-template-columns:1fr 1fr;border-left:0;border-top:2px solid var(--line2);padding:16px 0 0}
  .bt:first-child{border-top:0;padding-top:0}
  .bv{font-size:34px}
  .ctrl li{border-left:0;padding:0 14px 0 0;flex:1 1 100%}
  .ready .play{flex:1 1 100%;justify-content:space-between}
  .rel{grid-template-columns:1fr}
  .rel-h{border-right:0;padding-right:0}
  .rel-h .dp br{display:none}
  .rl{grid-template-columns:1fr 1fr}
  .rl .ix-t{font-size:18px}
  .hd-nav{gap:8px}
  .lang{padding-left:8px}
}
.hd .play-s{display:none}
@media (min-width:760px){ .hd .play-s{display:inline-flex;font-size:18px;min-height:44px;padding:.3em .8em} .hd .play-s .pj{display:none} .hd .play-s::after{animation:none} }

/* ---------- 動きを止める（OS の設定・〔動きを止める〕・低速の端末） ---------- */
html.still *,html.still *::before,html.still *::after{animation:none!important;transition:none!important}
html.still .kt,html.still .gh,html.still .fg{--p:0!important;--mx:0!important;--my:0!important;--e:0!important}
html.lite .fg,html.lite .gh{--e:0!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sl,.sweep{display:none!important}
  .kt .l2 .fill{filter:none!important}
  .kt,.gh,.fg{--p:0!important;--mx:0!important;--my:0!important;--e:0!important}
  .tk-run{transform:none}
}
html.still .sl,html.still .sweep{display:none!important}

/* ---------- スマホのメニュー（768px 未満：〔≡〕→ 黒の全画面） ---------- */
.hd-sp{display:none;align-items:center;gap:8px}
.burger{appearance:none;background:none;border:2px solid var(--line2);width:48px;height:48px;border-radius:50%;position:relative;cursor:pointer;color:var(--ink);padding:0}
.burger:hover{border-color:var(--y);color:var(--y)}
.burger i{position:absolute;left:12px;right:12px;height:3px;background:currentColor;transition:transform .4s cubic-bezier(.7,0,.25,1),opacity .2s}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:20.5px}.burger i:nth-child(3){top:27px}
.burger[aria-expanded="true"]{border-color:var(--y);color:var(--y)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:767px){ .hd-nav{display:none} .hd-sp{display:flex} }
.gm{position:fixed;inset:0;z-index:80;background:#050505;display:flex;flex-direction:column;justify-content:space-between;padding:84px var(--gut) 22px;overflow-x:hidden;overflow-y:auto;opacity:0;transition:opacity .25s;overscroll-behavior:contain}
.gm[hidden]{display:none}
.gm.open{opacity:1}
.gm-sweep{position:absolute;left:-20%;top:34%;width:140%;height:96px;background:var(--y);transform:rotate(-8deg) translateX(-130%);pointer-events:none;z-index:0}
.gm.open .gm-sweep{animation:gmsweep .7s cubic-bezier(.7,0,.25,1) forwards}
.gm.closing .gm-sweep{animation:gmsweep .45s cubic-bezier(.7,0,.25,1) reverse forwards}
@keyframes gmsweep{0%{transform:rotate(-8deg) translateX(-130%)}100%{transform:rotate(-8deg) translateX(130%)}}
.gm-in{position:relative;z-index:1}
.gm-list{list-style:none;margin:0;padding:0}
.gm-list li{overflow:hidden;border-bottom:1px solid var(--line2)}
.gm-w{display:block;transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.2s + var(--i) * .08s)}
.gm.open .gm-w{transform:none}
.gm.closing .gm-w{transform:translateY(105%);transition-duration:.3s;transition-delay:calc((4 - var(--i)) * .05s)}
.gm-list a{display:flex;align-items:center;gap:.25em;min-height:64px;font-family:var(--disp);font-weight:900;font-size:clamp(46px,15vw,84px);line-height:1;text-decoration:none;text-transform:uppercase;letter-spacing:-.01em}
.gm-list a .ico{font-size:.38em}
.gm-list a:hover,.gm-list a:focus-visible{color:var(--y);text-shadow:-3px 0 var(--hi,#2FD3FF),3px 0 #FF3D7F;animation:glitch .36s steps(2,end) 1}
@keyframes glitch{0%{transform:translateX(0)}25%{transform:translateX(-5px) skewX(-8deg)}50%{transform:translateX(6px)}75%{transform:translateX(-2px) skewX(4deg)}100%{transform:none}}
.gm-lang{display:flex;align-items:center;gap:10px;min-height:64px;font-family:var(--disp);font-weight:900;font-size:clamp(36px,11vw,60px)}
.gm-lang a,.gm-lang span{min-height:56px;min-width:56px;display:inline-flex;align-items:center;text-decoration:none}
.gm-lang [aria-current]{color:var(--y)}
.gm-lang i{font-style:normal;opacity:.45}
.gm-play{margin-top:22px;transform:translateY(30px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;transition-delay:calc(.2s + var(--i) * .08s)}
.gm.open .gm-play{transform:none;opacity:1}
.gm.closing .gm-play{transform:translateY(30px);opacity:0;transition-delay:0s}
.gm-play .play{display:flex;justify-content:space-between;width:100%;font-size:30px}
.gm-strip{position:relative;z-index:1;margin:26px calc(-1 * var(--gut)) 0;overflow:hidden}
.gm-run{display:flex;gap:10px;width:max-content;animation:run 24s linear infinite}
.gm-run a{display:block;width:132px;flex:none;text-decoration:none}
.gm-run img{width:132px;height:82px;object-fit:cover}
.gm-run span{display:block;margin-top:4px;font-size:11px;font-weight:700;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open .hd{z-index:90;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.menu-open .hd-in{border-bottom-color:transparent}
/* 動きを減らす・〔動きを止める〕：ふっと出るだけ */
html.still .gm{transition:opacity .2s!important}
html.still .gm .gm-w,html.still .gm .gm-play{transform:none!important;opacity:1!important}
html.still .gm-sweep{display:none}
@media (prefers-reduced-motion:reduce){
  .gm{transition:opacity .2s!important}
  .gm .gm-w,.gm .gm-play{transform:none!important;opacity:1!important}
  .gm-sweep{display:none}
}

/* ---------- ブログ（一覧・記事）：読みやすさ優先 ---------- */
.sec-sub{display:inline-block;margin-left:.6em;font-family:var(--jp);font-weight:800;font-size:.36em;letter-spacing:.02em;text-transform:none;color:var(--mute);vertical-align:middle}
.blog-latest{padding:clamp(28px,5vw,64px) var(--gut) 8px}
.bl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.bc a{display:flex;flex-direction:column;height:100%;text-decoration:none}
.bc-ph{display:block;overflow:hidden;aspect-ratio:16/9;background:#1a1a1a;outline:2px solid transparent;transition:outline-color .2s}
.bc-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bc a:hover .bc-ph img,.bc a:focus-visible .bc-ph img{transform:scale(1.06)}
.bc a:hover .bc-ph{outline-color:var(--y)}
.bc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bc-g{display:inline-block;padding:2px 8px;border:1.5px solid var(--hi,#2FD3FF);color:var(--hi,#2FD3FF);font-size:12px;font-weight:800;line-height:1.5;text-decoration:none}
.bc-t{margin:8px 0 0;font-family:var(--jp);font-weight:900;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--ink)}
.bc a:hover .bc-t{color:var(--y)}
.bc time{margin-top:6px;font-family:var(--disp);font-weight:900;color:var(--mute);font-size:15px;letter-spacing:.04em}
.blog{padding-bottom:40px}
.bh{padding:clamp(18px,3vw,40px) var(--gut) 18px;border-bottom:2px solid var(--line)}
.bh-t{margin:0}
.bh-t .dp{display:block;font-size:clamp(84px,14vw,220px);line-height:.82}
.bh-s{display:block;margin-top:10px;font-family:var(--jp);font-weight:800;font-size:clamp(16px,1.6vw,22px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--line2);font-weight:800;font-size:14px;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--hi,var(--y));color:var(--hi,var(--y))}
.chip[aria-current]{background:var(--y);border-color:var(--y);color:#000}
.chip.off{opacity:.38;cursor:default}
.blog > .bl,.blog > .note{padding:28px var(--gut) 0}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:32px var(--gut) 0}
.pager a,.pager span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:2px solid var(--line2);font-family:var(--disp);font-weight:900;font-size:18px;text-decoration:none}
.pager [aria-current]{background:var(--y);border-color:var(--y);color:#000}
.pager a:hover{border-color:var(--y);color:var(--y)}
/* 記事 */
.post{max-width:820px;margin:0 auto;padding:0 var(--gut)}
.post-h{padding-top:18px}
.post-tags{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.post-t{margin:12px 0 0;font-family:var(--jp);font-weight:900;font-size:clamp(28px,3.6vw,46px);line-height:1.3;letter-spacing:-.01em}
html[lang="en"] .post-t{font-family:var(--body);letter-spacing:-.015em;line-height:1.15}
.post-d{margin:10px 0 0;font-family:var(--disp);font-weight:900;color:var(--y);font-size:18px;letter-spacing:.04em}
.post-eye{margin:22px 0 0;overflow:hidden;aspect-ratio:16/9;background:#1a1a1a}
.post-eye img{width:100%;height:100%;object-fit:cover}
.prose{max-width:720px;margin:0 auto;padding-top:28px;color:#ECE7DC;font-size:clamp(16.5px,1.2vw,18px);line-height:2;letter-spacing:.02em}
html[lang="en"] .prose{letter-spacing:0;line-height:1.85}
.prose p{margin:0 0 1.4em}
.prose h2{margin:2.4em 0 .8em;padding:0 0 .4em;font-family:var(--jp);font-weight:900;font-size:clamp(22px,2.2vw,28px);line-height:1.45;border-bottom:2px solid var(--line2);position:relative}
.prose h2::before{content:"";position:absolute;left:0;bottom:-2px;width:3.2em;height:2px;background:var(--y)}
.prose h3{margin:2em 0 .6em;font-family:var(--jp);font-weight:900;font-size:clamp(18px,1.6vw,21px);line-height:1.5;padding-left:12px;border-left:4px solid var(--hi,#2FD3FF)}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:1.4em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--y);font-weight:900}
.prose strong{color:#fff;background:linear-gradient(transparent 62%,rgba(255,230,0,.28) 62%)}
.prose a{color:var(--y);text-underline-offset:3px}
.prose code{font-size:.9em;background:#1c1c1c;padding:1px 6px}
.prose blockquote{margin:0 0 1.4em;padding:10px 18px;border-left:4px solid var(--y);background:#111}
.prose blockquote p{margin:0}
.prose figure{margin:1.6em 0}
.pbox{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;margin:1.8em 0;padding:16px;border:2px solid var(--hi,#2FD3FF);background:linear-gradient(100deg,color-mix(in srgb,var(--hi,#2FD3FF) 14%,transparent),transparent 70%);line-height:1.6}
.pbox-ph{display:block;overflow:hidden;aspect-ratio:16/10}
.pbox-ph img{width:100%;height:100%;object-fit:cover}
.pbox-t{margin:0!important;font-family:var(--disp);font-weight:900;font-size:22px;line-height:1.1}
.pbox-t a{color:var(--ink)!important;text-decoration:none}
.pbox-d{margin:6px 0 12px!important;font-size:14px;color:#D7D1C3}
.pbox .play{font-size:22px;min-height:50px}
.post-games{max-width:720px;margin:40px auto 0}
.rel-posts{padding:40px var(--gut) 0;max-width:1200px;margin:0 auto}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1200px;margin:36px auto 0;padding:0 var(--gut)}
.pn a{display:block;padding:14px 16px;border:2px solid var(--line2);text-decoration:none;font-weight:800;line-height:1.5}
.pn a span{display:block;font-family:var(--disp);font-weight:900;color:var(--y);font-size:14px;letter-spacing:.06em;margin-bottom:4px}
.pn a:hover{border-color:var(--y)}
.pn-n{text-align:right}
@media (max-width:900px){ .bl{grid-template-columns:1fr 1fr} }
@media (max-width:599px){
  .bl{grid-template-columns:1fr}
  .pbox{grid-template-columns:1fr}
  .pbox .play{display:flex;justify-content:space-between}
  .pn{grid-template-columns:1fr}
}
.prose a.play,.prose .pbox a.play{color:#000;text-decoration:none}

/* ---------- YouTube（最初はサムネだけ。押したら youtube-nocookie の iframe） ---------- */
.yv-wrap{margin-top:28px}
.yv-row{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,24px)}
.yv-row + .yv-row{margin-top:24px}
.yv{margin:0;position:relative}
.yv-s{width:min(300px,72vw)}
.yv-l{width:min(560px,100%)}
.yv-btn,.yv iframe{position:relative;display:block;width:100%;overflow:hidden;background:#111;border:0}
.yv-s .yv-btn,.yv-s iframe{aspect-ratio:9/16}
.yv-l .yv-btn,.yv-l iframe{aspect-ratio:16/9}
.yv-btn img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}
.yv-btn::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(244,238,223,.25);transition:box-shadow .2s}
.yv-btn:hover img,.yv-btn:focus-visible img{transform:scale(1.05);filter:brightness(1.08)}
.yv-btn:hover::after{box-shadow:inset 0 0 0 3px var(--y)}
.yv-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--y);color:#000;display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(255,230,0,.6);animation:ytpulse 2.2s ease-out infinite}
.yv-play svg{width:38px;height:38px;margin-left:4px}
@keyframes ytpulse{0%{box-shadow:0 0 0 0 rgba(255,230,0,.55)}100%{box-shadow:0 0 0 22px rgba(255,230,0,0)}}
.yv-k{position:absolute;left:10px;top:10px;padding:2px 8px;background:#FF0033;color:#fff;font-family:var(--disp);font-weight:900;font-size:13px;letter-spacing:.06em}
.yv figcaption{margin-top:10px;font-weight:800;font-size:15px;line-height:1.5}
.yv figcaption time{display:block;margin-top:2px;font-family:var(--disp);font-weight:900;font-size:14px;color:var(--mute);letter-spacing:.04em}
.yt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px}
.yt-sub{display:inline-flex;align-items:center;gap:.5em;min-height:52px;padding:0 1.2em;background:var(--ink);color:#000;text-decoration:none;font-weight:900;font-size:16px;transition:background .2s}
.yt-sub .ico{font-size:24px}
.yt-sub:hover{background:#fff}
.yv-soon{display:flex;align-items:center;gap:22px;max-width:760px;padding:20px 24px;border:2px solid var(--line2);background:linear-gradient(100deg,rgba(255,230,0,.08),transparent 60%)}
.yv-soon img{width:120px;height:auto;flex:none}
.yv-soon p{margin:6px 0 0}
.yv-soon-t{margin:0!important;font-family:var(--disp);font-weight:900;font-size:clamp(32px,4vw,56px);line-height:1;color:var(--y)}
.gvids{padding:clamp(18px,3vw,36px) var(--gut);border-top:2px solid var(--line)}
.gvids .sec-t{margin-top:0}
@media (max-width:599px){ .yv-soon{flex-direction:column;align-items:flex-start} .yv-soon img{width:96px} .yt-acts .yt-sub{flex:1 1 100%;justify-content:center} }
@media (min-width:600px){
  .yv-wrap{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 44px}
  .yv-wrap .yt-acts{flex-direction:column;align-items:flex-start;margin-top:0;padding-bottom:40px}
}