/* ==========================================================================
   CUCUL FM.LLC / TOP  —  cinematic single page（旧 top-v2 を昇格）
   Scene foundation: hero / sequence geometry, theme, overlays and INDEX.
   Content UI is in home-ui.css; character rendering is in js/character.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* brand (style.css:9-52 を踏襲。--color-primary-glow の alpha バグは是正) */
  --c-primary:#f5e100;
  --c-primary-glow:rgba(245,225,0,.28);
  --c-secondary:#7b61ff;
  --c-accent:#ff6b6b;
  --c-amber:#fac458;
  --c-cyan:#00cce6;
  --c-magenta:#e666e6;
  --c-grey:#828788;
  --c-mint:#00f5d4;

  --font-display:'Orbitron',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-heading:'Bebas Neue',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;

  --pad:clamp(18px,4vw,46px);
  --container:1440px;

  /* ---- theme tokens : MIDNIGHT (default) ---- */
  --t-bg-0:#000510;
  --t-bg-1:#080e1b;
  --t-bg-2:#111a2a;
  --t-glow-a:rgba(130,159,194,.09);
  --t-glow-b:rgba(130,159,194,.06);
  --t-title:rgba(255,255,255,.05);
  --t-title-glow:rgba(255,253,232,.07);
  --t-char-rim:rgba(0,245,212,.5);
  --t-particle:rgba(255,253,232,.7);
  --t-moon:#fffde8;
  --t-moon-red:0;
  --t-beam:0;
  --t-vignette:rgba(0,0,0,.55);
  --t-media-tint:transparent;
  --t-accent:#adb5c4;
  --t-text:#ffffff;
  --t-muted:#adb5c4;
  --t-dim:#adb5c4;          /* WCAG AA 4.5:1 以上（theme-layer 最明部 #0f0f20 基準） */
  --t-line:rgba(255,255,255,.10);
  --t-pill:rgba(255,255,255,.05);
  /* 固定ヘッダーの下地。--t-pill(.05) では本文が透けて読めないため専用に持つ */
  --t-bar:rgba(5,7,20,.78);
}
html[data-theme="red"]{
  --t-bg-0:#160208;
  --t-bg-1:#200510;
  --t-bg-2:#2a0714;
  --t-glow-a:rgba(255,40,70,.16);
  --t-glow-b:rgba(245,225,0,.12);
  --t-title:rgba(245,225,0,.09);
  --t-title-glow:rgba(245,225,0,.28);
  --t-char-rim:rgba(245,225,0,.65);
  --t-particle:rgba(245,225,0,.85);
  --t-moon:#ffe8e0;
  --t-moon-red:1;
  --t-beam:.4;
  --t-vignette:rgba(30,0,8,.65);
  --t-media-tint:rgba(200,20,40,.18);
  --t-accent:#adb5c4;
  --t-text:#fff4f4;
  --t-muted:#c39a9a;
  --t-dim:#a87a84;          /* 同上（red の最明部 #2a0714 基準） */
  --t-line:rgba(255,190,190,.14);
  --t-pill:rgba(255,120,120,.07);
  --t-bar:rgba(22,4,10,.80);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* ScrollTrigger の refresh が一時的に行う scrollTo(0) は即時反映させる。
   利用者が押す [data-scroll] のみ home.js で明示的に smooth を指定する。 */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
/* 固定ヘッダー(#gnav 45〜54px)の下にアンカー着地点が潜らないようにする。
   scrollIntoView / フラグメント遷移の双方に効く */
html{scroll-padding-top:clamp(58px,4.6vw,68px)}
body{
  font-family:var(--font-body);
  background:var(--t-bg-0);
  color:var(--t-text);
  line-height:1.7;
  overflow-x:hidden;
  /* !! body / main / section 祖先に transform・filter・perspective は絶対に付けない !! */
  transition:background-color .8s ease,color .8s ease;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--t-muted);color:#0a0a0f}

:focus-visible{
  outline:2px solid var(--t-accent);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){outline:none}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.skip-link{
  position:fixed;top:10px;left:10px;z-index:300;
  transform:translateY(-160%);
  padding:10px 18px;border-radius:999px;
  background:var(--t-muted);color:#0a0a0f;
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.16em;
  transition:transform .25s ease;
}
.skip-link:focus{transform:translateY(0)}

/* --------------------------------------------------------------------------
   3. Theme layers (背景グラデは transition 不可 → 2枚クロスフェード)
   -------------------------------------------------------------------------- */
.theme-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  transition:opacity .8s ease;
}
.theme-layer--moon{
  opacity:1;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(130,159,194,.09) 0%,transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 100%,rgba(130,159,194,.06) 0%,transparent 42%),
    linear-gradient(to bottom,#000510 0%,#080e1b 50%,#111a2a 100%);
}
.theme-layer--red{
  opacity:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,40,70,.20) 0%,transparent 52%),
    radial-gradient(ellipse 60% 40% at 80% 100%,rgba(245,225,0,.12) 0%,transparent 42%),
    radial-gradient(ellipse 90% 60% at 50% 120%,rgba(150,0,20,.35) 0%,transparent 60%),
    linear-gradient(to bottom,#160208 0%,#200510 50%,#2a0714 100%);
}
html[data-theme="red"] .theme-layer--moon{opacity:0}
html[data-theme="red"] .theme-layer--red{opacity:1}

/* white light beams (赤テーマで出現) */
/* 外側 .beam が位置＋回転を持ち、内側 i を GSAP のスイープ対象にする
   （.beam 自身を GSAP で動かすと CSS の rotate が消えるため） */
.beam{
  position:fixed;z-index:1;pointer-events:none;
  top:-40vh;left:50%;
  width:clamp(120px,16vw,260px);height:190vh;
  opacity:var(--t-beam);
  mix-blend-mode:screen;
  transition:opacity .8s ease;
}
.beam--a{transform:translateX(-140%) rotate(18deg)}
.beam--b{transform:translateX(40%) rotate(-14deg)}
.beam i{
  display:block;width:100%;height:100%;
  background:linear-gradient(to bottom,rgba(255,255,255,.5),rgba(255,255,255,.16) 38%,transparent 80%);
  filter:blur(24px);          /* 静的 blur は1回ラスタライズなので許容 */
  will-change:transform;
}

/* --------------------------------------------------------------------------
   4. Overlays : vignette / grain / dust
   -------------------------------------------------------------------------- */
#vignette{
  position:fixed;inset:0;z-index:49;pointer-events:none;
  box-shadow:inset 0 0 min(40vw,540px) min(7vw,90px) var(--t-vignette);
  transition:box-shadow .8s ease;   /* box-shadow なら var 変化を補間できる */
}
/* 重めのフィルムグレイン: feTurbulence 入り data-URI SVG タイル
   （全画面 filter:url() は iOS Safari で毎フレーム再ラスタライズするため不採用） */
#grain{
  position:fixed;z-index:50;pointer-events:none;
  top:-60px;left:-60px;width:calc(100% + 120px);height:calc(100% + 120px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.62'/%3E%3C/svg%3E");
  background-repeat:repeat;
  /* .12/.8s から微弱化(2026-08-18): 明滅感の指摘を受けノイズの濃度とテンポを抑制。
     フィルムの質感は維持する */
  opacity:.07;
  mix-blend-mode:overlay;   /* iOS で重い場合: mix-blend-mode を外す */
  will-change:transform;
  animation:grainShift 1.2s steps(1) infinite;
}
@keyframes grainShift{
  0%  {transform:translate3d(0,0,0)}
  12% {transform:translate3d(-9px,5px,0)}
  25% {transform:translate3d(7px,-11px,0)}
  37% {transform:translate3d(-13px,-6px,0)}
  50% {transform:translate3d(11px,9px,0)}
  62% {transform:translate3d(-5px,13px,0)}
  75% {transform:translate3d(13px,-4px,0)}
  87% {transform:translate3d(-7px,-13px,0)}
  100%{transform:translate3d(0,0,0)}
}
/* #flicker(映写機の白フラッシュ)は削除済み: 全画面の明滅が「チカチカする」との
   指摘で除去(2026-08-18)。光過敏への配慮も兼ねる。復活させないこと */
#dust{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
#dust span{
  position:absolute;bottom:-12px;
  left:var(--dl);
  width:var(--ds);height:var(--ds);
  border-radius:50%;
  background:var(--t-particle);
  opacity:0;
  animation:dustRise var(--dd) linear infinite;
  animation-delay:calc(var(--dy) * -1s);
  transition:background-color .8s ease;
}
@keyframes dustRise{
  0%  {opacity:0;transform:translate3d(0,0,0)}
  8%  {opacity:.65}
  85% {opacity:.35}
  100%{opacity:0;transform:translate3d(var(--dx),-102vh,0)}
}

/* --------------------------------------------------------------------------
   5. Loader (フレーム連番が存在するときのみ表示)
   -------------------------------------------------------------------------- */
#loader{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--t-bg-0);
  opacity:0;visibility:hidden;
  transition:opacity .6s ease,visibility .6s ease;
}
#loader.is-on{opacity:1;visibility:visible}
#loader .ld-mark{
  font-family:var(--font-heading);
  font-size:clamp(2rem,7vw,3.6rem);letter-spacing:.14em;
  color:var(--t-text);
}
#loader .ld-bar{
  width:min(320px,62vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden;
}
#loader .ld-bar i{display:block;height:100%;width:0%;background:var(--t-muted)}
#loader .ld-num{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.34em;color:var(--t-muted);
}

/* --------------------------------------------------------------------------
   6. main / shared
   -------------------------------------------------------------------------- */
main{position:relative;z-index:2}

.eyebrow{
  font-family:var(--font-display);
  font-size:clamp(.56rem,1.1vw,.7rem);
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--t-muted);
  transition:color .8s ease;
}
.pill{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.62em 1.35em;border-radius:999px;
  border:1px solid var(--t-line);
  background:var(--t-pill);
  font-family:var(--font-display);
  font-size:clamp(.56rem,1vw,.68rem);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--t-text);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:border-color .35s ease,background-color .35s ease,color .35s ease,box-shadow .35s ease;
}
.pill:hover{
  border-color:var(--t-accent);
  color:var(--t-accent);
  box-shadow:0 0 22px -6px var(--t-accent);
}
.pill .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--t-accent);
  box-shadow:0 0 10px var(--t-accent);
  transition:background-color .8s ease,box-shadow .8s ease;
}
/* ---- SOUND ボタン（#btn-sound）: .pill を流用し、再生中だけ控えめに発光 ----
   ・グローバル :focus-visible は border-radius:2px なので、pill 形状に合わせて上書き
   ・.is-active のドット明滅は「動き」なので reduced-motion で止める
     （音を鳴らすか否かの判定には prefers-reduced-motion を一切使わない） */
#btn-sound:focus-visible{border-radius:999px;outline-offset:4px}
#btn-sound.is-active{
  border-color:var(--t-accent);
  color:var(--t-accent);
  box-shadow:0 0 20px -8px var(--t-accent);
}
#btn-sound.is-active .dot{animation:soundPulse 2.6s ease-in-out infinite}
@keyframes soundPulse{
  0%,100%{opacity:.5;box-shadow:0 0 7px var(--t-accent)}
  50%    {opacity:1; box-shadow:0 0 15px var(--t-accent)}
}
@media (prefers-reduced-motion: reduce){
  #btn-sound.is-active .dot{animation:none;opacity:1}
}
#btn-sound[disabled]{opacity:.42;cursor:not-allowed}
#btn-sound[disabled]:hover{border-color:var(--t-line);color:var(--t-text);box-shadow:none}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
#hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;      /* iOS: 読み込み時（バー展開時）にファーストビューが収まる静的単位 */
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:calc(var(--pad) + 6px) var(--pad) var(--pad);
}

/* ---- sky : style.css 273-520 からの移植＋強化 ---- */
.hero-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stars{position:absolute;inset:0;pointer-events:none}
.stars-small{
  background-image:
    radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 20% 50%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 30% 30%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 50% 10%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 60% 40%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 80% 25%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 90% 60%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 15% 85%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 25% 15%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 35% 55%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 45% 90%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 55% 35%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 65% 5%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 75% 65%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 85% 45%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 95% 75%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 5% 62%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 68% 22%,rgba(255,255,255,.65),transparent);
  animation:twinkle 4s ease-in-out infinite;
}
.stars-medium{
  background-image:
    radial-gradient(1.5px 1.5px at 5% 45%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.5px 1.5px at 18% 70%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 33% 20%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.5px 1.5px at 48% 55%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.5px 1.5px at 63% 85%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.5px 1.5px at 78% 15%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 88% 50%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.5px 1.5px at 12% 35%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.5px 1.5px at 42% 8%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.5px 1.5px at 96% 30%,rgba(255,255,255,.65),transparent);
  animation:twinkle 5s ease-in-out infinite;
  animation-delay:1s;
}
.stars-large{
  background-image:
    radial-gradient(2px 2px at 8% 12%,rgba(255,255,255,1),transparent),
    radial-gradient(2px 2px at 28% 78%,rgba(255,255,255,.9),transparent),
    radial-gradient(2px 2px at 52% 42%,rgba(255,255,255,.9),transparent),
    radial-gradient(2px 2px at 72% 8%,rgba(123,97,255,.8),transparent),
    radial-gradient(2px 2px at 92% 68%,rgba(255,255,255,1),transparent),
    radial-gradient(2.5px 2.5px at 16% 58%,rgba(0,245,212,.7),transparent);
  animation:twinkle 6s ease-in-out infinite;
  animation-delay:2s;
}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:1}}

.shooting-star{
  position:absolute;width:110px;height:2px;border-radius:50%;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1),rgba(0,245,212,.8));
  opacity:0;transform:rotate(-45deg);z-index:2;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.65));
}
.ss-1{top:15%;left:10%;animation:shootingStar 8s ease-in-out infinite}
.ss-2{top:25%;left:60%;animation:shootingStar 10s ease-in-out infinite;animation-delay:3s}
.ss-3{top:8%;left:35%;animation:shootingStar 12s ease-in-out infinite;animation-delay:6s}
.ss-4{top:46%;left:78%;animation:shootingStar 9s ease-in-out infinite;animation-delay:4.5s}
@keyframes shootingStar{
  0%{opacity:0;transform:rotate(-45deg) translateX(0)}
  1%{opacity:1}
  3%{opacity:1;transform:rotate(-45deg) translateX(320px)}
  4%,100%{opacity:0;transform:rotate(-45deg) translateX(320px)}
}

.moon{
  position:absolute;top:11%;left:23%;
  width:110px;height:110px;border-radius:50%;
  transform:translateX(-50%);
  opacity:.72;z-index:1;
  background:radial-gradient(circle at 35% 35%,#fffde8,#f5f5dc 40%,#e8e8d0 60%,#d4d4c0);
  box-shadow:
    0 0 24px rgba(255,253,232,.32),
    0 0 70px rgba(255,253,232,.2),
    0 0 120px rgba(255,253,232,.1),
    inset -15px -10px 30px rgba(0,0,0,.15);
}
/* box-shadow の無限アニメは常時ペイントを起こすため、輝度の脈動を opacity で近似する */
.moon-glow{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:
    0 0 34px rgba(255,253,232,.42),
    0 0 90px rgba(255,253,232,.26),
    0 0 140px rgba(255,253,232,.16);
  opacity:0;
  animation:moonGlowFade 8s ease-in-out infinite alternate;
}
@keyframes moonGlowFade{0%{opacity:0}100%{opacity:1}}
.moon::before{
  content:'';position:absolute;top:20%;left:25%;
  width:26px;height:26px;border-radius:50%;
  background:rgba(180,180,160,.3);
  box-shadow:
    42px 32px 0 8px rgba(180,180,160,.2),
    16px 52px 0 5px rgba(180,180,160,.25),
    58px 11px 0 3px rgba(180,180,160,.2);
}
/* 血月レイヤー（グラデはtransition不可 → opacityクロスフェード） */
.moon::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe8e0,#ffa892 42%,#d6503c 72%,#8e2418);
  opacity:var(--t-moon-red);
  transition:opacity .8s ease;
}
.grid-overlay{
  position:absolute;inset:-60px 0 0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:60px 60px;
  animation:gridMove 20s linear infinite;
}
@keyframes gridMove{0%{transform:translateY(0)}100%{transform:translateY(60px)}}
.horizon{
  position:absolute;left:0;right:0;bottom:0;height:36vh;
  background:linear-gradient(to top,var(--t-bg-0) 8%,transparent 100%);
  transition:background .8s ease;
}

/* ---- hero top bar ---- */
.hero-top{
  position:relative;z-index:6;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.72rem,1.4vw,.92rem);letter-spacing:.2em;
}
.brand .bar{width:26px;height:2px;background:var(--t-muted);box-shadow:0 0 12px rgba(173,181,196,.28)}
.hero-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--t-line);
  background:var(--t-pill);
  transition:border-color .3s ease,color .3s ease,transform .3s ease;
}
.icon-btn:hover{border-color:var(--t-accent);color:var(--t-accent);transform:translateY(-2px)}
.icon-btn svg{width:17px;height:17px}

/* ---- hero stage ---- */
.hero-stage{
  position:relative;z-index:4;
  flex:1;
  display:flex;align-items:center;justify-content:center;
  min-height:min(64vh,620px);
}
/* GSAP が yPercent を動かすため translate(-50%) は使わず flex で中央寄せ */
.giant-type{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  z-index:1;pointer-events:none;
  font-family:var(--font-heading);
  font-size:clamp(4.2rem,17vw,17rem);
  line-height:.86;letter-spacing:.02em;
  color:var(--t-title);
  text-shadow:0 0 70px var(--t-title-glow);
  white-space:nowrap;
  transition:color .8s ease,text-shadow .8s ease;
}
.giant-type .w{display:inline-block}
.giant-type .flip{display:inline-block;transform:scaleX(-1)}

.hero-char-wrap{
  position:relative;z-index:2;
  width:clamp(320px,38vw,560px);
  display:flex;align-items:center;justify-content:center;
}
/* 呼吸ループはSVG内部transformを避け、この専用ラッパー(HTML要素)に対して行う。
   フィルター21要素入りのサブツリーを毎フレーム再ラスタライズさせないための分離。 */
.char-breathe{position:relative;z-index:2;width:100%;transform-origin:50% 100%;will-change:transform}
.char-svg{display:block;width:100%;height:auto;overflow:visible;position:relative;z-index:2}
/* 頭部背後グロー: feGaussianBlur(stdDeviation 52 / 最重量) を CSS グラデ div に置換。
   テーマ連動は2枚 opacity クロスフェード（gradient stop は transition 不可のため） */
.backglow-anchor{
  position:absolute;left:50%;top:36.3%;
  width:86%;height:78%;
  transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
}
.backglow-core{display:block;position:relative;width:100%;height:100%}
.backglow-core i{position:absolute;inset:0;border-radius:50%;transition:opacity .8s ease}
.bg-moon{background:radial-gradient(closest-side,rgba(0,245,212,.46),rgba(0,245,212,.2) 44%,rgba(0,245,212,0) 74%);opacity:1}
.bg-red{background:radial-gradient(closest-side,rgba(245,225,0,.58),rgba(245,225,0,.24) 44%,rgba(245,225,0,0) 74%);opacity:0}
html[data-theme="red"] .bg-moon{opacity:0}
html[data-theme="red"] .bg-red{opacity:1}
/* 三日月リング: SVG内部transformを毎フレーム変えないようキャラSVGの外に出し、
   HTML要素(span)として回転させる（コンポジタ完結）。位置・寸法は%指定でキャラと同期。 */
.emblem-anchor{
  position:absolute;left:84.8%;top:36.83%;
  width:25.2%;height:21%;
  transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;
}
.emblem-spin{display:block;width:100%;height:100%}
.emblem-svg{display:block;width:100%;height:100%;overflow:visible}
.burst{position:absolute;left:50%;top:42%;width:2px;height:2px;z-index:4;pointer-events:none}
.burst i{
  position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--t-muted);
  box-shadow:0 0 14px var(--t-muted);
  opacity:0;
}

/* ---- corner copy ---- */
.corner{
  position:absolute;z-index:5;
  font-family:var(--font-display);
  font-size:clamp(.5rem,.95vw,.64rem);
  letter-spacing:.26em;color:var(--t-dim);
  line-height:1.9;pointer-events:none;
  transition:color .8s ease;
}
.corner--l{left:var(--pad);top:0;bottom:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:mixed}
.corner--c{left:0;right:0;top:11%;text-align:center;color:var(--t-muted)}

/* ---- hero bottom ---- */
.hero-bottom{
  position:relative;z-index:6;
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding-top:10px;
}
#theme-switch{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.68em 1.3em;border-radius:999px;
  border:1px solid var(--t-line);
  background:var(--t-pill);
  font-family:var(--font-display);
  font-size:clamp(.52rem,.95vw,.66rem);
  letter-spacing:.2em;
  color:var(--t-text);
  transition:border-color .35s ease,color .35s ease,box-shadow .35s ease,background-color .8s ease;
}
#theme-switch:hover{border-color:var(--t-muted);color:var(--t-muted);box-shadow:0 0 26px -8px var(--t-muted)}
#theme-switch kbd{
  font-family:var(--font-display);font-size:.92em;
  padding:.15em .5em;border-radius:4px;
  border:1px solid var(--t-line);
  background:rgba(255,255,255,.06);
}
#theme-switch .led{
  width:7px;height:7px;border-radius:50%;
  background:var(--t-accent);box-shadow:0 0 10px var(--t-accent);
  transition:background-color .8s ease,box-shadow .8s ease;
}
.scroll-wrap{position:absolute;left:0;right:0;bottom:98px;display:flex;justify-content:center;z-index:6;pointer-events:none}
.scroll-ind{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:.52rem;letter-spacing:.32em;color:var(--t-dim);
}
.scroll-ind .mouse{width:20px;height:32px;border:1px solid var(--t-dim);border-radius:11px;position:relative}
.scroll-ind .mouse i{
  position:absolute;left:50%;top:6px;width:2px;height:7px;margin-left:-1px;border-radius:2px;
  background:var(--t-accent);
  animation:wheelDot 1.9s ease-in-out infinite;
}
@keyframes wheelDot{0%{transform:translateY(0);opacity:0}14%{opacity:1}72%,100%{transform:translateY(13px);opacity:0}}
.hero-bottom .end{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}

/* --------------------------------------------------------------------------
   8. SEQUENCE section (pin 対象。内側に position:fixed は絶対に置かない)
   -------------------------------------------------------------------------- */
#seq{
  position:relative;
  /* pin 区間中にツールバー開閉で高さが動くと ignoreMobileResize と噛み合わないため静的単位 */
  height:100vh;height:100lvh;
  overflow:hidden;
}
.seq-sky{
  position:absolute;inset:-10% 0;z-index:0;pointer-events:none;
  opacity:.8;
}
#seq-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  display:none;will-change:transform;
}
#seq-canvas.is-on{display:block}
/* GSAP が transform を上書きするため、センタリングは親の flex で行う
   （stage 自身に translate(-50%) を書くと scale アニメで消える） */
#seq-stage-wrap{
  visibility:hidden;
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#seq-char-stage{
  position:relative;                 /* クローンした backglow / emblem の位置基準 */
  width:clamp(300px,34vw,520px);
  max-width:82vw;
}
#seq-char-stage>svg{width:100%;height:auto;overflow:visible}
.seq-tint{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-color:var(--t-media-tint);
  mix-blend-mode:color;
  transition:background-color .8s ease;
}
.seq-cap{
  position:absolute;z-index:3;left:var(--pad);
  max-width:min(420px,62vw);
}
.seq-cap--1{top:22%}
.seq-cap--2{bottom:20%;left:auto;right:var(--pad);text-align:right}
.seq-cap h2{
  font-family:var(--font-heading);
  font-size:clamp(1.9rem,5.2vw,4.2rem);
  line-height:.98;letter-spacing:.03em;
  color:var(--t-text);
  text-shadow:0 0 40px rgba(0,0,0,.7);
}
.seq-cap p{
  margin-top:.9em;font-size:clamp(.76rem,1.4vw,.92rem);
  color:var(--t-muted);line-height:1.9;
  text-shadow:0 0 24px rgba(0,0,0,.8);
}
.seq-frame{
  position:absolute;inset:var(--pad);z-index:3;pointer-events:none;
  border:1px solid var(--t-line);
}
.seq-frame span{position:absolute;width:14px;height:14px;border:1px solid var(--t-accent);transition:border-color .8s ease}
.seq-frame span:nth-child(1){left:-1px;top:-1px;border-right:0;border-bottom:0}
.seq-frame span:nth-child(2){right:-1px;top:-1px;border-left:0;border-bottom:0}
.seq-frame span:nth-child(3){left:-1px;bottom:-1px;border-right:0;border-top:0}
.seq-frame span:nth-child(4){right:-1px;bottom:-1px;border-left:0;border-top:0}
.seq-meta{
  position:absolute;left:50%;bottom:calc(var(--pad) + 22px);
  transform:translateX(-50%);z-index:3;
  font-family:var(--font-display);font-size:.52rem;letter-spacing:.32em;
  color:var(--t-dim);white-space:nowrap;
}

/* ヒーローの和文タグライン（corner--c の2行目） */
.corner-ja{
  display:block;margin-top:.7em;
  font-family:var(--font-body);font-weight:400;
  font-size:.9em;letter-spacing:.32em;
  color:var(--t-muted);
  transition:color .8s ease;
}

/* --------------------------------------------------------------------------
   11c. INDEX overlay（全画面。z-index 60番台 = vignette49/grain50 より上・loader200 より下）
        ・body 直下に置く（#seq の pin 区間内には絶対に置かない）
        ・開閉は CSS transition（GSAP 非依存）。GSAP があれば項目 stagger を上乗せ
   -------------------------------------------------------------------------- */
.idx{
  position:fixed;inset:0;z-index:62;
  background:rgba(2,4,12,.92);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  opacity:0;visibility:hidden;pointer-events:none;
  /* 閉じるときだけ visibility をフェード後に落とす（フェードアウトを見せるため） */
  transition:opacity .42s ease,visibility 0s linear .42s,background-color .8s ease;
}
html[data-theme="red"] .idx{background:rgba(18,1,7,.93)}
/* 開くときは visibility を transition 対象に「列挙しない」= 即座に visible になる。
   （列挙すると progress 0 の1フレームだけ hidden のままになり、open 直後の focus() が黙って弾かれる。
     reduced-motion の *{transition-duration:.01ms!important} はこの列挙漏れを上書きできないので、
     プロパティ側で外しておくのが唯一の確実な回避策） */
.idx.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .42s ease,background-color .8s ease;
}
/* オーバーレイ自身のフィルムグレイン（#grain は z50 のため overlay の下に潜る） */
.idx-grain{
  position:absolute;top:-60px;left:-60px;
  width:calc(100% + 120px);height:calc(100% + 120px);
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.62'/%3E%3C/svg%3E");
  background-repeat:repeat;
  opacity:.06;
  mix-blend-mode:overlay;
  will-change:transform;
  animation:grainShift 1.2s steps(1) infinite;
}
.idx-scroll{
  position:absolute;inset:0;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.idx-inner{
  max-width:var(--container);margin:0 auto;
  padding:clamp(26px,5vh,54px) var(--pad) clamp(44px,7vh,84px);
}
.idx-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:clamp(18px,2.6vw,32px);
  border-bottom:1px solid var(--t-line);
  margin-bottom:clamp(26px,3.6vw,48px);
  transition:border-color .8s ease;
}
.idx-title{
  font-family:var(--font-heading);
  font-size:clamp(2.4rem,7vw,5.4rem);
  line-height:.9;letter-spacing:.03em;
  color:var(--t-text);
  transition:color .8s ease;
}
.idx-title em{font-style:normal;color:var(--t-accent);transition:color .8s ease}
.idx-close{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.6em 1.2em;border-radius:999px;
  border:1px solid var(--t-line);
  background:var(--t-pill);
  font-family:var(--font-display);font-size:.58rem;letter-spacing:.22em;
  color:var(--t-text);
  transition:border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.idx-close:hover{border-color:var(--t-muted);color:var(--t-muted);box-shadow:0 0 24px -8px var(--t-muted)}
.idx-cols{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:clamp(26px,3.4vw,58px);
  align-items:start;
}
.idx-group h3{
  font-family:var(--font-display);font-weight:700;
  font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--t-dim);
  margin-bottom:clamp(10px,1.4vw,18px);
  transition:color .8s ease;
}
.idx-item{
  position:relative;
  display:flex;align-items:baseline;gap:.85em;
  padding:.5em 0;
  border-bottom:1px solid var(--t-line);
  /* translate なら hover 移動でレイアウトを起こさず、GSAP の transform とも衝突しない */
  transition:translate .35s cubic-bezier(.16,1,.3,1),border-color .35s ease;
}
.idx-item .n{
  flex:0 0 auto;
  font-family:var(--font-display);font-size:.54rem;letter-spacing:.22em;
  color:var(--t-dim);
  transition:color .3s ease;
}
.idx-item .en{
  font-family:var(--font-heading);
  font-size:clamp(1.2rem,2.3vw,1.95rem);
  line-height:1.02;letter-spacing:.045em;
  color:var(--t-text);
  transition:color .3s ease,text-shadow .3s ease;
}
.idx-item .ja{
  margin-left:auto;text-align:right;
  font-size:clamp(.66rem,.95vw,.76rem);letter-spacing:.06em;
  color:var(--t-muted);
  transition:color .3s ease;
}
.idx-item:hover,.idx-item:focus-visible{
  translate:6px 0;
  border-color:rgba(173,181,196,.45);
}
.idx-item:hover .en,.idx-item:focus-visible .en{
  color:var(--t-muted);
  text-shadow:0 0 22px rgba(173,181,196,.6);
}
.idx-item:hover .n,.idx-item:hover .ja,
.idx-item:focus-visible .n,.idx-item:focus-visible .ja{color:var(--t-muted)}
.idx-note{
  margin-top:16px;
  font-size:.7rem;line-height:1.95;color:var(--t-muted);
  transition:color .8s ease;
}
.idx-sns{display:flex;gap:12px;margin-top:18px}
.idx-sns a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--t-line);color:var(--t-muted);
  transition:border-color .3s ease,color .3s ease,translate .3s ease;
}
.idx-sns a:hover{border-color:var(--t-muted);color:var(--t-muted);translate:0 -2px}
.idx-sns svg{width:16px;height:16px}

/* ヘッダー右端の INDEX ボタン（ハンバーガー） */
.pill--menu .mn{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:13px}
.pill--menu .mn i{display:block;height:1.5px;background:currentColor;border-radius:2px}
.pill--menu .mn i:nth-child(2){width:70%}

/* 背景スクロールロック（body の overflow はビューポートへ伝播する） */
body.idx-locked{overflow:hidden}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1360px){
  .biz-grid{gap:8px}
  .biz-card{padding:14px;min-height:270px}
}
@media (max-width:1199px){
  .chal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .idx-cols{grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
  .idx-group--services{grid-column:1 / -1}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-col--brand{grid-column:1 / -1}
  /* 横スクロール + scroll-snap */
  .biz-scroller{
    padding:0;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .biz-scroller::-webkit-scrollbar{display:none}
  .biz-grid{
    display:flex;gap:14px;
    padding:0 var(--pad);
    width:max-content;
  }
  .biz-card{width:72vw;max-width:340px;flex:0 0 auto;scroll-snap-align:center;min-height:330px}
}
@media (max-width:900px){
  .corner--l{display:none}
  .hero-nav{gap:8px}
  .giant-type{font-size:clamp(3.4rem,15vw,8rem);white-space:normal;line-height:.92}
  .seq-cap--2{left:var(--pad);right:auto;text-align:left}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fde-steps{grid-template-columns:1fr}
  .pillar-grid{grid-template-columns:1fr}
  .rm-detail{grid-template-columns:1fr}
  .svc-list{grid-template-columns:1fr}
  .uc-list{grid-template-columns:1fr}
}
@media (max-width:680px){
  .hero-top{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-nav{justify-content:flex-start}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .hero-bottom .end{align-items:flex-start;text-align:left}
  .scroll-wrap{display:none}
  .hero-char-wrap{width:min(78vw,360px)}
  /* 縦積みでは絶対配置をやめてナビ直下に流し込む */
  .corner--c{position:static;text-align:left;margin:10px 0 0;font-size:.5rem;letter-spacing:.22em}
  .moon{width:78px;height:78px;top:19%;left:16%}
  .moon::before{width:18px;height:18px;box-shadow:28px 22px 0 5px rgba(180,180,160,.2),11px 36px 0 3px rgba(180,180,160,.25),40px 8px 0 2px rgba(180,180,160,.2)}
  .shooting-star{width:68px}
  .foot-in{grid-template-columns:1fr;gap:30px}
  .biz-head{flex-direction:column;align-items:flex-start}
  .news-head{flex-direction:column;align-items:flex-start}
  .news-grid{grid-template-columns:1fr;gap:16px}
  .news-card{aspect-ratio:auto;min-height:190px}
  .news-card::before{left:22px;translate:0 0}
  .idx-cols{grid-template-columns:1fr;gap:28px}
  .idx-group--services{grid-column:auto}
  .idx-item .ja{margin-left:.7em;text-align:left}
  .idx-item{flex-wrap:wrap}
  .chal-grid{grid-template-columns:1fr}
  .chal-head,.rm-head-sec,.uc-head,.faq-head{flex-direction:column;align-items:flex-start}
  .chal-closing{text-align:left}
  /* 原文の改行位置は広い画面向け。狭い画面では <br> を無効化して自然に流す
     （#statement と同じ扱い。テキスト自体は1文字も変えない） */
  .fde-body p br,.step-body br,.pillar-body br,.pillar-note-body br,
  .chal-closing br,.rm-intro br{display:none}
  .btn-fde,.btn-roadmap{width:100%}
}


/* --------------------------------------------------------------------------
   12b. Character SVG（クローン側にも効くようクラスで指定。ID接頭辞の影響を受けない）
   -------------------------------------------------------------------------- */
.c-rim{mix-blend-mode:screen;transition:opacity .8s ease}
.c-rim--moon{opacity:1}
.c-rim--red{opacity:0}
html[data-theme="red"] .c-rim--moon{opacity:0}
html[data-theme="red"] .c-rim--red{opacity:1}
.c-xstroke{fill:#f6f4ef;opacity:.96}
.c-wm{font-family:var(--font-heading);font-weight:400}
/* seq 側クローンの頭部は scrub 中しか動かないため昇格させない（常時レイヤーを抱えない） */
#char-head{will-change:transform}

/* --------------------------------------------------------------------------
   12c. 3D character（GLB / phantom-dj）
        ・.char-zoom = イントロ(scale/alpha)専用ラッパー。呼吸(.char-breathe)と
          ターゲットを分けて GSAP の transform 衝突を避ける
        ・#char3d は SVG の上に絶対配置。SVG が layout box を提供し続ける
        ・GLB 失敗 / 旧ブラウザ / ?nochar3d=1 では SVG 胸像がそのまま残る
   -------------------------------------------------------------------------- */
.char-zoom{position:relative;z-index:2;width:100%}
#char3d{display:none;position:absolute;inset:0;z-index:2}
#char3d.is-on{display:block}
#char3d canvas{display:block;width:100%;height:100%}
/* 3D 有効時: SVG は不可視（inline style を使わない = GSAP clearProps の影響を受けない） */
/* SVG remains a layout box; rendering is exclusive and independent of GSAP. */
html[data-char-state="pending"] #cucul-char,
html[data-char-state="ready"] #cucul-char,
html[data-char-svg="seq"] #cucul-char { visibility:hidden; }
html[data-char-state="fallback"][data-char-svg="seq"] #seq-stage-wrap { visibility:visible; }
.hero-char-wrap.is-3d #cucul-char{visibility:hidden}
/* 全身キャラ向けにグロー / リング / ヒット領域を再配置（後着スワップ時に滑らかに移動） */
.backglow-anchor,.emblem-anchor{transition:top .6s ease,left .6s ease,width .6s ease,height .6s ease}
.hero-char-wrap.is-3d .backglow-anchor{top:46%;width:108%;height:88%}
.hero-char-wrap.is-3d .emblem-anchor{left:73%;top:15%;width:19%;height:15.8%}
/* seq 区間の 3D ステージ（pin 中に #char3d を再親付けして全画面化） */
#seq-3d{position:absolute;inset:0;z-index:1;display:none;pointer-events:none}
#seq-3d.is-on{display:block}
#seq-3d #char3d{position:absolute;inset:0}

/* --------------------------------------------------------------------------
   13. reduced-motion（CSS側の全打ち消し = JS側 matchMedia との二重防御）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  #grain{animation:none;opacity:.06}
  .idx-grain{animation:none;opacity:.05}
  /* 閉じるときの visibility 遅延(.42s)も消す（透明のまま .42s タブ順に残るのを防ぐ） */
  .idx{transition-delay:0s}
  /* reduce では *{transition-duration:.01ms!important} が効くため、既定の
     transition-property:all と噛み合って「親から継承した visibility」まで補間対象になり、
     開いた直後の1フレーム子孫が hidden のまま残る＝ focus() が黙って弾かれる。
     オーバーレイ配下は transition 自体を切って即座に visible を伝播させる。 */
  .idx,.idx *{transition-property:none!important}
  #dust{display:none}
  .shooting-star{display:none}
  .grid-overlay{animation:none}
  .badge{animation:none}
  .moon-glow,.badge::after{animation:none;opacity:0}
  #seq{height:auto;min-height:0;padding:clamp(70px,10vw,120px) 0}
  #seq-stage-wrap{position:relative;inset:auto;height:auto}
  html[data-char-state="pending"] #seq-stage-wrap,
  html[data-char-state="ready"] #seq-stage-wrap{display:none}
  .seq-sky{display:none}
  .seq-cap{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0 auto;max-width:min(720px,88vw);padding:0 var(--pad);text-align:left}
  .seq-cap--2{margin-top:2.2em;text-align:left}
  .seq-frame,.seq-meta{display:none}
}

/* GSAP CDN 失敗時: CSS 初期状態は「可視」なのでそのまま読める */