@charset "UTF-8";

/* ==========================================================================
   KV
   ========================================================================== */
.p-kv {
  position: relative;
  overflow: hidden;
  background: #000;
}
.p-kv__bg {
  position: absolute;
  inset: 0;
  /* 素材は幅1440px。それより広い画面では左右が切れないように画面幅いっぱいまで伸ばす
     （狭い画面は1440pxのまま中央で切り抜き、ドットが細かくなりすぎないようにする） */
  background: url("../images/common/bg_dots_black.webp") center top / max(100%, 1440px) auto repeat-y;
}
/* 超人グリッド：列数・行数は top.js が画面幅から算出し、端で見切れないように並べる */
.p-kv__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 11), var(--cell, 128px));
  grid-auto-rows: var(--cell, 128px);
  justify-content: center;
  align-content: center;
}
.p-kv__grid .c-sprite {
  width: 62%;
  height: 62%;
  margin: auto;
}

.p-kv__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 45px 20px 26px;
}
.p-kv__catch { width: 1002px; max-width: 100%; position: relative; z-index: 1; }
.p-kv__main { width: 777px; max-width: 100%; margin-top: -44px; }

.p-kv__dl {
  /* 右下の「パワーアップ要素」と中央のストア群が被らないよう、
     狭い幅ではボタンを縮め（--check）、ストア群（--dl-w）を左へ寄せる */
  --dl-w: 560px;
  --check: clamp(240px, 100vw - var(--dl-w) - 60px, 392px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  height: 69px;
  padding-right: max(0px, var(--check) * 2 + var(--dl-w) + 40px - 100vw);
  background: #000;
}
.p-kv__dl-text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
}
.p-kv__dl-text img { transform: scaleX(-1); }
.p-kv__check {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--check);
  transition: transform .2s;
}
.p-kv__check:hover { transform: translateX(-6px); }
@media (min-width: 768px) and (max-width: 1023px) {
  .p-kv__dl { --dl-w: 440px; gap: 10px; }
  .p-kv__dl-text { gap: 8px; font-size: 16px; }
  .p-kv__dl .c-stores { gap: 10px; }
  .p-kv__dl .c-stores__apple img { width: 110px; }
  .p-kv__dl .c-stores__google img { width: 136px; }
}

.p-kv__bnr {
  position: relative;
  padding: 14px 0 35px;
  background: rgba(0, 0, 0, .6);
}

/* バナースライダー（PCは3枚並び、SPは1枚ずつ） */
.c-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.c-slider__list {
  display: flex;
  gap: 15px;
  width: 746px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.c-slider__list::-webkit-scrollbar { display: none; }
.c-slider__list li {
  flex: 0 0 239px;
  scroll-snap-align: start;
}
.c-slider__list a { display: block; transition: opacity .2s; }
.c-slider__list a:hover { opacity: .8; }
.c-slider__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 3px;
  background: #f5a800;
  flex-shrink: 0;
}
.c-slider__arrow img {
  width: 100%;
  height: 100%;
  padding: 7px;
  background: #1a23b0;
}
.c-slider__arrow:disabled { opacity: .4; cursor: default; }

@media (max-width: 767px) {
  /* SP は集中線状のドット（Figma「kv_bg」407:92）。KV 全体を覆うように敷く */
  .p-kv__bg { background: #000 url("../images/top/kv_bg_sp.webp") center / cover no-repeat; }
  .p-kv__inner { padding: 120px 0 0; }
  .p-kv__catch { width: 95.5%; filter: drop-shadow(0 4px 3.3px rgba(0, 0, 0, .25)); } /* SP は改行位置の違うコピー画像 */
  .p-kv__main { width: 100%; margin-top: -18px; }
  .p-kv__dl {
    flex-direction: column;
    gap: 12px;
    height: auto;
    margin-top: 92px;
    padding: 18px 0;
  }
  .p-kv__dl-text img { transform: rotate(-90deg); }
  .p-kv__check {
    position: relative;
    align-self: flex-end;
    width: 70%;
    margin-top: 16px;
  }
  /* SP は左右の矢印に背景の超人が被るため、背景を塗りつぶして超人を出さない */
  .p-kv__bnr { padding: 12px 0 40px; background: #000; }
  .c-slider { gap: 10px; }
  .c-slider__list { width: 238px; }
  .c-slider__list li { flex-basis: 238px; }
  .c-slider__arrow { width: 32px; height: 32px; }
}

/* ==========================================================================
   ゲーム画面
   ========================================================================== */
.p-scenes__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 13px solid #1900b8;
  background: #878787;
}
.p-scenes__list video {
  width: 100%;
  height: 360px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .p-scenes__list { grid-template-columns: repeat(2, 1fr); border-width: 6px; }
  .p-scenes__list video { height: auto; aspect-ratio: 384 / 360; }
}

/* ==========================================================================
   50超人が大激突
   ========================================================================== */
.p-chojin {
  position: relative;
  overflow: hidden;
  background: #0000a8 url("../images/top/ring_bg1.png") center -202px / 2129px auto no-repeat;
  image-rendering: pixelated;
}
.p-chojin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/common/bg_dots_overlay.webp") center / cover no-repeat;
  opacity: .5;
  image-rendering: auto;
}
.p-chojin__stage {
  position: relative;
  max-width: 1440px;
  height: 778px;
  margin: 0 auto;
}
.p-chojin__chars li {
  position: absolute;
  left: calc(50% - 720px + var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: 96px;
}
.p-chojin__chars img { width: 100%; image-rendering: pixelated; }
.p-chojin__body {
  position: absolute;
  left: 50%;
  top: calc(50% + 38px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 560px;
  image-rendering: auto;
}
.p-chojin__ttl { width: 487px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.p-chojin__text {
  margin-top: 12px;
  color: #000;
  font-size: 16px;
  text-align: center;
}
/* 幅が足りないときは span の切れ目でだけ改行する（「50／名が」のような泣き別れを防ぐ） */
.p-chojin__text span { display: inline-block; }

/* ボタンは文字ごと画像（Figma 304:747 を2倍で書き出し） */
.c-btn-red {
  display: block;
  width: 317px;
  margin-top: 24px;
  transition: transform .2s;
}
.c-btn-red:hover { transform: scale(1.04); }

@media (max-width: 767px) {
  /* SP はPCの構図を 0.675 倍にして中央に置く（デザイン 390×561）。
     デザインでは上端 52px がゲーム画面ブロックの下に隠れるため、その分を詰める */
  .p-chojin { background-size: 1437px auto; background-position: center -158px; }
  .p-chojin__stage { height: 561px; margin-top: -52px; }
  .p-chojin__chars li {
    left: calc(50% - 195px + var(--sx) * 1px);
    top: calc(var(--sy) * 1px);
    width: 65px;
  }
  .p-chojin__body {
    top: calc(50% + 32px);
    width: 293px;
  }
  .p-chojin__ttl { width: 250px; }
  .p-chojin__text { margin-top: 7px; font-size: 14px; }
  .c-btn-red { width: 267px; margin-top: 14px; }
}

/* ==========================================================================
   Bluetooth 通信対戦
   ========================================================================== */
.p-bt {
  position: relative;
  padding: 80px 20px;
  background: #222 url("../images/top/bt_bg.jpg") center / cover no-repeat;
}
.p-bt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.p-bt__inner {
  position: relative;
  max-width: 1070px;
  margin: 0 auto;
}
.p-bt__ttl { position: relative; z-index: 1; width: 687px; max-width: 100%; margin: 0 auto; }
/* 端末2台はデザイン（1070×316 の枠）に対する比率で配置し、画面幅が狭くてもはみ出さない */
.p-bt__devices {
  position: relative;
  aspect-ratio: 1070 / 316;
  margin-top: -30px;
}
.p-bt__device {
  position: absolute;
  width: 55.33%; /* 592 / 1070 */
  aspect-ratio: 592 / 264;
  border: 4px solid #adafb1;
  border-radius: 46px;
  background: url("../images/top/device_frame.webp") center / cover no-repeat;
  overflow: hidden;
}
/* 端末画像の画面部分にゲーム画面を重ねる（枠内 584×256 に対して left 170 / width 282） */
.p-bt__device img {
  position: absolute;
  left: 29.11%;
  top: 0;
  width: 48.29%;
  height: 100%;
  object-fit: cover;
  background: var(--c-navy-deep);
  image-rendering: pixelated;
}
.p-bt__device--1 { left: 0; top: 0; }
.p-bt__device--2 { left: 44.63%; top: 16.46%; } /* 477.5 / 1070, 52 / 316 */

.p-bt__pad {
  display: flex;
  align-items: center;
  gap: 30px;
  width: fit-content;
  margin: 40px auto 0;
  padding: 10px 40px;
  background: #000;
}
.p-bt__pad-icon { width: 129px; margin: 10px; }
.p-bt__pad-text em { font-style: normal; color: var(--c-yellow); }
.p-bt__pad-link { color: var(--c-yellow); }
.p-bt__pad-link:hover { text-decoration: none; }
.p-bt__chara {
  position: absolute;
  left: calc(50% + 352px);
  bottom: 83px;
  width: 96px;
  image-rendering: pixelated;
}

@media (max-width: 767px) {
  .p-bt { padding: 40px 14px 50px; }
  .p-bt__devices { aspect-ratio: auto; margin-top: 10px; }
  .p-bt__device {
    position: relative;
    width: 82%;
    border-width: 3px;
    border-radius: 24px;
  }
  .p-bt__device--2 { left: auto; top: auto; margin: -8px 0 0 auto; }
  .p-bt__pad {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    font-size: 14px;
  }
  .p-bt__pad-icon { width: 64px; margin: 0; }
  .p-bt__chara { display: none; }
}

/* ==========================================================================
   戦えるリングは3種類
   ========================================================================== */
.p-rings {
  position: relative;
  padding: 80px 20px 94px;
  background-color: var(--c-red-bg);
  background-image: url("../images/common/bg_red_lines.webp"), url("../images/common/bg_dots_overlay.webp");
  background-size: cover, cover;
  background-position: center;
}
.p-rings__ttl {
  position: relative;
  z-index: 1;
  width: 524px;
  margin: -10px auto 0 calc(50% - 206px);
}
.p-rings__list {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: -61px;
}
.p-rings__item { width: 360px; }
/* 動画にリング名が焼き込まれているので、枠の高さは固定せず動画（360×300）の比率のまま表示する */
.p-rings__movie {
  border: 4px solid #fff;
  /* 端数のピクセルで動画と枠の間に地色が覗くので、地色は枠と同じ色にする */
  background: #fff;
  overflow: hidden;
}
.p-rings__movie--normal { border-width: 5px; }
.p-rings__movie--ice { border-color: #b6eaee; background: #b6eaee; }
.p-rings__movie--electric { border-color: #ff9a00; background: #ff9a00; }
.p-rings__movie video { width: 100%; height: auto; aspect-ratio: 360 / 300; object-fit: contain; }
.p-rings__item p { margin-top: 20px; }

.p-rings__lead {
  margin-top: 40px;
  font-size: 50px;
  line-height: 1.16;
  text-align: center;
}
.p-rings__lead span { color: #000; -webkit-text-stroke-color: #fff; text-shadow: none; }
/* セクション下端をゲームのキャラのようにカクカク左右へ往復 */
.p-rings__meet {
  position: absolute;
  bottom: 0;
  left: calc(50% + 426px);
  image-rendering: pixelated;
  animation: meet-walk 4s linear infinite;
  will-change: transform;
}
@keyframes meet-walk {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-320px); }
}
@media (prefers-reduced-motion: reduce) {
  .p-rings__meet { animation: none; }
}

@media (max-width: 767px) {
  .p-rings { padding: 50px 16px 40px; }
  .p-rings__ttl { width: 82%; margin: 0 auto; }
  .p-rings__list { flex-direction: column; align-items: center; gap: 30px; margin-top: -10px; }
  .p-rings__item { width: 100%; max-width: 300px; }
  .p-rings__item p { margin-top: 12px; font-size: 14px; }
  .p-rings__lead { font-size: 24px; -webkit-text-stroke-width: 4px; text-shadow: 2px 2px 0 #000; }
  .p-rings__meet { display: none; }
}

/* ==========================================================================
   タッグ名
   ========================================================================== */
.p-tag {
  padding: 80px 20px;
  background: var(--c-navy) url("../images/top/tag_bg.png") center / cover no-repeat;
}
.p-tag__inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 1304px;
  margin: 0 auto;
}
.p-tag__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 638px;
}
.p-tag__pairs {
  display: flex;
  gap: 30px;
}
.p-tag__pairs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
}
.p-tag__sprites { display: flex; }
.p-tag__sprites img { width: 123px; }
.p-tag__name {
  width: 250px;
  margin-top: 31px;
  background: #7732f4;
  text-align: center;
  line-height: 28px;
}
.p-tag__member { margin-top: 10px; }
.p-tag__select { width: 628px; flex-shrink: 1; }

@media (max-width: 767px) {
  .p-tag { padding: 50px 14px; }
  .p-tag__inner { flex-direction: column; align-items: center; gap: 30px; }
  .p-tag__body { width: 100%; gap: 20px; }
  .p-tag__ttl { width: 88%; }
  .p-tag__pairs { gap: 10px; }
  .p-tag__pairs li { width: 50%; }
  .p-tag__sprites img { width: 70px; }
  .p-tag__name { width: 100%; margin-top: 12px; font-size: 11px; line-height: 20px; }
  .p-tag__member { margin-top: 4px; font-size: 10px; text-align: center; }
  .p-tag__select { width: 100%; max-width: 340px; }
}

/* ==========================================================================
   製品概要
   ========================================================================== */
.p-spec {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 770px;
  padding: 75px 20px;
  overflow: hidden;
  background: #000;
}
.p-spec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/top/spec_bg2.webp") center bottom / cover no-repeat;
  opacity: .28;
}
.p-spec__box {
  position: relative;
  z-index: 1;
  width: 1000px;
  padding: 40px;
  background: rgba(0, 0, 0, .5);
}
.p-spec__ttl {
  padding: 0 10px;
  border-bottom: 1px solid #fff;
  font-weight: 600;
  font-size: 24px;
  line-height: 50px;
  text-align: center;
}
.p-spec__table { margin-top: 30px; }
.p-spec__table div {
  display: flex;
  align-items: center;
  min-height: 52.5px;
}
.p-spec__table dt { flex: 0 0 357.5px; color: #ff0; }
.p-spec__table dd { color: var(--c-text-sub); }
.p-spec__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
  margin-top: 30px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-text-sub);
}
/* キン肉マンはデザイン通り 497×535 の枠で切り抜き（元画像 708×673 を左 -180 / 上 -138 ずらす）、
   セクション下端に接地させて概要ボックスの上に重ねる */
.p-spec__chara {
  position: absolute;
  z-index: 2;
  left: calc(50% + 179px);
  bottom: 0;
  width: 497px;
  max-width: none;
  height: 535px;
  object-fit: none;
  object-position: -180px -138px;
  pointer-events: none;
}
/* ボックスが画面幅に合わせて縮む幅では、キン肉マンの位置（中央 +179px）より右に文字が出ないよう右に余白を取る */
@media (min-width: 768px) and (max-width: 1039px) {
  .p-spec__box { padding-right: calc(50vw - 159px); }
  .p-spec__table dt { flex-basis: 35%; }
}

@media (max-width: 767px) {
  /* SP: デザイン 390×463。キン肉マンは全身を 265.5px 幅で右下に置く。
     注記に被って読めなくならないよう、ボックスの下に立たせて重なりは頭の先だけにする */
  .p-spec { min-height: 463px; padding: 12px 0 171px; }
  .p-spec__box { width: 292.5px; padding: 30px 15px; }
  .p-spec__ttl { padding: 0 4px; font-size: 14px; line-height: 18.75px; }
  .p-spec__table { display: flex; flex-direction: column; gap: 12px; margin-top: 11px; }
  .p-spec__table div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; }
  .p-spec__table dt { flex: none; font-size: 9.75px; line-height: 1.3; }
  .p-spec__table dd { font-size: 12px; line-height: 1.3; }
  .p-spec__notes { gap: 4px; margin-top: 11px; font-size: 8px; line-height: 1.25; }
  .p-spec__chara { left: calc(50% - 71.5px); width: 265.5px; height: auto; object-fit: fill; object-position: 0 0; }
}