/* ===========================================
   EGGRYPTOX — Responsive Website Styles
   Breakpoints:
     Mobile:        390px  (base)
     Tablet:        810px
     Desktop SM:   1200px
     Desktop LG:   1440px
=========================================== */

/* ===========================================
   CSS Variables
=========================================== */
:root {
  --color-bg: #e5f5f3;
  --color-text: #715c63;
  --color-white: #ffffff;
  --color-btn-x: #000000;
  --color-phone-border: #4EE4BC;

  --gradient-primary: linear-gradient(96.55deg, #40c2ff 0%, #1cb3eb 98.005%);
  --gradient-footer: linear-gradient(93deg, #40c2ff 0%, #1cb3eb 98%);

  --font-family: 'Zen Maru Gothic', sans-serif;
  --font-bold: 700;
  --font-black: 900;

  --shadow-text: 0px 4px 10px rgba(0, 0, 0, 0.6);
  --shadow-phone: 0px 10px 30px rgba(0, 0, 0, 0.15);
}

/* ===========================================
   Reset & Base
=========================================== */
*, *::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 {
  /*
   * 水平スクロール抑止:
   * iOS Safari は html だけに overflow-x: hidden を指定しても
   * 水平スクロールが完全には止まらない既知の挙動があるため、
   * より確実な overflow-x: clip を併用する（hidden をフォールバック）。
   */
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-bold);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-width: 320px;
  /*
   * 装飾用の絶対配置要素（卵・モンスター・トレジャー画像など）が
   * 親の右端からはみ出した際に、body が viewport より広く伸びてしまうのを防ぐ。
   * html だけだと iOS Safari で抑え切れないため body 側にも指定。
   */
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ===========================================
   ヘッダー
=========================================== */
.site-header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  /* Mobile: 340px wide */
  width: 340px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 9999px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* Tablet */
@media (min-width: 810px) {
  .site-header {
    width: 760px;
  }
  .header-logo {
    height: 42px;
  }
}

/* Desktop SM */
@media (min-width: 1200px) {
  .site-header {
    width: 1200px;
    justify-content: center;
  }
  .header-logo {
    height: 50px;
  }
}

/* Desktop LG (same width as SM for header) */
@media (min-width: 1440px) {
  .site-header {
    width: 1200px;
  }
}

/* ===========================================
   KV（キービジュアル）
=========================================== */
.kv {
  position: relative;
  width: 100%;
  /* Mobile: 590px（CTAボタンとキャラクターの余白短縮 & 事前登録ブロックを上に移動するため） */
  height: 590px;
  background-color: var(--color-bg);
  overflow: hidden;
  /* 子要素のz-index(.kv::after等)を.kv内に閉じ込め、後続セクションの要素に影響させない */
  isolation: isolate;
}

/* ゲームシーン背景 */
.kv-bg-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.kv-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* KV下部グラデーションフェード */
.kv::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%);
  pointer-events: none;
  z-index: 2;
}

/* コンテンツラッパー */
.kv-content {
  position: absolute;
  top: 102px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Mobile: 事前登録ブロックを上に移動するため270px→200pxに短縮 */
  gap: 200px;
  /* KV下部グラデーション(.kv::after)より前面に表示 */
  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;
  /* SP: font-size 18px */
  font-size: 18px;
  font-weight: var(--font-bold);
  color: var(--color-white);
  letter-spacing: 0.3em;
  text-shadow: var(--shadow-text);
  padding: 2px 0;
  /* SP: width 289px */
  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(--color-white);
  text-shadow: var(--shadow-text);
  letter-spacing: 0.15em;
  text-align: center;
}

.kv-logo-wrap {
  /* SP: width 308px */
  width: 308px;
}

.kv-logo {
  width: 100%;
  object-fit: contain;
}

/* 事前登録CTA */
.kv-registration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* 今秋リリース予定 + 事前登録受付中！ のラベルグループ */
.kv-reg-label-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 今秋リリース予定 */
.kv-release-text {
  font-size: 18px;
  font-weight: var(--font-bold);
  color: var(--color-white);
  letter-spacing: 0.3em;
  text-shadow: var(--shadow-text);
  text-align: center;
  white-space: nowrap;
  line-height: normal;
}

.kv-reg-label {
  font-size: 18px;
  font-weight: var(--font-bold);
  color: var(--color-white);
  letter-spacing: 0.2em;
  text-shadow: var(--shadow-text);
  text-align: center;
  white-space: nowrap;
  line-height: normal;
}

/* CTA ボタングループ */
.kv-cta-group {
  display: flex;
  /* SP: vertical stack */
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* CTA ボタン共通 */
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  border-radius: 9999px;
  font-family: var(--font-family);
  font-weight: var(--font-bold);
  color: var(--color-white);
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.cta-btn:hover {
  filter: brightness(1.2);
}

/* X (Twitter) ボタン */
.cta-btn--x {
  background: var(--color-btn-x);
  /* SP: 214px */
  min-width: 214px;
  transition: background-color 0.2s ease, filter 0.2s ease;
}

/* 黒背景はbrightnessフィルタでは変化しないため、背景色自体を持ち上げる */
.cta-btn--x:hover {
  background: #2a2a2a;
}

.cta-btn__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* X button icon: x-twitter.svg viewBox 24×21.6722 */
.cta-btn--x .cta-btn__icon img {
  width: 24px;
  height: 22px;
}

.cta-btn__label {
  font-size: 16px;
}

/* KV Tablet ---------------------------------------- */
@media (min-width: 810px) {
  .kv {
    height: 900px;
  }

  .kv-content {
    top: 130px;
    gap: 290px;
  }

  .kv-catchcopy {
    font-size: 24px;
    width: 380px;
  }

  .kv-logo-wrap {
    width: 480px;
  }

  .kv-release-text {
    font-size: 24px;
  }

  .kv-reg-label {
    font-size: 24px;
  }

  .kv-cta-group {
    flex-direction: row;
  }

  .cta-btn__label {
    font-size: 20px;
  }

  .cta-btn--x {
    min-width: 250px;
  }
}

/* KV Desktop SM -------------------------------------- */
@media (min-width: 1200px) {
  .kv {
    height: 1092px;
  }

  .kv-content {
    top: 145px;
    gap: 340px;
  }

  .kv-catchcopy {
    font-size: 30px;
    width: 460px;
  }

  .kv-logo-wrap {
    width: 640px;
  }

  .kv-release-text {
    font-size: 30px;
  }

  .kv-reg-label {
    font-size: 30px;
  }

  .cta-btn__label {
    font-size: 22px;
  }

  .cta-btn--x {
    min-width: 268px;
  }
}

/* KV Desktop LG -------------------------------------- */
@media (min-width: 1440px) {
  .kv {
    height: 1092px;
  }

  .kv-content {
    top: 145px;
    gap: 360px;
  }

  .kv-catchcopy {
    font-size: 32px;
    width: 513px;
    letter-spacing: 9.6px;
  }

  .kv-logo-wrap {
    width: 700px;
  }

  .kv-release-text {
    font-size: 32px;
    letter-spacing: 9.6px;
  }

  .kv-reg-label {
    font-size: 32px;
    letter-spacing: 6.4px;
  }

  .cta-btn__label {
    font-size: 24px;
    letter-spacing: 2.4px;
  }

  .cta-btn--x {
    min-width: 280px;
  }
}

/* ===========================================
   ページコンテンツ（メインエリア）
=========================================== */
.page-content {
  position: relative;
  /* overflow-x はhtml/bodyで管理 */
}


/* ===========================================
   コンテンツラッパー
=========================================== */
.contents {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 128px;
  /* Mobile: 上部paddingを60px→20pxに短縮（CTAボタンとキャラクターの余白短縮のため） */
  padding: 20px 22px 120px;
  max-width: 390px;
  margin: 0 auto;
}

/* Tablet */
@media (min-width: 810px) {
  .contents {
    max-width: 810px;
    padding: 80px 60px 120px;
  }
}

/* Desktop SM */
@media (min-width: 1200px) {
  .contents {
    max-width: 1200px;
    padding: 100px 100px 120px;
  }
}

/* Desktop LG */
@media (min-width: 1440px) {
  .contents {
    max-width: 1440px;
    padding: 120px 200px 120px;
  }
}

/* ===========================================
   セクション共通スタイル
=========================================== */
.game-section {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* テキストブロック */
.section-text {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* センター揃え */
.section-text--centered {
  align-items: center;
  text-align: center;
}

/* 古代種復活セクション: 虹色卵を背面にするためのスタッキングコンテキスト */
.game-section--ancient {
  isolation: isolate;
}

/* セクションタイトル（グラデーション） */
.section-title {
  /* Mobile: 56px */
  font-size: 56px;
  font-weight: var(--font-black);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: normal;
}

.section-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-subtitle {
  /* Mobile: 24px */
  font-size: 24px;
  font-weight: var(--font-black);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: normal;
  display: block;
}

/* セクション本文 */
.section-desc {
  font-size: 16px;
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1.875;
  -webkit-text-stroke: 4px var(--color-bg);
  paint-order: stroke fill;
}

.section-desc p + p {
  margin-top: 30px;
}

.section-desc--centered {
  text-align: center;
}

/* Desktop title sizes */
@media (min-width: 1200px) {
  .section-title {
    font-size: 68px;
  }
  .section-subtitle {
    font-size: 28px;
  }
}

@media (min-width: 1440px) {
  .section-title {
    font-size: 72px;
  }
  .section-subtitle {
    font-size: 30px;
  }
}

/* ===========================================
   フォン・モックアップ
=========================================== */
.phone-mockup {
  position: relative;
  width: 300px;
  /* スクショ(1080:1920 = 9:16)に合わせてアスペクト比調整 */
  aspect-ratio: 1080 / 1920;
  height: auto;
  border-radius: 40px;
  border: 10px solid var(--color-phone-border);
  box-shadow: var(--shadow-phone);
  overflow: hidden;
  flex-shrink: 0;
}

.phone-mockup img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ===========================================
   Desktop: section row layouts
=========================================== */

/* Tablet: side by side layout */
@media (min-width: 810px) {
  /* 冒険・継承・古代種は810pxからrow */
  .game-section--adventure,
  .game-section--inheritance,
  .game-section--ancient {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  /* 巨神戦は810pxではcolumn（Figma準拠）*/
  .game-section--battle {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  /* 冒険: HTML order is text→phone, but visually phone(left)→text(right) on PC */
  .adventure-phone {
    order: -1;
  }

  .section-text {
    flex: 1;
    min-width: 0;
  }

  /* Row layout: reset mobile padding-top */
  .game-section--adventure {
    padding-top: 0;
  }

  .section-text--adventure {
    padding-top: 0;
  }

  .section-text--inheritance {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Desktop SM */
@media (min-width: 1200px) {
  .game-section--adventure,
  .game-section--inheritance,
  .game-section--ancient,
  .game-section--battle {
    flex-direction: row;
    gap: 64px;
    align-items: center;
    justify-content: center;
  }

  .section-text {
    flex: none;
    width: 440px;
  }

  .game-section--ancient .section-text,
  .game-section--battle .section-text {
    width: 400px;
  }

  /* トレジャーセクションはcolumn全幅レイアウト — fixed幅を上書き */
  .game-section--treasure .section-text {
    width: 100%;
    flex: none;
  }
}

/* Desktop LG */
@media (min-width: 1440px) {
  .game-section--adventure,
  .game-section--inheritance,
  .game-section--ancient,
  .game-section--battle {
    gap: 64px;
  }

  .section-text {
    width: 460px;
  }

  .game-section--ancient .section-text,
  .game-section--battle .section-text {
    width: 410px;
  }

  /* トレジャーセクションは全幅を維持 */
  .game-section--treasure .section-text {
    width: 100%;
  }
}

/* ===========================================
   冒険 セクション — モンスター配置
=========================================== */

/* ===========================================
   モンスターグループ — 絶対配置共通
=========================================== */
.monster-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.m-char {
  position: absolute;
}

.monster-group--adventure .m-char {
  filter: drop-shadow(0px 20px 10px rgba(208, 237, 234, 1));
}

/* ===========================================
   冒険 セクション — モンスター・EGG配置
   Figma値: モンスターグループの絶対座標 + 各アイテムのグループ内座標
   390px  group: x=5.71  y=-167.5  → item coords below
   810px  group: x=-1.59 y=-188.63
   1200px group: x=3.15  y=-242.68
   1440px group: x=-27.59 y=-267.84
=========================================== */

/*
 * SP: .monster-group のキャラが section-text 上端より -168px 上にはみ出すため、
 * game-section に padding-top を設けてキャラがセクション内に収まるようにする。
 * section-text の padding-top は タイトルとキャラ下端の間隔確保のために維持。
 */

/* isolation: isolate でスタッキングコンテキストを生成 → 卵の z-index: -1 が text より背面になる */
.section-text--adventure {
  padding-top: 130px;
  isolation: isolate;
}

/* 390px — Figma absolute coords in Text frame */
.monster-group--adventure .m-char--bluedragon {
  width: 186px;
  left: 6px;
  top: -40px;
}

.monster-group--adventure .m-char--alice {
  width: 130px;
  left: 161px;
  top: 10px;
}

.monster-group--adventure .m-char--papaslime {
  width: 60px;
  left: 306px;
  top: 100px;
}

.monster-group--adventure .m-char--slime {
  width: 50px;
  left: 269px;
  top: 130px;
}

/* 810px */
@media (min-width: 810px) {
  .section-text--adventure {
    padding-top: 0;
  }

  .monster-group--adventure .m-char--bluedragon {
    width: 207px;
    left: -2px;
    top: -189px;
  }

  .monster-group--adventure .m-char--alice {
    width: 150px;
    left: 166px;
    top: -111px;
  }

  .monster-group--adventure .m-char--papaslime {
    width: 75px;
    left: 337px;
    top: -21px;
  }

  .monster-group--adventure .m-char--slime {
    width: 55px;
    left: 293px;
    top: 19px;
  }

  /* 継承 keisyo */
  .monster-group--inheritance .m-char--keisyo {
    width: 320px;
    left: 101px;
    top: -263px;
  }
}

/* 1200px */
@media (min-width: 1200px) {
  .monster-group--adventure .m-char--bluedragon {
    width: 273px;
    left: 3px;
    top: -243px;
  }

  .monster-group--adventure .m-char--alice {
    width: 140px;
    left: 235px;
    top: -100px;
  }

  .monster-group--adventure .m-char--papaslime {
    width: 70px;
    left: 400px;
    top: -15px;
  }

  .monster-group--adventure .m-char--slime {
    width: 55px;
    left: 353px;
    top: 19px;
  }

  .monster-group--inheritance .m-char--keisyo {
    width: 350px;
    left: 157px;
    top: -274px;
  }
}

/* 1440px */
@media (min-width: 1440px) {
  .monster-group--adventure .m-char--bluedragon {
    width: 260px;
    left: 0;
    top: -250px;
  }

  .monster-group--adventure .m-char--alice {
    width: 160px;
    left: 213px;
    top: -125px;
  }

  .monster-group--adventure .m-char--papaslime {
    width: 80px;
    left: 395px;
    top: -26px;
  }

  .monster-group--adventure .m-char--slime {
    width: 62px;
    left: 349px;
    top: 11px;
  }

  .monster-group--inheritance .m-char--keisyo {
    width: 370px;
    left: 157px;
    top: -295px;
  }
}

/* ===========================================
   EGG (青い卵) — 冒険セクション Text frame 内絶対配置
   390px: x=224 y=347 w=160
   810px: x=232 y=358 w=220
   1200px: x=306 y=248 w=250
   1440px: x=426 y=245 w=250
=========================================== */
.adv-egg {
  position: absolute;
  z-index: -1;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0px 20px 10px rgba(208, 237, 234, 1));
  /* 390px default */
  left: 224px;
  top: 347px;
  width: 160px;
}

@media (min-width: 810px) {
  .adv-egg {
    left: 232px;
    top: 358px;
    width: 220px;
  }
}

@media (min-width: 1200px) {
  .adv-egg {
    left: 306px;
    top: 248px;
    width: 250px;
  }
}

@media (min-width: 1440px) {
  .adv-egg {
    left: 426px;
    top: 245px;
    width: 250px;
  }
}

/* ===========================================
   継承 セクション — keisyo・EGG_gold配置
=========================================== */
/* SP: keisyo overflows above */
.section-text--inheritance {
  padding-top: 130px;
  isolation: isolate;
}

/* 390px */
.monster-group--inheritance .m-char--keisyo {
  width: 250px;
  left: 130px;
  top: -40px;
}

/* ===========================================
   EGG_gold (金色卵) — 継承セクション Text frame 内絶対配置
   390px: left=137 top=237 w=100 h=106  transform: rotate(-80deg)
   810px+: left=126 top=231 w=122 h=117  transform: rotate(-80deg)
=========================================== */
.inherit-egg {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-80deg);
  filter: drop-shadow(0px 20px 10px rgba(208, 237, 234, 1));
  /* 390px — 指定: top=237 left=137 w=100 h=106 */
  left: 0;
  top: -40px;
  width: 100px;
  height: 106px;
  object-fit: contain;
}

@media (min-width: 810px) {
  .inherit-egg {
    /* 指定: top=231 left=126 w=122 h=117 */
    left: 0;
    top: -40px;
    width: 122px;
    height: 117px;
  }
}

@media (min-width: 1440px) {
  .inherit-egg {
    left: 0;
    top: -150px;
    width: 122px;
    height: 117px;
  }
}

/* ===========================================
   古代種復活 セクション
=========================================== */
.ancient-monster {
  width: 100%;
  max-width: 340px;
}

.ancient-monster img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0px 20px 10px rgba(208, 237, 234, 1));
}

@media (min-width: 810px) {
  .ancient-monster {
    max-width: 360px;
    flex-shrink: 0;
  }
}

@media (min-width: 1200px) {
  .ancient-monster {
    width: 495px;
    max-width: none;
  }
}

/* ===========================================
   巨神戦 セクション — 1枚グループ画像
   レイアウト:
     〜1199px (column):  キャラ上 → テキスト下 → order: -1
     1200px〜  (row):    テキスト左 → キャラ右 → order: 0 (HTML順)
=========================================== */

.battle-monster {
  order: -1;
  width: 100%;
  max-width: 358px;
  flex-shrink: 0;
}

.battle-group-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0px 12.92px 6.46px rgba(208, 237, 234, 1));
}

@media (min-width: 810px) {
  .battle-monster {
    max-width: 556px;
  }

  .battle-group-img {
    filter: drop-shadow(0px 20px 10px rgba(208, 237, 234, 1));
  }
}

@media (min-width: 1200px) {
  .battle-monster {
    order: 0;
  }
}

@media (min-width: 1440px) {
  .battle-monster {
    max-width: 570px;
  }
}

/* ===========================================
   トレジャー セクション — アイテム配置
   Figma: Text frame 内 Frame35/Frame36 の絶対座標
   ─────────────────────────────────────────
   Frame35 (crystal + rolling-chip) / Frame36 (dart + sleipnir)
   の各ブレイクポイント別座標まとめ:

   390px:
     crystal:     left=-39  top=-38  w=79
     rolling:     left=310  top=-38  w=117
     dart:        left=37   top=568  w=145
     sleipnir:    left=211  top=568  w=121

   810px:
     crystal:     left=7    top=0    w=134
     rolling:     left=556  top=0    w=180
     dart:        left=143  top=471  w=199
     sleipnir:    left=382  top=471  w=166

   1200px:
     crystal:     left=162  top=0    w=134
     rolling:     left=711  top=0    w=180
     dart:        left=-39  top=271  w=199
     sleipnir:    left=873  top=271  w=166

   1440px:
     crystal:     left=201  top=0    w=134
     rolling:     left=750  top=0    w=180
     dart:        left=0    top=271  w=199
     sleipnir:    left=912  top=271  w=166
=========================================== */

.game-section--treasure {
  flex-direction: column;
  align-items: center;
  /* 直前の領域の絵柄と被らないよう、セクションテキストを少し下げる */
  margin-top: 80px;
}

@media (min-width: 810px) {
  .game-section--treasure {
    margin-top: 100px;
  }
}

@media (min-width: 1200px) {
  .game-section--treasure {
    margin-top: 120px;
  }
}

/* トレジャーの絶対配置アイテムを見せるための最低高さ確保 */
.game-section--treasure .section-text--centered {
  /* 390px: row-2 top=568, item-h≈160 → 728px。コンテンツ自然高さ分を差し引いてpaddingで補う */
  padding-bottom: 300px;
}

/* Treasure item rows — absolutely positioned within .section-text--centered */
.treasure-row {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.t-item {
  position: absolute;
  top: 0;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0px 20px 10px rgba(208, 237, 234, 1));
}

/* 390px — タイトルとの重なりを避けるためrow-1を上に / row-2もコンテンツとの間隔を縮めて上に */
.treasure-row--1 { top: -90px; }
.treasure-row--2 { top: 510px; }

.t-item--crystal  { left: -39px; width: 64px; }
.t-item--rolling  { left: 310px; width: 104px; }
.t-item--dart     { left: 0;  width: 145px; }
.t-item--sleipnir { left: 211px; width: 121px; }

/* 810px */
@media (min-width: 810px) {
  .game-section--treasure .section-text--centered {
    padding-bottom: 260px;
  }

  .treasure-row--1 { top: 0; }
  .treasure-row--2 { top: 471px; }

  .t-item--crystal  { left: 7px;   width: 134px; }
  .t-item--rolling  { left: 556px; width: 180px; }
  .t-item--dart     { left: 143px; width: 199px; }
  .t-item--sleipnir { left: 382px; width: 166px; }
}

/* 1200px */
@media (min-width: 1200px) {
  .game-section--treasure .section-text--centered {
    padding-bottom: 120px;
  }

  .treasure-row--1 { top: 0; }
  .treasure-row--2 { top: 271px; }

  .t-item--crystal  { left: 162px; width: 134px; }
  .t-item--rolling  { left: 711px; width: 180px; }
  .t-item--dart     { left: -39px; width: 199px; }
  .t-item--sleipnir { left: 873px; width: 166px; }
}

/* 1440px */
@media (min-width: 1440px) {
  .game-section--treasure .section-text--centered {
    padding-bottom: 120px;
  }

  .treasure-row--1 { top: 0; }
  .treasure-row--2 { top: 271px; }

  .t-item--crystal  { left: 201px; width: 134px; }
  .t-item--rolling  { left: 730px; width: 180px; }
  .t-item--dart     { left: 0;     width: 199px; }
  .t-item--sleipnir { left: 912px; width: 166px; }
}

/* ===========================================
   古代種復活 — EGG_rainbow（虹色卵）
   絶対配置：Figma実測値
   1440px: x=868  y=252  w=210
   1200px: x=865  y=278  w=135
    810px: x=547  y=477  w=143
    390px: 非表示
=========================================== */

.ancient-egg-rainbow {
  display: block;
  position: absolute;
  z-index: -1;
  width: 130px;
  height: auto;
  top: 500px;
  right: -55px;
  pointer-events: none;
  filter: drop-shadow(0px 20px 10px rgba(208, 237, 234, 1));
}

@media (min-width: 810px) {
  .ancient-egg-rainbow {
    width: 143px;
    left: 547px;
    right: auto;
    top: 225px;
  }
}

@media (min-width: 1200px) {
  .ancient-egg-rainbow {
    width: 135px;
    left: 865px;
    top: 278px;
  }
}

@media (min-width: 1440px) {
  .ancient-egg-rainbow {
    width: 210px;
    left: 868px;
    top: 252px;
  }
}

/* ===========================================
   フッター
=========================================== */
.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.png');
  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(--color-white);
  line-height: 1.5;
  text-align: center;
}

/*
 * 区切りバー（同一画像 fill 3677ac89…）
 * SP 432:1438: 235×10 横線 / 810+ 431:1132…: 10×235 縦線
 * 画像ファイル自体は横向き（235×10）なので、810px以上では rotate(90deg) で縦向きに表示
 */
.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;
}

@media (min-width: 810px) {
  .footer-divider {
    height: 170px;
  }

  .footer-divider__img {
    transform: rotate(90deg);
  }
}

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

.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(--color-white);
  line-height: 1.5;
  text-align: center;
}

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

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

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

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

/* Footer — Tablet 810 (431:1132) */
@media (min-width: 810px) {
  .site-footer {
    padding: 50px 0 118px;
  }

  .footer-inner {
    max-width: 810px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

/* Footer — Desktop SM 1200（427:543 / Frame 47 gap 245px） */
@media (min-width: 1200px) {
  .site-footer {
    padding: 50px 160px 118px;
  }

  .footer-inner {
    max-width: 1200px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer-brand {
    align-items: flex-start;
  }

  .footer-brand__copy {
    text-align: left;
    white-space: normal;
  }

  .footer-links {
    align-items: flex-start;
  }

  .footer-social {
    align-items: flex-start;
  }

  .footer-social__label {
    text-align: left;
  }
}

/* Footer — Desktop LG 1440（403:411 / Frame 44 gap 485px） */
@media (min-width: 1440px) {
  .footer-inner {
    max-width: none;
    width: 100%;
  }

  .footer-brand__copy {
    white-space: nowrap;
  }
}

/* ===========================================
   320px 対応 — 390px 未満の追加調整
   モンスターグループを transform: scale で縮小し、
   クリップせずにキャラ・卵を全て表示する
=========================================== */
@media (max-width: 389px) {
  /* コンテンツ横 padding を縮小して 320px でも内容が収まるように */
  .contents {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* KV: コピー・ロゴが 320px 幅に収まるよう上限を設定 */
  .kv-catchcopy {
    width: min(289px, calc(100% - 16px));
  }

  .kv-logo-wrap {
    width: min(308px, calc(100% - 16px));
  }

  /*
   * 冒険・継承セクション: モンスターグループを 0.8 倍に縮小
   * 390px 座標系で最右端が ~366px → 0.8倍で ~293px → 296px 幅に収まる
   * transform はレイアウトに影響しないため overflow-x: clip は不要
   */
  .monster-group--adventure,
  .monster-group--inheritance {
    transform: scale(0.8);
    transform-origin: top left;
  }

  /*
   * 冒険セクション 卵: 390px 座標では right edge = 384px でオーバーフロー
   * 320px 幅の section-text 内に収まるよう left を動的に算出
   */
  .adv-egg {
    left: calc(100% - 160px);
  }

  /* トレジャーセクション: 320px 幅（content 296px）に合わせてアイテムを再配置
   * row-1: crystal を左寄せ・rolling を右寄せで両方収める
   *   crystal: left 15px, right edge = 94px ✓
   *   rolling: left 165px, right edge = 165+117 = 282px ✓
   * row-2: sleipnir を左に移動して収める
   *   dart:     left 37px,  right edge = 182px ✓
   *   sleipnir: left 155px, right edge = 155+121 = 276px ✓
   */
  .t-item--crystal  { left: 15px; }
  .t-item--rolling  { left: 242px; }
  .t-item--sleipnir { left: 166px; }

  /* フッター: 内部余白を縮小 */
  .site-footer {
    padding-left: 12px;
    padding-right: 12px;
  }
}