/* =========================================================
   世界観LP — 初稿
   方針: スマホ最適化 / 没入感 / 急な動き・点滅・激しいズームは避ける
   フォント: Noto Serif JP
   ========================================================= */

:root{
  --bg:#05040a;
  --ink:#f4f1f8;
  --ink-dim:#b9b3c7;
  --purple:#9a7bff;
  --purple-glow:#b9a3ff;
  --frame:100%;            /* 体験フレーム幅。スマホ=全幅／PC=縦型フレーム */
  --maxw:560px;            /* テキストカラムの最大幅 */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* PCでは縦型フレームに収め、周囲を暗い余白にして没入感を保つ */
@media (min-width:768px){
  :root{ --frame:480px; --maxw:480px; }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Serif JP",serif;
  font-weight:400;                 /* 本文は軽く。強調は重み差で立たせる（ベタ貼り感の解消） */
  line-height:1.9;
  letter-spacing:.04em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* palt=約物を詰めて等幅グリッドの「流し込み」感を消す / pkna=かなも詰める */
  font-feature-settings:"palt" 1,"pkna" 1;
  text-spacing-trim:trim-start;
}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* PCのフレーム外の余白（背景アンビエンス） */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(ellipse at center,#0c0820 0%,#050409 70%);
  opacity:0;transition:opacity .6s;
}
@media (min-width:768px){
  body::before{opacity:1}
}

/* ===== 起動オーバーレイ ===== */
.enter{
  position:fixed;inset:0;z-index:100;
  background:radial-gradient(ellipse at center,#120c24 0%,#05040a 70%);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8vw;
  transition:opacity .9s var(--ease),visibility .9s;
}
.enter.is-hidden{opacity:0;visibility:hidden}
.enter__inner{max-width:340px;width:100%}
.enter__lead{
  font-size:1.4rem;font-weight:500;letter-spacing:.14em;line-height:2;margin-bottom:1.1rem;
  color:var(--ink);text-shadow:0 0 24px rgba(154,123,255,.5);
  opacity:0;animation:fadeUp 1.4s var(--ease) .2s forwards;
}
/* 何の募集ページなのかを最初に一言で伝える（離脱対策） */
.enter__sub{
  font-size:.8rem;color:var(--ink-dim);letter-spacing:.1em;line-height:1.9;
  margin-bottom:2.4rem;
  opacity:0;animation:fadeIn 1.4s ease .8s forwards;
}
.enter__sub .ph{display:inline-block}   /* 語中で折り返さず文節で折る */
.enter__btn{
  display:block;width:100%;padding:1rem 1.2rem;margin:0 auto .9rem;
  border-radius:999px;font-size:1rem;letter-spacing:.1em;
  transition:transform .4s var(--ease),background .4s,opacity .9s;
  opacity:0;animation:fadeUp 1.2s var(--ease) .7s forwards;
}
.enter__btn--sound{
  /* 上から差す光のニュアンス（グロス感のあるベタ塗りグラデを回避） */
  background:
    radial-gradient(120% 140% at 50% -30%,rgba(201,182,255,.5),rgba(201,182,255,0) 58%),
    linear-gradient(180deg,#6a50c2,#4f3c9c);
  border:1px solid rgba(199,183,255,.32);
  color:#fff;font-weight:500;
  box-shadow:0 10px 32px rgba(96,68,184,.4),inset 0 1px 0 rgba(255,255,255,.12);
}
.enter__btn--silent{
  border:1px solid rgba(255,255,255,.28);color:var(--ink-dim);
  animation-delay:.9s;
}
/* 演出を読まずに内容を知りたい人の近道（テキストリンク風の控えめな第3導線） */
.enter__btn--direct{
  border:none;font-size:.88rem;color:var(--ink-dim);letter-spacing:.14em;
  margin-top:.4rem;padding:.7rem 1.2rem;
  animation-delay:1.1s;text-decoration:underline;text-underline-offset:.45em;
  text-decoration-color:rgba(185,179,199,.4);
}
.enter__btn:active{transform:scale(.97)}
.enter__icon{margin-right:.5em}

/* ===== 固定ステージ（クロスフェードレイヤー） ===== */
.stage{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:var(--frame);max-width:100%;z-index:-2;background:var(--bg);overflow:hidden;
}
/* PCではフレームの輪郭を薄く出して「縦型ステージ」に見せる */
@media (min-width:768px){
  .stage{box-shadow:0 0 0 1px rgba(154,123,255,.08),0 0 80px rgba(0,0,0,.7)}
}
.layer{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 2s var(--ease),filter 2s var(--ease),transform 12s linear;
  transform:scale(1.03);                         /* 入りのズーム量を控えめに（client 0621「拡大が気になる」） */
  will-change:opacity;
}
.layer.is-on{opacity:1;transform:scale(1)}      /* 表示中はゆっくりズームアウト */
.layer--penlight{
  background-image:url("../img/bg-penlight-1.png");
  background-position:center bottom;
}
/* ペンライトの海は会場の空気のようにゆっくり「呼吸」する（点滅ではない8秒周期） */
.layer--penlight.is-on{animation:penBreathe 7s ease-in-out infinite}
@keyframes penBreathe{
  0%,100%{filter:brightness(.94) saturate(.98)}
  50%{filter:brightness(1.18) saturate(1.14)}
}
/* 現実パートのシーン背景（クライアント提供の縦画像 1080×1920／liveのみ横）。
   縦画面にそのまま cover で収まる。シーングループごとにJSがクロスフェード巡回。 */
.layer[data-layer="r-tooth"]  {background-image:url("../img/real2/tooth.jpg")}
.layer[data-layer="r-late"]   {background-image:url("../img/real2/late.jpg")}
.layer[data-layer="r-drink"]  {background-image:url("../img/real2/drink.jpg")}
.layer[data-layer="r-shop"]   {background-image:url("../img/real2/shop.jpg")}
.layer[data-layer="r-cafe"]   {background-image:url("../img/real2/cafe.jpg")}
.layer[data-layer="r-busy"]   {background-image:url("../img/real2/busy.jpg")}
.layer[data-layer="r-trip"]   {background-image:url("../img/real2/trip.jpg")}
.layer[data-layer="r-karaoke"]{background-image:url("../img/real2/karaoke.jpg")}
.layer[data-layer="r-live"]   {background-image:url("../img/real2/live.jpg")}
.layer--spotlight{background-image:url("../img/spotlight-empty.png")}
.layer--climax   {background-image:url("../img/spotlight-figure.png")}
.layer--finalstage{background-image:url("../img/spotlight-empty.png")}
@media (min-width:1024px) and (orientation:landscape){
  .layer--penlight {background-image:url("../img/wide/penlight-w.jpg")}
  .layer--spotlight{background-image:url("../img/wide/spotlight-empty-w.jpg")}
  .layer--climax   {background-image:url("../img/wide/spotlight-figure-w.jpg")}
  .layer--finalstage{background-image:url("../img/wide/spotlight-empty-w.jpg")}
}

/* ===== 現実パート：縦画像のクロスフェード巡回（流れる日々） =====
   新素材は縦1080×1920（liveのみ横）。縦画面に cover でぴったり収まるため、
   横パンやズームはしない（client 0621「最初の拡大して見える挙動が気になる」対策）。
   シーングループ内をJSがゆっくりクロスフェードで巡回する＝日常が流れていく感覚。 */
.layer--real{
  background-size:cover;
  background-position:0% 0%;
  transform:none;
  /* ★比率不整合（画面と画像のアスペクト比が違う）ときは cover で必ずどちらかの軸がはみ出す。
     その「はみ出した軸」を自動でゆっくりパン（0%→100%）して画像全体を見せる：
       横長画面×縦画像 → 縦パン（頭→体）　縦画面×横長画像 → 横パン（端→端）
     ぴったり収まる軸は % が効かず不動。 */
  animation:realScan 26s ease-in-out infinite alternate;
  transition:opacity .55s var(--ease),filter 2.2s var(--ease);
}
.layer--real.is-on{transition:opacity .6s var(--ease),filter 2.2s var(--ease)}
@keyframes realScan{
  0%  {background-position:0% 0%}
  100%{background-position:100% 100%}
}

/* ===== 理想のアイドル像（idolveil）＝夢の自分 =====
   日常シーンの上に薄く重なる（screen 合成で暗部が抜け、ステージ照明の中の人物像だけ
   が幻のように浮かぶ）。⑤で淡く現れ、⑥で opacity 0 へ＝日常に透過して溶けていく。
   opacity は JS が data-idol を読んで直接制御（transition で滑らかに）。 */
.idolveil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url("../img/spotlight-figure.png") center/cover no-repeat;
  mix-blend-mode:screen;opacity:0;
  /* ⑤で淡く色のついた理想の姿が現れ、⑥で「色を失いながら（saturate→低）透けて（opacity→0）」
     日常に飲まれていく＝クライアントが好んだ“ステージ画像が褪せていく”表現（client 0620/0624）。
     彩度も透明度も滑らかに変化させたいので opacity と filter の両方を transition する。 */
  filter:blur(2.5px) saturate(1);
  /* 線形でゆっくり＝「少しずつ」色を失いながら透けていくのを見せる（front-loadなease回避）。 */
  transition:opacity 4.5s linear,filter 4.5s linear;
}
@media (min-width:1024px) and (orientation:landscape){
  .idolveil{background-image:url("../img/wide/spotlight-figure-w.jpg")}
}
/* 現実シーンの可読性：上下を暗く落として文字を読みやすく（下からスワイプの下部に厚め）。 */
.layer--real::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(5,4,10,.42) 0%,rgba(5,4,10,.08) 30%,rgba(5,4,10,.18) 58%,rgba(5,4,10,.86) 100%);
}
/* アイドル再登場時のスポットライトの“差し込み”を強める（上から落ちる光の帯を screen で重ねる） */
.layer--spotlight::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(115% 78% at 50% -12%,rgba(222,210,255,.6),rgba(222,210,255,0) 52%);
  mix-blend-mode:screen;opacity:0;
}
.layer--spotlight.is-on::before{animation:beamIn 3.6s var(--ease)}
@keyframes beamIn{0%{opacity:0}45%{opacity:.95}100%{opacity:.5}}

/* ラスト：人物が消えたあとの無人ステージ。
   ※ 以前は finalBeam で暗→明にしていたが、背景クロスフェード中に画面が一度暗く沈んで
      “気持ち悪い”との指摘（user 0615）→ 明度アニメは廃止し、通常の明るさで素直にクロスフェード。
      スポットライトの“入り”は下の ::before（光の帯）をフェードインさせて表現する。 */
.layer--finalstage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 80% at 50% -10%,rgba(224,213,255,.62),rgba(224,213,255,0) 54%);
  mix-blend-mode:screen;opacity:0;transition:opacity 1.8s var(--ease) .3s;
}
.layer--finalstage.is-on::before{opacity:1}
/* 諦めシーンは少しトーンを落として陰のある質感に */
.layer--scene{filter:saturate(.8) brightness(.82)}
.layer--scene.is-on{filter:saturate(.55) brightness(.7)}
/* 諦めが深まるシーン（tv＝あきらめた場所を今も見つめる憧れ演出）。
   色はあせさせつつ、スマホでも“何が映っているか”見える明るさを残す（client 0615 #8） */
.layer--scene.is-faded.is-on{filter:saturate(.34) brightness(.76)}
/* シーン上に下半分を暗くするグラデ（テキスト可読性） */
.layer--scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,4,10,.5) 0%,rgba(5,4,10,.12) 32%,rgba(5,4,10,.9) 100%);
}
.layer--cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,4,10,.25) 0%,rgba(5,4,10,0) 45%,rgba(5,4,10,.92) 100%);
}
/* スポットライトは「暗闇の中で光が徐々に満ちていく」（草案動画 36-41秒）。
   降りるのではなく、かすかな光→満ちる→最後にわずかに溢れて落ち着く。 */
.layer--spotlight.is-on{animation:beamBloom 5s var(--ease)}
@keyframes beamBloom{
  0%{filter:brightness(.1) saturate(.45)}
  68%{filter:brightness(1.02) saturate(.98)}
  86%{filter:brightness(1.28) saturate(1.12)}   /* フレアが弾ける一瞬の溢れ（強めに） */
  100%{filter:brightness(1.04) saturate(1)}
}
/* クライマックス（人物登場・草案動画 39-42秒）。
   キメ画は1枚のまま。ぐっと寄り込み、そのままズームした状態で画像の中を
   ダイナミックに4箇所パン移動（脚 → 上 → …と動き回る）し、最後に引いてヒーロー画に戻る。
   移動中はモーションブラーを掛けてスピード感を出す。透明度は落とさない（暗転・薄れを挟まない）。 */
/* ツアーは「テキストが中央に来てロックした瞬間」に頭から再生する（JSが play-tour を付与） */
/* fill=both でツアー終了フレーム(scale1)を保持し、基底の10秒ズーム途中値へ“パッと戻る”のを防ぐ。
   さらに終了直後から heroZoom へ滑らかに繋ぎ、止めずに緩やかな寄り（拡大）を続ける。 */
.stage.play-tour .layer--climax.is-on{
  animation:
    climaxTour 1.3s var(--ease) both,
    heroZoom 9s ease-out 1.3s forwards;
}
@keyframes heroZoom{ from{transform:scale(1)} to{transform:scale(1.07)} }
@keyframes climaxTour{
  0%   {transform:scale(1) translate(0,0);filter:brightness(1) blur(0)}
  3%   {transform:scale(1) translate(0,0);filter:brightness(1.12) blur(0)}            /* 一拍ためる（短め） */
  12%  {transform:scale(1.72) translate(0,-3%);filter:brightness(1.18) blur(4px)}     /* ぐっと寄る（脚〜下半身へ） */
  17%  {transform:scale(1.72) translate(0,-3%);filter:brightness(1.06) blur(.4px)}    /* 一拍止める */
  35%  {transform:scale(1.78) translate(11%,13%);filter:brightness(1.12) blur(3px)}   /* ダイナミックに移動① */
  40%  {transform:scale(1.78) translate(11%,13%);filter:blur(.4px)}
  53%  {transform:scale(1.78) translate(-11%,13%);filter:brightness(1.12) blur(3px)}  /* 移動② */
  58%  {transform:scale(1.78) translate(-11%,13%);filter:blur(.4px)}
  71%  {transform:scale(1.78) translate(-10%,-12%);filter:brightness(1.12) blur(3px)} /* 移動③（上半身〜顔） */
  76%  {transform:scale(1.78) translate(-10%,-12%);filter:blur(.4px)}
  88%  {transform:scale(1.7) translate(9%,-11%);filter:brightness(1.12) blur(3px)}    /* 移動④ */
  100% {transform:scale(1) translate(0,0);filter:brightness(1) blur(0)}               /* 引いてヒーロー画に決め */
}

/* 放射ズームブラーの“尾”を擬似的に足す層（中心から外へ伸びる光条）。寄り込み中だけ瞬く。 */
.stage.is-final .layer--climax.is-on::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.0) 8%,rgba(214,203,255,.22) 18%,rgba(255,255,255,0) 46%);
  mix-blend-mode:screen;
  animation:zoomStreak 3.4s var(--ease) .9s backwards;
}
@keyframes zoomStreak{
  0%{opacity:.9;transform:scale(.4)}
  30%{opacity:.7;transform:scale(1.1)}
  100%{opacity:0;transform:scale(2.2)}
}

/* クライマックス限定：スポットライトの中を光の雨（グリッター）が降り続ける。
   .rain は JS が .stage 内に生成。最終ステップでだけ淡く点り、点滅はしない。 */
/* 「降り注ぐ雨」グリッターは意図が伝わりづらいとのフィードバック（client 0615）で非表示に。
   スポットライトの光（finalBeam / beamBloom 強化）で華やかさを担保する。 */
.rain{display:none}
.stage.is-final .rain{opacity:0}
.rain span{
  position:absolute;top:-14%;left:var(--x);
  width:1.5px;height:var(--h);
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(240,234,255,.92) 45%,rgba(154,123,255,0));
  filter:drop-shadow(0 0 4px rgba(196,176,255,.75));
  animation:rainFall var(--d) linear var(--delay) infinite;
}
@keyframes rainFall{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:var(--o)}
  78%{opacity:var(--o)}
  100%{transform:translateY(120vh);opacity:0}
}
.layer--penlight::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,4,10,.3) 0%,rgba(5,4,10,0) 40%,rgba(5,4,10,.7) 100%);
}
/* 砂嵐ノイズ（TVスタティック）。草案動画どおり、夢が色あせていく没落ステージで
   彩度の低下と連動して increasingly 強く乗る。opacity は JS が没落段階に応じて設定。 */
.tvstatic{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease);
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:staticShift .5s steps(5) infinite;
}
@keyframes staticShift{
  0%{background-position:0 0}
  20%{background-position:-30px 18px}
  40%{background-position:24px -22px}
  60%{background-position:-18px -30px}
  80%{background-position:30px 26px}
  100%{background-position:0 0}
}

/* 黒ヴェール（暗転・ブラックアウト） */
.stage__veil{
  position:absolute;inset:0;background:#04030a;opacity:0;
  transition:opacity 1.3s var(--ease);
}
.stage.veil-dim   .stage__veil{opacity:.4}
.stage.veil-dark  .stage__veil{opacity:.72}
.stage.veil-black .stage__veil{opacity:1}

/* ===== 光の粒（ペンライトの光の塵） =====
   会場の空気に漂う光の粒。ゆっくり立ち上り、漂って消える。
   草案動画全編にある「画面が生きている」質感を足す（JS側で生成、点滅なし）。 */
.dust{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  /* 行動導線パート（z-index:2）には重ならない */
}
.dust span{
  position:absolute;bottom:-4vh;left:var(--x);
  width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,rgba(226,216,255,.95) 0%,rgba(154,123,255,.45) 40%,rgba(154,123,255,0) 70%);
  opacity:0;
  animation:dustRise var(--d) linear var(--delay) infinite;
  will-change:transform,opacity;
}
@keyframes dustRise{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:var(--o)}
  55%{opacity:var(--o)}
  85%{opacity:0}
  100%{transform:translate(var(--dx),-106vh);opacity:0}
}

/* ===== フィルムグレイン ===== */
.grain{
  position:fixed;inset:-50%;z-index:40;pointer-events:none;
  opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(0,0)}
}

/* ===== スキップ ===== */
.skip{
  position:fixed;top:max(1rem,env(safe-area-inset-top));z-index:50;
  /* フレーム右端の内側に固定（PCでも中央フレームに追従） */
  right:max(1rem, calc(50% - var(--frame)/2 + 1rem));
  font-size:.8rem;letter-spacing:.12em;color:var(--ink-dim);
  padding:.5rem .9rem;border-radius:999px;
  background:rgba(10,8,20,.5);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .6s,color .3s;
}
.skip.is-on{opacity:1;visibility:visible}
.skip:active{color:var(--ink)}

/* ===== スワイプ（スクロール）誘導 =====
   画面下部に「↓ Swipe Story ↓」。ゆっくり浮き沈みするだけで点滅しない。 */
/* ビューポート基準で固定（最初の画面の下部中央に必ず出す。親フレーム基準だと
   スマホで埋もれて「機能していない」ように見えたため fixed に。client 0615 #2） */
.cue{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 5vh);
  z-index:45;text-align:center;
  animation:cueFloat 2.4s ease-in-out infinite;
}
.cue__text{
  display:inline-flex;flex-direction:column;align-items:center;gap:.15em;
  font-size:1.02rem;letter-spacing:.24em;text-indent:.24em;color:#f0ecfb;font-weight:500;
  text-shadow:0 1px 12px rgba(0,0,0,.85),0 0 22px rgba(154,123,255,.55);
}
/* 上下の「↓」を上下にレイアウトして“スクロールして読み進める”を明確に */
.cue__dn{
  display:block;font-size:1.5em;line-height:.9;color:#d8cbff;
  text-shadow:0 0 14px rgba(154,123,255,.85);
}
.cue__dn:first-child{display:none}   /* 上の矢印は隠し、下向き1つで“下へ”を明示 */
@keyframes cueFloat{
  0%,100%{transform:translate(-50%,0);opacity:.78}
  50%{transform:translate(-50%,12px);opacity:1}
}
/* 少しでもスクロールしたら（＝物語に入ったら）スワイプ誘導は消す。
   トップコピーの中央ロック時に「Swipe Story」が残らないように。 */
.cue.is-gone{animation:none;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}

/* ===== ステップ（透明なスクロールトリガー） ===== */
main{position:relative;z-index:1}
.step{
  min-height:100svh;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:14vh clamp(1.6rem,7vw,2.4rem);position:relative;
  max-width:var(--maxw);margin:0 auto;
}
.step--bottom{align-items:flex-end;padding-bottom:14vh}
/* 上部配置（草案動画のトップコピー・確定文言の位置） */
.step--top{align-items:flex-start;padding-top:16vh}
/* 現実シーンの間に挟まる「色あせていくステージ」。文字なしの間（ま）なので少し短く */
.step--mid{min-height:52vh}
.step--climax{min-height:118vh}
/* ラストの問いかけ。中央でしっかり見せる */
.step--ask{align-items:center}

/* ① 導入：文字をアイドルと重ねないよう最上部（スポットライト付近）へ（client 0621 ①）。 */
.step--intro{padding-top:9vh}
/* ② 暗転接続：黒背景で中央に。 */
.step--mono{align-items:center;min-height:88vh}
/* 現実パートの各シーン。スクロール量を抑えるため画面いっぱいよりやや低く（client 0621「長い」）。 */
.step--real{min-height:88vh}
/* ⑤ まとめ（一呼吸）。短く、中央で静かに。 */
.step--pause{align-items:center;min-height:72vh}
/* ⑥ 流れる日々。テンポよく短め。 */
.step--flow{min-height:80vh}
/* ⑧ 夢の再浮上。着地点として中央でしっかり。 */
.step--rise{align-items:center;min-height:92vh}
.step__text{width:100%;text-align:center}

/* 文字まわりの光（ステージ照明・ペンライトの滲み）。
   可読性用の濃い影 + 白の滲み + 紫の光、の多層シャドウで構成する。 */
.line{
  font-size:1.7rem;font-weight:500;letter-spacing:.12em;line-height:2;color:#fbfaff;
  text-shadow:
    0 2px 16px rgba(0,0,0,.9),
    0 0 22px rgba(255,255,255,.32),
    0 0 46px rgba(154,123,255,.5);
}
/* ひらがな表記で1行の文字数が増えたため、狭い画面では vw 連動で少し絞る（語中折返し防止） */
.line--lg{font-size:clamp(1.55rem,7.4vw,2.1rem)}
.line .ph{display:inline-block}   /* 折り返しは文節単位で */
/* ⑧ 夢の再浮上の決め文。“夢は消えていなかった”余韻＝強すぎず、やわらかく発光（client 0621 ⑧）。 */
.line--rise{
  color:#fbf9ff;
  text-shadow:0 2px 16px rgba(0,0,0,.78),0 0 26px rgba(255,255,255,.4),0 0 60px rgba(154,123,255,.6),0 0 104px rgba(124,92,255,.4);
}
.line--rise + .line--rise{margin-top:.5rem}
.word{
  font-size:2.4rem;font-weight:600;letter-spacing:.08em;color:#fff;margin-bottom:.6rem;
  text-shadow:
    0 2px 16px rgba(0,0,0,.96),
    0 0 24px rgba(255,255,255,.28),
    0 0 50px rgba(154,123,255,.32);
}
/* 「流れる日々」など、現実パートで静かに置く見出し。.word より小さく・柔らかく。 */
.word--quiet{font-size:1.7rem;font-weight:500;letter-spacing:.14em;color:#efe9ff;opacity:.94}
.sub{
  font-size:1rem;color:var(--ink-dim);letter-spacing:.06em;line-height:1.95;
  text-shadow:
    0 2px 14px rgba(0,0,0,.96),
    0 0 20px rgba(184,163,255,.22);
}
.sub + .sub{margin-top:.5rem}
/* 文節を inline-block でくくり、語中での不自然な折返しを防ぐ（「立っていられな／かった」対策） */
.sub .ph{display:inline-block}

/* ===== 現実パートの文章（client 0621「文字サイズやや小→大きく」「文章で感情を運ぶ」） =====
   現実パートは“文章が主役・画像は補助”。モノローグを従来の .sub より一段大きく、
   読みやすい明るさ＋柔らかな発光で見せる。 */
.rline{
  font-size:clamp(1.32rem,5.9vw,1.62rem);font-weight:500;letter-spacing:.1em;line-height:1.95;
  color:#f6f3fc;
  text-shadow:0 2px 16px rgba(0,0,0,.92),0 0 22px rgba(255,255,255,.22),0 0 44px rgba(154,123,255,.42);
}
.rline + .rline,.rline + .rsub,.rsub + .rsub,.rsub + .rline{margin-top:1rem}
/* 補足のモノローグ。決め文 .rline よりやや小さく・やわらかく（強弱をつける）。 */
.rsub{
  font-size:clamp(1.12rem,5vw,1.34rem);font-weight:400;letter-spacing:.08em;line-height:1.9;
  color:#e6e1f2;
  text-shadow:0 2px 14px rgba(0,0,0,.92),0 0 20px rgba(184,163,255,.26);
}
/* ⑤まとめ（一呼吸）。中央で静かに、少し大きめに。 */
.rline--mid{font-size:clamp(1.45rem,6.4vw,1.8rem);font-weight:500;color:#f4f0fb}
/* ⑥流れる日々。静かに置く＝やや細く・字間広め・わずかに沈める。 */
.rline--quiet{font-weight:400;letter-spacing:.18em;color:#e7e2f3;opacity:.96}
.rline--quiet + .rline--quiet{margin-top:.7rem}
/* ②「でも――――」を少しだけトーンを落とす */
.line--soft{color:#d9d3e8;opacity:.92;margin-top:.7rem}
/* 「でも――」の長ダッシュはテキストのまま（タイプライターで一緒に打たれて出る）。
   ―を2つ並べると字送りで僅かに離れて見えるので、この箇所だけ字間を詰めて繋ぐ。 */
.dash{font-feature-settings:normal}
.dash .ch{letter-spacing:-.06em}

/* ブラックアウト／スポットライト／クライマックス＝光の演出を強める */
.step[data-layer="none"] .line{
  text-shadow:0 0 28px rgba(154,123,255,.45),0 0 60px rgba(154,123,255,.3);
}
.step[data-layer="spotlight"] .line{
  color:#efe9ff;
  text-shadow:0 0 24px rgba(255,255,255,.4),0 0 52px rgba(154,123,255,.6),0 0 90px rgba(124,92,255,.4);
}
.step--climax .line{
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.7),0 0 26px rgba(255,255,255,.45),0 0 60px rgba(154,123,255,.65),0 0 100px rgba(124,92,255,.45);
}
/* ラストの問いかけ「日常変えてみる？」＝LP全体の締めの一言。大きく、強く発光させる。 */
.line--ask{
  font-size:clamp(2.35rem,11.2vw,3.5rem);font-weight:600;letter-spacing:.14em;color:#fff;
  text-shadow:
    0 2px 16px rgba(0,0,0,.6),
    0 0 30px rgba(255,255,255,.5),
    0 0 72px rgba(154,123,255,.72),
    0 0 120px rgba(124,92,255,.5);
}
.line--ask .ph{display:inline-block}
.line--ask.is-in{animation:askGlow 4.4s ease-in-out 1s infinite}
@keyframes askGlow{
  0%,100%{text-shadow:0 2px 16px rgba(0,0,0,.6),0 0 30px rgba(255,255,255,.5),0 0 72px rgba(154,123,255,.72),0 0 120px rgba(124,92,255,.5)}
  50%{text-shadow:0 2px 16px rgba(0,0,0,.6),0 0 44px rgba(255,255,255,.66),0 0 96px rgba(154,123,255,.92),0 0 150px rgba(124,92,255,.66)}
}

/* 締めの署名。手紙の署名のように、細いウェイト＋広い字間＋発光する細い罫で繊細に。 */
.signature{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  margin-top:2.6rem;
}
.signature__line{
  width:40px;height:1px;
  background:linear-gradient(90deg,rgba(205,188,255,0),rgba(205,188,255,.9),rgba(205,188,255,0));
  box-shadow:0 0 12px rgba(154,123,255,.7);
}
.signature__name{
  font-size:.95rem;font-weight:300;letter-spacing:.4em;text-indent:.4em;
  color:#d8cbff;
  text-shadow:0 0 16px rgba(154,123,255,.5),0 0 36px rgba(124,92,255,.38);
}

/* ===== data-fade 共通アニメ =====
   光の中から滲んで現れる（blur→クリア）。草案動画の文字の出方に寄せる。 */
[data-fade]{
  opacity:0;transform:translateY(26px);
  filter:blur(7px);
  transition:opacity 1.7s var(--ease),transform 1.7s var(--ease),filter 1.7s var(--ease);
}
[data-fade].is-in{opacity:1;transform:none;filter:blur(0)}
[data-fade].is-out{opacity:0;transform:translateY(-18px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}

/* クライマックスの確定文言は、出たあとも光がゆっくり脈打つ（5秒周期の余韻） */
.step--climax .line.is-in{animation:climaxGlow 5s ease-in-out 1.8s infinite}
@keyframes climaxGlow{
  0%,100%{text-shadow:0 2px 14px rgba(0,0,0,.7),0 0 26px rgba(255,255,255,.45),0 0 60px rgba(154,123,255,.65),0 0 100px rgba(124,92,255,.45)}
  50%{text-shadow:0 2px 14px rgba(0,0,0,.7),0 0 34px rgba(255,255,255,.6),0 0 78px rgba(154,123,255,.85),0 0 130px rgba(124,92,255,.6)}
}

/* ===== タイプライター（トップコピー：1文字ずつ打たれて現れる） ===== */
.line--type .ch{opacity:0;transition:opacity .16s linear}
.line--type .ch.on{opacity:1}

/* ===== 砂崩れ（「あの日、あきらめたあなたへ。」がスクロールで離れるとき
   文字が砂のようにほどけて消える。--sx/--sy/--ci はJSが文字ごとに設定） ===== */
[data-dissolve] .ch{
  display:inline-block;
  transition:opacity 1.25s var(--ease),transform 1.25s var(--ease),filter 1.25s var(--ease);
  transition-delay:calc(var(--ci,0)*45ms);
}
[data-dissolve].is-gone .ch{
  opacity:0;
  transform:translate(var(--sx,8px),var(--sy,-26px)) rotate(var(--sr,4deg));
  filter:blur(5px);
}

/* ===== 行動導線パート ===== */
.action{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  padding:2vh 0 0;
}
/* コンテンツ背後を“画面全幅”の暗い面で覆う。背景ステージが全面表示のPCでも、
   コンテンツ枠の外に明るいペンライトが見えて矩形の継ぎ目になるのを防ぐ。
   上端だけ透明→暗へグラデし、クライマックスから滑らかに沈み込ませる。 */
.action::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(5,4,10,0) 0,
    rgba(8,6,18,.86) 140px,
    #0a0816 320px,#0a0816 100%);
}
.block{padding:7vh 8vw}
/* セクション上の装飾マーク（淡く光る短い線＋点）。英語ラベルの代わり。 */
.block__mark{
  display:block;width:1px;height:34px;margin:0 auto 1.2rem;
  background:linear-gradient(to bottom,rgba(154,123,255,0),rgba(154,123,255,.7));
  position:relative;
}
.block__mark::after{
  content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--purple-glow);box-shadow:0 0 10px var(--purple-glow),0 0 20px rgba(154,123,255,.6);
}
.block__title{
  font-size:1.5rem;font-weight:700;letter-spacing:.22em;text-align:center;
  text-indent:.22em;                 /* tracking 分の右ズレを視覚的に中央へ補正 */
  margin-bottom:2rem;
}
/* セクション見出し下の小さな補足（デモ音源の説明など） */
.block__lead{
  text-align:center;font-size:.82rem;font-weight:400;color:var(--ink-dim);
  letter-spacing:.08em;margin:-1.2rem 0 1.8rem;
}

/* デモプレイヤー */
.block--demo{text-align:center;border-bottom:1px solid rgba(255,255,255,.07)}
.player{
  display:flex;align-items:center;gap:1rem;
  max-width:340px;margin:0 auto;padding:1rem 1.2rem;
  background:rgba(154,123,255,.08);border:1px solid rgba(154,123,255,.22);
  border-radius:16px;
}
.player__btn{
  flex:none;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#8c6dff 0%,#5d44b6 100%);
  border:1px solid rgba(199,183,255,.5);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 22px rgba(140,110,255,.35),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .3s var(--ease);
}
.player__btn:active{transform:scale(.94)}
.player__ico{font-size:1.1rem;color:#fff;line-height:1}
.player__ico--pause{display:none}
.player.is-playing .player__ico--play{display:none}
.player.is-playing .player__ico--pause{display:inline}
.player__info{text-align:left;display:flex;flex-direction:column;gap:.2rem}
.player__title{font-size:.95rem;letter-spacing:.08em}
.player__hint{font-size:.74rem;color:var(--ink-dim);letter-spacing:.08em}

/* 募集要項 */
.reqs{list-style:none;max-width:380px;margin:0 auto}
.reqs li{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.9rem 0;line-height:1.7;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:1rem;color:var(--ink);
}
.reqs li::before{
  content:"";flex:none;margin-top:.62rem;   /* 1行目の中心に合わせる */
  width:7px;height:7px;border-radius:50%;
  background:var(--purple);box-shadow:0 0 10px var(--purple);
}
.reqs__note{
  max-width:380px;margin:1.4rem auto 0;font-size:.85rem;color:var(--ink-dim);
  line-height:1.9;
}

/* 活動について */
.block--about{background:rgba(255,255,255,.015)}
.about__body{max-width:400px;margin:0 auto}
.about__body p{
  font-size:.97rem;color:var(--ink-dim);margin-bottom:1.75rem;
  line-height:2.15;letter-spacing:.02em;
}
.about__body p:last-child{margin-bottom:0}
/* 想いのキー文だけ明るく・重く立たせて、均一な「文字の壁」を崩す */
.about__hl{
  color:#efe9ff;font-weight:600;
  text-shadow:0 0 18px rgba(154,123,255,.45);
}

/* ===== 運営者について ===== */
.owner{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:0 0 2rem}
.owner__icon{
  width:auto;height:130px;object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(154,123,255,.35));
}
.owner__name{
  font-size:.95rem;letter-spacing:.3em;text-indent:.3em;color:var(--ink);
  text-shadow:0 0 14px rgba(154,123,255,.4);
}

/* ===== 費用・ノルマについて ===== */
.block--cost{background:rgba(255,255,255,.015)}
.cost{max-width:420px;margin:0 auto}
.cost__row{
  padding:1.05rem 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.cost__row dt{
  font-size:.92rem;font-weight:600;letter-spacing:.12em;color:#d8cbff;
  margin-bottom:.45rem;
  text-shadow:0 0 12px rgba(154,123,255,.35);
}
.cost__row dd{
  font-size:.92rem;color:var(--ink-dim);line-height:2;letter-spacing:.02em;
}
.cost__note{
  max-width:420px;margin:1.8rem auto 0;
  font-size:.9rem;color:var(--ink-dim);line-height:2.1;letter-spacing:.02em;
}

/* ===== 応募後の流れ ===== */
.flow{list-style:none;max-width:420px;margin:0 auto}
.flow__step{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.3rem 0;
}
.flow__step + .flow__step{border-top:1px solid rgba(255,255,255,.08)}
.flow__num{
  flex:none;width:34px;height:34px;margin-top:.15rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(154,123,255,.45);
  font-size:.9rem;color:#d8cbff;
  text-shadow:0 0 10px rgba(154,123,255,.6);
  box-shadow:0 0 14px rgba(154,123,255,.18),inset 0 0 10px rgba(154,123,255,.12);
}
.flow__name{
  font-size:1.02rem;font-weight:600;letter-spacing:.14em;margin-bottom:.35rem;
}
.flow__body p{
  font-size:.92rem;color:var(--ink-dim);line-height:2;letter-spacing:.02em;
}

/* フォーム */
.block--form{padding-bottom:9vh}
.form__lead{text-align:center;color:var(--ink-dim);margin-bottom:2.4rem;letter-spacing:.08em}
.form{max-width:420px;margin:0 auto}
.field{display:block;margin-bottom:1.6rem}
.field__label{
  display:block;font-size:.85rem;letter-spacing:.1em;color:var(--ink-dim);
  margin-bottom:.6rem;
}
.field__label em{
  font-style:normal;font-size:.7rem;color:#ff9ec4;margin-left:.5em;letter-spacing:.08em;
}
.field__opt{font-size:.7rem;color:var(--ink-dim);opacity:.7;margin-left:.5em}
.field input,.field textarea{
  width:100%;padding:.9rem 1rem;font-family:inherit;font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;transition:border .3s,background .3s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(185,179,199,.45)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--purple);background:rgba(154,123,255,.06);
}
.field textarea{resize:vertical;line-height:1.8}
.field--contact{border:none;padding:0}
.field--contact input{margin-bottom:.7rem}
.field__hint{font-size:.78rem;color:var(--ink-dim);line-height:1.7;margin-top:.2rem}
.field.is-error input,.field.is-error textarea,.field--contact.is-error input{
  border-color:#ff6b9d;
}
.field__err{color:#ff9ec4;font-size:.78rem;margin-top:.5rem;display:none}
.field.is-error .field__err{display:block}

.form__privacy{
  font-size:.78rem;color:var(--ink-dim);line-height:1.8;
  margin:1.6rem 0 1.8rem;text-align:center;
}
.submit{
  display:block;width:100%;padding:1.1rem;border-radius:999px;
  font-size:1.1rem;font-weight:600;letter-spacing:.2em;text-indent:.2em;color:#fff;
  background:
    radial-gradient(120% 160% at 50% -40%,rgba(201,182,255,.5),rgba(201,182,255,0) 58%),
    linear-gradient(180deg,#6a50c2,#4f3c9c);
  border:1px solid rgba(199,183,255,.36);
  box-shadow:0 10px 34px rgba(96,68,184,.42),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.submit:active{transform:scale(.98)}
.submit:disabled{opacity:.6;pointer-events:none}
.submit.is-sending{opacity:.7;pointer-events:none;letter-spacing:.12em}

/* ハニーポット（人には見えない・スクリーンリーダーからも除外） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 送信エラー表示 */
.form__error{
  color:#ffb4b4;font-size:.85rem;line-height:1.8;text-align:center;
  margin:0 0 1rem;white-space:pre-line;
}

/* サンクス */
.thanks{
  max-width:420px;margin:0 auto;text-align:center;padding:2vh 0;
}
.thanks__title{font-size:1.3rem;font-weight:600;letter-spacing:.1em;margin-bottom:1rem}
.thanks__body{color:var(--ink-dim);line-height:2}

/* Instagram サブ導線 */
.ig{
  display:block;max-width:420px;margin:2rem auto 0;text-align:center;
  padding:.9rem;font-size:.9rem;letter-spacing:.1em;color:var(--ink-dim);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;text-decoration:none;
  transition:color .3s,border .3s;
}
.ig:active{color:var(--ink);border-color:var(--purple)}
/* URL未受領時は hidden を尊重（.ig の display:block が UA の [hidden] を上書きするため明示） */
.ig[hidden]{display:none}

/* フッター */
.foot{text-align:center;padding:6vh 8vw max(6vh,env(safe-area-inset-bottom))}
.foot__sig{font-size:.9rem;font-weight:300;letter-spacing:.34em;text-indent:.34em;color:var(--purple-glow);opacity:.75}

/* ===== keyframes ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== PC レスポンシブ ===== */
@media (min-width:768px){
  /* 文字をわずかに大きく */
  .line{font-size:1.8rem}
  .line--lg{font-size:2.2rem}
  .block__title{font-size:1.7rem}
}
/* PC・タブレット横長＝クライアント提供の横画像でフルスクリーン表示。
   縦型フレームをやめ、ステージを画面いっぱいに広げる。 */
@media (min-width:1024px) and (orientation:landscape){
  :root{--frame:100%;--maxw:640px}
  .stage{box-shadow:none}
  body::before{opacity:0}
  .line{font-size:2rem}
  .line--lg{font-size:2.6rem}
  .word{font-size:2.8rem}
  .sub{font-size:1.1rem}
  /* 行動導線パートは読みやすい中央カラムを維持 */
  .action{max-width:640px}
}

/* ===== モーション低減設定の尊重 ===== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.2s !important}
  .layer{transform:none !important}
  [data-fade]{opacity:1;transform:none;filter:none}
  .dust{display:none}
  .rain{display:none}
  .tvstatic{animation:none}
}