/* ═══════════════════════════════════════════════════════
   style.css
   UP47 Shimane — Prologue Page
   Design tokens per spec PDF (up47_02.pdf)
═══════════════════════════════════════════════════════ */


/* ───────────────────────────────────────
   1. DESIGN TOKENS
─────────────────────────────────────── */
:root {
  /* カラー */
  --deep-night: #141220;
  --dawn-navy: #1C1830;
  --dusk-purple: #5C4A7A;
  --dawn-rose: #C4706A;
  --dawn-amber: #E8A050;
  --gold: #C8A96E;
  --gold-pale: #EBD9B8;
  --parchment: #F5F0E9;

  /* タイポグラフィ */
  --serif: 'EB Garamond', Georgia, serif;
  --jp: 'Zen Old Mincho', serif;
  --mono: 'DM Mono', monospace;

  /* イージング */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ───────────────────────────────────────
   2. RESET & BASE
─────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--deep-night);
  color: var(--parchment);
  font-family: var(--jp);
  overflow-x: hidden;
}

/* フィルムグレインオーバーレイ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
}


/* ───────────────────────────────────────
   3. HEADER
   Spec: h70 / bg #141220 82% / border-bottom #C8A96E 35%
         padding-top 21px / padding-bottom 21px / padding-left 42px / padding-right 42px
─────────────────────────────────────── */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  height: 70px;
  padding: 21px 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 18, 32, 0.82);
  border-bottom: 1px solid rgba(200, 169, 110, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 左ナビゲーション — Frame1 / item-spacing: 14px */
.nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ナビテキスト — 共通/mono 12px_3px / gold */
.nav-left a {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav-left a:hover {
  opacity: 0.6;
}

.nav-sep {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(200, 169, 110, 0.28);
  user-select: none;
}

/* 右アイコン — menu icon svg / h21 w41 */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 21px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
  padding: 0;
  position: relative;
  z-index: 1000;
  /* オーバーレイより前面 */
}

.nav-icon:hover {
  opacity: 1;
}

/* アイコン切り替え: デフォルトは太陽、open時は × */
.icon-close {
  display: none;
}

.menu-open .icon-sun {
  display: none;
}

.menu-open .icon-close {
  display: block;
}


/* ───────────────────────────────────────
   MENU PANEL
   ヘッダーの下から右側にスライドインするパネル
─────────────────────────────────────── */

/* 背景の薄暗いオーバーレイ（ヘッダーの下だけ覆う） */
.menu-overlay {
  position: fixed;
  top: 70px;
  /* ヘッダーの高さ分だけ下から開始 */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 700;
  /* ヘッダー(800)より低く設定して常に前面に保つ */
  pointer-events: none;
}

.menu-overlay.is-open {
  pointer-events: auto;
}

/* クリックで閉じる背景 */
.menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 14, 0.55);
  opacity: 0;
  transition: opacity 0.38s var(--ease-out);
}

.menu-overlay.is-open .menu-backdrop {
  opacity: 1;
}

/* スライドパネル本体 — 右からスライドイン */
.menu-nav {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 82vw);
  /* 最大360px、狭い画面では画面幅の82% */
  height: 100%;
  background: var(--dawn-navy);
  border-left: 1px solid rgba(200, 169, 110, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
  /* 初期: 右にオフスクリーン */
  transform: translateX(100%);
  transition: transform 0.42s var(--ease-out);
}

.menu-overlay.is-open .menu-nav {
  transform: translateX(0);
}

/* メニューリスト */
.menu-list {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 各メニュー項目 — パネルと一緒にスライドするので個別アニメは控えめに */
.menu-item {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.menu-overlay.is-open .menu-item {
  opacity: 1;
  transform: translateX(0);
}

/* 時間差 */
.menu-overlay.is-open .menu-item:nth-child(1) {
  transition-delay: 0.12s;
}

.menu-overlay.is-open .menu-item:nth-child(2) {
  transition-delay: 0.17s;
}

.menu-overlay.is-open .menu-item:nth-child(3) {
  transition-delay: 0.22s;
}

.menu-overlay.is-open .menu-item:nth-child(4) {
  transition-delay: 0.27s;
}

.menu-overlay.is-open .menu-item:nth-child(5) {
  transition-delay: 0.32s;
}

.menu-overlay.is-open .menu-item:nth-child(6) {
  transition-delay: 0.37s;
}

.menu-overlay.is-open .menu-item:nth-child(7) {
  transition-delay: 0.42s;
}

/* 閉じるときはアイテムを即座に非表示（チラつき防止） */
.menu-overlay:not(.is-open) .menu-item {
  transition-delay: 0s;
}

/* メニューリンク — EB Garamond / parchment */
.menu-link {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--parchment);
  text-decoration: none;
  padding: 0.95rem 2.5rem;
  transition: color 0.2s, padding-left 0.2s;
}

.menu-link:hover {
  color: var(--gold-pale);
  padding-left: 3rem;
  /* ホバーで少し右にずれる演出 */
}

/* モバイル: ヘッダーの高さが60pxに変わる */
@media (max-width: 768px) {
  .menu-overlay {
    top: 60px;
  }
}


/* ───────────────────────────────────────
   4. HERO
   Spec: Section-Hero / h672 / w1440
─────────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 672px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 6vw 10vh;
  overflow: hidden;
}

/* 夜明けグラデーション背景 */
.hero-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      #060410 0%,
      #0e0c1e 12%,
      #161430 22%,
      #1e183c 32%,
      #2c1e48 42%,
      #4e2450 52%,
      #7e3448 62%,
      #aa5040 72%,
      #c87848 82%,
      #e0a860 92%,
      #eec870 100%);
  opacity: 0;
  animation: skyReveal 3s var(--ease-out) 0.2s forwards;
}

@keyframes skyReveal {
  to {
    opacity: 1;
  }
}

/* 星フィールド */
.star-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  animation: twinkle var(--d, 3s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  from {
    opacity: var(--a, 0.2);
    transform: scale(1);
  }

  to {
    opacity: var(--b, 0.7);
    transform: scale(1.6);
  }
}

/* 地面フェード */
.hero-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(6, 4, 14, 1) 0%, rgba(6, 4, 14, 0) 100%);
  pointer-events: none;
}

/* 山並みシルエット */
.silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  overflow: hidden;
  pointer-events: none;
}

.silhouette svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* テキストコンテンツ */
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
}

/* H1 — pc_欧文_title: EB Garamond Medium / 96px / 144px */
.hero-h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--parchment);
  opacity: 0;
  animation: slideUp 1.1s var(--ease-out) 1.5s forwards;
}

/* サブタイトル — pc_和文_中見出し: Zen Old Mincho / 24px / 36px */
.hero-sub {
  font-family: var(--jp);
  font-size: clamp(0.9rem, 1.8vw, 1.35rem);
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.08em;
  color: var(--parchment);
  margin-top: 15px;
  opacity: 0;
  animation: slideUp 1s var(--ease-out) 2.1s forwards;
}

/* キャプション — pc_和文_capture: Zen Old Mincho / 12px / 18px / parchment 35% */
.hero-caption {
  font-family: var(--jp);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  color: rgba(245, 240, 233, 0.35);
  margin-top: 8px;
  opacity: 0;
  animation: slideUp 0.9s var(--ease-out) 2.6s forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ───────────────────────────────────────
   5. BODY SECTION
   背景: deep night → dusk purple → blue-grey → light grey
─────────────────────────────────────── */
.body-section {
  position: relative;
  background: linear-gradient(180deg,
      #0e0c1e 0%,
      #161430 8%,
      #1e1c38 16%,
      #282545 24%,
      #302e52 32%,
      #38355a 40%,
      #403c62 48%,
      #484568 55%,
      #545070 62%,
      #686480 70%,
      #8c8898 78%,
      #b0adb8 86%,
      #cccad4 93%,
      #dddbe4 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Frame 111: 見出し・本文を同じ幅コンテナで左揃え */
.body-inner {
  width: 100%;
  max-width: 750px;
  /* body-text-area と同じ幅に統一 */
  padding: 120px 6vw 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 左揃え */
}

/* H2 — pc_和文_本見出し: Zen Old Mincho / 32px / 48px */
.body-heading {
  font-family: var(--jp);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.24em;
  text-align: left;
  /* 本文の左端に揃える */
  color: var(--parchment);
  margin-bottom: 80px;
  /* スクロールリビール初期状態 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.body-heading.on {
  opacity: 1;
  transform: translateY(0);
}

/* 本文エリア */
.body-text-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}

/* 本文 — pc_和文_本文: Zen Old Mincho / 16px / 30px */
.body-text-area p {
  font-family: var(--jp);
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.04em;
  color: rgba(245, 240, 233, 0.55);
  /* スクロールリビール初期状態 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.body-text-area p.on {
  opacity: 1;
  transform: translateY(0);
}


/* ───────────────────────────────────────
   6. CTA エリア
─────────────────────────────────────── */

/* CTAリード文 (body-section内/グラデーション共有) */
.cta-area {
  width: 100%;
  padding: 80px 6vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
}

/* さぁ — pc_和文_中見出し: Zen Old Mincho / 24px / gold pale寄り */
.cta-lead {
  font-family: var(--jp);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.22em;
  color: #8b7d6b;
  text-align: center;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.cta-lead.on {
  opacity: 1;
  transform: translateY(0);
}

/* CTAボタンゾーン (グラデーション末端のライトグレー) */
.cta-button-zone {
  background: #dddbe4;
  width: 100%;
  padding: 60px 0 120px;
  display: flex;
  justify-content: center;
}

/* ボタン — Spec: h52 / w276 / border #C8A96E 42% / EB Garamond 12px */
.btn-open {
  position: relative;
  /* ::before の基準点 */
  overflow: hidden;
  /* スライドがはみ出ないようにクリップ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 276px;
  height: 52px;
  border: 1px solid rgba(200, 169, 110, 0.42);
  background: transparent;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: #8b7d6b;
  text-decoration: none;
  cursor: pointer;
  /* スクロールリビール初期状態 */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    border-color 0.32s ease,
    color 0.32s ease;
}

.btn-open.on {
  opacity: 1;
  transform: translateY(0);
}

/* ホバー演出: 金色が左→右にスライドインする ::before */
.btn-open::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 169, 110, 0.18);
  /* gold 18% */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-out);
}

.btn-open:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-open:hover::before {
  transform: scaleX(1);
}


/* ───────────────────────────────────────
   7. FOOTER
   Spec: h190 / bg deep-night / border-top #C8A96E 35%
         TEXT: dawn navy #1C1830 / mono 9px
─────────────────────────────────────── */
/* フッターテキスト色をヘッダーナビと同じgoldに */
footer {
  background: var(--deep-night);
  border-top: 1px solid rgba(200, 169, 110, 0.35);
  min-height: 190px;
  padding: 40px 6vw 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* TEXT_01: ナビリンク行 — mono 9px / dawn navy */
.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 16px;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.footer-nav a {
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-nav a:hover {
  opacity: 0.6;
}

.footer-nav span {
  color: rgba(28, 24, 48, 0.4);
  padding: 0 0.15rem;
}

/* TEXT_02: 協力クレジット — mono 9px / dawn navy */
.footer-credit {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 16px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-align: center;
}

.footer-credit a {
  color: var(--gold);
  text-decoration: underline;
}

/* コピーライト — mono 9px / dawn navy 60% */
.footer-copy {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 16px;
  letter-spacing: 0.12em;
  color: var(--gold);
  opacity: 0.6;
  text-align: center;
}

/* ───────────────────────────────────────
   8. RESPONSIVE — smartphone
─────────────────────────────────────── */
@media (max-width: 768px) {
  header {
    height: 60px;
    padding: 0 20px;
  }

  .nav-left {
    gap: 10px;
  }

  .nav-left a {
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .hero {
    padding: 0 6vw 14vh;
  }

  .body-inner {
    padding: 80px 6vw 60px;
  }

  .body-heading {
    margin-bottom: 48px;
    font-size: 1.35rem;
  }

  .cta-area {
    padding: 60px 6vw 0;
  }

  .btn-open {
    width: 220px;
  }

  .footer-nav {
    font-size: 8px;
  }
}