/* ====== 全体共通：端のズレ吸収 ====== */
:root { --bleed: 2px; } /* 端のにじみ対策。必要なら 3px に */

/* ====== 1) セクション共通レイヤー ====== */
.section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section .container { position: relative; z-index: 2; }

/* 背景スライドの受け皿（notes/apply など） */
.section .bg-slideshow {
  position: absolute;
  inset: calc(-1 * var(--bleed));
  z-index: 0;
}

/* スライド（フェードのみ。scale はズレの原因なので無効） */
.bg-slide,
.hero-slide {
  position: absolute;
  inset: calc(-1 * var(--bleed));
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  transform: none;
}
/* ← JS が .is-active を付ける場合があるので両対応にする（重要） */
.bg-slide.is-active,
.hero-slide.is-active,
.bg-slide.active,
.hero-slide.active { opacity: 1; }

/* 旧オーバーレイ要素は使わない（競合防止） */
.notes-overlay, .apply-overlay { display: none !important; }

/* ====== 2) ヒーロー（1ページ目） ====== */
.section-hero {
  min-height: 100vh;
  background: #0b0b0c;
  padding: 0;
}
.hero-slideshow { position: absolute; inset: calc(-1 * var(--bleed)); z-index: 0; }
.hero-overlay {
  position: absolute;
  inset: calc(-1 * var(--bleed));
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,0.15), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
}
.hero-content { text-align: center; padding-top: 64px; }
.hero-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.25;
  margin: 0 16px 16px;
  text-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.hero-subtitle { margin: 0 0 24px; color: var(--muted); letter-spacing: .12em; }

/* 下からふわっと（タイトル→少し遅れてサブタイトル） */
.hero-title.reveal, .hero-subtitle.reveal { opacity: 0; transform: translateY(16px); }
.hero-title.reveal {
  transition: opacity 1.2s cubic-bezier(.2,.8,.2,1),
              transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.hero-subtitle.reveal {
  transition: opacity 1.2s cubic-bezier(.2,.8,.2,1) .6s,
              transform 1.2s cubic-bezier(.2,.8,.2,1) .6s;
}
.hero-title.reveal.in-view, .hero-subtitle.reveal.in-view {
  opacity: 1; transform: translateY(0);
}

/* ====== 3) 2・3ページ目のオーバーレイは ::before に統一 ====== */
/* 重複経路（要素/疑似要素）を止める：これが重なりの原因になっていた */
.section-notes .bg-overlay,
.section-apply  .bg-overlay,
.section-notes .notes-overlay,
.section-apply  .apply-overlay { display: none !important; }
.section-notes .bg-slide::before,
.section-apply  .bg-slide::before { content: none !important; }

.section-notes::before,
.section-apply::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--bleed));  /* 受け皿・スライドと同じ inset */
  pointer-events: none;
  z-index: 1;
}
.section-notes::before {
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.48), rgba(0,0,0,0.76));
}
.section-apply::before {
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.30), rgba(0,0,0,0.55));
}

/* ====== 雑多な残骸の無効化（縁・光り・旧疑似要素） ====== */
.lux-title, .lux-title::after {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: inherit !important;
  text-shadow: none !important;
  animation: none !important;
  content: normal !important;
}
/* 以前の ::before/::after 背景があれば止める */
.section-notes::after, .section-apply::after { content: none !important; display: none !important; }

/* スクロールインジケータ（任意。現状のまま） */
.scroll-indicator{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  display:grid; place-items:center; gap:6px; color:var(--muted);
  font-size:12px; letter-spacing:.2em;
}
.scroll-indicator i{
  width:2px; height:40px; background:var(--gold);
  animation:scroll 1.6s ease-in-out infinite; border-radius:999px;
  box-shadow:0 0 20px rgba(255,215,0,0.35);
}
@keyframes scroll{
  0%{ transform:translateY(0); opacity:.6; }
  50%{ transform:translateY(6px); opacity:1; }
  100%{ transform:translateY(0); opacity:.6; }
}
/* hero.css に追加（または既存を上書き） */
.section-hero .hero-content{
  position: relative;
  z-index: 2;    /* ← オーバーレイ（z=1）より上へ */
}

/* ===== 最終オーバーライド：2/3ページの黒被せは ::before 1枚だけ & 薄め ===== */

/* 余計なオーバーレイ経路を完全停止（名前に overlay を含む要素、スライドの疑似要素など） */
.section-notes [class*="overlay"],
.section-apply  [class*="overlay"] { display: none !important; }
.section-notes .bg-slide::before,
.section-apply  .bg-slide::before,
.section-notes .bg-slideshow::before,
.section-apply  .bg-slideshow::before { content: none !important; }

/* セクション本体の ::before だけを使う（サイズ・順序を統一）。ID指定で特異性UP＋!importantで後勝ちに勝つ */
#notes::before,
#apply::before {
  content: "" !important;
  position: absolute !important;
  inset: calc(-1 * var(--bleed)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 濃度：ここが実際の見え方を決める（薄め） */
#notes::before {
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.45)) !important;
}
#apply::before {
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.45)) !important;
}

/* スライド表示（.active / .is-active 両対応）も保険で */
.bg-slide.is-active, .hero-slide.is-active,
.bg-slide.active,   .hero-slide.active { opacity: 1 !important; }

/* セクション自体の背景が暗い場合に備えて透明化（必要なら） */
#notes, #apply { background: transparent !important; }

/* アニメ中は影なし */
.hero-title.reveal,
.hero-subtitle.reveal { text-shadow: none !important; }

/* 表示完了後だけ影を戻す（必要なら調整） */
.hero-title.reveal.in-view { text-shadow: 0 8px 30px rgba(0,0,0,.5) !important; }
.hero-subtitle.reveal.in-view { text-shadow: 0 4px 16px rgba(0,0,0,.35) !important; }

.hero-title, .hero-subtitle{
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}