/* ============================================================
   共鳴楽団 ASII∞ — Teaser Site Stylesheet
   Design: Dark fantasy / theatrical / golden accent
============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --bg-base:        #030610;
  --bg-dark:        #060a1a;
  --bg-mid:         #0a0d1f;
  --bg-section:     #08091a;

  --gold:           #d4af37;
  --gold-light:     #f0d060;
  --gold-dim:       rgba(212,175,55,0.4);
  --gold-border:    rgba(212,175,55,0.25);
  --gold-glow:      rgba(212,175,55,0.15);

  --text-primary:   #e8dfc8;
  --text-secondary: #b8a98a;
  --text-dim:       #7a6e5a;

  --blue-glow:      rgba(60,120,255,0.6);
  --green-glow:     rgba(30,200,100,0.55);
  --purple-glow:    rgba(140,60,220,0.6);

  --asteria-color:  #3c78ff;
  --elfiria-color:  #1ec864;
  --felis-color:    #8c3cdc;

  --font-serif-jp:  'Noto Serif JP', serif;
  --font-sans-jp:   'Noto Sans JP', sans-serif;
  --font-cinzel:    'Cinzel', serif;
  --font-cormorant: 'Cormorant Garamond', serif;

  --section-pad:    100px 0;
  --container-max:  1160px;
  --border-gold:    1px solid var(--gold-border);
}

/* ============================================================
   タイポグラフィ等級（elengine.co.jp を参考）
   ・本文は最低でも 15〜16px を確保し、モバイルでも視認性を高く保つ。
   ・本文 weight を 300→400 に引き上げ、はっきり読めるグレードに。
   ・見出しは本文に比例して大きく・太く（hierarchyを維持）。
   ・clamp() の最小値（=スマホ時の値）を底上げするのが要点。
   ------------------------------------------------------------
   本文系トークン（用途別の clamp）:
     --fs-body      : 標準本文     min 15px / max 17px
     --fs-body-sm   : 補助本文     min 14px / max 15.5px
     --fs-body-lead : リード本文   min 16px / max 18px
   ============================================================ */
:root {
  --fs-body:      clamp(0.95rem, 1.6vw, 1.06rem);   /* 約 15.2 → 17px */
  --fs-body-sm:   clamp(0.9rem, 1.4vw, 0.97rem);    /* 約 14.4 → 15.5px */
  --fs-body-lead: clamp(1.0rem, 1.8vw, 1.13rem);    /* 約 16 → 18px */
  --lh-body:      1.95;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans-jp);
  font-weight: 400;        /* 300→400：本文をはっきり読めるグレードに */
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .25s; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ============================================================
   文節改行（全画面幅で共通）
   ・各文節を .ph（inline-block）で囲み、文節の途中では改行させず
     「文節の境界」でのみ折り返す（PC/タブレット/スマホ共通）。
   ・改行後の行だけでも意味が通る可変改行になる。
   ============================================================ */
.ph {
  display: inline-block;      /* 文節の途中で改行させない */
}

/* 文節を含む本文は、文節境界でのみ折り返す（全幅で適用） */
.hero-sub, .hero-desc,
.teaser-lead, .teaser-body,
.first-night-text p,
.about-body,
.section-subtitle,
.follow-banner-title,
.creator-lead, .creator-tagline, .creator-bio,
.world-card-desc,
.worlds-lead-p {
  word-break: keep-all;       /* 単語(文節)の途中で切らない */
  overflow-wrap: break-word;  /* どうしても入りきらない場合のみ折返し */
}

/* ---------- Star Canvas ---------- */
#star-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

/* ---------- Container ---------- */
.container {
  width: 90%;
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ---------- Section Block ---------- */
.section-block {
  position: relative;
  padding: var(--section-pad);
  z-index: 1;
}

/* ---------- Utility ---------- */
.cinzel { font-family: var(--font-cinzel), serif; letter-spacing: .1em; }

/* ============================================================
   HEADER
============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  padding: 18px 0;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s, padding .3s;
}

#site-header.scrolled {
  background: rgba(3,6,16,0.92);
  backdrop-filter: blur(12px);
  border-color: var(--gold-border);
  padding: 12px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.site-logo {
  font-family: var(--font-cinzel);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(212,175,55,.5);
  white-space: nowrap;
  z-index: 2;
}

.site-nav ul {
  display: flex;
  gap: 36px;
}

.site-nav ul li a {
  font-family: var(--font-cinzel);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--text-secondary);
  transition: color .25s, text-shadow .25s;
}

.site-nav ul li a:hover {
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-dim);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 110;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--gold);
  transition: transform .3s, opacity .3s;
}

.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO
============================================================ */
/* ============================================================
   HERO — 背景動画フル全面 + 重ね合わせUI
   ・動画は position:absolute で全画面 cover
   ・読み込み前は背景色(#050510) + poster を表示
   ・再生開始で .is-playing が付与され opacity 0→1 でフェードイン
============================================================ */
.section-hero,
.hero-container {
  position: relative;
  width: 100%;
  height: 100vh;
  /* iOS等のアドレスバー考慮で dvh も指定（対応ブラウザのみ適用） */
  height: 100dvh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* コンテンツを下部（Scrollインジケーターの真上）に寄せる */
  justify-content: flex-end;
  text-align: center;
  overflow: hidden;
  padding: 0;
  /* 動画読み込み前のブランドカラー（LCP対策） */
  background-color: #050510;
}

/* ---------- 背景動画本体 ---------- */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  /* 画面いっぱい・縦横比維持・スマホ時も中央トリミング */
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0;               /* 初期は非表示（poster/背景色のみ） */
  transition: opacity 0.9s ease;
  pointer-events: none;     /* UI操作を妨げない（音声無し背景動画） */
  background-color: #050510;
}

/* JSで再生開始した瞬間にフェードイン */
.hero-video.is-playing {
  opacity: 1;
}

/* ---------- 黒のグラデーションマスク（文字視認性確保） ---------- */
.hero-overlay {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* 上下からの黒マスク（要件のグラデーション） */
    linear-gradient(to bottom, rgba(5,5,16,0.45) 0%, rgba(5,5,16,0.30) 35%, rgba(5,5,16,0.62) 100%),
    /* 中央を少し明るく残しつつ縁を締める（ブランド演出） */
    radial-gradient(ellipse 70% 75% at 50% 48%, rgba(5,5,16,0) 0%, rgba(5,5,16,0.35) 100%),
    radial-gradient(ellipse 100% 60% at 20% 50%, rgba(30,60,200,.10) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 80% 50%, rgba(120,40,220,.10) 0%, transparent 60%);
}

.curtain {
  position: absolute;
  top: 0;
  width: 22%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.curtain-left {
  left: 0;
  background: linear-gradient(90deg, rgba(2,4,12,1) 0%, rgba(10,10,30,.7) 50%, transparent 100%);
}

.curtain-right {
  right: 0;
  background: linear-gradient(270deg, rgba(2,4,12,1) 0%, rgba(10,10,30,.7) 50%, transparent 100%);
}

.light-beam {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 65%;
  filter: blur(18px);
  opacity: .45;
  z-index: 3;
  animation: beamPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
}

.beam-blue  { left: 32%;  background: linear-gradient(to top, var(--blue-glow), transparent);   animation-delay: 0s; }
.beam-green { left: 50%;  background: linear-gradient(to top, var(--green-glow), transparent);  animation-delay: 1.2s; }
.beam-purple{ left: 68%;  background: linear-gradient(to top, var(--purple-glow), transparent); animation-delay: 2.4s; }

@keyframes beamPulse {
  from { opacity: .35; height: 55%; }
  to   { opacity: .75; height: 70%; }
}

.hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* 下部はScrollインジケーター(bottom:32px + 高さ約56px)の真上に来るよう余白を確保 */
  padding: 32px 20px 120px;
  max-width: 800px;
  width: 100%;
  /* 動画の上に中央オーバーレイ表示 */
  animation: heroContentIn 1.2s ease both;
}

@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-emblem {
  width: 72px;
  height: 72px;
  animation: emblemRotate 20s linear infinite;
  opacity: .85;
}

.emblem-svg { width: 100%; height: 100%; }

@keyframes emblemRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-title {
  font-family: var(--font-cinzel);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(212,175,55,.6), 0 0 80px rgba(212,175,55,.2);
  line-height: 1.2;
}

.hero-catch {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.55rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: .14em;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}

.hero-sub {
  font-family: var(--font-serif-jp);
  font-size: clamp(.98rem, 1.9vw, 1.18rem);
  color: var(--text-secondary);
  letter-spacing: .1em;
}

.hero-desc {
  font-size: .82rem;
  /* 「三つの夜が、いま一つの響きになる。」(.hero-sub)と同じテキストカラー */
  color: var(--text-secondary);
  letter-spacing: .12em;
  border: var(--border-gold);
  padding: 6px 18px;
}

.hero-cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
  animation: scrollFade 2.5s ease-in-out infinite;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}

.scroll-text {
  font-family: var(--font-cinzel);
  font-size: .6rem;
  letter-spacing: .25em;
  color: var(--gold);
}

@keyframes scrollFade {
  0%,100% { opacity: .3; transform: translateX(-50%) translateY(0); }
  50%     { opacity: .8; transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-cinzel);
  font-size: .78rem;
  letter-spacing: .18em;
  padding: 13px 30px;
  border: 1px solid var(--gold-border);
  cursor: pointer;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--text-primary);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}

.btn:hover::before { opacity: 1; }

.btn-primary {
  background: rgba(212,175,55,.08);
  border-color: rgba(212,175,55,.6);
  color: var(--gold-light);
  text-shadow: 0 0 8px rgba(212,175,55,.4);
}

.btn-primary:hover {
  background: rgba(212,175,55,.18);
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(212,175,55,.25);
  color: var(--gold-light);
}

.btn-secondary {
  border-color: rgba(255,255,255,.2);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  border-color: var(--gold-dim);
  color: var(--text-primary);
}

.btn-outline {
  border-color: var(--gold-border);
  color: var(--gold);
  font-size: .75rem;
  padding: 12px 28px;
  letter-spacing: .2em;
}

.btn-outline:hover {
  border-color: var(--gold);
  background: rgba(212,175,55,.08);
  box-shadow: 0 0 16px var(--gold-glow);
}

.btn-world {
  font-size: .68rem;
  letter-spacing: .2em;
  padding: 10px 22px;
  border-color: rgba(212,175,55,.4);
  color: var(--gold);
  width: 100%;
  text-align: center;
}

.btn-world:hover {
  background: rgba(212,175,55,.12);
  border-color: var(--gold);
}

/* ============================================================
   SECTION HEADERS
============================================================ */
.section-header { margin-bottom: 48px; }
.section-header.center { text-align: center; }
.section-header.left-align { text-align: left; }

.section-title {
  font-family: var(--font-cinzel);
  font-size: clamp(1.95rem, 4.2vw, 2.85rem);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,175,55,.3);
  display: inline-block;
}

.title-deco {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.title-deco.center { justify-content: center; }
.title-deco.top-deco { margin-top: 0; margin-bottom: 12px; }

.deco-line {
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  max-width: 120px;
}

.deco-sym {
  color: var(--gold);
  font-size: .75rem;
  opacity: .7;
}

.section-subtitle {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  letter-spacing: .08em;
  margin-top: 16px;
}

/* ============================================================
   TEASER SECTION
============================================================ */
.section-teaser {
  background: var(--bg-dark);
  border-top: var(--border-gold);
  border-bottom: var(--border-gold);
}

.teaser-layout {
  /* 上：動画（全幅）／下：テキスト の縦並び */
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
}

.teaser-video-wrap {
  position: relative;
  background: #000;
  border: var(--border-gold);
  overflow: hidden;
  /* 元の表示領域（16:9）を確保（プレースホルダー基準で高さが決まる） */
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* --- 本編動画（再生ボタンで表示されるまで非表示）。ラッパー全面に表示 --- */
.teaser-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.teaser-video.is-hidden {
  display: none;
}

/* Poster placeholder（クリックで再生するボタン）。ラッパー全面に表示 */
.teaser-poster {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* button要素のリセット */
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  line-height: normal;
}

/* button化に伴う内部spanの表示保証 */
.teaser-poster .poster-bg {
  display: block;
}
.teaser-poster .poster-content {
  display: flex;
}
.teaser-poster .poster-logo-text {
  display: block;
}

.teaser-poster.is-hidden {
  display: none;
}

/* 再生ボタン（中央） */
.teaser-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.7);
  background: rgba(3,6,16,.55);
  color: var(--gold);
  font-size: 1.5rem;
  backdrop-filter: blur(2px);
  box-shadow: 0 0 24px rgba(212,175,55,.3);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.teaser-play-btn i { margin-left: 4px; }

/* 再生ボタンの脈動リング */
.teaser-play-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.35);
  animation: teaserPulse 2.4s ease-out infinite;
}

@keyframes teaserPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

.teaser-poster:hover .teaser-play-btn,
.teaser-poster:focus-visible .teaser-play-btn {
  background: rgba(212,175,55,.18);
  box-shadow: 0 0 32px rgba(212,175,55,.5);
  transform: translate(-50%, -50%) scale(1.08);
}

.teaser-poster:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.poster-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 35% 50%, rgba(60,120,255,.35) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(30,200,100,.25) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 65% 50%, rgba(140,60,220,.30) 0%, transparent 65%),
    linear-gradient(180deg, #06091a 0%, #020408 100%);
}

.poster-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 2;
}

.poster-worlds {
  display: flex;
  gap: 32px;
  align-items: flex-end;
}

.poster-world {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cinzel);
  font-size: .7rem;
  letter-spacing: .14em;
}

.world-asteria { color: #7ab4ff; text-shadow: 0 0 20px rgba(60,120,255,.8); }
.world-elfiria { color: #7aff9e; text-shadow: 0 0 20px rgba(30,200,100,.8); }
.world-felis   { color: #c07aff; text-shadow: 0 0 20px rgba(140,60,220,.8); }

.world-icon-p {
  font-size: 2rem;
  display: block;
  animation: iconGlow 3s ease-in-out infinite alternate;
}

.world-asteria .world-icon-p { animation-delay: 0s; }
.world-elfiria .world-icon-p { animation-delay: 1s; }
.world-felis   .world-icon-p { animation-delay: 2s; }

@keyframes iconGlow {
  from { opacity: .5; transform: scale(.95); }
  to   { opacity: 1;  transform: scale(1.1); }
}

.poster-logo-text {
  font-family: var(--font-cinzel);
  font-size: 1.1rem;
  letter-spacing: .15em;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(212,175,55,.6);
}

.teaser-text {
  padding-top: 4px;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.teaser-headline {
  font-family: var(--font-cormorant);
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  font-weight: 500;
  font-style: italic;
  color: var(--gold);
  letter-spacing: .06em;
  margin-bottom: 16px;
}

.teaser-lead {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body-lead);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.95;
  letter-spacing: .06em;
  margin-bottom: 20px;
}

.teaser-sep {
  border: none;
  border-top: 1px solid var(--gold-border);
  width: 120px;
  margin: 24px auto;
}

.teaser-body {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  letter-spacing: .04em;
  margin-bottom: 14px;
}

/* ============================================================
   THE FIRST NIGHT (フォローバナーと統合エリア)
============================================================ */
.section-first-night {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding-bottom: 0;
}

.first-night-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 70% at 30% 60%, rgba(60,120,255,.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 70% at 50% 60%, rgba(30,200,100,.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 70% at 70% 60%, rgba(140,60,220,.16) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-base) 100%);
  z-index: 1;
}

.first-night-content {
  z-index: 2;
  text-align: center;
  padding-bottom: 0;
}

.first-night-title {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem) !important;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300;
  line-height: 1.2;
  /* 次回公演バッジ(.newmoon-next)と横幅領域を揃える */
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   次回公演バッジ（NEXT The New Moon Night）
============================================================ */
.newmoon-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* タイトル(The Theatre of the New Moon)と同じ横幅領域にする */
  width: 100%;
  max-width: 640px;
  margin: 30px auto 4px;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 48px);
  position: relative;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(212,175,55,.1), transparent 70%),
    rgba(3,6,16,.55);
  border: 1px solid var(--gold-border);
  box-shadow: inset 0 0 30px rgba(212,175,55,.06), 0 8px 30px rgba(0,0,0,.4);
}

/* 角のゴールド装飾 */
.newmoon-next::before,
.newmoon-next::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gold);
  opacity: .7;
}
.newmoon-next::before { top: 7px; left: 7px; border-right: none; border-bottom: none; }
.newmoon-next::after  { bottom: 7px; right: 7px; border-left: none; border-top: none; }

.newmoon-next-label {
  font-size: clamp(.66rem, 1.8vw, .85rem);
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}

.newmoon-moon {
  font-style: normal;
  margin: 0 .15em;
  color: var(--gold-light);
}

.newmoon-next-date {
  font-family: var(--font-cinzel);
  /* バッジ領域幅に追従する可変サイズ */
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  letter-spacing: .06em;
  color: var(--text-primary);
  line-height: 1.1;
  white-space: nowrap;
}

.newmoon-dow {
  font-size: .5em;
  color: var(--text-secondary);
  letter-spacing: .1em;
  margin-left: .2em;
  vertical-align: middle;
}

.newmoon-next-meta {
  font-family: var(--font-serif-jp);
  font-size: clamp(.72rem, 2vw, .92rem);
  letter-spacing: .14em;
  color: var(--text-secondary);
}

.first-night-text {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.first-night-text p {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  letter-spacing: .1em;
  line-height: 2;
}

/* 画像エリア */
.first-night-image-wrap {
  position: relative;
  width: 100vw;
  /* コンテナ幅を超えて横幅100vw */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 64px;
  aspect-ratio: 16 / 6;
  overflow: hidden;
}

.first-night-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transition: transform 8s ease;
}

.first-night-image-wrap:hover .first-night-img {
  transform: scale(1.04);
}

/* ============================================================
   斜めカット結合ギャラリー（会場ビジュアル）
   ・3枚の画像を clip-path の斜めカットで連結。
   ・中央パネル(dg-center)にメイン画像を大きく配置。
============================================================ */
.diagonal-gallery {
  display: flex;
  gap: 0;
  aspect-ratio: 16 / 6;
}

.dg-panel {
  position: relative;
  height: 100%;
  overflow: hidden;
  /* パネル同士を斜めカットで少し重ねる */
  margin-left: -3vw;
}
.dg-panel:first-child { margin-left: 0; }

.dg-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}
.diagonal-gallery:hover .dg-panel img { transform: scale(1.05); }

/* 左パネル：右側を斜めにカット */
.dg-left {
  flex: 0 0 30%;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6vw) 100%, 0 100%);
}
/* 中央パネル：左右を斜めにカット（メイン・最大） */
.dg-center {
  flex: 1 1 auto;
  z-index: 2;
  clip-path: polygon(6vw 0, 100% 0, calc(100% - 6vw) 100%, 0 100%);
  box-shadow: 0 0 40px rgba(0,0,0,.5);
}
.dg-center img { object-position: center 42%; }
/* 右パネル：左側を斜めにカット */
.dg-right {
  flex: 0 0 30%;
  clip-path: polygon(6vw 0, 100% 0, 100% 100%, 0 100%);
}

/* パネル境界に薄いゴールドのグロー */
.dg-center::before,
.dg-center::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(212,175,55,.4), transparent);
  z-index: 3;
  pointer-events: none;
}
.dg-center::before { left: 6vw; transform: skewX(-9deg); }
.dg-center::after  { right: 6vw; transform: skewX(-9deg); }

.first-night-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,13,31,.35) 0%,
      transparent 30%,
      transparent 65%,
      rgba(3,6,16,.9) 100%),
    linear-gradient(90deg,
      rgba(3,6,16,.3) 0%,
      transparent 15%,
      transparent 85%,
      rgba(3,6,16,.3) 100%);
}

/* インラインFollow Banner */
.follow-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 60px 20px;
  background: linear-gradient(90deg, rgba(3,6,16,.88) 0%, rgba(10,15,35,.92) 50%, rgba(3,6,16,.88) 100%);
  border-top: var(--border-gold);
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  margin-top: 0;
}

.follow-inline-deco {
  width: 48px;
  flex-shrink: 0;
  opacity: .8;
}

.follow-inline-content {
  text-align: center;
  flex: 1;
  min-width: 260px;
}

/* follow-banner-* は follow-inline に移行したため、
   共有スタイルのみ残す */

.follow-banner-deco-text {
  color: var(--gold-dim);
  font-size: .85rem;
  letter-spacing: .2em;
  margin-bottom: 16px;
}

.follow-banner-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.22rem, 2.4vw, 1.65rem);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: .12em;
  margin-bottom: 28px;
}

.follow-banner-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-sns {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border: 1px solid var(--gold-border);
  font-family: var(--font-sans-jp);
  font-size: .82rem;
  background: rgba(0,0,0,.5);
  cursor: pointer;
  transition: all .3s;
  min-width: 220px;
  color: var(--text-primary);
  text-decoration: none;
}

.btn-sns > i { font-size: 1.4rem; flex-shrink: 0; }
.btn-sns span { text-align: left; }
.btn-sns strong { display: block; font-weight: 500; font-size: .85rem; color: var(--text-primary); }
.btn-sns small  { display: block; font-size: .7rem; color: var(--text-dim); margin-top: 2px; }

.btn-x-sns:hover    { border-color: #1da1f2; box-shadow: 0 0 14px rgba(29,161,242,.2); }
.btn-line-sns:hover { border-color: #06c755; box-shadow: 0 0 14px rgba(6,199,85,.2); }

/* チケット購入ボタン（サイトのゴールドトーンに合わせる） */
.btn-ticket-sns        { border-color: var(--gold-border); }
.btn-ticket-sns > i    { color: var(--gold); }
.btn-ticket-sns:hover  { border-color: var(--gold); box-shadow: 0 0 14px var(--gold-glow); }

/* ============================================================
   THREE WORLDS
============================================================ */
.section-three-worlds {
  background: var(--bg-dark);
}

/* ============================================================
   Three Worlds 導入リード文
============================================================ */
.worlds-lead {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.worlds-lead-p {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 2.1;
  letter-spacing: .05em;
}

/* 店舗名の強調（各ワールドカラー） */
.world-tag {
  font-weight: 500;
  letter-spacing: .03em;
}
.world-tag-asteria { color: #7ab4ff; }
.world-tag-elfiria { color: #7aff9e; }
.world-tag-felis   { color: #c07aff; }

.worlds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.world-card {
  position: relative;
  border: var(--border-gold);
  overflow: hidden;
  transition: transform .4s, box-shadow .4s;
  cursor: pointer;
}

.world-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}

.world-card-bg {
  position: absolute;
  inset: 0;
  transition: transform .6s;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.world-card:hover .world-card-bg { transform: scale(1.06); }

/* 画像が設定された場合、グラデーションはオーバーレイに表示 */
.asteria-bg {
  background-color: #04081a;
  /* 画像なしの場合のフォールバック */
}

/* style属性でbackground-imageを設定するので、
   色調オーバーレイは ::after 伪要素で表現 */
.asteria-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 30%, rgba(60,120,255,.35) 0%, transparent 70%),
    linear-gradient(180deg, rgba(4,8,26,.15) 0%, rgba(6,13,46,.55) 100%);
  pointer-events: none;
}

.elfiria-bg {
  background-color: #041008;
}

.elfiria-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 30%, rgba(30,200,100,.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(4,16,8,.15) 0%, rgba(8,30,14,.55) 100%);
  pointer-events: none;
}

.felis-bg {
  background-color: #0a0414;
}

.felis-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 30%, rgba(140,60,220,.35) 0%, transparent 70%),
    linear-gradient(180deg, rgba(10,4,20,.15) 0%, rgba(21,8,40,.55) 100%);
  pointer-events: none;
}

.world-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7) 100%);
  z-index: 1;
}

.world-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 480px;
  padding: 32px 24px;
  text-align: center;
}

.world-card-top { margin-bottom: auto; }

.world-card-name {
  font-family: var(--font-cormorant);
  font-size: clamp(1.85rem, 2.8vw, 2.3rem);
  font-weight: 500;
  font-style: italic;
  color: var(--text-primary);
  letter-spacing: .08em;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

.world-card[data-world="asteria"] .world-card-name { color: #b8d4ff; }
.world-card[data-world="elfiria"] .world-card-name { color: #b8ffce; }
.world-card[data-world="felis"]   .world-card-name { color: #d8b8ff; }

.world-card-sub {
  font-family: var(--font-cinzel);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--gold);
  margin-top: 8px;
  opacity: .85;
}

.world-card-desc {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.95;
  letter-spacing: .04em;
  margin: auto 0;
  padding: 20px 0;
}

/* ============================================================
   ABOUT
============================================================ */
.section-about {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-mid) 100%);
  position: relative;
  overflow: hidden;
}

/* ============================================================
   About ASII∞ 背景ロゴ透かし
   ・セクション中央にロゴを大きく薄く敷く（下敷き）。
   ・上面テキストの視認性を損なわないよう低opacity＋
     ロゴ周辺〜外側を暗くするビネットを重ねる。
============================================================ */
.section-about::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 88vw);
  aspect-ratio: 1 / 1;
  background: url("../images/asii-logo.png") center / contain no-repeat;
  opacity: .28;               /* 透かし：しっかり見える濃さ */
  z-index: 0;
  pointer-events: none;
}

/* ロゴの上に被せる暗めのビネットでテキスト周辺のコントラストを確保 */
.section-about::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 50% at 50% 50%,
    rgba(3,6,16,.62) 0%, rgba(3,6,16,.3) 40%, transparent 72%);
  z-index: 0;
  pointer-events: none;
}

/* センタリングレイアウト（テキストは透かしより前面に） */
.about-center {
  max-width: 760px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.about-center .section-header { margin-bottom: 36px; }

.about-center .btn-outline {
  margin-top: 8px;
}

.about-body {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 2;
  letter-spacing: .04em;
  margin-bottom: 20px;
  /* 透かしロゴの上でも本文が読みやすいよう軽い影を付与 */
  text-shadow: 0 1px 6px rgba(3,6,16,.85), 0 0 2px rgba(3,6,16,.6);
}

/* ステージ体験の流れ（強調リスト） */
.about-list {
  color: var(--text-primary);
  letter-spacing: .08em;
  line-height: 2.2;
  padding: 22px 0;
  margin: 28px auto;
  max-width: 520px;
  border-top: 1px solid rgba(212,175,55,.2);
  border-bottom: 1px solid rgba(212,175,55,.2);
  position: relative;
}

.about-list::before {
  content: "✦";
  display: block;
  color: var(--gold);
  font-size: .7rem;
  margin-bottom: 8px;
  opacity: .7;
}

.about-visual {
  position: relative;
  height: 420px;
}

.silhouette-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stage-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 120px;
  background: radial-gradient(ellipse 80% 100% at 50% 100%,
    rgba(212,175,55,.1) 0%,
    rgba(60,120,255,.08) 30%,
    rgba(140,60,220,.06) 60%,
    transparent 100%);
  filter: blur(12px);
}

.sil {
  position: absolute;
  bottom: 0;
  width: 30%;
  height: 320px;
}

.sil-asteria {
  left: 5%;
  background: radial-gradient(ellipse 40% 90% at 50% 80%, rgba(60,120,255,.4) 0%, transparent 70%),
              linear-gradient(180deg, transparent 20%, rgba(40,80,200,.6) 100%);
  clip-path: polygon(30% 0%, 70% 0%, 85% 20%, 90% 50%, 85% 100%, 15% 100%, 10% 50%, 15% 20%);
  animation: silFloat 6s ease-in-out infinite;
}

.sil-elfiria {
  left: 35%;
  height: 380px;
  background: radial-gradient(ellipse 40% 90% at 50% 80%, rgba(30,200,100,.4) 0%, transparent 70%),
              linear-gradient(180deg, transparent 20%, rgba(20,140,60,.6) 100%);
  clip-path: polygon(25% 0%, 75% 0%, 90% 25%, 88% 55%, 82% 100%, 18% 100%, 12% 55%, 10% 25%);
  animation: silFloat 6s ease-in-out infinite;
  animation-delay: 1.5s;
}

.sil-felis {
  right: 5%;
  background: radial-gradient(ellipse 40% 90% at 50% 80%, rgba(140,60,220,.4) 0%, transparent 70%),
              linear-gradient(180deg, transparent 20%, rgba(100,30,180,.6) 100%);
  clip-path: polygon(30% 0%, 70% 0%, 85% 20%, 90% 50%, 85% 100%, 15% 100%, 10% 50%, 15% 20%);
  animation: silFloat 6s ease-in-out infinite;
  animation-delay: 3s;
}

@keyframes silFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

/* ============================================================
   CREATOR PROFILE
============================================================ */
.section-creator {
  background: var(--bg-dark);
  border-top: var(--border-gold);
  position: relative;
}

/* 上下に薄いゴールドの星屑グラデーションを敷く */
.section-creator::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, var(--gold-glow), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(140,60,220,.08), transparent 70%);
  pointer-events: none;
}

.creator-center {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.creator-center .section-header {
  width: 100%;
  margin-bottom: 18px;
}

.section-eyebrow {
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: .16em;
  color: var(--gold);
  margin-bottom: 6px;
  opacity: .85;
}

.creator-lead {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body-lead);
  color: var(--text-primary);
  letter-spacing: .08em;
  line-height: 1.95;
  margin-bottom: 56px;
}

/* ---- グリッド ---- */
.creator-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}

/* ---- カード ---- */
.creator-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(212,175,55,.05), rgba(6,10,26,.6));
  border: 1px solid var(--gold-border);
  padding: 26px 24px 30px;
  overflow: hidden;
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}

/* カード角のゴールド装飾 */
.creator-card::before,
.creator-card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold);
  opacity: .5;
  transition: opacity .4s ease;
}
.creator-card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.creator-card::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.creator-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-dim);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 24px var(--gold-glow);
}
.creator-card:hover::before,
.creator-card:hover::after { opacity: 1; }

/* ---- 写真 ---- */
.creator-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 22px;
  overflow: hidden;
}

.creator-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  transition: transform .6s ease, filter .6s ease;
}
.creator-card:hover .creator-photo img {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.05);
}

/* 写真の上に重ねるゴールド枠 */
.creator-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,175,55,.4);
  pointer-events: none;
}
.creator-frame::before,
.creator-frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--gold-light);
}
.creator-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.creator-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* 写真下のグラデーション */
.creator-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(3,6,16,.55), transparent);
  pointer-events: none;
}

/* ---- テキスト ---- */
.creator-role {
  font-style: italic;
  font-size: .98rem;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 6px;
}

.creator-name {
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text-primary);
  letter-spacing: .05em;
  line-height: 1.4;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(212,175,55,.18);
}

.creator-name-en {
  display: inline-block;
  font-family: var(--font-cinzel);
  font-weight: 400;
  font-size: .86rem;
  color: var(--text-secondary);
  letter-spacing: .06em;
}

.creator-tagline {
  font-family: var(--font-serif-jp);
  font-size: 1.02rem;
  color: var(--gold-light);
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.creator-bio {
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.95;
  letter-spacing: .04em;
}

/* General Producer（逢月）はゴールド寄りに強調 */
.creator-card-lead {
  border-color: var(--gold-dim);
  background: linear-gradient(160deg, rgba(212,175,55,.1), rgba(10,8,20,.65));
}
.creator-card-lead::before,
.creator-card-lead::after { opacity: .85; }

/* ============================================================
   NEWS
============================================================ */
.section-news {
  background: var(--bg-section);
  border-top: var(--border-gold);
}

.news-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}

.news-emblem {
  width: 80px;
  height: 80px;
  margin-top: 20px;
  opacity: .7;
  animation: emblemRotate 25s linear infinite reverse;
}

.news-list {
  border-top: 1px solid rgba(212,175,55,.15);
  margin-bottom: 28px;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 8px;
  border-bottom: 1px solid rgba(212,175,55,.1);
  cursor: pointer;
  transition: background .25s, padding-left .25s;
}

.news-item:hover {
  background: rgba(212,175,55,.04);
  padding-left: 14px;
}

.news-date {
  font-family: var(--font-cinzel);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--gold);
  opacity: .7;
  white-space: nowrap;
  min-width: 88px;
}

.news-text {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  letter-spacing: .04em;
  flex: 1;
}

.news-plus {
  color: var(--gold-dim);
  font-size: 1rem;
  flex-shrink: 0;
}

.news-item-upcoming .news-text { color: var(--text-dim); }

.news-all-btn { margin-left: 0; display: inline-flex; }

/* ============================================================
   FOOTER
============================================================ */
#site-footer {
  background: var(--bg-dark);
  border-top: var(--border-gold);
  position: relative;
  z-index: 2;
}

.footer-inner {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 40px;
  align-items: start;
  max-width: var(--container-max);
  width: 90%;
  margin: 0 auto;
  padding: 60px 0 40px;
}

/* スリムフッター (Press Kit + Contact のみ) */
.footer-inner-slim {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 36px;
  grid-template-columns: unset;
}

.footer-actions-center {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.footer-star {
  width: 48px;
  height: 48px;
  animation: emblemRotate 20s linear infinite;
}

.footer-logo span {
  font-family: var(--font-cinzel);
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(212,175,55,.3);
}

.footer-nav {
  display: flex;
  gap: 48px;
}

.footer-nav-heading {
  font-family: var(--font-cinzel);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--gold);
  opacity: .8;
  margin-bottom: 16px;
}

.footer-nav-col ul li { margin-bottom: 10px; }

.footer-nav-col ul li a {
  font-family: var(--font-sans-jp);
  font-size: .78rem;
  color: var(--text-dim);
  letter-spacing: .06em;
  transition: color .25s;
}

.footer-nav-col ul li a:hover { color: var(--gold); }

.footer-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.btn-footer {
  font-size: .72rem;
  letter-spacing: .18em;
  padding: 12px 24px;
  border-color: rgba(212,175,55,.3);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  justify-content: center;
}

.btn-footer:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,175,55,.07);
}

.footer-bottom {
  border-top: 1px solid rgba(212,175,55,.1);
  padding: 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.footer-bottom small {
  font-family: var(--font-cinzel);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--text-dim);
}

.footer-deco-star {
  color: var(--gold-dim);
  font-size: .7rem;
}

/* ============================================================
   SCROLL REVEAL
============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: .15s; }
[data-reveal-delay="2"] { transition-delay: .3s; }
[data-reveal-delay="3"] { transition-delay: .45s; }

/* ============================================================
   RESPONSIVE — Tablet
============================================================ */
@media (max-width: 1024px) {
  .teaser-layout    { gap: 32px; }
  .news-layout      { grid-template-columns: 200px 1fr; gap: 32px; }

  .first-night-image-wrap { aspect-ratio: 16 / 7; }
}

/* ============================================================
   RESPONSIVE — Mobile
============================================================ */
@media (max-width: 768px) {
  :root { --section-pad: 72px 0; }

  .hamburger { display: flex; }

  .site-nav {
    position: fixed;
    top: 0; right: -100%;
    width: 75%;
    max-width: 320px;
    height: 100vh;
    background: rgba(3,6,16,.97);
    border-left: var(--border-gold);
    z-index: 100;
    padding: 80px 40px 40px;
    transition: right .35s ease;
  }

  .site-nav.open { right: 0; }

  .site-nav ul { flex-direction: column; gap: 28px; }
  .site-nav ul li a { font-size: .9rem; letter-spacing: .16em; }

  /* ============================================================
     Hero (A案): スマホは動画を横幅フィット（16:9で全体表示）し、
     テキスト・ボタンは動画の下に上詰めで配置する
  ============================================================ */
  .section-hero,
  .hero-container {
    /* 高さは内容に追従（動画＋テキストの合計高さにフィット） */
    height: auto;
    min-height: 0;
    /* ヘッダー直下から動画が始まるよう上部に余白を確保 */
    padding-top: 64px;
    /* コンテンツを上から詰める */
    justify-content: flex-start;
  }

  /* 動画：通常フローに置き、横幅フィット・16:9で全体表示（左右を切らない） */
  .hero-video {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-width: 0;
    min-height: 0;
    object-fit: contain;   /* 動画全体を見せる（黒帯が出ても切らない） */
    flex-shrink: 0;
  }

  /* 黒マスク・カーテン・ライトビームは全面背景演出のため非表示にして
     動画全体の視認性を優先 */
  .hero-overlay,
  .curtain,
  .light-beam { display: none; }

  /* テキスト・ボタン群：動画直下に上詰め（下寄せ用の大きな余白を解除） */
  .hero-content {
    padding: 24px 18px 40px;
    gap: 12px;
  }

  /* エンブレムは省スペース化 */
  .hero-emblem { width: 56px; height: 56px; }

  .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 340px; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }

  /* Scrollインジケーターは縦並びレイアウトでは邪魔になるため非表示 */
  .section-hero .scroll-indicator { display: none; }

  /* First Night画像（斜めギャラリーはスマホでも横長を維持して見やすく） */
  .first-night-image-wrap { aspect-ratio: 16 / 9; margin-top: 40px; }
  .diagonal-gallery { aspect-ratio: 16 / 9; }
  /* スマホは重なり量とカット角を調整 */
  .dg-panel { margin-left: -5vw; }
  .dg-left  { flex-basis: 28%; clip-path: polygon(0 0, 100% 0, calc(100% - 9vw) 100%, 0 100%); }
  .dg-center{ clip-path: polygon(9vw 0, 100% 0, calc(100% - 9vw) 100%, 0 100%); }
  .dg-right { flex-basis: 28%; clip-path: polygon(9vw 0, 100% 0, 100% 100%, 0 100%); }
  .dg-center::before { left: 9vw; }
  .dg-center::after  { right: 9vw; }

  /* 次回公演バッジ：タイトル幅に追従（全幅） */
  .newmoon-next { padding: 18px 20px; margin: 24px auto 4px; width: 100%; max-width: 100%; }

  /* Follow inline */
  .follow-inline-deco { display: none; }

  .worlds-grid { grid-template-columns: 1fr; gap: 20px; }
  .world-card-content { min-height: 360px; }

  .news-layout { grid-template-columns: 1fr; gap: 24px; }
  .news-emblem { display: none; }

  /* Creator Profile: タブレット〜スマホは2列 */
  .creator-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .creator-lead { margin-bottom: 40px; }
  .creator-card { padding: 22px 18px 24px; }
  .creator-name { font-size: 1.25rem; }

  .footer-inner-slim { padding: 40px 20px 28px; }
  .footer-actions-center { flex-direction: column; }
}

@media (max-width: 480px) {
  /* 見出しは本文の底上げに合わせて据え置きやや大きめ（hierarchy維持） */
  .section-title  { font-size: 1.85rem; }
  /* Hero: 動画は横幅フィット(16:9)のまま。小型端末では上下余白を微調整 */
  .hero-content   { padding: 20px 16px 36px; }

  /* 斜めギャラリーは小型端末でも横長(16:10)を維持 */
  .first-night-image-wrap { aspect-ratio: 16 / 10; }
  .diagonal-gallery { aspect-ratio: 16 / 10; }

  .follow-banner-btns { flex-direction: column; }
  .btn-sns        { min-width: unset; width: 100%; }

  /* Creator Profile: スマホ縦は1列で読みやすく */
  .creator-grid   { grid-template-columns: 1fr; gap: 16px; }
  .creator-card   { flex-direction: row; gap: 16px; align-items: flex-start; padding: 18px 16px; }
  .creator-photo  { width: 38%; flex-shrink: 0; margin-bottom: 0; }
  .creator-info   { flex: 1; min-width: 0; }
  .creator-name   { font-size: 1.2rem; margin-bottom: 10px; padding-bottom: 10px; overflow-wrap: anywhere; }
  .creator-name-en { display: block; margin-top: 2px; overflow-wrap: anywhere; }
  /* 横並びカードでも本文は読みやすいサイズを確保（参考サイト準拠で底上げ） */
  .creator-bio    {
    font-size: .9rem;
    line-height: 1.85;
    /* 狭い info 幅から文字がはみ出さないよう、どうしても入らない場合は折返す */
    overflow-wrap: anywhere;
    word-break: normal;
  }
  /* 横並びの狭い幅では、長い文節(.ph)が幅を超えてフレームからはみ出すため、
     Creator 本文内に限り文節境界以外でも折り返しを許可する */
  .creator-bio .ph {
    display: inline;          /* inline-block の固定幅を解除して折返し可に */
    word-break: normal;
  }
  .creator-role   { font-size: .9rem; }
  .creator-tagline { font-size: .95rem; }
  .creator-card-lead { flex-direction: column; }
  .creator-card-lead .creator-photo { width: 100%; margin-bottom: 18px; }

  .poster-worlds  { gap: 18px; }
  .world-icon-p   { font-size: 1.4rem; }

  /* ============================================================
     文節改行（モバイル）
     ・.ph の inline-block / word-break:keep-all はグローバル定義済み。
     ・スマホでは本文中の固定 <br> を無効化し、.ph による可変改行に委ねる
       （狭い画面でレイアウトを崩さないため）。
  ============================================================ */
  .hero-sub br, .hero-desc br,
  .teaser-lead br, .teaser-body br,
  .first-night-text br,
  .about-body br,
  .follow-banner-title br,
  .creator-bio br,
  .world-card-desc br,
  .worlds-lead-p br {
    display: none;
  }
}