@charset "UTF-8";
/* ==========================================================================
   Lilla — 本物のアーティストを創る音楽事務所
   ---------------------------------------------------------------------------
   Concept : 深い暗がりに一筋の光が差す。光の中に「本物」が立ち上がる。
   Color   : Lilla＝スウェーデン語で「紫」。発光色は紫〜マゼンタ〜シアンの帯のみ。
   Type    : Archivo（欧文・数値）× Noto Sans JP（和文）の2書体だけ。
             太さと字送りで階層をつくり、書体を増やさない。
   Motion  : transform / opacity / filter のみ。画面外とモーション低減時は停止。
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* 闇 */
  --ink:      #050409;
  --ink-2:    #0A0813;
  --ink-3:    #120E1F;

  /* 光 */
  --lilla:    #A855F7;
  --lilla-lo: #6D28D9;
  --lilla-hi: #C9A6FF;
  --magenta:  #FF2D8E;
  --cyan:     #38E1FF;

  /* 面 */
  --line:     rgba(190,160,255,.13);
  --line-hi:  rgba(200,166,255,.34);
  --glass:    linear-gradient(158deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.018) 46%, rgba(255,255,255,.035) 100%);
  --glass-sh: 0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);

  /* 文字 */
  --paper:    #F4F1FA;
  --mute:     #9C90B4;

  --neon: linear-gradient(90deg, var(--magenta) 0%, var(--lilla) 52%, var(--cyan) 100%);

  --ff-jp:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ff-lat: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1220px;
  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(88px, 12vw, 172px);
  --r:   20px;   /* カードの角 */
  --r-sm: 14px;

  --ease:  cubic-bezier(.22,.61,.36,1);   /* 標準 */
  --expo:  cubic-bezier(.16,1,.3,1);      /* 現れる動き */
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-jp);
  font-weight:400;
  font-size:16px;
  line-height:2;
  letter-spacing:.03em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
[hidden]{ display:none !important; }
::selection{ background:var(--lilla); color:#fff; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:300;
  padding:12px 20px; background:var(--lilla); color:#fff; border-radius:0 0 10px 10px;
}
.skip:focus{ top:0; }

/* 本体はすべて雰囲気レイヤーの手前 */
.nav, main, .foot{ position:relative; z-index:1; }

/* ==========================================================================
   Atmosphere — 固定の光。全ページ共通の「深さ」をここだけで作る。
   ========================================================================== */
.atmos{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(109,40,217,.30) 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(255,45,142,.12) 0%, transparent 68%);
}

/* 天から差す一筋 */
.atmos__beam{
  position:absolute; left:50%; top:-28vh;
  width:min(78vw, 900px); height:150vh;
  transform:translateX(-50%) rotate(6deg);
  transform-origin:50% 0;
  background:linear-gradient(180deg, rgba(201,166,255,.30) 0%, rgba(168,85,247,.13) 34%, rgba(168,85,247,0) 74%);
  -webkit-mask-image:radial-gradient(58% 74% at 50% 6%, #000 0%, transparent 76%);
  mask-image:radial-gradient(58% 74% at 50% 6%, #000 0%, transparent 76%);
  filter:blur(24px);
  opacity:.9;
  animation:beamBreathe 13s ease-in-out infinite alternate;
}
.atmos__beam--2{
  width:min(46vw, 520px);
  transform:translateX(-50%) rotate(-11deg);
  background:linear-gradient(180deg, rgba(56,225,255,.16) 0%, rgba(56,225,255,0) 64%);
  animation-duration:19s; animation-direction:alternate-reverse;
  opacity:.55;
}
@keyframes beamBreathe{
  from{ opacity:.42; transform:translateX(-50%) rotate(6deg) scaleX(.94); }
  to  { opacity:.95; transform:translateX(-50%) rotate(4deg) scaleX(1.06); }
}

/* ゆっくり漂う光の塊 */
.atmos__glow{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5;
  will-change:transform;
}
.atmos__glow--a{
  width:52vw; height:52vw; max-width:720px; max-height:720px;
  left:-14vw; top:22vh;
  background:radial-gradient(circle, rgba(123,47,214,.55), transparent 68%);
  animation:drift 28s ease-in-out infinite alternate;
}
.atmos__glow--b{
  width:44vw; height:44vw; max-width:620px; max-height:620px;
  right:-12vw; bottom:6vh;
  background:radial-gradient(circle, rgba(255,45,142,.34), transparent 68%);
  animation:drift 34s ease-in-out infinite alternate-reverse;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(6vw,-8vh,0) scale(1.16); }
}

/* 粒子（極小のフィルム粒状感） */
.atmos__grain{
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:overlay;
}

/* スクロール量を示す細い光 */
.progress{
  position:fixed; left:0; top:0; z-index:150;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--neon);
  box-shadow:0 0 14px rgba(168,85,247,.75);
  pointer-events:none;
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.br-sp{ display:none; }

/* ---------- Glass surface ---------- */
.glass{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.075);
  border-radius:var(--r);
  box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
}

/* ---------- Section heading ---------- */
.shead{ max-width:790px; margin-bottom:clamp(44px,6vw,80px); }
.shead__lat{
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-lat); font-weight:600; font-size:11px;
  letter-spacing:.36em; text-transform:uppercase; color:var(--lilla-hi);
  margin-bottom:22px;
}
.shead__lat::before{
  content:""; width:34px; height:1px; flex:none;
  background:linear-gradient(90deg, transparent, var(--lilla-hi));
}
.shead__ja{
  font-family:var(--ff-jp); font-weight:500;
  font-size:clamp(27px,4.4vw,48px); line-height:1.5; letter-spacing:.05em;
}
.shead__note{ margin-top:22px; color:var(--mute); font-size:15px; line-height:2.15; letter-spacing:.04em; }

/* ---------- Buttons ---------- */
.btn{
  --pad: 18px 34px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--pad); border-radius:999px;
  font-family:var(--ff-jp); font-weight:500; font-size:14.5px; letter-spacing:.08em;
  line-height:1; white-space:nowrap; cursor:pointer;
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform .5s var(--expo), box-shadow .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--sm{ --pad: 12px 22px; font-size:13px; }
.btn--lg{ --pad: 22px 48px; font-size:16px; }
.btn:active{ transform:scale(.975); }

.btn--neon{
  color:#fff;
  background:linear-gradient(100deg, var(--lilla-lo), var(--lilla) 46%, var(--magenta));
  box-shadow:0 8px 30px -10px rgba(168,85,247,.9);
}
/* 光が横切る */
.btn--neon::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 66%);
  transform:translateX(-120%);
  transition:transform .9s var(--expo);
}
.btn--neon:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(255,45,142,.8); }
.btn--neon:hover::after{ transform:translateX(120%); }

.btn--ghost{
  color:var(--paper); border:1px solid rgba(200,166,255,.32);
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.btn--ghost:hover{ background:rgba(200,166,255,.12); border-color:var(--lilla-hi); transform:translateY(-2px); }

/* ==========================================================================
   Brand — ロゴ
   白地に描かれたロゴなので、背景を抜いた透過PNGを使い、暗い画面に合うよう
   わずかに明るさを上げて紫の光を後ろに置く。周りの闇と地続きに見せるため。
   ========================================================================== */
.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand__logo{ height:40px; width:auto; flex:none; }
.brand__type{ height:27px; width:auto; }

/* 暗い画面用に明度を反転させたロゴを使うので、ここでは光だけ足す */
.brand__logo,
.brand__type,
.foot__logo,
.hero__logo{
  filter:drop-shadow(0 0 14px rgba(168,85,247,.5));
  transition:filter .5s var(--ease);
}
.brand:hover .brand__logo,
.brand:hover .brand__type{
  filter:drop-shadow(0 0 20px rgba(201,166,255,.85));
}

/* フッターは全部入りのロゴを大きく置く */
.foot__logo{ width:min(300px,78%); height:auto; }

/* 旧マーク・旧文字ロゴ（画像が無い環境のための保険） */
.brand__mark{
  width:14px; height:14px; border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 18px rgba(168,85,247,.95);
  flex:none;
}
.brand__name{
  font-family:var(--ff-lat); font-weight:600; font-size:22px;
  letter-spacing:.01em;
}
.brand--lg .brand__name{ font-size:30px; }
.brand--lg .brand__mark{ width:18px; height:18px; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,4,9,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:18px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.nav__links a:not(.btn){
  font-size:13.5px; letter-spacing:.07em; color:rgba(244,241,250,.78);
  position:relative; padding-block:6px;
  transition:color .3s var(--ease);
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--neon); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--expo);
}
.nav__links a:not(.btn):hover{ color:var(--paper); }
.nav__links a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }

.burger{ display:none; width:42px; height:42px; position:relative; }
.burger span{
  position:absolute; left:10px; width:22px; height:1.5px; background:var(--paper);
  transition:transform .45s var(--expo), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:24px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(126px,16vh,168px) 0 clamp(96px,12vh,124px);
  overflow:hidden;
  text-align:center;
}
.hero__media{
  position:absolute; inset:-6% 0; z-index:0;
  background:radial-gradient(80% 70% at 50% 20%, #1B1030 0%, #0B0816 58%, var(--ink) 100%);
  will-change:transform;
}
.hero__img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  filter:brightness(.34) saturate(1.1) contrast(1.12);
  animation:heroZoom 22s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.14); } to{ transform:scale(1); } }

.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(62% 52% at 50% 34%, rgba(123,47,214,.42) 0%, transparent 72%),
    radial-gradient(46% 40% at 88% 88%, rgba(255,45,142,.20) 0%, transparent 70%),
    linear-gradient(180deg, rgba(5,4,9,.86) 0%, rgba(5,4,9,.38) 26%, rgba(5,4,9,.42) 58%, rgba(5,4,9,.88) 88%, var(--ink) 100%);
}

.hero__in{
  position:relative; z-index:2; width:100%;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-direction:column; align-items:center;
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--ff-lat); font-weight:500; font-size:11px;
  letter-spacing:.34em; text-transform:uppercase; color:rgba(244,241,250,.8);
  padding:9px 18px; border-radius:999px;
  border:1px solid rgba(200,166,255,.24); background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  margin-bottom:clamp(26px,3.6vw,38px);
  opacity:0; animation:fadeUp 1s var(--expo) .2s forwards;
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--magenta);
  box-shadow:0 0 12px var(--magenta); animation:blink 2.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.2} }

/* ロゴが暗がりから浮かび上がり、いちど強く光って落ち着く */
.hero__title{
  position:relative;
  margin-bottom:clamp(22px,3vw,34px);
  line-height:0;
}
/* ロゴの後ろだけ闇を深くして、写真の上でも輪郭が立つようにする */
.hero__title::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:150%; height:150%;
  background:radial-gradient(closest-side, rgba(5,4,9,.82) 0%, rgba(5,4,9,.5) 46%, transparent 78%);
  pointer-events:none;
}
/* 開いた瞬間に灯る光。ロゴ画像をマスクにして色を敷き、それをぼかしているので、
   光るのはト音記号と文字の“線そのもの”だけ。まわりの空気は光らない。 */
.hero__title::after{
  content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(150deg,
    #FFFFFF 0%,
    #E9D5FF 26%,
    #A855F7 62%,
    #FF2D8E 100%);
  -webkit-mask-image:url("../img/logo-full-light.png");
  mask-image:url("../img/logo-full-light.png");
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  filter:blur(13px);
  opacity:0; pointer-events:none;
  animation:inkBloom 5.2s var(--ease) .3s forwards;
}
@keyframes inkBloom{
  0%  { opacity:0;   filter:blur(22px); }
  15% { opacity:.45; filter:blur(14px); }
  19% { opacity:.14; filter:blur(12px); }
  26% { opacity:1;   filter:blur(15px); }
  77% { opacity:.92; filter:blur(15px); }   /* 灯ったまま保つ（約2.6秒） */
  88% { opacity:.6;  filter:blur(13px); }
  100%{ opacity:.34; filter:blur(12px); }
}
.hero__logo{
  width:min(520px,78vw); height:auto;
  opacity:0;
  animation:logoRise 5.2s var(--expo) .3s forwards;
}

/* ロゴの上を、左から右へ光が流れる。
   ロゴの画像そのものをマスクに使っているので、光は線の上だけを通る。 */
.hero__sheen{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none;
  mix-blend-mode:screen;
  -webkit-mask-image:url("../img/logo-full-light.png");
  mask-image:url("../img/logo-full-light.png");
  -webkit-mask-size:contain;   mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.hero__sheen i{
  position:absolute; top:-20%; bottom:-20%; left:0;
  width:58%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(201,166,255,.55) 20%,
    rgba(255,255,255,1) 46%,
    rgba(255,255,255,1) 54%,
    rgba(168,85,247,.7) 80%,
    transparent 100%);
  filter:blur(3px);
  transform:translateX(-150%);
  /* 立ち上がりのすぐ後に1回。繰り返したいときは forwards を infinite に */
  animation:sheen 1.8s cubic-bezier(.4,0,.2,1) .9s forwards;
}
@keyframes sheen{
  from{ transform:translateX(-150%); }
  to  { transform:translateX(290%); }
}

/* 暗がりから立ち上がる → いちど沈む → 紫で強く灯る → 落ち着く */
@keyframes logoRise{
  0%{
    opacity:0; transform:translateY(26px) scale(.985);
    filter:blur(14px) drop-shadow(0 0 0 rgba(168,85,247,0));
  }
  15%{
    opacity:1; transform:translateY(0) scale(1);
    filter:blur(0) drop-shadow(0 0 24px rgba(201,166,255,.65));
  }
  19%{
    opacity:.86;
    filter:blur(0) drop-shadow(0 0 8px rgba(201,166,255,.3));
  }
  26%{
    opacity:1; transform:translateY(0) scale(1.012);
    filter:blur(0) brightness(1.65) saturate(1.25)
      drop-shadow(0 0 8px rgba(255,255,255,1))
      drop-shadow(0 0 20px rgba(201,166,255,1))
      drop-shadow(0 0 42px rgba(168,85,247,.9));
  }
  /* ここで急に落とさず、灯ったまま保つ */
  77%{
    opacity:1; transform:translateY(0) scale(1.008);
    filter:blur(0) brightness(1.52) saturate(1.2)
      drop-shadow(0 0 8px rgba(255,255,255,.9))
      drop-shadow(0 0 20px rgba(201,166,255,.95))
      drop-shadow(0 0 44px rgba(168,85,247,.82));
  }
  88%{
    filter:blur(0) brightness(1.18) saturate(1.1)
      drop-shadow(0 0 16px rgba(201,166,255,.85))
      drop-shadow(0 0 48px rgba(168,85,247,.6));
  }
  100%{
    opacity:1; transform:none;
    filter:blur(0)
      drop-shadow(0 0 14px rgba(201,166,255,.6))
      drop-shadow(0 0 38px rgba(168,85,247,.4));
  }
}

/* 旧・文字ロゴ用（いまは使っていない） */
.ign{
  display:block; position:relative;
  color:#fff; opacity:0;
  transform:translateY(.42em);
  animation:rise 1.15s var(--expo) forwards;
  animation-delay:calc(.32s + var(--i) * .085s);
}
@keyframes rise{
  from{ transform:translateY(.42em); opacity:0; filter:blur(14px); }
  to  { transform:translateY(0);     opacity:1; filter:blur(0); }
}

.hero__lead{
  font-family:var(--ff-jp); font-weight:500;
  font-size:clamp(17px,2.6vw,29px); line-height:1.7; letter-spacing:.16em;
  margin-bottom:18px;
  opacity:0; animation:fadeUp 1.1s var(--expo) .95s forwards;
}
.hero__sub{
  color:rgba(244,241,250,.66); font-size:clamp(13.5px,1.6vw,16px); line-height:2.1; letter-spacing:.08em;
  opacity:0; animation:fadeUp 1.1s var(--expo) 1.1s forwards;
}
.hero__cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:clamp(34px,4.6vw,52px);
  opacity:0; animation:fadeUp 1.1s var(--expo) 1.25s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* 下へ、の合図。中央のCTAとぶつからないよう右端に逃がす */
.hero__scroll{
  position:absolute; right:clamp(18px,3.4vw,52px); bottom:clamp(78px,10vh,108px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--ff-lat); font-weight:500; font-size:9.5px; letter-spacing:.34em;
  color:rgba(244,241,250,.42); text-transform:uppercase;
  opacity:0; animation:fadeUp 1.2s var(--expo) 1.6s forwards;
}
.hero__scroll i{
  display:block; width:1px; height:52px;
  background:linear-gradient(180deg, rgba(201,166,255,.9), transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 0 40%, transparent 40%);
  mask-image:linear-gradient(180deg,#000 0 40%, transparent 40%);
  -webkit-mask-size:100% 250%; mask-size:100% 250%;
  animation:scrollRun 2.6s var(--ease) infinite;
}
@keyframes scrollRun{
  from{ -webkit-mask-position:0 -100%; mask-position:0 -100%; }
  to  { -webkit-mask-position:0 150%;  mask-position:0 150%; }
}

/* Spectrum — 音が光になる帯 */
.spectrum{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  height:60px; display:flex; align-items:flex-end; gap:3px;
  padding-inline:var(--gut);
  opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.spectrum i{
  flex:1 1 0; min-width:0; height:100%;
  background:var(--neon); border-radius:2px 2px 0 0;
  transform-origin:bottom; transform:scaleY(.06);
  animation:eq 1.6s ease-in-out infinite alternate;
}
@keyframes eq{ from{ transform:scaleY(.05); } to{ transform:scaleY(var(--h,.6)); } }
.spectrum.is-paused i{ animation-play-state:paused; }

/* ==========================================================================
   Statement — 光の中に言葉だけ
   ========================================================================== */
/* 次の「できる8つのこと」へ続けて読ませたいので、下の余白だけ詰める */
.stmt{ padding-block:var(--sec) clamp(52px,6.5vw,96px); position:relative; }
.stmt__line{
  font-family:var(--ff-jp); font-weight:300;
  font-size:clamp(20px,3.4vw,40px); line-height:1.9; letter-spacing:.12em;
  color:rgba(244,241,250,.56); margin-bottom:.5em;
}
.stmt__line--hi{ color:var(--paper); font-weight:400; }
.stmt__line em{
  font-style:normal; position:relative; white-space:nowrap; font-weight:500;
  background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stmt__note{
  margin-top:clamp(34px,4.4vw,54px); max-width:660px;
  color:var(--mute); font-size:15px; line-height:2.2; letter-spacing:.04em;
  padding-left:24px; border-left:1px solid var(--line);
}

/* ==========================================================================
   できる8つのこと — 箱を積まず、太い罫と大きな番号で読ませる
   ========================================================================== */
.console{ padding-block:clamp(52px,6.5vw,96px) var(--sec); position:relative; }
.chs{ border-bottom:1px solid var(--line); }

.ch{
  position:relative; isolation:isolate;
  display:grid;
  grid-template-columns:clamp(76px,7vw,110px) minmax(150px,.75fr) 1.5fr;
  gap:clamp(18px,2.6vw,40px);
  align-items:start;
  padding:clamp(26px,3vw,38px) clamp(10px,1.4vw,20px);
  border-top:1px solid var(--line);
  transition:background-color .55s var(--ease);
}
/* 上の罫が、その行に目が入った瞬間に光で引き直される */
.ch::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:1px;
  /* 右へ向かって消える光。8本並んでも定規のようにならない */
  background:linear-gradient(90deg, rgba(255,45,142,.85) 0%, rgba(168,85,247,.7) 30%, rgba(56,225,255,.22) 64%, transparent 100%);
  box-shadow:0 0 10px rgba(168,85,247,.3);
  transition:width 1.3s var(--expo) .1s;
}
.ch.is-in::before{ width:100%; }
/* 行の奥にだけ薄く灯りが入る */
.ch::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(90deg, rgba(168,85,247,.16), transparent 62%);
  transition:opacity .55s var(--ease);
}
.ch:hover::after{ opacity:1; }

/* 番号は塗らず、輪郭だけ。触れると光で満ちる */
.ch__no{
  font-family:var(--ff-lat); font-weight:600;
  font-size:clamp(34px,4vw,52px); line-height:.9; letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,166,255,.5);
  transition:color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease), transform .6s var(--expo);
}
.ch:hover .ch__no{
  color:var(--lilla-hi);
  -webkit-text-stroke-color:transparent;
  transform:translateY(-2px);
}
.ch__ttl{
  font-family:var(--ff-jp); font-weight:500;
  font-size:clamp(19px,1.9vw,24px); line-height:1.6; letter-spacing:.08em;
  transition:transform .6s var(--expo);
}
.ch:hover .ch__ttl{ transform:translateX(4px); }
.ch__lat{
  display:block; margin-top:12px;
  font-family:var(--ff-lat); font-weight:500; font-size:10px;
  letter-spacing:.3em; color:var(--mute);
}
.ch__txt{
  color:var(--mute); font-size:14px; line-height:2.2; letter-spacing:.03em;
  padding-top:.35em;
}

/* ==========================================================================
   Feature (composer)
   ========================================================================== */
.feat{ padding-block:var(--sec); }
.feat__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,88px); align-items:center; }
/* 視差で動かすぶん、画像は枠より少しだけ大きく敷いておく */
.feat__media{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; }
.feat__media img{
  position:absolute; inset:-7% 0; width:100%; height:114%; object-fit:cover;
  filter:saturate(1.1) contrast(1.06) brightness(.92);
  will-change:transform;
}
.feat__media::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(140deg, rgba(255,45,142,.34), transparent 42%, rgba(56,225,255,.26)),
    linear-gradient(180deg, transparent 55%, rgba(5,4,9,.5) 100%);
  mix-blend-mode:screen;
}
.feat__badge{
  position:absolute; top:20px; left:20px; z-index:2;
  font-family:var(--ff-lat); font-weight:600; font-size:10.5px; letter-spacing:.24em;
  padding:9px 15px; border-radius:999px;
  background:rgba(5,4,9,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(200,166,255,.32); color:var(--lilla-hi);
}
.feat__ttl{
  font-family:var(--ff-jp); font-weight:500;
  font-size:clamp(25px,3.6vw,42px); line-height:1.6; letter-spacing:.06em;
  margin:18px 0 28px;
}
.feat__txt{ color:var(--mute); font-size:15px; line-height:2.25; letter-spacing:.03em; margin-bottom:18px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.chips li{
  font-family:var(--ff-lat); font-size:11.5px; letter-spacing:.1em;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); color:rgba(244,241,250,.72);
  background:rgba(255,255,255,.02);
}

/* ==========================================================================
   Rooms
   ========================================================================== */
.rooms{ padding-block:var(--sec); }
.rgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.room{ position:relative; }
.room__img{
  overflow:hidden; border-radius:var(--r); position:relative;
  border:1px solid rgba(255,255,255,.06);
}
.room__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(5,4,9,.72) 100%);
}
.room__img img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(.5) contrast(1.06) brightness(.92);
  transition:transform 1.1s var(--expo), filter .8s var(--ease);
}
.room:hover .room__img img{ transform:scale(1.07); filter:grayscale(0) contrast(1.04) saturate(1.2) brightness(1); }
.room__cap{ padding:24px 4px 0; }
.room__cap h3{
  font-family:var(--ff-jp); font-weight:500; font-size:19px; letter-spacing:.08em;
  margin-bottom:12px; position:relative; padding-left:18px;
}
.room__cap h3::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%;
  background:var(--neon); box-shadow:0 0 12px rgba(168,85,247,.9);
}
.room__cap p{ color:var(--mute); font-size:13.5px; line-height:2.1; padding-left:18px; letter-spacing:.03em; }

/* ==========================================================================
   Support
   ========================================================================== */
.sup{ padding-block:var(--sec); }
.sup__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,88px); align-items:start; }
.sup__ttl{
  font-family:var(--ff-jp); font-weight:500;
  font-size:clamp(27px,4vw,46px); line-height:1.55; letter-spacing:.07em;
  margin:18px 0 28px;
}
.sup__txt{ color:var(--mute); font-size:15px; line-height:2.25; letter-spacing:.03em; }

/* 伴走の線。1本の光に4つの節が並ぶ */
.sup__list{ position:relative; display:grid; padding-left:38px; }
.sup__list::before{
  content:""; position:absolute; left:5px; top:.7em; bottom:.7em; width:1px;
  background:linear-gradient(180deg, transparent, var(--lilla) 14%, var(--magenta) 86%, transparent);
  opacity:.55;
}
.sup__list li{
  position:relative;
  padding:0 0 clamp(28px,3.4vw,40px);
  transition:transform .55s var(--expo);
}
.sup__list li:last-child{ padding-bottom:0; }
.sup__list li::before{
  content:""; position:absolute; left:-38px; top:.62em;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:1px solid var(--lilla-hi);
  box-shadow:0 0 0 4px rgba(5,4,9,.9), 0 0 16px rgba(168,85,247,.55);
  transition:background-color .45s var(--ease), transform .5s var(--expo);
}
.sup__list li:hover{ transform:translateX(5px); }
.sup__list li:hover::before{ background:var(--lilla-hi); transform:scale(1.18); }
.sup__list h4{
  font-family:var(--ff-jp); font-weight:500; font-size:17.5px; letter-spacing:.08em;
  margin-bottom:11px;
}
.sup__list p{ color:var(--mute); font-size:13.5px; line-height:2.15; letter-spacing:.03em; }

/* ==========================================================================
   Audition CTA
   ========================================================================== */
.acta{ position:relative; padding-block:clamp(100px,14vw,190px); overflow:hidden; }
.acta__bg{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
.acta__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.5); }
.acta__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 80% at 50% 40%, rgba(123,47,214,.62), transparent 68%),
    linear-gradient(180deg, var(--ink) 0%, rgba(5,4,9,.66) 34%, rgba(5,4,9,.78) 66%, var(--ink) 100%);
}
.acta__in{ position:relative; z-index:2; text-align:center; }
.acta__lat{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--ff-lat); font-weight:600; font-size:11px;
  letter-spacing:.34em; color:var(--lilla-hi); margin-bottom:28px;
  padding:9px 18px; border-radius:999px;
  border:1px solid rgba(200,166,255,.28); background:rgba(255,255,255,.03);
}
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--magenta);
  box-shadow:0 0 0 0 rgba(255,45,142,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,45,142,.6); }
  70%{ box-shadow:0 0 0 15px rgba(255,45,142,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,45,142,0); }
}
.acta__ttl{
  font-family:var(--ff-jp); font-weight:500;
  font-size:clamp(31px,5.6vw,70px); line-height:1.45; letter-spacing:.07em;
  margin-bottom:28px;
  text-shadow:0 0 70px rgba(168,85,247,.55);
}
.acta__txt{ color:rgba(244,241,250,.74); font-size:15px; line-height:2.2; letter-spacing:.04em; margin-bottom:44px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding-block:var(--sec); }
.faq__list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:28px 48px 28px 0; position:relative;
  font-family:var(--ff-jp); font-weight:500; font-size:clamp(15px,1.7vw,17.5px);
  letter-spacing:.06em; line-height:1.8;
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--lilla-hi); }
.faq summary::before,
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; background:var(--lilla-hi);
  transition:transform .45s var(--expo);
}
.faq summary::before{ width:15px; height:1.5px; transform:translateY(-50%); }
.faq summary::after{ width:1.5px; height:15px; right:14.75px; transform:translateY(-50%); }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(90deg); }
.faq__a{ padding:0 48px 30px 0; }
.faq__a p{ color:var(--mute); font-size:14.5px; line-height:2.2; letter-spacing:.03em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{ border-top:1px solid var(--line); padding-block:clamp(56px,7vw,90px); background:rgba(5,4,9,.6); }
.foot__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(32px,4vw,56px); align-items:start; }
.foot__tag{ color:var(--mute); font-size:13.5px; margin-top:18px; letter-spacing:.08em; }
.foot__nav{ display:grid; gap:14px; }
.foot__nav a{ font-size:13.5px; color:rgba(244,241,250,.7); transition:color .3s var(--ease); width:fit-content; letter-spacing:.05em; }
.foot__nav a:hover{ color:var(--lilla-hi); }
.foot__addr{ font-size:13.5px; color:var(--mute); line-height:2; letter-spacing:.04em; }
.foot__addr a{ color:var(--paper); border-bottom:1px solid var(--line); }
.foot__addr a:hover{ color:var(--lilla-hi); }
.foot__cr{ font-family:var(--ff-lat); font-size:11px; color:rgba(156,144,180,.92); margin-top:28px; letter-spacing:.12em; }

/* ==========================================================================
   Page hero（下層ページ共通）
   ========================================================================== */
.phero{
  position:relative; overflow:hidden;
  padding:clamp(158px,20vw,236px) 0 clamp(80px,10vw,124px);
}
.phero__bg{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.45); }
.phero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 80% at 30% 30%, rgba(123,47,214,.6), transparent 66%),
    radial-gradient(60% 60% at 95% 8%, rgba(255,45,142,.3), transparent 62%),
    linear-gradient(180deg, rgba(5,4,9,.88) 0%, rgba(5,4,9,.5) 45%, var(--ink) 100%);
}
.phero__in{ position:relative; z-index:2; }
.phero__lat{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--ff-lat); font-weight:600; font-size:11px;
  letter-spacing:.34em; color:var(--lilla-hi); margin-bottom:26px;
  padding:9px 18px; border-radius:999px;
  border:1px solid rgba(200,166,255,.28); background:rgba(255,255,255,.03);
}
.phero__ttl{
  font-family:var(--ff-jp); font-weight:500;
  font-size:clamp(29px,5.2vw,62px); line-height:1.5; letter-spacing:.07em;
  max-width:17em; margin-bottom:28px;
  text-shadow:0 0 70px rgba(168,85,247,.45);
}
.phero__txt{ color:rgba(244,241,250,.74); font-size:15px; line-height:2.2; letter-spacing:.04em; max-width:44em; margin-bottom:40px; }

/* ---------- 募集部門 ---------- */
.parts{ padding-block:var(--sec); }
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); }
.part{
  padding:clamp(26px,3vw,36px);
  background:var(--glass);
  border:1px solid rgba(255,255,255,.07); border-radius:var(--r);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .55s var(--expo), border-color .45s var(--ease), box-shadow .5s var(--ease);
}
.part:hover{ transform:translateY(-5px); border-color:var(--line-hi); box-shadow:0 30px 70px -36px rgba(168,85,247,.7); }
.part__lat{
  font-family:var(--ff-lat); font-weight:600; font-size:10px; letter-spacing:.26em;
  color:var(--lilla-hi); margin-bottom:20px;
}
.part h3{
  font-family:var(--ff-jp); font-weight:500; font-size:20px; letter-spacing:.08em;
  line-height:1.6; margin-bottom:15px;
}
.part p{ color:var(--mute); font-size:13.5px; line-height:2.1; letter-spacing:.03em; }

/* ---------- 応募条件 ---------- */
.req{ padding-block:var(--sec); }
.req__in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,80px); align-items:start; }
.req__ttl{
  font-family:var(--ff-jp); font-weight:500;
  font-size:clamp(25px,3.6vw,42px); line-height:1.55; letter-spacing:.07em; margin:18px 0 22px;
}
.req__note{ color:var(--mute); font-size:14.5px; line-height:2.2; letter-spacing:.03em; }
.req__list{ margin:0; border-top:1px solid var(--line); }
.req__list > div{
  display:grid; grid-template-columns:9em 1fr; gap:22px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.req__list dt{
  font-family:var(--ff-lat); font-weight:600; font-size:11.5px; letter-spacing:.16em;
  color:var(--lilla-hi); padding-top:.5em;
}
.req__list dd{ margin:0; font-size:14.5px; line-height:2; color:rgba(244,241,250,.86); letter-spacing:.03em; }

/* ---------- 選考フロー ---------- */
.flow{ padding-block:var(--sec); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,32px); }
.step{ position:relative; padding-top:34px; border-top:1px solid var(--line); }
.step::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:1px;
  background:var(--neon); box-shadow:0 0 12px rgba(168,85,247,.7);
  transition:width 1.2s var(--expo) .15s;
}
.step.is-in::before{ width:100%; }
.step__n{
  font-family:var(--ff-lat); font-weight:600; font-size:11px; letter-spacing:.28em;
  color:var(--lilla-hi); margin-bottom:18px;
}
.step h3{
  font-family:var(--ff-jp); font-weight:500; font-size:18px; letter-spacing:.07em;
  line-height:1.65; margin-bottom:13px;
}
.step p{ color:var(--mute); font-size:13.5px; line-height:2.1; letter-spacing:.03em; }

/* ---------- 応募フォーム ---------- */
.apply{ padding-block:var(--sec); }
.apply__in{ max-width:920px; }
.req-mark{ color:var(--magenta); font-family:var(--ff-lat); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,28px); }
.field{ display:flex; flex-direction:column; gap:10px; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-size:13.5px; letter-spacing:.07em; font-weight:500;
  color:rgba(244,241,250,.9);
}
.field input,
.field select,
.field textarea{
  font-family:var(--ff-jp); font-size:15px; color:var(--paper);
  background:rgba(255,255,255,.035);
  border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; width:100%;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; line-height:1.95; min-height:104px; }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--lilla-hi) 50%),linear-gradient(135deg,var(--lilla-hi) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.field select option{ background:var(--ink-2); color:var(--paper); }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(156,144,180,.66); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--lilla);
  background:rgba(168,85,247,.07);
  box-shadow:0 0 0 3px rgba(168,85,247,.16);
}
.field__help{ font-size:12.5px; color:var(--mute); line-height:1.85; letter-spacing:.03em; }

.form__foot{ gap:24px; margin-top:8px; }
.check{ display:flex; gap:13px; align-items:flex-start; cursor:pointer; }
.check input{
  width:19px; height:19px; margin:5px 0 0; flex:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  border:1px solid rgba(200,166,255,.45); border-radius:5px;
  background:rgba(255,255,255,.03);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.check input:checked{
  background-color:var(--lilla); border-color:var(--lilla);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size:13px 13px; background-position:center; background-repeat:no-repeat;
}
.check span{ font-size:13px; line-height:2; color:var(--mute); letter-spacing:.03em; }

.notice{
  grid-column:1 / -1;
  border:1px solid rgba(255,45,142,.4); border-left-width:3px; border-radius:12px;
  background:rgba(255,45,142,.07); padding:24px 26px;
}
.notice__ttl{ font-weight:500; margin-bottom:10px; letter-spacing:.05em; }
.notice p{ font-size:14px; line-height:2.05; color:rgba(244,241,250,.82); letter-spacing:.03em; }
.notice a{ color:var(--lilla-hi); border-bottom:1px solid rgba(200,166,255,.4); }

/* ==========================================================================
   Artists
   ========================================================================== */
.phero--tight{ padding:clamp(148px,17vw,206px) 0 clamp(58px,7vw,90px); }
.roster{ padding-block:clamp(48px,6vw,72px) var(--sec); }

/* ---------- 絞り込み ---------- */
.afilter{ display:flex; flex-wrap:wrap; gap:9px; }
.afilter__btn{
  font-family:var(--ff-jp); font-size:13px; letter-spacing:.06em; line-height:1;
  padding:13px 21px; border-radius:999px;
  border:1px solid var(--line); color:rgba(244,241,250,.72);
  background:rgba(255,255,255,.02);
  transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), transform .4s var(--expo);
}
.afilter__btn:hover{ color:var(--paper); border-color:var(--line-hi); transform:translateY(-1px); }
.afilter__btn.is-on{
  color:#fff; border-color:transparent;
  background:linear-gradient(100deg, var(--lilla-lo), var(--lilla) 50%, var(--magenta));
  box-shadow:0 8px 26px -10px rgba(168,85,247,.85);
}
.afilter__count{
  font-family:var(--ff-lat); font-size:11px; letter-spacing:.22em;
  color:var(--mute); margin-top:22px; min-height:1.2em;
}

/* ---------- グリッド ---------- */
.agrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,30px);
  margin-top:clamp(28px,3.5vw,44px);
}
.acard{ display:flex; flex-direction:column; }
.acard.is-hidden{ display:none; }
.js .acard{ transition:opacity .5s var(--ease), transform .5s var(--expo); }
.js .acard.is-out{ opacity:0; transform:translateY(12px) scale(.98); }

.acard__ph{
  position:relative; aspect-ratio:3/4; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(155deg, var(--g1,#6D28D9) 0%, var(--g2,#FF2D8E) 100%);
  border:1px solid rgba(255,255,255,.07);
  display:grid; place-items:center;
}
.acard__ph::after{
  content:attr(data-initial);
  font-family:var(--ff-jp); font-weight:300;
  font-size:clamp(54px,7vw,84px); line-height:1;
  color:rgba(255,255,255,.34);
  text-shadow:0 0 44px rgba(0,0,0,.35);
}
.acard__ph:has(img){ background:var(--ink-3); }
.acard__ph:has(img)::after{ content:none; }
.acard__ph img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.5) contrast(1.06) brightness(.95);
  transition:transform 1.1s var(--expo), filter .8s var(--ease);
}
.acard:hover .acard__ph img{ transform:scale(1.07); filter:grayscale(0) contrast(1.04) saturate(1.15) brightness(1); }

.acard__body{ padding:22px 2px 0; }
.acard__cat{ font-size:11.5px; letter-spacing:.14em; color:var(--lilla-hi); margin-bottom:12px; }
.acard__name{
  font-family:var(--ff-jp); font-weight:500; font-size:21px;
  letter-spacing:.09em; line-height:1.5;
}
.acard__lat{
  font-family:var(--ff-lat); font-weight:500; font-size:10.5px;
  letter-spacing:.26em; color:var(--mute); margin-top:8px;
}
.acard__txt{ color:var(--mute); font-size:13px; line-height:2.05; margin-top:15px; letter-spacing:.03em; }

.acard__sns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.acard__sns a{
  display:inline-block;
  font-family:var(--ff-lat); font-weight:500; font-size:10px; letter-spacing:.16em;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); color:rgba(244,241,250,.7);
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.acard__sns a:hover{ color:var(--paper); border-color:var(--lilla); background:rgba(168,85,247,.14); }

.agrid__empty{ color:var(--mute); font-size:14.5px; margin-top:40px; }

/* ---------- 準備中 ---------- */
.soonblock{ text-align:center; padding-top:clamp(16px,3vw,32px); }
.soon__ttl{
  font-family:var(--ff-lat); font-weight:600;
  font-size:clamp(36px,6.4vw,78px); line-height:1.05; letter-spacing:-.02em;
  background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:24px;
}
.soon__txt{ color:var(--mute); font-size:15px; line-height:2.2; letter-spacing:.04em; }

.soongrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,24px); margin-top:clamp(38px,5vw,62px);
}
.soon{
  aspect-ratio:3/4; border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(155deg, rgba(109,40,217,.2) 0%, rgba(255,45,142,.07) 100%);
  display:grid; place-items:center;
  position:relative; overflow:hidden;
}
/* 空きスロットの上を光がゆっくり通る */
.soon::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%);
  transform:translateX(-100%);
  animation:sweep 5.5s var(--ease) infinite;
}
.soon:nth-child(2)::after{ animation-delay:.5s; }
.soon:nth-child(3)::after{ animation-delay:1s; }
.soon:nth-child(4)::after{ animation-delay:1.5s; }
@keyframes sweep{ 0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(100%); } }
.soon span{
  font-family:var(--ff-lat); font-weight:500; font-size:10px;
  letter-spacing:.3em; color:rgba(244,241,250,.34); position:relative; z-index:1;
}

/* ---------- トップページの抜粋 ---------- */
.apeek{ padding-block:var(--sec); }
.apeek__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:clamp(32px,4vw,52px);
}
.apeek__head .shead{ margin-bottom:0; }
.apeek .agrid{ margin-top:0; }
.apeek__more{ flex:none; }

/* ---------- 画像が読めなかったとき ---------- */
.img-fallback{
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(168,85,247,.42), transparent 65%),
    radial-gradient(70% 80% at 85% 90%, rgba(255,45,142,.32), transparent 60%),
    var(--ink-3);
  min-height:220px;
}

/* ==========================================================================
   Reveal — JSが動いているときだけ隠す
   ========================================================================== */
.js .reveal{
  opacity:0; transform:translateY(28px); filter:blur(8px);
  transition:opacity 1.05s var(--expo), transform 1.05s var(--expo), filter 1.05s var(--expo);
}
.js .reveal.is-in{ opacity:1; transform:none; filter:blur(0); }

/* ==========================================================================
   WordPress — テーマとして動かすときだけ意味を持つ部分
   （静的HTMLのままでも害はありません）
   ========================================================================== */

/* 管理画面で作ったメニューは <li> で出てくる。並びを壊さないように受け止める。 */
.nav__links li{ display:flex; align-items:center; list-style:none; }
.foot__nav li{ list-style:none; }
.nav__links .menu-item a,
.foot__nav .menu-item a{ display:inline-block; }
.nav__links .current-menu-item > a:not(.btn){ color:var(--paper); }

/* カスタムロゴ */
.brand--custom img{ max-height:42px; width:auto; }

/* アーティストのカードはリンクになる */
.acard__name a{ transition:color .3s var(--ease); }
.acard__name a:hover{ color:var(--lilla-hi); }
a.acard__ph{ display:grid; }

/* ページ送り */
.pagination{ margin-top:clamp(40px,5vw,64px); }
.pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 14px; border-radius:999px;
  border:1px solid var(--line); color:rgba(244,241,250,.72);
  font-family:var(--ff-lat); font-size:13px; letter-spacing:.06em;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.pagination .page-numbers:hover{ color:var(--paper); border-color:var(--line-hi); }
.pagination .page-numbers.current{
  color:#fff; border-color:transparent;
  background:linear-gradient(100deg, var(--lilla-lo), var(--lilla) 50%, var(--magenta));
}

/* 個別アーティスト */
.aprof__body{ padding-block:clamp(20px,3vw,40px) var(--sec); }
.aprof__grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,72px); align-items:start; }
.aprof__media .acard__ph{ margin-bottom:20px; }
.aprof__back{ margin-top:clamp(32px,4vw,48px); }
.aprof__pages{ margin-top:24px; color:var(--mute); font-size:13.5px; }

/* エディタで書いた本文 */
.entry{ color:rgba(244,241,250,.86); font-size:15.5px; line-height:2.2; letter-spacing:.03em; }
.entry > * + *{ margin-top:1.4em; }
.entry h2{
  font-family:var(--ff-jp); font-weight:500; font-size:clamp(22px,3vw,32px);
  line-height:1.6; letter-spacing:.06em; margin-top:2em;
}
.entry h3{
  font-family:var(--ff-jp); font-weight:500; font-size:clamp(18px,2.2vw,22px);
  line-height:1.65; letter-spacing:.07em; margin-top:1.8em;
}
.entry h4{ font-weight:500; font-size:17px; letter-spacing:.07em; margin-top:1.6em; }
.entry p{ color:var(--mute); }
.entry strong{ color:var(--paper); font-weight:500; }
.entry a{ color:var(--lilla-hi); border-bottom:1px solid rgba(200,166,255,.4); }
.entry a:hover{ border-bottom-color:var(--lilla-hi); }
.entry ul,
.entry ol{ padding-left:1.4em; color:var(--mute); }
.entry ul li{ list-style:disc; }
.entry ol li{ list-style:decimal; }
.entry li + li{ margin-top:.5em; }
.entry li::marker{ color:var(--lilla-hi); }
.entry blockquote{
  padding:20px 26px; border-left:2px solid var(--lilla);
  background:rgba(255,255,255,.03); border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:rgba(244,241,250,.8);
}
.entry img,
.entry__thumb img{ border-radius:var(--r); }
.entry code{
  font-size:.9em; padding:.2em .5em; border-radius:6px;
  background:rgba(255,255,255,.06); color:var(--lilla-hi);
}
.entry hr{ border:0; border-top:1px solid var(--line); margin-block:2.4em; }
.entry table{ width:100%; border-collapse:collapse; font-size:14px; }
.entry th,
.entry td{ padding:14px 12px; border-bottom:1px solid var(--line); text-align:left; }
.entry th{ color:var(--lilla-hi); font-weight:500; }

.alignleft{ float:left; margin:0 1.6em 1.2em 0; }
.alignright{ float:right; margin:0 0 1.2em 1.6em; }
.aligncenter{ margin-inline:auto; }
.wp-caption-text{ font-size:12.5px; color:var(--mute); margin-top:10px; }

.screen-reader-text{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 管理バーが出ているときに固定ナビが隠れないように */
.admin-bar .nav{ top:32px; }
@media (max-width:782px){ .admin-bar .nav{ top:46px; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .pgrid{ grid-template-columns:repeat(2,1fr); }
  .agrid{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:34px 28px; }
}

@media (max-width:900px){
  .feat__grid,
  .sup__in,
  .req__in{ grid-template-columns:1fr; }
  .feat__media{ aspect-ratio:16/11; }
  .foot__in{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
  .rgrid{ grid-template-columns:1fr; gap:34px; }
  .room__img img{ aspect-ratio:16/10; }
  .br-sp{ display:inline; }

  .agrid{ grid-template-columns:repeat(2,1fr); }
  .aprof__grid{ grid-template-columns:1fr; }
  .aprof__media .acard__ph{ max-width:340px; }
  .apeek__head{ flex-direction:column; align-items:flex-start; }
  .soongrid{ grid-template-columns:repeat(4,1fr); gap:12px; }
  .soon{ aspect-ratio:1/1; }
}

@media (max-width:760px){
  body{ font-size:15px; }
  .burger{ display:block; }

  /* backdrop-filter は position:fixed の包含ブロックを作ってしまい、
     全画面メニューがヘッダー内に閉じ込められる。モバイルでは外す（描画も軽くなる）。 */
  .nav.is-stuck{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(5,4,9,.95); }

  .nav__links{
    position:fixed; inset:0;
    flex-direction:column; align-items:stretch; justify-content:center; gap:0;
    padding:104px var(--gut) 44px;
    overflow-y:auto;
    background:var(--ink);
    background-image:radial-gradient(90% 55% at 18% 22%, rgba(109,40,217,.42) 0%, transparent 68%);
    transform:translateY(-100%); transition:transform .6s var(--expo);
    visibility:hidden;
  }
  .nav__links.is-open{ transform:translateY(0); visibility:visible; }
  .nav__links a:not(.btn){
    font-size:17px; padding:18px 0; border-bottom:1px solid var(--line);
    font-weight:500; letter-spacing:.1em;
  }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__links .btn{ margin-top:28px; }
  /* 管理画面メニュー使用時、<li> を縦並びの1行として扱う */
  .nav__links li{ display:block; }
  .nav__links li a:not(.btn){ display:block; }

  /* モバイルは重い合成を避ける。ガラスは半透明の面だけで表現する。 */
  .glass, .part{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  }
  .atmos__grain{ display:none; }
  .atmos__glow{ filter:blur(70px); }

  .hero{ min-height:94svh; padding:122px 0 96px; }
  .hero__logo{ width:min(420px,86vw); }
  .brand__logo{ height:34px; }
  .brand__type{ height:23px; }
  .foot__logo{ width:min(260px,80%); }
  .hero__lead{ font-size:clamp(16px,4.6vw,20px); letter-spacing:.1em; }
  .hero__scroll{ display:none; }   /* 狭い画面では邪魔になるだけなので出さない */
  .spectrum{ height:42px; opacity:.36; }
  .hero__img{ object-position:52% 38%; filter:brightness(.3) saturate(1.05); }

  /* 番号を見出しの横に置き、本文は下に落とす */
  .ch{
    grid-template-columns:auto 1fr;
    gap:16px 18px;
    padding-inline:0;
    align-items:center;
  }
  .ch__no{ font-size:30px; }
  .ch__txt{ grid-column:1 / -1; padding-top:4px; }
  .ch__lat{ margin-top:8px; }

  .stmt__note{ padding-left:18px; }
  .foot__in{ grid-template-columns:1fr; }
  .btn{ --pad: 16px 28px; }
  .btn--lg{ --pad: 18px 34px; font-size:15px; }
  .hero__cta .btn{ flex:1 1 auto; }

  .pgrid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .form{ grid-template-columns:1fr; }
  .req__list > div{ grid-template-columns:1fr; gap:6px; }
  .req__list dt{ padding-top:0; }
}

@media (max-width:560px){
  /* 1行に収める */
  .hero__eyebrow{ font-size:9.5px; letter-spacing:.2em; padding:8px 14px; }
  .agrid{ grid-template-columns:1fr; gap:20px; }
  .acard{ flex-direction:row; gap:16px; align-items:flex-start; }
  .acard__ph{ flex:none; width:38%; max-width:148px; border-radius:var(--r-sm); }
  .acard__ph::after{ font-size:42px; }
  .acard__body{ flex:1; min-width:0; padding:2px 0 0; }
  .acard__name{ font-size:19px; }
  .acard__txt{ margin-top:12px; }
  .afilter__btn{ font-size:12.5px; padding:12px 17px; }
  .soongrid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .soon{ border-radius:var(--r-sm); }
  .soon span{ font-size:9px; letter-spacing:.24em; }
}

/* ==========================================================================
   Reduced motion — 動きを止める
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; filter:none; }
  .hero__eyebrow,.hero__lead,.hero__sub,.hero__cta,.hero__scroll{ opacity:1; }
  .ign{ opacity:1; transform:none; }
  .hero__logo{ opacity:1; filter:drop-shadow(0 0 14px rgba(201,166,255,.6)) drop-shadow(0 0 38px rgba(168,85,247,.4)); }
  .hero__title::after{ opacity:.34; }
  .hero__sheen{ display:none; }
  .spectrum{ display:none; }
  .progress{ display:none; }
}