@charset "UTF-8";
/* Team VYKRØ 公式サイト（2026-10-27）。Lino Labs のチーム紹介頁と同じ世界観で、こちらはチームが主役。
   ★ 頁の中に <style> を書かない（CSP）。ずらしの順番（--i）は HTML の data-i を vykro.js が入れる。
   ★ 出方は段ごとに変える。動きは transform・opacity・clip-path を中心に描く。
   ★ 出方は、画面から外れたら戻し、また入ったら出し直す（vykro.js）。
   ★ 動きを減らす設定の人には、文字や部品の出方を省いてそのまま見せる。
   　 ただし背景（光・床の格子・紋章・粒）は止めない（Lino Labs のサイトと同じ決まり。止めると故障に見える）。 */
:root{
  --vk-bg:#07080f; --vk-bg2:#0d0f1e; --vk-panel:#11132a; --vk-line:rgba(190,180,255,.14);
  --vk-ink:#eef0ff; --vk-sub:#b4b9e0; --vk-vio:#a98cff; --vk-blue:#5f9dff; --vk-mint:#5fe3bd; --vk-amber:#ffbe7a;
  --vk-out:cubic-bezier(.16,1,.3,1);      /* 出るときは、速く出て静かに止まる */
  --vk-lat:"Chakra Petch","Zen Kaku Gothic New",sans-serif;
  --vk-ja:"Zen Kaku Gothic New",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--vk-bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--vk-bg);color:var(--vk-ink);font-family:var(--vk-ja);font-size:16px;line-height:1.7;overflow-x:hidden;}
img{max-width:100%;}
::selection{background:rgba(169,140,255,.45);color:#fff;}
a{color:#c9b8ff;text-underline-offset:.22em;}
a:focus-visible,button:focus-visible{outline:2px solid var(--vk-mint);outline-offset:3px;border-radius:4px;}
/* 出る前に横へずらしてある部品がある。画面から外れると出る前に戻るので、横にはみ出さないよう切る。
   clip は巻ける箱を作らないので、上の帯の固定（sticky）は崩れない */
.vk-main{position:relative;z-index:1;overflow-x:clip;}
.vk-in{width:min(calc(100% - 40px),1180px);margin-inline:auto;}
.vk-lat{font-family:var(--vk-lat);}
br.sp{display:none;} @media(max-width:640px){br.sp{display:inline;} br.pc{display:none;}}

/* ── 上の帯 ── */
.vk-top{position:sticky;top:0;z-index:30;background:rgba(7,8,15,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--vk-line);}
.vk-top-in{display:flex;align-items:center;gap:20px;width:min(calc(100% - 32px),1180px);height:60px;margin-inline:auto;}
.vk-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 18px/1 var(--vk-lat);letter-spacing:.14em;}
.vk-logo img{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(169,140,255,.7));transition:transform .6s var(--vk-out);}
.vk-logo:hover img{transform:rotate(-20deg) scale(1.08);}
.vk-nav{display:flex;gap:22px;margin-left:auto;}
.vk-nav a{position:relative;font:600 12px/1 var(--vk-lat);letter-spacing:.18em;color:var(--vk-sub);text-decoration:none;padding:6px 0;}
.vk-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--vk-mint);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--vk-out);}
.vk-nav a:hover{color:#fff;} .vk-nav a:hover::after{transform:scaleX(1);}
.vk-top-x{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--vk-line);
  font:700 12px/1 var(--vk-lat);letter-spacing:.1em;color:#fff;text-decoration:none;background:rgba(255,255,255,.04);transition:border-color .2s,background-color .2s;}
.vk-top-x:hover{border-color:var(--vk-mint);background:rgba(95,227,189,.08);}
@media(max-width:760px){.vk-nav{display:none;} .vk-top-x{margin-left:auto;}}

/* ── 地：ゆっくり流れる光（固定の1枚。動かすのは transform だけ） ── */
.vk-aurora{position:fixed;inset:-25%;z-index:0;pointer-events:none;opacity:.75;
  background:radial-gradient(ellipse 30% 32% at 18% 22%,rgba(132,45,205,.36),transparent 72%),
             radial-gradient(ellipse 34% 36% at 84% 20%,rgba(58,104,240,.30),transparent 72%),
             radial-gradient(ellipse 30% 30% at 70% 82%,rgba(49,208,184,.14),transparent 72%);
  animation:vk-float 22s ease-in-out infinite alternate;}
@keyframes vk-float{from{transform:translate3d(-2%,1%,0) rotate(-3deg);}to{transform:translate3d(3%,-3%,0) rotate(6deg) scale(1.05);}}
/* 床の格子：奥へ流れ続ける（遠近をつけた1枚を、格子1つぶんずつ送る） */
.vk-floor{position:fixed;left:-30%;right:-30%;bottom:0;height:46vh;z-index:0;pointer-events:none;perspective:340px;perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%);opacity:.42;}
.vk-floor i{position:absolute;left:0;right:0;top:0;height:200%;transform-origin:50% 0;transform:rotateX(64deg);
  background-image:linear-gradient(rgba(169,140,255,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(95,157,255,.42) 1px,transparent 1px);
  background-size:64px 64px;animation:vk-floor 2.4s linear infinite;}
@keyframes vk-floor{from{transform:rotateX(64deg) translateY(-64px);}to{transform:rotateX(64deg) translateY(0);}}
/* 大きな紋章：ゆっくり回りながら、スクロールでも回る（--vk-rot は vykro.js が入れる） */
.vk-emb-bg{position:fixed;right:-14vmin;top:12vh;width:78vmin;aspect-ratio:1;z-index:0;pointer-events:none;opacity:.045;
  transform:rotate(var(--vk-rot,0deg));}
.vk-emb-bg img{width:100%;height:100%;animation:vk-spin 90s linear infinite;}
@keyframes vk-spin{to{transform:rotate(360deg);}}
.vk-stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.vk-spot{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(169,140,255,.16),rgba(95,157,255,.06) 40%,transparent 68%);transition:opacity .6s;}
.vk-spot.on{opacity:1;}
/* 読んだ所までの帯（上の端） */
.vk-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:40;pointer-events:none;}
.vk-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--vk-p,0));
  background:linear-gradient(90deg,var(--vk-vio),var(--vk-blue),var(--vk-mint));}

/* ── はじめ：真ん中に大きな紋章と VYKRØ ── */
.vk-hero{min-height:calc(100svh - 60px);display:grid;align-items:center;padding:clamp(40px,7vh,80px) 0 clamp(50px,8vh,90px);text-align:center;}
.vk-hero-in{display:flex;flex-direction:column;align-items:center;}
.vk-hero-emb{position:relative;width:clamp(120px,22vw,220px);aspect-ratio:1;}
.vk-hero-emb img{position:relative;z-index:1;width:100%;height:100%;filter:drop-shadow(0 0 22px rgba(169,140,255,.75)) drop-shadow(0 0 60px rgba(95,157,255,.4));
  animation:vk-bob 6s ease-in-out infinite;}
@keyframes vk-bob{0%,100%{translate:0 0;}50%{translate:0 -10px;}}
.vk-hero-halo{position:absolute;inset:-30%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(169,140,255,.55) 78%,rgba(95,227,189,.55) 90%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:vk-spin 7s linear infinite;}
.vk-kicker{margin:clamp(18px,3vw,28px) 0 0;font:600 12px/1 var(--vk-lat);letter-spacing:.42em;color:var(--vk-mint);}
.vk-kicker span{display:inline-block;padding-left:.42em;}
.vk-title{margin:.12em 0 0;font-family:var(--vk-lat);font-weight:700;font-size:clamp(4.2rem,17vw,11rem);line-height:.92;letter-spacing:.06em;color:#fff;
  filter:drop-shadow(0 0 28px rgba(169,140,255,.5));}
/* ★ 光は文字（text-shadow）ではなく題の外側（filter）にかける。文字はせり上げのため .vk-word で切っているので、
   　 text-shadow だと光が四角く切られ、箱の縁が見えた（2026-10-27 本番で見つけた） */
.vk-word{display:inline-flex;overflow:hidden;padding:.04em 0 .06em .06em;}
.vk-letter{display:inline-block;}
.vk-copy{margin:clamp(14px,2vw,22px) 0 0;font-weight:700;font-size:clamp(18px,2.4vw,26px);letter-spacing:.12em;color:#fff;}
.vk-lead{max-width:62ch;margin:clamp(10px,1.6vw,16px) auto 0;font-size:clamp(14px,1.4vw,16px);line-height:1.95;color:var(--vk-sub);}
.vk-lead b{color:var(--vk-ink);font-weight:700;}
.vk-hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(22px,3vw,34px);}
.vk-cue{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:clamp(28px,5vh,52px);font:600 11px/1 var(--vk-lat);letter-spacing:.3em;color:var(--vk-sub);text-decoration:none;}
.vk-cue::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,var(--vk-mint),transparent);animation:vk-drip 1.8s ease-in-out infinite;}
@keyframes vk-drip{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ── ボタン ── */
.vk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--vk-line);
  font-weight:700;font-size:14.5px;color:var(--vk-ink);text-decoration:none;background:rgba(255,255,255,.04);
  transition:border-color .2s,transform .2s var(--vk-out),background-color .2s,box-shadow .3s;}
.vk-btn:hover{border-color:rgba(255,255,255,.4);transform:translateY(-2px);}
.vk-btn-pri{background:linear-gradient(135deg,#6a3fd6,#3b6be0);border-color:transparent;color:#fff;box-shadow:0 10px 30px -10px rgba(106,63,214,.8);}
.vk-btn-pri:hover{background:linear-gradient(135deg,#7a52e2,#4a79ea);box-shadow:0 14px 40px -10px rgba(106,63,214,1);}
.vk-ext{font-size:.85em;color:var(--vk-sub);}
.vk-btn-pri .vk-ext{color:rgba(255,255,255,.8);}

/* ── 流れる帯（スクロールの勢いで速くなり・傾く。--vk-v は vykro.js） ── */
.vk-band{position:relative;z-index:1;margin:clamp(10px,2vw,20px) 0;border-block:1px solid var(--vk-line);background:rgba(255,255,255,.02);overflow:hidden;
  transform:skewY(-2deg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.vk-band-track{display:flex;width:max-content;animation:vk-marquee 34s linear infinite;}
.vk-band ul{display:flex;gap:34px;margin:0;padding:14px 17px;list-style:none;white-space:nowrap;transform:skewX(calc(var(--vk-v,0) * -14deg));}
.vk-band li{display:flex;align-items:center;gap:34px;font:700 13px/1 var(--vk-lat);letter-spacing:.2em;color:#cbbdf3;}
.vk-band li::after{content:"";width:7px;height:7px;background:var(--vk-mint);transform:rotate(45deg);}
@keyframes vk-marquee{to{transform:translateX(-50%);}}
.vk-band-rev{transform:skewY(2deg);}
.vk-band-rev .vk-band-track{animation-direction:reverse;}
.vk-band-rev li{color:#9fe1cb;}
.vk-band-rev li::after{background:var(--vk-vio);}

/* ── 段の共通 ── */
.vk-sec{position:relative;padding:clamp(70px,11vw,140px) 0;}
.vk-label{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:700 12px/1 var(--vk-lat);letter-spacing:.36em;color:var(--vk-mint);}
.vk-label::before{content:"";width:28px;height:1px;background:var(--vk-mint);}
.vk-h{margin:0;font-family:var(--vk-ja);font-weight:700;font-size:clamp(28px,4.4vw,48px);line-height:1.3;letter-spacing:.02em;color:#fff;}

/* 言葉：スクロールに合わせて1文字ずつ灯る（vykro.js が .lit を付ける） */
.vk-glow-text{margin:0;font-weight:700;font-size:clamp(34px,7.4vw,92px);line-height:1.22;letter-spacing:.02em;}
.vk-ch{color:rgba(238,240,255,.13);transition:color .5s var(--vk-out),text-shadow .5s var(--vk-out);}
.vk-ch.lit{color:#fff;text-shadow:0 0 28px rgba(169,140,255,.55);}
.vk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px);margin-top:clamp(40px,6vw,70px);}
.vk-stat{position:relative;padding:clamp(18px,3vw,30px) clamp(14px,2vw,24px);border:1px solid var(--vk-line);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(169,140,255,.10),rgba(95,157,255,.03) 60%);}
.vk-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--vk-vio),var(--vk-mint));}
.vk-stat b{display:block;font:700 clamp(40px,7vw,84px)/1 var(--vk-lat);color:#fff;font-variant-numeric:tabular-nums;}
.vk-stat span{display:block;margin-top:8px;font:600 11px/1 var(--vk-lat);letter-spacing:.26em;color:var(--vk-sub);}


/* ── お知らせ（ABOUT の上・最新の4つ） ── */
.vk-news{padding-bottom:clamp(30px,5vw,60px);}
.vk-news-list{margin:clamp(22px,3vw,34px) 0 0;padding:0;list-style:none;border-top:1px solid var(--vk-line);}
.vk-news-i{position:relative;border-bottom:1px solid var(--vk-line);}
/* 下の線を、光が左から走る */
.vk-news-i::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--vk-vio),var(--vk-mint));transform:scaleX(0);transform-origin:left;}
.vk-news-a{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:18px 6px;
  color:var(--vk-ink);text-decoration:none;overflow:hidden;isolation:isolate;}
.vk-news-a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(169,140,255,.14),rgba(95,227,189,.06));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--vk-out);}
a.vk-news-a:hover::before{transform:none;}
.vk-news-a time{font:600 14px/1 var(--vk-lat);letter-spacing:.08em;color:var(--vk-sub);font-variant-numeric:tabular-nums;}
.vk-tag{display:inline-block;justify-self:start;min-width:76px;padding:5px 10px;border-radius:999px;text-align:center;font:700 10.5px/1 var(--vk-lat);letter-spacing:.18em;
  color:var(--vk-bg);background:var(--vk-mint);}
.vk-tag-partner{background:var(--vk-amber);}
.vk-tag-member{background:var(--vk-vio);}
.vk-news-t{font-weight:700;font-size:15.5px;line-height:1.6;}
.vk-news-go{font-size:15px;color:var(--vk-sub);transition:transform .35s var(--vk-out),color .2s;}
a.vk-news-a:hover .vk-news-go{transform:translateX(5px);color:var(--vk-mint);}
@media(max-width:600px){.vk-news-a{grid-template-columns:auto minmax(0,1fr) auto;padding:14px 4px;}
  .vk-news-t{grid-column:1/3;grid-row:2;} .vk-news-go{grid-row:1/3;grid-column:3;}}
.js .vk-news-i[data-fx]{opacity:0;transform:translateX(40px);transition:opacity .6s ease,transform .9s var(--vk-out);transition-delay:calc(var(--i,0) * 110ms);}
.js .vk-news-i.in{opacity:1;transform:none;}
.js .vk-news-i.in::after{animation:vk-news-line 1.1s var(--vk-out) both;animation-delay:calc(var(--i,0) * 110ms + .3s);}
@keyframes vk-news-line{0%{transform:scaleX(0);opacity:1;}70%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:0;}}

/* ── 理念文：スクロールに合わせて1行ずつ灯る（vykro.js が .lit を付ける。スクリプトが無いときは最初から見える） ── */
.vk-mani{max-width:900px;margin-top:clamp(36px,5vw,60px);}
.vk-ml{margin:0 0 .55em;font-weight:700;font-size:clamp(17px,2vw,24px);line-height:1.8;color:#fff;}
.vk-ml-last{margin-top:.9em;font-size:clamp(20px,2.7vw,32px);}
.js .vk-ml{color:rgba(238,240,255,.16);transform:translateX(-16px);filter:blur(2px);
  transition:color .7s var(--vk-out),transform .9s var(--vk-out),filter .7s ease,text-shadow .7s ease;}
.js .vk-ml.lit{color:#fff;transform:none;filter:none;}
.js .vk-ml-last.lit{color:var(--vk-mint);text-shadow:0 0 30px rgba(95,227,189,.45);}

/* ── 5つの理念：頭文字をつなぐと VYKRØ ──
   大きな頭文字が回って入り、下から色が満ちる → 英語が1字ずつ落ちる → 公式の言葉が書き出される → 補足 */
.vk-pil-big{font:700 clamp(84px,13vw,170px)/.85 var(--vk-lat);color:transparent;-webkit-text-stroke:2px var(--vk-vio);
  background:linear-gradient(180deg,#fff,var(--vk-vio) 60%,var(--vk-blue)) 0 100%/100% 100% no-repeat;-webkit-background-clip:text;background-clip:text;}
.vk-pil-word{display:flex;align-items:baseline;flex-wrap:wrap;margin:0;font:700 clamp(22px,3vw,34px)/1 var(--vk-lat);letter-spacing:.14em;color:var(--vk-mint);}
.vk-pil-no{margin-right:1em;font-size:.42em;letter-spacing:.1em;color:var(--vk-sub);}
.vk-pil-c{display:inline-block;}
.vk-pil-phrase{margin:14px 0 8px;font-family:var(--vk-ja);font-weight:700;font-size:clamp(20px,2.6vw,30px);line-height:1.45;color:#fff;}
.vk-pil-note{margin:0;font-size:15px;line-height:1.9;color:var(--vk-sub);}
.js .vk-pil .vk-pil-big{opacity:0;transform:perspective(600px) rotateY(-100deg);background-size:100% 0%;
  transition:opacity .5s ease,transform 1.1s cubic-bezier(.2,1.3,.4,1),background-size 1.2s var(--vk-out) .45s;}
.js .vk-pil.in .vk-pil-big{opacity:1;transform:none;background-size:100% 100%;}
.js .vk-pil .vk-pil-c{opacity:0;transform:translateY(-70%) rotate(-14deg);transition:opacity .3s ease,transform .6s var(--vk-out);transition-delay:calc(var(--i,0) * 45ms + .35s);}
.js .vk-pil.in .vk-pil-c{opacity:1;transform:none;}
.js .vk-pil .vk-pil-phrase{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--vk-out) .7s;}
.js .vk-pil.in .vk-pil-phrase{clip-path:inset(0 0 0 0);}
.js .vk-pil .vk-pil-note{opacity:0;transform:translateY(10px);transition:opacity .8s ease 1s,transform .9s var(--vk-out) 1s;}
.js .vk-pil.in .vk-pil-note{opacity:1;transform:none;}
.vk-philo-lead{margin:14px 0 0;font-size:15px;color:var(--vk-sub);}
.vk-philo-lead .vk-lat{font-weight:700;letter-spacing:.12em;color:var(--vk-mint);}
/* 左に VYKRØ の5文字が貼り付き、読んでいる理念の文字が灯る（.on・読み終えたら .done、5つ目まで読んだら .all） */
.vk-philo-grid{display:grid;grid-template-columns:110px minmax(0,1fr);gap:clamp(20px,4vw,60px);margin-top:clamp(36px,5vw,60px);}
.vk-philo-nav{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:8px;font:700 58px/1 var(--vk-lat);}
.vk-philo-nav b{display:block;color:transparent;-webkit-text-stroke:1.5px rgba(190,180,255,.35);
  transition:color .5s ease,-webkit-text-stroke-color .5s ease,transform .5s var(--vk-out),text-shadow .5s ease;}
.vk-philo-nav b.done{color:rgba(238,240,255,.5);-webkit-text-stroke-color:transparent;}
.vk-philo-nav b.on{color:#fff;-webkit-text-stroke-color:transparent;transform:translateX(12px) scale(1.12);text-shadow:0 0 24px rgba(169,140,255,.85);}
.vk-philo-nav.all b{color:#fff;-webkit-text-stroke-color:transparent;text-shadow:0 0 28px rgba(95,227,189,.8);transform:none;
  animation:vk-pop .7s var(--vk-out) both;animation-delay:calc(var(--i,0) * 90ms);}
@keyframes vk-pop{0%{transform:scale(1);}40%{transform:scale(1.35);color:var(--vk-mint);}100%{transform:scale(1);}}
.vk-pils{display:flex;flex-direction:column;gap:clamp(18px,3vw,32px);margin:0;padding:0;list-style:none;}
.vk-pil{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(20px,3vw,36px);
  border:1px solid var(--vk-line);border-radius:24px;overflow:hidden;background:linear-gradient(120deg,rgba(169,140,255,.09),rgba(95,157,255,.03) 50%,transparent);}
.vk-pil::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--vk-vio),var(--vk-mint));}
.vk-pil-big{min-width:1ch;text-align:center;}
/* 理念の箱：左右から交互に寄る */
.js .vk-pil[data-fx]{opacity:0;transform:translateX(64px);transition:opacity .7s ease,transform 1s var(--vk-out);}
.js .vk-pil[data-fx]:nth-child(even){transform:translateX(-64px);}
.js .vk-pil.in{opacity:1;transform:none;}
/* ★ 偶数番目の「左から」(:nth-child) は .in より強いので、同じ強さで戻す。無いと 64px 左にずれたまま止まった（2026-10-27） */
.js .vk-pil.in[data-fx]:nth-child(n){opacity:1;transform:none;}
.js .vk-pil::before{transform:scaleY(0);transform-origin:top;transition:transform 1s var(--vk-out) .2s;}
.js .vk-pil.in::before{transform:none;}
@media(max-width:820px){
  .vk-philo-grid{grid-template-columns:minmax(0,1fr);gap:8px;}
  /* 狭い画面では、5文字を上の帯のすぐ下に横一列で貼り付ける */
  /* 後ろのカードの文字が透けて読みにくかったので、地は塗りつぶす */
  .vk-philo-nav{top:60px;z-index:5;flex-direction:row;justify-content:center;gap:16px;margin:0 -20px;padding:10px 0 12px;font-size:30px;
    background:#07080f;border-bottom:1px solid var(--vk-line);}
  .vk-philo-nav b.on{transform:translateY(-3px) scale(1.15);}
}
@media(max-width:520px){.vk-pil{grid-template-columns:minmax(0,1fr);gap:6px;} .vk-pil-big{text-align:left;font-size:76px;}}

/* ── オーナー ── */
.vk-owner-card{display:flex;align-items:center;gap:clamp(22px,4vw,52px);margin-top:clamp(28px,4vw,44px);padding:clamp(20px,3vw,36px);
  border:1px solid var(--vk-line);border-radius:26px;background:linear-gradient(135deg,rgba(169,140,255,.10),rgba(95,157,255,.05) 50%,rgba(95,227,189,.06));}
.vk-owner-icon{position:relative;flex:none;width:clamp(120px,18vw,190px);aspect-ratio:1;}
.vk-owner-icon::before{content:"";position:absolute;inset:-10px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--vk-vio) 75%,var(--vk-mint) 90%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:vk-spin 4s linear infinite;}
.vk-owner-icon img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#1b1d36;
  box-shadow:0 0 0 3px rgba(169,140,255,.55),0 18px 40px -10px rgba(0,0,0,.6);}
.vk-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--vk-mint);opacity:0;}
.vk-owner-body{min-width:0;}
.vk-role{display:inline-block;padding:5px 12px;border-radius:999px;font:700 11px/1 var(--vk-lat);letter-spacing:.22em;color:var(--vk-bg);background:var(--vk-amber);}
.vk-owner-name{margin:10px 0 8px;font-family:var(--vk-ja);font-weight:700;font-size:clamp(30px,4.6vw,52px);line-height:1.15;color:#fff;}
.vk-owner-body p{margin:0 0 16px;font-size:14.5px;line-height:1.9;color:var(--vk-sub);}
@media(max-width:600px){.vk-owner-card{flex-direction:column;text-align:center;} .vk-owner-body .vk-m-links{justify-content:center;}}

/* ── メンバー ── */
.vk-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;}
.vk-head p{margin:0;grid-column:1;font-size:15px;line-height:1.9;color:var(--vk-sub);}
.vk-head .vk-count{grid-column:2;grid-row:1/3;margin:0;text-align:right;}
.vk-count b{display:block;font:700 clamp(54px,8vw,96px)/1 var(--vk-lat);color:var(--vk-mint);font-variant-numeric:tabular-nums;}
.vk-count span{font:600 11px/1 var(--vk-lat);letter-spacing:.24em;color:var(--vk-sub);}
.vk-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px);margin-top:clamp(30px,4vw,48px);perspective:1200px;}
/* 3列で1枚だけ余ったら（10人なら最後の1人）、左に寄せず真ん中に置く */
@media(min-width:961px){.vk-roster>.vk-m:last-child:nth-child(3n+1){grid-column:2;}}
@media(max-width:960px){.vk-roster{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* スマホでも2列（1列だと人数ぶん縦に長くなりすぎる）。文字は少し小さく */
@media(max-width:520px){.vk-roster{gap:10px;} .vk-m{border-radius:16px;} .vk-m-body{padding:10px 12px 14px;} .vk-m-name{font-size:16px;}
  .vk-m-soon{font-size:12px;} .vk-chip{padding:6px 9px;font-size:11px;}}
.vk-m{position:relative;display:flex;flex-direction:column;border:1px solid var(--vk-line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#141633,#0d0f22);transition:border-color .3s;}
.vk-m:hover{border-color:rgba(169,140,255,.45);}
/* マウスを乗せると、指の向きへ少し傾き、表面に光が乗る（--rx/--ry/--mx/--my は vykro.js） */
.vk-m::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.18),rgba(169,140,255,.06) 30%,transparent 55%);}
.vk-m.tilted:hover::after{opacity:1;}
.vk-m-art{position:relative;aspect-ratio:6/7;overflow:hidden;
  background:radial-gradient(ellipse 70% 40% at 50% 100%,rgba(95,157,255,.22),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.03),transparent);}
.vk-m-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;}
.vk-m-sweep{position:absolute;inset:0;pointer-events:none;transform:translateY(100%);
  background:linear-gradient(0deg,transparent 0%,rgba(95,227,189,.0) 40%,rgba(95,227,189,.38) 49%,rgba(255,255,255,.7) 50%,rgba(169,140,255,.0) 60%,transparent 100%);}
.vk-m-body{display:flex;flex-direction:column;gap:6px;padding:14px 18px 18px;}
.vk-m-name{margin:0;font-family:var(--vk-ja);font-weight:700;font-size:20px;line-height:1.4;color:#fff;}
.vk-m-q{font-family:var(--vk-lat);letter-spacing:.3em;color:#cbbdf3;}
.vk-m-soon{margin:0;font-size:13px;color:var(--vk-sub);}
.vk-m-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.vk-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--vk-line);
  font:600 12px/1 var(--vk-lat);letter-spacing:.08em;color:var(--vk-ink);text-decoration:none;background:rgba(255,255,255,.03);
  transition:border-color .2s,background-color .2s;}
.vk-chip:hover{border-color:var(--vk-mint);background:rgba(95,227,189,.08);}

/* ── スポンサー ── */
/* スポンサーは sponsors.json の順に並ぶ（広い画面は横に2つ、狭いと縦） */
.vk-spons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(28px,4vw,44px);}
@media(max-width:860px){.vk-spons{grid-template-columns:minmax(0,1fr);}}
.vk-spon{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);padding:clamp(14px,2vw,22px);border:1px solid var(--vk-line);border-radius:26px;
  background:rgba(255,255,255,.025);transition:border-color .3s;}
.vk-spon:hover{border-color:rgba(169,140,255,.4);}
.vk-spon-body{padding:0 clamp(4px,1vw,10px) clamp(4px,1vw,8px);}
.vk-spon-role{display:inline-block;margin:0 0 12px !important;padding:5px 12px;border-radius:999px;font:700 11px/1.2 var(--vk-ja) !important;letter-spacing:.08em;
  color:var(--vk-bg) !important;background:var(--vk-mint);}
.vk-wave-mark{width:clamp(34px,4vw,46px);height:auto;filter:drop-shadow(0 0 10px rgba(95,227,189,.5));}
/* 音の会社の絵：イコライザーのように波打つ棒（ずらしは data-i → --i）。真ん中に名前 */
.vk-wave{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(3px,.5vw,6px);aspect-ratio:16/9;padding:0 6%;border-radius:18px;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(95,227,189,.18),transparent 70%),linear-gradient(135deg,#0d1a2a,#120f2c 60%,#0b0a18);
  box-shadow:0 24px 60px -20px rgba(40,140,160,.55);}
.vk-wave i{flex:1;height:70%;border-radius:99px;background:linear-gradient(180deg,var(--vk-mint),var(--vk-blue) 55%,var(--vk-vio));opacity:.85;
  transform:scaleY(.18);transform-origin:50% 50%;animation:vk-eq 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -.13s);}
.vk-wave i:nth-child(3n){animation-duration:.8s;} .vk-wave i:nth-child(4n+1){animation-duration:1.35s;}
@keyframes vk-eq{0%{transform:scaleY(.14);}50%{transform:scaleY(.62);}100%{transform:scaleY(1);}}
.vk-wave-name{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(30px,4.6vw,56px)/1 var(--vk-lat);letter-spacing:.08em;color:#fff;
  text-shadow:0 0 30px rgba(95,227,189,.7),0 0 4px rgba(7,8,15,.9);pointer-events:none;}
.vk-group{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#0b0a18;box-shadow:0 24px 60px -20px rgba(70,40,160,.6);}
.vk-group img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.vk-group-scan{position:absolute;inset:0;pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 35%,rgba(190,170,255,.0) 42%,rgba(190,170,255,.28) 50%,rgba(95,227,189,.0) 58%,transparent 65%);}
.vk-spon-name{display:flex;align-items:center;gap:12px;margin:0 0 10px;font:700 clamp(24px,3vw,34px)/1 var(--vk-lat);color:#fff;}
.vk-lino-mark{width:clamp(34px,4vw,46px);height:auto;filter:drop-shadow(0 0 10px rgba(159,225,203,.5));}
.vk-spon-body p{margin:0 0 14px;font-size:14.5px;line-height:1.95;color:var(--vk-sub);}
/* 受け持っていること（配信ツールの提供・サイトの制作と運営） */
.vk-spon-list{display:grid;gap:8px;margin:0 0 18px;padding:0;list-style:none;}
.vk-spon-list li{display:flex;align-items:baseline;gap:10px;font-size:14.5px;line-height:1.7;color:var(--vk-ink);}
.vk-spon-list li::before{content:"";flex:none;width:7px;height:7px;background:var(--vk-mint);transform:translateY(-2px) rotate(45deg);}
/* 段落の大きさ（.vk-spon-body p）に負けないよう、同じ強さで書き直す */
.vk-spon-body .vk-spon-name{margin:0 0 12px;font:700 clamp(24px,3vw,34px)/1 var(--vk-lat);color:#fff;}
@media(max-width:820px){.vk-spon{grid-template-columns:1fr;}}

/* ── お問い合わせ（入力欄から送る。受け口は functions/api/contact.js） ── */
.vk-form{position:relative;margin-top:clamp(24px,3vw,36px);padding:clamp(20px,3.4vw,40px);border:1px solid var(--vk-line);border-radius:26px;
  background:linear-gradient(135deg,rgba(95,157,255,.08),rgba(169,140,255,.06));overflow:hidden;}
.vk-form-lead{margin:0 0 20px;font-size:15px;line-height:1.9;color:var(--vk-sub);}
/* 入力欄は公式の見た目に寄せる：紋章のような角の切り落とし・英字の小見出し（段の見出しと同じ緑）・下を走る光 */
.vk-req{display:inline-block;margin-left:10px;font:700 9.5px/1 var(--vk-lat);letter-spacing:.2em;color:var(--vk-mint);vertical-align:2px;}
.vk-form-lead .vk-req{margin:0 2px;vertical-align:1px;}
.vk-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;}
.vk-f{display:flex;flex-direction:column;gap:8px;min-width:0;}
.vk-f-wide{grid-column:1/-1;}
@media(max-width:640px){.vk-form-grid{grid-template-columns:1fr;}}
/* 欄の名前は上、中身は下（狭い画面でも並びが変わらない） */
.vk-f-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;font-size:14px;font-weight:700;color:#fff;}
.vk-f-en{font:700 11px/1 var(--vk-lat);letter-spacing:.3em;color:var(--vk-mint);}
.vk-f-count{margin-left:auto;font:500 12px/1 var(--vk-lat);color:var(--vk-sub);}
.vk-f-count b{font-weight:600;color:var(--vk-ink);}
/* 枠：右上と左下を切り落とす。縁は外側の箱の地で描く（clip-path で切ると border の角が欠けるため） */
.vk-f-box{--cut:12px;position:relative;display:block;padding:1px;background:rgba(190,180,255,.24);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));transition:background-color .25s;}
.vk-f-box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--vk-vio),var(--vk-mint));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--vk-out);}
.vk-f-box:hover{background:rgba(190,180,255,.42);}
.vk-f-box:focus-within{background:linear-gradient(135deg,var(--vk-vio),var(--vk-mint));}
.vk-f-box:focus-within::after{transform:none;}
.vk-f input,.vk-f select,.vk-f textarea{display:block;width:100%;min-height:46px;margin:0;padding:12px 16px;border:0;border-radius:0;
  font:inherit;font-size:15.5px;color:#fff;background:#0b0c1a;
  clip-path:polygon(0 0,calc(100% - 11.5px) 0,100% 11.5px,100% 100%,11.5px 100%,0 calc(100% - 11.5px));transition:background-color .2s;}
.vk-f select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--vk-mint) 50%),linear-gradient(135deg,var(--vk-mint) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;}
.vk-f select option{color:#111;background:#fff;}
.vk-f textarea{min-height:170px;resize:vertical;line-height:1.8;}
.vk-f input::placeholder,.vk-f textarea::placeholder{color:rgba(180,185,224,.45);}
.vk-f input:focus,.vk-f select:focus,.vk-f textarea:focus{outline:none;background-color:#0f1124;}
/* 入っていない欄：縁が赤くなり、小さく揺れる */
.vk-f.bad .vk-f-box{background:#ff8e9e;}
.vk-f.bad .vk-f-name,.vk-f.bad .vk-f-en{color:#ffb3be;}
.vk-f.shake{animation:vk-shake .42s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes vk-shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-5px);}40%,60%{transform:translateX(5px);}}
/* 人には見えない欄（機械だけが埋める） */
.vk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.vk-form-foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:24px;}
.vk-send{--cut:14px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:200px;min-height:52px;padding:0 30px;
  border:0;cursor:pointer;overflow:hidden;font:700 15px/1 var(--vk-ja);color:#fff;background:linear-gradient(135deg,#6a3fd6,#3b6be0);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  filter:drop-shadow(0 10px 24px rgba(106,63,214,.55));transition:transform .2s var(--vk-out),filter .3s;}
.vk-send::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);}
.vk-send:hover{transform:translateY(-2px);filter:drop-shadow(0 14px 30px rgba(106,63,214,.8));}
.vk-send:hover::before{transition:transform .7s var(--vk-out);transform:translateX(120%);}
.vk-send:focus-visible{outline:2px solid var(--vk-mint);outline-offset:4px;}
.vk-send-en{font:700 12px/1 var(--vk-lat);letter-spacing:.3em;color:var(--vk-mint);}
.vk-send:disabled{cursor:progress;opacity:.85;transform:none;}
.vk-send-spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:vk-spin .8s linear infinite;}
.vk-form.sending .vk-send-spin{display:block;}
.vk-form-msg{margin:0;font-size:14px;line-height:1.7;color:var(--vk-sub);}
.vk-form-msg.err{color:#ffb3be;}
.vk-form-alt{margin:18px 0 0;font-size:13px;color:var(--vk-sub);}
.vk-form-alt a{color:#c9b8ff;}
/* 送れたら、入力欄の上に「送信しました」が開き、チェックの線が描かれる */
.vk-sent{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
  background:radial-gradient(circle at 50% 40%,rgba(95,227,189,.16),transparent 60%),rgba(9,10,22,.96);clip-path:circle(0% at 50% 50%);animation:vk-sent-open .8s var(--vk-out) forwards;}
@keyframes vk-sent-open{to{clip-path:circle(140% at 50% 50%);}}
.vk-sent svg{width:76px;height:76px;fill:none;stroke:var(--vk-mint);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px rgba(95,227,189,.6));}
.vk-sent circle{stroke-dasharray:220;stroke-dashoffset:220;animation:vk-draw .8s ease-out .3s forwards;}
.vk-sent path{stroke-dasharray:60;stroke-dashoffset:60;animation:vk-draw .45s ease-out .95s forwards;}
@keyframes vk-draw{to{stroke-dashoffset:0;}}
.vk-sent h3{margin:6px 0 0;font-size:clamp(20px,2.6vw,26px);color:#fff;}
.vk-sent p{margin:0;max-width:44ch;font-size:14.5px;line-height:1.9;color:var(--vk-sub);}
.vk-sent .vk-send{margin-top:8px;min-width:0;}

/* ── 締め ── */
.vk-finale{text-align:center;padding-bottom:clamp(90px,12vw,150px);overflow:hidden;}
.vk-finale .vk-in{position:relative;z-index:1;}
.vk-fin-emb{position:absolute;left:50%;top:50%;width:min(80vw,620px);height:auto;margin:calc(min(80vw,620px) / -2) 0 0 calc(min(80vw,620px) / -2);
  opacity:.09;pointer-events:none;filter:drop-shadow(0 0 40px rgba(169,140,255,.8));animation:vk-spin 40s linear infinite reverse;}
.vk-fin-big{margin:0;font-weight:700;font-size:clamp(40px,8.4vw,104px);line-height:1.15;letter-spacing:.01em;color:#fff;text-shadow:0 0 60px rgba(169,140,255,.45);}
.vk-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,4vw,44px);}

/* ── 下の帯 ── */
.vk-foot{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 20px 36px;
  border-top:1px solid var(--vk-line);background:rgba(7,8,15,.7);text-align:center;}
.vk-foot-brand{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--vk-lat);letter-spacing:.14em;color:#fff;text-decoration:none;}
.vk-foot-brand img{width:26px;height:26px;}
.vk-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;}
.vk-foot-links a{font-size:13px;color:var(--vk-sub);}
.vk-foot-copy{margin:0;font-size:12px;color:var(--vk-sub);}
.vk-foot-copy a{color:var(--vk-sub);}

/* ── 見つからない頁 ── */
.vk-nf{min-height:calc(100svh - 60px - 160px);display:grid;align-items:center;text-align:center;}
.vk-nf-code{margin:0;font:700 clamp(90px,20vw,200px)/1 var(--vk-lat);color:transparent;-webkit-text-stroke:2px var(--vk-vio);text-shadow:0 0 40px rgba(169,140,255,.35);}

/* ============================================================
   出方。.js（vykro.js が最初に付ける）のときだけ、隠してから出す。スクリプトが動かなくても、中身は全部見える
   ============================================================ */
/* はじめ：紋章が奥から回って入り、文字が下からせり上がる → 合言葉 → 説明 → ボタン */
.js .vk-hero-emb{opacity:0;transform:scale(.4) rotate(-60deg);transition:opacity .6s ease,transform 1.2s cubic-bezier(.2,1.3,.4,1);}
.js .vk-kicker{opacity:0;letter-spacing:1em;transition:opacity .8s ease .3s,letter-spacing 1.2s var(--vk-out) .3s;}
.js .vk-letter{transform:translateY(110%);transition:transform .9s var(--vk-out);transition-delay:calc(var(--i,0) * 70ms + 250ms);}
/* ★ .vk-hero の中だけに絞る（見つからない頁も同じ .vk-lead・.vk-hero-cta を使うが、そこには出す合図が無い） */
.js .vk-hero .vk-copy,.js .vk-hero .vk-lead,.js .vk-hero .vk-hero-cta,.js .vk-hero .vk-cue{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s var(--vk-out);}
.js .vk-hero .vk-copy{transition-delay:.75s;} .js .vk-hero .vk-lead{transition-delay:.9s;} .js .vk-hero .vk-hero-cta{transition-delay:1.05s;} .js .vk-hero .vk-cue{transition-delay:1.3s;}
.js .vk-on .vk-hero-emb,.js .vk-on .vk-letter,.js .vk-on .vk-copy,.js .vk-on .vk-lead,.js .vk-on .vk-hero-cta,.js .vk-on .vk-cue{opacity:1;transform:none;}
.js .vk-on .vk-kicker{opacity:1;letter-spacing:.42em;}

/* 帯：斜めに走り込む */
.js .vk-band{transform:skewY(-2deg) translateX(8%);opacity:0;transition:transform 1.2s var(--vk-out),opacity .8s ease;}
.js .vk-band.in{transform:skewY(-2deg);opacity:1;}
.js .vk-band-rev{transform:skewY(2deg) translateX(-8%);}
.js .vk-band-rev.in{transform:skewY(2deg);}

/* 段の小見出し：線が伸びてから文字 */
.js .vk-label[data-fx]{opacity:0;transform:translateX(-16px);transition:opacity .6s ease,transform .8s var(--vk-out);}
.js .vk-label[data-fx]::before{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--vk-out) .1s;}
.js .vk-label.in{opacity:1;transform:none;}
.js .vk-label.in::before{transform:none;}

/* 見出し：左から光の帯で書き出し、一瞬だけ色がずれてちらつく */
.js .vk-h[data-fx],.js .vk-head[data-fx]{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--vk-out);}
.js .vk-h.in,.js .vk-head.in{clip-path:inset(0 0 0 0);}
.js .vk-h.in,.js .vk-head.in .vk-h{animation:vk-glitch .7s steps(1) .55s 1 both;}
@keyframes vk-glitch{
  0%{text-shadow:none;transform:none;}
  10%{text-shadow:-3px 0 var(--vk-vio),3px 0 var(--vk-mint);transform:translateX(2px);}
  25%{text-shadow:4px 0 var(--vk-vio),-4px 0 var(--vk-mint);transform:translateX(-3px) skewX(-6deg);}
  40%{text-shadow:-2px 0 var(--vk-blue),2px 0 var(--vk-amber);transform:none;}
  60%{text-shadow:2px 0 var(--vk-vio),-1px 0 var(--vk-mint);transform:translateX(1px);}
  80%,100%{text-shadow:none;transform:none;}}

/* 数の箱：下から順に跳ね上がる */
.js .vk-stat[data-fx]{opacity:0;transform:translateY(40px) scale(.94);transition:opacity .7s ease,transform 1s cubic-bezier(.2,1.3,.4,1);transition-delay:calc(var(--i,0) * 120ms);}
.js .vk-stat.in{opacity:1;transform:none;}

/* オーナー：右から寄り、アイコンの輪が一度ひろがる */
.js .vk-owner-card{opacity:0;transform:translateX(60px);transition:opacity .8s ease .15s,transform 1.1s var(--vk-out) .15s;}
.js .vk-owner-card .vk-owner-icon img{transform:scale(.7);transition:transform 1s var(--vk-out) .35s;}
.js .vk-owner-card.in{opacity:1;transform:none;}
.js .vk-owner-card.in .vk-owner-icon img{transform:none;}
.js .vk-owner-card.in .vk-ring{animation:vk-ring 1.4s ease-out .7s 2 both;}
@keyframes vk-ring{from{opacity:.9;transform:scale(1);}to{opacity:0;transform:scale(1.55);}}

/* メンバー：手前に起き上がる → シルエットに光が下から上へ走る（ずらして順に） */
.js .vk-m[data-fx]{opacity:0;transform:translateY(54px) rotateX(16deg);transform-origin:50% 100%;
  transition:opacity .8s ease,transform 1.1s var(--vk-out);transition-delay:calc(var(--i,0) * 90ms);}
.js .vk-m.in{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
/* 傾けている間は、ずらし（--i）を効かせずすぐ追う */
.js .vk-m.in.tilted{transition:opacity .8s ease,transform .45s var(--vk-out);transition-delay:0s;}
.js .vk-m.in .vk-m-sweep{animation:vk-sweep 1.3s ease-in-out both;animation-delay:calc(var(--i,0) * 90ms + 450ms);}
@keyframes vk-sweep{from{transform:translateY(100%);}to{transform:translateY(-100%);}}
/* 公開後：シルエットが光とともに剥がれ、色つきの絵が下から現れる */
.vk-m.is-reveal .vk-m-sil{transition:opacity .6s ease;}
.js .vk-m.is-reveal .vk-m-color{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--vk-out);transition-delay:calc(var(--i,0) * 90ms + 500ms);}
.js .vk-m.is-reveal.in .vk-m-color{clip-path:inset(0 0 0 0);}
.js .vk-m.is-reveal.in .vk-m-sil{opacity:0;transition-delay:calc(var(--i,0) * 90ms + 900ms);}
body:not(.js-ready) .vk-m.is-reveal .vk-m-sil{opacity:0;}

/* スポンサー：絵が真ん中から開き、光が一度横切る */
.js .vk-spon[data-fx]{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform 1s var(--vk-out);transition-delay:calc(var(--i,0) * 160ms);}
/* 波形の絵：棒が下から順に伸びて入る */
.js .vk-spon[data-fx] .vk-wave{clip-path:inset(0 100% 0 0 round 18px);transition:clip-path 1.1s var(--vk-out) .25s;}
.js .vk-spon.in .vk-wave{clip-path:inset(0 0 0 0 round 18px);}
.js .vk-spon[data-fx] .vk-group{clip-path:inset(46% 46% 46% 46% round 18px);transition:clip-path 1.2s var(--vk-out) .2s;}
.js .vk-spon[data-fx] .vk-group img{transform:scale(1.12);transition:transform 1.8s var(--vk-out) .2s;}
.js .vk-spon.in{opacity:1;transform:none;}
.js .vk-spon.in .vk-group{clip-path:inset(0 0 0 0 round 18px);}
.js .vk-spon.in .vk-group img{transform:none;}
.js .vk-spon.in .vk-group-scan{animation:vk-scan 1.6s ease-in-out 1.2s 1 both;}
@keyframes vk-scan{to{transform:translateX(100%);}}

/* お問い合わせ：ぼけた所から、少し上がって現れる */
.js .vk-form[data-fx]{opacity:0;filter:blur(8px);transform:translateY(26px);transition:opacity .9s ease,filter .9s ease,transform 1s var(--vk-out);}
.js .vk-form.in{opacity:1;filter:none;transform:none;}

/* 締め：紋章が奥から開き、言葉が大きく寄ってから、ぴたりと止まる */
.js .vk-fin-emb{scale:.3;opacity:0;transition:scale 1.6s var(--vk-out),opacity 1.2s ease;}
.js .vk-finale:has(.vk-fin-big.in) .vk-fin-emb{scale:1;opacity:.09;}
.js .vk-fin-big{opacity:0;transform:scale(1.18);filter:blur(10px);transition:opacity 1s ease,transform 1.4s var(--vk-out),filter 1s ease;}
.js .vk-fin-big.in{opacity:1;transform:none;filter:none;}
.js .vk-cta{opacity:0;transform:translateY(18px);transition:opacity .8s ease .35s,transform 1s var(--vk-out) .35s;}
.js .vk-cta.in{opacity:1;transform:none;}

/* ============================================================
   幕開け：紋章が大きく回りながら入る → 輪が広がり VYKRØ の文字 → 「STREAMERS × CREATORS」の線 → 円が閉じて頁が開く。
   段取りは vykro.js が .p1 → .p2 → .p3 と付ける。クリック・キー・スクロールで飛ばせる
   ============================================================ */
.vk-intro{display:none;}
.js .vk-intro{display:grid;place-items:center;position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,#1d1446 0%,#0b0a1c 55%,#05060c 100%);
  clip-path:circle(150% at 50% 50%);transition:clip-path 1s cubic-bezier(.7,0,.2,1);}
.js .vk-intro.p3{clip-path:circle(0% at 50% 50%);}
.js .vk-intro.skip{transition-duration:.45s;}
.vk-intro-stage{position:relative;display:flex;flex-direction:column;align-items:center;transition:transform .9s var(--vk-out),opacity .6s ease;}
.vk-intro.p3 .vk-intro-stage{transform:scale(1.15);opacity:0;}
.vk-intro-emb{width:clamp(140px,30vmin,280px);height:auto;opacity:0;transform:scale(2.8) rotate(-35deg);filter:blur(18px);
  transition:opacity .5s ease,transform 1.1s cubic-bezier(.2,1.4,.4,1),filter .8s ease;}
.vk-intro.p1 .vk-intro-emb,.vk-intro.p2 .vk-intro-emb,.vk-intro.p3 .vk-intro-emb{opacity:1;transform:none;
  filter:drop-shadow(0 0 22px rgba(169,140,255,.9)) drop-shadow(0 0 60px rgba(95,157,255,.55));}
.vk-intro.p1 .vk-intro-emb{animation:vk-flicker .9s steps(1) .95s 1;}
@keyframes vk-flicker{0%{opacity:1;}10%{opacity:.35;translate:-5px 0;}20%{opacity:1;translate:4px 0;}35%{opacity:.6;translate:0 0;}50%,100%{opacity:1;}}
.vk-intro-ring{position:absolute;left:50%;top:0;width:clamp(140px,30vmin,280px);aspect-ratio:1;margin-left:calc(clamp(140px,30vmin,280px) / -2);
  border-radius:50%;border:2px solid var(--vk-mint);opacity:0;pointer-events:none;}
.vk-intro.p1 .vk-intro-ring{animation:vk-shock 1.2s ease-out .6s 1 both;}
.vk-intro.p1 .vk-intro-ring2{animation-delay:.85s;border-color:var(--vk-vio);}
@keyframes vk-shock{from{opacity:.95;transform:scale(.6);}to{opacity:0;transform:scale(3.6);}}
.vk-intro-word{display:flex;margin-top:clamp(14px,2.4vmin,24px);font:700 clamp(40px,9vmin,96px)/1 var(--vk-lat);letter-spacing:.16em;color:#fff;margin-right:-.16em;
  text-shadow:0 0 30px rgba(169,140,255,.6);}
.vk-intro-word b{display:inline-block;font-weight:700;opacity:0;transform:translateY(60%) scale(1.3);filter:blur(8px);
  transition:opacity .4s ease,transform .7s var(--vk-out),filter .5s ease;transition-delay:calc(var(--i,0) * 70ms + 700ms);}
.vk-intro.p1 .vk-intro-word b,.vk-intro.p2 .vk-intro-word b,.vk-intro.p3 .vk-intro-word b{opacity:1;transform:none;filter:none;}
.vk-intro-sub{display:flex;align-items:center;gap:14px;margin-top:clamp(12px,2vmin,20px);font:600 clamp(11px,1.6vmin,14px)/1 var(--vk-lat);letter-spacing:.5em;color:var(--vk-mint);
  opacity:0;transition:opacity .6s ease .1s;}
.vk-intro-sub i{display:block;width:clamp(30px,8vmin,80px);height:1px;background:var(--vk-mint);transform:scaleX(0);transition:transform .8s var(--vk-out) .1s;}
.vk-intro-sub i:first-child{transform-origin:right;}
.vk-intro-sub i:last-child{transform-origin:left;}
.vk-intro.p2 .vk-intro-sub,.vk-intro.p3 .vk-intro-sub{opacity:1;}
.vk-intro.p2 .vk-intro-sub i,.vk-intro.p3 .vk-intro-sub i{transform:none;}
.vk-intro-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.5),rgba(169,140,255,.18) 30%,transparent 60%);}
.vk-intro.p2 .vk-intro-flash{animation:vk-flash .9s ease-out 0s 1 both;}
@keyframes vk-flash{0%{opacity:0;}15%{opacity:1;}100%{opacity:0;}}
.vk-intro-line{position:absolute;left:0;right:0;top:50%;height:2px;pointer-events:none;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--vk-vio) 20%,#fff 50%,var(--vk-mint) 80%,transparent);box-shadow:0 0 18px rgba(169,140,255,.9);}
.vk-intro.p1 .vk-intro-line{animation:vk-line 1s cubic-bezier(.7,0,.2,1) .15s 1 both;}
@keyframes vk-line{0%{transform:scaleX(0);opacity:1;}60%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:0;}}
.vk-intro-skip{position:absolute;right:20px;bottom:18px;font:600 11px/1 var(--vk-ja);letter-spacing:.12em;color:rgba(180,185,224,.8);opacity:0;transition:opacity .6s ease 1s;}
.vk-intro.p1 .vk-intro-skip,.vk-intro.p2 .vk-intro-skip{opacity:1;}

/* 動きを減らす設定の人：出方はすべて省いて、最初から見せる。背景（光・床・紋章・粒）は止めない */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .vk-band-track,.vk-cue::after,.vk-owner-icon::before,.vk-fin-emb,.vk-hero-emb img,.vk-hero-halo{animation:none !important;}
  .vk-band ul{transform:none !important;}
  .vk-ch{color:#fff;}
  .vk-philo-nav.all b{animation:none !important;}
  .vk-f.shake,.vk-sent,.vk-sent circle,.vk-sent path{animation:none !important;clip-path:none !important;stroke-dashoffset:0 !important;}
  .vk-wave i{animation:none !important;transform:scaleY(.5);}
}