/* ===========================================
   エグリプトX 事前予約プロモLP（MARKETING-17）
   スマートフォン専用。PCは中央にSP幅を置き、左右は背景色で埋める。
   既存サイト（src/index.html / css/style.css）とは完全に独立している。
=========================================== */

:root {
  --promo-bg: #def3ff;
  --promo-white: #ffffff;
  --font-family: 'Zen Maru Gothic', sans-serif;
  /* CTAの見出しだけ別のフォントにする（使う文字だけにサブセット済み） */
  --font-cta: 'Corporate Logo Subset', 'Zen Maru Gothic', sans-serif;
  --font-bold: 700;
  --font-black: 900;
  /* KVの白抜き文字のドロップシャドウ（本サイトと共通） */
  --shadow-text: 0px 4px 10px #006eaa;

  /* KV原画のサイズ。レイヤーの%座標はこの比率が基準 */
  --kv-w: 1879;
  --kv-h: 1253;
}

/*
 * CTAの見出し用フォント（コーポレート・ロゴ ver3 Bold / SIL OFL 1.1）。
 * このLPで使う30文字だけにサブセットして6.3KBにしている。
 * ライセンスと著作権表示は assets/fonts/NOTICE.txt を参照。
 * font-display: swap にして、読み込み中は Zen Maru Gothic で出す。
 */
@font-face {
  font-family: 'Corporate Logo Subset';
  src: url('../assets/fonts/corporate-logo-b-subset.woff2?v=20260820') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 画面には出さず、スクリーンリーダーにだけ読ませる */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-bold);
  /* PCで開かれたときの左右の余地 */
  background-color: #0e2a3d;
  color: #715c63;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/*
 * スマホ上部（ステータスバー）の色。iOS 26 のSafariは body の背景色でここを塗る
 * （ページの絵は描けない）。今までは PC の左右の色（#0e2a3d）がそのまま出て、
 * キービジュアルの上に濃紺の帯が乗って見えていた。
 * スマホ幅では body の背景は左右に出ない（.promo が全幅で覆う）ので、ここだけ色を変える。
 * キービジュアルが上にある間は空の青、通り過ぎたらページの地の色（JSで is-past-kv を付ける）。
 * 青はキービジュアル上端の空の色を実測したもの。
 */
@media (max-width: 480px) {
  body { background-color: #38aef2; }
  .is-past-kv body { background-color: var(--promo-bg); }
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/*
 * SP専用。PCではスマホ幅のレイアウトをそのまま中央に置く（要件書03）。
 * 広告はスマホにのみ出稿するため、PC向けの作り込みはしない。
 */
.promo {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background-color: var(--promo-bg);
  position: relative;
  overflow: hidden;
}

/* ===========================================
   ファーストビュー
=========================================== */
.kv {
  position: relative;
  width: 100%;
  /*
   * 本サイトのSPと同じ比率（Figma 388w = 520px → 134.02%）。
   * 上限は 678px にしていたが、480px以上だと原画（下端642px）より下に
   * 何も無い余白が残り、CTAとバナーの間が101pxまで開いていた。
   * 650px に下げて、狭い幅と同じ詰まり具合に揃えている。
   */
  height: clamp(555px, 143vw, 650px);
  background-color: var(--promo-bg);
  overflow: hidden;
  isolation: isolate;
}

/*
 * 原画を置く箱。レイヤーはこの箱に対する % で配置しているので、
 * 箱の大きさが変わっても位置関係は崩れない。
 * 本サイトのSPと同じ倍率・位置（幅213.66% / 左へずらす）。
 */
.kv-art {
  position: absolute;
  top: max(-8.76vw, -42px);
  left: clamp(calc(100% - 1026px), max(-51%, calc(55.85% - 513px)), 0px);
  width: min(213.66%, 1026px);
  aspect-ratio: var(--kv-w) / var(--kv-h);
  pointer-events: none;
}

.kv-layer {
  position: absolute;
  max-width: none;
  /* transform/opacity のみで動かす（GPU処理でスマホでもカクつかない） */
  will-change: transform, opacity;
}

/*
 * ===========================================
 * 従来キービジュアル（プレスリリース前の暫定措置）
 * ===========================================
 * html に data-kv="legacy" が付いているページだけ、
 * 新KV（11枚のレイヤー）の代わりに従来の1枚絵を敷く。
 *
 * 切り替えは tools/gen-lp.py の KV を 'legacy' / 'current' で変えて
 * 流し直すだけ。CSSもHTMLも直す必要はない。
 *
 * 1枚絵なので絵自体は動かさない（暫定措置のためアニメーション不要との指定）。
 * 文字・ロゴ・CTAの登場アニメーションは新KVと同じものがそのまま効く。
 */
.kv-legacy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /*
   * 横長の絵（1760x1302）を縦長の箱（390x558など）に入れるので、
   * 高さ基準で拡大され左右が切れる。中央を見せる。
   */
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

.kv-layer--bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * KV下部のフェード。
 * 高さを固定にすると、KVの高さとの差（幅によって1px前後）だけ
 * 素の絵が残って境界に線が見えてしまう。
 * bottom: 0 で必ず下端まで届かせ、最後の12%は完全に背景色で塗る。
 */
.kv::after {
  content: '';
  position: absolute;
  top: min(109.24vw, 516px);
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--promo-bg) 88%,
    var(--promo-bg) 100%);
  pointer-events: none;
  z-index: 2;
}

/* KV上のテキスト・CTA */
.kv-content {
  position: absolute;
  top: min(9.02vw, 43.3px);
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: min(5.18vw, 24.8px);
  padding-right: min(5.18vw, 24.8px);
  gap: min(56.4vw, 262.6px);
  z-index: 3;
}

.kv-copy { display: flex; flex-direction: column; align-items: center; width: 100%; }

.kv-catchcopy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 16px;
  font-weight: var(--font-bold);
  color: var(--promo-white);
  letter-spacing: 0.3em;
  text-shadow: var(--shadow-text);
  padding: 2px 0;
  width: 289px;
  line-height: normal;
}
.kv-catchcopy p { white-space: nowrap; }
.kv-catchcopy ruby { ruby-position: over; }
.kv-catchcopy rt {
  font-size: 0.45em;
  font-weight: var(--font-bold);
  color: var(--promo-white);
  text-shadow: var(--shadow-text);
  letter-spacing: 0.15em;
}

.kv-logo-wrap { width: min(88.46vw, 425px); }
/*
 * ロゴ画像は中央に置いているが、右の「X」から伸びる光が画像内の余白を
 * 作っているため、文字の重心が画像中心より 3.88%（1280px中49.7px）左にある。
 * 見た目が中央に来るよう、その分だけ右へ寄せる。
 * transform なので配置には影響せず、右の光がはみ出すこともない。
 */
.kv-logo {
  width: 100%;
  transform: translateX(3.88%);
  filter: drop-shadow(0 6px 24px #44a8de);
}

.kv-registration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.kv-reg-label-group { display: flex; flex-direction: column; align-items: center; }
.kv-release-text, .kv-reg-label {
  font-size: 18px;
  font-weight: var(--font-bold);
  color: var(--promo-white);
  text-shadow: var(--shadow-text);
  text-align: center;
  white-space: nowrap;
  /*
   * normal のままだとWebフォントの読み込み前後で行の高さが 54→52px と
   * 変わり、下に続くCTAの位置がわずかに動く。
   * 読み込み後の実測値（18px × 1.4444 = 26px）で固定してずれを消している。
   */
  line-height: 1.4444;
}
/*
 * 「今秋リリース予定 / 事前登録受付中！」の位置調整。
 * 中央揃えのままだと少し左に見えるため、10px前後だけ右に寄せている。
 * position: relative なので配置には影響せず、登場アニメーション
 * （kv-text-in が transform を使う）とも競合しない。
 */
.kv-release-text, .kv-reg-label {
  position: relative;
  left: min(2.7vw, 13px);
}
.kv-release-text { letter-spacing: 0.3em; }
.kv-reg-label { letter-spacing: 0.2em; }

/* ===========================================
   ストアCTA
   アイコンとバッジ2枚を1つのフレックス行に並べ、
   幅を「1 : 3.3889 : 3.3043」（＝各要素の縦横比）で分配している。
   こうすると3つの高さが自動的に一致し、余りの余白も出ない。
     アイコン  幅 = 分配ぶん、高さ = 同じ（正方形）
     バッジ    幅 = 分配ぶん、高さ = 幅 ÷ 縦横比 → アイコンと同値
   要件書06-3の「黒い角丸の外形の高さを揃える」も自動的に満たされる。
=========================================== */
.store-cta {
  display: flex;
  align-items: center;
  gap: min(8px, 2vw);
  width: 100%;
}

.store-cta__icon {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 1;
  border-radius: 21%;
  overflow: hidden;
}
/* 中身が幅・高さを主張しないよう絶対配置にする */
.store-cta__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-badge { position: relative; flex-basis: 0; min-width: 0; display: block; }
/*
 * バッジの高さは幅に従うため、狭い端末では41px程度になり
 * 推奨のタップ領域（44px）を下回る。見た目を変えずに当たり判定だけ広げる。
 */
.store-badge::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.store-badge:nth-of-type(1) { flex-grow: 3.3889; }  /* App Store   183x54  */
.store-badge:nth-of-type(2) { flex-grow: 3.3043; }  /* Google Play 380x115 */
.store-badge img { width: 100%; height: auto; display: block; }

/*
 * アイコンを左・バッジを縦2段に置くレイアウト（最終CTAで使用）。
 *
 * 幅の比率は「バッジ列の幅」を1としたときの値で決めている。
 *   バッジ列の高さ = 幅 ÷ 3.3889（App Store）
 *                  + 幅 ÷ 3.3043（Google Play）
 *                  + 段の間隔 5%
 *                = 幅 × 0.64773
 * アイコンは正方形なので、幅をこの 0.64773 にすると高さがぴったり揃う。
 * 段の間隔は margin-top の % で取っている。%は「親の幅」に対して
 * 計算されるため、どの画面幅でもこの比率が崩れない。
 */
.store-cta--stacked .store-cta__icon { flex-grow: 0.64773; }
.store-cta--stacked .store-cta__badges {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* 列の中では高さは画像に従わせる（横並び用の伸縮指定を打ち消す） */
.store-cta--stacked .store-badge { flex: 0 0 auto; }
.store-cta--stacked .store-badge:nth-of-type(2) { margin-top: 5%; }

/*
 * FV内のCTAはKVの絵の上に乗るため、下にガラスの板を敷いて可読性を確保する。
 * backdrop-filter 非対応の環境でも background だけで成立する濃度にしている。
 */
.store-cta--inline {
  padding: min(8px, 2vw);
  border-radius: min(12px, 3vw);
  background: rgba(255, 255, 255, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 18px rgba(0, 40, 70, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* 追従バー（FVを過ぎたら画面下部に固定） */
.store-cta--fixed {
  position: fixed;
  left: 50%;
  bottom: 0;
  /*
   * ここでは隠さない。JSが動かない環境では常時表示にしてCTAを失わないため。
   * 隠すのは js-storebar が付いたときだけ（下記）。
   */
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -2px 14px rgba(0, 32, 64, 0.18);
  z-index: 90;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * JSが動かない場合は常時表示にしてCTAを失わない。
 * js-storebar が付いたときだけ初期状態で隠す。
 * 表示側は詳細度を1つ上げておくこと（同じ詳細度だと後勝ちで隠れたままになる）。
 */
.js-storebar .store-cta--fixed { transform: translate(-50%, 110%); }
.js-storebar .store-cta--fixed.is-visible { transform: translate(-50%, 0); }

/* ===========================================
   FV以降のセクション
   バナー画像は未支給のため、グレーのダミーを置いている。
   支給され次第 .promo-banner の中身を <img> に差し替える。
=========================================== */
/* FV直後のバナーが早く目に入るよう、上の余白は .promo-sec の14pxだけにしている */
.promo-body { padding: 0; }

.promo-sec { padding: 14px 16px; }

/*
 * バナー。素材の縦横比が1枚ずつ微妙に違うため、比率はCSSで固定せず
 * 各imgのwidth/height属性に従わせる（固定するとその1枚だけ潰れる）。
 * 属性が入っているので読み込み前も高さが確保され、レイアウトはずれない。
 */
.promo-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ===========================================
   トレジャー（暗転セクション）
   ここだけ世界観を反転させて「宝の眠る深い場所」に見せる。
   ゲームの舞台が明るい南国の島なので、対比として
   深い海底〜夜の色（濃紺〜ティール）に金の差し色でまとめている。
   背景の光・粒はすべてCSSで描いていて、画像は使っていない。
=========================================== */
.promo-treasure {
  position: relative;
  /* 前後のバナーと詰まって見えるため、上下に余白を取る */
  margin: 34px 0;
  padding: 58px 22px 64px;
  text-align: center;
  color: var(--promo-white);
  overflow: hidden;
  /*
   * 背景は支給画像（洞窟）。
   * 上に暗幕を重ねて白文字の可読性を確保している。
   * 画像が無い場合は最下層のグラデーションが見えるだけで崩れない。
   */
  background:
    linear-gradient(180deg,
      rgba(3, 14, 26, 0.78) 0%,
      rgba(3, 14, 26, 0.52) 42%,
      rgba(3, 14, 26, 0.86) 100%),
    url('../assets/treasure/bg.webp?v=20260818') center / cover no-repeat,
    linear-gradient(180deg, #041a2e 0%, #07304b 46%, #052235 100%);
}

/* 細かい光の粒。ゆっくり瞬かせて、静止画に見せない */
.promo-treasure::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 16%, rgba(180,240,255,0.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 32% 74%, rgba(255,232,170,0.9), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 66%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 34%, rgba(180,240,255,0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 52%, rgba(255,232,170,0.8), transparent 60%);
  animation: tr-twinkle 5.5s ease-in-out infinite;
}
@keyframes tr-twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

.promo-treasure > * { position: relative; z-index: 1; }

/*
 * CTAのリボン（.promo-cta__ribbon）と形・字組み・色をすべて揃えている。
 */
.promo-treasure__eyebrow {
  display: inline-block;
  padding: 7px 30px;
  margin-bottom: 16px;
  background: linear-gradient(96deg, #3C3385 0%, #533895 100%);
  color: var(--promo-white);
  font-size: 12px;
  font-weight: var(--font-black);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 1.4;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
}
.promo-treasure__title {
  font-size: 23px;
  font-weight: var(--font-black);
  line-height: 1.55;
  margin-bottom: 16px;
  text-shadow: 0 2px 18px rgba(0, 24, 44, 0.7);
}
/* シルエットの下に置く注記 */
.promo-treasure__note {
  margin-top: 22px;
  font-size: 11px;
  font-weight: var(--font-bold);
  line-height: 1.6;
  color: rgba(226, 244, 255, 0.72);
}

.promo-treasure__lead {
  font-size: 13px;
  font-weight: var(--font-bold);
  line-height: 1.95;
  color: rgba(226, 244, 255, 0.88);
  margin-bottom: 36px;
}

/* レアトレジャー: シルエット＋虹色の縁（正体は明かさない） */
.promo-treasure__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 18px;
  max-width: 320px;
  margin: 0 auto;
}
/*
 * レアトレジャー: シルエットの輪郭に沿って光が流れる。
 *
 * 素材のPNGをマスクとして使い、同じ形を2枚重ねている。
 *   ::before … ひとまわり大きい形にグラデーションを敷いたもの（＝光る縁）
 *   ::after  … 実寸の形を #020022 で塗ったもの（＝シルエット本体）
 * 下の層が周囲にはみ出すぶんが縁として見え、
 * グラデーションの角度を回すと光が輪郭をなぞって進む。
 *
 * マスクのURLはこのCSS内で指定している。
 * カスタムプロパティ経由でHTML側から渡すと、相対URLがCSSファイル基準で
 * 解決されてしまい404になるため（Chromeの挙動）、ここに直接書いている。
 *
 * 角度をアニメーションさせるには @property での型登録が必要
 * （未対応ブラウザでは静止した縁として見えるだけで、崩れはしない）。
 */
@property --tr-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
/* 虹より速く流れる白金のハイライト用 */
@property --tr-shine {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.promo-treasure__item {
  position: relative;
  width: 88px;
  aspect-ratio: 1;
  /*
   * 形に沿った外向きの発光。
   * ::before / ::after はマスクで切り取られるため、その外側には描けない。
   * マスクの掛かっていないこの要素に filter を当てることで、
   * シルエットの輪郭から外へ光がにじむ。
   */
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 12px rgba(255, 196, 92, 0.55));
  animation: tr-float 5.2s ease-in-out infinite;
}

/*
 * 金色の後光（円形）。
 * マスクの外まで広げたいので、マスクを掛けない子要素として置き、
 * z-index: -1 でシルエットと虹の縁の後ろに回している。
 */
.promo-treasure__halo {
  position: absolute;
  inset: -34%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side circle,
    rgba(255, 240, 198, 0.62) 0%,
    rgba(255, 206, 108, 0.42) 30%,
    rgba(255, 176, 52, 0.19) 50%,
    rgba(255, 160, 30, 0) 70%);
  animation: tr-halo 4.6s ease-in-out infinite;
}

/*
 * 光る縁。実寸より4px大きい同じ形。
 * 背景を2枚重ねている（先に書いたほうが手前）。
 *   1枚目 … 白金のハイライト2本。虹より速く回り、光が流れて見える
 *   2枚目 … 虹そのもの。ゆっくり回って色が輪郭をなぞる
 */
.promo-treasure__item::before {
  content: '';
  position: absolute;
  inset: -4px;
  background:
    conic-gradient(from var(--tr-shine),
      rgba(255, 255, 255, 0)      0deg,
      rgba(255, 255, 255, 0)     22deg,
      rgba(255, 255, 255, 0.95)  40deg,
      rgba(255, 246, 214, 0.7)   52deg,
      rgba(255, 255, 255, 0)     76deg,
      rgba(255, 255, 255, 0)    200deg,
      rgba(255, 255, 255, 0.8)  218deg,
      rgba(255, 255, 255, 0)    246deg,
      rgba(255, 255, 255, 0)    360deg),
    conic-gradient(from var(--tr-angle),
      #ff2f57   0deg,
      #ff9a1f  51deg,
      #ffe243 103deg,
      #37e07d 154deg,
      #2fd8ff 206deg,
      #4a7cff 257deg,
      #b44dff 309deg,
      #ff2f57 360deg);
  /* 縁は面積が小さいので、彩度と明度を上げて虹として見えるようにする */
  filter: saturate(1.45) brightness(1.14);
  animation: tr-spin 7s infinite,
             tr-shine 3.4s linear infinite;
}

/*
 * 周囲のキラキラ。
 * シルエットより手前に出したいので z-index: 1（後光は -1 で後ろ）。
 * 2つの疑似要素に粒を分け、明滅の周期をずらして
 * 全部が同時に光らないようにしている。
 */
.promo-treasure__sparkles {
  position: absolute;
  inset: -30%;
  z-index: 1;
  pointer-events: none;
}
.promo-treasure__sparkles::before,
.promo-treasure__sparkles::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.promo-treasure__sparkles::before {
  background-image:
    /* 1つだけ十字の光条を持たせる。全部に付けると賑やかになりすぎる */
    radial-gradient(8px 1px at 13% 21%, rgba(255,255,255,0.34) 0%, rgba(255,236,182,0) 72%),
    radial-gradient(1px 8px at 13% 21%, rgba(255,255,255,0.34) 0%, rgba(255,236,182,0) 72%),
    radial-gradient(2.2px 2.2px at 13% 21%, rgba(255,255,255,0.85) 0%, rgba(255,236,182,0.5) 36%, rgba(255,214,120,0) 74%),
    radial-gradient(1.5px 1.5px at 90% 72%, rgba(255,255,255,0.7) 0%, rgba(255,236,182,0.4) 38%, rgba(255,214,120,0) 76%);
  animation: tr-sparkle 3.4s ease-in-out infinite;
}
.promo-treasure__sparkles::after {
  background-image:
    radial-gradient(1.8px 1.8px at 78% 12%, rgba(255,255,255,0.75) 0%, rgba(255,240,200,0.42) 36%, rgba(255,214,120,0) 74%),
    radial-gradient(1.4px 1.4px at 20% 86%, rgba(255,255,255,0.65) 0%, rgba(214,246,255,0.38) 38%, rgba(160,230,255,0) 76%);
  animation: tr-sparkle 4.6s ease-in-out 1.9s infinite;
}
/* 明滅。1周のうちに強弱を2回作って、規則的に見えないようにしている */
@keyframes tr-sparkle {
  0%, 100% { opacity: 0; }
  26%      { opacity: 0.85; }
  52%      { opacity: 0.1; }
  74%      { opacity: 0.5; }
}

/* シルエット本体 */
.promo-treasure__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #020022;
}

/* 素材ごとのマスク。差し替えるときはここのファイル名を変える */
.promo-treasure__item--crystal::before,
.promo-treasure__item--crystal::after {
  -webkit-mask: url('../assets/treasure/crystal.webp?v=20260820') center / contain no-repeat;
          mask: url('../assets/treasure/crystal.webp?v=20260820') center / contain no-repeat;
}
.promo-treasure__item--dart::before,
.promo-treasure__item--dart::after {
  -webkit-mask: url('../assets/treasure/dart.webp?v=20260820') center / contain no-repeat;
          mask: url('../assets/treasure/dart.webp?v=20260820') center / contain no-repeat;
}
.promo-treasure__item--chip::before,
.promo-treasure__item--chip::after {
  -webkit-mask: url('../assets/treasure/chip.webp?v=20260820') center / contain no-repeat;
          mask: url('../assets/treasure/chip.webp?v=20260820') center / contain no-repeat;
}
.promo-treasure__item--sleipnir::before,
.promo-treasure__item--sleipnir::after {
  -webkit-mask: url('../assets/treasure/sleipnir.webp?v=20260820') center / contain no-repeat;
          mask: url('../assets/treasure/sleipnir.webp?v=20260820') center / contain no-repeat;
}
.promo-treasure__item--blade::before,
.promo-treasure__item--blade::after {
  -webkit-mask: url('../assets/treasure/blade.webp?v=20260820') center / contain no-repeat;
          mask: url('../assets/treasure/blade.webp?v=20260820') center / contain no-repeat;
}

/*
 * 回転は等速にせず、半周ごとに加減速させる。ただし完全には止めない。
 * cubic-bezier の始点・終点の傾きが 0 だとキーフレームで速度がゼロになり
 * 光が静止して見えるため、両端の制御点を少し持ち上げている（0.08 / 0.92）。
 * 5つとも同じタイミングで動かす（遅延は付けない）。
 */
@keyframes tr-spin {
  0%   { --tr-angle:   0deg; animation-timing-function: cubic-bezier(0.6, 0.08, 0.4, 0.92); }
  50%  { --tr-angle: 180deg; animation-timing-function: cubic-bezier(0.6, 0.08, 0.4, 0.92); }
  100% { --tr-angle: 360deg; }
}
/* ハイライトは等速。止まると光が流れて見えないため */
@keyframes tr-shine {
  to { --tr-shine: 360deg; }
}
@keyframes tr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* 後光の呼吸。5つが揃って動くと機械的なので、下で1つずつずらす */
@keyframes tr-halo {
  0%, 100% { opacity: 0.7; transform: scale(0.93); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

/*
 * 上下のゆらぎと後光の呼吸だけ、アイテムごとに周期をずらす。
 * 虹の回転（tr-spin / tr-shine）は5つ揃えたままにしている。
 */
.promo-treasure__item:nth-child(1) { animation-duration: 5.2s; animation-delay: 0s; }
.promo-treasure__item:nth-child(2) { animation-duration: 4.4s; animation-delay: 0.5s; }
.promo-treasure__item:nth-child(3) { animation-duration: 5.8s; animation-delay: 0.2s; }
.promo-treasure__item:nth-child(4) { animation-duration: 4.8s; animation-delay: 0.8s; }
.promo-treasure__item:nth-child(5) { animation-duration: 5.5s; animation-delay: 0.35s; }
.promo-treasure__item:nth-child(1) .promo-treasure__halo { animation-delay: 0s; }
.promo-treasure__item:nth-child(2) .promo-treasure__halo { animation-delay: 1.1s; }
.promo-treasure__item:nth-child(3) .promo-treasure__halo { animation-delay: 0.4s; }
.promo-treasure__item:nth-child(4) .promo-treasure__halo { animation-delay: 1.7s; }
.promo-treasure__item:nth-child(5) .promo-treasure__halo { animation-delay: 0.75s; }
.promo-treasure__item:nth-child(2) .promo-treasure__sparkles::before { animation-delay: 0.9s; }
.promo-treasure__item:nth-child(3) .promo-treasure__sparkles::before { animation-delay: 1.8s; }
.promo-treasure__item:nth-child(4) .promo-treasure__sparkles::before { animation-delay: 0.45s; }
.promo-treasure__item:nth-child(5) .promo-treasure__sparkles::before { animation-delay: 2.3s; }
.promo-treasure__item:nth-child(2) .promo-treasure__sparkles::after  { animation-delay: 2.6s; }
.promo-treasure__item:nth-child(3) .promo-treasure__sparkles::after  { animation-delay: 0.6s; }
.promo-treasure__item:nth-child(4) .promo-treasure__sparkles::after  { animation-delay: 3.1s; }
.promo-treasure__item:nth-child(5) .promo-treasure__sparkles::after  { animation-delay: 1.75s; }

/* ===========================================
   最後のCTA
   バナーの作り（濃紺のリボン → 見出し → 罫線 → サブ文）を踏襲して、
   ページ全体と地続きに見えるようにしている。
   配色はバナーから実測した値を使用:
     リボン #3C3385→#533895 / 見出し 青 #2D84DF→マゼンタ #C43893
=========================================== */
.promo-cta {
  position: relative;
  /*
   * 背景はページ全体と同じ色にする。
   * 以前は上端を #e9f6ff にしたグラデーションを敷いていたが、
   * 直前のセクションとの境目で色が変わって見えていた。
   */
  background: var(--promo-bg);
  /*
   * 見出し（サクッと〜／事前登録受付中！）の文字サイズ。
   * リボンとタイトルの幅もこの値から決まる。
   *
   * 38pxが指定値。狭い端末では収まらないため、そこだけ縮める。
   * 折り返さない条件で決まるのは「豪華報酬を狙え！」の送り幅（7.237倍）。
   *   カードの内側幅 = 画面幅 - 32(セクション) - 36(カード)
   *   収まる条件 = 7.237 × 文字サイズ ≦ 内側幅 → 320pxで34.8px
   * 10.8vw がその境界。352px以上では指定どおり38pxになる。
   */
  --cta-head: min(38px, 10.8vw);
  /*
   * 「今秋リリース予定」「事前登録受付中！」用。見出しの半分。
   * この2つはフォントも Zen Maru Gothic に戻している。
   */
  --cta-sub: calc(var(--cta-head) * 0.5);
  padding: 34px 16px 44px;
  overflow: hidden;
}

/*
 * 中央から放射する薄い光。CTAに視線を集める。
 * 中心が上端寄りだと、セクションの上端だけ白っぽくなって
 * 背景色が変わったように見えるため、中心を下げて濃度も落としている。
 */
.promo-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4%;
  width: 150%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.5) 0deg 6deg,
    rgba(255, 255, 255, 0) 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 66%);
          mask-image: radial-gradient(closest-side, #000 0%, transparent 66%);
  opacity: 0.26;
  animation: cta-rays 60s linear infinite;
}
@keyframes cta-rays { to { transform: translateX(-50%) rotate(360deg); } }

/* 背景は敷かず、ページの地の上に直接組む */
.promo-cta__card {
  position: relative;
  z-index: 1;
  padding: 8px 18px 4px;
  text-align: center;
}

/* 見出し・ロゴ・リボン・タイトルをまとめた箱 */
.promo-cta__hero { position: relative; }
.promo-cta__hero > .promo-cta__lead,
.promo-cta__hero > .promo-cta__ribbon,
.promo-cta__hero > .promo-cta__title { position: relative; z-index: 1; }

/*
 * 見出し2行の下のロゴ。
 * KVのロゴと同じく、右の「X」から伸びる光が画像内の余白を作っていて
 * 文字の重心が中心より3.40%左にあるため、その分だけ右に寄せている。
 */
.promo-cta__logo {
  display: block;
  width: min(90%, 300px);
  height: auto;
  /* ここから下は別のかたまり（告知）なので、間隔を取る */
  margin: 0 auto 22px;
  transform: translateX(3.40%);
}


/*
 * アプリアイコンの上の2行。バナーの見出しと同じ作り。
 * 「事前登録受付中！」と同じ Zen Maru Gothic の900。
 *
 * 白縁は text-shadow を放射状に並べて作っている。
 * -webkit-text-stroke だと線が字形の中心に乗って文字が細るうえ、
 * paint-order の HTML文字への対応がブラウザで揃わないため使っていない。
 *
 * 字送りは palt（日本語のツメ組み）を有効にし、
 * 行末の「、」「！」で生まれる空きぶんは行ごとに光学補正している（下記）。
 */
.promo-cta__lead {
  font-family: var(--font-cta);
  /* ロゴとは1つのかたまりに見せたいので詰める */
  margin-bottom: 14px;
  /*
   * 左右にスクショを見せるため、34px → 24px に落としている。
   * 実際の値は .promo-cta の --cta-head で持っている。
   */
  font-size: var(--cta-head);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.005em;
  font-feature-settings: 'palt' 1;
  font-kerning: normal;
  text-align: center;
}
/*
 * 斜体。このフォントに斜体はないので、字形を傾けて作っている。
 * transform は配置に影響しないため、行の位置は変わらない。
 */
.promo-cta__lead span {
  display: block;
  position: relative;
  transform: skewX(-8deg);
  text-shadow:
    /* 白縁。em指定なので文字サイズを変えても太さの比率が変わらない */
       0.115em      0.0em 0 #fff,    0.1062em    0.044em 0 #fff,    0.0813em   0.0813em 0 #fff,     0.044em   0.1062em 0 #fff,
         0.0em    0.115em 0 #fff,    -0.044em   0.1062em 0 #fff,   -0.0813em   0.0813em 0 #fff,   -0.1062em    0.044em 0 #fff,
      -0.115em      0.0em 0 #fff,   -0.1062em   -0.044em 0 #fff,   -0.0813em  -0.0813em 0 #fff,    -0.044em  -0.1062em 0 #fff,
        -0.0em   -0.115em 0 #fff,     0.044em  -0.1062em 0 #fff,    0.0813em  -0.0813em 0 #fff,    0.1062em   -0.044em 0 #fff,
    /* ドロップシャドウ */
    0 3px 6px rgba(13, 43, 77, 0.3);
}
/*
 * left は字面の中心を画面中央に合わせるための光学補正（実測値）。
 * 行末の「、」「！」の空きぶん、中央揃えのままだとずれる。
 */
.promo-cta__lead-a { color: #2C84DD; }
/* 斜体を掛けたあとの実測値で、字面の中心を画面中央に合わせる */
.promo-cta__lead-b { color: #C33795; left: 0.026em; }

/*
 * 字詰め。
 * Google Fonts版の Zen Maru Gothic には palt（日本語のツメ組み）が
 * 入っていないため（有効にしても字幅が1pxも変わらないことを確認）、
 * 字面の空きが目立つ文字だけ手で詰めている。
 * i / b / u はスタイルを持たせないための入れ物として使っている。
 */
.promo-cta__lead i,
.promo-cta__lead b,
.promo-cta__lead u,
.promo-cta__title u {
  font-style: inherit;
  font-weight: inherit;
  text-decoration: none;
}
/*
 * 小さいカタカナの詰め。
 * -0.045em は前のフォント（Zen Maru Gothic）向けの値で、
 * Corporate Logo だと字面が広く、隣の字と重なってしまう。
 */
.promo-cta__lead i { margin: 0 0; }
/* 行末の読点は字面が左下だけ。右half分の空きを削る */
.promo-cta__lead b { margin-right: -0.44em; }
/* 感嘆符は左右に余白がある。右を多め、左は少しだけ */
.promo-cta__lead u,
.promo-cta__title u { margin-left: -0.06em; margin-right: -0.2em; }

/*
 * バナー上部と同じ、両端が尖った濃紺のリボン。
 * この要素が見出しより横に広い（文字サイズの7.97倍）ため、
 * 左右のスクショの位置はこの幅を基準に決めている。
 * 余白と尖りは em で持ち、文字サイズに追従させている。
 */
.promo-cta__ribbon {
  display: inline-block;
  padding: 0.5em 1.8em;
  margin-bottom: 8px;
  background: linear-gradient(96deg, #3C3385 0%, #533895 100%);
  color: var(--promo-white);
  font-size: calc(var(--cta-sub) * 0.63);
  font-weight: var(--font-black);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 1.4;
  clip-path: polygon(0.722em 0, calc(100% - 0.722em) 0, 100% 50%,
                     calc(100% - 0.722em) 100%, 0.722em 100%, 0 50%);
}

.promo-cta__title {
  /* フォントは本文と同じ Zen Maru Gothic。サイズは見出しの半分 */
  font-size: var(--cta-sub);
  font-weight: var(--font-black);
  line-height: 1.3;
  /*
   * 「豪華報酬を狙え！」と同じ字送りにしている。
   * どちらも全角8文字なので、字送りと感嘆符の詰めを揃えると
   * 字面の幅がそろう（0.01em のままだと1.4pxずれる）。
   */
  letter-spacing: 0.005em;
  margin-bottom: 22px;
  background: linear-gradient(96deg, #2D84DF 0%, #2D84DF 34%, #C43893 88%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /*
   * 白縁。上2行と同じ太さに揃えている（ドロップシャドウは付けない）。
   *
   * ここでは text-shadow が使えない。この見出しは文字の色を透明にして
   * 背景のグラデーションを文字型に切り抜いているため、
   * 背景 → 影 → 文字（透明）の順に塗られ、影が文字を覆ってしまう。
   * filter は要素を描き終えたあとに掛かるので、白がグラデーションの
   * 後ろに回る。
   *
   * drop-shadow は数珠つなぎに掛かる（2つめは1つめの結果に掛かる）ため、
   * 重ねすぎると縁が想定以上に太る。最初は12個重ねて上の行より
   * 明らかに太くなっていた。4方向×2周に抑えて、上の行の白縁と
   * 同じ太さ（0.115em相当）に合わせている。px固定だと文字サイズを
   * 変えたときに合わなくなるため em で持っている。
   */
  filter:
    drop-shadow(0.046em 0 0 #fff) drop-shadow(0 0.046em 0 #fff)
    drop-shadow(-0.046em 0 0 #fff) drop-shadow(0 -0.046em 0 #fff)
    drop-shadow(0.046em 0 0 #fff) drop-shadow(0 0.046em 0 #fff)
    drop-shadow(-0.046em 0 0 #fff) drop-shadow(0 -0.046em 0 #fff);
  /*
   * グラデーションは要素の幅に伸びるため、文字幅に合わせる。
   * fit-content の幅は感嘆符の詰め（負のマージン）ぶん縮むので、
   * nowrap を付けないと最後の1文字が次の行に落ちる。
   */
  white-space: nowrap;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  /*
   * 感嘆符の詰めで箱が左に縮むぶん、字面の中心が3.3px左にずれる。
   * 上の2行と同じように光学補正する。
   */
  position: relative;
  left: 0.098em;
}

.promo-cta .store-cta { max-width: 320px; margin: 0 auto; }

/*
 * ストアバッジ直下のキャプション。
 * 以前は罫線で挟んだ青文字だったが、主役はバッジなので
 * 目立たないグレーの小さい文字に変更した。
 * 幅はバッジ側（max-width: 320px）に合わせている。
 * 文字色は地（#e9f6ff〜#def3ff）に対して4.76:1で基準を満たす。
 */
.promo-cta__note {
  max-width: 320px;
  margin: 6px auto 0;
  font-size: 11px;
  line-height: 1.6;
  color: #5F6B78;
  /* バッジの左端に揃える（幅はバッジと同じ320px） */
  text-align: left;
}

.promo-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  padding: 13px 28px;
  border-radius: 9999px;
  background: #101014;
  color: var(--promo-white);
  font-size: 14px;
  font-weight: var(--font-bold);
  box-shadow: 0 6px 16px rgba(13, 43, 77, 0.26);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.promo-x:hover, .promo-x:focus-visible { background: #2a2a2f; transform: translateY(-1px); }
.promo-x img { width: 17px; height: 17px; }

/* 追従バーに隠れないための余白 */
.promo-tail { height: 76px; background: var(--promo-bg); }

/* スクロールに応じたフェードイン（要件書 アニメーション2） */
.js-anim .promo-reveal { opacity: 0; transform: translateY(22px) scale(0.975); }
.promo-reveal { transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.promo-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .promo-reveal { opacity: 1; transform: none; }
  .promo-reveal { transition: none; }
  .promo-treasure::before,
  .promo-treasure__item,
  .promo-treasure__item::before,
  .promo-treasure__halo,
  .promo-treasure__sparkles::before,
  .promo-treasure__sparkles::after,
  .promo-cta::before { animation: none; }
}


/* ===========================================
   アニメーション
   ・登場: 背景 → 奥 → 中 → 手前 → ロゴ → コピー → CTA
   ・常時: グループごとにゆっくり上下（止まった絵に見せない）
=========================================== */

/* JSが有効なときだけ初期状態を隠す（JS無効なら最初から見えている） */
.js-anim .kv-layer,
.js-anim .kv-catchcopy,
.js-anim .kv-logo-wrap,
.js-anim .kv-reg-label-group,
.js-anim .store-cta--inline { opacity: 0; }

@keyframes kv-bg-in {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kv-layer-in {
  from { opacity: 0; transform: translateY(16px) scale(0.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kv-text-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kv-logo-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  70%  { opacity: 1; transform: translateY(0) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* 常時のゆらぎ。グループごとに周期と振れ幅を変えて、同時に動いて見えないようにする */
@keyframes kv-float-far  { 0%,100% { transform: translateY(0); }    50% { transform: translateY(-5px); } }
@keyframes kv-float-mid  { 0%,100% { transform: translateY(0); }    50% { transform: translateY(-3px); } }
@keyframes kv-float-near { 0%,100% { transform: translateY(0); }    50% { transform: translateY(-6px); } }
@keyframes kv-drift      { 0%,100% { transform: scale(1) translateX(0); } 50% { transform: scale(1.015) translateX(-4px); } }

.is-ready .kv-layer--bg {
  animation: kv-bg-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
             kv-drift 26s ease-in-out 0.9s infinite;
}

/* 登場後、同じ要素で「登場」→「ゆらぎ」を連結する */
.is-ready .kv-layer--far {
  animation: kv-layer-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both,
             kv-float-far 5.5s ease-in-out 0.95s infinite;
}
.is-ready .kv-layer--mid {
  animation: kv-layer-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.40s both,
             kv-float-mid 4.6s ease-in-out 1.10s infinite;
}
.is-ready .kv-layer--near {
  animation: kv-layer-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both,
             kv-float-near 3.9s ease-in-out 1.30s infinite;
}
/* 同じグループ内でも少しずつずらす */
.is-ready .kv-layer[data-i="1"] { animation-delay: 0.30s, 1.15s; }
.is-ready .kv-layer[data-i="2"] { animation-delay: 0.35s, 1.45s; }
.is-ready .kv-layer[data-i="3"] { animation-delay: 0.45s, 1.60s; }

/*
 * 赤髪の少年と左の大男は浮かせない。
 * 地面に立っているキャラが上下すると不自然なため、登場だけさせて静止させる。
 * data-i の遅延指定より後に置いて上書きする。
 */
.is-ready .kv-layer--still {
  animation: kv-layer-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.is-ready .kv-catchcopy     { animation: kv-text-in 0.6s ease-out 0.75s both; }
.is-ready .kv-logo-wrap     { animation: kv-logo-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.90s both; }
.is-ready .kv-reg-label-group { animation: kv-text-in 0.6s ease-out 1.25s both; }
.is-ready .store-cta--inline  { animation: kv-text-in 0.6s ease-out 1.45s both; }

/* 「視差効果を減らす」設定では、動かさず完成形をすぐ出す */
@media (prefers-reduced-motion: reduce) {
  .js-anim .kv-layer,
  .js-anim .kv-catchcopy,
  .js-anim .kv-logo-wrap,
  .js-anim .kv-reg-label-group,
  .js-anim .store-cta--inline { opacity: 1; }
  .is-ready .kv-layer,
  .is-ready .kv-layer--bg,
  .is-ready .kv-catchcopy,
  .is-ready .kv-logo-wrap,
  .is-ready .kv-reg-label-group,
  .is-ready .store-cta--inline { animation: none !important; }
  .store-cta--fixed { transition: none; }
}


/* ===========================================
   フッター（公式サイト src/css/style.css から流用）
   SP専用のため、タブレット・PC用の指定は取り込んでいない。
=========================================== */
.site-footer {
  /* グラデーション本体 — パターンは ::before で opacity 20% */
  background-color: #40c2ff;
  background-image: var(--gradient-footer);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  position: relative;
  z-index: 10;
  /* SP Footer 432:1438 */
  padding: 50px 16px 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/bg/footer-pattern.webp?v=20260818');
  background-repeat: repeat;
  /* Figma「140%」= タイル元 208px 基準（%のみ指定するとフッター幅に対する140%になり歪む） */
  background-size: calc(208px * 1.4) calc(208px * 1.4);
  background-position: center center;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

.footer-inner {
  width: 100%;
  max-width: 390px;
  display: flex;
  /* SP 432:1438: Text → bar → brand（column-reverse で DOM brand,bar,links） */
  flex-direction: column-reverse;
  align-items: center;
  gap: 45px;
}

/* パートナーロゴ + コピーライト（現状: GameWith NFT） */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* Figma 403:411 パートナーロゴ矩形 200×26.09（画像 391×51 を同比率） */
.footer-brand__logo {
  display: block;
  width: 200px;
  height: auto;
  max-height: 27px;
  object-fit: contain;
  object-position: left center;
}

.footer-brand__copy {
  font-size: 12px;
  font-weight: var(--font-bold);
  color: var(--promo-white);
  line-height: 1.5;
  text-align: center;
}

/*
 * 区切りバー。このLPはSP準拠なので、どの幅でも横向きのまま使う
 * （公式サイトは810px以上で縦向きにしているが、それは踏襲しない）。
 */
.footer-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 235px;
  height: 10px;
}

.footer-divider__img {
  display: block;
  width: 170px;
  height: 10px;
  flex-shrink: 0;
}

/* NOTE: 公式サイトは810px以上で区切り棒を縦向きにしているが、
   このLPはSP準拠で横向きのまま使う */


/* リンク・ソーシャル */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/*
 * 規約系のテキストリンク（Figma: 16px / line-height 1.5）。
 * 遷移先が未定のため <span> で置き、ホバー時のみ下線を出す。
 * href が決まったら <a> に変えて、この指定はそのまま流用できる。
 */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  align-items: center;
}

.footer-nav__item {
  display: inline-block;
  font-size: 16px;
  font-weight: var(--font-bold);
  color: var(--promo-white);
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.footer-nav__item:hover,
.footer-nav__item:focus-visible {
  text-decoration: underline;
  opacity: 0.85;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.footer-social__label {
  font-size: 12px;
  font-weight: var(--font-bold);
  color: var(--promo-white);
  line-height: 1.5;
  text-align: center;
}

.footer-social__icons {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
}

.footer-social__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  transition: filter 0.2s ease;
}

/* アイコンは35px角だが、指で押す範囲だけ44px角に広げる（左右の間隔15pxなので重ならない）*/
.footer-social__link::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.footer-social__link:hover {
  filter: brightness(1.2);
}

.footer-social__link img {
  width: 35px;
  height: 35px; /* viewBox 35×35 */
}