/* info — TOP と同じ固定MVステージ + sticky 筐体 + 原生スクロール */

:root {
  /* Safari の表示に合わせ、最初から small viewport 基準 */
  --app-vh: 100vh;
  --app-vh: 100svh;
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100svh;
  height: var(--app-vh);
  overflow: hidden;
}

html {
  background: #000;
}

body {
  background: transparent;
  color: #fff;
  font-family: "M PLUS 1p", sans-serif;
}

/*
  表示領域＝100svh。これからスクロールで出る分は overflow で隠す。
  sticky はここのスクロールに対して効く。
*/
.home-layout {
  position: relative;
  width: 100%;
  height: 100svh;
  height: var(--app-vh);
  max-height: 100svh;
  max-height: var(--app-vh);
  overflow-x: clip;
  overflow-y: auto;
  /* バー有無で clientWidth が跳ねない（ヘッダー幅合わせの土台） */
  scrollbar-gutter: stable;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  /* 入場スケール用（scroll(root) だとドキュメントが動かず効かない） */
  scroll-timeline-name: --home-layout-scroll;
  scroll-timeline-axis: block;
}

/*
  オープニング中もスクロールバー／gutter を維持（再生開始後にバーが出るのを防ぐ）。
  TOP は is-opening 中 hidden だが、info は最初から出しておく。
*/
html.is-opening .home-layout {
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/*
  Lenis の .lenis-stopped { overflow: clip } だとバーが消える。
  停止中も overflow-y は維持する。
*/
.home-layout.lenis.lenis-stopped:not(.lenis-autoToggle) {
  overflow-x: clip;
  overflow-y: auto;
}

/* ===== ヘッダー（PC は全幅） ===== */
.site-header {
  --u: calc(100vw / 390);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  /* 帯・枠より上 */
  z-index: 300;
  pointer-events: none;
}

@media (min-width: 768px) {
  .site-header {
    --u: calc((var(--app-vh) * 556 / 960) / 390);
  }
}

.site-header-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
  /* .home-layout.clientWidth（バー除く）。未設定時は従来どおり全幅 */
  width: var(--layout-client-w, 100%);
  max-width: 100%;
  height: 70px;
  margin: 0;
  padding-left: 24px;
  padding-right: 16px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  background: #000;
  pointer-events: auto;
}

.site-header-logo {
  display: block;
  flex: 0 1 auto;
  width: 152px;
  height: auto;
  transition: opacity 0.2s ease;
}

.site-header-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.site-header-steam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 40px;
  border-radius: 100vh;
  background: #fff;
  color: #000;
  transition: opacity 0.2s ease;
}

.site-header-steam-icon {
  display: block;
  width: 77px;
  height: auto;
}

.site-header-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .site-header-logo:hover,
  .site-header-steam:hover,
  .site-header-menu-btn:hover {
    opacity: 0.7;
  }
}

.site-header-menu-icon,
.site-header-menu-icon::before,
.site-header-menu-icon::after {
  display: block;
  width: 12px;
  border-bottom: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
  height: auto;
}

.site-header-menu-icon {
  position: relative;
}

.site-header-menu-icon::before,
.site-header-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-header-menu-icon::before {
  top: -5px;
}

.site-header-menu-icon::after {
  top: 5px;
}

.site-nav {
  /* パネル基準位置: top 65px / 右・下はミニマム 10px（左は auto） */
  --nav-gap-top: 65px;
  --nav-gap-right: 10px;
  --nav-gap-bottom: 10px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  /* ヘッダー（300）より前面。高さは --app-vh で実機でも確定させる */
  z-index: 301;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  box-sizing: border-box;
  width: auto;
  height: var(--app-vh);
  padding: var(--nav-gap-top)
    calc(var(--nav-gap-right) + var(--layout-scrollbar-w, 0px))
    var(--nav-gap-bottom) 0;
  overflow: hidden;
  background: transparent;
  color: #fff;
  /* オーバーレイはクリックを奪わない（ヘッダーボタンを操作可能に） */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}

html.is-site-menu-open .site-nav {
  visibility: visible;
  opacity: 1;
}

.site-nav-panel {
  box-sizing: border-box;
  width: 210px;
  max-height: calc(var(--app-vh) - var(--nav-gap-top) - var(--nav-gap-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background: #59657b;
  border-radius: 20px;
  pointer-events: auto;
}

.site-nav-panel::-webkit-scrollbar {
  display: none;
}

.site-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 25px 0 25px;
  text-align: center;
}

.site-nav-logo {
  display: block;
  width: 164px;
  margin: 0 0 29px;
}

.site-nav-logo img {
  display: block;
  width: 164px;
  height: 58px;
  margin: 0;
  object-fit: contain;
}

.site-nav-primary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 170px;
  margin: 0;
}

.site-nav-btn,
.site-nav-steam,
.site-nav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 170px;
  height: 40px;
  margin: 0 auto;
  padding: 0 12px;
  border-radius: 80px;
  background: #fff;
  color: #000;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-nav-btn.is-current {
  background: #dfdfdf;
  pointer-events: none;
}

.site-nav-steam {
  margin: 0;
}

.site-nav-steam img {
  display: block;
  width: 75px;
  height: 23px;
}

.site-nav-pills {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 170px;
  margin: 0;
}

.site-nav-pill {
  height: 32px;
  border-radius: 100px;
  background: #000;
  color: #fff;
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
}

.site-nav-rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #3f495c;
}

.site-nav-primary + .site-nav-rule,
.site-nav-steam + .site-nav-rule {
  margin-top: 25px;
  margin-bottom: 25px;
}

.site-nav-pills + .site-nav-rule {
  margin-top: 25px;
  margin-bottom: 25px;
}

.site-nav-links + .site-nav-rule {
  margin-top: 25px;
  margin-bottom: 25px;
}

.site-nav-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 170px;
  margin: 0;
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.site-nav-links a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-size: inherit;
  transition: text-decoration-color 0.2s ease;
}

.site-nav-copy {
  width: 170px;
  margin: 0;
  color: #bbbbbb;
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
}

@media (hover: hover) {
  .site-nav-btn:hover,
  .site-nav-steam:hover,
  .site-nav-pill:hover {
    opacity: 0.7;
  }

  .site-nav-links a:hover {
    text-decoration-color: transparent;
  }
}

/*
  全画面MV: .home-layout（1画面スクロール根）基準に貼る。
  - viewport fixed だと幅が窓基準になりスクロールバー上に乗る
  - 純 absolute だと overflow スクロールで一緒に流れる
  → sticky + 負マージンで「ステージに固定・バー幅は client 基準」を両立
*/
.home-layout-video {
  --video-pad-top: 0px;
  --video-pad-x: 0px;
  --video-pad-bottom: 0px;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-vh);
  max-width: 100%;
  max-height: var(--app-vh);
  margin: 0 0 calc(-1 * var(--app-vh));
  z-index: 0;
  background: #000;
  box-sizing: border-box;
  padding: var(--video-pad-top) var(--video-pad-x) var(--video-pad-bottom);
  overflow: hidden;
  pointer-events: none;
}

.home-layout-video-media {
  --video-radius: 0px;
  position: absolute;
  top: var(--video-pad-top);
  left: var(--video-pad-x);
  /* ベール・ロゴより奥（TOP は z-index:1 だが info はベールが z-index:1） */
  z-index: 0;
  display: block;
  width: calc(100% - (var(--video-pad-x) * 2));
  height: calc(100% - var(--video-pad-top) - var(--video-pad-bottom));
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--video-radius);
}

/* 背景動画とロゴの間：最初は黒 → 透明へフェード */
.home-layout-video-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.home-layout-video-veil.is-out {
  opacity: 0;
}

/* 接続中黒画面＋ノイズ動画 */
.home-video-blackout {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 全面・ヘッダー（300）より前。ロゴは右スクロールバー幅ぶん左へ */
.home-video-opening.home-video-blackout {
  top: 0;
  z-index: 350;
  transition: opacity 1.2s ease;
}

.home-video-blackout-label {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #c8c8c8;
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
}

@media (min-width: 768px) {
  .home-video-blackout-label {
    font-size: 28px;
  }
}

.home-video-opening.is-on {
  opacity: 1;
  pointer-events: none;
}

.home-video-opening.is-out {
  opacity: 0;
}

.home-video-opening-noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  background: #000;
}

.home-video-opening.is-cutting .home-video-opening-noise {
  opacity: 1;
}

.home-video-opening .home-video-blackout-label {
  position: relative;
  z-index: 2;
}

.home-video-opening.is-on .home-video-blackout-label {
  opacity: 1;
  animation: home-video-connecting-blink 0.4s steps(1, end) infinite;
}

.home-video-opening.is-cutting .home-video-blackout-label {
  opacity: 0;
  animation: none;
  visibility: hidden;
}

@keyframes home-video-connecting-blink {
  0%,
  49.9% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.game-info-hero-logo {
  --hero-logo-blur: 0;
  --hero-logo-opacity: 1;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: var(--hero-logo-opacity);
  will-change: opacity, filter;
}

/*
  オープニング中は黒覆い（350）より前。
  幅は .home-layout の client 幅に合わせ、フェード後の absolute 中央と一致させる
  （100vw 中央だとスクロールバー分だけ右に見え、完了時に左へ跳ねる）。
*/
html.is-opening .game-info-hero-logo {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: var(--layout-client-w, 100%);
  z-index: 351;
}

.game-info-hero-logo-img {
  display: block;
  width: calc(318 * 100vw / 390);
  max-width: 318px;
  height: auto;
  filter: blur(calc(var(--hero-logo-blur) * 1px));
}

@media (min-width: 768px) {
  .game-info-hero-logo-img {
    /* 1440px 幅で 600px。それ以上は同比率で拡大。下限 600px */
    width: calc(600 * 100vw / 1440);
    min-width: 600px;
    max-width: none;
  }
}

/* ===== spacer / track（TOP 準拠） ===== */
.home-layout-main-spacer {
  --phone-w: calc(380px * min(100vw, 556px) / 390px);
  --main-peek: calc(40px * var(--phone-w) / 350px);
  position: relative;
  z-index: 1;
  height: calc(var(--app-vh) - var(--main-peek));
  pointer-events: none;
}

@media (min-width: 768px) {
  .home-layout-main-spacer {
    --phone-w: calc(var(--app-vh) * 556 / 960);
    --main-peek: calc(40px * var(--phone-w) / 350px);
  }
}

.home-layout-phone-track {
  --phone-w: calc(380px * min(100vw, 556px) / 390px);
  --frame-u: calc(var(--phone-w) / 350px);
  --phone-sticky-nudge-y: 10px;
  --main-screen-top: calc(
    70px + 24px * var(--frame-u) - var(--phone-sticky-nudge-y)
  );
  --phone-bleed-bottom: calc(80px * var(--frame-u));
  --main-screen-h: calc(
    var(--app-vh) - 70px - 24px * var(--frame-u) + var(--phone-sticky-nudge-y) +
      var(--phone-bleed-bottom)
  );
  --screen-pad-x: calc(11px * var(--frame-u));
  --screen-pad-top: calc(8px * var(--frame-u));
  --content-w: calc(var(--phone-w) - 2 * var(--screen-pad-x));
  --hole-h: calc(var(--main-screen-h) - var(--screen-pad-top));
  --phone-clip-h: var(--hole-h);
  --phone-pin-start: 0px;
  --phone-pin-end: 1px;
  --phone-enter-from: 1;
  --phone-status-clear: calc(75px * var(--frame-u));
  position: relative;
  width: 100%;
  height: auto;
  padding-top: calc(24px * var(--frame-u));
  /* フッター下で止める。枠は is-phone-pinned で fixed 固定 */
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .home-layout-phone-track {
    --phone-w: calc(var(--app-vh) * 556 / 960);
    --frame-u: calc(var(--phone-w) / 350px);
    --phone-enter-from: 1.5;
    --phone-sticky-nudge-y: 0px;
  }
}

/* 電話背景 sticky（枠は別レイヤー） */
.home-layout-phone-sticky {
  --frame-u: inherit;
  position: sticky;
  top: var(--main-screen-top);
  z-index: 1;
  box-sizing: border-box;
  width: var(--phone-w);
  max-width: var(--phone-w);
  height: var(--main-screen-h);
  margin: 0 auto;
  overflow: visible;
  background: transparent;
  pointer-events: none;
  transform: scale(var(--phone-enter-from, 1));
  transform-origin: top center;
}

.home-layout-phone-inner-clip {
  --frame-u: inherit;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(50px * var(--frame-u)) calc(50px * var(--frame-u)) 0 0;
  pointer-events: none;
}

.home-layout-main-pin--bg {
  --frame-u: inherit;
  /* sticky+scale 時の枠との隙間を埋める */
  --bg-frame-overlap: 22px;
  position: absolute;
  top: calc(
    var(--screen-pad-top) + 20px * var(--frame-u) - var(--bg-frame-overlap)
  );
  right: var(--screen-pad-x);
  bottom: 0;
  left: var(--screen-pad-x);
  z-index: 0;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: #000;
  pointer-events: none;
}

.home-layout-phone-clip {
  position: absolute;
  top: var(--screen-pad-top);
  right: var(--screen-pad-x);
  bottom: 0;
  left: var(--screen-pad-x);
  z-index: 1;
  overflow: hidden;
  border-radius: calc(42px * var(--frame-u)) calc(42px * var(--frame-u)) 0 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* 全体MV直上の帯（MV と同じく .home-layout ステージ基準） */
.home-layout-phone-video-strip {
  --phone-w: calc(380px * min(100vw, 556px) / 390px);
  --frame-u: calc(var(--phone-w) / 350px);
  --phone-sticky-nudge-y: 10px;
  --main-screen-top: calc(
    70px + 24px * var(--frame-u) - var(--phone-sticky-nudge-y)
  );
  --phone-status-h: calc(33px * var(--frame-u));
  --phone-video-strip-h: calc(
    var(--main-screen-top) + var(--phone-status-h) - 10px
  );
  position: sticky;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: var(--phone-video-strip-h);
  max-width: 100%;
  margin: 0 0 calc(-1 * var(--phone-video-strip-h));
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .home-layout-phone-video-strip {
    --phone-w: calc(var(--app-vh) * 556 / 960);
    --frame-u: calc(var(--phone-w) / 350px);
    --phone-sticky-nudge-y: 0px;
  }
}

.home-layout-phone-video-strip-media {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: var(--app-vh);
  max-width: 100%;
  max-height: none;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
}

.home-layout-phone-video-strip > .home-layout-video-veil {
  z-index: 1;
}

.home-layout-main-pin--chrome {
  --frame-u: inherit;
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  overflow: visible;
  border-radius: inherit;
  pointer-events: none;
}

.home-layout-phone-frame-layer {
  --frame-u: inherit;
  --main-screen-top: inherit;
  --main-screen-h: inherit;
  --phone-w: inherit;
  position: absolute;
  inset: 0;
  z-index: 210;
  pointer-events: none;
}

.home-layout-phone-frame-sticky {
  --frame-u: inherit;
  position: sticky;
  top: var(--main-screen-top);
  z-index: 1;
  box-sizing: border-box;
  width: var(--phone-w);
  max-width: var(--phone-w);
  height: var(--main-screen-h);
  margin: 0 auto;
  overflow: visible;
  border-radius: calc(50px * var(--frame-u)) calc(50px * var(--frame-u)) 0 0;
  background: transparent;
  pointer-events: none;
  transform: scale(var(--phone-enter-from, 1));
  transform-origin: top center;
}

@media (min-width: 768px) {
  .home-layout-phone-frame-layer,
  .home-layout-phone-frame-sticky {
    --phone-w: calc(var(--app-vh) * 556 / 960);
    --frame-u: calc(var(--phone-w) / 350px);
  }
}

.home-layout-phone-status {
  position: absolute;
  top: calc(8px * var(--frame-u));
  right: 0;
  left: 0;
  z-index: 300;
  box-sizing: border-box;
  height: calc(33px * var(--frame-u));
  padding: 0;
  border-radius: calc(42px * var(--frame-u)) calc(42px * var(--frame-u)) 0 0;
  color: #fff;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  pointer-events: none;
}

.home-layout-phone-status-time,
.home-layout-phone-status-meta {
  margin: 0;
  white-space: nowrap;
}

/* phone_top.svg（1108）基準。色は phone_status_meta.svg の fill="white" に合わせる */
.home-layout-phone-status-time {
  position: absolute;
  top: 50%;
  left: calc(var(--phone-w) * 93 / 1108);
  font-size: calc(var(--phone-w) * 52 / 1108);
  color: #fff;
  -webkit-text-fill-color: #fff;
  transform: translateY(-50%);
}

.home-layout-phone-status-meta {
  position: absolute;
  top: 50%;
  right: calc(var(--phone-w) * 99 / 1108);
  display: flex;
  align-items: center;
  line-height: 0;
  transform: translateY(-50%);
}

.home-layout-phone-status-meta-img {
  display: block;
  width: calc(var(--phone-w) * 261 / 1108);
  height: auto;
  aspect-ratio: 261 / 59;
  pointer-events: none;
  user-select: none;
}

.home-layout-phone-frame-sticky .home-layout-main-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* sticky を fixed 化したあとのフロー高さ確保 */
.home-layout-phone-pin-spacer {
  display: none;
  width: 100%;
  height: var(--main-screen-h);
  pointer-events: none;
  visibility: hidden;
}

/*
  ピン後は枠・電話窓を fixed。sticky 末尾の「上逃げ」を起こさない。
*/
html.is-phone-pinned .home-layout-phone-pin-spacer {
  display: block;
}

html.is-phone-pinned .home-layout-phone-sticky,
html.is-phone-pinned .home-layout-phone-frame-sticky {
  position: fixed;
  top: var(--main-screen-top);
  /*
    left:50%+translateX(-50%) は viewport 基準になり、
    .home-layout のスクロールバー分だけ枠が右へズレる。
    sticky と同じく layout.clientWidth 中央（--phone-pinned-left）に合わせる。
  */
  left: var(--phone-pinned-left, 0px);
  right: auto;
  margin: 0;
  transform: scale(1);
  animation: none;
  will-change: auto;
}

html.is-phone-pinned .home-layout-phone-frame-sticky {
  z-index: 210;
}

@keyframes phone-enter-scale {
  from {
    transform: scale(var(--phone-enter-from, 1));
  }
  to {
    transform: scale(1);
  }
}

@supports (animation-timeline: scroll()) {
  html.is-phone-enter-ready:not(.is-phone-pinned) .home-layout-phone-sticky,
  html.is-phone-enter-ready:not(.is-phone-pinned)
    .home-layout-phone-frame-sticky,
  html.is-phone-enter-ready:not(.is-phone-pinned) .home-layout-main-body {
    animation: phone-enter-scale linear both;
    animation-timeline: --home-layout-scroll;
    animation-range: 0 var(--phone-pin-start);
    will-change: transform;
  }
}

.home-layout-main-pin {
  --frame-u: inherit;
  --main-screen-top: inherit;
  --main-screen-h: inherit;
}

.home-layout-main {
  --frame-u: inherit;
  position: absolute;
  inset: 0;
  z-index: 5;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: calc(8px * var(--frame-u)) calc(11px * var(--frame-u)) 0;
  overflow: visible;
  pointer-events: none;
}

.home-layout-main-frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 0;
  pointer-events: none;
}

.home-layout-main-frame-top {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  /* SVG 固有幅(1108)で flex 子が親より広がるのを防ぐ */
  min-width: 0;
  line-height: 0;
  overflow: hidden;
}

.home-layout-main-frame-top-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  /* phone_top.svg の viewBox に合わせる（1108×1022） */
  aspect-ratio: 1108 / 1022;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.home-layout-main-frame-bottom {
  /* phone_rep 1108×500。幅＝枠幅に対するタイル高 */
  --rep-tile-h: calc(var(--phone-w) * 500 / 1108);
  /* phone_rep タイル同士／phone_top との継ぎ目 */
  --rep-overlap: 2px;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  /* 1つ目：phone_top との継ぎ目 */
  margin-top: calc(-1 * var(--rep-overlap));
  background-color: transparent;
  background-image: url("img/phone_rep.svg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% var(--rep-tile-h);
}

/* 2つ目以降：repeat タイル同士の継ぎ目（同パターンを 2px ずらして重ねる） */
.home-layout-main-frame-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-repeat: repeat-y;
  background-size: 100% var(--rep-tile-h);
  background-position: center calc(-1 * var(--rep-overlap));
  pointer-events: none;
}

.home-layout-main-body-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* 本文：ドキュメント原生スクロール */
.home-layout-main-body {
  --frame-u: inherit;
  position: relative;
  isolation: isolate;
  z-index: 2;
  box-sizing: border-box;
  width: var(--content-w);
  max-width: var(--content-w);
  min-height: 0;
  margin: calc(-1 * var(--main-screen-h)) auto 0;
  padding: var(--phone-status-clear) 0 0;
  background: transparent;
  overflow: visible;
  container-type: inline-size;
  container-name: main;
  pointer-events: auto;
  transform: scale(1);
  transform-origin: top center;
}

/*
  はみ出し隠しは .home-layout の overflow-y に任せる。
  本文を max-height で切ると scrollHeight が足りず最後まで送れなくなる。
*/

/* 入場スケールは scroll-timeline / JS(--phone-enter-t) に任せる */
html.is-phone-enter-ready:not(.is-phone-pinned) .home-layout-phone-sticky,
html.is-phone-enter-ready:not(.is-phone-pinned) .home-layout-phone-frame-sticky,
html.is-phone-enter-ready:not(.is-phone-pinned) .home-layout-main-body {
  transform: scale(
    calc(
      var(--phone-enter-from, 1) + (1 - var(--phone-enter-from, 1)) *
        var(--phone-enter-t, 0)
    )
  );
}

html.is-phone-pinned .home-layout-main-body {
  transform: scale(1);
}

.home-layout-main-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}

html.is-body-bg-video .home-layout-main-body > .home-layout-main-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html.is-body-bg-video .home-layout-main-bg-stack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: none;
}

html.is-body-bg-video .home-layout-main-bg-stack--light {
  z-index: 0;
}

html.is-body-bg-video .home-layout-main-bg-stack--dark {
  z-index: 1;
  opacity: 0;
  transition: opacity 2s ease;
}

html.is-body-bg-video.is-bg-dark-image .home-layout-main-bg-stack--dark,
html.is-body-bg-video
  .home-layout-main-body.is-bg-dark-image
  .home-layout-main-bg-stack--dark {
  opacity: 1;
}

html.is-body-bg-video
  .home-layout-main-body
  > .home-layout-main-bg
  .home-layout-main-bg-video {
  position: relative;
  inset: auto;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 1330;
  object-fit: cover;
  object-position: center top;
  transform: none;
}

html.is-body-bg-video
  .home-layout-main-body
  > .home-layout-main-bg
  .home-layout-main-bg-video.is-bg-tile-flip-y {
  transform: scaleY(-1);
}

.home-layout-main-bg-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-layout-main-bg-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

html.is-body-bg-video .home-layout-main-bg-video-dark {
  opacity: 1;
}

.home-layout-main-body > *:not(.home-layout-main-bg) {
  position: relative;
  z-index: 1;
}

/* ===== コンテンツ本体（デザイン幅 980px） ===== */
.game-info-all {
  --gi: calc(100cqw / 980);
  position: relative;
  z-index: 1;
  width: 100%;
  padding: calc(644 * var(--gi)) calc(81 * var(--gi)) 0;
  font-family: "Shippori Mincho", serif;
  color: #fff;
}

.gi-section,
.gi-footer {
  /*
    画面外の描画をブラウザにスキップさせる。
    contain-intrinsic-size はスキップ中の高さ見積もり（スクロールバージャンプ軽減）。
  */
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

.gi-section {
  position: relative;
  width: 100%;
}

/*
  先頭見出しだけ margin-top がなく、メッシュ canvas（上方向 pad≈47px）が
  セクション外へはみ出して content-visibility 等で切れる。
  上に描画余白を確保し、contain も外す。
*/
#intro {
  content-visibility: visible;
  overflow: visible;
  /* heading-mesh.js: pad = ceil(AMP_TOP * 1.25) */
  padding-top: 52px;
}

.gi-heading {
  position: relative;
  display: block;
  margin: 0 auto;
  line-height: 0;
  text-align: center;
  overflow: visible;
}

.gi-heading img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.gi-heading-top {
  width: calc(188 * var(--gi));
}

/* WebGL 見出しメッシュ（TOP の webgl-mesh と同系） */
.gi-heading.is-webgl-mesh-section {
  position: relative;
  overflow: visible;
}

.gi-heading.is-webgl-mesh-section.is-webgl-mesh-ready
  > :not(.webgl-mesh-canvas) {
  opacity: 0;
  pointer-events: none;
}

.gi-heading.is-webgl-mesh-section:not(.is-webgl-mesh-ready)
  > .webgl-mesh-canvas {
  visibility: hidden;
}

.gi-heading .webgl-mesh-canvas,
.gi-heading-mesh-canvas {
  position: absolute;
  inset: auto;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.gi-heading-mesh-clip,
.gi-heading-mesh-stage {
  display: block;
  line-height: 0;
  overflow: visible;
}

.gi-heading-mesh-clip img {
  display: block;
  width: 100%;
  height: auto;
}

.gi-heading-characters {
  width: calc(199 * var(--gi));
  margin-top: calc(640 * var(--gi));
}

.gi-heading-features {
  width: calc(153 * var(--gi));
  margin-top: calc(640 * var(--gi));
}

/* メディア枠（818×526 @980）
   デザイン同様、動画を枠より大きく置いて全面を覆う */
.gi-media {
  position: relative;
  width: 100%;
  aspect-ratio: 818 / 526;
  margin-top: calc(320 * var(--gi));
  overflow: hidden;
  border-radius: calc(20 * var(--gi));
  background: transparent;
}

.gi-media-video {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 125.5%;
  height: 108.5%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
}

.gi-intro-text {
  margin-top: calc(160 * var(--gi));
  font-weight: 400;
  font-size: calc(48 * var(--gi));
  line-height: calc(78 * var(--gi));
}

.gi-intro-text p {
  margin: 0;
}

.gi-intro-text p + p {
  margin-top: calc(78 * var(--gi));
}

.gi-char {
  margin-top: calc(308 * var(--gi));
}

.gi-char-name {
  margin: 0;
  font-weight: 800;
  font-size: calc(120 * var(--gi));
  line-height: 1.2;
  color: #fff;
}

.gi-char-yomi {
  display: block;
  margin-top: calc(8 * var(--gi));
  font-weight: 400;
  font-size: calc(40 * var(--gi));
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.gi-char .gi-media {
  margin-top: calc(40 * var(--gi));
}

.gi-char-quote {
  box-sizing: border-box;
  width: 100%;
  margin: calc(40 * var(--gi)) 0 0;
  padding: calc(50 * var(--gi)) calc(80 * var(--gi));
  border-radius: calc(20 * var(--gi));
  background: #98be7e;
  color: #000;
  font-weight: 800;
  font-size: calc(64 * var(--gi));
  line-height: calc(100 * var(--gi));
}

.gi-char-body {
  box-sizing: border-box;
  width: 100%;
  margin: calc(40 * var(--gi)) 0 0;
  padding: calc(64 * var(--gi)) calc(65 * var(--gi)) calc(64 * var(--gi))
    calc(80 * var(--gi));
  border-radius: calc(20 * var(--gi));
  background: #fff;
  color: #000;
  font-weight: 400;
  font-size: calc(44 * var(--gi));
  line-height: calc(64 * var(--gi));
}

.gi-char-body p {
  margin: 0;
}

.gi-char-body p + p {
  margin-top: calc(28 * var(--gi));
}

.gi-feature {
  margin-top: calc(160 * var(--gi));
  position: relative;
  padding-top: calc(59 * var(--gi));
}

.gi-feature:first-of-type {
  margin-top: calc(284 * var(--gi));
}

.gi-feature-num {
  position: absolute;
  top: 0;
  left: calc(40 * var(--gi));
  width: calc(164 * var(--gi));
  height: auto;
  z-index: 2;
  line-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  /* iOS Safari: video 合成レイヤーより手前に出す */
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
}

.gi-feature-num img {
  display: block;
  width: 100%;
  height: auto;
}

.gi-feature .gi-media {
  position: relative;
  z-index: 0;
  margin-top: 0;
  isolation: isolate;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.gi-feature .gi-media-video {
  z-index: 0;
}

.gi-feature-text {
  margin: calc(25 * var(--gi)) 0 0;
  font-weight: 800;
  font-size: calc(64 * var(--gi));
  line-height: calc(100 * var(--gi));
  color: #fff;
}

.gi-spec {
  margin-top: calc(640 * var(--gi));
}

.gi-keyart {
  position: relative;
  width: 100%;
  aspect-ratio: 818 / 506;
  overflow: hidden;
  border-radius: calc(20 * var(--gi));
  background: transparent;
}

.gi-keyart-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gi-keyart-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(630 * var(--gi));
  max-width: 77%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gi-spec-table {
  margin: calc(86 * var(--gi)) 0 0;
  font-weight: 400;
  font-size: calc(38 * var(--gi));
  line-height: calc(60 * var(--gi));
}

.gi-spec-row {
  display: grid;
  grid-template-columns: calc(320 * var(--gi)) 1fr;
  padding-bottom: calc(40 * var(--gi));
}

.gi-spec-row:last-of-type {
  padding-bottom: 0;
}

.gi-spec-row dt,
.gi-spec-row dd {
  margin: 0;
}

.gi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(150 * var(--gi));
  margin-top: calc(80 * var(--gi));
  border-radius: calc(21 * var(--gi));
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: calc(40 * var(--gi));
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #fff;
  pointer-events: auto;
}

.gi-btn-steam {
  background: #f2f2f2;
  color: #000;
}

.gi-btn-steam img {
  display: block;
  width: calc(283 * var(--gi));
  height: auto;
  filter: brightness(0);
}

.gi-btn-outline {
  border: calc(2.7 * var(--gi)) solid #f2f2f2;
  border-radius: 100vh;
  background: #000;
}

.gi-btn-outline + .gi-btn-outline {
  margin-top: calc(27 * var(--gi));
}

.gi-footer {
  box-sizing: border-box;
  width: calc(100% + 162 * var(--gi));
  margin: calc(270 * var(--gi)) calc(-81 * var(--gi)) 0;
  padding: calc(98 * var(--gi)) calc(81 * var(--gi)) calc(120 * var(--gi));
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
}

.gi-footer-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--gi));
}

.gi-footer-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: inherit;
  text-decoration: none;
}

.gi-footer-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.gi-footer-mark-yami {
  width: calc(294 * var(--gi));
}

.gi-footer-mark-games {
  width: calc(201 * var(--gi));
}

.gi-footer-mark-wtg {
  width: calc(210 * var(--gi));
}

.gi-footer-links {
  display: flex;
  justify-content: center;
  gap: calc(48 * var(--gi));
  margin-top: calc(72 * var(--gi));
  font-size: calc(36 * var(--gi));
  line-height: 1.4;
}

.gi-footer-links a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  pointer-events: auto;
}

.gi-footer-copy {
  margin: calc(72 * var(--gi)) 0 0;
  font-size: calc(28 * var(--gi));
  line-height: 1.4;
  color: #fff;
}