.lp-page .container {
  max-width: 1120px;
}

.lp-page .container > .card,
.lp-page .container > .divider-diamond,
.lp-page .container > .disclaimer,
.lp-page .container > .footer-links {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.lp-cosmos-stage {
  position: relative;
  isolation: isolate;
  min-height: 570px;
  margin: 16px 0 40px;
  overflow: hidden;
  border: 1px solid rgba(232, 197, 120, 0.2);
  border-radius: 28px;
  background: rgba(24, 20, 43, 0.72);
  box-shadow: 0 22px 58px rgba(5, 3, 12, 0.3);
}

.lp-cosmos-fallback,
.lp-cosmos-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lp-cosmos-fallback {
  z-index: 0;
  display: block;
}

.lp-cosmos-stage[data-cosmos-state="animated"] .lp-cosmos-fallback {
  visibility: hidden;
}

.lp-cosmos-canvas {
  z-index: 1;
}

.lp-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  align-items: center;
  min-height: 570px;
  padding: 44px clamp(32px, 5vw, 72px);
  /* CTAボタンの右端が案内人カードへ潜り込まないための最低限の隙間 */
  column-gap: clamp(24px, 3.5vw, 52px);
}

.lp-hero-copy {
  max-width: 550px;
  padding: 24px 0;
}

.lp-page .lp-hero-copy h1,
.lp-page .lp-hero-copy .subtitle {
  text-align: left;
}

.lp-page .lp-hero-copy h1 {
  margin-top: 0;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.42;
}

.lp-page .lp-hero-copy .subtitle {
  max-width: 500px;
  margin: 18px 0 0;
  color: #d4cce2;
  font-size: clamp(16px, 1.7vw, 17px);
  line-height: 1.9;
  text-wrap: pretty;
  word-break: auto-phrase;
}

.lp-page .lp-hero-copy .cta-row {
  max-width: 520px;
  /* 列が狭い幅ではボタン内で文字を折り返さず、ボタンごと次の行へ送る */
  flex-wrap: wrap;
}

.lp-page .lp-hero-copy .cta-row .btn {
  min-width: max-content;
}

.lp-page .lp-cosmos-stage .koyomi-guide {
  align-self: end;
  margin: 0;
  padding-top: 26px;
  /* 指の横移動を追従に使う（縦スクロールは通す）。無いとiOSでpointermoveが来ない */
  touch-action: pan-y;
}

.lp-page .lp-cosmos-stage .koyomi-guide::before {
  width: min(34vw, 330px);
  height: min(34vw, 330px);
  background: radial-gradient(
    circle,
    rgba(255, 249, 232, 0.12) 0%,
    rgba(201, 193, 231, 0.06) 38%,
    transparent 68%
  );
}

.lp-page .lp-cosmos-stage .character-display {
  display: block;
  overflow: hidden;
  width: min(26vw, 250px);
  aspect-ratio: 480 / 854;
  border: 1px solid rgba(232, 197, 120, 0.42);
  border-radius: 20px;
  /* 動的な影: 追従中はJSが --shadow-x/y を書き、傾きと逆側へ落ちる */
  box-shadow: var(--shadow-x, 0px) var(--shadow-y, 16px) 40px
    rgba(5, 3, 12, 0.5);
}

/* 案内人カードの3Dスウェイ（2026-08-13 ユーザー要望「3Dカード」）。
   CSSのみ＝WebGLが静止画の端末でも動き、コンポジタ合成なので電池負荷は最小。
   ジャイロ・ポインター追従は使わない（iOSの許可ダイアログ問題と同じ設計判断）。
   ⚠️ ±8°では「多少しか変わらない」とユーザー実機で却下→±13°＋浮遊＋光沢へ強化 */
@media (prefers-reduced-motion: no-preference) {
  .lp-page .lp-cosmos-stage .koyomi-guide {
    perspective: 700px;
  }
  .lp-page .lp-cosmos-stage .character-display {
    position: relative;
    animation: lp-guide-sway 7s ease-in-out infinite;
    will-change: transform;
  }
  /* トレーディングカードの光沢: 傾きに合わせて面を光が走る */
  .lp-page .lp-cosmos-stage .character-display::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(
      105deg,
      transparent 38%,
      rgba(255, 249, 232, 0.22) 50%,
      rgba(201, 193, 231, 0.1) 56%,
      transparent 66%
    );
    background-size: 280% 100%;
    animation: lp-guide-sheen 7s ease-in-out infinite;
    pointer-events: none;
  }
}

/* 0%/100% を平置きにしてループ境界と追従解除の復帰を継ぎ目なしにする */
@keyframes lp-guide-sway {
  0%,
  100% {
    transform: translateY(0) rotateY(0deg) rotateX(0deg);
  }
  30% {
    transform: translateY(-5px) rotateY(-13deg) rotateX(2.2deg);
  }
  70% {
    transform: translateY(-7px) rotateY(13deg) rotateX(-2.2deg);
  }
}

@keyframes lp-guide-sheen {
  0%,
  100% {
    background-position: 120% 0;
  }
  50% {
    background-position: -20% 0;
  }
}

/* 指/マウス追従モード（2026-08-13。ポインター追従＋グレア＋ホロ箔が現行の
   「最先端3Dカード」の定義＝pokemon-cards-css 系。ジャイロと違い許可ダイアログ不要）。
   is-tracking 中は自動スウェイを止め、JSが書く CSS変数で傾きと光を追従させる */
@media (prefers-reduced-motion: no-preference) {
  .lp-page .lp-cosmos-stage .character-display.is-tracking {
    animation: none;
    transform: translateY(-3px) rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg));
    transition: transform 90ms linear;
  }
  .lp-page .lp-cosmos-stage .character-display.is-tracking::after {
    animation: none;
    background:
      radial-gradient(
        circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 249, 232, 0.14) 22%,
        transparent 52%
      ),
      linear-gradient(
        115deg,
        rgba(232, 197, 120, 0.1),
        rgba(255, 120, 200, 0.08) 30%,
        rgba(120, 220, 255, 0.09) 55%,
        rgba(201, 193, 231, 0.1) 80%
      );
    background-size:
      100% 100%,
      220% 220%;
    background-position:
      0 0,
      calc(var(--glare-x, 50%) * 1.4) calc(var(--glare-y, 50%) * 1.4);
    mix-blend-mode: soft-light;
  }
  /* 追従を離れて自動スウェイへ戻る間のなめらかな受け渡し */
  .lp-page .lp-cosmos-stage .character-display.is-settling {
    animation: none;
    transform: translateY(0) rotateY(0deg) rotateX(0deg);
    transition: transform 450ms ease-out;
  }
}

.lp-page .lp-cosmos-stage .character-display > video,
.lp-page .lp-cosmos-stage .character-display > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 枠・影はコンテナへ移した（内側視差で動いても縁が割れないように）。
     常時 6% 拡大しておき、追従中は奥の景色として傾きと逆へ動く（窓越しの奥行き） */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: scale(1.06)
    translate(var(--depth-bg-x, 0px), var(--depth-bg-y, 0px));
  transition: transform 90ms linear;
}

/* 前面の星屑レイヤー（手前の層＝カードより速く動く視差）。
   追従中は指の近くだけ明るく残るマスクでスパークルにする */
@media (prefers-reduced-motion: no-preference) {
  .lp-page .lp-cosmos-stage .character-display::before {
    content: "";
    position: absolute;
    inset: -6%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.55;
    background-image:
      radial-gradient(circle at 15% 20%, rgba(255, 249, 232, 0.95) 0 1.2px, transparent 2.6px),
      radial-gradient(circle at 78% 14%, rgba(232, 197, 120, 0.9) 0 1px, transparent 2.2px),
      radial-gradient(circle at 30% 55%, rgba(201, 193, 231, 0.9) 0 1px, transparent 2.2px),
      radial-gradient(circle at 65% 42%, rgba(255, 249, 232, 0.85) 0 0.9px, transparent 2px),
      radial-gradient(circle at 86% 68%, rgba(232, 197, 120, 0.9) 0 1.1px, transparent 2.4px),
      radial-gradient(circle at 22% 82%, rgba(255, 249, 232, 0.8) 0 1px, transparent 2.2px),
      radial-gradient(circle at 55% 90%, rgba(201, 193, 231, 0.85) 0 0.9px, transparent 2px),
      radial-gradient(circle at 45% 12%, rgba(255, 255, 255, 0.9) 0 0.8px, transparent 1.8px),
      radial-gradient(circle at 8% 45%, rgba(255, 255, 255, 0.7) 0 0.7px, transparent 1.6px),
      radial-gradient(circle at 92% 35%, rgba(255, 249, 232, 0.75) 0 0.8px, transparent 1.8px);
    transform: translate(var(--depth-fg-x, 0px), var(--depth-fg-y, 0px));
    transition:
      transform 90ms linear,
      opacity 200ms ease;
  }
  .lp-page .lp-cosmos-stage .character-display.is-tracking::before {
    opacity: 0.95;
    -webkit-mask-image: radial-gradient(
      circle at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.4) 55%,
      rgba(0, 0, 0, 0.18) 100%
    );
    mask-image: radial-gradient(
      circle at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.4) 55%,
      rgba(0, 0, 0, 0.18) 100%
    );
  }
}

.lp-page .lp-cosmos-stage .character-hint,
.lp-page .lp-cosmos-stage figcaption {
  position: relative;
  z-index: 1;
}

.lp-page .lp-cosmos-stage figcaption {
  color: #d0c8dc;
}

@media (max-width: 760px) {
  .lp-cosmos-stage {
    min-height: 0;
    margin-top: 12px;
    border-radius: 24px;
  }

  .lp-hero-grid {
    display: flex;
    min-height: 0;
    padding: 38px 20px 32px;
    flex-direction: column;
  }

  .lp-hero-copy {
    max-width: 560px;
    padding: 0;
  }

  .lp-page .lp-hero-copy h1,
  .lp-page .lp-hero-copy .subtitle {
    text-align: center;
  }

  .lp-page .lp-hero-copy h1 {
    font-size: clamp(28px, 8vw, 38px);
  }

  .lp-page .lp-hero-copy .subtitle {
    margin-right: auto;
    margin-left: auto;
  }

  .lp-page .lp-cosmos-stage .koyomi-guide {
    align-self: center;
    padding-top: 34px;
  }

  .lp-page .lp-cosmos-stage .character-display {
    width: min(66vw, 250px);
  }
}

@media (max-width: 420px) {
  .lp-cosmos-stage {
    margin-right: -4px;
    margin-left: -4px;
    border-radius: 22px;
  }

  .lp-hero-grid {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-cosmos-canvas {
    display: none;
  }
}

/* ---- LP全面の環境星空レイヤー（2026-08-16）----
   ヒーロー以外のセクションが「文字だけ」に見えないよう、ページ全体の背面に
   瞬く星2層＋流れ星＋淡い光のゆらぎを敷く。すべて transform/opacity のみの
   合成レイヤーで軽量。pointer-events は持たず、reduced-motion では静止する。
   ⚠️ body背景（scene画像）の上・コンテンツの下に挟むため z-index:0 と
   .lp-page .container の z-index:1 をセットで維持すること */
.lp-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-page .container {
  position: relative;
  z-index: 1;
}
.lp-ambient i {
  position: absolute;
  display: block;
}
.lp-ambient .lp-ambient-stars {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  top: 0;
  left: 0;
}
.lp-ambient .lp-ambient-stars.a {
  box-shadow: 57.0vw 99.2vh 0 #fff9e8, 12.7vw 62.6vh 0 #e8c578, 73.5vw 34.4vh 0 #fff9e8, 22.9vw 32.2vh 0 #e8c578, 65.3vw 70.7vh 0 #fff9e8, 79.6vw 90.5vh 0 #e8c578, 36.9vw 65.8vh 0 #fff9e8, 62.2vw 55.5vh 0 #e8c578, 56.8vw 67.0vh 0 #fff9e8, 62.4vw 49.5vh 0 #e8c578, 70.8vw 26.5vh 0 #fff9e8, 64.3vw 7.8vh 0 #e8c578, 8.5vw 29.9vh 0 #fff9e8, 42.5vw 54.9vh 0 #e8c578, 44.5vw 50.7vh 0 #fff9e8, 61.5vw 69.3vh 0 #e8c578, 16.6vw 35.6vh 0 #fff9e8, 24.1vw 86.4vh 0 #e8c578, 51.2vw 24.6vh 0 #fff9e8, 54.3vw 88.0vh 0 #e8c578, 35.4vw 96.2vh 0 #fff9e8, 89.7vw 92.7vh 0 #e8c578, 87.1vw 49.2vh 0 #fff9e8, 88.8vw 62.7vh 0 #e8c578, 23.7vw 79.7vh 0 #fff9e8, 1.1vw 71.4vh 0 #e8c578, 52.6vw 34.1vh 0 #fff9e8, 13.7vw 39.1vh 0 #e8c578, 56.0vw 11.0vh 0 #fff9e8, 93.8vw 30.8vh 0 #e8c578, 14.9vw 76.3vh 0 #fff9e8, 34.9vw 56.0vh 0 #e8c578, 39.1vw 37.1vh 0 #fff9e8, 96.7vw 98.8vh 0 #e8c578, 36.9vw 63.5vh 0 #fff9e8, 80.1vw 36.2vh 0 #e8c578, 47.3vw 90.6vh 0 #fff9e8, 42.6vw 67.9vh 0 #e8c578, 41.8vw 24.1vh 0 #fff9e8, 66.1vw 52.0vh 0 #e8c578, 41.5vw 89.2vh 0 #fff9e8, 66.4vw 49.7vh 0 #e8c578, 45.4vw 75.8vh 0 #fff9e8, 5.9vw 70.4vh 0 #e8c578;
  opacity: 0.5;
}
.lp-ambient .lp-ambient-stars.b {
  box-shadow: 19.2vw 60.6vh 0 #c9c1e7, 57.0vw 10.2vh 0 #fff9e8, 85.0vw 82.7vh 0 #c9c1e7, 55.6vw 36.2vh 0 #fff9e8, 83.0vw 44.6vh 0 #c9c1e7, 34.4vw 24.0vh 0 #fff9e8, 11.1vw 8.5vh 0 #c9c1e7, 6.5vw 67.3vh 0 #fff9e8, 77.4vw 12.0vh 0 #c9c1e7, 31.6vw 67.0vh 0 #fff9e8, 66.0vw 36.3vh 0 #c9c1e7, 74.3vw 16.7vh 0 #fff9e8, 63.8vw 82.4vh 0 #c9c1e7, 96.0vw 86.2vh 0 #fff9e8, 57.1vw 20.3vh 0 #c9c1e7, 38.1vw 67.5vh 0 #fff9e8, 80.9vw 58.2vh 0 #c9c1e7, 50.6vw 60.6vh 0 #fff9e8, 86.3vw 75.5vh 0 #c9c1e7, 24.1vw 98.1vh 0 #fff9e8, 67.5vw 29.9vh 0 #c9c1e7, 19.4vw 20.1vh 0 #fff9e8, 60.4vw 73.0vh 0 #c9c1e7, 36.7vw 27.9vh 0 #fff9e8, 80.1vw 49.1vh 0 #c9c1e7, 95.0vw 13.3vh 0 #fff9e8, 47.8vw 36.7vh 0 #c9c1e7, 21.9vw 0.0vh 0 #fff9e8, 77.1vw 44.7vh 0 #c9c1e7, 13.8vw 84.9vh 0 #fff9e8;
  opacity: 0.35;
}
.lp-ambient .lp-ambient-glow {
  inset: 0;
  background:
    radial-gradient(38vw 30vh at 78% 22%, rgba(232, 197, 120, 0.10), transparent 70%),
    radial-gradient(34vw 26vh at 16% 68%, rgba(201, 193, 231, 0.09), transparent 70%);
  opacity: 0.8;
}
/* 流れ星: 細い光の筋が斜めに走る（周期をずらした2本） */
.lp-ambient .lp-ambient-shooting {
  top: -8vh;
  left: 0;
  width: 140px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 249, 232, 0), #fff9e8 55%, rgba(255, 249, 232, 0));
  opacity: 0;
  transform: rotate(24deg);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-ambient .lp-ambient-stars.a {
    animation: lp-ambient-twinkle 4.2s ease-in-out infinite alternate;
  }
  .lp-ambient .lp-ambient-stars.b {
    animation: lp-ambient-twinkle 5.6s ease-in-out 1.1s infinite alternate;
  }
  .lp-ambient .lp-ambient-glow {
    animation: lp-ambient-breathe 9s ease-in-out infinite alternate;
  }
  .lp-ambient .lp-ambient-shooting.s1 {
    animation: lp-ambient-shoot 9s linear 2s infinite;
  }
  .lp-ambient .lp-ambient-shooting.s2 {
    animation: lp-ambient-shoot 13s linear 7.5s infinite;
  }
  /* 会場アトラクト時は流れ星を増速（body.lp-attract は attract スクリプトが付与） */
  body.lp-attract .lp-ambient .lp-ambient-shooting.s1 {
    animation-duration: 5s;
    animation-delay: 1s;
  }
  body.lp-attract .lp-ambient .lp-ambient-shooting.s2 {
    animation-duration: 7s;
    animation-delay: 3.5s;
  }
}
@keyframes lp-ambient-twinkle {
  0% { opacity: 0.2; }
  100% { opacity: 0.62; }
}
@keyframes lp-ambient-breathe {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}
@keyframes lp-ambient-shoot {
  0% { transform: translate3d(-10vw, 0, 0) rotate(24deg); opacity: 0; }
  4% { opacity: 0.9; }
  12% { transform: translate3d(65vw, 34vh, 0) rotate(24deg); opacity: 0; }
  100% { transform: translate3d(65vw, 34vh, 0) rotate(24deg); opacity: 0; }
}