/* =========================================================
   kageyaman.com — 「陰（かげ）で、照らす。」
   白・黒・黄の3色。黄色は「光が当たっているもの」だけに使う。
   ========================================================= */

:root{
  --white:#FFFFFF; --paper:#F3F3EF; --black:#0B0B0B; --yellow:#FFE600;
  --gray:rgba(11,11,11,.55);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-telop:cubic-bezier(.77,0,.175,1);
  --ease-snap:cubic-bezier(.34,1.56,.64,1);
  --ease-iris:cubic-bezier(.83,0,.17,1);
  --ease-in:cubic-bezier(.55,0,1,.45);
  --f-ja:"Zen Kaku Gothic New",system-ui,sans-serif;
  --f-head:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;
  --f-en:"Archivo","Zen Kaku Gothic New",sans-serif;
  --f-dot:"DotGothic16",monospace;
  --rail:88px; --hd:64px;
  --gut:clamp(16px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hd);overflow-x:hidden;overflow-x:clip}
html[data-motion="full"]{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--f-ja);font-size:16px;line-height:1.9;letter-spacing:.02em;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dd,figure{margin:0}
em{font-style:normal}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:8px;top:-60px;z-index:10000;background:var(--yellow);color:var(--black);padding:8px 14px;font-weight:700}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--black);outline-offset:3px;box-shadow:0 0 0 6px var(--yellow)}
[data-theme="dark"] :focus-visible,.ft :focus-visible{outline-color:var(--yellow);box-shadow:none}
.center{text-align:center;margin-top:48px}

/* ---------- 共通：ボタン ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:16px 28px;font-weight:900;text-decoration:none;border:2px solid var(--black);border-radius:999px;transition:transform .24s var(--ease-out),background .2s,color .2s;line-height:1.3}
.btn--y{background:var(--yellow);color:var(--black)}
.btn--line{background:transparent}
.btn:hover{transform:translateY(-2px)}
[data-theme="dark"] .btn--line{border-color:var(--white);color:var(--white)}
[data-theme="dark"] .btn--y{border-color:var(--yellow)}

/* ---------- 共通：テロップ ---------- */
.telop{position:relative;display:inline-block;padding:.12em .5em .18em;color:var(--white);line-height:1.35;font-family:var(--f-head);font-weight:400}
.telop::before{content:"";position:absolute;inset:0;background:var(--black);transform-origin:left;transform:scaleX(0);transition:transform .36s var(--ease-telop)}
.telop__in{position:relative;display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .32s var(--ease-telop) .12s}
.telop em{color:var(--black);background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/0% 100%;padding:0 .1em;transition:background-size .24s var(--ease-out) .44s}
.telop--y::before{background:var(--yellow)}
.telop--y{color:var(--black)}
.is-in .telop::before,.telop.is-in::before{transform:scaleX(1)}
.is-in .telop__in,.telop.is-in .telop__in{clip-path:inset(0 0 0 0)}
.is-in .telop em,.telop.is-in em{background-size:100% 100%}
[data-theme="dark"] .telop:not(.telop--y){color:var(--black)}
[data-theme="dark"] .telop:not(.telop--y)::before{background:var(--white)}

/* ---------- ヘッダー ---------- */
.hd{position:fixed;inset:0 0 auto 0;height:var(--hd);z-index:900;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut) 0 calc(var(--gut));color:var(--fg,var(--black));background:var(--hd-bg,var(--white));border-bottom:1px solid currentColor;transition:color .3s,background .3s}
html[data-bg="dark"] .hd{--fg:var(--white);--hd-bg:var(--black)}
html[data-bg="yellow"] .hd{--hd-bg:var(--yellow)}
.hd__logo{display:flex;align-items:center;gap:4px;text-decoration:none;font-family:var(--f-en);font-weight:900;letter-spacing:.02em;line-height:1}
.hd__name{font-size:clamp(17px,1.6vw,22px);font-variation-settings:"wdth" 112}
.hd__com{background:var(--yellow);color:var(--black);font-size:.68em;font-size:clamp(11px,1.05vw,14px);padding:3px 6px 2px;border:2px solid var(--black)}
.hd__right{display:flex;align-items:center;gap:14px}
.onair{display:flex;align-items:center;gap:10px;font-family:var(--f-dot);font-size:13px;letter-spacing:.06em;background:var(--black);color:var(--white);padding:4px 10px}
.onair__lamp{color:var(--yellow);animation:blink 1.6s steps(1) infinite}
.onair.is-off .onair__lamp{color:#555;animation:none}
@keyframes blink{50%{color:#555}}
.hd__cta{background:var(--yellow);color:var(--black);font-weight:900;text-decoration:none;padding:8px 16px;border:2px solid var(--black);border-radius:999px;font-size:14px}
.kansai-switch{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.kansai-switch__knob{position:relative;width:38px;height:20px;border-radius:20px;border:2px solid currentColor}
.kansai-switch__knob::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:currentColor;transition:transform .24s var(--ease-snap)}
html[data-kansai="1"] .kansai-switch__knob{background:var(--yellow);border-color:var(--black)}
html[data-kansai="1"] .kansai-switch__knob::after{transform:translateX(18px);background:var(--black)}
html[data-kansai="1"] .kansai-switch__ks,html[data-kansai="0"] .kansai-switch__std{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.kansai-flip{animation:kflip .32s var(--ease-out)}
@keyframes kflip{0%{transform:rotateX(90deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- 進行台本（左レール） ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:800;padding:calc(var(--hd) + 24px) 0 24px;border-right:1px solid currentColor;color:var(--fg,var(--black));display:flex;flex-direction:column;transition:color .3s,background .3s;background:var(--white)}
html[data-bg="dark"] .rail{--fg:rgba(255,255,255,.75);background:var(--black)}
html[data-bg="yellow"] .rail{background:var(--yellow)}
.rail__ttl{writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;margin:0 auto 14px;opacity:.7}
.rail__list{display:flex;flex-direction:column;gap:2px;font-family:var(--f-en);font-size:10px;letter-spacing:.06em;overflow:hidden}
.rail__list a{display:block;text-decoration:none;padding:4px 8px;line-height:1.3;transition:background .24s,color .24s}
.rail__list a b{display:block;font-size:12px;font-weight:900}
.rail__list a span{display:block;font-family:var(--f-ja);font-size:9px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail__list a.is-cur{background:var(--yellow);color:var(--black)}
main,.ft{margin-left:var(--rail)}

/* ---------- セクション共通 ---------- */
.sec{position:relative;padding:clamp(96px,12vw,160px) var(--gut)}
.sec[data-theme="dark"]{background:var(--black);color:var(--white)}
.sec[data-theme="yellow"]{background:var(--yellow);color:var(--black)}
.sec__head{max-width:1100px;margin:0 auto 56px}
.sec__en{font-family:var(--f-en);font-weight:900;font-size:clamp(44px,9vw,128px);line-height:.9;letter-spacing:-.01em;font-variation-settings:"wdth" 125;margin-bottom:18px;transition:font-variation-settings .8s var(--ease-out)}
.sec__en.is-in{font-variation-settings:"wdth" 125}
.sec__ja{font-size:clamp(18px,2.4vw,30px)}
.sec__lead{max-width:720px;margin-top:22px}

/* 流れる帯 */
/* 傾けた帯の左右の端が見えないよう画面より長くし、上下の斜めのすき間は前後のセクションの色で埋める */
.band{--gap:var(--black);background:var(--black);color:var(--yellow);overflow:hidden;border-block:3px solid var(--black);margin-left:calc(var(--rail) - 80px);margin-right:-80px;box-shadow:0 -48px 0 var(--gap),0 48px 0 var(--gap);transform:skewY(-1.5deg);position:relative;z-index:1}
.band--rev{--gap:var(--white);background:var(--yellow);color:var(--black)}
.band__track{display:flex;width:max-content;font-family:var(--f-head);font-size:clamp(18px,2.4vw,30px);padding:10px 0;white-space:nowrap;will-change:transform;transform:translate3d(var(--bx,0px),0,0) skewX(var(--bsk,0deg))}
.band__track span{padding-right:.6em}

/* ================= HERO（黒い舞台＋網点の陰山） ================= */
.hero{position:relative;min-height:100svh;padding:calc(var(--hd) + 48px) var(--gut) 96px;display:flex;align-items:center;overflow:hidden;background:var(--black);color:var(--white)}
/* パタパタ（反転表示板） */
.hero .hero__board{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:22px;z-index:1}
.flap{display:flex;gap:.1em;font-family:var(--f-en);font-weight:900;font-size:min(12vw,30svh);font-variation-settings:"wdth" 100;line-height:1}
.flap__cell{position:relative;width:.86em;height:1.12em;perspective:5em;cursor:pointer}
.flap__h{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#171717;backface-visibility:hidden}
.flap__h span{position:absolute;left:0;right:0;height:1.12em;line-height:1.12em;text-align:center;color:var(--yellow)}
.flap__up,.flap__fu{top:0;border-radius:.06em .06em 0 0}
.flap__dn,.flap__fd{bottom:0;border-radius:0 0 .06em .06em}
.flap__up span,.flap__fu span{top:0}
.flap__dn span,.flap__fd span{bottom:0}
.flap__cell::after{content:"";position:absolute;left:0;right:0;top:50%;height:.02em;background:var(--black);z-index:4}
.flap__fu{transform-origin:50% 100%;z-index:3}
.flap__fd{transform-origin:50% 0;z-index:3;transform:rotateX(90deg)}
.flap__cell.is-go .flap__fu{animation:flapU .08s ease-in forwards}
.flap__cell.is-go .flap__fd{animation:flapD .08s ease-out .08s forwards}
.flap__cell.is-fast .flap__fu{animation-duration:.035s}
.flap__cell.is-fast .flap__fd{animation-duration:.035s;animation-delay:.035s}
@keyframes flapU{to{transform:rotateX(-90deg)}}
@keyframes flapD{to{transform:rotateX(0)}}
.flap__cap{background:var(--yellow);color:var(--black);font-family:var(--f-head);font-size:clamp(15px,1.6vw,22px);padding:4px 16px;white-space:nowrap;min-height:1.6em}
.hero__body{position:relative;z-index:2;max-width:min(760px,58%);pointer-events:none}
.hero__body a,.hero__body .super{pointer-events:auto}
.hero__onair{display:flex;gap:14px;align-items:center;font-family:var(--f-dot);font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.65);margin-bottom:22px}
.hero__rec{color:var(--yellow);animation:blink 1.6s steps(1) infinite}
.hero__ttl{font-family:var(--f-head);font-weight:400;font-size:clamp(40px,6vw,104px);line-height:1.12;letter-spacing:-.01em}
.hero__l{display:block;overflow:hidden;padding-bottom:.06em}
.hero__l>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out)}
.hero__l:nth-child(2)>span{transition-delay:.12s}.hero__l:nth-child(3)>span{transition-delay:.24s}
.hero.is-in .hero__l>span{transform:none}
.hero__s{font-size:.46em;color:var(--yellow);letter-spacing:.04em}
.hero__ttl em{color:var(--black);background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/0% 100%;padding:0 .08em;transition:background-size .5s var(--ease-out) .9s}
.hero.is-in .hero__ttl em{background-size:100% 100%}
/* テレビの名前テロップ */
.super{display:inline-flex;flex-direction:column;align-items:flex-start;margin:34px 0 26px;opacity:0;transform:translateX(-24px);transition:opacity .4s 1s,transform .6s var(--ease-snap) 1s}
.hero.is-in .super{opacity:1;transform:none}
.super__name{display:flex;align-items:baseline;gap:12px;background:var(--yellow);color:var(--black);padding:6px 18px 8px;line-height:1.2}
.super__name b{font-family:var(--f-head);font-weight:400;font-size:clamp(22px,2.3vw,32px)}
.super__name span{font-size:11px;font-weight:700;letter-spacing:.24em}
.super__role{position:relative;height:38px;min-width:min(360px,80vw);overflow:hidden}
.roles{position:relative;height:100%}
.roles li{position:absolute;left:0;top:0;display:inline-block;isolation:isolate;white-space:nowrap;padding:.3em .9em;font-weight:700;font-size:clamp(14px,1.3vw,17px);color:var(--black);opacity:0}
.roles li::before{content:"";position:absolute;inset:0;background:var(--white);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease-telop)}
.roles li b{font-weight:900}
.roles li.is-on{opacity:1}
.roles li.is-on::before{transform:scaleX(1)}
.roles li.is-out::before{transform-origin:right;transform:scaleX(0);transition-duration:.24s}
.roles li.is-out{opacity:1;transition:opacity 0s .24s}
.hero__lead{font-weight:700;font-size:clamp(15px,1.3vw,18px);line-height:1.9;max-width:520px;color:rgba(255,255,255,.88);opacity:0;transition:opacity .6s 1.2s}
.hero.is-in .hero__lead{opacity:1}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;opacity:0;transition:opacity .6s 1.35s}
.hero.is-in .hero__btns{opacity:1}
.hero__next{position:absolute;left:var(--gut);bottom:24px;font-family:var(--f-en);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.7);animation:bob 1.6s ease-in-out infinite;z-index:2}
@keyframes bob{50%{transform:translateY(4px)}}

/* ================= WHO AM I ================= */
.who{overflow:hidden}
.who__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:start}
.who__photo{position:relative;padding:20px 30px 60px}
.who__pic{position:relative;aspect-ratio:4/5;border-radius:999px;overflow:hidden;outline:2px solid rgba(255,255,255,.12);outline-offset:10px}
.who__pic img{width:100%;height:100%;object-fit:cover;object-position:52% 40%;filter:grayscale(1) contrast(1.08);transition:filter .6s,transform 1.2s var(--ease-out)}
.who__photo:hover .who__pic img{filter:none;transform:scale(1.04)}
.badge{position:absolute;right:-6px;top:-16px;width:clamp(110px,12vw,150px);aspect-ratio:1;pointer-events:none}
.badge svg{width:100%;height:100%;transform:rotate(var(--rot,0deg));fill:var(--yellow);font-family:var(--f-en);font-weight:800;font-size:17px;letter-spacing:2.2px}
.badge__c{position:absolute;inset:30%;display:grid;place-items:center;border-radius:50%;background:var(--yellow);color:var(--black);font-family:var(--f-en);font-weight:900;font-size:clamp(18px,2vw,24px)}
.vtags{position:absolute;inset:0;pointer-events:none}
.vtag{position:absolute;left:var(--x);top:var(--y);writing-mode:vertical-rl;white-space:nowrap;background:var(--yellow);color:var(--black);font-weight:900;font-size:clamp(12px,1.1vw,15px);padding:10px 5px;letter-spacing:.12em;line-height:1.2;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;transform:translate3d(var(--dx,0px),calc(var(--dy,0px) + var(--fy,0px)),0) rotate(var(--dr,0deg));box-shadow:4px 4px 0 rgba(0,0,0,.6)}
.vtag--b{background:var(--white)}
.vtag.is-drag{cursor:grabbing;z-index:5}
.who__kana{font-size:13px;letter-spacing:.4em;opacity:.7}
.who__name{font-family:var(--f-head);font-size:clamp(44px,6vw,84px);line-height:1.1;margin-bottom:24px}
.prof{display:grid;grid-template-columns:repeat(4,auto);gap:2px;margin-bottom:32px;justify-content:start}
.prof div{background:var(--white);color:var(--black);padding:6px 14px;line-height:1.4}
.prof dt{font-size:10px;letter-spacing:.1em;opacity:.6}
.prof dd{font-weight:900;font-size:15px}
.age{font-family:var(--f-en);font-size:22px;background:var(--yellow);padding:0 4px}
.who__lead p+p{margin-top:1em}
.who__lead strong{color:var(--yellow)}
.cards{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:40px 0 28px}
.card{position:relative;background:var(--white);color:var(--black);padding:16px 14px;min-height:150px;display:flex;flex-direction:column;gap:4px;box-shadow:5px 5px 0 var(--yellow);transform:translateY(40px) rotate(var(--cr,0deg));opacity:0;transition:transform .42s var(--ease-snap),opacity .3s;transition-delay:calc(var(--i,0) * 90ms)}
.cards.is-in .card{transform:rotate(var(--cr,0deg));opacity:1}
.cards.is-in:hover .card{transform:rotate(calc((var(--i) - 1.5) * 6deg)) translateY(calc(abs(var(--i) - 1.5) * 6px));transition-delay:0s}
.card__co{font-size:11px;font-weight:700;line-height:1.4}
.card__role{font-family:var(--f-head);font-size:clamp(15px,1.45vw,21px);line-height:1.25;word-break:keep-all}
.card__note{margin-top:auto;font-size:11px;line-height:1.5}
.card__note b{display:block;font-family:var(--f-en);font-weight:900;font-size:12px;background:var(--black);color:var(--yellow);padding:0 6px;margin-bottom:4px;width:fit-content}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.pills li{border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:3px 12px;font-size:13px}

/* ================= STORY ================= */
.story__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.story__photo{position:sticky;top:calc(var(--hd) + 32px)}
.story__photo img{border-radius:999px 999px 24px 24px;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .6s}
.story__photo:hover img{filter:none}
.story__photo figcaption{margin-top:12px;font-size:12px;opacity:.7}
.chap{position:relative;padding:0 0 56px 28px;border-left:3px solid var(--black)}
.chap::before{content:"";position:absolute;left:-11px;top:6px;width:19px;height:19px;border-radius:50%;background:var(--white);border:3px solid var(--black);transition:background .3s}
.chap.is-in::before{background:var(--yellow)}
.chap:last-child{padding-bottom:0}
.chap__no{font-family:var(--f-en);font-weight:900;font-size:13px;letter-spacing:.1em}
.chap__no span{margin-left:12px;background:var(--black);color:var(--white);padding:1px 8px;font-size:11px}
.chap__ttl{font-family:var(--f-head);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1.4;margin:6px 0 14px}
.story__end{max-width:1240px;margin:72px auto 0;text-align:center;font-size:clamp(17px,2vw,24px);font-weight:700;line-height:2.2}
.story__end .telop{font-size:1.4em;margin:0 .3em}
.hl-guide{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:24px;font-size:13px;font-weight:700}
.hl-guide__pen{width:14px;height:28px;background:var(--yellow);border:2px solid var(--black);border-radius:2px;transform:rotate(-25deg)}
.hl-count{margin-left:8px;background:var(--black);color:var(--white);padding:0 10px;font-family:var(--f-en)}
.hl-count b{color:var(--yellow)}
.hl-count i{font-style:normal}
/* マーカー */
[data-hl]{position:relative}
.hl-c{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat;background-position:0 calc(88% + var(--jy,0) * 1px);background-size:0% .58em;transition:background-size .18s ease-out}
.hl-c.on{background-size:101% .58em}
.stagger .hl-c.on{transition-delay:calc(var(--i) * 18ms)}
.hl-note{max-width:760px;margin:64px auto 0;background:var(--yellow);border:3px solid var(--black);padding:28px 32px;box-shadow:8px 8px 0 var(--black);animation:pop .42s var(--ease-snap)}
.hl-note__ttl{font-family:var(--f-head);font-size:20px;margin-bottom:10px}
.hl-note__list{list-style:decimal;padding-left:1.4em;font-weight:700}
@keyframes pop{from{transform:scale(.8);opacity:0}}

/* ================= HISTORY 陰山線 ================= */
.route{padding:0;--track-w:4200px}
.route__pin{height:calc(var(--track-w) - 100vw + 100svh + 200px)}
.route__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:calc(var(--hd) + 24px) 0 40px}
.route__head{padding:0 var(--gut)}
.route__head .sec__en{font-size:clamp(40px,7vw,96px);margin-bottom:10px}
.route__board{margin:22px var(--gut) 0;align-self:flex-start;display:flex;gap:16px;align-items:center;background:#000;border:3px solid #333;padding:8px 18px;font-family:var(--f-dot);color:var(--yellow);font-size:clamp(16px,2.2vw,28px);min-width:min(560px,80vw)}
.route__board-lbl{font-size:.6em;color:var(--white);opacity:.7}
.route__board-txt.is-flip{animation:kflip .3s var(--ease-out)}
.route__view{position:relative;flex:1;min-height:320px}
.route__track{position:absolute;left:0;top:0;bottom:0;width:var(--track-w);will-change:transform}
.route__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route__svg .ln{fill:none;stroke-linecap:round}
.route__svg .ln--main{stroke:var(--white);stroke-width:10}
.route__svg .ln--done{stroke:var(--yellow);stroke-width:10}
.route__svg .ln--salon{stroke:var(--yellow);stroke-width:5;stroke-dasharray:2 12}
.route__svg .ln--tw{stroke:var(--white);stroke-width:5;stroke-dasharray:14 8;opacity:.7}
.route__svg .ln--ext{stroke:var(--white);stroke-width:5;opacity:.6;stroke-dasharray:6 8}
.route__svg .lbl{fill:var(--white);font-family:var(--f-ja);font-size:13px;font-weight:700}
.route__svg .lbl--y{fill:var(--yellow)}
.route__svg .end{fill:var(--black);stroke:var(--white);stroke-width:3}
.stations{position:absolute;inset:0}
.st{position:absolute;left:var(--sx);top:var(--line-y,55%);width:250px;transform:translate(-14px,-14px)}
.st::before{content:"";display:block;width:28px;height:28px;border-radius:50%;background:var(--black);border:5px solid var(--white);transition:background .3s,transform .4s var(--ease-snap)}
.st.is-pass::before{background:var(--yellow);border-color:var(--yellow)}
.st.is-cur::before{transform:scale(1.35)}
.st__y{display:block;font-family:var(--f-en);font-weight:900;font-size:40px;line-height:1;margin-top:18px;font-variation-settings:"wdth" 80;transition:color .3s}
.st.is-cur .st__y{color:var(--yellow)}
.st__n{display:inline-block;margin-top:6px;background:var(--white);color:var(--black);font-weight:900;font-size:14px;padding:0 8px}
.st.is-cur .st__n{background:var(--yellow)}
.st__d{display:block;margin-top:8px;font-size:13px;line-height:1.6;opacity:.85}
.st__c{display:block;margin-top:6px;font-size:12px;line-height:1.6;color:var(--yellow);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.st.is-pass .st__c{opacity:1;transform:none}
.st--big::before{width:36px;height:36px}
.st--now::before{border-radius:8px;width:40px;height:40px}
.route__train{position:absolute;left:40%;top:var(--line-y,55%);transform:translate(-50%,-100%) translateY(-22px);pointer-events:none;z-index:3}
.train{position:relative;display:flex;align-items:center;gap:8px;background:var(--yellow);color:var(--black);border:3px solid var(--black);border-radius:28px 40px 8px 8px;padding:8px 22px 8px 10px;box-shadow:0 0 0 3px var(--yellow);transform:skewX(var(--tsk,0deg)) translateY(var(--tjy,0px));transform-origin:bottom}
.train__win{width:46px;height:46px;border-radius:50%;overflow:hidden;border:3px solid var(--black);background:#fff}
.train__win img{width:100%;height:100%;object-fit:cover}
.train__name{font-family:var(--f-head);font-size:16px}
.route__speed{position:absolute;right:100%;top:30%;display:flex;flex-direction:column;gap:7px;opacity:var(--spd,0);margin-right:6px}
.route__speed i{display:block;height:3px;background:var(--yellow);width:60px;margin-left:auto}
.route__speed i:nth-child(2){width:90px}.route__speed i:nth-child(3){width:40px}.route__speed i:nth-child(4){width:70px}
.route__express{position:absolute;left:var(--gut);bottom:28px;font-size:12px;background:var(--yellow);color:var(--black);padding:2px 10px;font-weight:700;opacity:var(--spd,0);transition:opacity .3s}

/* 縦の路線図（スマホ・動きひかえめ） */
.route.is-vertical .route__pin{height:auto}
.route.is-vertical .route__sticky{position:relative;height:auto;overflow:visible;padding:clamp(96px,12vw,160px) var(--gut)}
.route.is-vertical .route__head,.route.is-vertical .route__board{padding-left:0;margin-left:0}
.route.is-vertical .route__board{display:none}
.route.is-vertical .route__view{flex:none;min-height:0;margin-top:40px}
.route.is-vertical .route__track{position:relative;width:auto;transform:none!important}
.route.is-vertical .route__svg{display:none}
.route.is-vertical .stations{position:relative;border-left:8px solid var(--white);margin-left:16px}
.route.is-vertical .st{position:relative;left:auto;top:auto;width:auto;transform:none;padding:0 0 40px 34px}
.route.is-vertical .st::before{position:absolute;left:-18px;top:2px}
.route.is-vertical .st__y{margin-top:0}
.route.is-vertical .st--end::after{position:static;display:inline-block;margin-left:8px}
.route.is-vertical .route__train,.route.is-vertical .route__express{display:none}

/* ================= SKILLS ミキサー ================= */
.mixer{max-width:1100px;margin:0 auto;background:var(--black);color:var(--white);border-radius:20px;padding:22px clamp(14px,3vw,36px) 28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px)}
.mixer__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-en);font-size:11px;letter-spacing:.14em;margin-bottom:18px}
.mixer__lamp{padding:2px 10px;border:1px solid #444;color:#555}
.mixer.is-in .mixer__lamp{color:var(--black);background:var(--yellow);border-color:var(--yellow)}
.mixer__ch{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(6px,1.4vw,18px)}
.fader{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:6px 8px;padding:14px 8px;border-radius:10px;background:#141414;outline:none}
.fader:focus-visible{box-shadow:0 0 0 3px var(--yellow)}
.fader__led{grid-row:1;grid-column:1;width:10px;height:240px;display:flex;flex-direction:column-reverse;gap:4px;--level:0}
.fader__led::before{content:"";flex:1;border-radius:2px;background:linear-gradient(to top,var(--yellow) 0 calc(var(--level) * 10%),#2a2a2a calc(var(--level) * 10%));-webkit-mask:repeating-linear-gradient(to top,#000 0 20px,transparent 20px 24px);mask:repeating-linear-gradient(to top,#000 0 20px,transparent 20px 24px)}
.fader__rail{grid-row:1;grid-column:2;position:relative;height:240px;width:100%;display:flex;justify-content:center}
.fader__rail::before{content:"";width:6px;border-radius:3px;background:#000;box-shadow:inset 0 0 0 1px #333}
.fader__knob{position:absolute;left:50%;top:0;width:min(54px,100%);height:30px;margin-left:calc(min(54px,100%) / -2);margin-top:-15px;border-radius:5px;background:linear-gradient(#f2f2f2,#bdbdbd);border:2px solid #000;box-shadow:0 4px 0 #000;cursor:grab;touch-action:none;transform:translate3d(0,var(--ky,0px),0)}
.fader__knob::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:3px;margin-top:-1.5px;background:var(--black)}
.fader.is-drag .fader__knob{cursor:grabbing;background:var(--yellow)}
.fader__lbl{grid-column:1/-1;font-size:12px;font-weight:700;text-align:center;line-height:1.3;white-space:nowrap}
.fader__val{grid-column:1/-1;text-align:center;font-family:var(--f-en);font-weight:900;color:var(--yellow);font-size:14px;line-height:1}
.mixer__note{margin-top:16px;font-size:12px;opacity:.6}
.say{position:fixed;left:50%;bottom:clamp(20px,6vh,60px);z-index:1200;transform:translate(-50%,20px);background:var(--black);color:var(--yellow);font-family:var(--f-head);font-size:clamp(16px,2vw,24px);padding:10px 22px;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease-snap);border:3px solid var(--yellow);max-width:90vw;text-align:center}
.say.is-on{opacity:1;transform:translate(-50%,0)}

/* ================= SERVICE ================= */
.svc{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc__item--main{background:var(--yellow)}
.svc__item--main .svc__ttl em{background:var(--black);color:var(--yellow)}
.svc__item--main .funnel__s{background:var(--white)}
.svc__item--main .funnel__s.is-on{background:var(--black)}
/* 広告運用：回し続けるループ */
.loop{position:relative;width:min(240px,70%);aspect-ratio:1;margin:8px auto}
.loop__ring{position:absolute;inset:14%;border:3px solid var(--black);border-radius:50%;animation:spin 6s linear infinite}
.loop__dot{position:absolute;left:50%;top:-10px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--yellow);border:3px solid var(--black)}
@keyframes spin{to{transform:rotate(360deg)}}
.loop__s{position:absolute;background:var(--black);color:var(--white);font-weight:900;font-size:13px;padding:2px 10px;line-height:1.5;white-space:nowrap;animation:loopon 6s steps(1) infinite}
.loop__s--1{left:50%;top:0;transform:translateX(-50%)}
.loop__s--2{right:-4%;top:50%;transform:translateY(-50%);animation-delay:1.5s}
.loop__s--3{left:50%;bottom:0;transform:translateX(-50%);animation-delay:3s}
.loop__s--4{left:-4%;top:50%;transform:translateY(-50%);animation-delay:4.5s}
@keyframes loopon{0%{background:var(--yellow);color:var(--black)}25%,100%{background:var(--black);color:var(--white)}}
.loop__c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--f-head);font-weight:400;font-size:14px;line-height:1.5}
.svc__item{border:3px solid var(--black);padding:28px 24px;display:flex;flex-direction:column;gap:16px;background:var(--white);position:relative}
.svc__no{font-family:var(--f-en);font-weight:800;font-size:12px;letter-spacing:.08em}
.svc__ttl{font-family:var(--f-head);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.45}
.svc__ttl em{background:var(--yellow);padding:0 .15em}
.svc__range{margin-top:auto;font-size:12px;line-height:1.7;border-top:1px solid var(--black);padding-top:12px}
.prio{background:var(--paper);padding:14px;border-radius:10px}
.prio__ttl{font-size:12px;font-weight:900;margin-bottom:8px}
.prio__ttl small{font-weight:400;margin-left:4px}
.prio__list{display:flex;flex-direction:column;gap:5px;position:relative;counter-reset:p}
.prio__list li{counter-increment:p;display:flex;align-items:center;gap:8px;background:var(--white);border:2px solid var(--black);padding:3px 10px;font-weight:700;font-size:14px;line-height:1.6}
.prio__list li::before{content:counter(p);font-family:var(--f-en);font-weight:900;width:1.4em;opacity:.5}
.prio__design{background:var(--yellow)!important;cursor:grab;touch-action:none;user-select:none;position:relative;z-index:2;transform:translate3d(0,var(--py,0px),0) rotate(var(--pr,0deg))}
.prio__design.is-drag{cursor:grabbing;box-shadow:6px 6px 0 var(--black)}
.prio__design.is-back{transition:transform .5s var(--ease-snap)}
.funnel{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0}
.funnel__s{display:block;text-align:center;font-weight:900;font-size:13px;border:2px solid var(--black);padding:4px 0;transition:background .3s,color .3s}
.funnel__s:nth-child(1){width:100%}.funnel__s:nth-child(2){width:78%}.funnel__s:nth-child(3){width:56%}
.funnel__s.is-on{background:var(--black);color:var(--yellow)}
.funnel__ball{position:absolute;left:50%;top:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--yellow);border:2px solid var(--black);transform:translate3d(0,var(--fb,0px),0);opacity:var(--fbo,0)}
/* 04 AI：経験 × AI のメーター */
.accel{display:grid;grid-template-columns:auto auto auto;justify-content:start;align-items:center;gap:6px 10px;background:var(--black);color:var(--white);border-radius:10px;padding:16px 18px}
.accel__a,.accel__b{font-weight:900;font-size:15px}
.accel__b{background:var(--yellow);color:var(--black);padding:0 8px;font-family:var(--f-en)}
.accel__x{font-family:var(--f-en);color:var(--yellow);font-size:22px;line-height:1}
.accel__bar{grid-column:1/-1;height:10px;background:#2a2a2a;border-radius:5px;overflow:hidden;margin-top:8px}
.accel__bar i{display:block;height:100%;width:30%;background:repeating-linear-gradient(-45deg,var(--yellow) 0 8px,#d9c400 8px 16px);border-radius:5px;transition:width 1.6s var(--ease-out) .3s}
.is-in .accel__bar i{width:100%}
.accel__out{grid-column:1/-1;font-family:var(--f-en);font-weight:900;color:var(--yellow);font-size:13px;letter-spacing:.1em;animation:blink 1s steps(1) infinite}
/* 05 映像：カチンコ */
.clap{width:min(280px,100%);margin:4px 0}
.clap__top{height:26px;border:3px solid var(--black);border-bottom:0;background:repeating-linear-gradient(-60deg,var(--black) 0 14px,var(--white) 14px 28px);transform-origin:0 100%;transform:rotate(-22deg);border-radius:4px 4px 0 0}
.is-in .clap__top{animation:clap .5s var(--ease-in) .6s forwards}
@keyframes clap{60%{transform:rotate(0)}75%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
.clap__body{display:flex;flex-wrap:wrap;gap:4px 14px;background:var(--black);color:var(--white);padding:12px 14px;font-family:var(--f-en);font-size:12px;letter-spacing:.1em;border-radius:0 0 6px 6px}
.clap__body b{color:var(--yellow);font-size:16px;margin-left:4px}
.clap__rec{color:var(--yellow);margin-left:auto;animation:blink 1.6s steps(1) infinite}
/* 06 システム：ターミナル */
.term{background:var(--black);color:var(--white);border-radius:8px;padding:12px 16px;font-family:var(--f-dot);font-size:14px;line-height:1.9}
.term i{font-style:normal;color:var(--yellow);margin-right:6px}
.term__ok{color:var(--yellow)}
.term__caret{animation:caret 1.06s steps(1) infinite}

/* ================= ON STAGE ================= */
.stage{overflow:hidden}
.stage__lamp{font-size:.18em;vertical-align:middle;background:var(--black);color:var(--yellow);padding:.2em .6em;letter-spacing:.06em;font-variation-settings:"wdth" 100;animation:blink 1.6s steps(1) infinite}
.nums{max-width:1100px;margin:0 auto 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nums li{border-top:3px solid var(--black);padding-top:12px;line-height:1.1}
.nums b{font-family:var(--f-en);font-weight:900;font-size:clamp(48px,7vw,96px);font-variation-settings:"wdth" 75}
.nums span{font-weight:900;font-size:clamp(14px,1.6vw,20px);margin-left:4px}
.nums small{display:block;margin-top:8px;font-size:12px}
.strip{margin:0 calc(var(--gut) * -1)}
.strip__track{display:flex;gap:20px;padding:0 var(--gut);width:max-content;will-change:transform;transform:translate3d(var(--sx,0px),0,0)}
.clip{width:clamp(260px,30vw,400px);flex:none;transition:opacity .24s,transform .24s var(--ease-out)}
.strip__track:hover .clip{opacity:.35}
.strip__track .clip:hover{opacity:1;transform:translateY(-6px)}
.clip>a,.clip>div{display:block;text-decoration:none}
.clip img{aspect-ratio:16/9;width:100%;object-fit:cover;border:3px solid var(--black)}
.clip__lbl{display:inline-block;margin-top:12px;background:var(--black);color:var(--yellow);font-size:11px;font-weight:700;padding:0 8px}
.clip__ttl{display:block;margin-top:6px;font-weight:900;line-height:1.5}
.clip__memo{display:block;font-size:12px;opacity:.7;margin-top:4px}

/* ================= FREE TALK ================= */
.talk{min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden}
.talk__beam{position:absolute;left:50%;top:-10%;width:200vmax;height:140%;margin-left:-100vmax;transform-origin:50% 0;transform:rotate(var(--beam,24deg));background:conic-gradient(from 168deg at 50% 0%,transparent 0deg,rgba(255,230,0,.0) 2deg,rgba(255,230,0,.28) 8deg,rgba(255,230,0,.32) 12deg,rgba(255,230,0,.28) 16deg,rgba(255,230,0,0) 22deg,transparent 24deg);pointer-events:none;opacity:0;transition:opacity .6s}
.talk.is-in .talk__beam{opacity:1}
.talk__in{position:relative;max-width:820px}
.talk__status{display:inline-flex;gap:10px;align-items:center;font-family:var(--f-dot);font-size:clamp(13px,1.6vw,18px);border:1px solid rgba(255,255,255,.35);padding:4px 14px;margin-bottom:28px}
.talk__status s{opacity:.45}
.talk__status b{color:var(--yellow);font-weight:400}
.talk__status i{font-style:normal;color:var(--yellow);animation:blink 1.6s steps(1) infinite}
.talk .sec__en{color:var(--yellow);font-size:clamp(28px,4vw,48px)}
.talk__ttl{font-family:var(--f-head);font-weight:400;font-size:clamp(40px,7vw,96px);line-height:1.2;margin-bottom:28px}
.talk__ttl em{color:var(--black);background:var(--yellow);padding:0 .12em}
.talk__lead{margin:0 auto 40px;max-width:640px}
.talk__btn{position:relative;display:inline-grid;place-items:center;min-width:min(420px,86vw);padding:26px 40px;border-radius:999px;background:var(--yellow);color:var(--black);font-family:var(--f-head);font-size:clamp(18px,2.2vw,26px);text-decoration:none;overflow:hidden;box-shadow:0 0 0 6px rgba(255,230,0,.25),0 0 80px rgba(255,230,0,.5)}
.talk__btn>span{grid-area:1/1;transition:transform .18s var(--ease-out),opacity .18s}
.talk__btn-b{transform:translateY(100%);opacity:0}
.talk__btn:hover .talk__btn-a{transform:translateY(-100%);opacity:0}
.talk__btn:hover .talk__btn-b{transform:none;opacity:1}
.talk__note{margin-top:18px;font-size:13px;opacity:.7}
.flood{position:fixed;z-index:6000;border-radius:50%;background:var(--yellow);width:20px;height:20px;transform:translate(-50%,-50%) scale(0);transition:transform .32s var(--ease-in);pointer-events:none}
.flood.is-on{transform:translate(-50%,-50%) scale(200)}

/* ================= FOLLOW 番組表（SNS） ================= */
.epg-wrap{max-width:960px;margin:0 auto}
.epg__head{display:grid;grid-template-columns:112px 1.1fr 1.6fr 150px 48px;height:32px;align-items:center;font-family:var(--f-dot);font-size:11px;color:var(--gray)}
.epg{border-bottom:2px solid var(--black)}
.epg li{position:relative}
.epg li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--black);transform:scaleX(0);transform-origin:left;transition:transform .48s var(--ease-telop) calc(var(--i) * 60ms)}
.epg.is-in li::before{transform:scaleX(1)}
.epg__row{position:relative;display:grid;grid-template-columns:112px 1.1fr 1.6fr 150px 48px;align-items:center;min-height:96px;text-decoration:none;isolation:isolate}
.epg__row::before{content:"";position:absolute;inset:2px 0 0;background:var(--yellow);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-telop)}
.epg__row:hover::before,.epg__row:focus-visible::before{transform:scaleX(1)}
.epg__row:active::before{transform:scaleX(1);transition:none}
.epg__row>*{clip-path:inset(0 0 100% 0);transition:clip-path .36s var(--ease-out) calc(var(--i) * 60ms + 120ms)}
.epg li{--i:0}
.epg.is-in .epg__row>*{clip-path:inset(-4px -4px -4px -4px)}
.epg__ch{display:flex;flex-direction:column;line-height:1}
.epg__ch small{font-family:var(--f-dot);font-size:12px}
.epg__ch b{display:inline-block;font-family:var(--f-en);font-weight:900;font-variation-settings:"wdth" 62;font-size:44px}
.epg.is-in .epg__ch b{animation:epgflip .18s var(--ease-out) calc(var(--i) * 60ms + 200ms) backwards}
.epg__row:hover .epg__ch b{animation:epgflip .18s var(--ease-out)}
@keyframes epgflip{from{transform:rotateX(90deg)}}
.epg__st{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.epg__ico{width:20px;height:20px;fill:currentColor}
.epg__st b{font-family:var(--f-en);font-weight:900;font-variation-settings:"wdth" 125;font-size:30px;line-height:1.1}
.epg__st small{grid-column:2;font-size:13px}
.epg__pg{font-size:15px;font-weight:500;line-height:1.6;padding-right:16px}
.epg__id{display:none}
.epg__g{justify-self:start;font-style:normal;font-family:var(--f-dot);font-size:13px;border:1.5px solid var(--black);padding:2px 8px;line-height:1.4;white-space:nowrap}
.epg__g--sp{display:none}
.epg__go{font-family:var(--f-en);font-weight:800;font-size:24px;transition:transform .24s var(--ease-out),clip-path .36s var(--ease-out) calc(var(--i) * 60ms + 120ms)}
.epg__row:hover .epg__go{transform:translateX(6px)}
@media (max-width:700px){
  .epg__head{display:none}
  .epg__row{grid-template-columns:52px minmax(0,1fr) 24px;grid-template-areas:"ch st go" "ch pg go";min-height:80px;padding:14px 0;column-gap:4px;row-gap:2px}
  .epg__ch{grid-area:ch}.epg__st{grid-area:st;display:flex;gap:8px;align-items:center}.epg__pg{grid-area:pg}.epg__go{grid-area:go}
  .epg__ch small{display:none}
  .epg__ch b{font-size:32px}
  .epg__st b{font-size:22px;font-variation-settings:"wdth" 110}
  .epg__st small,.epg__g--pc{display:none}
  .epg__g--sp{display:inline-block;font-size:11px;padding:1px 6px}
  .epg__pg{font-size:12.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:0}
  .epg__id{display:inline}
  .epg__go{font-size:20px}
}
html[data-motion="reduce"] .epg li::before,html[data-motion="reduce"] .epg__row>*{transition:none;transform:none;clip-path:none}
html[data-motion="reduce"] .epg li::before{transform:scaleX(1)}

/* ================= フッター ================= */
.ft{position:relative;background:var(--black);color:var(--white);padding:0 var(--gut) 40px;overflow:hidden}
.ft__bars{display:grid;grid-template-columns:repeat(7,1fr);height:clamp(60px,10vw,120px);margin:0 calc(var(--gut) * -1)}
.ft__stage{padding:clamp(60px,10vw,120px) 0 20px;text-align:center}
.ft__big{font-family:var(--f-en);font-weight:900;font-size:clamp(48px,13vw,220px);line-height:.9;color:var(--yellow);-webkit-text-stroke:2px var(--black);font-variation-settings:"wdth" 125;white-space:nowrap}
.ft__end{text-align:center;font-family:var(--f-head);font-size:clamp(18px,2.4vw,30px);line-height:1.6;margin:30px 0 56px}
.ft__co{max-width:900px;margin:0 auto;font-size:13px;line-height:2;text-align:center}
.ft__coname{font-weight:900;font-size:16px}
.ft__co a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.ft__tools{margin:40px auto 0;text-align:center}
.motion-toggle{border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:4px 16px;font-size:12px}
.ft__rm{display:none;margin-top:10px;font-size:12px;opacity:.6}
html[data-motion="reduce"] .ft__rm{display:block}
.ft__copy{margin-top:40px;text-align:center;font-family:var(--f-en);font-size:12px;opacity:.5}

/* ================= カスタムカーソル ================= */
.cur{display:none}
html.has-cursor .cur{display:block}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor input,html.has-cursor textarea,html.has-cursor iframe{cursor:auto!important}
.cur__dot,.cur__ring{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:50%;contain:layout style}
.cur__dot{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--cur-fg,var(--black));transform:translate3d(var(--cx),var(--cy),0);transition:opacity .2s,background .3s}
.cur__ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid var(--cur-fg,var(--black));transform:translate3d(var(--rx),var(--ry),0) scale(var(--rs,1));transition:width .22s var(--ease-out),height .22s var(--ease-out),margin .22s var(--ease-out),border-radius .22s,background .22s,border-color .3s,opacity .2s;display:grid;place-items:center}
.cur__label{font-size:11px;font-weight:900;color:var(--black);white-space:nowrap;opacity:0;transition:opacity .2s}
html[data-bg="dark"] .cur{--cur-fg:var(--yellow)}
html[data-bg="yellow"] .cur{--cur-fg:var(--black)}
.cur[data-state="link"] .cur__dot{opacity:0}
.cur[data-state="link"] .cur__ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--yellow);border-color:var(--black);mix-blend-mode:multiply}
html[data-bg="dark"] .cur[data-state="link"] .cur__ring{mix-blend-mode:normal;opacity:.85}
html[data-bg="yellow"] .cur[data-state="link"] .cur__ring{background:var(--black);mix-blend-mode:normal;opacity:.25}
.cur[data-state="marker"] .cur__dot{opacity:0}
.cur[data-state="marker"] .cur__ring{width:14px;height:28px;margin:-28px 0 0 -2px;border-radius:2px;background:var(--yellow);border:2px solid var(--black);transform:translate3d(var(--cx),var(--cy),0) rotate(-25deg);mix-blend-mode:multiply}
.cur[data-state="drag"] .cur__ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:var(--yellow);border-color:var(--black)}
.cur[data-state="drag"] .cur__label{opacity:1}
.cur[data-state="spot"] .cur__dot{opacity:.9}
.cur[data-state="spot"] .cur__ring{width:320px;height:320px;margin:-160px 0 0 -160px;border:0;background:radial-gradient(circle,rgba(255,230,0,.22) 0%,rgba(255,230,0,.08) 45%,rgba(255,230,0,0) 70%)}
.cur[data-state="none"] .cur__ring{width:0;height:0;margin:0;border-width:0}
.cur.is-press .cur__ring{--rs:.85}
.cur.is-out .cur__dot,.cur.is-out .cur__ring{opacity:0}
.mag{transition:transform .35s var(--ease-snap)}

/* ================= 隠し要素 ================= */
.egg{position:fixed;inset:0;z-index:7000;background:var(--black);display:grid;place-items:center;opacity:0;pointer-events:none}
.egg.is-on{animation:egg 1.6s steps(1) forwards}
@keyframes egg{0%{opacity:1}12%{opacity:0}18%{opacity:1}100%{opacity:0}}
.egg__txt{font-family:var(--f-dot);font-size:clamp(80px,20vw,280px);line-height:1;color:var(--yellow);text-align:center}
.egg__txt span{display:block;font-size:.2em;color:var(--white);margin-top:.4em}
.candy{position:fixed;inset:0;width:100vw;height:100vh;z-index:6500;pointer-events:none;display:none}
.candy.is-on{display:block}

/* スマホ用の固定ボタン */
.sp-cta{display:none}

/* ================= 登場演出（共通） ================= */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}

.manual{max-width:1100px;margin:0 auto;border:3px solid var(--black);background:var(--white)}
.manual__top{display:flex;justify-content:space-between;align-items:center;background:var(--black);color:var(--white);padding:10px 20px;font-family:var(--f-en);font-size:12px;letter-spacing:.12em}
.manual__top b{color:var(--yellow);font-size:14px}
.manual__body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.manual__box{padding:24px;border-bottom:1px solid var(--black)}
.manual__box:nth-child(odd){border-right:1px solid var(--black)}
.manual__box h3{font-family:var(--f-head);font-weight:400;font-size:20px;margin-bottom:12px}
.manual__box h3 span{background:var(--yellow);padding:0 .2em}
.manual__box dl{display:grid;grid-template-columns:7em 1fr;gap:4px 10px;font-size:14px}
.manual__box dt{font-weight:900}
.manual__box ol{list-style:decimal;padding-left:1.3em;font-size:14px}
.manual__box ul li{position:relative;padding-left:1.4em;font-size:14px;margin-bottom:6px}
.manual__box ul li::before{content:"⚠";position:absolute;left:0}
.manual__trbl{grid-column:1/-1;border-right:0!important}
.manual__trbl table{width:100%;border-collapse:collapse;font-size:14px}
.manual__trbl th,.manual__trbl td{border:1px solid var(--black);padding:8px 10px;text-align:left}
.manual__trbl th{background:var(--paper)}
.manual__warranty{grid-column:1/-1;padding:18px 24px;background:var(--yellow);font-weight:900;border-right:0!important}
.faq{max-width:900px;margin:0 auto}
.faq details{border-bottom:2px solid var(--black)}
.faq summary{list-style:none;padding:18px 40px 18px 0;font-weight:900;font-size:clamp(15px,1.6vw,18px);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";font-family:var(--f-en);margin-right:10px;background:var(--black);color:var(--yellow);padding:0 6px}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--f-en);font-size:24px;transition:transform .3s var(--ease-snap)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 22px 2.6em;position:relative}
.faq details p::before{content:"A.";position:absolute;left:0;font-family:var(--f-en);font-weight:900;background:var(--yellow);padding:0 6px;line-height:1.7}
.faq details[open] p{animation:kflip .3s var(--ease-out)}

/* ================= レスポンシブ ================= */
@media (max-width:1100px){
  :root{--rail:0px}
  .rail{display:none}
  .band{margin-left:-80px}
  .onair{display:none}
}
@media (max-width:900px){
  .hero{flex-direction:column;align-items:stretch;padding-top:calc(var(--hd) + 32px)}
  .hero .hero__board{position:relative;right:auto;top:auto;transform:none;margin:8px auto 40px}
  .flap{font-size:min(24vw,22svh)}
  .hero__body{max-width:none}
  .hero__next{display:none}
  .svc{grid-template-columns:minmax(0,1fr)}
  .who__grid,.story__grid{grid-template-columns:minmax(0,1fr)}
  .who__photo{max-width:440px;margin:0 auto;width:100%}
  .story__photo{position:relative;top:auto;max-width:360px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr 1fr}
  .mixer__ch{grid-template-columns:repeat(4,1fr);row-gap:14px}
  .fader__led,.fader__rail{height:170px}
  .manual__body{grid-template-columns:1fr}
  .manual__box:nth-child(odd){border-right:0}
}
@media (max-width:600px){
  :root{--hd:56px}
  body{font-size:15px}
  .hd__name{font-size:16px}
  .kansai-switch__std,.kansai-switch__ks{font-size:10px}
  .hd__cta{display:none}
  .sp-cta{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:850;text-align:center;background:var(--yellow);color:var(--black);font-weight:900;text-decoration:none;padding:14px;border:2px solid var(--black);border-radius:999px;box-shadow:0 6px 0 var(--black);transform:translateY(140%);transition:transform .4s var(--ease-snap)}
  .sp-cta.is-on{transform:none}
  .prof{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:1fr}
  .nums li{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .nums small{width:100%}
  .vtag{font-size:11px;padding:8px 4px}
  .talk__btn{padding:22px 20px}
  .ft{padding-bottom:90px}
}

/* ================= 動きをひかえめに ================= */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation-duration:.001s!important;animation-iteration-count:1!important}
html[data-motion="reduce"] .telop::before,html[data-motion="reduce"] .telop__in,html[data-motion="reduce"] .telop em{transition:opacity .2s!important}
html[data-motion="reduce"] .telop::before{transform:scaleX(1)}
html[data-motion="reduce"] .telop__in{clip-path:none}
html[data-motion="reduce"] .telop em{background-size:100% 100%}
html[data-motion="reduce"] [data-reveal]{opacity:1;transform:none}
html[data-motion="reduce"] .card{opacity:1;transform:none;transition:none}
html[data-motion="reduce"] .talk__beam{transform:rotate(0deg);opacity:1}
html[data-motion="reduce"] .hero__l>span,html[data-motion="reduce"] .super{transform:none;opacity:1;transition:none}
html[data-motion="reduce"] .hero__lead,html[data-motion="reduce"] .hero__btns{opacity:1;transition:none}
html[data-motion="reduce"] .hero__ttl em{background-size:100% 100%}
html[data-motion="reduce"] .loop__ring{animation:none}
html[data-motion="reduce"] .accel__bar i{width:100%;transition:none}
html[data-motion="reduce"] .clap__top{transform:none}

/* 黄色のカードの中では、マーカーを白にする */
.svc__item--main .hl-c{background-image:linear-gradient(var(--white),var(--white))}

/* 黒い背景では、線を文字の高さいっぱいにして文字を黒にする（白い文字に黄色が重なって読めないため） */
[data-theme="dark"] .hl-c{background-position:0 50%;transition:background-size .18s ease-out,color .12s}
[data-theme="dark"] .hl-c.on{background-size:101% 100%;color:var(--black)}

/* iPhone の Safari で、線を引く文（1文字ずつ分けた文）が折り返せずに段落ごと画面からはみ出すのを防ぐ */
.who__grid>*,.story__grid>*,.svc>*,.chapters,.chap{min-width:0}
.chap p,.who__lead p,.svc__item p,.story__end,.sec__lead{overflow-wrap:anywhere}
.hl-c{display:inline}


/* 取扱説明書のセクション（黄色）の中の、よく聞かれること */
.faq-box{max-width:1100px;margin:40px auto 0;background:var(--white);border:3px solid var(--black);padding:24px clamp(18px,3vw,36px) 8px}
.faq-box__ttl{font-family:var(--f-head);font-weight:400;font-size:clamp(18px,2vw,24px);margin-bottom:4px}
.faq-box .faq{max-width:none}
.faq-box .faq details:last-child{border-bottom:0}

/* ================= スマホ：FV は長い文章以外を中央寄せ ================= */
@media (max-width:600px){
  .hero__body{text-align:center}
  .hero__onair{justify-content:center;flex-wrap:wrap}
  .super{display:flex;align-items:center}
  .super__role{width:100%}
  .roles li{left:50%;transform:translateX(-50%)}
  .hero__lead{text-align:left;margin-inline:auto}
  .hero__btns{justify-content:center}
}

/* 登壇・出演（黒い背景） */
.stage .stage__lamp{background:var(--yellow);color:var(--black)}
.stage .nums li{border-top-color:var(--white)}
.stage .nums b{color:var(--yellow)}
.stage .clip img{border-color:var(--white)}
.stage .clip__lbl{background:var(--yellow);color:var(--black)}

/* =========================================================
   総点検（2026-10-11）での修正
   ========================================================= */
/* 中身の幅と左端をそろえる */
:root{--wrap:1200px}
.sec__head,.who__grid,.story__grid,.svc,.mixer,.manual,.faq-box,.epg-wrap,.nums,.story__end{max-width:var(--wrap)}
/* 主力のサービス 01 を黄色に（後ろの .svc__item の白に負けていた）。PC では横いっぱい */
.svc__item.svc__item--main{background:var(--yellow)}
@media (min-width:901px){.svc__item--main{grid-column:1/-1}}
/* 番組表：局名と番組欄がくっつかないように */
.epg__head,.epg__row{grid-template-columns:96px 1.3fr 1.6fr 150px 40px;column-gap:24px}
.epg__st b{font-size:26px}
@media (max-width:700px){
  .epg__row{grid-template-columns:52px minmax(0,1fr) 24px;column-gap:4px}
  .epg__pg{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* 「ON AIR」が2行に割れないように */
.stage__lamp{white-space:nowrap;display:inline-block}
/* 見出しの変な改行を防ぐ */
.svc__ttl,.sec__ja,.talk__ttl,.chap__ttl{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.talk__lead{text-wrap:pretty}
/* フッターのカラーバー：白・黄・黒の3色だけに（濁った色をやめる） */
.ft__bars{grid-template-columns:repeat(6,1fr);border-top:3px solid var(--black)}
.ft__bars i:nth-child(odd){background:var(--yellow)}
.ft__bars i:nth-child(even){background:var(--white)}
.ft__bars i:nth-child(7){display:none}
/* 登壇：YouTube のサムネイルは白黒にして、触ると色が付く（写真と同じ決まり） */
.clip img{filter:grayscale(1) contrast(1.1);transition:filter .3s}
@media (hover:hover){.clip:hover img{filter:none}}
/* 3色の外のベージュをやめる */
.prio{background:var(--white);border:2px solid var(--black)}
.manual__trbl th{background:var(--black);color:var(--white)}
/* 小さすぎる文字を大きく */
.rail__list a span{font-size:11px}
.prof dt{font-size:11px}
.card__co,.card__note{font-size:12px}
/* 押せる範囲を 44px 以上に */
.kansai-switch{min-height:44px;padding:0 4px}
.hd__logo{min-height:44px}
.motion-toggle{padding:12px 18px;min-height:44px;font-size:13px}
.fader__knob::before{content:"";position:absolute;inset:-8px}
/* ドラッグできるものは、iPhone で長押ししても文字選択にならないように */
.vtag,.prio__design,.fader__knob{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* タップしたときの灰色の四角を消して、押した感触を出す */
a,button,summary,[role=button]{-webkit-tap-highlight-color:transparent}
.btn:active,.sp-cta:active,.talk__btn:active{transform:scale(.97)}
/* スマホではタップ後に hover の見た目が残るので、hover できる端末だけに効かせる */
@media (hover:none){
  .btn:hover{transform:none}
  .strip__track:hover .clip{opacity:1}
  .strip__track .clip:hover{transform:none}
  .talk__btn:hover .talk__btn-a{transform:none;opacity:1}
  .talk__btn:hover .talk__btn-b{transform:translateY(100%);opacity:0}
  .epg__row:hover::before{transform:scaleX(0)}
  .epg__row:active::before{transform:scaleX(1);transition:none}
  .epg__row:hover .epg__go{transform:none}
}
/* スマホの登壇の帯：指で横にめくる */
.strip.is-swipe{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip.is-swipe::-webkit-scrollbar{display:none}
.strip.is-swipe .strip__track{transform:none}
.strip.is-swipe .clip{scroll-snap-align:start}
/* 相談ボタンを押したときの黄色：画面いっぱいの層を丸く切り抜いて広げる */
.flood{inset:0;left:0;top:0;width:auto;height:auto;border-radius:0;transform:none;clip-path:circle(0 at var(--fx,50%) var(--fy,50%));transition:clip-path .32s var(--ease-in)}
.flood.is-on{transform:none;clip-path:circle(150vmax at var(--fx,50%) var(--fy,50%))}
/* FV の中身が出るまでの待ち時間を短く */
.super{transition-delay:.45s}
.hero__lead{transition-delay:.55s}
.hero__btns{transition-delay:.65s}
/* 点滅はヘッダーの ON AIR 以外、数回で止める */
.hero__rec,.stage__lamp,.talk__status i,.accel__out,.clap__rec,.term__caret{animation-iteration-count:4}
/* iPhone の画面の端（ホームバー・切り欠き）を避ける */
.hd{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.hero__next{text-decoration:none}
/* スマホ */
@media (max-width:600px){
  .sp-cta{bottom:calc(14px + env(safe-area-inset-bottom))}
  .ft{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  body:has(.sp-cta.is-on) .say{bottom:calc(84px + env(safe-area-inset-bottom))}
  /* 黄色いセクションの上では、固定ボタンを黒にして背景に溶けないように */
  html[data-bg="yellow"] .sp-cta{background:var(--black);color:var(--yellow);border-color:var(--black)}
  /* FV：最初の画面に相談ボタンまで入るように */
  .flap{font-size:min(18vw,14svh)}
  .hero .hero__board{margin:0 auto 20px;gap:14px}
  .hero__onair{display:none}
  .super{margin:20px 0 16px}
  .hero__btns{margin-top:20px}
  /* スキル名が切れないように */
  .fader__lbl{white-space:normal;word-break:keep-all;font-size:11px;line-height:1.25;min-height:2.5em}
  .stage__lamp{display:table;margin-top:12px;font-size:12px}
}
.svc__item--main .funnel{max-width:560px}

/* =========================================================
   陰山さんの判断を受けた見せ方の変更（2026-10-11）
   ========================================================= */
/* 登壇の帯：note の記事のカード */
.clip__noteimg{display:grid;place-items:center;aspect-ratio:16/9;width:100%;border:3px solid var(--white);background:var(--white);color:var(--black);font-family:var(--f-en);font-weight:900;font-size:56px}

/* FV：黄色は「503」の板と相談ボタンだけ。ほかは白にして、板にスポットライトを当てる */
.hero__s{color:var(--white)}
.flap__cap{background:transparent;color:var(--white);padding:4px 0;letter-spacing:.12em}
.flap__h{background:#1d1d1d;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hero .hero__board::before{content:"";position:absolute;inset:-35% -45%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,230,0,.16),rgba(255,230,0,.05) 55%,transparent)}
@media (min-width:601px){.flap{font-size:min(14vw,34svh)}}

/* 人物紹介の肩書き：傾きと黄色い影をやめて、白い線で区切った表に */
.card{background:transparent;color:var(--white);box-shadow:none;border-top:2px solid var(--white);padding:14px 4px 0;min-height:0;transform:translateY(16px)}
.cards.is-in .card,.cards.is-in:hover .card{transform:none}
.card__role{margin:2px 0 6px}
.card__note b{background:none;color:var(--yellow);padding:0;margin-bottom:2px}


/* =========================================================
   ローディング「エラーを起こせ。」（A グリッチ／B エラーダイアログをランダムに出す）
   ========================================================= */
.ld{display:none}
html[data-ld] .ld{display:block;position:fixed;inset:0;z-index:10000;background:var(--black);cursor:pointer}
html[data-ld] body{overflow:hidden}
.ld__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ld.is-off{background:transparent}
.ld__dlg{display:none}
html[data-ld="b"] .ld{display:grid;place-items:center}
html[data-ld="b"] .ld__cv{display:none}
html[data-ld="b"] .ld__dlg{display:block;width:min(86vw,420px);background:var(--white);color:var(--black);border:3px solid var(--black);box-shadow:0 0 0 2px var(--white);transform:scale(.85);opacity:0}
.ld__bar{display:flex;align-items:center;gap:8px;background:var(--black);color:var(--white);font:13px "DotGothic16",monospace;padding:6px 10px}
.ld__bar b{color:var(--yellow);font-weight:400}
.ld__bar span{margin-left:auto;letter-spacing:4px}
.ld__body{display:flex;gap:16px;align-items:center;padding:22px 20px 14px}
.ld__ico{flex:none;width:52px;height:46px;background:var(--yellow);clip-path:polygon(50% 0,100% 100%,0 100%);display:grid;place-items:end center;font:900 30px/1 Archivo,sans-serif;padding-bottom:4px}
.ld__msg{margin:0;font-family:"Dela Gothic One",sans-serif;font-size:clamp(22px,6vw,30px);line-height:1.2}
.ld__msg small{display:block;font:700 12px "Zen Kaku Gothic New",sans-serif;margin-top:6px}
.ld__btns{display:flex;justify-content:flex-end;gap:8px;padding:0 20px 18px}
.ld__btns span{border:2px solid var(--black);padding:4px 16px;font:700 13px "Zen Kaku Gothic New",sans-serif}
.ld__ok{background:var(--yellow)}
.ld.is-play .ld__dlg{animation:ldIn .26s cubic-bezier(.34,1.56,.64,1) .05s both,ldOut .2s cubic-bezier(.55,0,1,.45) 1.05s both}
.ld.is-play .ld__ok{animation:ldPress .14s ease .82s both}
.ld.is-play{animation:ldFade .35s ease 1.15s both}
@keyframes ldIn{to{transform:scale(1);opacity:1}}
@keyframes ldOut{from{transform:scale(1);opacity:1}to{transform:scale(.6);opacity:0}}
@keyframes ldPress{50%{transform:scale(.92);background:var(--black);color:var(--yellow)}100%{transform:none;background:var(--black);color:var(--yellow)}}
@keyframes ldFade{to{opacity:0;visibility:hidden}}