/* ============================================
   XyberDraw - Main Stylesheet
   ============================================ */

:root {
  --bg-base: #05060a;
  --bg-panel: #0d1220;
  --bg-highlight: #152040;
  --color-cyan: #00e5ff;
  --color-magenta: #ff2bd6;
  --color-lime: #c8ff00;
  --text-main: #e8ecf5;
  --text-sub: #8b9bb8;
  --border-steel: #1c2a4a;

  --font-display: 'Orbitron', sans-serif;
  --font-ui: 'Rajdhani', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;

  --max-width: 1280px;
  --header-height: 72px;

  --shadow-cyan: 0 0 12px rgba(0, 229, 255, 0.5), 0 0 24px rgba(0, 229, 255, 0.25);
  --shadow-magenta: 0 0 12px rgba(255, 43, 214, 0.5), 0 0 24px rgba(255, 43, 214, 0.25);
  --shadow-lime: 0 0 12px rgba(200, 255, 0, 0.45), 0 0 24px rgba(200, 255, 0, 0.2);

  /* 高解像度対応: body の zoom の逆数。vh/vw は zoom の影響を受けて
     二重スケールになるため、viewport 単位を使う箇所はこれを掛けて補正する */
  --invz: 1;
}

html, body {
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
}

/* 横スクロール防止は body のみに指定する。
   html と body の両方に overflow-x: hidden を付けると body がスクロールコンテナ化し、
   body 内の position: sticky（左目次など）が機能しなくなるため。
   body のみなら値がビューポートへ伝播し、横スクロール防止と sticky が両立する。 */
body {
  overflow-x: hidden;
}

/* アンカーリンクのスムーススクロール */
html {
  scroll-behavior: smooth;
}

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

/* ============================================
   高解像度ディスプレイ対応（WQHD・4K、中間解像度込み）
   サイトは px 基準のレイアウトのため、body 全体を zoom でスケールして
   実効レイアウト幅を FHD（約1920px）相当に保つ。
   2240px〜: 1.25倍 / 2880px〜: 1.5倍 / 3700px〜(4K): 2倍
   ============================================ */
@media (min-width: 2240px) {
  :root { --invz: 0.8; }
  body { zoom: 1.25; }
}

@media (min-width: 2880px) {
  :root { --invz: 0.6667; }
  body { zoom: 1.5; }
}

@media (min-width: 3700px) {
  :root { --invz: 0.5; }
  body { zoom: 2; }
}

/* スクリーンリーダー・SEO用の不可視テキスト（見た目には一切出さない） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh * var(--invz));
  position: relative;
}

/* 背景の回路パターン（薄く全体に） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* スキャンライン */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 3px
  );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

main, header, footer {
  position: relative;
  z-index: 2;
}

/* ============================================
   Layout
   ============================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

main {
  flex: 1;
  /* padding-top は意図的に 0：ヘッダーは透明で開始するため、ヒーローやページヘッダーが
     ヘッダーの下を貫通して見えるようにする。各セクション側で必要に応じて上余白を確保。 */
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 100;
  /* 注意: 本体には backdrop-filter / filter / transform を一切付けないこと。
     付けると配下の position: fixed (.site-nav 等) の containing block が
     ヘッダー自身になり、viewport 基準で配置できなくなる。
     視覚的な背景・ブラー・罫線は ::before に分離する。 */
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  pointer-events: none;
  z-index: -1;
  transition: background 0.3s ease, border-bottom-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* スクロール後 or モバイルナビ展開中：暗色帯＋ブラー */
.site-header.is-scrolled::before {
  background: rgba(5, 6, 10, 0.85);
  border-bottom-color: var(--border-steel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  height: 48px;
}

.site-header__logo img {
  height: 100%;
  width: auto;
  /* 透明ヘッダー時の可読性のため暗色ドロップシャドウを併用 */
  filter:
    drop-shadow(0 0 6px rgba(0, 229, 255, 0.4))
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
  transition: filter 0.3s ease;
}

.site-header__logo:hover img {
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.8));
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav__link {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
  /* 透明ヘッダー時の可読性のため暗色シャドウ */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  position: relative;
  transition: color 0.2s ease;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--color-cyan);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-cyan);
  text-shadow: var(--shadow-cyan);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ===== ナビ ドロップダウン（RULES / WORLD のセクション一覧） ===== */
.site-nav__item--dropdown {
  position: relative;
}

.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  /* 項目が多い場合はドロップダウン内でスクロール */
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding: 10px 0;
  background: rgba(10, 12, 20, 0.95);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--border-steel);
  border-left: 2px solid var(--color-cyan);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 229, 255, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 1100;
}

.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__dropdown a {
  display: block;
  padding: 8px 18px;
  font-family: var(--font-jp);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-sub);
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.site-nav__dropdown a:hover {
  color: var(--color-cyan);
  background: rgba(0, 229, 255, 0.06);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border-steel);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.lang-switch__link {
  color: var(--text-sub);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: color 0.2s ease;
}

.lang-switch__link:hover {
  color: var(--color-cyan);
}

.lang-switch__link.is-active {
  color: var(--color-cyan);
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

.lang-switch__sep {
  color: var(--border-steel);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  position: relative;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-main);
  margin: 5px 0;
  /* 透明ヘッダー時の可読性 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  margin-top: 80px;
  padding: 48px 0 24px;
  background: linear-gradient(180deg, transparent, rgba(13, 18, 32, 0.6));
  border-top: 1px solid var(--border-steel);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
}

.site-footer__credits {
  font-size: 0.9rem;
  color: var(--text-sub);
  /* クレジット項目が増えたため、制作クレジット／主題歌クレジットの
     2グループを横並びにして縦の伸びを抑える（狭い幅では折り返して縦積み） */
  display: flex;
  flex-wrap: wrap;
  gap: 8px 56px;
  align-items: flex-start;
}

.site-footer__credits-heading {
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
  color: var(--color-cyan);
}

/* 各グループ内は「ラベル列＋名前列」の2列グリッドにして
   ラベル長の違いによる名前の開始位置のガタつきを無くす */
.site-footer__credits-col {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-content: start;
}

.site-footer__credits-col dl {
  display: contents;
}

.site-footer__credits-col dt {
  min-width: 0;
  margin-right: 0;
}

.site-footer__credits-heading {
  grid-column: 1 / -1;
}

.site-footer__credits dt {
  display: inline-block;
  min-width: 6.5em;
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
  color: var(--color-cyan);
  margin-right: 12px;
}

.site-footer__credits dd {
  display: inline;
}

.site-footer__credits dl {
  margin-bottom: 6px;
}

.site-footer__social {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-steel);
  border-radius: 4px;
  color: var(--text-sub);
  transition: all 0.2s ease;
}

.social-link:hover {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
  box-shadow: var(--shadow-cyan);
  transform: translateY(-2px);
}

.social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.site-footer__bottom {
  max-width: var(--max-width);
  margin: 32px auto 0;
  padding: 16px 24px 0;
  border-top: 1px solid var(--border-steel);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-sub);
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
}

.site-footer__bottom a:hover {
  color: var(--color-cyan);
}

/* ============================================
   Ruby (ふりがな)
   ============================================ */
ruby {
  ruby-position: over;
}
rt {
  font-family: var(--font-ui);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-cyan);
  text-shadow: 0 0 4px rgba(0, 229, 255, 0.4);
  line-height: 1.2;
}

/* ============================================
   Typography
   ============================================ */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-main);
  position: relative;
  display: inline-block;
}

.section-title::before {
  content: attr(data-prefix);
  display: block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--color-cyan);
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.section-subtitle {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-sub);
  margin-bottom: 32px;
}

.section {
  padding: 80px 0;
  position: relative;
}

.section--panel {
  background: linear-gradient(180deg, transparent, rgba(13, 18, 32, 0.4), transparent);
}

/* TOP ページのセクション別カラーチント
   上下を transparent にすることでセクション間が自然に黒へ繋がる */
.section--concept {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(12, 24, 48, 0.65) 30%,
    rgba(12, 24, 48, 0.65) 70%,
    transparent 100%);
}

.section--features {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(13, 32, 36, 0.55) 30%,
    rgba(13, 32, 36, 0.55) 70%,
    transparent 100%);
}

.section--news {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(12, 32, 22, 0.55) 30%,
    rgba(12, 32, 22, 0.55) 70%,
    transparent 100%);
}

.section--contact-cta {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(48, 36, 44, 0.35) 30%,
    rgba(48, 36, 44, 0.35) 70%,
    transparent 100%);
}

/* 魔法陣アクセント：中央に薄く配置（カラーチントと一緒に使う） */
.section--has-mandala {
  overflow: hidden;
}

.section__mandala-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* セクション全幅をカバーするので opacity は少し落として圧迫感を抑える */
  opacity: 0.14;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.5px);
}

.section--concept .section__mandala-bg {
  background-image: url('../images/background/xd-haikei-blue-wakunashi.webp');
}

.section--features .section__mandala-bg {
  background-image: url('../images/background/xd-haikei-red-wakunashi.webp');
}

.section--news .section__mandala-bg {
  background-image: url('../images/background/xd-haikei-green-wakunashi.webp');
}

.section--contact-cta .section__mandala-bg {
  background-image: url('../images/background/xd-haikei-gray-wakunashi.webp');
  opacity: 0.13; /* gray は中央が白く明るいので抑えめだが、チント軽量化に合わせて少し可視化 */
}

.section--has-mandala > .container {
  position: relative;
  z-index: 1;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-cyan);
  color: var(--color-cyan);
  background: rgba(0, 229, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.btn:hover {
  background: rgba(0, 229, 255, 0.15);
  box-shadow: var(--shadow-cyan);
  color: var(--text-main);
}

.btn--magenta {
  border-color: var(--color-magenta);
  color: var(--color-magenta);
  background: rgba(255, 43, 214, 0.05);
}

.btn--magenta:hover {
  background: rgba(255, 43, 214, 0.15);
  box-shadow: var(--shadow-magenta);
  color: var(--text-main);
}

.btn--lime {
  border-color: var(--color-lime);
  color: var(--color-lime);
  background: rgba(200, 255, 0, 0.05);
}

.btn--lime:hover {
  background: rgba(200, 255, 0, 0.15);
  box-shadow: var(--shadow-lime);
  color: var(--text-main);
}

.btn--ghost {
  background: transparent;
}

/* ヒーロー専用：背景が派手な場面でも目立つ大きめボタン */
.btn--hero {
  flex-direction: column;
  gap: 2px;
  padding: 14px 24px;
  /* 3 ボタンの横幅を揃える（"DOWNLOAD" を基準に余裕を見て固定幅） */
  width: 190px;
  background: rgba(5, 6, 10, 0.45);
  border-width: 1.5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.btn--hero .btn__main {
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  line-height: 1.1;
}

.btn--hero .btn__sub {
  display: block;
  font-family: var(--font-jp);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: none;
  line-height: 1;
  opacity: 0.85;
}

.btn--hero:hover {
  background: rgba(0, 229, 255, 0.2);
  transform: translateY(-2px);
  box-shadow:
    0 0 24px rgba(0, 229, 255, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.btn--hero.btn--lime:hover {
  background: rgba(200, 255, 0, 0.2);
  box-shadow:
    0 0 24px rgba(200, 255, 0, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.btn--hero.btn--magenta:hover {
  background: rgba(255, 43, 214, 0.2);
  box-shadow:
    0 0 24px rgba(255, 43, 214, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ============================================
   Cards
   ============================================ */
.card {
  background: rgba(13, 18, 32, 0.6);
  border: 1px solid var(--border-steel);
  padding: 28px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  /* 本文の長さが違ってもリンクをカード下端で揃える */
  display: flex;
  flex-direction: column;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-magenta));
  opacity: 0.6;
}

.card:hover {
  border-color: var(--color-cyan);
  box-shadow: var(--shadow-cyan);
  transform: translateY(-4px);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  color: var(--color-cyan);
}

.card__subtitle {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.card__body {
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.7;
}

.card__link {
  display: inline-block;
  /* flex column の中で常に下端へ */
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cyan);
  transition: all 0.2s ease;
}

.card__link::after {
  content: ' →';
  transition: transform 0.2s ease;
  display: inline-block;
}

.card__link:hover::after {
  transform: translateX(4px);
}

/* ============================================
   Hero (TOP)
   ============================================ */
.hero {
  position: relative;
  min-height: calc(100vh * var(--invz));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 24px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/key-visual.webp');
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.1);
  z-index: -3;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.05);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  /* 下半分付近から透明へフェードして、画像下側を広く黒へ溶かす */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* B: 中央のテキスト帯だけ局所的に暗化 → 文字の可読性UP（縦は薄く、横は広く） */
    radial-gradient(ellipse 75% 25% at center, rgba(5, 6, 10, 0.55) 0%, transparent 75%),
    /* 端の vignette（既存） */
    radial-gradient(ellipse at center, transparent 0%, rgba(5, 6, 10, 0.85) 100%),
    /* ベースの上下グラデ（既存） */
    linear-gradient(180deg, rgba(5, 6, 10, 0.4), rgba(5, 6, 10, 0.7));
  z-index: -2;
}

.hero__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: brightness(0.55) saturate(1.1);
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.05);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  /* 下半分付近から透明へフェードして、画像下側を広く黒へ溶かす */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

.hero__layer--dragon {
  background-image: url('../images/key-visual/keyvisual-chara-dragon.webp');
  z-index: -1;
  /* キャラ層と同じ明るさ・彩度・グローでドラゴンも前景として見せる */
  filter:
    brightness(0.78)
    saturate(1.22)
    drop-shadow(0 0 8px rgba(0, 229, 255, 0.2));
  /* シルエット → 通常配色の reveal アニメ（奥のドラゴンが先） */
  animation: hero-mid-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.hero__layer--char {
  background-image: url('../images/key-visual/keyvisual-charaonly.webp');
  z-index: 0;
  /* キャラはフォーカルポイント。背景より明るくしつつ、明るすぎない中間値 */
  filter:
    brightness(0.78)
    saturate(1.22)
    drop-shadow(0 0 8px rgba(0, 229, 255, 0.2));
  /* シルエット → 通常配色の reveal アニメ（手前のキャラはドラゴンの後） */
  animation: hero-mid-reveal 2.0s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

/* HERO 開始時の reveal: ドラゴン / キャラだけシルエット → 通常配色 */
@keyframes hero-mid-reveal {
  0%, 30% {
    filter: brightness(0) saturate(0);
  }
  100% {
    filter:
      brightness(0.78)
      saturate(1.22)
      drop-shadow(0 0 8px rgba(0, 229, 255, 0.2));
  }
}

.hero__inner {
  max-width: 900px;
  text-align: center;
  position: relative;
  z-index: 1;
  /* ロゴを画面中央付近に寄せたいので inner を下方向にシフト
     （ボタン下端が viewport を突き抜けない範囲で最大限下に） */
  margin-top: 0;
  transform: translateY(calc(12vh * var(--invz)));
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero__layer {
    transition: none;
    transform: translate3d(0, 0, 0) scale(1.05) !important;
    /* reveal アニメも無効化（最終配色をそのまま表示） */
    animation: none !important;
  }
}

.hero__logo {
  /* 画面幅に連動して縮小（中間幅でキャラクターの顔に被らないよう 34vw の単一カーブ。
     ワイド画面では width:80%（親要素幅）が実質の上限になる） */
  max-width: clamp(280px, 34vw, 600px);
  width: 80%;
  margin: 0 auto 4px;
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.4));
}

/* 中間幅（タブレット〜小型PC）: キービジュアルの顔が大きく写る帯域なので、
   ヒーロー内容を下へ寄せて顔との重なりを避ける */
@media (max-width: 1100px) and (min-width: 641px) {
  .hero__inner {
    transform: translateY(15vh);
  }
}

/* 固定幅190px×3のボタンが収まらない狭い帯域はコンパクト化して折り返しを防ぐ
   （折り返すと縦に伸びてロゴが顔へ押し上げられるため） */
@media (max-width: 760px) and (min-width: 641px) {
  .hero__actions {
    gap: 10px;
  }

  .btn--hero {
    width: 160px;
    padding: 12px 14px;
  }

  .btn--hero .btn__main {
    font-size: 0.95rem;
  }
}

.hero__catch {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  letter-spacing: 0.15em;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--color-cyan);
  /* A: 既存のシアン微光に加え、明るい画像上での可読性のため強めの暗色シャドウ */
  text-shadow:
    0 0 12px rgba(0, 229, 255, 0.5),
    0 0 24px rgba(0, 229, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 0.95);
}

/* キャッチ本文のルビ（ネガイ / ドロー）は白で可読性確保 */
.hero__catch ruby rt {
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.9);
}

/* HERO: ルール製作クレジット（平野累次先生） */
.hero__credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* 上側は lead と RULE BY バッジの距離を確保、下側は credit::after 線＋名前の直下なので最小化 */
  margin: 24px auto 4px;
  padding: 8px 8px 4px;
  position: relative;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.8);
}

/* 上下の細い水平ライン（中央から左右へフェード） */
.hero__credit::before,
.hero__credit::after {
  content: "";
  display: block;
  width: min(380px, 80%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.55) 50%,
    transparent 100%
  );
}
.hero__credit::before { margin-bottom: 2px; }
.hero__credit::after  { margin-top:    2px; }

.hero__credit-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* letter-spacingで右にズレるぶんを補正 */
  color: var(--color-cyan);
  font-weight: 700;
  /* ラインの上にバッジ風に被せる */
  position: absolute;
  top: -0.55em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
  background: rgba(5, 6, 10, 0.85);
  line-height: 1.2;
}

.hero__credit-work {
  font-family: var(--font-jp, "Noto Sans JP", sans-serif);
  font-size: clamp(0.88rem, 1.15vw, 1rem);
  color: #f1f5ff;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.hero__credit-work ruby rt {
  color: rgba(0, 229, 255, 0.85);
  font-size: 0.55em;
  letter-spacing: 0.05em;
}

.hero__credit-name {
  font-family: var(--font-jp, "Noto Sans JP", sans-serif);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  color: var(--color-cyan);
  letter-spacing: 0.08em;
  font-weight: 700;
}

.hero__credit-org {
  color: rgba(241, 245, 255, 0.75);
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 0.25em;
}

/* PC: RULE BY クレジットを中央の文章ブロックから出し、HERO 右側に表示。
   配置基準は中央寄せカラム（transform を持つ祖先 hero__inner＝縦中央+12vhシフト）になるため、
   calc で画面右端・上端基準に換算して置く。
   max-width は中央のリード文と重ならない範囲に制限（狭いPC幅では折り返す） */
@media (min-width: 1101px) {
  .hero__credit {
    position: absolute;
    right: calc(50% - 50vw * var(--invz) + clamp(64px, 8vw, 160px));
    /* キャッチコピー「欲望を引き寄せよ」ブロックの横（同じ高さ）に並べる。
       50% ≒ 中央カラム内でキャッチコピーが始まる高さ */
    top: calc(50% + 14px);
    margin: 0;
    padding: 22px 48px 14px;
    align-items: flex-end;
    text-align: right;
    max-width: min(580px, calc(50vw * var(--invz) - 300px));
    /* 中央のキャッチコピーと同じ「溶け込み」処理：
       横は bg グラデで左右フェード、上下はマスクでフェード */
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(5, 6, 10, 0.55) 25%,
      rgba(5, 6, 10, 0.55) 75%,
      transparent 100%
    );
    -webkit-mask-image: radial-gradient(ellipse 100% 110% at center, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 100% 110% at center, #000 55%, transparent 100%);
  }

  .hero__credit::before,
  .hero__credit::after {
    width: 100%;
  }

  /* バッジがボックス上端の外に出るとマスクで切れるため、内側に収めて線上に重ねる */
  .hero__credit-label {
    top: 14px;
    font-size: 0.85rem;
  }

  .hero__credit-name {
    font-size: clamp(0.95rem, 1.2vw, 1.25rem);
  }
}

.hero__lead {
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  color: var(--text-main);
  margin-bottom: 32px;
  line-height: 1.7;
  /* A: 明るい画像上での可読性のため暗色シャドウ */
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.7);
}

/* PC: キャッチ＋本文の背景を画像に「溶け込ませる」ぼかしレイヤー
   ボーダー・ドロップシャドウは付けず、ガラスというより
   「カメラがその範囲にピントを当ててぼかしてる」感じに */
@media (min-width: 641px) {
  .hero__copy {
    display: inline-block;
    /* 上側はロゴと catch を近づけたい、下側は credit の下辺と密着させたいので両方圧縮 */
    padding: 10px 48px;
    margin-bottom: 16px;
    /* 中央が濃く、端に向けて薄くなる楕円グラデ：矩形感を減らす */
    /* 横方向のグラデ：左右の端が完全透明、中央付近が半透明の暗色 */
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(5, 6, 10, 0.55) 25%,
      rgba(5, 6, 10, 0.55) 75%,
      transparent 100%
    );
    /* マスクで上下のエッジも自然に溶かす（横方向は bg が既にフェード済） */
    -webkit-mask-image: radial-gradient(ellipse 100% 110% at center, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 100% 110% at center, #000 55%, transparent 100%);
  }

  /* パネル内側では lead の下マージンを削除（パネル自身が margin-bottom を持つ） */
  .hero__copy .hero__lead {
    margin-bottom: 0;
  }
}

.hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Feature Grid
   ============================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

/* ============================================
   Concept: 右側の空白に斜めカード裏面を装飾配置
   ============================================ */
/* img タグセレクタで .fade-in より優先度を上げて transform を制御 */
img.concept-card-deco {
  position: absolute;
  top: 90px;
  /* やや左にずらして Xseed を右手前に重ねる余地を作る */
  right: 9%;
  /* prose の縦範囲に収まるサイズに */
  width: clamp(150px, 14vw, 210px);
  height: auto;
  /* .fade-in の transform を上書きしながら回転を併合 */
  transform: translateY(20px) rotate(-13deg);
  filter:
    drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 24px rgba(0, 229, 255, 0.3));
  pointer-events: none;
  z-index: 0;
}

img.concept-card-deco.is-visible {
  transform: translateY(0) rotate(-13deg);
}

/* Xseed をカード裏面の右手前（右下寄り）に重ねて配置 */
img.concept-xseed-deco {
  position: absolute;
  top: 110px;
  right: -2%;
  width: clamp(220px, 20vw, 310px);
  height: auto;
  transform: translateY(20px) rotate(8deg);
  filter:
    drop-shadow(0 16px 32px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 24px rgba(0, 229, 255, 0.45));
  pointer-events: none;
  z-index: 1; /* カード裏面より前面 */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

img.concept-xseed-deco.is-visible {
  transform: translateY(0) rotate(8deg);
}

@media (max-width: 1024px) {
  img.concept-card-deco {
    width: clamp(130px, 16vw, 180px);
    right: 8%;
    top: 80px;
  }
  img.concept-xseed-deco {
    width: clamp(180px, 22vw, 260px);
    top: 95px;
    right: -1%;
  }
}

@media (max-width: 768px) {
  /* モバイル / 狭いタブレットでは prose と重なるので非表示 */
  .concept-card-deco,
  .concept-xseed-deco {
    display: none;
  }
}

/* ============================================
   Features: 右上の空きスペースに 4 枚の Xseed カードを
   同一角度で横並び配置（扇形に手札を広げたような構図）
   ============================================ */
.features-cards-deco {
  position: absolute;
  /* セクション上端〜feature-grid 上端の中間に来るよう padding 内まで押し上げる */
  top: -55px;
  right: 20px;
  width: 540px;
  height: 200px;
  pointer-events: none;
  z-index: 0;
}

img.features-card {
  position: absolute;
  top: 0;
  width: clamp(100px, 9vw, 130px);
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 16px rgba(0, 229, 255, 0.18));
  pointer-events: none;
  /* 4 枚とも同じ角度に統一 */
  transform: rotate(-12deg);
}

/* 横方向に間隔を広げて並べる（カード幅 130 ＋ 余白 ≒ 120px 刻み） */
img.features-card--1 { right: 0;    z-index: 4; }
img.features-card--2 { right: 120px; z-index: 3; }
img.features-card--3 { right: 240px; z-index: 2; }
img.features-card--4 { right: 360px; z-index: 1; }

@media (max-width: 1100px) {
  /* 狭い画面では小さく＆間隔も詰める */
  .features-cards-deco {
    width: 460px;
  }
  img.features-card {
    width: clamp(80px, 10vw, 110px);
  }
  img.features-card--2 { right: 100px; }
  img.features-card--3 { right: 200px; }
  img.features-card--4 { right: 300px; }
}

@media (max-width: 768px) {
  .features-cards-deco {
    display: none;
  }
}

/* ============================================
   News: 右上の空きスペースに Clan カードイラストを横並び配置
   （回転なし、サイズ大きめ）
   ============================================ */
/* このセクションだけは clan カードを上部へ突き出させるため overflow を許可 */
.section.section--news {
  overflow: visible;
}

.news-clans-deco {
  position: absolute;
  /* セクション上端〜news-list 上端の中間に来るように上下バランス */
  top: -75px;
  right: 20px;
  width: 640px;
  height: 220px;
  pointer-events: none;
  z-index: 0;
}

img.news-clan {
  position: absolute;
  top: 0;
  /* news-list と重ならず、上もはみ出さない高さで収まるサイズに */
  width: clamp(130px, 12vw, 170px);
  height: auto;
  filter:
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px rgba(0, 229, 255, 0.18));
  pointer-events: none;
  opacity: 0.9;
  /* 回転なし、水平に並べる */
}

/* 横方向に均等に並べる */
img.news-clan--1 { right: 0;    z-index: 4; }
img.news-clan--2 { right: 150px; z-index: 3; }
img.news-clan--3 { right: 300px; z-index: 2; }
img.news-clan--4 { right: 450px; z-index: 1; }

@media (max-width: 1100px) {
  .news-clans-deco {
    width: 520px;
  }
  img.news-clan {
    width: clamp(105px, 12vw, 145px);
  }
  img.news-clan--2 { right: 125px; }
  img.news-clan--3 { right: 250px; }
  img.news-clan--4 { right: 375px; }
}

@media (max-width: 768px) {
  .news-clans-deco {
    display: none;
  }
}

/* ============================================
   Concept: Sample Character × Xavior ペア配置
   キャラを前、Xavior を後ろにずらして配置
   ============================================ */
.concept-pairs {
  margin-top: 64px;
  text-align: center;
}

.concept-pairs__caption {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
  margin-bottom: 12px;
}

.concept-pairs__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  color: var(--text-main);
}

.concept-pairs__sub {
  font-size: 0.95rem;
  color: var(--text-main);
  max-width: 720px;
  margin: 0 auto 16px;
}

.concept-pairs__list {
  display: grid;
  /* PC: 上段3組・下段2組（中央寄せ）にして1組あたりを大きく表示する。
     行間はラベル（bottom:-36px）のぶん広めに確保 */
  grid-template-columns: repeat(6, 1fr);
  gap: 72px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.cx-pair {
  position: relative;
  grid-column: span 2;
}

.cx-pair:nth-child(4) { grid-column: 2 / span 2; }
.cx-pair:nth-child(5) { grid-column: 4 / span 2; }

/* 画像エリア（ジッターはここに適用、名前ラベルは外側で水平揃え） */
.cx-pair__art {
  position: relative;
  width: 100%;
  /* 縦比を詰めて、画像上部の空白を減らす */
  aspect-ratio: 0.78 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cx-pair__art {
  cursor: zoom-in;
}

.cx-pair__xavior {
  position: absolute;
  /* サイズはそのまま、位置だけ右上にしっかり寄せる */
  top: -18%;
  right: -22%;
  width: 105%;
  height: auto;
  z-index: 1;
  /* 後ろの存在なのでわずかに彩度・明度を落とす */
  opacity: 0.9;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
  transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

.cx-pair__character {
  position: relative;
  bottom: 0;
  /* キャラはやや左下にずらして前面 */
  margin-right: 18%;
  width: 78%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
  transition: transform 0.35s ease, filter 0.35s ease;
}

.cx-pair__name {
  position: absolute;
  bottom: -36px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-jp);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  z-index: 3;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cx-pair__chara-label {
  font-family: var(--font-ui);
  letter-spacing: 0.15em;
  color: var(--text-sub);
}

.cx-pair__sep {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin: 0 2px;
}

.cx-pair__xav-label {
  color: var(--color-cyan);
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

.cx-pair:hover .cx-pair__character {
  filter:
    drop-shadow(0 0 14px rgba(0, 229, 255, 0.4))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
}

.cx-pair:hover .cx-pair__xavior {
  opacity: 1;
  filter:
    drop-shadow(0 0 14px rgba(255, 43, 214, 0.35))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

/* 画像エリアだけにジッターを適用（名前ラインは水平揃え） */
.cx-pair:nth-child(1) .cx-pair__art { transform: translateY(6px); }
.cx-pair:nth-child(2) .cx-pair__art { transform: translateY(-4px); }
.cx-pair:nth-child(3) .cx-pair__art { transform: translateY(8px); }
.cx-pair:nth-child(4) .cx-pair__art { transform: translateY(-2px); }
.cx-pair:nth-child(5) .cx-pair__art { transform: translateY(10px); }

.cx-pair:nth-child(1):hover .cx-pair__art { transform: translateY(0); }
.cx-pair:nth-child(2):hover .cx-pair__art { transform: translateY(-10px); }
.cx-pair:nth-child(3):hover .cx-pair__art { transform: translateY(2px); }
.cx-pair:nth-child(4):hover .cx-pair__art { transform: translateY(-8px); }
.cx-pair:nth-child(5):hover .cx-pair__art { transform: translateY(4px); }

/* ============================================
   News
   ============================================ */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* 背景の魔法陣に埋もれないよう、白系の半透明＋微 cyan グローで見せる */
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 -1px 0 rgba(0, 229, 255, 0.12);
}

.news-item {
  display: grid;
  grid-template-columns: 130px 140px 1fr;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 0 rgba(0, 229, 255, 0.12);
  align-items: baseline;
  transition: background 0.2s ease;
}

.news-item:hover {
  background: rgba(0, 229, 255, 0.03);
}

.news-item__date {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--color-cyan);
}

.news-item__tag {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border-steel);
  color: var(--text-sub);
  width: fit-content;
}

.news-item__tag--info { color: var(--color-cyan); border-color: var(--color-cyan); }
.news-item__tag--update { color: var(--color-lime); border-color: var(--color-lime); }
.news-item__tag--event { color: var(--color-magenta); border-color: var(--color-magenta); }

.news-item__title {
  font-size: 1rem;
  color: var(--text-main);
}

/* ============================================
   Page Header (sub pages)
   ============================================ */
.page-header {
  padding: 100px 0 60px;
  border-bottom: 1px solid var(--border-steel);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-header > .container {
  position: relative;
  z-index: 2;
}

/* 魔法陣風の背景（ページ全面に cover で配置） */
.page-header__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -2;
  opacity: 0.55;
  /* 画像のシャープなエッジを少し馴染ませる */
  filter: blur(1px) saturate(1.05);
}

/* ダークビネット: 画像の矩形感を消し、文字の可読性を確保する暗色オーバーレイ */
.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 95% at center, transparent 0%, rgba(5, 6, 10, 0.5) 55%, rgba(5, 6, 10, 0.95) 100%),
    linear-gradient(180deg, rgba(5, 6, 10, 0.35) 0%, rgba(5, 6, 10, 0.15) 50%, rgba(5, 6, 10, 0.55) 100%);
  pointer-events: none;
  z-index: -1;
}

.page-header--blue .page-header__bg {
  background-image: url('../images/background/xd-haikei-blue-wakunashi.webp');
}

.page-header--green .page-header__bg {
  background-image: url('../images/background/xd-haikei-green-wakunashi.webp');
}

.page-header--gray .page-header__bg {
  background-image: url('../images/background/xd-haikei-gray-wakunashi.webp');
  opacity: 0.4; /* gray は明るすぎるので少し落とす */
}

.page-header--red .page-header__bg {
  background-image: url('../images/background/xd-haikei-red-wakunashi.webp');
}

@media (max-width: 640px) {
  /* モバイルでは画像を控えめに */
  .page-header__bg {
    opacity: 0.4;
  }
  .page-header--gray .page-header__bg {
    opacity: 0.28;
  }
}

.page-header__prefix {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
  margin-bottom: 12px;
}

.page-header__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-header__lead {
  margin-top: 16px;
  font-size: 1.05rem;
  color: var(--text-main);
  max-width: 720px;
}

/* ============================================
   Content prose (rules, world etc.)
   ============================================ */
.prose {
  /* パディング込みで本文幅 820px を維持（縮めるとフェイズフローが折り返すため） */
  max-width: 884px;
  padding: 28px 32px;
  /* B: 真っ黒より一段明るい下地パネルで紙面領域を作り、コントラストを和らげる */
  background: rgba(13, 18, 32, 0.4);
  border: 1px solid rgba(28, 42, 74, 0.6);
  border-radius: 8px;
  /* A: 長文の本文色は純白に近い色から柔らかいブルーグレーへ（ハレーション軽減、WCAG AAA 維持） */
  color: #c3cddd;
}

/* C: 本文中の太字強調も純白から一段抑える */
.prose strong {
  color: #dde4f0;
}

@media (max-width: 640px) {
  .prose {
    padding: 20px 16px;
  }
}

/* ============================================
   ページ内目次（RULES / WORLD）
   ============================================ */

/* 2カラムレイアウト: 左に目次、右に本文 */
.page-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.page-toc {
  position: sticky;
  top: 96px;
}

.page-toc__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--text-sub);
  margin-bottom: 14px;
}

.page-toc__list {
  display: flex;
  flex-direction: column;
}

.page-toc__link {
  display: block;
  padding: 7px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-sub);
  border-left: 2px solid var(--border-steel);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.page-toc__link:hover {
  color: var(--color-cyan);
  border-left-color: rgba(0, 229, 255, 0.5);
}

.page-toc__link.is-active {
  color: var(--color-cyan);
  border-left-color: var(--color-cyan);
  background: rgba(0, 229, 255, 0.05);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

/* アンカー着地時に固定ヘッダーへ潜り込まないようオフセット */
.prose h3[id],
.prose p[id] {
  scroll-margin-top: 90px;
}

/* 本文内リンク */
.prose a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: text-shadow 0.15s ease;
}

.prose a:hover {
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

/* 改行禁止ユーティリティ（固有名詞などの途中改行防止） */
.u-nowrap {
  white-space: nowrap;
}

/* サンプルコネクターのキャラクターカード */
.connector-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--border-steel);
  background: rgba(13, 18, 32, 0.5);
  padding: 16px 20px;
  margin: 14px 0;
}

/* 枠は左列の高さいっぱいに広げ、キャラクターを上下中央に置く
   （本文が長いカードで画像下に空白が残らないように）
   拡大の当たり判定も枠全体に合わせる */
.connector-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-steel);
  border-radius: 4px;
  background: rgba(0, 229, 255, 0.03);
  cursor: zoom-in;
}

.connector-card__media img {
  width: 100%;
  height: auto;
}

.connector-card__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.connector-card__bg {
  margin-bottom: 12px;
}

.connector-card__fields {
  border-top: 1px dashed var(--border-steel);
  padding-top: 10px;
  margin-bottom: 0;
  font-size: 0.92rem;
}

.connector-card__key {
  color: var(--color-cyan);
}

@media (max-width: 640px) {
  .connector-card {
    grid-template-columns: 1fr;
  }

  .connector-card__media img {
    max-width: 200px;
    display: block;
    margin: 0 auto;
  }
}

/* 選択肢リスト（「以下のうち1つを選ぶ」系） */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 28px;
}

.choice-list li {
  position: relative;
  padding: 12px 18px 12px 44px;
  border: 1px solid var(--border-steel);
  border-left: 2px solid var(--color-cyan);
  background: rgba(13, 18, 32, 0.6);
  line-height: 1.8;
}

.choice-list li::before {
  content: '◆';
  position: absolute;
  left: 17px;
  top: 13px;
  color: var(--color-cyan);
  font-size: 0.8rem;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

.choice-list .choice-note {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255, 43, 214, 0.08);
  border-left: 3px solid var(--color-magenta);
  color: #f0d9ec;
  font-size: 0.92em;
}

/* クラン一覧のチップ表示（エンドフェイズ） */
.clan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 28px;
}

.clan-chips li {
  display: inline-block;
  padding: 6px 20px;
  border: 1px solid var(--border-steel);
  border-left: 2px solid var(--color-cyan);
  background: rgba(13, 18, 32, 0.8);
  color: var(--text-main);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* 属性カラー（勇=赤系 / 智=青系 / 縁=緑系） */
.attr-yu {
  color: #ff6b6b;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 107, 107, 0.35);
}

.attr-chi {
  color: #5aa9ff;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(90, 169, 255, 0.35);
}

.attr-en {
  color: #57d96f;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(87, 217, 111, 0.35);
}

/* ルール内テーブル（早見表・一覧表） */
.rule-table-wrap {
  overflow-x: auto;
  margin: 16px 0 28px;
}

.rule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.7;
}

.rule-table th,
.rule-table td {
  border: 1px solid var(--border-steel);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.rule-table thead th {
  background: rgba(0, 229, 255, 0.08);
  color: var(--color-cyan);
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.rule-table tbody th {
  background: rgba(13, 18, 32, 0.8);
  font-weight: 600;
  white-space: nowrap;
}

.rule-table tbody tr:nth-child(even) {
  background: rgba(13, 18, 32, 0.5);
}

@media (max-width: 640px) {
  /* モバイル: 表の最小幅は指定しない。
     収まる表はそのまま表示され、列数が多く収まらない表（クラックス等）は
     コンテンツの最小幅により自動的に .rule-table-wrap 内で横スクロールになる */

  /* 長文セルを持つ表は縦積み（名前見出し＋本文）に変換して読みやすく */

  .rule-table--stack thead {
    display: none;
  }

  .rule-table--stack tbody tr {
    display: block;
    border: 1px solid var(--border-steel);
    margin-bottom: 10px;
  }

  .rule-table--stack tbody th,
  .rule-table--stack tbody td {
    display: block;
    width: 100%;
    border: none;
    white-space: normal;
  }

  .rule-table--stack tbody th {
    border-bottom: 1px solid var(--border-steel);
  }
}

/* フィールド配置図などの説明図 */
.field-figure {
  margin: 20px 0 28px;
  text-align: center;
}

.field-figure img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.45));
}

/* サンプルセイヴァーカードのギャラリー（RULES ページ）: PCでは5枚一列 */
.savior-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 20px 0 28px;
}

.savior-cards img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-steel);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: zoom-in;
}

@media (max-width: 640px) {
  /* モバイルでは5枚一列だと小さすぎるため折り返す */
  .savior-cards {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* アバター「見る」ボタン */
.avatar-view {
  display: inline-block;
  padding: 4px 16px;
  font-size: 0.85rem;
  color: var(--color-cyan);
  border: 1px solid var(--color-cyan);
  border-radius: 4px;
  background: rgba(0, 229, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.avatar-view:hover {
  background: rgba(0, 229, 255, 0.15);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

/* 画像モーダル（アバター・カード画像の拡大表示） */
.img-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
}

.img-modal.is-open {
  display: flex;
}

.img-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  cursor: pointer;
}

.img-modal__body {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: calc(90vw * var(--invz));
}

.img-modal__img {
  max-width: calc(90vw * var(--invz));
  max-height: calc(80vh * var(--invz));
  width: auto;
  height: auto;
  border: 1px solid var(--border-steel);
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(0, 229, 255, 0.15);
}

.img-modal__caption {
  margin-top: 10px;
  color: var(--text-main);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* デザイアカードの例示（通常／ハンドアウトを2枚並べてラベル付きで見せる） */
.desire-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
}

.desire-examples figure {
  margin: 0;
  text-align: center;
}

.desire-examples img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: zoom-in;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

.desire-examples figcaption {
  margin-top: 8px;
  font-family: var(--font-jp);
  font-size: 0.85rem;
  color: var(--color-cyan);
  letter-spacing: 0.05em;
}

/* ペア拡大（TOPのキャラ＋セイヴァーを横並びで両方表示） */
.img-modal__imgs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.img-modal__imgs .img-modal__img {
  max-width: calc(44vw * var(--invz));
}

.img-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 12, 20, 0.95);
  border: 1px solid var(--color-cyan);
  color: var(--color-cyan);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

/* ===== 用語ポップアップ（term-popup.js） =====
   カード名・デザイアコード名にホバーでカード画像／効果テキストを表示。
   点線下線で「ポップアップあり」を通常リンクと区別する */
.term-link {
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
}

.term-pop {
  position: fixed;
  z-index: 1500; /* 画像モーダル(1400)含む全オーバーレイより前面 */
  pointer-events: none; /* ホバー判定を奪ってチラつかないように */
  opacity: 0;
  transition: opacity 0.12s ease;
  background: rgba(10, 16, 26, 0.97);
  border: 1px solid rgba(0, 229, 255, 0.55);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 229, 255, 0.15);
}

.term-pop.is-show {
  opacity: 1;
}

.term-pop--img {
  padding: 6px;
}

.term-pop--img img {
  display: block;
  width: 230px;
  height: auto;
  border-radius: 2px;
}

.term-pop--text {
  max-width: 340px;
  padding: 12px 14px;
}

.term-pop__title {
  color: var(--color-cyan);
  font-family: var(--font-jp);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.term-pop__body {
  color: var(--text-main);
  font-family: var(--font-jp);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* ===== モバイル目次: 右下ボタン＋ボトムシート ===== */
.toc-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(10, 12, 20, 0.92);
  border: 1px solid var(--color-cyan);
  color: var(--color-cyan);
  font-family: var(--font-jp);
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.toc-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.toc-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  max-height: calc(70vh * var(--invz));
  overflow-y: auto;
  background: rgba(10, 12, 20, 0.97);
  border-top: 1px solid var(--color-cyan);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 229, 255, 0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding: 18px 24px calc(24px + env(safe-area-inset-bottom));
}

body.toc-open .toc-sheet {
  transform: translateY(0);
}

body.toc-open .toc-sheet-overlay {
  opacity: 1;
  visibility: visible;
}

.toc-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.toc-sheet__title {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--text-sub);
}

.toc-sheet__close {
  width: 40px;
  height: 40px;
  color: var(--text-sub);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.toc-sheet__list a {
  display: block;
  padding: 13px 8px;
  font-size: 0.95rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-steel);
  transition: color 0.15s ease;
}

.toc-sheet__list li:last-child a {
  border-bottom: none;
}

.toc-sheet__list a:active,
.toc-sheet__list a:hover {
  color: var(--color-cyan);
}

/* 1024px未満: 左目次を消して、ボトムシート方式へ切り替え */
@media (max-width: 1023px) {
  .page-layout {
    display: block;
  }

  .page-toc {
    display: none;
  }

  .toc-fab {
    display: inline-flex;
  }
}

.prose h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-cyan);
  margin: 48px 0 16px;
  padding-left: 16px;
  border-left: 3px solid var(--color-cyan);
}

.prose h4 {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-magenta);
  margin: 32px 0 12px;
}

.prose p {
  margin-bottom: 1.2em;
  line-height: 1.85;
  /* 色は .prose から継承（読書モードの切り替えを段落にも効かせるため、ここでは指定しない） */
}

.prose ul, .prose ol {
  margin: 0 0 1.4em 1.2em;
  list-style: disc;
}

.prose ol { list-style: decimal; }

.prose ul li, .prose ol li {
  margin-bottom: 0.4em;
  line-height: 1.8;
}

.prose ul li::marker { color: var(--color-cyan); }
.prose ol li::marker { color: var(--color-cyan); }

/* チップ・選択肢・フロー等のカスタムリストは .prose ul/ol のマーカーを使わない */
.prose .clan-chips,
.prose .choice-list,
.prose .flow-steps,
.prose .priority-list {
  list-style: none;
  margin-left: 0;
}

.prose .clan-chips li::marker,
.prose .choice-list li::marker,
.prose .flow-steps li::marker,
.prose .priority-list li::marker {
  content: '';
}

.prose .clan-chips li,
.prose .choice-list li,
.prose .flow-steps li,
.prose .priority-list li {
  margin-bottom: 0;
}

/* ルール内 小見出し（・付きラベルの見出し化） */
.prose h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-cyan);
  letter-spacing: 0.06em;
  margin: 1.8em 0 0.6em;
  padding-left: 10px;
  border-left: 2px solid rgba(0, 229, 255, 0.55);
}

/* 手順ステップ見出し（番号バッジ付き） */
.prose h5.step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2em 0 0.6em;
  padding-left: 0;
  border-left: none;
  color: var(--text-main);
}

.prose .step .step-num,
.prose .connector-card__name .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--color-cyan);
  background: rgba(0, 229, 255, 0.08);
  color: var(--color-cyan);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* 入れ子の手順（手順の中の下位手順）: インデント＋ガイド線＋控えめなバッジ */
.sub-steps {
  margin: 0.8em 0 1.6em 14px;
  padding-left: 20px;
  border-left: 1px solid var(--border-steel);
}

.prose .sub-steps h5.step {
  font-size: 0.95rem;
  margin: 1.4em 0 0.5em;
}

.prose .sub-steps h5.step:first-child {
  margin-top: 0;
}

.prose .sub-steps .step-num {
  min-width: 22px;
  height: 22px;
  font-size: 0.8rem;
  border-color: var(--border-steel);
  background: rgba(139, 155, 184, 0.1);
  color: var(--text-sub);
}

.prose .sub-steps p:last-child {
  margin-bottom: 0;
}

/* フェイズ進行などのフロー表示（5項目が本文幅に一列で収まるコンパクト設計） */
.flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 16px 0 24px;
}

.flow-steps li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.flow-steps li + li::before {
  content: '▶';
  color: var(--color-cyan);
  font-size: 0.55rem;
  opacity: 0.7;
}

.flow-steps a,
.flow-steps .flow-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--border-steel);
  border-left: 2px solid var(--color-cyan);
  background: rgba(13, 18, 32, 0.7);
  font-size: 0.85rem;
  white-space: nowrap;
}

.prose .flow-steps a {
  color: var(--text-main);
  text-decoration: none;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.prose .flow-steps a:hover {
  color: var(--color-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

.flow-steps .flow-num {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-cyan);
}

/* 項目名が長く1列に収まらないフローは、画面幅に関係なく常に縦のステップ表示 */
.flow-steps--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.flow-steps--vertical li {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.flow-steps--vertical li + li::before {
  content: '▼';
  align-self: center;
  font-size: 0.6rem;
}

.flow-steps--vertical a,
.flow-steps--vertical .flow-item {
  width: 100%;
  justify-content: flex-start;
}

/* モバイル: 横並びだと矢印が行頭に取り残されて崩れるため、縦のステップフローに切り替え */
@media (max-width: 640px) {
  .flow-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .flow-steps li {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .flow-steps li + li::before {
    content: '▼';
    align-self: center;
    font-size: 0.6rem;
  }

  .flow-steps a,
  .flow-steps .flow-item {
    width: 100%;
    justify-content: flex-start;
  }
}

/* クエスト例パネル */
.quest-panel {
  border: 1px solid var(--border-steel);
  background: rgba(13, 18, 32, 0.5);
  padding: 18px 22px;
  margin: 16px 0 24px;
}

.quest-panel__head {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--color-magenta);
  margin-bottom: 12px;
}

.quest-panel__label {
  color: var(--color-cyan);
  font-weight: 700;
  margin: 12px 0 4px;
}

.quest-panel .rule-table-wrap {
  margin: 14px 0 0;
}

/* 例示ボックス */
.example-box {
  border: 1px solid var(--border-steel);
  border-left: 3px solid var(--color-lime);
  background: rgba(200, 255, 0, 0.04);
  padding: 14px 18px;
  margin: 14px 0 20px;
}

.example-box__label {
  font-weight: 700;
  color: var(--color-lime);
  margin-bottom: 6px;
}

/* ※注記: プレイ上の注意書きとして目立たせる */
.rule-note {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255, 43, 214, 0.08);
  border-left: 3px solid var(--color-magenta);
  color: #f0d9ec;
  font-size: 0.92em;
}

/* 番号付き選択肢（番号は原文のまま表示するため ◆ マーカーなし） */
.choice-list--num li {
  padding-left: 18px;
}

.choice-list--num li::before {
  content: none;
}

/* 優先順位リスト */
.priority-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 24px;
  counter-reset: prio;
}

.priority-list li {
  counter-increment: prio;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border: 1px solid var(--border-steel);
  background: rgba(13, 18, 32, 0.7);
  white-space: nowrap;
}

.priority-list li::before {
  content: counter(prio);
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-cyan);
}

/* モバイル: 幅の違うチップが不揃いに折り返すため、縦一列に統一 */
@media (max-width: 640px) {
  .priority-list {
    flex-direction: column;
    align-items: stretch;
  }

  .priority-list li {
    display: flex;
    width: 100%;
  }
}

/* ============================================
   ページ右側の背景アート（RULES / WORLD 共通）
   固定表示でスクロールに追従。左方向へフェードして本文を邪魔しない。
   ============================================ */
.page-bg-art {
  position: fixed;
  top: 0;
  right: 0;
  height: calc(100vh * var(--invz));
  width: clamp(360px, 36vw, 640px);
  background-size: cover;
  background-position: top right;
  opacity: 0.3;
  pointer-events: none;
  /* main(z-index:2) の下、bodyの回路パターン(z-index:0) の上 */
  z-index: 1;
  /* 左へ向かって自然に消えるフェード */
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 100%);
          mask-image: linear-gradient(to left, #000 35%, transparent 100%);
}

/* WORLD: バレットフェンリル */
.page-bg-art--fenrir {
  background-image: url('../images/background/xd-ex-16-barettofenriru_back.webp');
}

/* DOWNLOAD: スターゲイザー・ドラゴン */
.page-bg-art--stargazer {
  background-image: url('../images/background/xd-ex-14-sutageizadoragon_haikei.webp');
}

/* RULES: 炎龍獅子ライオフィニッシャー */
.page-bg-art--lioh {
  background-image: url('../images/background/xd-ex-13-enryuusisi_haikei.webp');
}

/* CONTACT: クリティカル */
.page-bg-art--critical {
  background-image: url('../images/background/xd-3-normal-30-critical_haikei.webp');
}

/* 右側に余白がない狭い画面では、本文の後ろの透かしとして薄く表示
   （不透明度を下げ、フェードを広げて可読性を確保） */
@media (max-width: 1279px) {
  .page-bg-art {
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
            mask-image: linear-gradient(to left, #000 45%, transparent 100%);
  }
}

/* ============================================
   読書モード（明るい背景）切り替え
   body.reading-light で本文エリアをライト配色にする。
   ヘッダー・フッター・page-header はダークのまま維持。
   ============================================ */

/* 切り替えボタン（RULES / WORLD の左下固定）
   ダーク背景でも見つけられるよう、モバイル目次ボタンと同じシアンアクセント */
.reading-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-cyan);
  background: rgba(10, 12, 20, 0.92);
  color: var(--color-cyan);
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.reading-light .reading-toggle {
  background: #e1eaf2;
  color: #2e3c50;
  border-color: #9fb4c6;
  box-shadow: 0 4px 16px rgba(30, 40, 60, 0.2);
}

/* --- 本文セクションと紙面 --- */
body.reading-light main .section {
  background: #c9d6e2;
}

body.reading-light .prose {
  background: #e1eaf2;
  border-color: #b9c9d7;
  color: #2e3c50;
}

body.reading-light .prose strong {
  color: #1f2c3e;
}

body.reading-light .prose a {
  color: #006e92;
}

body.reading-light .prose h3 {
  color: #007a9c;
  border-color: #00a0c8;
  text-shadow: none;
}

body.reading-light .prose h4 {
  color: #b81e93;
  text-shadow: none;
}

body.reading-light .prose h5 {
  color: #007a9c;
  border-color: rgba(0, 160, 200, 0.6);
}

body.reading-light .prose h5.step {
  color: #1f2c3e;
}

body.reading-light .prose .step .step-num,
body.reading-light .prose .connector-card__name .step-num {
  border-color: #0090b8;
  background: #cfe3ea;
  color: #007a9c;
}

body.reading-light .prose .sub-steps {
  border-color: #b7c7d4;
}

body.reading-light .prose .sub-steps .step-num {
  border-color: #b7c7d4;
  background: #d0dde8;
  color: #5f7184;
}

/* --- 属性カラー（光彩を切り、明度を落として光背景向きに） --- */
body.reading-light .attr-yu {
  color: #cf3344;
  text-shadow: none;
}

body.reading-light .attr-chi {
  color: #2e6fd0;
  text-shadow: none;
}

body.reading-light .attr-en {
  color: #1f9e50;
  text-shadow: none;
}

/* --- テーブル --- */
body.reading-light .rule-table th,
body.reading-light .rule-table td {
  border-color: #b7c7d4;
}

body.reading-light .rule-table thead th {
  background: #cfe3ea;
  color: #006e92;
}

body.reading-light .rule-table tbody th {
  background: #d0dde8;
  color: #1f2c3e;
}

body.reading-light .rule-table tbody tr:nth-child(even) {
  background: #dae5ee;
}

/* --- パネル・ボックス類 --- */
body.reading-light .quest-panel {
  background: #d5e1eb;
  border-color: #b7c7d4;
}

body.reading-light .quest-panel__head {
  color: #b81e93;
}

body.reading-light .quest-panel__label {
  color: #007a9c;
}

body.reading-light .example-box {
  background: #dfeadc;
  border-color: #b7c7d4;
  border-left-color: #8aa300;
}

body.reading-light .example-box__label {
  color: #6f8500;
}

body.reading-light .rule-note,
body.reading-light .choice-list .choice-note {
  background: rgba(184, 30, 147, 0.07);
  border-left-color: #b81e93;
  color: #6d4163;
}

body.reading-light .choice-list li {
  background: #d5e1eb;
  border-color: #b7c7d4;
  border-left-color: #00a0c8;
}

body.reading-light .choice-list li::before {
  color: #0090b8;
  text-shadow: none;
}

body.reading-light .clan-chips li {
  background: #d0dde8;
  border-color: #b7c7d4;
  border-left-color: #00a0c8;
  color: #2e3c50;
}

body.reading-light .flow-steps a,
body.reading-light .flow-steps .flow-item {
  background: #d0dde8;
  border-color: #b7c7d4;
  border-left-color: #00a0c8;
}

body.reading-light .prose .flow-steps a {
  color: #2e3c50;
}

body.reading-light .prose .flow-steps a:hover {
  color: #007a9c;
  box-shadow: 0 0 10px rgba(0, 144, 184, 0.25);
}

body.reading-light .flow-steps .flow-num {
  color: #007a9c;
}

body.reading-light .flow-steps li + li::before {
  color: #0090b8;
}

body.reading-light .priority-list li {
  background: #d0dde8;
  border-color: #b7c7d4;
  color: #2e3c50;
}

body.reading-light .priority-list li::before {
  color: #007a9c;
}

/* --- 画像・カード --- */
body.reading-light .savior-cards img {
  border-color: #b7c7d4;
  box-shadow: 0 4px 16px rgba(30, 40, 60, 0.18);
}

body.reading-light .connector-card {
  background: #d5e1eb;
  border-color: #b7c7d4;
}

body.reading-light .connector-card__media {
  background: rgba(0, 144, 184, 0.05);
  border-color: #b7c7d4;
}

body.reading-light .connector-card__name {
  color: #1f2c3e;
}

body.reading-light .connector-card__key {
  color: #007a9c;
}

body.reading-light .connector-card__fields {
  border-color: #b7c7d4;
}

/* --- 左サイド目次 --- */
body.reading-light .page-toc__title {
  color: #5f7184;
}

body.reading-light .page-toc__link {
  color: #56687b;
  border-left-color: #b7c7d4;
}

body.reading-light .page-toc__link:hover {
  color: #007a9c;
  border-left-color: rgba(0, 144, 184, 0.6);
}

body.reading-light .page-toc__link.is-active {
  color: #007a9c;
  border-left-color: #0090b8;
  background: rgba(0, 144, 184, 0.08);
  text-shadow: none;
}

.placeholder-note {
  margin: 24px 0;
  padding: 16px 20px;
  background: rgba(255, 43, 214, 0.08);
  border-left: 3px solid var(--color-magenta);
  font-size: 0.9rem;
  color: var(--text-sub);
  font-style: italic;
}

/* ============================================
   Download Cards
   ============================================ */
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.dl-card {
  background: rgba(13, 18, 32, 0.6);
  border: 1px solid var(--border-steel);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dl-card:hover {
  border-color: var(--color-cyan);
  box-shadow: var(--shadow-cyan);
  transform: translateY(-4px);
}

.dl-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--bg-highlight), var(--bg-panel));
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-steel);
  color: var(--color-cyan);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
}

.dl-card__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
}

.dl-card__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dl-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

.dl-card__meta {
  display: flex;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--text-sub);
}

.dl-card__meta span:not(:last-child)::after {
  content: '/';
  margin-left: 12px;
  color: var(--border-steel);
}

.dl-card__desc {
  font-size: 0.88rem;
  color: var(--text-sub);
  flex: 1;
}

.dl-card__btn {
  display: block;
  margin: 16px 20px 20px;
  padding: 12px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-cyan);
  color: var(--color-cyan);
  background: rgba(0, 229, 255, 0.05);
  transition: all 0.2s ease;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.dl-card__btn:hover {
  background: rgba(0, 229, 255, 0.2);
  color: var(--text-main);
  box-shadow: var(--shadow-cyan);
}

.dl-card__btn--disabled {
  opacity: 0.5;
  pointer-events: none;
  border-color: var(--text-sub);
  color: var(--text-sub);
  background: transparent;
}

/* 1枚のカードにボタンを2つ並べる場合のラッパー（例: Webで読む＋ダウンロード） */
.dl-card__actions {
  display: flex;
  gap: 10px;
  margin: 16px 20px 20px;
}

.dl-card__actions .dl-card__btn {
  flex: 1;
  margin: 0;
  /* 2つ並びの狭い幅でも「ダウンロード」等が折り返さないようにする */
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
  letter-spacing: 0.06em;
}

/* ============================================
   Form (contact)
   ============================================ */
.form {
  max-width: 720px;
  margin-top: 32px;
}

.form__group {
  margin-bottom: 28px;
}

.form__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 8px;
}

.form__label .required {
  color: var(--color-magenta);
  margin-left: 6px;
  font-size: 0.75rem;
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(13, 18, 32, 0.8);
  border: 1px solid var(--border-steel);
  color: var(--text-main);
  font-family: var(--font-jp);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.15), var(--shadow-cyan);
}

.form__textarea {
  min-height: 180px;
  resize: vertical;
  font-family: var(--font-jp);
}

.form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-cyan) 50%), linear-gradient(135deg, var(--color-cyan) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-main);
  cursor: pointer;
}

.form__check input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--color-cyan);
  width: 18px;
  height: 18px;
}

.form__check a {
  color: var(--color-cyan);
  text-decoration: underline;
}

.form__check a:hover {
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

.form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form__actions {
  margin-top: 36px;
  text-align: center;
}

.form__submit {
  padding: 16px 48px;
  font-size: 1rem;
}

.form__error {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--color-magenta);
}

.form-notice {
  padding: 20px 24px;
  margin-bottom: 32px;
  background: rgba(0, 229, 255, 0.08);
  border-left: 3px solid var(--color-cyan);
  color: var(--text-main);
}

.form-notice--error {
  background: rgba(255, 43, 214, 0.08);
  border-left-color: var(--color-magenta);
}

.form-notice--success {
  background: rgba(200, 255, 0, 0.08);
  border-left-color: var(--color-lime);
}

/* ============================================
   Privacy / Terms (simple prose page)
   ============================================ */
.simple-page {
  padding: 60px 0 80px;
}

/* ============================================
   404
   ============================================ */
.error-page {
  min-height: calc(100vh * var(--invz) - var(--header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-cyan);
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 0 40px rgba(0, 229, 255, 0.3);
  margin-bottom: 16px;
}

.error-page__msg {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 32px;
  color: var(--text-main);
}

.error-page__desc {
  color: var(--text-sub);
  margin-bottom: 32px;
  max-width: 520px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .news-item {
    grid-template-columns: 100px 120px 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  /* Character × Xavior ペア：モバイルは 2 カラム、5組目を中央に */
  .concept-pairs__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 14px;
    max-width: 480px;
  }
  /* PC用の 3+2 配置（span 指定）をリセット */
  .cx-pair,
  .cx-pair:nth-child(4) {
    grid-column: auto;
  }
  .cx-pair:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
  /* モバイルではジッターを無効化 */
  .cx-pair:nth-child(1) .cx-pair__art,
  .cx-pair:nth-child(2) .cx-pair__art,
  .cx-pair:nth-child(3) .cx-pair__art,
  .cx-pair:nth-child(4) .cx-pair__art,
  .cx-pair:nth-child(5) .cx-pair__art {
    transform: none;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 60px;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 6, 10, 0.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: flex-start;
    padding: 32px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-top: 1px solid var(--border-steel);
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__list {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .site-nav__link {
    display: block;
    padding: 16px;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-steel);
  }

  .site-nav__link::after {
    display: none;
  }

  /* ハンバーガーメニュー内ではドロップダウンを出さない（ボトムシートで代替） */
  .site-nav__dropdown {
    display: none;
  }

  .lang-switch {
    margin: 24px 0 0;
    padding: 16px 0 0;
    border-left: none;
    border-top: 1px solid var(--border-steel);
    align-self: center;
  }

  .site-header__logo {
    height: 36px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* ============================================
     モバイル時：キービジュアルとテキストを上下に分離
     （文字をキャラに重ねないレイアウト）
     ============================================ */
  .hero {
    display: block;
    padding: 0;
    min-height: 100vh;
  }

  /* 画像レイヤーはヒーロー上部 48vh に限定（縦に狭いスマホでもロゴと文字が見えるよう低めに） */
  .hero__bg,
  .hero__layer {
    inset: 0 0 auto 0;
    height: 48vh;
    /* 画像の上端寄りを表示してドラゴンの顔を見せる */
    background-position: center top;
    /* 下端を背景色になめらかにフェード */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  }

  /* オーバーレイも画像エリアに限定（薄めに） */
  .hero__overlay {
    inset: 0 0 auto 0;
    height: 48vh;
    background:
      radial-gradient(ellipse at center, transparent 0%, rgba(5, 6, 10, 0.5) 100%),
      linear-gradient(180deg, rgba(5, 6, 10, 0.2), rgba(5, 6, 10, 0.5));
  }

  /* テキストは画像の下に通常フローで配置（画像と一切重ねない） */
  .hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    /* 画像の論理高さ(48vh) + scale(1.05) の張り出し分を考慮して下に押し出す */
    margin-top: calc(48vh + 12px);
    padding: 0 24px 60px;
    text-align: center;
  }

  /* ロゴはモバイル幅で大きすぎないように */
  .hero__logo {
    max-width: 72%;
    margin-bottom: 16px;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .news-item__tag {
    justify-self: flex-start;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .section {
    padding: 60px 0;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
  .site-footer__credits dt {
    display: block;
    min-width: 0;
    margin-bottom: 2px;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::after { display: none; }
}