/* ==========================================================
   マゼモンポータル スタイル
   トークンは DESIGN_GUIDELINE.md §3 に準拠
   ========================================================== */

/* ----------------------------------------------------------
   数字だけを Oswald にするためのオーバーライド

   Oswald を unicode-range で「半角数字(U+0030-0039)だけ」に絞って
   読み込み、各フォントスタックの先頭に置いている。これにより
   マークアップを一切変えずに、サイト中の数字だけが Oswald になる。
   (欧文の英字や記号は M PLUS 1 / Dela Gothic One のまま)

   src の URL は下記が返す woff2 をそのまま転記したもの:
     https://fonts.googleapis.com/css2?family=Oswald:wght@400..700
   Google がバージョンを上げるとURLが変わることがある。数字が
   M PLUS 1 に戻っていたら、上記を開いて新しいURLに差し替えること。
   (読み込めなくても M PLUS 1 の数字にフォールバックするだけで壊れない)
   ---------------------------------------------------------- */
@font-face {
  font-family: "Oswald Numerals";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v57/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYjMdZwl.woff2) format("woff2");
  unicode-range: U+0030-0039;
}

:root {
  /* ベース */
  --color-header: #121a40;
  --color-bg-cyan: #4dc0eb;
  --color-bg-base: #f5f5f5;
  --color-white: #fff;
  --color-bg-dark-green: #242e16;
  --color-bg-dark-green-alt: #212a14;
  --color-bg-blue: #4f76a8;
  --color-bg-blue-light: #d7e0eb;

  /* ブランド */
  --color-primary: #043b83;
  --color-secondary: #f12853;
  /* 白い文字を載せる赤い面・白地に置く赤い文字はこちら。#f12853 は白と 4.06:1 で
     12〜18px の文字には足りない(基準 4.5:1)。#d91842 で 5.05:1(2026-10-02) */
  --color-secondary-ink: #d91842;
  --color-text-blue: #0d56b5;
  --color-text-gallery-title: #02a1f3;
  --color-text-primary: #005a80;

  /* シアングロー */
  --color-text-cyan-light: #9dfcff;
  --color-text-cyan: #4dfaff;
  --color-text-cyan-pale: #defbfc;
  --color-cyan-bright: #70f0ff;
  --color-shadow-cyan: rgba(150, 243, 246, 1);
  --color-shadow-cyan-glow: rgba(156, 252, 255, 1);
  --color-shadow-blue: rgba(0, 169, 255, 1);
  --color-bg-cyan-light: rgba(157, 252, 255, 0.3);

  /* ニュートラル */
  --color-text-gray-dark: #6f6f6f;
  --color-text-gray: #8c8c8c;
  --color-border-gray: #dcdcdc;
  --color-overlay-dark-40: rgba(0, 0, 0, 0.4);

  /* フォント (DESIGN_GUIDELINE.md §4 準拠)
     いずれも先頭の "Oswald Numerals" が数字だけを拾い、日本語・英字は後続が担当する */
  --font-main: "Oswald Numerals", "M PLUS 1", sans-serif;    /* 本文・通常UI */
  --font-display: "Oswald Numerals", "M PLUS 1", sans-serif; /* UIラベル・小見出し */
  --font-title: "Oswald Numerals", "Dela Gothic One", "M PLUS 1", sans-serif; /* 題字のみ。多用しない */

  /* --- タイポグラフィスケール (DESIGN_GUIDELINE.md §4) ---
     従来は 0.58〜0.95rem に密集して階層が平坦だったため、
     「本文が読める大きさ」を基準に段階を作り直したもの。
     モバイル起点で、大きい段のみ clamp で伸ばす。 */
  /* 文字の階層(2026-08-29 に段差を付け直した)
     ■ なぜ直したか
     litpla.com を実測すると 240 / 90 / 46 / 40 / 24 / 16px と
     **上下で17倍**の幅があり、大きい文字は数が少ない(1〜4件)。
     一方このサイトは 35 / 23 / 18 / 16 / 14px と刻みが細かすぎて、
     「マゼモンとは?」ページでは **16px の要素が84件**あった。
     どこも同じ大きさなので、メリハリが出ていなかった(実測)。
     ■ 直し方
     隣どうしの比を 1.15 程度から 1.25〜1.6 に広げ、
     いちばん上(--fs-section-en)を大きく取った。
     本文(--fs-body)は読みやすさの基準なので動かしていない。 */
  --fs-hero:  clamp(2.2rem, 7vw, 3.6rem);   /* サイトロゴ */
  /* セクションの巨大英字(背面)。
     最小値は「白い余白に収まる上限」で決めている。.about-h3-sub は
     white-space:nowrap なので、いちばん長いラベル(HOW TO BATTLE = 13字)が
     320px幅で画面外に出ないところが下限。2.2rem では実測38pxはみ出した。
     ラベルを13字より長くするときはここも measure し直すこと */
  --fs-section-en: clamp(1.7rem, 7.5vw, 4.5rem);
  /* セクションタイトル。
     8vw にしているのは、モバイルで下の段(--fs-h3)と潰れないため。
     実測(375px)で 20.6px → 30px。480px以下に別の font-size 上書きが
     あったが、境目(481px)で 38px → 26px と逆走していたので消した */
  --fs-title: clamp(1.7rem, 8vw, 2.75rem);
  --fs-statement: clamp(1.2rem, 3.8vw, 2rem); /* 各項目の最初の一文 */
  --fs-h3:    clamp(1.4rem, 5vw, 1.8rem);    /* 中見出し */
  --fs-lead:  clamp(1.02rem, 2.8vw, 1.35rem); /* セクションリード */
  --fs-body:  1rem;                          /* 本文 */
  --fs-sub:   0.88rem;                       /* 補助テキスト */
  --fs-caption: 0.78rem;                     /* キャプション・注記 */
  --fs-micro: 0.75rem;                       /* バッジ・最小ラベル。読ませる文字の下限=12px(2026-10-02) */

  /* --- モーション ---
     参考サイトの実測に合わせて短め + easeOut 系に統一。
     長いイージングは子ども向けだと「もっさり」に見えるため使わない。 */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);   /* easeOutQuart */
  --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);    /* わずかに跳ねる */
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  font-weight: 500;
  background-color: var(--color-header);
  color: var(--color-white);
  overflow-x: hidden;
  min-height: 100vh;
}

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

/* ==========================================================
   スクロールリビール / アテンション演出(共通ユーティリティ)

   .reveal を付けた要素は opacity:0 で待機し、ビューポートに入ると
   js/reveal.js が .is-shown を付けてふわっと出てくる。
   data-reveal-delay="1".."6" で段差登場(stagger)にできる。

   JSが動かない環境やクローラ向けに、.reveal は
   「JSが読み込まれた後」だけ隠す(html.has-reveal を経由)。
   これで JS 無効時にコンテンツが消えることはない。
   ========================================================== */

html.has-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

html.has-reveal .reveal.is-shown {
  opacity: 1;
  transform: none;
}

/* 横方向から出したいとき(セクションタイトルの装飾ラインなど) */
html.has-reveal .reveal.reveal-left  { transform: translateX(-24px); }
html.has-reveal .reveal.reveal-right { transform: translateX(24px); }
html.has-reveal .reveal.reveal-zoom  { transform: scale(0.94); }
html.has-reveal .reveal.reveal-left.is-shown,
html.has-reveal .reveal.reveal-right.is-shown,
html.has-reveal .reveal.reveal-zoom.is-shown { transform: none; }

/* 奥から起き上がって手前に出る立体的な登場。大きな文字にだけ使う */
html.has-reveal .reveal.reveal-pop {
  transform: perspective(700px) rotateX(-58deg) translateY(26px) scale(0.9);
  transform-origin: 50% 100%;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform 520ms var(--ease-pop);
}
html.has-reveal .reveal.reveal-pop.is-shown { transform: none; }

/* 奥から手前へ飛び込んでくる登場。
   要素側で transform を組んでいる箇所(巨大英字など)に使うため、
   **is-shown 側では transform を指定せず**、要素本来の transform に戻す。
   そのため待機状態は translate/scale だけで作っている。 */
html.has-reveal .reveal.reveal-depth {
  transform: translate3d(0, 14px, 0) scale(0.62);
  transition:
    opacity 420ms var(--ease-out),
    transform 560ms var(--ease-pop);
}
html.has-reveal .reveal.reveal-depth.is-shown { transform: none; }

/* 段差登場。60ms刻みで、最大でも0.36秒後には出そろう */
html.has-reveal .reveal[data-reveal-delay="1"] { transition-delay: 60ms; }
html.has-reveal .reveal[data-reveal-delay="2"] { transition-delay: 120ms; }
html.has-reveal .reveal[data-reveal-delay="3"] { transition-delay: 180ms; }
html.has-reveal .reveal[data-reveal-delay="4"] { transition-delay: 240ms; }
html.has-reveal .reveal[data-reveal-delay="5"] { transition-delay: 300ms; }
html.has-reveal .reveal[data-reveal-delay="6"] { transition-delay: 360ms; }

/* ==========================================================
   サイバー演出(SF世界観のブラッシュアップ)

   ・.reveal-glitch  … リビール時に一度だけRGBずれ+スライスを起こす
   ・.reveal-beam    … 光の線が要素を貫いて走る
   ・.decode         … 文字が記号から解読される(js/text-decode.js)
   ・.fx-beam        … 映像枠に重ねる空の <span>。走査線 + 迸る光の筋
   ・.cyber-frame    … 枠の四隅にブラケットを描く
   ・.bg-datalines   … 画面全体を横切るデータの線(サイト共通)

   ■ 明滅(フラッシュ)は使いません

   全画面や文字を白く飛ばす明滅は「見えづらい」ため 2026-08-24 に全廃しました。
   輝度を上げるのではなく**細い光の線を走らせる**ことでエネルギー感を出します。
   新しい演出を足すときも、`filter: brightness()` で画面を飛ばす方向には
   戻さないでください。
   ========================================================== */

/* --- グリッチ登場 --- */
html.has-reveal .reveal.reveal-glitch.is-shown {
  animation: glitch-in 620ms steps(1, end) 1 both;
}

@keyframes glitch-in {
  0%   { clip-path: inset(42% 0 40% 0); transform: translateX(-7px); filter: hue-rotate(70deg) saturate(2.4); }
  12%  { clip-path: inset(8% 0 74% 0);  transform: translateX(6px);  filter: none; }
  24%  { clip-path: inset(66% 0 12% 0); transform: translateX(-4px); filter: hue-rotate(-50deg) saturate(2); }
  36%  { clip-path: inset(24% 0 52% 0); transform: translateX(3px);  filter: none; }
  48%  { clip-path: inset(0 0 0 0);     transform: translateX(-2px); }
  60%  { transform: translateX(2px); }
  100% { clip-path: inset(0 0 0 0);     transform: none; filter: none; }
}

/* 文字にRGBずれの影を足して、色収差のある発光に見せる */
.reveal-glitch {
  text-shadow:
    0 0 14px var(--color-shadow-blue),
    1px 0 0 rgba(255, 0, 92, 0.34),
    -1px 0 0 rgba(0, 233, 255, 0.34);
}

/* --- デコード中の文字 --- */
.decode { will-change: contents; }

/* --- 光の線が貫く登場(.reveal-beam) ---

   明滅の代わりに、細い光の線を要素の中を走らせる。
   ::before … 先頭を走る光のヘッド(短い縦の筋)
   ::after  … ヘッドが通ったあとに伸びる横一閃

   ■ どちらも要素の内側で完結させている

   セクションタイトルは flex コンテナで、`overflow: hidden` を付けると
   文字のグローまで切れてしまう。そこで枠外へはみ出す動きを使わず、
   translateX と scaleX を「要素の幅ぶんだけ」に収めることで、
   overflow を触らずに横スクロールも出さないようにしている。
   (絶対配置なので flex アイテムにはならない) */
.reveal-beam { position: relative; }

/* 先頭を走る光のヘッド */
html.has-reveal .reveal.reveal-beam.is-shown::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 0;
  width: 9%;
  height: 88%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(157, 252, 255, 0.85) 55%,
    #eaffff 72%,
    rgba(157, 252, 255, 0.3)
  );
  filter: blur(1px) drop-shadow(0 0 10px var(--color-text-cyan));
  animation: beam-head 620ms cubic-bezier(0.2, 0.75, 0.2, 1) 1 both;
}

@keyframes beam-head {
  0%   { transform: translateX(0) scaleY(0.2); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(1011%) scaleY(1); opacity: 0; } /* 9% × 1011% ≒ 91% → 右端でぴったり収まる */
}

/* ヘッドが通ったあとに残る横一閃 */
html.has-reveal .reveal.reveal-beam.is-shown::after {
  content: "";
  position: absolute;
  top: 52%;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 4;
  pointer-events: none;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-text-cyan-light) 18%,
    #ffffff 50%,
    var(--color-text-cyan-light) 82%,
    transparent
  );
  box-shadow: 0 0 12px var(--color-text-cyan);
  animation: beam-line 900ms cubic-bezier(0.2, 0.75, 0.2, 1) 1 both;
}

@keyframes beam-line {
  0%   { transform: scaleX(0); opacity: 1; }
  55%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* --- 映像枠のオーバーレイ(.fx-beam) ---

   ■ なぜ空の <span> を1枚入れているのか

   枠そのものには .cyber-frame が ::before / ::after を両方使っている。
   ::before / ::after は1要素に1つずつしか無いので、枠に直接オーバーレイを
   足すと衝突する(以前 .scanlines::after と .cyber-frame::after を
   同じ要素に付けて衝突し、走査線が16pxのブラケットの中だけに縮んでいた)。
   枠には四隅のブラケットを残し、オーバーレイはこの span に分ける。

   ■ 映像に常時かぶせるものは何も置かないこと

   この span が持つのは `::after`(リビール時に一度だけ抜ける光の束)だけです。
   常時表示の層は 2026-08-24 に2段階で全部外しました。

     1. ループする光の筋(`::before`) … 動画の上を線が通り続けて中身が見えなかった
     2. CRT風の細い横線(要素自体の背景) … 走査線の質感自体を不採用にした

   **映像の上に置いてよいのは「リビールの瞬間に1回走って消えるもの」だけ**です。
   質感づけのつもりでも、常時かかる層は追加しないでください。 */
.fx-beam {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* リビールの瞬間だけ走る、密度の高い束 */
html.has-reveal .reveal.is-shown .fx-beam::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  height: 160%;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  width: 34%;
  background-image:
    linear-gradient(90deg, transparent 0 12%, rgba(157, 252, 255, 0.75) 13% 13.6%, transparent 15%),
    linear-gradient(90deg, transparent 0 26%, rgba(255, 255, 255, 0.95) 27% 28.2%, transparent 30%),
    linear-gradient(90deg, transparent 0 40%, rgba(77, 250, 255, 0.8) 41% 41.6%, transparent 43%),
    linear-gradient(90deg, transparent 0 55%, rgba(234, 255, 255, 0.9) 56% 57.4%, transparent 59%),
    linear-gradient(90deg, transparent 0 70%, rgba(157, 252, 255, 0.7) 71% 71.6%, transparent 73%),
    linear-gradient(90deg, transparent 0 86%, rgba(77, 250, 255, 0.5) 87% 88%, transparent 90%);
  filter: drop-shadow(0 0 9px rgba(157, 252, 255, 0.9));
  animation: beam-burst 760ms cubic-bezier(0.15, 0.8, 0.25, 1) 160ms 1 both;
}

@keyframes beam-burst {
  0%   { transform: translateX(-140%) rotate(13deg); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(440%) rotate(13deg); opacity: 0; }
}

/* --- 四隅のブラケット --- */
.cyber-frame { position: relative; }

.cyber-frame::before,
.cyber-frame::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  border-color: var(--color-text-cyan);
  z-index: 3;
}
/* 枠の外(-3px)ではなく内側に置いて、HUDのブラケットに見せている。
   .fx-beam(オーバーレイ)はこの内側に収まるので、ブラケットと重ならない */
.cyber-frame::before { top: 3px; left: 3px; border-top: 2px solid; border-left: 2px solid; }
.cyber-frame::after  { bottom: 3px; right: 3px; border-bottom: 2px solid; border-right: 2px solid; }

/* --- 画面を横切るデータの線(.bg-datalines) ---

   ■ 背景側(z-index: -1)に置くこと。コンテンツより上に出さない

   最初はコンテンツの上(z-index: 90)に重ねていた。白地ページでも見えるように、
   という意図だったが、**画像・動画・文字の上を線が通って見えづらくなった**ため
   2026-08-24 に背景へ下げた。
   常時ループする演出をコンテンツに被せてはいけない(§4.5 の方針)。
   `.page-light`(白地)のセクションでは隠れるが、それは正しい挙動。

   ■ 負荷

   全画面の層なので、動かすのは transform だけ(合成のみで済む)。
   背景は細い線を数本並べた 1枚のグラデーションで、レイヤーは1つだけ。 */
.bg-datalines {
  position: fixed;
  top: 0;
  left: 0;
  width: 46vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  background-image:
    linear-gradient(180deg, transparent 0 17%, rgba(0, 169, 255, 0.75) 17.1% 17.25%, transparent 17.4%),
    linear-gradient(180deg, transparent 0 34%, rgba(157, 252, 255, 0.62) 34.1% 34.3%, transparent 34.5%),
    linear-gradient(180deg, transparent 0 58%, rgba(0, 169, 255, 0.55) 58.1% 58.2%, transparent 58.4%),
    linear-gradient(180deg, transparent 0 79%, rgba(157, 252, 255, 0.5) 79.1% 79.3%, transparent 79.5%);
  /* 端を細らせて「棒」ではなく「流れる筋」に見せる。
     マスクを入れないと、止まって見えた瞬間に罫線と見分けがつかない */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 34%, #000 76%, transparent);
  animation: datalines-run 5.5s linear infinite;
}

@keyframes datalines-run {
  from { transform: translateX(-105%); }
  to   { transform: translateX(224%); }
}

/* アテンション: 「押せる/動かせる」ことを伝えるゆるいループ。
   §8「グローを全要素に付けない」に倣い、主要導線だけに付ける。
   .is-shown が付いてから animation を始めることで、
   画面外で無駄に animate し続けないようにしている。 */
@keyframes attn-bound {
  0%, 62%, 100% { transform: translateY(0); }
  70%           { transform: translateY(-7px); }
  80%           { transform: translateY(0); }
  87%           { transform: translateY(-3px); }
  94%           { transform: translateY(0); }
}

.attn {
  animation: attn-bound 3s var(--ease-out-soft) 0.6s infinite;
}

/* リビール待ちのブロックの中では跳ねさせない(画面外で無駄に動かないように)。
   .attn 自身が .reveal の場合と、.reveal の子孫にある場合の両方を止める。 */
html.has-reveal .reveal:not(.is-shown) .attn,
html.has-reveal .attn.reveal:not(.is-shown) { animation: none; }

/* ホバー中は跳ねを止めて、ホバー状態を主役にする */
.attn:hover { animation-play-state: paused; }

/* ==========================================================
   背景レイヤー
   ========================================================== */

/* ローポリ風背景: グラデーション + 三角形SVGパターン */
.bg-lowpoly {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23ffffff' fill-opacity='0.045'%3E%3Cpolygon points='0,0 160,0 60,110'/%3E%3Cpolygon points='160,0 320,60 220,160'/%3E%3Cpolygon points='0,160 110,220 0,320'/%3E%3Cpolygon points='320,160 320,320 180,260'/%3E%3Cpolygon points='110,220 220,160 200,300'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.05'%3E%3Cpolygon points='60,110 160,0 220,160'/%3E%3Cpolygon points='0,160 60,110 110,220'/%3E%3Cpolygon points='200,300 320,320 180,260'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #1e7fc0 0%, #1565a8 35%, var(--color-header) 100%);
  background-size: 320px 320px, cover;
}

/* WebGLシェーダーの下地。.bg-lowpoly(-3) の上、.bg-particles(-1) の下。
   初期化に失敗すると js/bg-shader.js が canvas を remove するので、
   その場合は下の .bg-lowpoly がそのまま見える */
.bg-shader {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 浮遊する光の粒（サイバー演出） */
.bg-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 15% 25%, var(--color-text-cyan-light) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 60%, var(--color-cyan-bright) 50%, transparent 51%),
    radial-gradient(3px 3px at 40% 80%, var(--color-text-cyan-pale) 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 15%, var(--color-text-cyan-light) 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 35%, var(--color-text-cyan-pale) 50%, transparent 51%),
    radial-gradient(3px 3px at 25% 55%, var(--color-cyan-bright) 50%, transparent 51%);
  background-size: 100% 100%;
  opacity: 0.5;
  animation: particles-float 14s ease-in-out infinite alternate;
}

@keyframes particles-float {
  0%   { transform: translateY(0) scale(1); opacity: 0.35; }
  50%  { opacity: 0.65; }
  100% { transform: translateY(-40px) scale(1.04); opacity: 0.4; }
}

/* ==========================================================
   ヘッダー
   ========================================================== */

/* ==========================================================
   ヘッダー(1本のバー)
   ==========================================================
   2026-09-10: 3段のロゴ + 走査線 + ナビの縦積みから、ロゴとナビを1行に並べた
   細いバーに組み直した。組み直す前は SPで204px(=画面の24%)、
   PCで234px(26%)を占め、しかもSPの中身はハンバーガー1つだった。
   いまは約60px。**バー全体を sticky** にしている。
   (以前は .tab-nav だけが sticky だったが、親のヘッダーが短いので
    実質どこにも貼り付いておらず、スクロールすると消えていた) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 18, 48, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(157, 252, 255, 0.25);
}

.header-bar {
  position: relative; /* SPのドロップダウン(.tab-nav-inner)の基準 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  min-height: 60px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ロゴ様式: 極太イタリック + 黄アウトライン + 黒オフセットシャドウ (§4)。
   バーに収めるので大きさだけ落とし、1行に並べている */
.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  /* 文字の高さ(21px)だけだと押しにくいので、上下に広げて44px以上にする */
  padding-block: 12px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-main {
  font-family: var(--font-title);
  /* Dela Gothic One は 400 のみ。合成ボールドで字面が潰れるため 400 固定 */
  font-weight: 400;
  font-style: italic;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--color-text-gallery-title);
  -webkit-text-stroke: 0.8px #ffd900;
  text-shadow: 2px 2px 0 #000;
}

.logo-sub {
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  color: #ffd900;
  text-shadow: 1px 1px 0 #000;
}

/* ==========================================================
   タブナビゲーション
   ========================================================== */

/* sticky・背景・罫線は .site-header(バー全体)に移した(2026-09-10) */
.tab-nav {
  min-width: 0;
}

.tab-nav-inner {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 8px;
}
.tab-nav-inner::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 21px 14px 19px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--color-text-cyan-pale);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, text-shadow 0.2s;
}

/* タブの目印。もとは絵文字を入れていたが、絵文字は環境によって字形も色も
   変わり、サイトのトンマナから浮くのでやめた。
   代わりにシアンの小さなひし形を CSS で描いている(サイトの .corner や
   .title-deco と同じ幾何的なあしらいに寄せる) */
.tab-icon {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--color-text-cyan);
  transform: rotate(45deg);
  opacity: 0.45;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.tab:hover .tab-icon { opacity: 0.8; }

.tab.is-active .tab-icon {
  opacity: 1;
  box-shadow: 0 0 8px var(--color-shadow-cyan);
}

.tab::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-text-cyan), var(--color-text-cyan-light));
  box-shadow: 0 0 12px var(--color-shadow-cyan);
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab:hover { color: var(--color-white); }
.tab:hover::after { transform: scaleX(0.6); }

.tab.is-active {
  color: var(--color-white);
  text-shadow: 0 0 12px var(--color-shadow-cyan);
}
.tab.is-active::after { transform: scaleX(1); }

.tab:focus-visible { outline: 2px solid var(--color-text-cyan); outline-offset: -2px; }

/* ハンバーガーボタン。タブが1行に並ぶ幅では使わないので隠す(表示は下の
   @media (max-width: 1059px) で切り替える) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  /* 以前は全幅(1行まるごと)だったが、ロゴと同じ行の右端に置くので中身ぶんの幅にする */
  width: auto;
  padding: 18px 4px 18px 12px;
  background: none;
  border: none;
  color: var(--color-text-cyan-pale);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
}

/* 「メニュー」の折り返し止め。付けないと375pxで「メニュ / ー」と2行になり、
   ボタンが75px高になってヘッダーが61px→76pxに膨らむ(実測) */
.nav-toggle-label { white-space: nowrap; }

.nav-toggle-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 14px;
}

/* 2本の線を✕に変形させるハンバーガー。開閉は下の .is-open で切り替える */
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text-cyan);
  box-shadow: 0 0 6px var(--color-shadow-cyan);
  transition: transform 0.22s;
}
.nav-toggle-icon::before { top: 0; }
.nav-toggle-icon::after  { bottom: 0; }

.nav-toggle:focus-visible { outline: 2px solid var(--color-text-cyan); outline-offset: -2px; }

/* 開いているときはハンバーガー→✕ に変形 */
.nav-toggle.is-open .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-icon::after  { transform: translateY(-6px) rotate(-45deg); }

/* 374px以下: ロゴとハンバーガーが1行に収まらないので、両方を一段削る。
   実測(320px): ロゴ241 + ボタン98 + バーの左右padding32 + gap16 = 387px 必要で67pxはみ出す。
   以前は「メニュー」が3行に折れて**ヘッダーが114px**になっていた(折り返しで幅は誤魔化せても高さが伸びる)。
   ロゴを1.3→1.1rem、ボタンは文字を外してアイコンだけにすると 291px に収まる */
@media (max-width: 374px) {
  .logo-main { font-size: 1.1rem; }
  .logo-sub { font-size: 0.75rem; letter-spacing: 0.16em; }
  .nav-toggle-label { display: none; }
  .nav-toggle { padding-inline: 10px; }
}

/* タブが1行に入らない幅: 並びタブ → ハンバーガーで開閉するドロップダウンに切り替え。
   .tab-nav は sticky で position の基準になっているので、
   .tab-nav-inner はそこからの絶対配置で下に伸びるドロワーにできる。

   ■ 境目が 1059px なのは、6タブが実測で入りきらないため(2026-09-14 に 760px から変更)
   `.tab-nav-inner` は justify-content: flex-end なので、入らないぶんは**左へあふれて
   ロゴの下に隠れる**。折り返さないので「行数が1か」を見ても気づけない。

     使える幅 = 画面幅 − 32(バーの左右padding) − 241(ロゴ) − 16(gap)
     必要な幅 = 746px(タブ6つ 730px + 並びの左右padding 16px)
     → 画面幅 1035px でようやく同じ。余裕を見て 1060px から横並びにする

   タブの文字数を増やすとこの数字が動く。**タブ名を変えたら必ず測り直すこと。** */
@media (max-width: 1059px) {
  .nav-toggle { display: flex; }

  .tab-nav-inner {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    padding: 0;
    /* 100% は auto 扱いになって効かないため、viewport 基準の固定値にしている */
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(6, 15, 40, 0.98);
    border-bottom: 1px solid rgba(157, 252, 255, 0.25);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45);
  }

  .tab-nav-inner.is-open { display: flex; }

  .tab {
    padding: 15px 18px;
    border-bottom: 1px solid rgba(157, 252, 255, 0.12);
  }

  /* 下線インジケーターは横並び前提の見た目なので、積んだリストでは
     背景ハイライトに差し替える */
  .tab::after { display: none; }
  .tab.is-active { background: rgba(0, 169, 255, 0.16); }
}

/* ==========================================================
   ページ切り替え
   ========================================================== */

.page { animation: page-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.page[hidden] { display: none; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 明色ページ共通（白地 + ハーフトーン） */
.page-light {
  background-color: var(--color-bg-base);
  background-image: radial-gradient(circle, rgba(2, 161, 243, 0.13) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  color: var(--color-primary);
}

.page-light-inner { max-width: 880px; margin: 0 auto; }

/* ==========================================================
   セクション共通
   ========================================================== */

.section { padding: 40px 16px 56px; }

.section-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-title);
  color: var(--color-white);
  text-shadow: 0 0 18px var(--color-shadow-blue), 2px 2px 0 rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.section-title.dark {
  color: var(--color-primary);
  text-shadow: none;
}

/* マゼモンコロシアムページの題字(公式ロゴ)。
   文字の題字と同じ高さ感になるよう幅で合わせている。
   ロゴ自体に白フチと影が入っているので text-shadow は要らない */
.section-title-logo {
  display: block;
  width: min(64vw, 320px);
  height: auto;
  filter: drop-shadow(0 0 16px var(--color-shadow-blue));
}

/* タイトル左右の装飾ライン */
.title-deco {
  width: clamp(28px, 8vw, 70px);
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--color-text-cyan-light));
  clip-path: polygon(0 50%, 12% 0, 100% 0, 100% 100%, 12% 100%);
  box-shadow: 0 0 10px var(--color-shadow-cyan);
}
.title-deco.flip { transform: scaleX(-1); }
.title-deco.dark {
  background: linear-gradient(90deg, transparent, var(--color-text-gallery-title));
  box-shadow: none;
}

.section-lead {
  text-align: center;
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--color-text-cyan-pale);
  margin-bottom: 26px;
  /* 【重要】和文の折り返しは全幅で有効にする。
     もとは @media (max-width: 480px) の中だけに入っていたため、
     481〜760px では「…も登 / 場するかも！？」のように語中で切れていた(実測 500px) */
  line-break: strict;
  word-break: auto-phrase;
}
.section-lead.dark { color: var(--color-text-primary); }

/* ==========================================================
   マゼモンコロシアム
   ========================================================== */

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--color-white);
  background: var(--color-secondary-ink);
  padding: 4px 12px 4px 9px;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  box-shadow: 0 0 14px rgba(241, 40, 83, 0.7);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-white);
  animation: live-blink 1.1s ease-in-out infinite;
}

@keyframes live-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--color-white); }
  50%      { opacity: 0.25; box-shadow: none; }
}

/* グロー付き中継フレーム */
.coliseum-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px;
  background: rgba(0, 90, 128, 0.3);
  border: 1px solid var(--color-text-cyan-light);
  box-shadow:
    0 0 24px var(--color-bg-cyan-light),
    inset 0 0 24px rgba(157, 252, 255, 0.12);
  animation: frame-glow 3.2s ease-in-out infinite;
}

@keyframes frame-glow {
  0%, 100% { box-shadow: 0 0 18px var(--color-bg-cyan-light), inset 0 0 18px rgba(157, 252, 255, 0.1); }
  50%      { box-shadow: 0 0 44px rgba(0, 169, 255, 0.55), inset 0 0 26px rgba(157, 252, 255, 0.18); }
}

.coliseum-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.coliseum-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 四隅のコーナー装飾 */
.corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid var(--color-text-cyan);
  filter: drop-shadow(0 0 6px var(--color-shadow-cyan));
  z-index: 2;
}
.corner-tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.corner-tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.corner-bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }
.corner-br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

/* ==========================================================
   マシンノッチ区切り (§5.1 clip-path)
   ========================================================== */

.machine-divider {
  height: 46px;
  background: var(--color-bg-base);
  clip-path: polygon(0% 100%, 0% 38%, 16% 38%, 25% 0%, 75% 0%, 84% 38%, 100% 38%, 100% 100%);
  margin-top: 8px;
}

/* ==========================================================
   マゼモン図鑑
   ========================================================== */

.section-zukan {
  /* 白地 + ハーフトーンドット (§5.1) */
  background-color: var(--color-bg-base);
  background-image: radial-gradient(circle, rgba(2, 161, 243, 0.13) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  color: var(--color-primary);
  padding-bottom: 80px;
}

.zukan-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* ステータス */
.zukan-status {
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-sub);
  color: var(--color-text-primary);
  min-height: 1.4em;
  margin-bottom: 18px;
}

.zukan-status.error { color: var(--color-secondary); }

/* 図鑑の照合結果は「データベースの出力行」として見せる。
   .dex-readout を付けた要素だけが対象(ほかの .zukan-status には影響しない)。
   :empty のときは何も出さない ——
   未選択でプロンプトだけ浮いていると「入力待ち」の意味が伝わらないため */
.zukan-status.dex-readout {
  color: var(--color-text-cyan-pale);
  margin-bottom: 22px;
}

.zukan-status.dex-readout:not(:empty) {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 15px;
  text-align: left;
  background: rgba(6, 26, 62, 0.7);
  border: 1px solid rgba(157, 252, 255, 0.3);
  border-left: 3px solid var(--color-text-cyan);
  border-radius: 3px;
  box-shadow: inset 0 0 20px rgba(0, 169, 255, 0.12);
}

/* 親が text-align:center なので、inline-flex のこの要素はそのまま中央に来る */
.zukan-status.dex-readout:not(:empty)::before {
  content: ">";
  flex-shrink: 0;
  font-weight: 800;
  color: var(--color-text-cyan);
}

/* 照合中だけ点滅カーソルを出す。終わったら消えるので常時点滅にはならない */
.zukan-status.dex-readout.is-scanning::after {
  content: "";
  align-self: center;
  width: 8px;
  height: 1em;
  flex-shrink: 0;
  background: var(--color-text-cyan);
  box-shadow: 0 0 8px var(--color-text-cyan);
  animation: dex-caret 0.9s steps(1, end) infinite;
}

@keyframes dex-caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.zukan-status.dex-readout.error {
  color: #ffb3c4;
  border-left-color: var(--color-secondary);
}
.zukan-status.dex-readout.error::before { color: var(--color-secondary); }

/* カードグリッド: 横3枚 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2.5vw, 22px);
}

/* 図鑑だけ4枚ならび(検証中)。
   .card-grid はTOPとも共用なので、図鑑の結果グリッドと
   その未選択時プレースホルダにだけ効かせる。3枚に戻すならこの2行を消す */
.dex-cards,
.dex-placeholder-grid {
  grid-template-columns: repeat(4, 1fr);
}

.card-cell {
  position: relative;
  aspect-ratio: 222 / 332; /* TCGカード比率 */
  border-radius: 10px;
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(26px) scale(0.94);
}

.card-cell.is-visible {
  animation: card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
}

.card-cell:hover img,
.card-cell:focus-visible img {
  transform: translateY(-8px) scale(1.05) rotate(-1.2deg);
  filter: drop-shadow(0 0 16px var(--color-shadow-cyan-glow)) drop-shadow(0 10px 14px rgba(4, 59, 131, 0.3));
}

.card-cell:focus-visible { outline: 3px solid var(--color-text-cyan); outline-offset: 4px; }

/* --- データ空間に並ぶ「DNAデータ」としてのカード ---

   カード1枚はマゼモンのDNAデータという設定。
   暗色化は `.dex-cards` に限定している(`.card-grid` / `.card-cell` /
   `.card-skeleton` はTOPページと共用のため)。 */

/* 復元されるように出す。走査線が下から上へ抜けて実体化する */
.dex-cards .card-cell {
  --dna-hue: 0deg;
  position: relative;
}

.dex-cards .card-cell::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(157, 252, 255, 0.28);
  border-radius: 10px;
  box-shadow: inset 0 0 14px rgba(0, 169, 255, 0.18);
  opacity: 0;
  transition: opacity 0.25s, box-shadow 0.25s;
}

.dex-cards .card-cell:hover::before,
.dex-cards .card-cell:focus-visible::before {
  opacity: 1;
  box-shadow: inset 0 0 20px rgba(0, 169, 255, 0.3), 0 0 18px rgba(0, 169, 255, 0.35);
}

/* 実体化の走査。リビール1回だけで、常時ループはしない(§4.5) */
.dex-cards .card-cell.is-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(157, 252, 255, 0.5) 46%,
    #ffffff 50%,
    rgba(157, 252, 255, 0.5) 54%,
    transparent 100%
  );
  background-size: 100% 260%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: dna-materialize 760ms ease-out both;
  animation-delay: inherit;
}

@keyframes dna-materialize {
  from { background-position: 0 150%; opacity: 1; }
  85%  { opacity: 1; }
  to   { background-position: 0 -150%; opacity: 0; }
}

/* ローディング プレースホルダー（シマー） */
.card-skeleton {
  aspect-ratio: 222 / 332;
  border-radius: 10px;
  background: linear-gradient(110deg, #dbe7f0 30%, #f0f7fc 50%, #dbe7f0 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* ==========================================================
   カード拡大モーダル
   ========================================================== */

.card-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.card-modal[hidden] { display: none; }

.card-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-dark-40);
  backdrop-filter: blur(4px);
  animation: fade-in 0.25s ease both;
}

/* せまい画面では縦積み(カード → 情報)。
   【スクロールさせない仕組み】body に max-height を置き、
   画像側だけ flex:1 + min-height:0 で縮ませる。
   情報ブロックは内容ぶんの高さを取り、余りが画像に回るので、
   「情報の高さ」を決め打ちしなくても画面内に収まる。
   dvh はモバイルのアドレスバー出入りで高さが変わる問題への対応
   (未対応ブラウザ向けに vh を先に書いて上書きする) */
/* 【Grid を使う理由】flex + `max-height:100%` だと、親の高さが不定と判断されて
   画像側の百分率が解決されず、画像が縮まないまま画面外へはみ出す(実測で発生)。
   Grid の `minmax(0, 1fr)` は行の高さが確定するので、
   中の画像の `max-height: 100%` がきちんと効く。
   dvh はモバイルのアドレスバー出入りで高さが変わる問題への対応
   (未対応ブラウザ向けに vh を先に書いて上書きする) */
.card-modal-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 12px;
  width: min(420px, 88vw);
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  animation: modal-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.card-modal-figure {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.card-modal-figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 0 110px var(--color-shadow-cyan-glow);
}

/* --- 情報パネル --- */
.card-modal-info {
  flex-shrink: 0;
  width: 100%;
  padding: 12px 14px 14px;
  background: rgba(6, 26, 62, 0.92);
  border: 1px solid rgba(157, 252, 255, 0.4);
  border-radius: 4px;
  box-shadow: inset 0 0 26px rgba(0, 169, 255, 0.12);
}

.card-modal-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  line-height: 1.45;
  text-align: center;
  color: var(--color-white);
  word-break: auto-phrase;
}

/* HP・こうげき力など。図鑑APIは返さないので、持っているときだけ表示する */
/* 数値の並び。**位置を固定する**のが要点。
   flex + wrap にしていたら、わざ名の長さで
   「ぞくせい / HP / こうげき」が2段になったり1段になったりして、
   カードを切り替えるたびに行数が変わっていた。

   grid-template-areas で
     1段目: ぞくせい(全幅)
     2段目: HP / こうげき(半分ずつ)
     3段目: わざ(全幅)
   に固定してあるので、文字数でも欠けた項目でもレイアウトは動かない。
   どの div がどこに入るかは js が付ける data-stat で決まる
   (js/main.js の MODAL_STAT_ROWS 参照) */
.card-modal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "attr  attr"
    "hp    power"
    "skill skill";
  gap: 6px;
  margin: 10px 0 0;
}

.card-modal-stats[hidden] { display: none; }

.card-modal-stats [data-stat="attr"] { grid-area: attr; }
.card-modal-stats [data-stat="hp"] { grid-area: hp; }
.card-modal-stats [data-stat="power"] { grid-area: power; }
.card-modal-stats [data-stat="skill"] { grid-area: skill; }

.card-modal-stats div {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(0, 169, 255, 0.16);
  border-radius: 999px;
  /* grid アイテムは既定で min-width:auto。長いわざ名で列が広がるのを防ぐ */
  min-width: 0;
}

.card-modal-stats dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-cyan);
}

.card-modal-stats dt {
  /* ラベルは縮ませない(「こうげき」が折り返すと2行になる) */
  flex: 0 0 auto;
}

.card-modal-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-white);
  /* 長いわざ名でも枠を割らずに折り返す */
  min-width: 0;
  overflow-wrap: anywhere;
}

.card-modal-mats {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed rgba(157, 252, 255, 0.28);
}

.card-modal-mats-label {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--color-text-cyan-light);
}

/* そざいは最大4つ。1行に収める(4つでも横に並ぶ幅にする) */
.card-modal-mats-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.card-modal-mats-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: clamp(52px, 15vw, 66px);
}

/* .card-modal-mats-ph は「そざい索引がまだ来ていないときの空枠」。
   img と同じ大きさにしておかないと、アイコンが後から入った瞬間に
   下の文字がガクッと動く */
.card-modal-mats-list img,
.card-modal-mats-ph {
  width: clamp(34px, 10vw, 44px);
  height: clamp(34px, 10vw, 44px);
  object-fit: contain;
  border-radius: 8px;
  background: rgba(157, 252, 255, 0.08);
  border: 1px solid rgba(157, 252, 255, 0.22);
}

.card-modal-mats-ph { display: block; }

.card-modal-mats-list span {
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: center;
  color: var(--color-text-cyan-pale);
  overflow-wrap: anywhere;
}

/* 広い画面はカードを左、情報を右に置いて縦の余白を稼ぐ */
@media (min-width: 720px) {
  .card-modal-body {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    width: auto;
    max-width: min(760px, 92vw);
    max-height: min(88vh, 760px);
  }

  .card-modal-figure { width: auto; height: 100%; }

  .card-modal-info { width: 286px; }
}

.card-modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-text-cyan-light);
  background: var(--color-header);
  color: var(--color-text-cyan-light);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 14px var(--color-shadow-cyan);
  transition: transform 0.2s;
}
.card-modal-close:hover { transform: scale(1.12) rotate(90deg); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ==========================================================
   マゼモンとは? ページ
   ========================================================== */

.about-hero {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* aspect-ratio の `auto <ratio>` は「読み込み前だけこの比率で場所を取り、
   読み込み後は画像本来の比率を使う」指定。これがないと読み込み前の高さが0になり、
   ページ全体が1画面に収まったように見えてスクロールリビールが一斉に発火してしまう
   (レイアウトシフトの抑制にもなる) */
.about-hero-logo {
  width: 100%;
  max-width: 340px;
  aspect-ratio: auto 1187 / 546;
  margin: 0 auto 22px;
  filter: drop-shadow(0 0 24px rgba(157, 252, 255, 0.45));
  animation: hero-float 4s ease-in-out infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.about-hero-copy {
  font-size: var(--fs-body);
  line-height: 2;
  text-align: left;
  background: rgba(0, 90, 128, 0.3);
  border: 1px solid var(--color-text-cyan-light);
  box-shadow: 0 0 20px var(--color-bg-cyan-light);
  border-radius: 12px;
  padding: 20px 22px;
}

.about-hero-copy strong { color: var(--color-text-cyan-light); }

/* 中見出し。
   英字の副題(.about-h3-sub)を**背面の巨大英字**に変えている。
   litpla.com がセクションの区切りに 80〜90px の英字ラベルを置いて
   メリハリを作っているのを参考にした。
   以前は 11.5px でただ横に添えていただけで、
   見出しと本文の差が 23px → 16px しかなく平坦だった(実測) */
.about-h3 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--color-primary);
  /* 上の余白は「背面の巨大英字の高さ + 空き」。
     英字は bottom:100% で見出しの真上に立ち、PCでは59px使う。
     74pxのままだと直前の本文と15pxしか空かず詰まって見えた(実測) */
  margin: clamp(74px, 8vw, 104px) 0 22px;
  padding-left: 14px;
  border-left: 6px solid var(--color-text-gallery-title);
  /* 背面英字がはみ出すぶんの余白。flex だと英字が行に混ざるのでやめた */
  display: block;
  z-index: 0;
}
.about-h3:first-child { margin-top: 8px; }

.about-h3-sub {
  position: absolute;
  left: 8px;
  /* 見出しの行ボックスの上端に英字の下端を合わせる。
     line-height:0.82 なので字面は箱より下に少しはみ出し、
     結果として和文の上に15%ほど軽くかぶる。
     62% にしていたら和文の字面と半分重なって両方読みにくかった(実測) */
  bottom: 100%;
  z-index: -1;
  font-family: var(--font-title);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-section-en);
  line-height: 0.82;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text-gallery-title);
  opacity: 0.16;
  pointer-events: none;
}

/* 明るいページの中では、背面英字を少し濃くしないと沈む */
.page-light .about-h3-sub { opacity: 0.14; }

/* 和文の折り返しをそろえる。
   ここに挙げた要素は幅の狭いカードの中にあり、既定の折り返しだと
   「ひっさつわざをくりだそ / う」(1文字だけ次行)、
   「「ミス」「ひ / っさつ」」(小書き文字が行頭)、
   「カクカクサプ / リ」」(鉤括弧の途中)のように切れていた(実測)。
   auto-phrase は文節で折るので、これらが出なくなる。
   Chrome以外は無視されるだけなので安全に足せる。
   **狭い箱に和文を入れる要素を足したら、ここにも追加すること** */
.section-title,
.about-h3,
.about-card p,
.step-head :is(h3, h4),
.step-item p,
.basics-desc,
.portal-nav-desc,
.about-info-note,
.store-name,
.store-info dd {
  line-break: strict;
  word-break: auto-phrase;
}

/* 各項目の最初の一文。
   litpla.com は 40〜46px の短い日本語で言い切ってから、
   細かい説明を 16px に落としている。その段差をここで作る。
   **短く言い切る用**なので、長い説明は .body-detail に分けること */
.lead-statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-statement);
  line-height: 1.6;
  letter-spacing: 0.01em;
  /* 和文の改行位置。auto-phrase は文節で折るので
     「世界に1 / まいだけ」のような切れ方を防げる。
     text-wrap:balance は行末をそろえる代わりに変な位置で折るのでやめた */
  line-break: strict;
  word-break: auto-phrase;
  /* 詳細(.body-detail)と左端・幅を必ず揃える。
     コロシアムでは詳細側だけ既存の .coliseum-body が効いて
     左端が80pxずれていた(実測) */
  max-width: 720px;
  margin: 0 auto 14px;
}
/* 強調色。#02a1f3 は暗い背景では実測 2.6:1 しか出ないので
   暗いセクションではシアン、明るいページでは元の青にする */
.lead-statement strong { color: var(--color-text-cyan-light); }
.page-light .lead-statement { color: var(--color-primary); }
/* 明るいページは #02a1f3 だと白地に対して 2.6:1 しか出ない。
   同じ文脈の .body-detail strong / .about-card strong と同じ濃い青に揃える */
.page-light .lead-statement strong { color: var(--color-text-blue); }

/* ページ直下のリード文を「言い切り」の大きさに上げる修飾。
   litpla.com はページの入口に 40〜46px・20字前後の短い日本語を置いて、
   そこから 16px の本文に落としている。
   **短いリードにだけ付ける**(30字を超えると2行で重くなる) */
.section-lead.is-statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-statement);
  line-height: 1.55;
  line-break: strict;
  word-break: auto-phrase;
  margin-bottom: 30px;
}

/* ==========================================================
   1行固定(.oneline > .is-oneline)
   ==========================================================
   「絶対に折り返させたくない言い切り」用。

   和文は1文字 = 1em なので、`文字数 × font-size` の幅が無いと必ず折り返す。
   PCでは入るがスマホでは入らない、という文言がほとんどなので、
   **親の内側の幅を文字数で割った値を font-size の上限にする**ことで、
   狭い画面では自動的に縮んで1行に収まるようにしている。

   ■ なぜ vw ではなく cqw か
   vw だと (a) スクロールバーのぶんズレる (b) 親の padding や max-width を
   自分で勘定に入れる必要がある。cqw は「親の内側の幅」そのままなので、
   割る数 = 文字数(実測のem幅)だけ決めれば済む。

   ■ 割る数は**実測**で決めること
   文字数そのままではなく、その書体・letter-spacing で測った em 幅を使う。
   測り方(ブラウザのコンソールで):
     s=document.createElement('span');
     s.style.cssText='position:absolute;white-space:nowrap;font:800 100px "M PLUS 1"';
     s.textContent='ここに文言'; document.body.append(s);
     s.getBoundingClientRect().width/100   // ← これが em 幅
   実測値そのままだとギリギリなので、少し多めの数で割る。

   ■ @supports で囲っている理由
   コンテナクエリ単位が無いブラウザでは font-size の指定が丸ごと無効になり、
   **white-space: nowrap だけが残って文字が画面外にはみ出す**。
   折り返すほうが安全なので、cqw が使えるときだけ 1行固定にする。
   ========================================================== */
@supports (font-size: 1cqw) {
  .oneline { container-type: inline-size; }

  .oneline > .is-oneline {
    white-space: nowrap;
  }

  /* 「そざいをマゼて、世界に1まいだけのモンスター」= 実測 21.46em → 22 で割る */
  .about-hero-copy .oneline > .is-oneline {
    font-size: min(var(--fs-statement), calc(100cqw / 22));
  }

  /* 「マゼモンジェネレーターであそべる場所はこちら！」= 実測 23.01em。
     狭い画面では .section-lead に padding: 0 2px が付くので、その分も見て 23.4 */
  [data-page="stores"] .oneline > .is-oneline {
    font-size: min(var(--fs-statement), calc(100cqw / 23.4));
  }

  /* --- 節の題字(h2)を1行に固定する -----------------------------------
     こちらは**割る数をHTML側から渡す**方式にしている(`style="--oneline-em: 9"`)。
     題字は文言ごとに文字数が違うので、数字を文言のすぐ隣に置いたほうが
     直したときに測り直しを忘れにくい。

     引く幅:
       --oneline-deco  左右の飾り線 + gap。760px以下では飾り線を隠しているので0
       --oneline-badge LIVEバッジ + gap(バッジのある題字だけHTML側で指定)

     Dela Gothic One はほぼ正方の字面なので、em幅 ≒ 文字数。
     数字が混ざる文言(Oswald Numerals になる)は実測すること。 */
  .section-title-wrap.oneline {
    container-type: inline-size;
    --oneline-deco: calc(2 * clamp(28px, 8vw, 70px) + 28px);
  }

  .section-title.is-oneline {
    font-size: min(
      var(--fs-title),
      calc((100cqw - var(--oneline-deco, 0px) - var(--oneline-badge, 0px)) / var(--oneline-em))
    );
  }
}

/* 飾り線は760px以下で display:none なので、引く幅も0にする */
@media (max-width: 760px) {
  .section-title-wrap.oneline { --oneline-deco: 0px; }
}

/* .is-oneline-wide = 文字数が多い題字(15文字前後)に付ける逃げ道。
   狭い画面でだけ nowrap を外す。

   ■ 何のためか
   font-size の計算式が効いているので、実際にはこれが無くても1行に収まる
   (320pxで「全国で生まれたマゼモンたちだ！」は19.7pxまで縮んで収まる)。
   これは **em幅の見積もりが甘かったときの保険**で、
   はみ出す代わりに折り返せるようにしてある(折り返す場合も
   word-break: auto-phrase が効くので文節で折れる)。

   369px という境目は「1行にしたときの大きさが 22.4px(h3の最小)を
   下回りはじめる幅」= 15 × 22.4 = 336px の題字幅から逆算した値。 */
@media (max-width: 369px) {
  .section-title.is-oneline-wide { white-space: normal; }
}

/* ステートメントに続く説明。小さく、行間をゆったり */
/* .lead-statement の下に置く「詳しい説明」。
   色は明るいページ/暗いページで分ける。
   #333 を既定にしていたら暗い背景のセクションで
   コントラスト 1.7:1(実測)になり読めなかった */
.body-detail {
  font-size: var(--fs-sub);
  line-height: 1.95;
  line-break: strict;
  word-break: auto-phrase;
  max-width: 720px;
  margin: 0 auto;
  color: rgba(222, 251, 252, 0.88);
}
.page-light .body-detail { color: #333; }
/* 強調は明るい背景では濃い青、暗い背景ではシアン。
   青のままだと暗いセクションで沈む(実測 2.9:1) */
.body-detail strong { color: var(--color-text-cyan); }
.page-light .body-detail strong { color: var(--color-text-blue); }

/* ものがたり: Dr.ハムレスの立ち絵とテキストの横並び。
   素材は500×500で上部に余白があるため、負のマージンで詰めている */
.story-intro {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 18px;
}

/* 名前バッジを立ち絵に重ねるための枠。flex-shrink はここに持たせ、
   img 自体は幅だけ担当する(bad: img に position:relative を付けると
   バッジの基準がずれる) */
.story-chara-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: -14px;
}

.story-chara {
  display: block;
  width: clamp(110px, 24vw, 170px);
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(4, 59, 131, 0.18));
}

.story-chara-name {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 3px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(4, 59, 131, 0.3);
}

/* 立ち絵の隣のテキストをまとめる箱。
   min-width:0 がないと flex アイテムが中身の最小幅で踏ん張って
   はみ出す(和文だと効きにくいが、英字混在で効く) */
.story-text { flex: 1 1 auto; min-width: 0; }
.story-intro p { margin-bottom: 0; }
.story-text .lead-statement { margin-bottom: 10px; }

@media (max-width: 560px) {
  /* 狭い画面では本文の幅が足りなくなるので縦積みにする */
  .story-intro { flex-direction: column; align-items: center; gap: 6px; }
  .story-text { align-self: stretch; }
  .story-chara-wrap { margin-top: 0; }
}

/* :not([class]) が要る。ここが `.about-story p` だけだと
   詳細度(0,1,1)が .lead-statement / .body-detail(0,1,0)に勝ってしまい、
   ものがたりだけ言い切りが 32px → 16px に潰れていた(実測) */
.about-story p:not([class]) {
  font-size: var(--fs-body);
  line-height: 2;
  margin-bottom: 18px;
}
.about-story strong { color: var(--color-text-blue); }

.about-figure { margin: 0 auto; max-width: 560px; }
.about-figure img {
  width: 100%;
  aspect-ratio: auto 1500 / 1051; /* 読み込み前の場所取り。.about-hero-logo のコメント参照 */
  border-radius: 12px;
  border: 2px solid var(--color-border-gray);
}
.about-figure figcaption {
  font-size: 0.75rem;
  color: var(--color-text-gray-dark);
  text-align: center;
  margin-top: 8px;
}

/* あそびかた STEP */
.step-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.step-item {
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.step-item:hover {
  transform: translateY(-5px);
  border-color: var(--color-text-cyan);
  box-shadow: 0 8px 0 rgba(4, 59, 131, 0.12), 0 0 22px var(--color-bg-cyan-light);
}

.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-text-gallery-title), var(--color-primary));
  padding: 4px 10px;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  flex-shrink: 0;
}

.step-head :is(h3, h4) {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--color-primary);
}

/* video も img と同じ扱いにする。img だけを指定していたため、
   STEP.03 に動画を入れたとき素の 960px 幅で描画されて画面からはみ出した */
.step-item img,
.step-item video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #000;
}

.step-item p {
  font-size: var(--fs-sub);
  line-height: 1.8;
  padding: 12px 14px 16px;
  color: #333;
}

/* バトルのヒミツ / もっと楽しむ カード */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

/* カードが1枚だけのグリッド(コロシアムの「ひっさつわざ」など)。
   auto-fit なので1枚だと横幅いっぱいに伸び、本文が読みにくくなるため抑える */
.about-grid > .about-card:only-child {
  max-width: 560px;
  margin-inline: auto;
}

.about-card {
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}

.about-card :is(h3, h4) {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-blue);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px dashed var(--color-bg-blue-light);
}

.about-card p { font-size: var(--fs-sub); line-height: 1.85; color: #333; }
.about-card strong { color: var(--color-text-blue); }
.about-card-img {
  width: 100%;
  /* height:auto が無いと、img に height 属性が付いている場合に
     属性値がそのまま高さになって縦に伸びる(実測 259×720 まで潰れた)。
     §10「height: auto を忘れないこと」と同じ注意点 */
  height: auto;
  aspect-ratio: auto 1500 / 1051; /* 同上 */
  border-radius: 10px;
  margin: 10px 0;
}

/* .about-card の中にカードのサンプルを3枚ならべる(コロシアムのバトルルール)。
   カードは縦長なので、横に3枚だと1枚あたりが細い。数字そのものは読めないので、
   HPとわざの値は下の .rule-cards-stat にテキストで添えている */
.rule-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
}

.rule-cards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.rule-cards img {
  width: 100%;
  /* height 属性を付けてあるので height:auto が必須(上の .about-card-img と同じ注意点) */
  height: auto;
  aspect-ratio: 1276 / 2008;
  border-radius: 5px;
  border: 1px solid var(--color-bg-blue-light);
}

/* カード1枚の幅が125px前後しかないので、1行に収めようとすると
   10px を切って読めなくなる(実測 9.92px)。2行に分けて
   サイト標準のキャプションサイズ(--fs-caption)を確保している */
.rule-cards-stat {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-blue);
  text-align: center;
}

/* .about-card の中に置く実画面のキャプチャ(注釈つきの図など) */
.rule-shot {
  width: 100%;
  /* height 属性を付けてあるので height:auto が必須(§10「height: auto を忘れないこと」) */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 12px 0 0;
  border-radius: 8px;
  border: 1px solid var(--color-bg-blue-light);
  background: #000;
}

/* .about-card の中に置く短いループ動画(ひっさつわざの発動など) */
.rule-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 12px 0 0;
  border-radius: 8px;
  border: 1px solid var(--color-bg-blue-light);
  background: #000;
}

/* ぞくせい三すくみ */
/* ぞくせいの三すくみ。3つを三角形に置いて、辺にそって矢印を回し
   「火 → 自然 → 水 → 火」と循環していることが一目で分かるようにする。

   ■ 頂点は「火」(2026-08-29 に 水 → 火 へ変更)
   矢印は時計回りなので、上の頂点を入れ替えるだけで循環の向きは変わらない。
   触るのは下の3行(頂点の座標)だけで、矢印(.a1〜.a3)は辺の位置と角度を
   表しているので**そのまま**でよい。
   HTMLの並び順と図の下の説明文も、この順序に合わせてある。

   座標は正方形に直したときの実寸で決めている(コンテナは W × 0.88W):
     火  (50%, 16%)  → 実寸 (0.500W, 0.141W)
     自然(85%, 84%)  → 実寸 (0.850W, 0.739W)
     水  (15%, 84%)  → 実寸 (0.150W, 0.739W)
   各辺の中点と角度:
     火→自然 中点(67.5%, 50%)  角度  60deg   (.a1)
     自然→水 中点(50%,  84%)   角度 180deg   (.a2)
     水→火   中点(32.5%, 50%)  角度 -60deg   (.a3)
   矢印(▶)は既定で右向きなので、この角度ぶん回せば辺に沿う。 */
.attr-triangle {
  /* 辺の線の長さもこの値から計算するので、大きさを変えるときはここだけ直す */
  --tri-size: 200px;
  position: relative;
  width: min(100%, var(--tri-size));
  aspect-ratio: 1 / 0.88;
  margin: 16px auto;
}

.attr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--color-white);
  flex-shrink: 0;
}

/* 頂点。丸は矢印より前に出す(辺の線が丸の下をくぐるため) */
.attr-triangle .attr {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.attr-triangle .attr-fire   { left: 50%; top: 16%; }
.attr-triangle .attr-nature { left: 85%; top: 84%; }
.attr-triangle .attr-water  { left: 15%; top: 84%; }

/* 矢じりは CSS のボーダーで描く。
   「▶」(U+25B6)を回して使うと、フォントによってはグリフの向きと
   回転が噛み合わず、狙った方向を指さない(実測で判明)。
   ボーダーで描けばフォントに依存しない */
.attr-triangle .attr-arrow {
  position: absolute;
  z-index: 0;
  width: 14px;
  height: 14px;
  font-size: 0; /* 中の文字は使わない */
}

.attr-triangle .attr-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  /* 既定は右向き。親を回すと、この矢じりも一緒に回る */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
  transform: translate(-50%, -50%);
}

/* 辺の線。矢印は辺の中点にあり辺と同じ角度なので、
   その ::before を横に伸ばすとそのまま辺になる。
   長さ: 辺の実寸は 0.693×--tri-size、両端の丸(直径52px)を避けるぶんを引いて
   おおよそ 0.39×--tri-size にしている */
.attr-triangle .attr-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--tri-size) * 0.39);
  height: 2px;
  transform: translate(-50%, -50%);
  background: currentColor;
  opacity: 0.45;
}

.attr-triangle .attr-arrow.a1 { left: 67.5%; top: 50%; transform: translate(-50%, -50%) rotate(60deg); }
.attr-triangle .attr-arrow.a2 { left: 50%;   top: 84%; transform: translate(-50%, -50%) rotate(180deg); }
.attr-triangle .attr-arrow.a3 { left: 32.5%; top: 50%; transform: translate(-50%, -50%) rotate(-60deg); }

/* 公式の属性アイコン。素材が75×75しかないため、Retinaで甘くならないよう
   表示は 38px に抑え、下の色付き丸を土台として残している。
   256×256 の素材が用意できたら 52px 表示に戻してよい */
.attr img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.attr-water  { background: radial-gradient(circle at 32% 30%, #6ec9ff, #0d56b5); box-shadow: 0 0 12px rgba(13, 86, 181, 0.5); }
.attr-fire   { background: radial-gradient(circle at 32% 30%, #ff9b5e, #e8330f); box-shadow: 0 0 12px rgba(232, 51, 15, 0.5); }
.attr-nature { background: radial-gradient(circle at 32% 30%, #9fe06a, #2e8b2e); box-shadow: 0 0 12px rgba(46, 139, 46, 0.5); }

/* 向きは上の .attr-triangle .attr-arrow.aN 側で辺の角度ごとに指定する
   (ここで transform を書くと、詳細度が同じで後勝ちになり位置がずれる) */
.attr-arrow { color: var(--color-secondary); font-size: 0.9rem; animation: arrow-pulse 1.2s ease-in-out infinite; }

@keyframes arrow-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* --- カード拡大モーダル: つかったアイテム(サプリ) ---
   そざい欄と同じ様式(アイコン + 名前の縦積み)に寄せている。
   ゲームのカード画像でもアイテムのアイコンは「そざいのとなり」に
   載っているので、並びもそこに合わせた。
   使っていないカードでは js が hidden にする */
.card-modal-items {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed rgba(157, 252, 255, 0.28);
}

.card-modal-items[hidden] { display: none; }

.card-modal-items-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.card-modal-items-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 5px;
  background: rgba(0, 169, 255, 0.16);
  border-radius: 999px;
}

.card-modal-items-list img {
  width: 30px;
  /* 【重要】height 属性を付けているので auto が必須 */
  height: auto;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.card-modal-items-list span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-white);
  white-space: nowrap;
}

/* 「マゼモンとは?」ページの図版は、このページの基準幅(880px)に合わせる。
   ==========================================================
   `.shot-solo` の既定は 720px(「1枚を単独で見せる」用)だが、
   このページは**880pxのブロックが多数派**なので、図版だけ720pxだと
   左右端が凸凹して見える。実測(1280px幅・inner 880px):

     880px幅(左0/右880)  … 10件(step-list / about-grid / material-showcase / 表 など)
     720px幅(左80/右800) … 5件(図版 / 本文 / リード)

   図版を880pxに寄せて、多数派にそろえた。
   **本文とリード(.coliseum-body / .lead-statement / .body-detail)は
   720pxのまま**にしている。こちらは1行の文字数を抑えるための幅で、
   880pxにすると1行55文字前後になって読みにくいため。

   コロシアムページは逆に720pxが多数派なので、あちらは720pxに寄せている
   (§コロシアムの節)。**そのページの多数派に合わせる**のが基準。 */
.page[data-page="about"] .page-light-inner > .shot-solo {
  max-width: none;
}

/* ==========================================================
   もっと楽しむ: グッズ (.goods-*) — マゼモンとは? ページ
   ==========================================================
   公式ギャラリーサイトの「アプリからカンタン作成」を、このページの様式で組んだもの。
   構成: 合成写真 + 一言(.goods-intro) → 小見出し(.goods-app) →
         4STEP(.goods-steps。あそびかたの .step-item と同じ白カード) → アプリ案内(.goods-download)

   ■ 合成写真は透過PNG由来で題字が焼き込まれている
   白地のハーフトーンの上にそのまま置く(公式サイトでも明色の上に置いている)。
   暗い帯(.showcase)に載せる案もあったが、焼き込みの題字がマゼンタで
   サイトのシアン系と喧嘩するのでやめた。

   ■ PCは「写真 | 文」の2列、560px未満は縦積み
   写真を主役にしたいので写真側の列を広く取る(1.25 : 1) */
.goods-intro {
  display: grid;
  gap: 14px 30px;
  align-items: center;
  margin-top: 6px;
}
@media (min-width: 560px) {
  .goods-intro { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.goods-hero { margin: 0; }
.goods-hero img {
  display: block;
  width: 100%;
  height: auto;
  /* 透過画像の下に落とす影。白地から浮かないよう、ごく薄く */
  filter: drop-shadow(0 10px 18px rgba(4, 59, 131, 0.16));
}

/* 2列のときは文側の上下余白を詰めて、写真と高さの中心をそろえる */
.goods-intro-copy .lead-statement { margin-top: 0; }

/* 小見出し「アプリからカンタン作成」。
   上に小さな英字ラベルを置く(このページの .about-h3-sub と同じ役割の縮小版)。
   白地なので英字はシアンではなく --color-text-gallery-title(#02a1f3)で出す */
.goods-app {
  margin: 40px 0 18px;
  text-align: center;
}
.goods-app-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 3.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-primary);
}
.goods-app-en {
  display: block;
  margin-bottom: 2px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-text-gallery-title);
}
.goods-app-lead {
  max-width: 560px;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: #333;
  line-break: strict;
  word-break: auto-phrase;
}

/* 4STEP。画面写真(600×688)は縦長なので、あそびかた(.step-list, 3:2)とは別に組む。
   PCは4列、狭い画面は2列×2段(1列にすると写真が大きすぎて4画面ぶん伸びる) */
.goods-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 759px) {
  .goods-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.goods-step {
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}
.goods-step img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 688;
  object-fit: cover;
}
/* 番号バッジは あそびかた の .step-num をそのまま使う */
.goods-step .step-num {
  justify-self: start;
  margin: 10px 12px 0;
}
.goods-step p {
  margin: 0;
  padding: 6px 12px 12px;
  font-size: var(--fs-sub);
  line-height: 1.7;
  color: #333;
  line-break: strict;
  word-break: auto-phrase;
  /* 文節が列幅に入らないときの逃げ。無いと 320px で「お気に入りのカードを」が
     枠の外にはみ出した(実測: 列118px に対して文節141px) */
  overflow-wrap: anywhere;
}
.goods-step p strong { color: var(--color-text-blue); }

/* 369px以下: 2列だと1列が142pxしかなく、文が2〜3文字ずつ折れて読みにくい。
   1列にして、各STEPを「画面写真 | 番号 + 文」の横並びにする
   (縦積み1列だと写真が幅いっぱいになり、4STEPで4画面ぶん伸びる)。
   369px は「1行固定」の .is-oneline-wide と同じ境目 */
@media (max-width: 369px) {
  .goods-steps { grid-template-columns: minmax(0, 1fr); }
  .goods-step {
    grid-template-columns: 38% minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "img num"
      "img text";
    align-items: start;
  }
  .goods-step img {
    grid-area: img;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 0;
  }
  .goods-step .step-num { grid-area: num; margin: 10px 12px 0 12px; }
  .goods-step p { grid-area: text; padding: 6px 12px 12px; }
}

/* アプリの案内。絵(端末とキャラ)+ 名前 + ストアバッジ */
.goods-download {
  display: grid;
  gap: 14px 24px;
  align-items: center;
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}
@media (min-width: 560px) {
  .goods-download { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
}
.goods-download-img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
}
.goods-download-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--color-primary);
}
.goods-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.goods-badges a { display: block; transition: transform 0.2s; }
.goods-badges a:hover { transform: translateY(-2px); }
.goods-badges img {
  display: block;
  height: 44px;
  width: auto;
}
@media (max-width: 559px) {
  .goods-download { text-align: center; }
  .goods-badges { justify-content: center; }
}

/* ==========================================================
   アイテム変化 (STYLE CHANGE) — マゼモンとは? ページ
   ==========================================================
   もとは「もっと楽しむ」の中の小カード1枚だったが、
   「バトルのヒミツ」と同じ粒度の大項目に格上げした節。
   見出し・リード・カードの並びは既存の様式(.about-h3 /
   .lead-statement / .about-grid / .about-card)をそのまま使い、
   ここではアイテム固有の見た目だけを足している。
   ========================================================== */

/* サプリのカードは2枚で並べる。
   アイコンを主役にするぶんカードが縦に長くなるので、
   狭い画面では素直に1列に落ちるよう最小幅を上げてある */
/* サプリのカード2枚。
   ■ 組み方(2026-09-10 に組み直し)
   もとは「アイコン → 見出し → 説明 → サンプル」の縦積みで、
   1枚あたり約600px使っていた。サンプルカード(196px)の左右が
   200px以上空いたままで、**空白がいちばん場所を取っていた**。

   いまは「アイコン → サンプル」を**横に並べて矢印でつなぐ**。
   ・「このサプリを使うと、こうなる」という関係が図として読める
   ・アイコンとサンプルが縦に積まれないので、高さが約半分になる
   ・アイコンはサンプルより**大きく**置いて主役にする(3:2 の比率)
   実測: 1枚の高さ PC 600px → 318px / スマホ 480px → 300px */
.item-grid {
  /* minmax(300px, …) のままだと 320px幅で列が300pxになり、
     本文の欄(288px)から12pxはみ出して左右がずれる。
     min(300px, 100%) にすると狭い画面では親の幅に収まる */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  /* 直前の本文(.body-detail)との間隔。
     もとは0で、文章とカードがくっついて見えていた */
  margin-top: 30px;
}

.item-card {
  text-align: center;
  /* 縦の間隔は gap でそろえる(要素ごとの margin を積まない) */
  display: grid;
  gap: 10px;
  align-content: start;
}

/* アイコン(主役) → サンプルカード(結果)。矢印でつなぐ。
   幅は % で持たせているので、カードの列幅が変わっても比率は保たれる。
   アイコン42% : サンプル25% = およそ 5:3。
   **サンプルは縦長なので、同じ幅だとサンプルのほうが背が高くなって
   目を引いてしまう。** アイコンを一段大きくして主役をはっきりさせている */
.item-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 3%, 16px);
}

/* サプリのアイコン。
   支給素材は 1024px の透過PNG → 480pxのWebPにして使っている。
   アイコンを主役として大きく見せるため、
   サンプルカードより大きい幅を与えている */
.item-icon-main {
  /* 【重要】height 属性を付けているので auto が必須
     (§10「height: auto を忘れないこと」) */
  width: clamp(112px, 42%, 176px);
  height: auto;
  aspect-ratio: 1;
  /* 白フチ付きのステッカー風素材なので、影を足して紙から浮かせる */
  filter: drop-shadow(0 3px 5px rgba(4, 59, 131, 0.3));
}

/* 「→」。文字の「▶」は環境で向きが噛み合わないので図形で描く
   (.attr-arrow と同じ理由) */
.item-arrow {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--color-text-gallery-title);
}

/* サンプルのカードは**1枚**。縦長(668×1051)なので幅を絞る。
   高さがこの図の高さを決めるので、大きくしすぎないこと */
.item-sample {
  width: clamp(72px, 25%, 106px);
  /* 【重要】height 属性を付けているので auto が必須 */
  height: auto;
  aspect-ratio: 668 / 1051;
  border-radius: 6px;
  border: 1px solid var(--color-bg-blue-light);
}

.item-card :is(h3, h4) {
  /* 中央のアイコンとそろえるので、下線は全幅のまま中央寄せにする */
  text-align: center;
}

.item-card p {
  text-align: left;
}

/* 入手のしかたの一文。
   もとは番号付きの3ステップ(.item-steps)を四角い枠で囲んでいたが、
   **1文だけ・囲みなし**にした */
.item-howto {
  max-width: 720px;
  margin: 26px auto 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-body);
  line-height: 1.8;
  text-align: center;
  color: var(--color-primary);
  line-break: strict;
  word-break: auto-phrase;
}

.item-howto strong { color: var(--color-text-blue); }

/* 入手のしかたのキャプチャ2枚。
   .shot-solo と同じ幅(このページは880pxが基準)に収めるため、
   2列のグリッドで並べる */
.item-howto-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.item-howto-shots figure {
  margin: 0;
}

.item-howto-shots img {
  width: 100%;
  /* 【重要】height 属性を付けているので auto が必須 */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-bg-blue-light);
  background: #000;
}

.item-howto-shots figcaption {
  margin-top: 7px;
  font-size: var(--fs-caption);
  line-height: 1.7;
  text-align: center;
  color: var(--color-text-gray-dark);
  line-break: strict;
  word-break: auto-phrase;
}

/* 基本情報テーブル */
.about-info-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--color-bg-blue-light);
}

.about-info-table th,
.about-info-table td {
  padding: 14px 16px;
  font-size: var(--fs-sub);
  text-align: left;
  border-bottom: 1px solid var(--color-bg-blue-light);
}
.about-info-table tr:last-child th,
.about-info-table tr:last-child td { border-bottom: 0; }

.about-info-table th {
  width: 38%;
  background: rgba(2, 161, 243, 0.08);
  color: var(--color-text-blue);
  font-family: var(--font-display);
  font-weight: 700;
}
.about-info-table td { color: #333; }

/* ==========================================================
   TOP: きほんのあそびかた(3ステップ)

   ゲーム公式サイトの「あそびかた」節によくある骨格をなぞっている:
     巨大な英字を奥行き方向に傾けて置く
     → その手前に斜めバナーの和文見出し
     → 斜めストライプを背後に流す
     → 動画枠 + 太字1行の説明
     → ステップごとに左右を入れ替える
   あちらは見出しを画像で作っているが、こちらはテキストのまま
   (見出しの画像化は印象が変わりすぎるため採用しない方針)
   ========================================================== */

.section-basics {
  padding-top: 8px;
  /* 巨大英字とストライプが枠外へ出るのを隠す。
     ここを visible にすると横スクロールが発生する */
  overflow: hidden;
}

.basics-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-caption);
  letter-spacing: 0.3em;
  text-align: center;
  color: var(--color-text-cyan);
}

.basics-heading {
  margin: 6px 0 clamp(28px, 6vw, 52px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lead);
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
  color: var(--color-text-cyan-pale);
}

.basics-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  gap: clamp(52px, 9vw, 96px);
}

/* ステップごとのアクセント色。原色を並べず、
   シアン → 明シアン → 黄(ロゴのアウトライン色)で最後に山を作る。
   赤ピンクは §3.5 で「広い面に使わない」とされているので使わない */
.basics-step:nth-child(1) { --step-accent: #4dfaff; --step-deep: #036f9e; }
.basics-step:nth-child(2) { --step-accent: #9dfcff; --step-deep: #0a5c88; }
.basics-step:nth-child(3) { --step-accent: #ffd900; --step-deep: #8a6a00; }

.basics-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}

/* 偶数ステップは左右を入れ替える(参考サイトが RUN と FIGHT で反転させている) */
.basics-step:nth-child(even) .basics-head { order: 2; }
.basics-step:nth-child(even) .basics-body { order: 1; }

/* ---------- 見出し側 ---------- */

.basics-head {
  position: relative;
  min-height: clamp(104px, 18vw, 168px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 背後を斜めに走るストライプ。奥行きの方向を示す役割 */
.basics-stripes {
  position: absolute;
  top: 50%;
  left: -30%;
  width: 160%;
  height: clamp(56px, 11vw, 92px);
  transform: translateY(-50%) rotate(-7deg);
  background: repeating-linear-gradient(
    118deg,
    color-mix(in srgb, var(--step-accent) 26%, transparent) 0 9px,
    transparent 9px 24px
  );
  pointer-events: none;
}

/* 巨大な英字。
   外側 .basics-en は「位置決め + 登場アニメ(.reveal-depth)」担当。
   内側 <b> が「奥行き方向への傾き + 押し出しの厚み」担当。
   分けているのは、.reveal-depth の is-shown が transform: none を当てるため、
   同じ要素に傾きを書くと打ち消されてしまうから。 */
.basics-en {
  position: absolute;
  top: -0.1em;
  left: -0.06em;
  z-index: 0;
  pointer-events: none;
}

.basics-en b {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  /* SELECT/CREATE は6文字。見出し列(約420px)を大きく超えると
     動画の下に潜って文字が切れて見えるため、列幅に収まる上限にしている */
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--step-accent);
  opacity: 0.9;
  white-space: nowrap;
  transform-origin: left center;
  transform: perspective(620px) rotateY(-24deg) rotateZ(-7deg);
  text-shadow:
    -2px 3px 0 var(--step-deep),
    -4px 6px 0 var(--step-deep),
    -6px 9px 0 #021a3d,
    -8px 12px 0 #01102a,
    0 0 34px color-mix(in srgb, var(--step-accent) 45%, transparent);
}

.basics-step:nth-child(even) .basics-en {
  left: auto;
  right: -0.06em;
}

.basics-step:nth-child(even) .basics-en b {
  /* 反転側は逆向きに奥へ倒す */
  transform-origin: right center;
  transform: perspective(620px) rotateY(24deg) rotateZ(7deg);
  text-shadow:
    2px 3px 0 var(--step-deep),
    4px 6px 0 var(--step-deep),
    6px 9px 0 #021a3d,
    8px 12px 0 #01102a,
    0 0 34px color-mix(in srgb, var(--step-accent) 45%, transparent);
}

/* 和文見出し。斜めに切った帯に載せ、右端を尖らせて速度感を出す */
.basics-title {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin: clamp(30px, 6.5vw, 58px) 0 0;
  padding: 0;
  max-width: 100%;
}

.basics-title span {
  display: inline-block;
  padding: clamp(7px, 1.6vw, 12px) clamp(30px, 5vw, 46px) clamp(7px, 1.6vw, 12px) clamp(16px, 3vw, 26px);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.15rem, 4.6vw, 2.1rem);
  line-height: 1.35;
  color: var(--color-white);
  /* アクセント色の混合比を 40% に抑えているのは白文字のコントラスト確保のため。
     62% だと帯の明るい端が rgb(49,177,208) まで上がり、白文字とのコントラストが
     2.56:1(大きな文字の基準 3:1 未満)になって読みにくかった。
     40% なら3ステップすべてで 3.8:1 以上になる */
  background: linear-gradient(100deg, var(--step-deep), color-mix(in srgb, var(--step-accent) 40%, #043b83));
  /* 右端を斜めに落として、尖った帯にする */
  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  transform: skewX(-8deg);
  box-shadow: 0 6px 0 rgba(1, 16, 42, 0.55), 0 0 22px color-mix(in srgb, var(--step-accent) 30%, transparent);
  text-shadow: 1px 2px 0 rgba(1, 16, 42, 0.6);
}

/* 帯だけ傾けて、文字は起こす(読みやすさを落とさないため) */
.basics-title span > em { font-style: normal; }

.basics-step:nth-child(even) .basics-title { align-self: flex-end; }
.basics-step:nth-child(even) .basics-title span {
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%);
  transform: skewX(8deg);
  background: linear-gradient(260deg, var(--step-deep), color-mix(in srgb, var(--step-accent) 40%, #043b83));
}

/* ---------- 本文側 ---------- */

.basics-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* 動画の上に載る小さな斜めラベル。参考サイトの「プッシュ&チャージ」相当 */
.basics-tag {
  align-self: flex-start;
  margin-left: clamp(4px, 2vw, 18px);
}

.basics-tag span {
  display: inline-block;
  padding: 4px 20px 4px 14px;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  color: var(--color-header);
  background: var(--step-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transform: skewX(-8deg);
}

.basics-step:nth-child(even) .basics-tag { align-self: flex-end; margin-right: clamp(4px, 2vw, 18px); }
.basics-step:nth-child(even) .basics-tag span {
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
  transform: skewX(8deg);
}

.basics-media {
  position: relative;
  width: 100%;
  padding: 7px;
  background: rgba(0, 90, 128, 0.3);
  border: 2px solid var(--step-accent);
  border-radius: 4px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--step-accent) 26%, transparent);
}

.basics-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.basics-desc {
  max-width: 34em;
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.85;
  text-align: center;
  text-wrap: balance;
  color: var(--color-text-cyan-pale);
}

.basics-desc strong { color: var(--step-accent); }

.basics-cta { margin-top: clamp(36px, 7vw, 56px); text-align: center; }

/* ---------- 狭い画面 ---------- */

@media (max-width: 720px) {
  /* 2カラムをやめて縦積みにする。左右の入れ替えも解除して読み順を素直にする */
  .basics-step,
  .basics-step:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .basics-step:nth-child(even) .basics-head,
  .basics-step:nth-child(even) .basics-body { order: initial; }

  .basics-head { min-height: clamp(96px, 30vw, 150px); }

  /* 反転側も同じ向きに揃える(縦積みでは反転の意味がなくなる) */
  .basics-step:nth-child(even) .basics-en { left: -0.06em; right: auto; }
  .basics-step:nth-child(even) .basics-en b {
    transform-origin: left center;
    transform: perspective(620px) rotateY(-24deg) rotateZ(-7deg);
    text-shadow:
      -2px 3px 0 var(--step-deep),
      -4px 6px 0 var(--step-deep),
      -6px 9px 0 #021a3d,
      0 0 26px color-mix(in srgb, var(--step-accent) 45%, transparent);
  }
  .basics-step:nth-child(even) .basics-title { align-self: flex-start; }
  .basics-step:nth-child(even) .basics-title span {
    clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
    transform: skewX(-8deg);
    background: linear-gradient(100deg, var(--step-deep), color-mix(in srgb, var(--step-accent) 40%, #043b83));
  }
  .basics-step:nth-child(even) .basics-tag { align-self: flex-start; margin-left: clamp(4px, 2vw, 18px); margin-right: 0; }
  .basics-step:nth-child(even) .basics-tag span {
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    transform: skewX(-8deg);
  }
}

@media (max-width: 480px) {
  /* 小さい画面では押し出しの段数を減らす。太い影は文字を潰すため */
  /* 偶数ステップ側の指定(720px以下ブロック)より詳細度を上げないと
     MIX だけ影の層数が揃わないので、同じ詳細度で並べて打ち消す */
  .basics-en b,
  .basics-step:nth-child(even) .basics-en b {
    text-shadow:
      -2px 3px 0 var(--step-deep),
      -4px 6px 0 #021a3d,
      0 0 20px color-mix(in srgb, var(--step-accent) 45%, transparent);
  }
}

/* ==========================================================
   マゼモン図鑑の導入あしらい

   見出しの下に小さなマゼモンを並べた帯。**装飾**なので、
   下の検索結果グリッドより明確に弱く見せるのが狙い:
   - 小さい(56px前後)
   - 彩度と不透明度を少し落とす
   - 影・枠を強く付けない
   - カーソルは変えない(押せる要素だと誤解させない)
   ========================================================== */

.zukan-intro {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  /* .dex-stream の中に入ったので、下マージンは親側で持つ */
  margin: 0;
  /* 中身(丸いアイコン)はAPIの応答のあとにJSが入れるので、最初は高さ0だった。
     届いた瞬間に帯が60px伸びて、下の検索・カード一覧がまとめて押し下がっていた
     (CLS 0.09。2026-10-02 実測)。いちばん大きいアイコンと同じ高さを先に確保する */
  min-height: clamp(44px, 11vw, 60px);
  /* 【はみ出し対策】枚数は js/zukan-intro.js が画面幅で決めているが、
     境目の幅では合計が親幅を少し超えて左右にこぼれる
     (実測: 375px幅で38pxはみ出していた。body の overflow-x:hidden で
     見えていなかっただけ)。帯なので切り落として問題ない */
  overflow: hidden;
  /* 端に寄った絵をふわっと消して「帯」に見せる */
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.zukan-intro-cell {
  position: relative;
  flex: 0 0 auto;
  width: clamp(44px, 11vw, 60px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  /* 主役にしないため、彩度と不透明度を落とす */
  opacity: 0;
  filter: saturate(0.82);
  box-shadow: 0 2px 6px rgba(4, 59, 131, 0.14);
  animation: zukan-intro-in 420ms var(--ease-out) both;
}

/* カード画像(1276×2008)のうち、絵の部分だけを丸に入れる。
   切り抜く正方形は「一辺 = カード幅の68%、中心 = 横50%・縦42%」。
   これより大きいと右上のHP表示やカード枠が、小さいとマゼモンの頭や足が切れる
   (2026-10-06、新しいカード11枚で確認)。
     幅  = 1 / 0.68                          = 147.06%
     左  = -(0.50 − 0.34) / 0.68             = -23.53%
     上  = -(0.42 × 2008 − 0.34 × 1276) / (0.68 × 1276) = -47.2%
   丸は正方形なので、上の % も一辺に対する割合として使える */
.zukan-intro-cell img {
  position: absolute;
  width: 147.06%;
  max-width: none;
  height: auto;
  left: -23.53%;
  top: -47.2%;
}

@keyframes zukan-intro-in {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to   { opacity: 0.88; transform: none; }
}

/* 1枚だけ大きさを変えてリズムを付ける(装飾らしさを出すため) */
.zukan-intro-cell:nth-child(even) { width: clamp(36px, 9vw, 50px); }

/* ==========================================================
   マゼモン図鑑 = ハムレスが管理するサイバー空間のデータベース

   ■ このページだけ暗いデータ空間にしている理由

   図鑑は当初 `.page-light`(白地 + ハーフトーン)の上に載せていたが、
   「サイバー空間のデータベース」という見立てには白地が合わず、
   既存デザインに引っ張られた印象になっていた。
   そこで**このページだけ暗色側へ寄せ**、背景を半透明にして
   `.bg-shader`(WebGLの奥行きグリッド・データの雨)を透かしている。
   = 画面の奥に本物のデータ空間が広がって見える。

   ■ 「研究所」ではない

   ハムレスは研究所を持っている設定ではない。
   彼は**みんなから集まったデータについてひとこと言うだけ**の役で、
   施設や組織の呼称(LAB / 研究所 など)は出さないこと。

   ■ .material-* は図鑑ページ専用

   そざい選択UIは図鑑にしか無いので、暗色前提で上書きしてよい。
   一方 `.card-grid` / `.card-cell` / `.card-skeleton` は
   TOPページと共用なので、暗色化は `.dex-cards` に限定している。
   ========================================================== */

.section-dex {
  position: relative;
  padding: 34px 16px 90px;
  color: var(--color-white);
  /* overflow:hidden はここには付けない。
     祖先に overflow!=visible があると position:sticky の基準がそこに
     なってしまい、左サイドバー(.material-picker)の張り付きが効かなくなるため。
     光彩のにじみ出しは下の .dex-space-clip 側でクリップしている */
  /* 半透明にして背景シェーダーを透かす。不透明にすると奥行きが消える */
  background: linear-gradient(
    180deg,
    rgba(4, 14, 40, 0.86) 0%,
    rgba(6, 26, 62, 0.66) 34%,
    rgba(4, 14, 40, 0.9) 100%
  );
}

/* 装飾レイヤー(方眼・光彩)専用のクリップ枠。
   .dex-space-glow がセクション幅の120%までにじみ出す分だけを
   ここで隠す(section 自体には overflow:hidden を付けない。上のコメント参照) */
.dex-space-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* データ空間の床。奥行きは背景シェーダーが持つので、
   ここは等間隔の方眼だけを薄く重ねて「格子の空間」を足している */
.dex-space-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(77, 250, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 250, 255, 0.08) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* 上端の地平線グロー。空間の「奥」を示す */
.dex-space-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  width: min(880px, 120%);
  height: 160px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(0, 169, 255, 0.3), transparent 70%);
}

.dex-inner { position: relative; z-index: 1; }

/* --- 接続ステータスの帯 --- */
.dex-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 880px;
  margin: 0 auto 20px;
  padding: 7px 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-text-cyan-light);
  background: rgba(6, 26, 62, 0.68);
  border: 1px solid rgba(157, 252, 255, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 22px rgba(0, 169, 255, 0.12);
}

.dex-bar-id {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 接続中を示すランプ。1画面に1つだけ(§4.5) */
.dex-led {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-text-cyan);
  box-shadow: 0 0 8px var(--color-text-cyan);
  animation: dex-led-blink 2.6s ease-in-out infinite;
}

@keyframes dex-led-blink {
  0%, 100% { opacity: 1; }
  48%      { opacity: 0.22; }
}

.dex-bar-state {
  flex-shrink: 0;
  padding: 2px 9px;
  letter-spacing: 0.08em;
  color: #04122c;
  background: var(--color-text-cyan);
  border-radius: 999px;
}

/* --- とどいたデータの帯 --- */
.dex-stream {
  max-width: 880px;
  margin: 0 auto 20px;
  padding: 12px 12px 14px;
  background: rgba(6, 26, 62, 0.42);
  border-top: 1px solid rgba(157, 252, 255, 0.22);
  border-bottom: 1px solid rgba(157, 252, 255, 0.22);
}

.dex-stream-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--color-text-cyan-light);
}

/* 暗色の上ではリングを光らせて「データの粒」に見せる */
.section-dex .zukan-intro-cell {
  filter: none;
  border: 1px solid rgba(157, 252, 255, 0.4);
  box-shadow: 0 0 12px rgba(0, 169, 255, 0.3);
}

/* --- DNAデータの読み込み中プレースホルダー ---
   カード枠の中を塩基対のような目盛りが流れる。
   .dex-cards の中だけ差し替える(TOPの .card-skeleton はそのまま) */
.dex-cards .card-skeleton {
  border-radius: 10px;
  border: 1px solid rgba(157, 252, 255, 0.2);
  background-color: rgba(2, 10, 30, 0.55);
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(157, 252, 255, 0.28) 0 2px,
      transparent 2px 9px
    ),
    linear-gradient(110deg,
      rgba(157, 252, 255, 0.02) 30%,
      rgba(157, 252, 255, 0.18) 50%,
      rgba(157, 252, 255, 0.02) 70%);
  background-size: 46% 100%, 220% 100%;
  background-position: 50% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  animation: dna-decode 1.15s linear infinite;
}

@keyframes dna-decode {
  from { background-position: 50% 0, 120% 0; }
  to   { background-position: 50% -11px, -120% 0; }
}

/* --- ハムレスのひとこと --- */
.dex-talk {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto 24px;
}

.dex-talk-face {
  flex-shrink: 0;
  width: clamp(54px, 13vw, 74px);
  /* height:auto がないと HTML の height 属性が優先され、
     aspect-ratio が計算されず元画像の高さのまま伸びる */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 42%, rgba(157, 252, 255, 0.26), rgba(6, 26, 62, 0.7));
  border: 2px solid rgba(157, 252, 255, 0.45);
  box-shadow: 0 0 18px rgba(0, 169, 255, 0.35);
}

.dex-talk-text {
  position: relative;
  margin: 0;
  padding: 11px 14px;
  font-size: var(--fs-sub);
  line-height: 1.75;
  color: var(--color-text-cyan-pale);
  background: rgba(6, 26, 62, 0.66);
  border: 1px solid rgba(157, 252, 255, 0.28);
  border-radius: 3px;
  word-break: auto-phrase;
}

/* 吹き出しの尻尾。博士がしゃべっていることを示す */
.dex-talk-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(6, 26, 62, 0.66);
  border-left: 1px solid rgba(157, 252, 255, 0.28);
  border-bottom: 1px solid rgba(157, 252, 255, 0.28);
}

/* --- そざい未選択のときのプレースホルダ ---
   カードの裏面を半透明にならべて「ここにカードが並ぶ場所」だと示し、
   中央に案内文を重ねる。裏面のならびは .card-grid を流用しているので、
   実際の検索結果とまったく同じ格子になる。
   [hidden] より display:block が強いので、明示的に打ち消す必要がある
   (このサイトで繰り返し起きている不具合) */
.dex-placeholder {
  position: relative;
}

.dex-placeholder[hidden] { display: none; }

/* 裏面のならび。案内文が読めるよう、全体を沈めてから文字を乗せる */
.dex-placeholder-grid {
  opacity: 0.34;
  /* 裏面のロゴが主張しないよう、少しだけコントラストを落とす */
  filter: saturate(0.85);
  pointer-events: none;
}

.dex-placeholder-card {
  display: block;
  width: 100%;
  /* 実カードと同じ比率にして、選択後に格子がズレないようにする
     (裏面素材 613×965 も表面 1276×2008 と同じ 0.635) */
  aspect-ratio: 613 / 965;
  background-image: url("../assets/zukan/card_back.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 1px solid rgba(157, 252, 255, 0.28);
}

/* 案内文。裏面の上に乗るので、下地のパネルを敷いて読めるようにする。
   【位置】縦中央に置かない。裏面のならびは高さ900px前後あるので、
   中央だとページを開いた時点で画面の下に隠れてしまう
   (実測: 1280×900 で文言の上端が y=1024 = 124px はみ出し)。
   1行目のカードに重なる上部に寄せて、スクロールなしで目に入るようにしている */
.dex-placeholder-text {
  position: absolute;
  top: clamp(20px, 4vw, 48px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(92%, 460px);
  padding: clamp(14px, 2.4vw, 20px) clamp(18px, 3vw, 28px);
  font-family: var(--font-display);
  font-weight: 700;
  /* 裏面のならびは高さ900px前後になるので、--fs-sub(14px)だと
     広い面積の中で埋もれる。画面幅に応じて少し大きくする */
  font-size: clamp(0.88rem, 1.7vw, 1.15rem);
  line-height: 1.7;
  text-align: center;
  color: var(--color-text-cyan-pale);
  background: rgba(6, 26, 62, 0.9);
  border: 1px solid rgba(157, 252, 255, 0.4);
  border-radius: 3px;
  box-shadow: 0 0 26px rgba(0, 50, 110, 0.6), inset 0 0 24px rgba(0, 169, 255, 0.12);
  word-break: auto-phrase;
}

/* --- 該当なしのとき出てくるハムレス ---
   上の .dex-talk(常設のひとこと)とは役割が違うので、
   丸い顔ではなく全身で出して「出てきた」感を出している。
   [hidden] より display:flex が強いので、明示的に打ち消す必要がある */
.dex-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 18px);
  max-width: 620px;
  margin: 6px auto 0;
}

.dex-empty[hidden] { display: none; }

.dex-empty-chara {
  flex-shrink: 0;
  width: clamp(96px, 26vw, 150px);
  /* height:auto がないと HTML の height 属性が優先され、aspect-ratio が効かない
     (.dex-talk-face と同じ) */
  height: auto;
  aspect-ratio: 320 / 347;
  object-fit: contain;
  /* 背景は敷かない。全身なので丸で切ると足元が欠ける */
  filter: drop-shadow(0 0 12px rgba(0, 169, 255, 0.4));
}

.dex-empty-text {
  position: relative;
  margin: 0;
  padding: 13px 16px;
  font-size: var(--fs-sub);
  line-height: 1.8;
  color: var(--color-text-cyan-pale);
  background: rgba(6, 26, 62, 0.66);
  border: 1px solid rgba(157, 252, 255, 0.28);
  border-radius: 3px;
  word-break: auto-phrase;
}

/* 吹き出しの尻尾(.dex-talk-text::before と同じ作り) */
.dex-empty-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(6, 26, 62, 0.66);
  border-left: 1px solid rgba(157, 252, 255, 0.28);
  border-bottom: 1px solid rgba(157, 252, 255, 0.28);
}

/* せまい画面では横に並べると吹き出しが潰れるので、上下に積む */
@media (max-width: 560px) {
  .dex-empty { flex-direction: column; gap: 0; }
  .dex-empty-chara { width: 128px; }
  /* 積んだら尻尾は上向きにして、博士から吹き出しが出ているように見せる */
  .dex-empty-text::before {
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* --- 検索コンソール --- */
.dex-panel {
  background: rgba(6, 26, 62, 0.62);
  border: 1px solid rgba(157, 252, 255, 0.3);
  border-radius: 3px;
  box-shadow: inset 0 0 34px rgba(0, 169, 255, 0.1), 0 0 26px rgba(0, 50, 110, 0.4);
  overflow: hidden;
}

.dex-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: linear-gradient(100deg, rgba(0, 169, 255, 0.26), rgba(6, 26, 62, 0.08));
  border-bottom: 1px solid rgba(157, 252, 255, 0.24);
}

.dex-panel-tag {
  flex-shrink: 0;
  padding: 2px 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: #04122c;
  background: var(--color-text-cyan);
  border-radius: 2px;
}

.dex-panel-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sub);
  color: var(--color-white);
}

@media (max-width: 480px) {
  .zukan-intro { gap: 6px; }
  .section-dex { padding: 26px 12px 70px; }
  .dex-bar { font-size: 0.75rem; letter-spacing: 0.08em; gap: 8px; padding: 6px 10px; }
  .dex-bar-state { font-size: 0.75rem; padding: 2px 7px; }
  /* 文章が数行に折り返るので、博士は中央ではなく上に揃える
     (中央だと文章の真ん中に浮いて見える) */
  .dex-talk { align-items: flex-start; gap: 10px; }
  .dex-talk-text::before { top: 26px; }
  .dex-panel-title { font-size: var(--fs-caption); }
  .dex-stream { padding: 10px 8px 12px; }
}

/* ==========================================================
   そざいプレートの横スクロールスライダー(マゼモンとは?)

   同じ並びを2セット置いて -50% 動かすことで継ぎ目なくループさせている。
   セット数を変えたら translateX の値も合わせて直すこと。
   ========================================================== */

.material-showcase {
  max-width: 900px;
  margin: 0 auto;
  padding: 14px 0;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  /* 流れてくるプレートを左右の端でふわっと消す */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.material-marquee {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* はみ出した分は隠す。ここが overflow: visible だと横スクロールが発生する */
  overflow: hidden;
}

.marquee-row { overflow: hidden; }

.marquee-track {
  display: flex;
  width: max-content;
  animation-name: marquee-shift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee-left  .marquee-track { animation-direction: normal; }
.marquee-right .marquee-track { animation-direction: reverse; }

@keyframes marquee-shift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-set {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0 5px;
  list-style: none;
}

.marquee-item {
  flex: 0 0 auto;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 3px 5px;
  background: var(--color-bg-base);
  border: 2px solid transparent;
  border-radius: 10px;
}

.marquee-item img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.marquee-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-text-primary);
  text-align: center;
  overflow-wrap: anywhere;
}

/* 基本情報テーブルへの補足(表内には入れない軽い注記) */
.about-info-note {
  margin-top: 10px;
  font-size: var(--fs-caption);
  color: var(--color-text-gray-dark);
  text-align: center;
}
.about-info-note a { color: var(--color-text-blue); }

.about-source {
  margin-top: 34px;
  font-size: 0.75rem;
  color: var(--color-text-gray-dark);
  text-align: center;
}
.about-source a { color: var(--color-text-blue); }

/* ==========================================================
   TOP ヒーロー
   ========================================================== */

.hero {
  position: relative;
  /* ヘッダー(PCで約234px)と合わせて画面を埋め切らない高さにする。
     次のセクションが少し覗くことで「下に続く」ことが伝わる */
  min-height: min(56vh, 520px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 左下に焼き込みの「MAZEMON GENERATOR」ロゴがあるため、
     左端を削らない位置に寄せる(中央だと文字が半端に切れる)。
     画面が狭いほど横方向に削られる量が増えるため、
     480px以下ではさらに左へ寄せてロゴを守る(下の@media参照) */
  object-position: 20% 50%;
}

@media (max-width: 480px) {
  .hero-img { object-position: 13% 50%; }
}

/* 下側を暗く落としてコピーの可読性を確保する(§8「低コントラストの文字を置かない」) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 26, 64, 0.15) 0%,
    rgba(18, 26, 64, 0.1) 42%,
    rgba(18, 26, 64, 0.82) 100%
  );
}

.hero-body {
  position: relative;
  width: 100%;
  /* サブコピーとCTAボタンを削除したため(2026-08-25)、コピーだけが
     .hero の下端(flex-end)に接近して詰まって見えていた。
     下パディングを広げて余白を持たせている */
  padding: 0 20px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-copy {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.6vw, 1.9rem);
  line-height: 1.55;
  color: var(--color-white);
  text-shadow: 0 0 18px var(--color-shadow-blue), 2px 2px 0 rgba(0, 0, 0, 0.55);
}

.hero-sub {
  max-width: 22em;
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--color-text-cyan-pale);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  /* 「集ま／る。」のような不自然な折り返しを避ける */
  text-wrap: balance;
  word-break: auto-phrase;
}

.hero-copy { text-wrap: balance; }

.hero-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  padding: 9px 22px 7px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-caption);
  color: var(--color-header);
  text-decoration: none;
  background: linear-gradient(180deg, var(--color-text-cyan-light), var(--color-bg-cyan));
  border-radius: 999px;
  box-shadow: 0 0 14px var(--color-shadow-cyan), 0 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.hero-cue:hover { transform: translateY(-3px); box-shadow: 0 0 24px var(--color-shadow-cyan-glow), 0 7px 0 rgba(0, 0, 0, 0.35); }
.hero-cue:focus-visible { outline: 3px solid var(--color-text-cyan); outline-offset: 3px; }
.hero-cue-arrow { font-size: 0.62rem; line-height: 1; }

/* ==========================================================
   実画面の切り抜き(静止画 / 無音ループ動画)

   GIFは同尺で MP4 の約5倍(実測 6.3MB vs 1.2MB)になるため使っていない。
   動きが本質の箇所は muted + loop の MP4、じっくり見せる箇所は静止画。

   【重要】これらは「実際の画面のキャプチャ」で、HPやわざ名などの
   細かいUI文字が写っている。カードグリッド(.about-card)の中に入れると
   幅250px前後になって文字が読めなくなるうえ、カードの高さも揃わなくなる。
   そのため必ず .shot-solo か .media-row で「単独の横長ブロック」として置く。
   ========================================================== */

.shot {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--color-bg-blue-light);
  background: #000;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}

.shot img,
.shot video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.shot figcaption {
  padding: 9px 12px 11px;
  background: var(--color-white);
  font-size: var(--fs-caption);
  line-height: 1.65;
  color: var(--color-text-gray-dark);
  text-align: center;
}

/* 白地に置く紹介ムービー(コロシアムの「とは？」)。
   枠・角丸・キャプションは .shot のまま、中身を 16:9 の iframe にしている。
   暗色の上に置くときは .movie-frame(マシンパネル様式)を使う */
.shot-movie {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.shot-movie iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 1枚を単独で見せる。読める幅を確保しつつ、間延びしないよう上限を置く */
.shot-solo {
  max-width: 720px;
  margin: 0 auto;
}

/* 直前の要素(見出しなしのグリッドなど)と詰まって見える箇所だけに使う */
.shot-gap-top {
  margin-top: 28px;
}

/* 直後の要素と詰まって見える箇所に使う。
   .shot は margin:0 で、.about-grid 側も margin-top を持たないため、
   図のすぐ下にグリッドが来ると隙間が 0px になる(実測) */
.shot-gap-bottom {
  margin-bottom: 28px;
}

/* 複数枚を縦に積む。
   横2枚並びも試したが、1枚あたり432pxになり元画像(1280px)の3分の1まで
   縮むため、WINNER画面のパーク名などが読めなくなった。
   キャプチャは情報が写っているので、幅を優先して縦積みにしている。 */
/* 暗色セクションに置く場合 */
.shot.on-dark { border-color: var(--color-text-cyan-light); box-shadow: 0 0 16px var(--color-bg-cyan-light); }
.shot.on-dark figcaption {
  background: rgba(0, 90, 128, 0.35);
  color: var(--color-text-cyan-pale);
}

/* ==========================================================
   紹介ムービー埋め込み

   コロシアム中継枠(.coliseum-frame)と同じマシンパネル様式だが、
   あちらは LIVE 用にグロー animation を持つので別クラスにしている。
   ========================================================== */

.movie-frame {
  position: relative;
  max-width: 860px;
  margin: 28px auto 0;
  padding: 10px;
  background: rgba(0, 90, 128, 0.3);
  border: 1px solid var(--color-text-cyan-light);
  box-shadow:
    0 0 18px var(--color-bg-cyan-light),
    inset 0 0 18px rgba(157, 252, 255, 0.1);
}

.movie-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.movie-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie-caption {
  margin-top: 14px;
  text-align: center;
  font-size: var(--fs-caption);
  line-height: 1.9;
  color: var(--color-text-cyan-pale);
}

.movie-credit { color: var(--color-text-gray); }

/* ==========================================================
   公式YouTubeチャンネルへのバナー(TOP下部)
   ========================================================== */

/* バナー画像は 1600×534(3:1)。中身の余白は画像側に持たせているので、
   ここでは枠・グロー・ホバーだけを担当する。
   img に width/height 属性を入れてあるので、読み込み前も場所を取る
   (§4.5「画像には必ず場所取りを」) */
/* 本文と同じ880px幅だと主張が強すぎたので、720pxに落として
   枠とグローも一段弱めている。画像側の補足文字は縮むぶんを見込んで
   少し大きく描いてある(tools/youtube-banner/render_pc.py) */
.yt-banner {
  display: block;
  max-width: 720px;
  margin: 36px auto 0;
  border: 1px solid rgba(157, 252, 255, 0.28);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(0, 169, 255, 0.2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.yt-banner picture { display: block; } /* インライン扱いのままだと下に余白が出る */

.yt-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* <picture> でせまい画面だけ縦長画像に差し替えるので、
     img の width/height 属性(1600×534)だけでは場所取りがずれる。
     読み込み前のガタつきを防ぐため、比率もブレークポイントで切り替える */
  aspect-ratio: 1600 / 534;
}

@media (max-width: 620px) {
  .yt-banner img { aspect-ratio: 1080 / 830; }
}

.yt-banner:hover,
.yt-banner:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(0, 169, 255, 0.45), 0 8px 18px rgba(0, 0, 0, 0.36);
}

.yt-banner:focus-visible {
  outline: 3px solid var(--color-text-cyan);
  outline-offset: 3px;
}

/* ==========================================================
   公式サイトへのロゴリンク(フッター直前)

   文字は出さず、ロゴ画像だけを主張しない大きさで並べる。
   サイト名は index.html 側の alt に入れてある。
   ========================================================== */

.official-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.5vw, 18px);
  margin: 40px auto 0;
}

/* ロゴを載せる白地のプレート。
   受領した素材はどちらも背景が白の不透明画像なので、暗色パネルに直接置くと
   白い矩形として浮く。白地の上に置いて意図した見た目にそろえている。
   2つのロゴは比率が違う(2.909 / 3.200)ので、高さを固定して
   object-fit: contain で中央に収める */
.official-card {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 以前は clamp(34px, 6vw, 44px) でSPが34px。指で押す前提で44pxに揃えた */
  height: 44px;
  padding: 6px 14px;
  background: var(--color-white);
  border-radius: 5px;
  /* 白いプレートは暗色の上だと強く出るので、少し落として馴染ませる */
  opacity: 0.82;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.official-card img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.official-card:hover,
.official-card:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.official-card:focus-visible {
  outline: 3px solid var(--color-text-cyan);
  outline-offset: 3px;
}

/* ==========================================================
   シェア(暗色セクション用)
   ========================================================== */

.share-block {
  margin-top: 42px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.share-lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sub);
  letter-spacing: 0.06em;
  color: var(--color-text-cyan-pale);
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-caption);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.share-btn-icon { font-size: 0.9rem; line-height: 1; }

.share-x    { background: #111826; }
/* LINEの緑(#06c755)は白文字と 2.26:1 で読みにくいので、色相はそのまま暗くした(4.6:1) */
.share-line { background: #038639; }

.share-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
.share-btn:focus-visible { outline: 3px solid var(--color-text-cyan); outline-offset: 3px; }

/* ==========================================================
   TOP: 各ページへの導線カード
   ========================================================== */

.portal-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

/* 画像バナー型の導線。
   背景に各ページの絵を敷き、上に暗いグラデを重ねて文字を読ませる。

   ■ 絵は background-image ではなく <img class="portal-nav-bg"> で敷く
   custom property に url('assets/...') を入れて CSS 側で流し込む書き方は
   **相対パスが CSSファイルの場所を基準に解決されて404になる**(実測)。
   インラインstyleに書いても、消費する宣言がCSS側にあるので同じ結果。
   img なら src がドキュメント基準で解決され、lazy も場所取りも効く。

   ■ 文字は下寄せ
   align-content: end で2行を下端に寄せ、**上半分に絵を見せる**。
   これで「画像バナーの上に見出しが乗っている」形になる。

   ■ もとは英字タグ(ABOUT / DEX / SPOT)を左に置いた文字だけのカードだった。
   タグは撤去し、代わりに絵で内容を伝える形にした */
.portal-nav-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title arrow"
    "desc  arrow";
  align-items: center;
  align-content: end;
  column-gap: 14px;
  row-gap: 6px;
  min-height: 152px;
  padding: 16px 16px 15px;
  text-decoration: none;
  /* 絵が読み込まれる前・失敗したときの下地 */
  background: rgba(0, 90, 128, 0.3);
  border: 1px solid var(--color-text-cyan-light);
  border-radius: 12px;
  box-shadow: inset 0 0 20px rgba(157, 252, 255, 0.1);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.portal-nav-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-text-cyan);
  box-shadow: 0 0 22px var(--color-bg-cyan-light), inset 0 0 20px rgba(157, 252, 255, 0.18);
}

.portal-nav-card:focus-visible {
  outline: 3px solid var(--color-text-cyan);
  outline-offset: 3px;
}

/* 背景に敷く絵。grid のフローから外すため絶対配置にしている */
.portal-nav-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  /* 【重要】height 属性を付けているので auto で上書きしないと縦に伸びる
     (§10「height: auto を忘れないこと」と同じ注意点)。
     ここは親いっぱいに敷きたいので 100% を指定する */
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* 絵の上に重ねる暗いグラデ。**これが無いと文字が読めない**。
   下ほど濃くして、文字が乗る下半分をしっかり暗くする */
.portal-nav-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(2, 12, 34, 0.3) 0%,
    rgba(2, 12, 34, 0.62) 46%,
    rgba(2, 12, 34, 0.92) 100%
  );
}

/* 文字と矢印は絵とグラデより前面へ */
.portal-nav-title,
.portal-nav-desc,
.portal-nav-arrow {
  position: relative;
  z-index: 2;
}

/* 2026-09-09: 英字タグ(.portal-nav-icon = ABOUT / DEX / SPOT)は
   撤去した。代わりに背景の絵が役割を伝えている */

.portal-nav-title {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: 800;
  /* 絵の上に載るので、文字だけのカードだったときより一段大きくする */
  font-size: var(--fs-h3);
  color: var(--color-white);
  /* 絵の明るい部分に重なっても読めるように */
  text-shadow: 0 2px 6px rgba(2, 12, 34, 0.9), 0 0 14px rgba(2, 12, 34, 0.7);
}

.portal-nav-desc {
  grid-area: desc;
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--color-text-cyan-pale);
  text-shadow: 0 1px 4px rgba(2, 12, 34, 0.95);
}

/* 「押せる」ことを伝える矢印。.attn でゆるく跳ねる */
.portal-nav-arrow {
  grid-area: arrow;
  font-size: var(--fs-caption);
  color: var(--color-text-cyan);
}

/* .attn は translateY を使うので、跳ねる向きを縦から横向きに差し替える */
@keyframes attn-slide-x {
  0%, 62%, 100% { transform: translateX(0); }
  70%           { transform: translateX(5px); }
  80%           { transform: translateX(0); }
  87%           { transform: translateX(2px); }
  94%           { transform: translateX(0); }
}

.portal-nav-arrow.attn {
  animation: attn-slide-x 3s var(--ease-out-soft) 0.6s infinite;
}

/* 親カードにホバーしたら矢印の跳ねを止めて、ホバー状態を主役にする */
.portal-nav-card:hover .portal-nav-arrow.attn { animation-play-state: paused; }

/* ==========================================================
   つぎに見る (.next-nav)
   ==========================================================
   各ページの末尾に置く導線(2026-09-10 追加)。
   ページ内リンクが0で行き止まりになっていたので、読み終えた人の次の行動を用意する。
   カードはTOPの導線(.portal-nav-card)をそのまま使い、見出しだけ小さなラベルにする。
   白いページの直後に来るので、この節は暗い帯(サイトの地色)で区切る */
.next-nav {
  padding: 34px 16px 48px;
}

.next-nav-label {
  max-width: 960px;
  margin: 0 auto 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sub);
  letter-spacing: 0.12em;
  color: var(--color-text-cyan);
}

.next-nav-label::before {
  content: "▶";
  margin-right: 8px;
  font-size: 0.75em;
}

/* 2枚なので 3枚用の最小幅より少し広くしてよい */
.next-nav-cards { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* ==========================================================
   マゼモンコロシアム ページ
   ========================================================== */

/* ==========================================================
   コロシアム: 縦に並ぶブロックの左右端をそろえる
   ==========================================================
   もとは幅が3種類混ざっていて、境目がガタガタしていた。
   実測(1280px幅・.page-light-inner は880px):

     .about-h3 / .about-grid        左0   〜 右880  (880px)
     .shot-solo / 本文 / リード      左80  〜 右800  (720px)
     1枚だけの .about-card           560px(:only-child の抑制が効く)

   = 左端が 0 と 80 で交互に出ていた。
   **本文の読める幅(720px)を基準に、見出しとカードの並びもそこへ寄せる。**

   `.gather` だけは意図的な全幅ブロックなので対象外。

   【注意】about ページにも同じ構造があるが、あちらは指示が無いので
   コロシアムだけに限定している(`.page[data-page="coliseum"]`)。
   ========================================================== */
.page[data-page="coliseum"] .page-light-inner > .about-h3,
.page[data-page="coliseum"] .page-light-inner > .about-grid {
  max-width: 720px;
  margin-inline: auto;
}

/* 720px で3枚を1行に収めるため、1枚の最小幅を下げる
   (既定の 250px だと 720px では2列に折れてしまう。実測 228px/枚) */
.page[data-page="coliseum"] .about-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* このページでは1枚だけのグリッドも幅いっぱいに使う。
   560px に抑えると、上下のブロック(720px)と左右端がずれてしまう */
.page[data-page="coliseum"] .about-grid > .about-card:only-child {
  max-width: none;
}

/* 中継ウィンドウの下に置く注記(暗色セクション上) */
.coliseum-note {
  margin-top: 14px;
  font-size: var(--fs-caption);
  color: var(--color-text-cyan-pale);
  text-align: center;
}

.coliseum-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--color-text-primary);
}

.coliseum-body strong { color: var(--color-text-blue); }

/* ==========================================================
   COMING SOON パネル
   ========================================================== */

.coming-soon-panel {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  text-align: center;
  background-color: var(--color-bg-dark-green-alt);
  /* マシンパネル風ノッチ (§5.1) */
  clip-path: polygon(0% 0%, 15.6% 0%, 25.3% 4.3%, 74.5% 4.3%, 84.3% 0%, 100% 0%, 100% 95.7%, 84.3% 95.7%, 74.5% 100%, 25.3% 100%, 15.6% 95.7%, 0% 95.7%);
  border: 1px solid rgba(157, 252, 255, 0.3);
}

.coming-soon-text {
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  letter-spacing: 0.08em;
  color: var(--color-text-cyan-light);
  text-shadow: 0 0 24px var(--color-shadow-cyan-glow);
  animation: cs-flicker 2.8s ease-in-out infinite;
}

@keyframes cs-flicker {
  0%, 100% { opacity: 1; }
  46%      { opacity: 1; }
  50%      { opacity: 0.55; }
  54%      { opacity: 1; }
  72%      { opacity: 0.85; }
}

.coming-soon-sub {
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  color: var(--color-text-cyan-pale);
}

.cta-button {
  display: inline-block;
  margin-top: 28px;
  padding: 13px 30px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--color-header);
  text-decoration: none;
  background: linear-gradient(180deg, var(--color-text-cyan-light), var(--color-bg-cyan));
  border-radius: 999px;
  box-shadow: 0 0 14px var(--color-shadow-cyan), 0 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.18s, box-shadow 0.18s;
}

.cta-button:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 26px var(--color-shadow-cyan-glow), 0 7px 0 rgba(0, 0, 0, 0.35); }
.cta-button:active { transform: translateY(1px); box-shadow: 0 0 10px var(--color-shadow-cyan), 0 1px 0 rgba(0, 0, 0, 0.35); }

/* ==========================================================
   マゼモン図鑑(素材からさがす)
   ========================================================== */

.material-picker {
  max-width: 880px;
  margin: 0 auto 34px;
}

/* 素材チップ: 2行 × 横スクロール(スワイプで選ぶ)
   .dex-panel の中に収まるので、枠線は持たず「はめ込み」の見た目にしている */
.material-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: 92px;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 12px 14px;
  padding: 12px;
  background: rgba(2, 10, 30, 0.5);
  border: 1px solid rgba(157, 252, 255, 0.16);
  border-radius: 3px;
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.4);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--color-text-cyan) rgba(2, 10, 30, 0.7);
}

/* display:grid が UA の [hidden] より強いため、明示的に打ち消す */
.material-grid[hidden] { display: none; }

/* スクロールバーを子どもにも分かりやすく。
   height は横スクロール(モバイル)用、width は縦スクロール(PCサイドバー)用 */
.material-grid::-webkit-scrollbar { height: 10px; width: 10px; }
.material-grid::-webkit-scrollbar-track {
  background: rgba(2, 10, 30, 0.7);
  border-radius: 999px;
}
.material-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-text-cyan), var(--color-shadow-blue));
  border-radius: 999px;
}

.material-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  height: 100%;
  padding: 8px 4px 6px;
  background: rgba(157, 252, 255, 0.07);
  border: 1px solid rgba(157, 252, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.18s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.material-chip img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
}

.material-chip-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-text-cyan-pale);
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.material-chip:hover {
  transform: translateY(-3px);
  border-color: var(--color-text-cyan);
  box-shadow: 0 0 16px rgba(0, 169, 255, 0.45);
}

.material-chip:focus-visible {
  outline: 3px solid var(--color-text-cyan);
  outline-offset: 2px;
}

.material-chip.is-selected {
  background: rgba(0, 169, 255, 0.26);
  border-color: var(--color-text-cyan);
  box-shadow: 0 0 18px rgba(0, 169, 255, 0.55), inset 0 0 14px rgba(157, 252, 255, 0.2);
}

.material-chip.is-selected .material-chip-name { color: var(--color-white); }

/* 選択中バッジ */
.material-chip-check {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-text-gallery-title);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.18s;
}

.material-chip.is-selected .material-chip-check { transform: scale(1); }

/* 上限に達したときの未選択チップ */
.material-chip.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.material-chip.is-disabled:hover {
  transform: none;
  border-color: rgba(157, 252, 255, 0.18);
  box-shadow: none;
}

/* ==========================================================
   えらんだそざいトレイ(複数選択)
   ========================================================== */

/* .dex-panel の中の「入力欄」にあたる部分。
   外枠は親パネルが持つので、ここは下罫線で区切るだけにしている */
.material-tray {
  margin: 0;
  padding: 12px 14px 14px;
  border-bottom: 1px dashed rgba(157, 252, 255, 0.22);
}

.material-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.material-tray-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--color-text-cyan-light);
}

.material-tray-count {
  padding: 2px 9px;
  font-size: 0.76rem;
  color: #04122c;
  background: var(--color-text-cyan);
  border-radius: 999px;
}

.material-clear {
  flex-shrink: 0;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: #ff9db1;
  background: rgba(241, 40, 83, 0.12);
  border: 1px solid rgba(255, 157, 177, 0.6);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.material-clear:hover {
  color: var(--color-white);
  background: var(--color-secondary-ink);
}

.material-clear:focus-visible {
  outline: 3px solid var(--color-text-cyan);
  outline-offset: 2px;
}

.material-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.material-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 82px;
  padding: 8px 4px 6px;
  border-radius: 10px;
}

/* 空きスロット: あと何個えらべるかを一目で分かるようにする */
.material-slot.is-empty {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: rgba(157, 252, 255, 0.4);
  background: rgba(2, 10, 30, 0.4);
  border: 1px dashed rgba(157, 252, 255, 0.3);
}

.material-slot.is-filled {
  position: relative;
  background: rgba(0, 169, 255, 0.22);
  border: 1px solid var(--color-text-cyan);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.2s;
  box-shadow: 0 0 14px rgba(0, 169, 255, 0.4);
}

.material-slot.is-filled:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(0, 169, 255, 0.6);
}

.material-slot.is-filled:focus-visible {
  outline: 3px solid var(--color-text-cyan);
  outline-offset: 2px;
}

.material-slot img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.material-slot-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--color-white);
  text-align: center;
  overflow-wrap: anywhere;
}

.material-slot-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-secondary-ink);
  border: 2px solid #0a1f45;
  border-radius: 50%;
}

/* 素材マスタ(API)の読み込み中プレースホルダー */
.material-chip-skeleton {
  height: 100%;
  min-height: 84px;
  border-radius: 4px;
  border: 1px solid rgba(157, 252, 255, 0.14);
  background: linear-gradient(110deg,
    rgba(157, 252, 255, 0.05) 30%,
    rgba(157, 252, 255, 0.22) 50%,
    rgba(157, 252, 255, 0.05) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}

/* 素材マスタの取得に失敗したとき */
.material-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 12px;
  padding: 26px 16px;
  background: rgba(2, 10, 30, 0.5);
  border: 1px solid rgba(255, 157, 177, 0.4);
  border-radius: 3px;
}

.material-error-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: #ffb3c4;
  text-align: center;
}

/* もっとみる */
.dict-more {
  text-align: center;
  margin-top: 30px;
}

.dict-more .cta-button {
  margin-top: 0;
  border: none;
  cursor: pointer;
}

/* ==========================================================
   図鑑ページ: PC幅では2カラムにする
   (素材選択を左のサイドバー、結果一式を右へ。§10参照)

   このブロックは他の .material-picker / .material-grid の定義より
   後ろに置くこと。CSS は同じ詳細度なら後方の記述が勝つため、
   ここより前に置くと(min-width の条件を満たしていても)
   後方の無条件ルール(max-width:880pxなど)に上書きされて効かない。

   【重要】セレクタは必ず `.dex-inner` で図鑑ページに限定すること。
   `.zukan-inner` は**遊べる店舗ページでも使っている共通クラス**なので、
   そちらに書くと店舗ページまで2カラムになり、見出しが300pxの左列に
   押し込まれて表示が崩れる(2026-08-27 に発生)。

   .zukan-inner.dex-inner の子は上から
     1: section-title-wrap  2: dex-stream  3: dex-talk  (見出しブロック、全幅)
     4: material-picker     (左列)
     5: dex-results         (右列)
   という並びなので、4と5だけ列を指定すれば、CSS Grid の自動配置が
   同じ行に並べてくれる(4と5のどちらにも grid-row を指定していないため)。
   ========================================================== */
@media (min-width: 1000px) {
  .zukan-inner.dex-inner {
    max-width: 1220px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0 28px;
    align-items: start;
  }

  /* 見出しブロックは全幅。
     .section-lead を入れ忘れると、リード文が左の300px列に入って
     「PCだと左寄りに見える」状態になる(2026-09-09 に発生) */
  .section-dex .section-title-wrap,
  .section-dex .section-lead,
  .section-dex .dex-stream,
  .section-dex .dex-talk {
    grid-column: 1 / -1;
  }

  .dex-inner .material-picker {
    grid-column: 1;
    /* 横スクロールのチップ帯だった見た目を、縦に長いサイドバーに変える。
       検索見出し(dex-panel-head)とトレイ(material-tray)は上部に固定し、
       素材チップの一覧(material-grid)だけがこの中で縦スクロールする */
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    /* .tab-nav(sticky, 実測46px)の下に少し隙間を空けて張り付ける */
    top: 60px;
    max-height: calc(100vh - 60px - 24px);
  }

  .dex-inner .dex-results {
    grid-column: 2;
  }

  /* material-grid を「2行×横スクロール」から「3列×縦スクロール」に切り替える。
     flex:1 + min-height:0 で .material-picker の残り高さいっぱいまで伸ばし、
     そこからさらに増える分だけこの要素の中でスクロールさせる
     (min-height:0 がないと flex 子は内容ぶんまで伸びてしまい、縮まらない) */
  .dex-inner .material-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
  }
}

/* ==========================================================
   遊べる店舗
   ========================================================== */

/* ==========================================================
   エリアから探す(遊べる店舗)
   ========================================================== */

.store-search {
  margin: 0 0 26px;
  padding: 16px 18px 14px;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}

/* ==========================================================
   店舗: 日本地図から選ぶ (.store-map)
   ==========================================================
   コロシアムの集結図と同じ地図・同じ座標(STORE_LIST の mapX/mapY)。
   白いパネルの中に置くので、地図は**暗い板**に載せてサイトの地色を出す
   (地図の絵はもともと暗い背景向けに作られている) */
.store-map {
  position: relative;
  aspect-ratio: 1000 / 733;
  /* PCでパネル幅いっぱい(920px)にすると地図がページの主役になりすぎた。
     「エリアを選ぶ道具」の大きさに留める。SPでは幅いっぱいでよい */
  max-width: 640px;
  margin: 0 auto 16px;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(2, 161, 243, 0.28), transparent 70%),
    linear-gradient(160deg, #0b2a5e, #071a3d);
  border: 1px solid rgba(157, 252, 255, 0.28);
}

.store-map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
  filter: drop-shadow(0 0 14px rgba(77, 250, 255, 0.4));
}

/* ピン。見た目は12pxの光点、当たり判定は28px(子どもの指でも押せる大きさ) */
.store-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity 0.25s;
}

.store-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--color-text-cyan) 45%, rgba(2, 161, 243, 0) 75%);
}

/* 広がる波。集結図(.gather-pin)と同じ動き */
.store-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--color-text-cyan);
  animation: gather-ping 2.6s ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.store-pin:hover::before,
.store-pin:focus-visible::before {
  background: radial-gradient(circle, #fff 0%, var(--color-yellow, #fcff27) 50%, transparent 75%);
}

.store-pin:focus-visible { outline: 2px solid var(--color-text-cyan); outline-offset: 2px; border-radius: 50%; }

/* しぼりこみで選ばれていないエリアのピンは沈める */
.store-pin.is-dim { opacity: 0.3; }
.store-pin.is-dim::after { animation: none; }


/* ピンから飛んできたカードを一瞬光らせる */
.store-card.is-focus {
  outline: 3px solid var(--color-text-gallery-title);
  outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(2, 161, 243, 0.18);
  transition: box-shadow 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .store-pin::after { animation: none; }
}

.store-search-label {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-primary);
}

/* 折り返しにしている(横スクロールにしない)。
   ボタンは7つしかなく、スマホ幅でも2行に収まるので、
   横スクロールにすると隠れたエリアに気づけないだけ損になる */
.store-search-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-area {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-text-blue);
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 999px;
  /* 指で押す前提の高さ。以前は実測43pxで、基準の44pxに1px足りなかった */
  min-height: 44px;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}

.store-area:hover {
  transform: translateY(-2px);
  border-color: var(--color-text-gallery-title);
  box-shadow: 0 3px 0 rgba(4, 59, 131, 0.18);
}

/* 選択中。region-title と同じグラデーションで「いまここ」を示す */
.store-area[aria-pressed="true"] {
  color: var(--color-white);
  background: linear-gradient(90deg, var(--color-primary), var(--color-text-gallery-title));
  border-color: var(--color-primary);
  box-shadow: 0 3px 0 rgba(4, 59, 131, 0.4);
}

.store-area:focus-visible {
  outline: 3px solid var(--color-text-gallery-title);
  outline-offset: 2px;
}

.store-search-count {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-text-blue);
}

/* しぼりこみの単位。display を持たせると hidden 属性が効かなくなるので、
   ここでは display を指定せず、hidden 時だけ明示的に消す
   (このサイトで何度か起きている不具合) */
.store-region[hidden] { display: none; }

/* エリア間のアキ。
   「表示されているエリアの、2つめ以降」だけに付ける。
   hidden を無視して `+` で付けると、しぼりこみで1エリアだけ残した時に
   先頭に不要な余白が出てしまう */
.store-region:not([hidden]) ~ .store-region:not([hidden]) { margin-top: 34px; }

.region-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-white);
  background: linear-gradient(90deg, var(--color-primary), var(--color-text-gallery-title));
  padding: 9px 18px;
  /* 上のアキは .store-region 側で持つ(しぼりこみで先頭が変わるため) */
  margin: 0 0 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.store-card {
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.store-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-text-cyan);
  box-shadow: 0 8px 0 rgba(4, 59, 131, 0.12), 0 0 22px var(--color-bg-cyan-light);
}

.store-card-img { position: relative; }
.store-card-img img { width: 100%; aspect-ratio: 570 / 346; object-fit: cover; }

.store-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--color-white);
  background: var(--color-secondary-ink);
  padding: 4px 10px;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  box-shadow: 0 0 10px rgba(241, 40, 83, 0.6);
}

/* 近日オープンなど、常設以外のステータス */
.store-badge.soon {
  color: var(--color-primary);
  background: #ffd900;
  box-shadow: 0 0 10px rgba(255, 217, 0, 0.6);
}

.store-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.store-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-primary);
  line-height: 1.5;
}

.store-info { font-size: 0.76rem; line-height: 1.7; color: #444; }
.store-info dt { float: left; clear: left; width: 4.5em; font-weight: 700; color: var(--color-text-blue); }
.store-info dd { margin-left: 5em; }

.store-actions { margin-top: auto; display: flex; gap: 8px; padding-top: 8px; }

.store-link {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  /* ボタンなので本文より小さくしない(以前は0.76rem=12px)。押せる高さも44px以上に */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 6px;
  border-radius: 8px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.store-link:hover { transform: translateY(-2px); }

.store-link.map {
  color: var(--color-white);
  background: linear-gradient(180deg, var(--color-text-gallery-title), var(--color-text-blue));
  box-shadow: 0 3px 0 rgba(4, 59, 131, 0.4);
}

/* ==========================================================
   フッター
   ========================================================== */

.site-footer {
  text-align: center;
  padding: 36px 16px 44px;
  background: linear-gradient(180deg, rgba(4, 23, 53, 0), rgba(4, 23, 53, 0.9));
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-text-gallery-title);
  -webkit-text-stroke: 0.6px #ffd900;
  text-shadow: 2px 2px 0 #000;
}
.footer-logo span { color: #ffd900; -webkit-text-stroke: 0; }

.footer-copy {
  margin-top: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--color-text-cyan-pale);
}

/* ==========================================================
   外部サイトへの案内バナー (.link-banner)
   ==========================================================
   いまは「マゼモンとは?」のアイテム変化の節に1つだけ置いている
   (シャリング / シャリングステーションの説明へ)。

   ■ 文字を絵に重ねていない理由
   TOPの導線カード(.portal-nav-card)は絵の上に文字を載せているが、
   こちらの写真は**主役(リストバンド)が中央にある**ので、
   上に文字を載せると被写体と食い合う。絵と文字を左右に分けている。

   ■ 幅
   このページの図版は880px(.page-light-inner いっぱい)が多数派なので、
   バナーもそこに合わせる(§10.13「そのページの多数派の幅にそろえる」)。
   ========================================================== */
.link-banner {
  display: grid;
  /* 絵は固定幅、文字が残りを使う。狭い画面では1列に落とす */
  grid-template-columns: minmax(0, 1fr) auto;
  /* 狭い画面は「写真 / 文字+矢印」の2段。矢印を単独の行にすると
     それだけで40pxほど背が伸びる */
  grid-template-areas:
    "img  img"
    "body arrow";
  align-items: center;
  gap: 0;
  /* 2026-09-09: 一段小さくした(PCで 227px → 128px)。
     **min-height では縮まない**。写真の元比率(4:3)が行の高さを決めてしまうので、
     PCでは grid-template-rows で行の高さを固定している(下のメディアクエリ)。
     被写体(リストバンド)は中央にあるので object-fit: cover で切って問題ない */
  margin: 24px auto 0;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(4, 34, 74, 0.92), rgba(6, 26, 62, 0.92));
  border: 2px solid var(--color-text-cyan-light);
  border-radius: 14px;
  box-shadow: inset 0 0 22px rgba(157, 252, 255, 0.12);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.link-banner:hover {
  transform: translateY(-4px);
  border-color: var(--color-text-cyan);
  box-shadow: 0 0 22px var(--color-bg-cyan-light), inset 0 0 22px rgba(157, 252, 255, 0.2);
}

.link-banner:focus-visible {
  outline: 3px solid var(--color-text-cyan);
  outline-offset: 3px;
}

.link-banner-img {
  grid-area: img;
  display: block;
  width: 100%;
  /* 【重要】height 属性を付けているので auto で上書きする
     (付けないと 540px のまま縦に伸びる。このサイトで繰り返し起きた不具合) */
  height: 100%;
  /* 狭い画面は写真が上。4:3 だと縦に長すぎるので 2:1 に切る */
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.link-banner-body {
  grid-area: body;
  display: grid;
  gap: 6px;
  padding: 14px 18px;
}

.link-banner-title {
  font-family: var(--font-display);
  font-weight: 800;
  /* --fs-h3(最大28.8px)だと枠の中で3行に折れて間延びした。
     見出しほど強くする必要はないので、本文とh3の間の大きさにしている */
  font-size: clamp(1.02rem, 3vw, 1.24rem);
  line-height: 1.5;
  color: var(--color-white);
  line-break: strict;
  word-break: auto-phrase;
}

.link-banner-note {
  font-size: var(--fs-caption);
  color: var(--color-text-cyan-pale);
  opacity: 0.85;
}

.link-banner-arrow {
  grid-area: arrow;
  justify-self: end;
  align-self: center;
  padding: 0 18px 0 6px;
  font-size: var(--fs-sub);
  color: var(--color-text-cyan);
}

/* 560px以上は「絵 | 文字 | 矢印」の横並び。
   絵は 34% までにしておく(それ以上だと文字が2段に折れて締まらない) */
@media (min-width: 560px) {
  .link-banner {
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr) auto;
    grid-template-areas: "img body arrow";
    /* 行の高さを決め打ちにする。写真の比率に任せると 224px になる */
    grid-template-rows: 128px;
  }
  .link-banner-img { aspect-ratio: auto; height: 128px; }
  .link-banner-body { padding: 16px 4px 16px 22px; }
  .link-banner-arrow { padding: 0 22px 0 10px; }
}

/* 矢印は横向きに跳ねさせる(.portal-nav-arrow と同じ) */
.link-banner-arrow.attn { animation: attn-slide-x 3s var(--ease-out-soft) 0.6s infinite; }
.link-banner:hover .link-banner-arrow.attn { animation-play-state: paused; }

/* ==========================================================
   フッターのサイトマップ
   ==========================================================
   タブと同じ並び・同じ表記にしている(#tab-nav-inner と対)。
   スマホでは1列、560px以上で2列。中央そろえのフッターの中に置くので、
   グループ自体は中央に寄せつつ**文字は左そろえ**にしている
   (リンクが中央そろえだと目で追いにくい) */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 54px;
  margin: 26px auto 0;
  max-width: 720px;
  text-align: left;
}

/* 2列が1列に折り返したとき、グループごとに中央そろえになって
   左端がずれる(実測 360px幅で 125px と 79px)。同じ幅を持たせて
   左端をそろえる。PCでは見出しの下線の長さもそろって落ち着く */
/* 2列が1列に折り返したとき、グループごとに中央そろえになって左端がずれる
   (実測 360px幅で 125px と 79px)。同じ幅を持たせて左端をそろえる。

   いまの自然幅は「ページ」112px / 「関連リンク」178px。
   **どちらの自然幅より広い値**にしておけば、2列のときは見出しの下線の長さも
   そろって落ち着く。リンクを増やして 202px を超える文言が入ったら、
   その実測幅まで上げること */
.footer-nav-group { min-width: 202px; }

.footer-nav-head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  color: var(--color-text-cyan);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(157, 252, 255, 0.28);
  margin-bottom: 8px;
}

.footer-nav-list {
  list-style: none;
  display: grid;
  gap: 6px;
}

.footer-nav-list a {
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--color-text-cyan-pale);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
  line-break: strict;
  word-break: auto-phrase;
}

.footer-nav-list a:hover,
.footer-nav-list a:focus-visible { color: var(--color-white); }

/* 外部リンクだけ矢印を付けて、サイトを離れることを示す */
.footer-nav-list a[target="_blank"]::after {
  content: "↗";
  margin-left: 5px;
  font-size: 0.9em;
  color: var(--color-text-cyan);
}

/* 著作権表記。主張させず、いちばん下に小さく置く */
.footer-legal {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(222, 251, 252, 0.62);
}

/* ==========================================================
   レスポンシブ / モーション設定
   ========================================================== */

@media (max-width: 480px) {
  .section { padding: 30px 12px 44px; }
  .card-grid { gap: 8px; }

  /* タイトル装飾はモバイルでは短く */
  .title-deco { width: clamp(20px, 4.5vw, 36px); }

  /* 2026-09-10: もとは flex-direction: column にして LIVEバッジを
     独立行に落としていたが、**1行に収める**方針に変えた。
     題字側は .is-oneline(1行固定)で自動的に縮むので、
     ここではバッジと gap を小さくして幅を稼ぐだけにする */
  .section-title { gap: 8px; }
  .section-title .live-badge { font-size: 0.75rem; padding: 3px 10px 3px 7px; }

  /* タイトル装飾は本文と同じ高さの中段に来てしまうため、装飾を隠す方が自然 */
  .section-title-wrap .title-deco { display: none; }

  /* リード文・ステータスを左寄せに変えて読みやすく。
     折り返し位置(line-break / word-break)は基底の .section-lead に移した */
  .section-lead {
    text-align: left;
    padding: 0 2px;
    line-height: 1.7;
  }

  /* 全画面シェアバー的に、図鑑のステータスは中央寄せのまま小さく */
  .zukan-status { font-size: 0.82rem; }

  /* えらんだそざいトレイ: 4枠を狭い画面でも1行に収める */
  .material-tray { padding: 10px 10px 12px; }
  .material-tray-head { margin-bottom: 8px; }
  .material-tray-label { font-size: 0.78rem; gap: 6px; }
  .material-tray-count { font-size: 0.75rem; padding: 2px 7px; }
  .material-clear { font-size: 0.8rem; padding: 4px 10px; }
  .material-slots { gap: 6px; }
  .material-slot { min-height: 74px; padding: 6px 2px 5px; }
  .material-slot img { width: 36px; height: 36px; }
  .material-slot-name { font-size: 0.75rem; }

  /* マゼモンとは? のロゴは少し縮めて折り返し回避 */
  .about-hero-logo { max-width: 70vw; }

  /* 店舗カードのアクションボタンの文字サイズを引き締め */
  .store-link { font-size: 0.82rem; padding: 12px 4px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card-cell { opacity: 1; transform: none; }

  /* リビールは「隠れたまま」になるのを防ぐため、最初から表示にする */
  html.has-reveal .reveal,
  html.has-reveal .reveal.reveal-left,
  html.has-reveal .reveal.reveal-right,
  html.has-reveal .reveal.reveal-zoom,
  html.has-reveal .reveal.reveal-pop,
  html.has-reveal .reveal.reveal-depth {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.has-reveal .reveal[data-reveal-delay] { transition-delay: 0ms; }
  .attn, .portal-nav-arrow.attn { animation: none; }

  /* そざいスライダーは流すのをやめ、指で横スクロールして見られるようにする */
  .marquee-track { animation: none; }
  .marquee-row { overflow-x: auto; }
  .marquee-set:last-child { display: none; } /* 複製セットは不要になる */

  /* 図鑑の導入あしらいは、登場アニメを使わず最初から出す
     (animation で opacity を作っているので、打ち消すだけだと消えてしまう) */
  .zukan-intro-cell { animation: none; opacity: 0.88; transform: none; }

  /* データベースの明滅・走査を止める。
     DNA復元の走査線は途中で固まると白い帯がカードに残るので display:none で消す */
  .dex-led,
  .zukan-status.dex-readout.is-scanning::after { animation: none; }
  .dex-cards .card-cell.is-visible::after { display: none; }
  /* 塩基対の流れは止めるが、読み込み中であることは伝えたいので枠だけ残す */
  .dex-cards .card-skeleton { animation: none; }

  /* --- サイバー演出の打ち消し ---
     グリッチと走ってくる光の線は動きが強いので、この設定では完全に止める。
     clip-path と filter も戻さないと、途中の状態で固まって欠けたまま残る */
  html.has-reveal .reveal.reveal-glitch.is-shown {
    animation: none;
    clip-path: none;
    filter: none;
  }
  /* 光の線は「止める」のではなく消す。途中の位置で固まると
     文字の上に線が残ったままになる */
  html.has-reveal .reveal.reveal-beam.is-shown::before,
  html.has-reveal .reveal.reveal-beam.is-shown::after,
  html.has-reveal .reveal.is-shown .fx-beam::after { display: none; }
  .bg-datalines { display: none; }
  .reveal-glitch { text-shadow: 0 0 14px var(--color-shadow-blue); }
}

/* ==========================================================
   「全国から集結」ビジュアル(マゼモンコロシアム)
   マークアップは tools/coliseum-gather/build.py の生成物。
   座標(--x / --y)・ビームの長さ(--len)・角度(--rot)は
   すべてインラインのカスタムプロパティで渡ってくる。

   【方針】TOPの「SELECT!」と同じで、**枠に収めず画面幅いっぱいに広げる**。
   細かい文字は置かず、巨大英字 + 地図 + ロゴだけで伝える。

   【性能】動くのは transform と opacity だけ。
   背景やぼかしをアニメーションさせていないので、
   毎フレームの塗り直しが起きない(§10 の方針)。
   ========================================================== */

/* .page-light-inner(max-width:880px)の中から画面幅まで広げる。
   body に overflow-x: hidden が効いているので、スクロールバーぶん
   100vw がはみ出しても横スクロールは発生しない
   (TOPの .section-basics が overflow:hidden で同じことをしている) */
.gather {
  position: relative;
  margin: clamp(6px, 2vw, 18px) calc(50% - 50vw) clamp(20px, 4vw, 36px);
  width: 100vw;
  /* 上は巨大英字のぶん多めにとる(下の .gather-en のコメント参照) */
  padding: clamp(44px, 9vw, 100px) 0 clamp(16px, 3vw, 32px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 26% 34%, rgba(2, 161, 243, 0.42), transparent 72%),
    linear-gradient(165deg, #081029 0%, #0c1740 46%, #060d22 100%);
  color: var(--color-text-cyan-pale);
}

/* 上下の境目。切りっぱなしにせず、機械的なラインで挟む */
.gather::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-text-cyan), transparent);
  opacity: 0.7;
}

/* 背後を斜めに走るストライプ。TOPの .basics-stripes と同じ役割 */
.gather-stripes {
  position: absolute;
  top: 46%;
  left: -20%;
  width: 140%;
  height: clamp(120px, 26vw, 260px);
  transform: translateY(-50%) rotate(-8deg);
  background: repeating-linear-gradient(
    118deg,
    rgba(77, 250, 255, 0.14) 0 10px,
    transparent 10px 30px
  );
  pointer-events: none;
}

/* 巨大英字。TOPの .basics-en と同じ作りで、
   外側が位置決め + 登場アニメ、内側 <b> が傾きと厚み。
   .reveal-depth の is-shown が transform:none を当てるため、
   同じ要素に傾きを書くと打ち消される */
/* 【注意】top は「回転で持ち上がるぶん」を見て決めている。
   rotateZ(-7deg) を transform-origin: left center でかけると、
   **右端が上へ持ち上がる**。さらに perspective + rotateY も効くので、
   持ち上がる量は見た目の幅の12%ほどになる(1440px幅で実測79px)。
   top が小さいと .gather の overflow:hidden で頭が切れる
   —— 66pxでは1440px幅で13px切れていたので88pxまで広げた。
   下限28pxは、320px幅でも帯の内側に7px以上残るようにした値 */
.gather-en {
  position: absolute;
  top: clamp(28px, 7vw, 88px);
  left: clamp(8px, 4vw, 64px);
  z-index: 0;
  pointer-events: none;
}

.gather-en b {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.1rem, 8.4vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-text-cyan);
  opacity: 0.85;
  white-space: nowrap;
  transform-origin: left center;
  transform: perspective(680px) rotateY(-22deg) rotateZ(-7deg);
  text-shadow:
    -2px 3px 0 #0a4f8f,
    -4px 6px 0 #0a4f8f,
    -6px 9px 0 #021a3d,
    -8px 12px 0 #01102a,
    0 0 38px rgba(77, 250, 255, 0.45);
}

/* ---- 地図ステージ ----
   縦横比を固定して、中の座標(%)が常に同じ場所を指すようにする。
   実ファイル(assets/coliseum/japan_map.png)と同じ比にし、
   tools/coliseum-gather/build.py の MAP_W / MAP_H とも必ず一致させること
   —— ビームの角度と長さをこの比で計算しているため */
.gather-map {
  position: relative;
  z-index: 1;
  width: min(94%, 900px);
  margin: 0 auto;
  aspect-ratio: 1000 / 733;
}

.gather-map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 水色のビームを手前で読ませたいので、地図は一段引かせている */
  opacity: 0.82;
  filter: drop-shadow(0 0 16px rgba(77, 250, 255, 0.45));
}

/* ---- パークのピン ----
   大きさは**地図の幅に対する割合**。
   固定pxにすると、地図が小さくなる狭い画面で関東の5つが重なる */
.gather-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(7px, 2.6%, 17px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--color-text-cyan) 42%, rgba(2, 161, 243, 0) 72%);
  z-index: 3;
}

/* 広がる波。scale と opacity だけなので合成側で処理される */
.gather-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-text-cyan);
  animation: gather-ping 2.6s ease-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes gather-ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ---- ロゴへ伸びるビーム ----
   ピンを起点に、ロゴの方向へ --len(幅に対する%)だけ伸ばして回す */
.gather-beam {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--len);
  height: 2px;
  margin-top: -1px;
  transform-origin: 0 50%;
  transform: rotate(var(--rot));
  /* 起点側は薄く、ロゴ側で明るく。「吸い込まれている」向きを線だけで伝える */
  background: linear-gradient(90deg, rgba(157, 252, 255, 0.14), rgba(157, 252, 255, 0.9));
  box-shadow: 0 0 6px rgba(77, 250, 255, 0.3);
  z-index: 1;
}

/* ビームを流れる光。
   幅を18%にしておくと translateX(455%) = 自分の幅×4.55 = ビームの82% 進む。
   **どちらも同じ幅を基準にした比なので、画面幅が変わっても割合は変わらない** */
.gather-beam::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 18%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--color-text-cyan), #fff);
  box-shadow: 0 0 10px var(--color-text-cyan);
  animation: gather-flow 2.8s linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes gather-flow {
  0%   { transform: translateX(0);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(455%); opacity: 0; }
}

/* ---- パークの筐体(マゼモンジェネレーター)----
   「マゼモンはパークの筐体から出てくる」ことを伝えるための小さな写真。
   丸ではなく角丸の四角。筐体は箱型なので、そのシルエットのほうが伝わる。

   **1台だけ**置いている(2026-08-29: 6台から1台に変更)。
   数を並べると地図が読みにくくなるので、伝わる最小限にした。

   大きさは地図の幅に対する割合(11%)。
   【注意】px の clamp は付けない。付けると狭い画面でバッジだけ相対的に
   大きくなり、他のパークのピンを覆ってしまう
   (実測: 20px下限にしたら320px幅で2つのピンが隠れた)。

   位置は build.py の MACHINES(東北・MOLTI郡山のピンの上)。
   ピンは筐体より前面(z-index 3 > 2)なので、重なってもピンは見える
   —— ピンの波紋が筐体から広がって見える */
.gather-machine {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 11%;
  aspect-ratio: 180 / 214;
  transform: translate(-50%, -50%);
  /* ピン(3)より下、ビーム(1)より上。ピンの光が手前に出る */
  z-index: 2;
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid rgba(157, 252, 255, 0.85);
  box-shadow: 0 0 10px rgba(77, 250, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5);
  background: #0a1130;
}

.gather-machine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- 集まってくるマゼモン8たい ----
   画像は四角いので、円形に切り抜いて「カプセル」に見せている。
   大きさはピンと同じ理由で地図の幅に対する割合(直径7%)。
   位置は build.py が「陸・ロゴ・たがいに重ならない」条件で決めている */
.gather-mon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 4;
  animation: gather-bob 3.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.gather-mon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-text-cyan);
  box-shadow: 0 0 14px rgba(77, 250, 255, 0.75);
}

/* 進行方向へ伸びる尾。--rot がビームの角度なので、そのまま使える */
.gather-mon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 12%;
  margin-top: -6%;
  transform-origin: 0 50%;
  /* ロゴへ向かう向きの反対側(=後ろ)へ伸ばすので 180度ずらす */
  transform: rotate(calc(var(--rot) + 180deg));
  background: linear-gradient(90deg, rgba(157, 252, 255, 0.85), transparent);
  border-radius: 3px;
  z-index: -1;
}

@keyframes gather-bob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -54%) scale(1.06); }
}

/* ---- 光の集まる先: マゼモンコロシアムのロゴ ----
   位置と大きさは build.py の CORE / LOGO_W と必ず合わせること
   (ビームの終点がここに集まるように計算されている) */
.gather-logo {
  position: absolute;
  left: 27%;
  top: 24%;
  width: 46%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.gather-logo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(77, 250, 255, 0.6));
}

/* 後ろの光。ロゴの形ではなく楕円のにじみなので、
   ぼかしフィルタではなくグラデーションで作る(塗り直しを起こさない) */
.gather-logo-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128%;
  aspect-ratio: 1.9;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(157, 252, 255, 0.5) 0%,
    rgba(2, 161, 243, 0.28) 42%,
    rgba(2, 161, 243, 0.08) 66%,
    transparent 78%);
  animation: gather-glow 3.2s ease-in-out infinite;
}

@keyframes gather-glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* モーション低減設定では、流れと波を止める(位置はそのまま) */
@media (prefers-reduced-motion: reduce) {
  .gather-pin::after,
  .gather-beam::after,
  .gather-mon,
  .gather-logo-glow {
    animation: none;
  }
  .gather-beam::after { opacity: 1; transform: translateX(300%); }
}

/* ==========================================================
   全幅の濃色帯 (.showcase)
   ==========================================================
   白地(.page-light)の中に、画面幅いっぱいの濃紺の帯を挟んで
   「大きな絵 + ひとこと」を見せる部品。
   コロシアムの「全国から集結」(.gather)が前例で、全幅の出し方も同じ
   (親は max-width の箱なので margin を calc(50% - 50vw) で左右に振る。
    body の overflow-x:hidden でスクロールバーぶんの100vwは隠れる)。

   ■ なぜ帯にするか
   「マゼモンとは?」は面積の74%、「カードバトル」は90%が白地の文章で、
   サイトの地色(濃紺・シアン)がTOPと図鑑にしか無かった(実測)。
   ゲーム公式サイトは世界観の色を最後まで切らない。

   ■ 構成
   .showcase
     .showcase-stripes   斜めストライプ(.gather-stripes と同じ)
     .showcase-en        背面の巨大英字(13文字まで。§6「巨大英字」参照)
     .showcase-inner     中身(max 960px)
       .showcase-media   絵(16:9に切る。.is-plain は枠なし = カードの扇・地図)
       .showcase-copy    ひとこと。絵の左下に少し重ねた板
   .is-split を付けると PC で「文 | 絵」の2列(店舗の地図で使用)

   ■ 動画は autoplay を付けない
   他の動画と同じく、.reveal の要素が出たときに reveal.js の
   playVideosIn() が再生する(autoplay は preload を上書きするため。§10) */
.showcase {
  position: relative;
  margin: clamp(36px, 6vw, 64px) calc(50% - 50vw);
  width: 100vw;
  padding: clamp(48px, 9vw, 96px) 16px clamp(30px, 5vw, 52px);
  overflow: hidden;
  color: var(--color-text-cyan-pale);
  background:
    radial-gradient(ellipse 60% 70% at 24% 30%, rgba(2, 161, 243, 0.4), transparent 72%),
    linear-gradient(165deg, #081029 0%, #0c1740 46%, #060d22 100%);
}

/* 上下の境目のライン。切りっぱなしにしない(.gather::after と同じ) */
.showcase::before,
.showcase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-text-cyan), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.showcase::before { top: 0; }
.showcase::after { bottom: 0; }

.showcase-stripes {
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: clamp(120px, 26vw, 260px);
  transform: translateY(-50%) rotate(-8deg);
  background: repeating-linear-gradient(
    118deg,
    rgba(77, 250, 255, 0.12) 0 10px,
    transparent 10px 30px
  );
  pointer-events: none;
}

/* 巨大英字。.gather-en と同じ作り(外側が位置、内側 <b> が傾き)。
   top は回転で右端が持ち上がるぶんを見込んでいる(.gather-en のコメント参照) */
.showcase-en {
  position: absolute;
  top: clamp(24px, 6vw, 72px);
  left: clamp(8px, 4vw, 64px);
  z-index: 0;
  pointer-events: none;
}

.showcase-en b {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  /* 文字数が多い語(LET'S BATTLE = 12文字)は右端が画面から切れるので、
     帯側で --en-scale を下げる(1280px幅で実測: 12文字は 0.78 で収まる) */
  font-size: calc(clamp(2rem, 7.6vw, 5.4rem) * var(--en-scale, 1));
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-text-cyan);
  opacity: 0.8;
  white-space: nowrap;
  transform-origin: left center;
  transform: perspective(680px) rotateY(-22deg) rotateZ(-7deg);
  text-shadow:
    -2px 3px 0 #0a4f8f,
    -4px 6px 0 #0a4f8f,
    -6px 9px 0 #021a3d,
    -8px 12px 0 #01102a,
    0 0 38px rgba(77, 250, 255, 0.45);
}

.showcase-inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
}

.showcase-media {
  margin: 0;
  border: 1px solid var(--color-text-cyan-light);
  border-radius: 6px;
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 24px var(--color-bg-cyan-light), 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* 絵は16:9に統一。写真(1500×1051)は上下を少し切る。
   縦位置は --focus で調整(画面の写り込みを残すため) */
.showcase-media img,
.showcase-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% var(--focus, 50%);
}

/* 枠なし(カードの扇・地図など、絵そのものが形を持っているもの) */
.showcase-media.is-plain {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.showcase-media.is-plain img { aspect-ratio: auto; object-fit: contain; }

/* ひとこと。絵の左下に少し重ねた板。
   重ねるのは「絵の説明」ではなく「絵と一体の見出し」に見せるため */
.showcase-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: -26px 0 0 clamp(0px, 3vw, 28px);
  padding: 16px 22px 18px;
  background: rgba(6, 14, 38, 0.92);
  border-left: 6px solid var(--color-text-cyan);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.showcase-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-statement);
  line-height: 1.5;
  color: var(--color-white);
  line-break: strict;
  word-break: auto-phrase;
}
.showcase-title strong { color: var(--color-text-cyan); }
/* 文節の途中で折れないように、文節ごとに <span class="nobr"> で包む
   (auto-phrase が効かない環境でも「パークであ / そべる」にならない) */
.showcase-title .nobr { white-space: nowrap; }

/* 【重要】369px以下では nowrap を外す。
   320pxだと立ち絵ぶんを引いた文の幅が148pxしか無く、
   いちばん長い文節(「実験を手伝ってくれ！」= 192px)が板からはみ出す(実測)。
   はみ出させるより折るほうがましなので、この幅だけ折り返しを許す
   (word-break: auto-phrase が効く環境では文節で折れる)。
   369px という値は「1行固定」の .is-oneline-wide と同じ考え方 */
@media (max-width: 369px) {
  .showcase-title .nobr { white-space: normal; }
}

.showcase-sub {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--color-text-cyan-pale);
  opacity: 0.9;
  line-break: strict;
  word-break: auto-phrase;
}

/* ---- ハムレスがコメントしている板(.is-talk) ----
   図鑑の .dex-talk / カードバトルの .cb-talk と同じ「顔 + セリフ」の並び。
   立ち絵は板の**中**に入れて下端に立たせる(はみ出させると
   上の絵に頭が重なって、絵の主役が分からなくなる)。
   立ち絵の高さは幅から決まる(320×347)ので、文が短いときは
   立ち絵ぶんだけ板が高くなる —— それでいい(吹き出しらしく見える) */
.showcase-copy.is-talk {
  display: grid;
  grid-template-columns: clamp(74px, 20%, 124px) minmax(0, 1fr);
  /* PCは立ち絵が2行ぶんの高さを持つ(横に立っている見え方)。
     狭い画面では下の media query で「立ち絵 | 題字」+「説明は全幅」に組み替える */
  grid-template-areas:
    "face title"
    "face sub";
  gap: 8px clamp(10px, 2vw, 18px);
  align-items: end;
}

.showcase-copy.is-talk .showcase-title { grid-area: title; }
/* 行間は grid の gap が持つので、段落側の margin は消す(二重に空く) */
.showcase-copy.is-talk .showcase-sub { grid-area: sub; margin-top: 0; }

.showcase-face {
  grid-area: face;
  width: 100%;
  height: auto;
  align-self: end;
  /* 立ち絵は透過PNG。暗い板の上でも輪郭が沈まないよう、
     うしろにシアンのぼんやりした光を置く(.cb-talk.on-dark の顔と同じ考え方) */
  filter: drop-shadow(0 0 12px rgba(2, 161, 243, 0.55));
}

/* 板が絵と同じ幅だと重なっているのが分からないので、狭い画面では左右を詰める */
@media (max-width: 559px) {
  .showcase-copy { margin: -16px 10px 0; padding: 14px 16px 16px; }
  /* 320〜375pxでは立ち絵に20%を渡すと題字が入りきらないので、
     立ち絵を固定の72pxに落とし、**説明文は全幅**に回す
     (375pxで説明が4行 → 2行になる。実測) */
  .showcase-copy.is-talk {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "face title"
      "sub  sub";
    gap: 8px 10px;
  }
}

/* ---- 2列版(PC): 文 | 絵。店舗の地図で使う ---- */
@media (min-width: 760px) {
  .showcase.is-split .showcase-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 32px;
    align-items: center;
  }
  .showcase.is-split .showcase-copy { order: -1; margin: 0; max-width: none; }
}

/* ---- カードの扇(カードバトル) ----
   5枚を少し重ねて並べる。幅は画面幅から決め、320pxでも5枚が収まる
   (19vw×5 − 重なり2vw×4 = 87vw)。PCは1枚180pxまで */
.showcase-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 0 18px;
}
.showcase-fan img {
  width: min(180px, 19vw);
  height: auto;
  margin-inline: calc(min(18px, 2vw) * -0.5);
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
  transform: rotate(calc(var(--r) * 1deg)) translateY(calc(var(--dy) * 1px));
  transform-origin: 50% 100%;
}

/* 帯の中に置く店舗の地図。自前の板と枠は帯が担うので消す */
.showcase .store-map { max-width: 640px; margin: 0 auto; }

/* ==========================================================
   UXの土台 — 2026-10-02
   ==========================================================
   ・読み上げ専用の文字(.visually-hidden)
   ・本文へスキップ(.skip-link)。Tab を押したときだけ左上に出る
   ・フォーカスの既定の輪郭。:where() で詳細度0にしてあるので、
     部品ごとに focus-visible を書いているものはそちらが勝つ
   ・ページ切替で h1 にフォーカスを移す(js/main.js focusPageHeading)ので、
     操作要素ではない h1 / main には輪郭を出さない
   ・選択範囲の色をブランドのシアンに */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 10px;
  z-index: 1000;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-text-cyan-light);
  background: var(--color-header);
  border: 2px solid var(--color-text-cyan);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 0 22px var(--color-bg-cyan-light);
  transform: translateY(-180%);
  transition: transform 0.2s;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: none;
}

:where(a[href], button, summary, select, input, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--color-text-cyan);
  outline-offset: 3px;
}
.page-light :where(a[href], button, summary, select, input, textarea):focus-visible {
  outline-color: var(--color-text-gallery-title);
}

main:focus,
h1[tabindex="-1"]:focus {
  outline: none;
}

::selection {
  background: rgba(77, 250, 255, 0.38);
  color: #fff;
}
.page-light ::selection {
  background: rgba(2, 161, 243, 0.24);
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 画像の高さの既定値を auto にする(2026-10-02)。
   <img> に width/height 属性を書く(=読み込み前に場所を確保して、ガタつきを防ぐ)と、
   CSS で高さを指定していない画像は属性の高さのまま縦に伸びる。
   このサイトで繰り返し起きた不具合なので、全体の既定として height:auto を置く。
   :where() で詳細度0にしてあるので、部品側で height を書いているものはそちらが勝つ */
:where(img) { height: auto; }

/* ==========================================================
   ページの外枠 (js/page-chrome.js) — 2026-10-02
   ==========================================================
   z-index の並び: ヘッダー 50 < いちばん上へ 55 < 進捗バー 56 < 走査線 58 < モーダル類(60〜)
   いずれも pointer-events は必要なものだけに付ける(走査線・進捗バーは触れない) */

/* 和文の改行を文節単位にする(継承されるので body に置けば全体に効く)。
   以前は部品ごとに書いていて、抜けたところで「あ / そびかた」「しぼりこ / む」のように
   語の途中で折れていた。部品側で keep-all などを指定しているものはそちらが勝つ */
body {
  line-break: strict;
  word-break: auto-phrase;
}

/* 1. 読み進み具合 */
.read-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 56;
  width: 100%;
  height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-text-gallery-title), var(--color-text-cyan));
  box-shadow: 0 0 10px rgba(77, 250, 255, 0.7);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.read-progress.is-on { opacity: 1; }

/* 2. いちばん上へ */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 55;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(157, 252, 255, 0.55);
  background: rgba(8, 18, 48, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 16px rgba(0, 169, 255, 0.35), 0 6px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  animation: to-top-in 0.3s var(--ease-out, ease-out);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.to-top[hidden] { display: none; }
.to-top:hover {
  transform: translateY(-3px);
  border-color: var(--color-text-cyan);
  box-shadow: 0 0 24px rgba(77, 250, 255, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
}
/* 上向きの山形。文字の「↑」は環境で字形が変わるので線で描く */
.to-top-icon {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-left: 2.5px solid var(--color-text-cyan);
  border-top: 2.5px solid var(--color-text-cyan);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 4px rgba(77, 250, 255, 0.8));
}
@keyframes to-top-in {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* 3. ページ切替の走査線。上から下へ 0.6 秒で1回だけ走る。
   線の後ろに薄いシアンの帯を引いて「読み込み直した」感じを出すが、
   中身が透けて読めないほど濃くはしない(帯の最大不透明度 0.10) */
.route-scan {
  position: fixed;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(77, 250, 255, 0.10) 86%,
      rgba(222, 251, 252, 0.95) 99.4%,
      transparent 100%);
  background-size: 100% 46vh;
  background-repeat: no-repeat;
  background-position: 0 -46vh;
}
.route-scan.is-run {
  animation: route-scan 0.62s cubic-bezier(0.6, 0, 0.3, 1);
}
@keyframes route-scan {
  0%   { opacity: 1; background-position: 0 -46vh; }
  85%  { opacity: 1; }
  100% { opacity: 0; background-position: 0 100vh; }
}

/* 4. 画像のフェードイン */
img.img-fade {
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
img.img-fade.is-loaded { opacity: 1; }

/* 5. ヘッダーの出し入れ(1059px以下。js 側でもこの幅でしか付けない) */
.site-header { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.site-header.is-tucked { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .route-scan { display: none; }
  img.img-fade { opacity: 1; }
  .to-top { animation: none; }
}

/* ==========================================================
   ホロカード (js/card-holo.js) — 2026-10-02
   ==========================================================
   マウスを乗せたカードが、ポインタの位置に合わせて傾き、表面を光沢が流れる。
   傾きと光沢の位置は JS が CSS 変数で渡す:
     --holo-rx / --holo-ry  Y軸 / X軸まわりの傾き
     --holo-gx / --holo-gy  光の中心
     --holo-shift           虹色の帯のずれ
   既存のホバー(浮かせる・光らせる)はそのまま活かし、回転だけ差し替える */
.card-cell.is-holo:hover img,
.card-cell.is-holo img {
  transform: perspective(820px) rotateX(var(--holo-ry, 0deg)) rotateY(var(--holo-rx, 0deg)) translateY(-8px) scale(1.05);
  transition: transform 0.12s ease-out, filter 0.3s;
}

.holo-glare {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 4.5% / 2.9%;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--holo-gx, 50%) var(--holo-gy, 50%),
      rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 26%, transparent 50%),
    linear-gradient(118deg,
      transparent 28%,
      rgba(77, 250, 255, 0.34) 43%,
      rgba(255, 120, 230, 0.28) 50%,
      rgba(255, 230, 90, 0.24) 57%,
      transparent 72%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, var(--holo-shift, 0%) 50%;
  transition: opacity 0.25s;
}

/* .card-cell は 222:332 の枠に 1276:2008 の画像を contain で入れているので、
   画像は左右に 2.48% ずつ余白がある。光沢も同じだけ内側に寄せる */
.card-cell .holo-glare {
  top: 0;
  bottom: 0;
  left: 2.48%;
  right: 2.48%;
  transform: perspective(820px) rotateX(var(--holo-ry, 0deg)) rotateY(var(--holo-rx, 0deg)) translateY(-8px) scale(1.05);
  transition: opacity 0.25s, transform 0.12s ease-out;
}
.card-cell.is-holo .holo-glare { opacity: 1; }

/* 拡大表示: 光沢の位置と大きさは JS が画像に合わせて入れる */
.card-modal-figure { position: relative; perspective: 1100px; }
.card-modal-figure img { transition: transform 0.14s ease-out; }
.card-modal-figure.is-holo img,
.card-modal-figure.is-holo .holo-glare {
  transform: rotateX(calc(var(--holo-ry, 0deg) * 0.6)) rotateY(calc(var(--holo-rx, 0deg) * 0.6));
}
.card-modal-figure .holo-glare {
  border-radius: 14px;
  transition: opacity 0.25s, transform 0.14s ease-out;
}
.card-modal-figure.is-holo .holo-glare { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .holo-glare { display: none; }
}

/* ==========================================================
   ヒーローの動き — 2026-10-02
   ==========================================================
   1. 開いた瞬間、KVが少し寄った位置から定位置へ 1.8 秒かけて収まる
   2. スクロールすると KV がゆっくり下がる(=手前の文字より奥にあるように見える)、
      コピーは少し早く上がって薄くなる
   2 はスクロール連動アニメーション(animation-timeline)で、対応していない
   ブラウザでは何も起きない(=いまの静止した見え方のまま)。
   拡大と移動は scale / translate を別々のプロパティにしているので、
   1 と 2 が同時にかかっても打ち消し合わない */
.hero-img {
  animation: hero-settle 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes hero-settle {
  from { scale: 1.08; filter: brightness(0.75) saturate(0.9); }
  to   { scale: 1; filter: none; }
}

@supports (animation-timeline: scroll()) {
  .hero-img {
    animation:
      hero-settle 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both,
      hero-drift linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 90vh;
  }
  .hero-body {
    animation: hero-lift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 60vh;
  }
}
@keyframes hero-drift {
  to { translate: 0 18%; }
}
@keyframes hero-lift {
  to { translate: 0 -40px; opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img, .hero-body { animation: none; }
}

/* ==========================================================
   フッターの大きな英字 — 2026-10-02
   ==========================================================
   ページの最後に、見出しの背面英字(.about-h3-sub など)と同じ様式の
   巨大な "MAZEMON" を薄く置いて、ブランドで締める。読み上げには出さない */
.site-footer { position: relative; overflow: hidden; }
.footer-wordmark {
  margin: 28px 0 -0.18em;
  font-family: var(--font-title);
  font-weight: 400;
  /* 「MAZEMON」は実測で 6.54em 幅。画面幅の 92% に収まるよう 92vw ÷ 6.54 ≒ 14vw。
     以前の 19vw では SP で右端が切れていた(390px幅で 485px) */
  font-size: min(14vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(157, 252, 255, 0.22);
  background: linear-gradient(180deg, rgba(77, 250, 255, 0.16), rgba(77, 250, 255, 0));
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}

/* 短いラベル(そざい名など)が2行に折れるときは、左右均等に分ける(2026-10-02)。
   カタカナの長い語はどこでも折れるので、そのままだと「チョコレー / ト」のように
   最後の1文字だけ次の行に落ちていた。balance にすると「チョコ / レート」になる。
   文章(複数行の段落)には使わない —— 不自然な位置で折れることがある(.lead-statement のコメント参照) */
.material-chip-name,
.material-slot-name,
.marquee-name,
.card-modal-mats-list span,
.card-modal-items-list span,
.store-badge,
.cb-flow-name,
.cb-zone-name {
  text-wrap: balance;
  /* 文節単位(auto-phrase)だとカタカナ語の内側に折り目の候補がなく、
     はみ出す直前で強制的に折られて balance が効かない。ラベルは通常の規則に戻す */
  word-break: normal;
}

/* ==========================================================
   和文の改行の細部 — 2026-10-02
   ==========================================================
   文節単位(body の auto-phrase)でも、ひらがなの多い文では Chrome の判定が
   「と、あ / そびかた」のように誤ることがある。点検で見つけた箇所は
   次のどれかで直している:
   ・.nobr で語をひとかたまりにする(HTMLに書く。長い語には使わない)
   ・分かち書き(単語の間に空白)の文は keep-all で「空白だけで折る」
   ・住所は空白の位置で折る(建物名の途中で折らない) */
.nobr { white-space: nowrap; }
/* .keep は「短い語」専用で、狭い画面でも外さない。
   .showcase-title .nobr は 369px 以下で折り返しを許す(はみ出し防止)が、
   その中でも「あそべる」のような短い語は割らない(詳細度で .showcase-title .nobr の解除に勝たせる) */
.showcase-title .keep,
.keep { white-space: nowrap; }

/* アナログバトルの本文は分かち書き(「こうげきに つかう」)。
   空白のところだけで折ると、書いた区切りのとおりに改行される。
   空白のない長い語(カード名など)がはみ出すときだけ anywhere で折る */
/* 要素ごとに auto-phrase を直接書いている(card-battle.css)ので、継承では勝てない。
   要素に直接当てる(詳細度 0,2,1) */
.page[data-page="cardbattle"] {
  overflow-wrap: anywhere;
}
.page[data-page="cardbattle"] :is(p, li, h2, h3, h4, strong, b, span, figcaption, dd, dt, td, th, summary, small):not(:where(.showcase, .next-nav) *) {
  word-break: keep-all;
}
/* 濃色帯の見出しと「つぎに見る」は分かち書きではない(ふつうの漢字かな交じり)ので除く。
   keep-all のままだと折り目がなくなり、はみ出す直前で強制的に折られる(「チェ / ック」) */
/* カード名・わざ名はカタカナの長い語なので、2行になるときは左右均等に(詳細度 0,3,0 で上に勝つ) */
.page[data-page="cardbattle"] :is(.cb-card-name, .cb-card-skill, .cb-flow-name, .cb-zone-name) {
  word-break: normal;
  text-wrap: balance;
}

.store-addr {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 画像が届かなかったとき(js/page-chrome.js が .is-broken を付ける) — 2026-10-02
   画像は透明にして、入れ物の下地を見せる。カードはうら面の絵を敷いておく */
img.is-broken { opacity: 0 !important; }
.store-card-img:has(img.is-broken),
.portal-nav-card:has(img.is-broken) {
  background-image: linear-gradient(160deg, #0b2a5e, #071a3d);
}
.card-cell:has(img.is-broken) {
  background: url("../assets/zukan/card_back.jpg") center / contain no-repeat;
}
.cb-fold-lead-text { flex: 1 1 18em; }

/* コロシアム「見どころ」(2026-10-02)
   3枚とも本文の下に16:9の絵を置き、絵の下端をカードの下端にそろえる
   (本文の長さがちがうので、そろえないと絵の高さ位置がばらばらになる) */
.page[data-page="coliseum"] .about-grid > .about-card {
  display: flex;
  flex-direction: column;
}
.page[data-page="coliseum"] .about-card > :is(.rule-video, .rule-shot, .rule-entries):last-child {
  margin-top: auto;
}
.page[data-page="coliseum"] .about-card > p:has(+ :is(.rule-video, .rule-shot, .rule-entries)) {
  margin-bottom: 12px;
}

/* エントリーしたマゼモン8たい。4×2で並べて「8たい」を絵で見せる */
.rule-entries {
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  place-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-bg-blue-light);
  background:
    radial-gradient(ellipse 70% 80% at 50% 45%, rgba(2, 161, 243, 0.38), transparent 72%),
    linear-gradient(160deg, #0b2a5e, #071a3d);
}
.rule-entries img {
  width: min(100%, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(157, 252, 255, 0.65);
  box-shadow: 0 0 10px rgba(77, 250, 255, 0.35);
}

/* ==========================================================
   ページ内の目次 (.page-toc) — 2026-10-02
   ==========================================================
   長いページ(マゼモンとは? = SPで約15画面)の冒頭に置く。
   押すと js/main.js の data-scroll-to がその節へスクロールする。
   飛んだ先の見出しが固定ヘッダーの下に潜らないよう、見出し側に scroll-margin を持たせる */
.page-toc {
  max-width: 860px;
  margin: 26px auto 0;
  text-align: center;
}
.page-toc-label {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: var(--color-text-cyan);
}
.page-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.page-toc-item {
  min-height: 44px;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sub);
  color: var(--color-text-cyan-pale);
  background: rgba(6, 26, 62, 0.6);
  border: 1px solid rgba(157, 252, 255, 0.45);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.page-toc-item:hover {
  color: var(--color-white);
  border-color: var(--color-text-cyan);
  background: rgba(2, 161, 243, 0.28);
  box-shadow: 0 0 14px rgba(77, 250, 255, 0.35);
  transform: translateY(-2px);
}
/* 見出しの真上に背面の巨大英字(.about-h3-sub)が立っているので、その分も空けて止める */
.about-h3[id] { scroll-margin-top: clamp(100px, 12vw, 150px); }
/* 目次やページ切替で移したフォーカスは見出し(操作要素ではない)なので輪郭を出さない */
:is(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }

/* 直接ほかのページを開いたとき、JSが切り替える前の最初の描画から、そのページを出す
   (index.html <head> のスクリプトが data-boot-route を付け、main.js の navigate() が外す)。
   ・TOPは隠す(以前はTOPが一瞬描かれ、KVも読み始めていた)
   ・開いたページは hidden 属性があっても表示する。これが無いと最初の1フレームだけ本文が空で
     フッターが画面の上に描かれ、直後に本文が入って大きくずれていた(CLS 0.62。2026-10-06 実測)
   ・未知のルート(古い #/mypage など)はどのページも出さず、main.js がTOPへ振り分ける */
html[data-boot-route]:not([data-boot-route="top"]) .page[data-page="top"] { display: none; }
html[data-boot-route="about"] .page[data-page="about"],
html[data-boot-route="coliseum"] .page[data-page="coliseum"],
html[data-boot-route="cardbattle"] .page[data-page="cardbattle"],
html[data-boot-route="dictionary"] .page[data-page="dictionary"],
html[data-boot-route="stores"] .page[data-page="stores"] { display: block; }