@charset "UTF-8";
/* ==========================================================
   VEEMusic — Cyber Control Room
   ベース：ロゴのティール ／ アクセント：ネオンピンク
   ========================================================== */
:root{
  --bg:#04050d;
  --bg-2:#0a0e22;
  --panel:rgba(8,14,32,.72);
  --teal:#14b1b0;          /* ロゴ */
  --teal-hi:#5ef2ef;
  --teal-dim:rgba(20,177,176,.28);
  --pink:#ff2e97;          /* アクセント */
  --pink-hi:#ff8acb;
  --violet:#5e1f71;
  --text:#dff6f7;
  --muted:#7f9ab0;
  --hud-h:56px;
  --foot-h:30px;
  --tab-h:62px;
  --cut:14px;
  --f-display:"Orbitron", "Zen Kaku Gothic New", sans-serif;
  --f-mono:"Share Tech Mono", ui-monospace, monospace;
  --f-body:"Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
.sp{display:none}
[hidden]{display:none !important}

/* ---------- 背景の街 ---------- */
.city{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, #1a1446 0%, transparent 60%),
    linear-gradient(180deg,#070a1c 0%, #0c0f2a 45%, #12082a 70%, var(--bg) 100%);
}
.city__glow{position:absolute;left:50%;top:38%;width:110vw;height:60vh;transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(255,46,151,.22), transparent 70%),
    radial-gradient(closest-side at 30% 60%, rgba(20,177,176,.18), transparent 70%);
  filter:blur(20px);animation:breathe 7s ease-in-out infinite}
.city__skyline{position:absolute;left:0;width:100%}
.city__skyline--far{bottom:30%;height:40%;opacity:.55}
.city__skyline--near{bottom:24%;height:34%;opacity:.95}
.city__floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:38%;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), rgba(255,46,151,.55) 0) 0 0/100% 48px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(20,177,176,.45) 0) 0 0/64px 100%;
  transform:perspective(380px) rotateX(62deg);transform-origin:top center;
  mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent);
  animation:floor 2.4s linear infinite}
@keyframes floor{to{background-position:0 48px,0 0}}
@keyframes breathe{50%{opacity:.7}}

/* 走査線（画面全体・うっすら） */
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply}

/* ---------- 共通パーツ ---------- */
.panel-title{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--teal);margin:0 0 10px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal-hi);box-shadow:0 0 8px var(--teal-hi);animation:blink 1.6s steps(2) infinite}
.dot--pink{background:var(--pink);box-shadow:0 0 10px var(--pink)}
@keyframes blink{50%{opacity:.25}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-width:150px;padding:.8em 1.6em;font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.18em;
  text-decoration:none;cursor:pointer;background:transparent;border:1px solid currentColor;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background .2s, color .2s, box-shadow .2s}
.btn--teal{color:var(--teal-hi);box-shadow:inset 0 0 14px var(--teal-dim)}
.btn--pink{color:var(--pink-hi);box-shadow:inset 0 0 14px rgba(255,46,151,.3)}
.btn--teal:hover,.btn--teal:focus-visible{background:var(--teal);color:#021012}
.btn--pink:hover,.btn--pink:focus-visible{background:var(--pink);color:#1a0010}

/* ---------- 上部HUD ---------- */
.hud-top{position:relative;z-index:5;height:var(--hud-h);display:flex;align-items:center;gap:24px;padding:0 24px;
  border-bottom:1px solid var(--teal-dim);
  background:linear-gradient(180deg, rgba(4,5,13,.9), rgba(4,5,13,.4))}
.hud-top__logo img{height:30px;width:auto;filter:drop-shadow(0 0 6px rgba(20,177,176,.6))}
.hud-top__tag{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.3em;color:var(--muted)}
.hud-top__status{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:13px;color:var(--teal-hi);letter-spacing:.12em}
.hud-top__clock{color:var(--text);margin-left:12px;font-variant-numeric:tabular-nums}
.hud-top__tz{color:var(--muted)}

/* ---------- デッキ（3カラム） ---------- */
.deck{position:relative;z-index:2;height:calc(100dvh - var(--foot-h));
  display:grid;grid-template-columns:190px minmax(0,1fr) 220px;gap:18px;padding:18px 22px}

/* 左：チャンネル */
.channels,.side{position:relative;padding:28px 16px 26px;display:flex;flex-direction:column;min-height:0}
.channels > *,.side > *,.sign > *{position:relative;z-index:1}
.channels ul{list-style:none;margin:0;padding:0;flex:none;display:grid;gap:6px}
.channels li a{display:flex;align-items:baseline;gap:12px;padding:10px 12px;text-decoration:none;
  font-family:var(--f-display);font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--muted);
  border-left:2px solid transparent;transition:color .2s, background .2s, border-color .2s}
.channels li a .no{font-family:var(--f-mono);font-size:11px;color:var(--teal)}
.channels li a:hover{color:var(--text);background:rgba(20,177,176,.08)}
.channels li a.is-active{color:var(--pink-hi);border-left-color:var(--pink);
  background:linear-gradient(90deg, rgba(255,46,151,.18), transparent);text-shadow:0 0 10px rgba(255,46,151,.7)}
.channels li a.is-active .no{color:var(--pink)}
.channels__meter{margin-top:18px;flex:none}
.eq{display:flex;align-items:flex-end;gap:4px;height:46px}
.eq i{flex:1;background:linear-gradient(0deg,var(--teal),var(--pink));opacity:.85;animation:eq 1.1s ease-in-out infinite alternate;height:30%}
.eq i:nth-child(2n){animation-duration:.8s}.eq i:nth-child(3n){animation-duration:1.4s}
.eq i:nth-child(4n){animation-delay:-.4s}.eq i:nth-child(5n){animation-delay:-.7s}
@keyframes eq{to{height:100%}}

/* 右：ON AIR */
.roster{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;overflow:auto;min-height:0}
.roster button{width:100%;display:flex;align-items:center;gap:10px;padding:6px;background:none;border:1px solid transparent;cursor:pointer;text-align:left;transition:border-color .2s, background .2s}
.roster button:hover,.roster button:focus-visible{border-color:var(--teal-dim);background:rgba(20,177,176,.08)}
.roster img{width:40px;height:40px;object-fit:cover;border-radius:50%;border:1px solid var(--teal);flex:none}
.roster b{display:block;font-size:13px;font-weight:700;line-height:1.3}
.roster small{display:block;font-family:var(--f-mono);font-size:10px;color:var(--muted);letter-spacing:.08em}
.sns{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--teal-dim);text-decoration:none;font-family:var(--f-mono);letter-spacing:.06em;transition:border-color .2s, color .2s}
.sns svg{width:18px;height:18px;fill:currentColor}
.sns:hover{border-color:var(--pink);color:var(--pink-hi)}
.sns--small{font-size:13px}

/* ---------- 中央モニター ---------- */
.monitor{min-width:0;min-height:0;display:flex}
.monitor__bezel{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;padding:50px 22px 0}
.monitor__bezel > *:not(.frame){position:relative;z-index:1}
.monitor__label{position:absolute !important;top:0;left:50%;transform:translateX(-50%);height:36px;display:flex;align-items:center;gap:14px;white-space:nowrap;font-family:var(--f-mono);font-size:13px;letter-spacing:.2em}
.monitor__label #chNo{color:var(--pink-hi)}
.monitor__rec{position:absolute !important;top:4px;right:30px;display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--muted);opacity:.55;text-decoration:none;pointer-events:none;transition:color .3s,opacity .3s}

.monitor__screen{position:relative;flex:1;min-height:0;overflow:hidden;
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(94,31,113,.35), transparent 70%),
    radial-gradient(60% 60% at 80% 100%, rgba(20,177,176,.18), transparent 70%),
    #050817;
  border:1px solid rgba(94,242,239,.25);
  box-shadow:inset 0 0 60px rgba(0,0,0,.8), inset 0 0 2px rgba(94,242,239,.6);
  clip-path:polygon(18px 0,calc(100% - 60px) 0,calc(100% - 48px) 10px,100% 10px,100% calc(100% - 18px),calc(100% - 18px) 100%,60px 100%,48px calc(100% - 10px),0 calc(100% - 10px),0 18px)}
.monitor__screen::before{ /* スキャンライン＋ビネット */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(94,242,239,.05) 0 1px, transparent 1px 4px),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55));
}
.monitor__screen::after{ /* 切替時のノイズ */
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(255,46,151,.25) 0 3px, transparent 3px 11px),
    linear-gradient(rgba(20,177,176,.25), rgba(255,46,151,.25));
}
.monitor__screen.is-switching::after{animation:noise .42s steps(6) both}
@keyframes noise{
  0%{opacity:0;transform:translateY(0)}
  15%{opacity:1;transform:translateY(-6px)}
  45%{opacity:.8;transform:translateY(8px) scaleY(1.2)}
  75%{opacity:.6;transform:translateY(-3px)}
  100%{opacity:0;transform:none}}

.monitor__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;height:58px;padding:0 10px 14px}
.pips{align-self:flex-end;margin-bottom:-8px}
.knob{background:none;border:1px solid var(--teal-dim);padding:6px 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--teal-hi);cursor:pointer;transition:border-color .2s, color .2s}
.knob:hover,.knob:focus-visible{border-color:var(--pink);color:var(--pink-hi)}
.pips{display:flex;gap:8px}
.pips i{width:26px;height:4px;background:rgba(127,154,176,.3);transition:background .3s, box-shadow .3s}
.pips i.is-on{background:var(--pink);box-shadow:0 0 10px var(--pink)}

/* ---------- チャンネル（各セクション） ---------- */
.ch{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:32px clamp(18px,3vw,44px) 40px;scrollbar-width:thin;scrollbar-color:var(--teal) transparent}
.ch.is-entering{animation:chIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes chIn{
  0%{opacity:0;clip-path:inset(48% 0 48% 0);filter:hue-rotate(80deg) saturate(2)}
  40%{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(-6px);filter:hue-rotate(-40deg)}
  60%{transform:translateX(4px)}
  100%{opacity:1;transform:none;filter:none}}
.ch__head{margin-bottom:24px}
.ch__kicker{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--pink-hi)}
.ch__title{margin:.1em 0 0;font-family:var(--f-display);font-weight:900;font-size:clamp(26px,3.4vw,44px);letter-spacing:.1em;line-height:1.15;
  color:var(--text);text-shadow:0 0 12px rgba(20,177,176,.8), 2px 0 0 rgba(255,46,151,.55), -2px 0 0 rgba(20,177,176,.55)}
.ch__note{margin:24px 0 0;text-align:right;font-family:var(--f-mono);color:var(--muted);letter-spacing:.08em}
.ch__note--left{text-align:left;margin:-8px 0 20px;font-family:var(--f-body)}

/* TOP */
#top{display:flex;padding:16px}
.hero{margin:auto;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__stage{position:relative;width:min(100%, 1200px)}
.hero__row{display:flex;justify-content:space-evenly;align-items:flex-end;gap:2%;aspect-ratio:3.3/1;padding:0 2%}
.hero__char{height:100%;width:auto;max-width:24%;min-width:0;object-fit:contain;object-position:bottom center;opacity:0;filter:drop-shadow(0 0 14px rgba(94,31,113,.6))}
.hero__fx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;z-index:2}
.ch.is-ready .hero__fx{animation:fxIn 1.2s .8s forwards}
@keyframes fxIn{to{opacity:.75}}
.ch.is-ready .hero__char{animation:charUp .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero__char.d1{animation-delay:.15s}.hero__char.d2{animation-delay:.3s}.hero__char.d3{animation-delay:.45s}
.hero__char.d4{animation-delay:.6s}.hero__char.d5{animation-delay:.75s}
@keyframes charUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.hero__logo{margin:-2% 0 0;position:relative;z-index:12;width:min(56%,520px);opacity:0}
.ch.is-ready .hero__logo{animation:logoOn 1.2s .9s steps(1) forwards}
.hero__logo img{filter:drop-shadow(0 0 10px rgba(20,177,176,.9)) drop-shadow(0 0 30px rgba(20,177,176,.5))}
@keyframes logoOn{0%{opacity:0}10%{opacity:1}14%{opacity:.2}20%{opacity:1}30%{opacity:.4}34%,100%{opacity:1}}
.hero__copy{margin:10px 0 18px;font-weight:700;font-size:clamp(15px,1.5vw,20px);letter-spacing:.12em;color:var(--pink-hi);text-shadow:0 0 10px rgba(255,46,151,.8)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ARTISTS */
.artists{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.card{position:relative;width:100%;padding:0 0 12px;background:rgba(10,16,40,.8);border:1px solid var(--teal-dim);cursor:pointer;text-align:left;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  transition:border-color .25s, transform .25s, box-shadow .25s}
.card img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(1.05);transition:filter .25s}
.card::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:1;
  background:linear-gradient(180deg, transparent 55%, rgba(4,5,13,.85)), repeating-linear-gradient(0deg, rgba(94,242,239,.06) 0 1px, transparent 1px 3px);pointer-events:none}
.card__jp{display:block;padding:10px 12px 0;font-weight:700;font-size:15px;line-height:1.4}
.card__en{display:block;padding:0 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--teal)}
.card:hover,.card:focus-visible{border-color:var(--pink);transform:translateY(-4px);box-shadow:0 0 24px rgba(255,46,151,.35);outline:none}
.card:hover img{filter:saturate(1.3) contrast(1.05)}

/* MOVIE */
.movies{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.yt{position:relative;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--teal-dim);background:#000;cursor:pointer;overflow:hidden;transition:border-color .2s, box-shadow .2s}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s, transform .4s}
.yt:hover{border-color:var(--pink);box-shadow:0 0 22px rgba(255,46,151,.35)}
.yt:hover img{opacity:1;transform:scale(1.04)}
.yt__play{position:absolute;left:50%;top:50%;width:62px;height:62px;transform:translate(-50%,-50%);border:2px solid var(--pink);border-radius:50%;
  box-shadow:0 0 16px var(--pink), inset 0 0 16px rgba(255,46,151,.5);background:rgba(4,5,13,.5)}
.yt__play::after{content:"";position:absolute;left:24px;top:18px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--pink-hi)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ABOUT */
.about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:start}
.about__lead p{margin:0 0 1.2em;font-size:clamp(15px,1.4vw,18px)}
.neon-text{font-weight:700;font-size:clamp(18px,2vw,26px) !important;color:var(--teal-hi);text-shadow:0 0 12px rgba(20,177,176,.9)}
.about__biz{padding:20px;border:1px solid var(--teal-dim);background:rgba(10,16,40,.7);border-left:3px solid var(--pink)}
.about__biz h3{margin:0 0 10px;font-family:var(--f-display);font-size:15px;letter-spacing:.18em;color:var(--pink-hi)}
.about__biz p{margin:0;font-size:14px;color:#bcd2dc}

/* CONTACT */
.contact{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start}
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;color:var(--teal-hi)}
.req{color:var(--pink)}
.form input,.form textarea{width:100%;padding:10px 12px;background:rgba(4,8,22,.85);border:1px solid var(--teal-dim);color:var(--text);font:15px/1.6 var(--f-body);border-radius:0;transition:border-color .2s, box-shadow .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 1px var(--pink), 0 0 16px rgba(255,46,151,.3)}
.form__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form__status{font-size:14px}
.form__status.is-ok{color:var(--teal-hi)}
.form__status.is-err{color:var(--pink-hi)}

/* ---------- 下部HUD ---------- */
.hud-bottom{position:relative;z-index:5;height:var(--foot-h);display:flex;align-items:center;gap:24px;padding:0 24px;border-top:1px solid var(--teal-dim);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--teal);overflow:hidden;white-space:nowrap;background:rgba(4,5,13,.7)}
.hud-bottom__ticker{color:var(--muted);animation:ticker 26s linear infinite}
@keyframes ticker{from{transform:translateX(40vw)}to{transform:translateX(-100%)}}

.tabbar{display:none}

/* ==========================================================
   タブレット
   ========================================================== */
@media (max-width:1180px){
  .deck{grid-template-columns:170px minmax(0,1fr)}
  .side{display:none}
}

/* ==========================================================
   スマホ：モニターは縦に伸ばし、下部タブで切替
   ========================================================== */
@media (max-width:820px){
  body{overflow:auto}
  .sp{display:inline}
  .hud-top{position:sticky;top:0;height:50px;padding:0 14px;gap:12px;backdrop-filter:blur(8px);background:rgba(4,5,13,.85)}
  .hud-top__logo img{height:24px}
  .hud-top__tag{display:none}
  .hud-top__status{font-size:11px;gap:6px}
  .hud-top__clock{margin-left:4px}

  .deck{display:block;height:auto;padding:12px 10px calc(var(--tab-h) + 24px + env(safe-area-inset-bottom))}
  .channels,.sign{display:none}

  .monitor__bezel{padding:46px 14px 0}
  .monitor__label{font-size:11px;gap:8px}
  .monitor__rec{right:14px;font-size:10px}
  .monitor__foot{height:54px}
  .knob{padding:5px 8px;font-size:10px}
  .pips i{width:14px}
  .monitor__screen{overflow:visible;min-height:calc(100svh - 50px - var(--tab-h) - 130px)}
  .ch{position:relative;inset:auto;overflow:visible;padding:24px 16px 28px}
  #top{min-height:inherit}
  .hero__stage{width:108%;margin:0 -4%}
  .hero__logo{width:78%;margin-top:-4%}
  .hero__copy{letter-spacing:.06em}
  .hero__cta .btn{min-width:0;flex:1}
  .hero__cta{width:100%}

  .artists{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card__jp{font-size:14px;padding:8px 10px 0}
  .card__en{padding:0 10px;font-size:10px}
  .movies{grid-template-columns:1fr}
  .about,.contact{grid-template-columns:1fr}
  .ch__note{text-align:left}


  .hud-bottom{display:none}

  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);
    height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:rgba(4,5,13,.92);border-top:1px solid var(--teal);backdrop-filter:blur(10px);box-shadow:0 -6px 24px rgba(20,177,176,.18)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;
    font-family:var(--f-display);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--muted);position:relative}
  .tabbar .no{font-family:var(--f-mono);font-size:13px;color:var(--teal)}
  .tabbar a.is-active{color:var(--pink-hi);text-shadow:0 0 8px rgba(255,46,151,.8)}
  .tabbar a.is-active .no{color:var(--pink)}
  .tabbar a.is-active::before{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:var(--pink);box-shadow:0 0 10px var(--pink)}
}

/* 動きを減らす設定の方向け */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}
  .hero__char,.hero__logo{opacity:1}
}

/* ---------- 複雑フレーム（SVGで描画） ---------- */
.frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.frame .f-body{fill:url(#gBody);stroke:var(--teal);stroke-width:1.2;filter:drop-shadow(0 0 10px rgba(20,177,176,.35))}
.frame .f-panel{fill:rgba(8,14,32,.78);stroke:var(--teal-dim);stroke-width:1}
.frame .f-inner{fill:none;stroke:rgba(94,242,239,.28);stroke-width:1;stroke-dasharray:2 5}
.frame .f-hot{fill:none;stroke:var(--pink);stroke-width:3;filter:drop-shadow(0 0 6px var(--pink))}
.frame .f-teal{fill:none;stroke:var(--teal-hi);stroke-width:3;filter:drop-shadow(0 0 6px var(--teal-hi))}
.frame .f-tick{stroke:var(--teal);stroke-width:1.2}
.frame .f-hz{fill:var(--pink);opacity:.75}
.frame .f-seg{fill:var(--pink);opacity:.85;animation:segBlink 2.4s steps(1) infinite}
.frame .f-seg:nth-child(3n){animation-delay:-.8s}.frame .f-seg:nth-child(4n){animation-delay:-1.6s}
.frame .f-dot{fill:var(--teal-hi)}
@keyframes segBlink{0%,70%{opacity:.85}71%,85%{opacity:.25}86%{opacity:.85}}

/* ---------- 左端の縦看板 ---------- */
.sign{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 0 30px;min-height:0;overflow:hidden}
.sign__chev{font-size:10px;letter-spacing:-.1em;color:var(--pink);text-shadow:0 0 8px var(--pink);writing-mode:vertical-rl;line-height:1}
.sign__logo{flex:1;min-height:0;width:auto;max-width:44px;object-fit:contain;object-position:top;
  filter:drop-shadow(0 0 6px rgba(20,177,176,.9)) drop-shadow(0 0 18px rgba(20,177,176,.45));animation:signFlicker 6s steps(1) infinite}
.sign__sub{writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;color:var(--pink-hi);text-shadow:0 0 8px rgba(255,46,151,.8);white-space:nowrap}
.sign__code{writing-mode:vertical-rl;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--muted)}
@keyframes signFlicker{0%,92%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.6}97%,100%{opacity:1}}

/* ---------- 文字シャッフル ---------- */
.shuffling{font-variant-ligatures:none}
.shuffle-cursor{color:var(--pink-hi)}

/* ---------- 左パネル：縦ロゴ（上段）＋CHANNEL（下段） ---------- */
.brand{flex:1 1 0;min-height:120px;display:flex;justify-content:center;align-items:center;margin:0 0 20px;padding:4px 0 16px;text-decoration:none;border-bottom:1px dashed var(--teal-dim)}
.brand img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(20,177,176,.9)) drop-shadow(0 0 18px rgba(20,177,176,.45));animation:signFlicker 6s steps(1) infinite}

/* ---------- 右パネルのステータス ---------- */
.status{margin:0 0 22px;padding:12px;border:1px solid var(--teal-dim);background:rgba(4,8,22,.6);font-family:var(--f-mono);letter-spacing:.12em}
.status__row{display:flex;align-items:center;gap:8px;color:var(--teal-hi);font-size:13px}
.status__row + .status__row{margin-top:4px}
.status__clock{font-size:22px;color:var(--text);font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(94,242,239,.6)}
.status__tz{font-size:11px;color:var(--muted)}
.status__date{margin-top:2px;font-size:11px;color:var(--pink-hi)}

.m-brand{display:none}
@media (max-width:820px){
  .m-brand{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px 14px}
  .m-brand img{height:26px;width:auto;filter:drop-shadow(0 0 6px rgba(20,177,176,.7))}
  .status--m{margin:0;padding:0;border:0;background:none;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--teal-hi)}
  .status--m .status__clock{font-size:12px}
}

/* ---------- TOP：アイコン ---------- */
.hero__stage{display:flex;justify-content:center}
.hero__icon{width:auto;height:clamp(180px,38vh,420px);opacity:0;
  filter:drop-shadow(0 0 12px rgba(20,177,176,.9)) drop-shadow(0 0 40px rgba(255,46,151,.35))}
.ch.is-ready .hero__icon{animation:iconOn 1.4s .1s forwards, iconFloat 5s 1.6s ease-in-out infinite}
@keyframes iconOn{0%{opacity:0;transform:scale(.9)}12%{opacity:1}16%{opacity:.2}24%{opacity:1}32%{opacity:.4}40%,100%{opacity:1;transform:none}}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero__logo{margin-top:22px !important}
@media (max-width:820px){ .hero__stage{width:100% !important;margin:0 !important} .hero__icon{height:200px} }
.hero__h1{margin:0;line-height:0}
.hero__copy{margin-top:26px}
@media (max-width:820px){ .hero__cta .btn{flex:0 1 220px} }
.btn--logo{color:var(--teal-hi);text-shadow:0 0 8px rgba(94,242,239,.8);box-shadow:inset 0 0 14px rgba(20,177,176,.35), 0 0 14px rgba(20,177,176,.3)}
.btn--logo:hover,.btn--logo:focus-visible{background:var(--teal);color:#021012;text-shadow:none;box-shadow:0 0 24px rgba(20,177,176,.7)}

/* ==========================================================
   プロフィール（ARTIST FILE）
   ========================================================== */
.profile{padding:0;border:0;background:transparent;color:var(--text);width:min(900px,94vw);max-width:none;max-height:94svh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--teal) transparent}
.profile::backdrop{background:
  repeating-linear-gradient(0deg, rgba(20,177,176,.05) 0 1px, transparent 1px 4px),
  rgba(2,3,10,.82);backdrop-filter:blur(5px)}
.profile[open] .profile__inner{animation:fileOpen .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes fileOpen{
  0%{opacity:0;clip-path:inset(50% 0 50% 0)}
  35%{opacity:1;clip-path:inset(49% 0 49% 0)}
  70%{clip-path:inset(0 0 0 0);transform:translateX(-5px);filter:hue-rotate(-40deg)}
  85%{transform:translateX(3px)}
  100%{clip-path:inset(0 0 0 0);transform:none;filter:none}}
.profile__inner{position:relative;margin:12px;padding:22px 30px 30px}
.profile__inner > *:not(.frame){position:relative;z-index:1}

.profile__bar{display:flex;align-items:center;gap:16px;height:34px;margin:0 0 14px;padding:0 4px 0 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em}
.profile__tag{display:flex;align-items:center;gap:8px;color:var(--pink-hi)}
.profile__id{color:var(--muted)}
.profile__close{margin-left:auto;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 14px;background:rgba(255,46,151,.08);border:1px solid var(--pink);color:var(--pink-hi);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .2s,color .2s}
.profile__close:hover,.profile__close:focus-visible{background:var(--pink);color:#1a0010;outline:none}

.profile__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:start}

/* 画像：ホログラム風 */
.profile__visual{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:#050817;
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}
.profile__img{width:100%;height:100%;object-fit:cover}
.profile[open] .profile__img{animation:imgGlitch .7s .15s steps(6) both}
@keyframes imgGlitch{
  0%{opacity:0;filter:hue-rotate(90deg) saturate(3);transform:translateX(-8px)}
  30%{opacity:1;transform:translateX(6px);clip-path:inset(20% 0 40% 0)}
  50%{transform:translateX(-3px);clip-path:inset(60% 0 5% 0)}
  70%{clip-path:inset(0)}
  100%{opacity:1;filter:none;transform:none;clip-path:inset(0)}}
.profile__visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(20,177,176,.12), transparent 30%, transparent 70%, rgba(255,46,151,.18)),
    repeating-linear-gradient(0deg, rgba(4,5,13,.25) 0 1px, transparent 1px 3px)}
.profile__scan{position:absolute;left:0;right:0;top:-20%;height:20%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg, transparent, rgba(94,242,239,.25), transparent);animation:scanDown 3.2s linear infinite}
@keyframes scanDown{to{top:110%}}
.br{position:absolute;z-index:3;width:26px;height:26px;border:2px solid var(--teal-hi);filter:drop-shadow(0 0 4px var(--teal-hi))}
.br--tl{top:10px;left:10px;border-right:0;border-bottom:0}
.br--tr{top:10px;right:36px;border-left:0;border-bottom:0;border-color:var(--pink);filter:drop-shadow(0 0 4px var(--pink))}
.br--bl{bottom:10px;left:36px;border-right:0;border-top:0;border-color:var(--pink);filter:drop-shadow(0 0 4px var(--pink))}
.br--br{bottom:10px;right:10px;border-left:0;border-top:0}
.profile__reticle{position:absolute;z-index:3;top:18%;right:16%;width:40px;height:40px;border:1px solid rgba(94,242,239,.6);border-radius:50%;animation:reticle 4s ease-in-out infinite}
.profile__reticle::before,.profile__reticle::after{content:"";position:absolute;background:rgba(94,242,239,.7)}
.profile__reticle::before{left:50%;top:-8px;bottom:-8px;width:1px}
.profile__reticle::after{top:50%;left:-8px;right:-8px;height:1px}
@keyframes reticle{50%{transform:translate(-10px,14px) scale(.85)}}
.profile__cap{position:absolute;z-index:3;left:44px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--teal-hi);text-shadow:0 0 6px rgba(4,5,13,.9)}
.profile__cap > span:first-child{color:var(--pink-hi);animation:blink 1.4s steps(2) infinite}
.profile__cap i{display:inline-block;width:4px;height:10px;margin-left:2px;background:var(--teal-hi);vertical-align:-1px}
.profile__cap i:last-child{opacity:.3}

/* テキスト */
.profile__body{padding:4px 4px 0 0}
.profile__name{margin:0;font-size:clamp(22px,2.6vw,30px);line-height:1.3;letter-spacing:.04em;
  text-shadow:0 0 12px rgba(20,177,176,.8), 2px 0 0 rgba(255,46,151,.5), -2px 0 0 rgba(20,177,176,.5)}
.profile__en{margin:2px 0 18px;font-family:var(--f-mono);font-size:13px;color:var(--teal);letter-spacing:.16em}
.profile__en::before{content:"> ";color:var(--pink)}
.profile__table{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:14px}
.profile__table th{width:8.6em;padding:7px 10px;text-align:left;vertical-align:top;white-space:nowrap;
  font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--teal-hi);
  background:rgba(20,177,176,.1);border-left:2px solid var(--teal)}
.profile__table td{padding:6px 12px;background:rgba(10,16,40,.55);border-bottom:1px solid rgba(20,177,176,.18);line-height:1.6}
.profile__table tr:last-child th{border-left-color:var(--pink);color:var(--pink-hi);background:rgba(255,46,151,.1)}
.profile__links{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.profile__links .sns{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:rgba(20,177,176,.08)}

.profile__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding:0 10px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--muted)}
.profile__bars{display:flex;gap:3px;flex:1;max-width:160px}
.profile__bars i{flex:1;height:4px;background:var(--teal);opacity:.3;animation:barRun 1.6s steps(1) infinite}
.profile__bars i:nth-child(1){animation-delay:0s}.profile__bars i:nth-child(2){animation-delay:.2s}.profile__bars i:nth-child(3){animation-delay:.4s}
.profile__bars i:nth-child(4){animation-delay:.6s}.profile__bars i:nth-child(5){animation-delay:.8s}.profile__bars i:nth-child(6){animation-delay:1s}
.profile__bars i:nth-child(7){animation-delay:1.2s}.profile__bars i:nth-child(8){animation-delay:1.4s}
@keyframes barRun{0%,12%{opacity:1;background:var(--pink)}13%,100%{opacity:.3;background:var(--teal)}}

@media (max-width:820px){
  .profile{width:94vw}
  .profile__inner{margin:6px;padding:16px 18px 24px}
  .profile__bar{gap:10px;font-size:10px;letter-spacing:.12em;padding-left:8px}
  .profile__id{display:none}
  .profile__grid{grid-template-columns:1fr;gap:18px}
  .profile__visual{aspect-ratio:4/3}
  .profile__img{object-position:center 20%}
  .profile__table th{width:7.4em}
  .profile__foot{display:none}
}

/* ---------- CONTACT フォーム ---------- */
.form{gap:18px}
.form__field{display:grid;gap:8px}
.form__label{display:flex;align-items:baseline;gap:8px;font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;color:var(--teal-hi)}
.form__label small{font-family:var(--f-body);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.form__count{margin-left:auto;font-size:11px;color:var(--muted);letter-spacing:.08em}
.form input,.form textarea{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));border-left:2px solid var(--teal)}
.form textarea{resize:vertical;min-height:150px}
.form .is-invalid{border-color:var(--pink) !important;border-left-color:var(--pink) !important;background:rgba(255,46,151,.06)}
.form__hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__privacy{margin:-4px 0 0;font-size:12px;color:var(--muted)}
.form button:disabled{opacity:.5;cursor:not-allowed}

/* CONTACT：右サイドメニューが出ている幅では、X欄は右側に集約 */
@media (min-width:1181px){
  .contact{grid-template-columns:minmax(0,1fr);max-width:760px}
  .contact__side{display:none}
}
/* スマホ：注意書きを1行に収める */
@media (max-width:820px){
  .ch__note--left{font-size:clamp(10px,3vw,13px);letter-spacing:0;white-space:nowrap}
}

/* ---------- LIVE表示：通常はグレー、配信中はピンク ---------- */
.monitor__rec .dot{background:var(--muted);box-shadow:none;animation:none}
.monitor__rec-who{max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.06em;font-family:var(--f-body);font-size:11px}
.monitor__rec-who:empty{display:none}
.monitor__rec.is-live{color:var(--pink-hi);opacity:1;pointer-events:auto;cursor:pointer;text-shadow:0 0 8px rgba(255,46,151,.8)}
.monitor__rec.is-live .dot{background:var(--pink);box-shadow:0 0 10px var(--pink);animation:blink 1.2s steps(2) infinite}
.monitor__rec.is-live:hover .monitor__rec-who{text-decoration:underline}
.live-tag{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:#1a0010;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.roster .live-tag{margin-left:auto;flex:none}
.card .live-tag{position:absolute;top:10px;left:10px;z-index:2}
.roster img.is-live,.card.is-live img{outline:2px solid var(--pink);outline-offset:-2px}
@media (max-width:820px){ .monitor__rec-who{max-width:7em} }
.sns-wrap{position:relative;display:inline-flex}
.sns__sub{position:absolute;top:-8px;left:-6px;z-index:2;padding:1px 6px;font-family:var(--f-mono);font-size:10px;line-height:1.4;letter-spacing:.16em;
  color:#021012;background:var(--teal-hi);box-shadow:0 0 8px rgba(94,242,239,.7);pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%)}
.profile__links{padding-top:8px}