@charset "UTF-8";
/* 提携チーム Team VYKRØ の頁（2026-10-27）。docs.css（上の帯・下の帯）の上に、この頁の世界を重ねる。
   ★ 頁の中に <style> を書かない（CSP）。ずらしの順番（--i）は HTML の data-i を vykro.js が入れる。
   ★ 出方は段ごとに変える（同じ出方をくり返さない）。動きは transform・opacity・clip-path だけで描く。
   ★ 動きを減らす設定の人には、出方を省いてそのまま見せる（下の reduced-motion）。
   ★ ただし背景（光・床の格子・紋章・粒）は、その設定でも止めない（サイトの決まり・2026-09-03「背景の動きは止めない」）。
   ★ 出方は、画面から外れたら元に戻し、また入ったらもう一度出す（2026-10-27 作者「下まで行って戻ると動かず、つまらない」）。 */
: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;
}
html{background:var(--vk-bg);}
body.vk{background:var(--vk-bg);color:var(--vk-ink);font-family:var(--vk-ja);overflow-x:hidden;}
body.vk ::selection{background:rgba(169,140,255,.45);color:#fff;}
body.vk a{color:#c9b8ff;text-underline-offset:.22em;}
body.vk a:focus-visible{outline:2px solid var(--vk-mint);outline-offset:3px;border-radius:4px;}
body.vk .dh{position:sticky;top:0;z-index:30;}
/* 出る前は横へずらしてある部品がある（オーナー・支援）。画面から外れると出る前に戻るので、横にはみ出さないよう切る。
   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;}}

/* ── 地：ゆっくり流れる光（固定の1枚。動かすのは transform だけ） ── */
.vk-aurora{position:fixed;inset:-25%;z-index:0;pointer-events:none;opacity:.7;
  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);}}

/* 読んだ所までの帯（上の端） */
/* 大きな紋章：ゆっくり回りながら、スクロールでも回る（--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:.05;
  transform:translate(var(--vk-tx,0px),var(--vk-ty,0px)) scale(var(--vk-sc,1)) rotate(var(--vk-rot,0deg));
  opacity:calc(var(--vk-emb-op,.045) + var(--vk-mt,0) * (.09 - var(--vk-emb-op,.045)));}
/* 右の紋章が締めの位置へ移って来るので、締めの紋章は場所だけ残して隠す（vykro.js が .vk-emb-merge を付ける） */
.vk-emb-merge .vk-fin-emb{visibility:hidden;}
.vk-emb-bg img{width:100%;height:100%;animation:vk-spin 90s linear infinite;}
@keyframes vk-spin{to{transform:rotate(360deg);}}
/* 粒と流れ星（vykro.js が描く） */
.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));}

/* ── はじめ ── */
.vk-hero{padding:clamp(28px,5vw,64px) 0 clamp(36px,6vw,72px);}
.vk-crumb{margin:0 0 clamp(18px,3vw,30px);font-size:12.5px;color:var(--vk-sub);}
.vk-crumb a{color:var(--vk-sub);}
.vk-title{display:flex;flex-wrap:wrap;align-items:center;gap:.18em .34em;margin:0;font-family:var(--vk-lat);font-weight:700;
  font-size:clamp(3.2rem,11vw,6rem);line-height:.95;letter-spacing:.02em;color:#fff;}
.vk-word{display:inline-flex;overflow:hidden;padding:.06em 0;}
.vk-letter{display:inline-block;}
.vk-x{position:relative;width:.42em;height:.42em;flex:none;}
.vk-x::before,.vk-x::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:.09em;border-radius:99px;
  background:linear-gradient(90deg,var(--vk-vio),var(--vk-mint));transform:translate(-50%,-50%) rotate(45deg);}
.vk-x::after{transform:translate(-50%,-50%) rotate(-45deg);}
.vk-with{font-size:.46em;letter-spacing:.06em;color:var(--vk-sub);}
/* 「× Lino Labs」はひとかたまり（狭い画面で × だけが行の終わりに残らないように） */
.vk-pair{display:inline-flex;align-items:center;gap:.34em;white-space:nowrap;}
.vk-lead{max-width:62ch;margin:clamp(16px,2.4vw,24px) 0 0;font-size:clamp(15px,1.5vw,17px);line-height:1.95;color:var(--vk-sub);}
.vk-lead b{color:var(--vk-ink);font-weight:700;}
.vk-group{position:relative;margin:clamp(26px,4vw,44px) 0 0;border-radius:22px;overflow:hidden;background:#0b0a18;
  box-shadow:0 30px 80px -20px rgba(70,40,160,.55),0 0 0 1px var(--vk-line);}
.vk-group img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;}
.vk-group-scan{position:absolute;inset:0;pointer-events:none;
  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%);
  transform:translateX(-100%);}
.vk-group figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px 14px;
  font:600 11px/1.3 var(--vk-lat);letter-spacing:.18em;color:var(--vk-sub);background:linear-gradient(180deg,rgba(11,10,24,.0),rgba(11,10,24,.9));}
.vk-cap-state{color:var(--vk-amber);}
.vk-cue{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:12.5px;letter-spacing:.08em;color:var(--vk-sub);text-decoration:none;}
.vk-cue::before{content:"";width:1px;height:28px;background:linear-gradient(180deg,transparent,var(--vk-mint));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-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));}
/* 締めの前の2本目：逆に傾け、逆に流す */
.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-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-sec{position:relative;padding:clamp(70px,11vw,140px) 0;}
.vk-h,.vk-sec h2.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;border:0;padding:0;}
.vk-sec h2,.vk-sec h3{border:0;padding:0;}
.vk-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,60px);}
.vk-col h2{margin:0 0 12px;font-family:var(--vk-ja);font-weight:700;font-size:clamp(18px,1.8vw,21px);color:#fff;}
.vk-col p{margin:0;max-width:60ch;font-size:15px;line-height:2;color:var(--vk-sub);}
@media(max-width:820px){.vk-two{grid-template-columns:1fr;}}

/* 言葉：スクロールに合わせて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);}


/* ── 理念文：スクロールに合わせて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;line-height:1.9;color:var(--vk-sub);}
/* 5枚を横に並べる（狭いと2列・1列）。頭文字が回って入る */
.vk-pils{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.6vw,18px);margin:clamp(30px,4vw,48px) 0 0;padding:0;list-style:none;perspective:1000px;}
.vk-pil{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,24px);border:1px solid var(--vk-line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(169,140,255,.10),rgba(13,15,34,.6));}
.vk-pils .vk-pil-big{font-size:clamp(64px,7vw,96px);}
.vk-pils .vk-pil-word{font-size:clamp(14px,1.4vw,17px);letter-spacing:.12em;}
.vk-pils .vk-pil-phrase{margin:4px 0 0;font-size:clamp(15px,1.4vw,17px);}
.vk-pils .vk-pil-note{font-size:13.5px;line-height:1.85;}
@media(max-width:1100px){.vk-pils{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){.vk-pils{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){.vk-pils{grid-template-columns:minmax(0,1fr);}}
.vk-philo-more{margin:clamp(24px,3vw,36px) 0 0;}
/* カードは手前に起き上がる（ずらして順に） */
.js .vk-pil[data-fx]{opacity:0;transform:translateY(50px) rotateX(18deg);transform-origin:50% 100%;
  transition:opacity .8s ease,transform 1.1s var(--vk-out);transition-delay:calc(var(--i,0) * 110ms);}
.js .vk-pil.in{opacity:1;transform:none;}
.js .vk-philo-more[data-fx]{opacity:0;transform:translateY(16px);transition:opacity .8s ease .3s,transform .9s var(--vk-out) .3s;}
.js .vk-philo-more.in{opacity:1;transform:none;}

/* ── オーナー ── */
.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 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-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-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) !important;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);}
.vk-ext{font-size:.85em;color:var(--vk-sub);}

/* ── 支援 ── */
/* 支援は3つ並べる（2026-10-27 公式サイトの制作・運営を足した）。狭いと1列 */
.vk-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(36px,5vw,60px);}
@media(max-width:900px){.vk-three{grid-template-columns:1fr;}}
.vk-sup{padding:clamp(22px,3vw,32px);border:1px solid var(--vk-line);border-radius:22px;background:rgba(255,255,255,.025);}
.vk-sup-ic svg{width:34px;height:34px;fill:none;stroke:var(--vk-mint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.vk-sup h3{margin:14px 0 8px;font-family:var(--vk-ja);font-weight:700;font-size:19px;color:#fff;}
.vk-sup p{margin:0;font-size:14.5px;line-height:1.95;color:var(--vk-sub);}

/* ── 締め ── */
.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-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--vk-line);
  font-weight:700;font-size:14.5px;color:var(--vk-ink) !important;text-decoration:none;background:rgba(255,255,255,.04);
  transition:border-color .2s,transform .2s var(--vk-out),background-color .2s;}
.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;}
.vk-btn-pri:hover{background:linear-gradient(135deg,#7a52e2,#4a79ea);}

/* ============================================================
   出方。.js（vykro.js が最初に付ける）のときだけ、隠してから出す。
   スクリプトが動かなくても、中身は全部見える
   ============================================================ */
/* はじめ：文字が下からせり上がる → × が回って入る → 絵が真ん中から開く → 光が一度横切る */
.js .vk-letter{transform:translateY(110%);transition:transform .9s var(--vk-out);transition-delay:calc(var(--i,0) * 70ms + 80ms);}
.js .vk-x{transform:scale(0.4) rotate(-90deg);opacity:0;transition:transform .8s var(--vk-out) .45s,opacity .4s ease .45s;}
.js .vk-with{opacity:0;transform:translateX(-14px);transition:opacity .7s ease .6s,transform .9s var(--vk-out) .6s;}
.js .vk-lead{opacity:0;transform:translateY(12px);transition:opacity .8s ease .75s,transform .9s var(--vk-out) .75s;}
.js .vk-group{clip-path:inset(46% 46% 46% 46% round 22px);transition:clip-path 1.25s var(--vk-out) .5s;}
.js .vk-group img{transform:scale(1.12);transition:transform 1.8s var(--vk-out) .5s;}
.vk-on .vk-letter,.vk-on .vk-with,.vk-on .vk-lead{transform:none;opacity:1;}
.vk-on .vk-x{transform:none;opacity:1;}
.js .vk-group.in{clip-path:inset(0 0 0 0 round 22px);}
.js .vk-group.in img{transform:none;}
.js .vk-group.in .vk-group-scan{animation:vk-scan 1.6s ease-in-out 1.5s 1 both;}
@keyframes vk-scan{to{transform:translateX(100%);}}

/* 帯：斜めに走り込む */
.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;}

/* 2つの段：ぼけた所から、少し上がって現れる（左→右の順） */
.js .vk-col[data-fx],.js .vk-sup[data-fx]{opacity:0;filter:blur(8px);transform:translateY(26px);
  transition:opacity .9s ease,filter .9s ease,transform 1s var(--vk-out);transition-delay:calc(var(--i,0) * 140ms);}
/* 左は左から・真ん中は下から・右は右から寄る */
.js .vk-sup[data-fx]{transform:translate(calc((var(--i,0) - 1) * 48px),26px);}
.js .vk-col.in,.js .vk-sup.in{opacity:1;filter:none;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-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);}
.vk-m.is-reveal:not(.in) .vk-m-color{opacity:1;}
body:not(.js-ready) .vk-m.is-reveal .vk-m-sil{opacity:0;}

/* 締め：紋章が奥から開き、言葉が大きく寄ってから、ぴたりと止まる */
.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;}

/* 動きを減らす設定の人：出方はすべて省いて、最初から見せる（光の流れ・帯も止める） */
@media (prefers-reduced-motion:reduce){
  /* 背景（.vk-aurora・.vk-emb-bg・粒と床の格子）は止めない（サイトの決まり）。読む所の飾りだけ止める */
  .vk-band-track,.vk-cue::before,.vk-owner-icon::before,.vk-fin-emb{animation:none !important;}
  .vk-band ul{transform:none !important;}
  .js .vk-letter,.js .vk-x,.js .vk-with,.js .vk-lead,.js .vk-group,.js .vk-group img,.js .vk-band,.js [data-fx],.js [data-fx] *{
    transition:none !important;animation:none !important;}
  .js .vk-letter,.js .vk-x,.js .vk-with,.js .vk-lead,.js .vk-group img,.js [data-fx]{opacity:1 !important;transform:none !important;filter:none !important;}
  .js .vk-group,.js .vk-h[data-fx],.js .vk-head[data-fx],.js .vk-m.is-reveal .vk-m-color{clip-path:none !important;}
  .js .vk-band{transform:skewY(-2deg) !important;opacity:1 !important;}
  .js .vk-m.is-reveal .vk-m-sil{opacity:0 !important;}
  .js .vk-fin-emb{scale:1;opacity:.09;}
  .vk-ch{color:#fff;}
}

/* ============================================================
   幕開け（2026-10-27）：VYKRØ の紋章が大きく出る → 左へ寄って「VYKRØ × Lino Labs」に並ぶ → 円が閉じて頁が開く。
   .js のときだけ出す（スクリプトが無い・動きを減らす設定の人には出さない）。
   段取りは 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;align-items:center;gap:clamp(12px,3vw,40px);transition:transform .9s var(--vk-out),opacity .6s ease;}
.vk-intro.p3 .vk-intro-stage{transform:scale(1.12);opacity:0;}
/* VYKRØ のかたまり：はじめは頁の真ん中で大きく（--dx は真ん中までのずれ。vykro.js が測る） */
.vk-intro-vy{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vw,12px);
  transform:translateX(var(--dx,0px)) scale(1.7);transition:transform 1.05s cubic-bezier(.7,0,.2,1);}
.vk-intro.p2 .vk-intro-vy,.vk-intro.p3 .vk-intro-vy{transform:none;}
.vk-intro-emb{width:clamp(72px,15vw,170px);height:auto;opacity:0;transform:scale(2.6) rotate(-35deg);filter:blur(18px);
  transition:opacity .5s ease,transform 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 18px rgba(169,140,255,.9)) drop-shadow(0 0 46px rgba(95,157,255,.55));}
.vk-intro.p1 .vk-intro-emb{animation:vk-flicker .9s steps(1) .9s 1;}
@keyframes vk-flicker{0%{opacity:1;}10%{opacity:.35;translate:-4px 0;}20%{opacity:1;translate:3px 0;}35%{opacity:.6;translate:0 0;}50%,100%{opacity:1;}}
/* 紋章から広がる2つの輪 */
.vk-intro-ring{position:absolute;left:50%;top:0;width:clamp(72px,15vw,170px);aspect-ratio:1;margin-left:calc(clamp(72px,15vw,170px) / -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.1s ease-out .55s 1 both;}
.vk-intro.p1 .vk-intro-ring2{animation-delay:.78s;border-color:var(--vk-vio);}
@keyframes vk-shock{from{opacity:.95;transform:scale(.6);}to{opacity:0;transform:scale(3.4);}}
.vk-intro-word{display:flex;font:700 clamp(18px,3.6vw,42px)/1 var(--vk-lat);letter-spacing:.18em;color:#fff;margin-right:-.18em;}
.vk-intro-word b{display:inline-block;font-weight:700;opacity:0;transform:translateY(60%);filter:blur(6px);
  transition:opacity .4s ease,transform .6s var(--vk-out),filter .5s ease;transition-delay:calc(var(--i,0) * 60ms + 650ms);}
.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;}
/* × と Lino Labs は、並ぶときに入る */
.vk-intro-x{position:relative;width:clamp(16px,3vw,34px);aspect-ratio:1;flex:none;opacity:0;transform:scale(.2) rotate(-225deg);
  transition:opacity .4s ease .35s,transform .8s cubic-bezier(.2,1.5,.4,1) .35s;}
.vk-intro-x::before,.vk-intro-x::after{content:"";position:absolute;left:50%;top:50%;width:130%;height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--vk-vio),var(--vk-mint));box-shadow:0 0 14px rgba(95,227,189,.8);transform:translate(-50%,-50%) rotate(45deg);}
.vk-intro-x::after{transform:translate(-50%,-50%) rotate(-45deg);}
.vk-intro-lino{display:flex;align-items:center;gap:clamp(6px,1vw,12px);opacity:0;transform:translateX(60px);filter:blur(8px);
  font:700 clamp(18px,3.6vw,42px)/1 var(--vk-lat);letter-spacing:.04em;color:#fff;white-space:nowrap;
  transition:opacity .6s ease .55s,transform .9s var(--vk-out) .55s,filter .6s ease .55s;}
.vk-intro-mark{width:clamp(30px,5.6vw,64px);height:auto;filter:drop-shadow(0 0 12px rgba(159,225,203,.6));}
.vk-intro.p2 .vk-intro-x,.vk-intro.p3 .vk-intro-x,.vk-intro.p2 .vk-intro-lino,.vk-intro.p3 .vk-intro-lino{opacity:1;transform:none;filter:none;}
/* 並んだ瞬間の白い光と、はじめに横切る線 */
.vk-intro-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55),rgba(169,140,255,.18) 30%,transparent 60%);}
.vk-intro.p2 .vk-intro-flash{animation:vk-flash .9s ease-out .35s 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;}
