/* ==========================================================
   魔法戦士ソルシエルナイツ ～魔に魅入られし姫君たち～ 公式サイト - style.css
   仕様: SPEC.md §3 デザイン仕様
   ========================================================== */

/* ---------- トークン ---------- */
:root {
  --bg-base: #0d0b12;
  --bg-alt: #14101d;
  --surface: #1c1728;
  --text-main: #e9e4f0;
  --text-sub: #a79fb5;
  --accent-gold: #d4af37;
  --accent-purple: #8b5cf6;
  --danger: #e05252;
  --font-serif: "Zen Old Mincho", "Noto Serif JP", "Yu Mincho", "MS PMincho", serif;
  --font-sans: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --header-h: 96px;
  --container-w: 1200px;
}

/* ---------- ベース ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
}

ul[role="list"] {
  list-style: none;
  padding: 0;
}

.container {
  width: min(var(--container-w), 92%);
  margin-inline: auto;
}

section,
footer {
  scroll-margin-top: var(--header-h);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-purple);
  outline-offset: 3px;
}

/* ---------- モーション設定（reduced-motion対応） ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- ページ全体背景（v1.3: main_visual.jpg・透明度50%＋ガウスぼかし） ----------
   fixedの擬似要素で全ページに敷き、各セクションは半透明背景にして透けさせる。
   insetを負値にすることでblurによる縁の白化を防ぐ。 */
body::before {
  content: "";
  position: fixed;
  inset: -60px;
  z-index: -1;
  background: url("../images/main_visual.jpg") center / cover no-repeat;
  opacity: .5;
  filter: blur(24px);
  pointer-events: none;
}

/* ---------- 年齢確認ゲート（FR-01） ---------- */
#age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060409;
  padding: 24px;
  text-align: center;
}

html.age-verified #age-gate {
  display: none;
}

.age-gate__inner {
  max-width: 520px;
  animation: gate-in .6s ease both;
}

@keyframes gate-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.age-gate__logo {
  font-family: var(--font-serif);
  color: var(--accent-gold);
  letter-spacing: .2em;
  font-size: 1.3rem;
}

.age-gate__logo span {
  display: block;
  margin-top: 6px;
  font-size: .65rem;
  letter-spacing: .5em;
  color: var(--text-sub);
}

.age-gate__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: .3em;
  margin: 36px 0 10px;
}

.age-gate__text {
  color: var(--text-sub);
  font-size: .95rem;
  margin-bottom: 34px;
}

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

/* 未確認時はサイト本体をぼかし・操作不能にする */
html.age-unverified #site,
html.age-unverified .lightbox,
html.age-unverified .back-to-top {
  filter: blur(18px) brightness(.5);
  pointer-events: none;
  user-select: none;
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .95rem;
  border: 1px solid transparent;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.btn--gold {
  background: linear-gradient(135deg, #e6c96a, var(--accent-gold) 55%, #a8842a);
  color: #171203;
  border-color: var(--accent-gold);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, .35);
}

.btn--ghost {
  border-color: rgba(233, 228, 240, .4);
  color: var(--text-main);
}

.btn--ghost:hover {
  border-color: var(--accent-purple);
  transform: translateY(-2px);
}

.btn--sm {
  padding: 10px 22px;
  font-size: .85rem;
}

/* ---------- ヘッダー / グローバルナビ（FR-02/03） ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.site-header.is-scrolled {
  background: rgba(13, 11, 18, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(212, 175, 55, .25);
}

.global-nav {
  width: min(var(--container-w), 94%);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo img {
  height: 72px;
  width: auto;
  display: block;
}

@media (max-width: 767.98px) {
  .logo img {
    height: 54px;
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-menu a:not(.btn) {
  position: relative;
  padding: 6px 0;
  font-size: .9rem;
  letter-spacing: .08em;
}

.nav-menu a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.nav-menu a:hover::after,
.nav-menu a.is-active::after {
  transform: scaleX(1);
}

.nav-menu a.is-active {
  color: var(--accent-gold);
}

/* ハンバーガー（モバイル） */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 60;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-main);
  margin: 5px auto;
  transition: transform .3s ease, opacity .3s ease;
}

/* ---------- ヒーロー ---------- */
/* v1.3: ヒーローの縦サイズを1.5倍に拡張（100svh → 150svh） */
/* v1.6: モバイルはaspect-ratioでメインビジュアルの表示縦幅に合わせる（下部スペースなし・両端見切りなし） */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 24px) 16px 48px;
  background: url("../images/main_visual.jpg") center top / contain no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 11, 18, .55), rgba(13, 11, 18, .2) 40%, rgba(13, 11, 18, .92));
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero__logo {
  display: block;
  width: min(720px, 86vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 32px rgba(139, 92, 246, .45));
}

.hero__catch {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: .1em;
  margin: 30px 0 34px;
}

/* 発売予定日（大きく表示）＋価格（その下に表示） */
.hero__release {
  margin-bottom: 40px;
}

.hero__date {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  letter-spacing: .1em;
  color: #f3ecff;
  line-height: 1.5;
  text-shadow: 0 2px 18px rgba(6, 4, 9, .8);
}

.hero__date-tag {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 16px;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .18em;
  border: 1px solid rgba(212, 175, 55, .6);
  border-radius: 999px;
  color: var(--accent-gold);
  vertical-align: middle;
}

.hero__price {
  margin-top: 10px;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: .08em;
  color: #f0e6c8;
  text-shadow: 0 2px 14px rgba(6, 4, 9, .8);
}

.hero__price span {
  font-size: .75em;
  letter-spacing: .05em;
  color: var(--text-sub);
}

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

.hero__scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(233, 228, 240, .5);
  border-radius: 14px;
}

.hero__scroll span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--accent-gold);
  animation: scroll-hint 1.6s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* ---------- セクション共通 ---------- */
/* v1.3: ページ全体背景（ぼかし画像）を透けさせるため半透明化 */
.section {
  padding: 96px 0;
}

.section--alt {
  background: rgba(20, 16, 29, .78);
}

.section-head {
  text-align: center;
  margin-bottom: 56px;
}

.section-head__en {
  font-size: .8rem;
  letter-spacing: .5em;
  color: var(--accent-gold);
  text-transform: uppercase;
}

.section-head__jp {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: .2em;
  margin-top: 8px;
}

.section-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

/* ---------- インフォメーション（最新ニュース/お知らせ） ---------- */
.info-list {
  max-width: 720px;
  margin-inline: auto;
}

.info-item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(233, 228, 240, .1);
}

.info-item:first-child {
  border-top: 1px solid rgba(233, 228, 240, .1);
}

.info-item__date {
  flex-shrink: 0;
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}

.info-item__text {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text-main);
}

@media (max-width: 767.98px) {
  .info-item {
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
  }
}

/* イベント告知バナー（ニュースリストの下・PC/タブレット横2列 / スマホ1列） */
.info-banner {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-banner__link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(212, 175, 55, .08));
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: 8px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}

.info-banner__link:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 4px 24px rgba(139, 92, 246, .25);
  transform: translateY(-2px);
}

.info-banner__tag {
  flex-shrink: 0;
  padding: 6px 18px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: #f3ecff;
  background: linear-gradient(135deg, var(--accent-purple), #6d3fd4);
  border-radius: 4px;
}

.info-banner__text {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text-main);
}

@media (max-width: 767.98px) {
  .info-banner {
    margin-top: 32px;
    grid-template-columns: 1fr;
  }

  .info-banner__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
  }
}

/* ---------- イベント告知ページ（event.html） ---------- */
.event-card {
  max-width: 960px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid rgba(139, 92, 246, .3);
  border-radius: 8px;
  padding: 40px 36px;
}

.event-card__tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 16px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: #f3ecff;
  background: linear-gradient(135deg, var(--accent-purple), #6d3fd4);
  border-radius: 4px;
}

.event-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  letter-spacing: .08em;
  color: #f3ecff;
  margin-bottom: 16px;
}

.event-card__desc {
  font-size: .95rem;
  line-height: 2;
  color: var(--text-main);
  margin-bottom: 24px;
}

.event-card__period {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-block: 1px solid rgba(233, 228, 240, .12);
  margin-bottom: 20px;
}

.event-card__period-label {
  flex-shrink: 0;
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--accent-gold);
}

.event-card__period-value {
  font-size: .95rem;
  color: var(--text-main);
}

.event-card__rules {
  margin-bottom: 28px;
  padding-left: 0;
}

.event-card__rules li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--text-sub);
}

.event-card__rules li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--accent-gold);
}

/* 月別カード（横2列 / スマホ1列） */
.event-card__months {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.event-month {
  padding: 20px;
  background: rgba(139, 92, 246, .08);
  border: 1px solid rgba(139, 92, 246, .25);
  border-radius: 6px;
  text-align: center;
}

.event-month__label {
  display: block;
  font-size: .8rem;
  letter-spacing: .15em;
  color: var(--accent-gold);
  margin-bottom: 8px;
}

.event-month__thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 12px;
}

.event-month__thumb {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s ease, filter .3s ease;
}

.event-month__thumb-btn:hover .event-month__thumb,
.event-month__thumb-btn:focus-visible .event-month__thumb {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.event-month__char {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: .06em;
  color: #f3ecff;
}

/* 実施店舗一覧 */
.event-card__stores {
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(139, 92, 246, .05);
  border: 1px solid rgba(139, 92, 246, .2);
  border-radius: 6px;
}

.event-card__stores-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: .1em;
  color: #f3ecff;
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--accent-gold);
}

.store-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}

.store-list li {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--text-main);
  padding: 3px 0;
  border-bottom: 1px solid rgba(233, 228, 240, .06);
  white-space: nowrap;
}

.store-list__pref {
  display: inline-block;
  min-width: 5.5em;
  margin-right: 8px;
  padding: 1px 8px;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--accent-gold);
  background: rgba(212, 175, 55, .1);
  border: 1px solid rgba(212, 175, 55, .3);
  border-radius: 3px;
  text-align: center;
}

.event-card__notes {
  padding-left: 0;
}

.event-card__notes li {
  position: relative;
  padding: 4px 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--text-sub);
}

@media (max-width: 767.98px) {
  .event-card {
    padding: 28px 20px;
  }

  .event-card__months {
    grid-template-columns: 1fr;
  }

  .store-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- ストーリー（v1.4: 右カラム画像を削除し本文のみ・テキスト拡大） ---------- */
.story__body {
  display: block;
}

.story__text {
  max-width: 860px;
  margin-inline: auto;
}

.story__text p {
  margin-bottom: 1.5em;
  font-size: 1.1rem;
  line-height: 2;
  color: var(--text-main);
}

/* ---------- キャラクター（選択式タブ / FR-09） ---------- */
.char-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.char-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  background: var(--surface);
  border: 1px solid rgba(233, 228, 240, .12);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.char-tab:hover {
  border-color: rgba(139, 92, 246, .5);
}

.char-tab:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.char-tab.is-selected {
  border-color: var(--accent-gold);
  box-shadow: 0 0 24px rgba(212, 175, 55, .22), inset 0 0 0 1px rgba(212, 175, 55, .3);
}

.char-tab__figure {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: #0a0810;
}

.char-tab__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  transition: transform .5s ease, opacity .3s ease;
}

.char-tab:hover .char-tab__figure img,
.char-tab.is-selected .char-tab__figure img {
  opacity: 1;
  transform: scale(1.04);
}

/* v1.8: 顔部分拡大表示（立絵の上部にフォーカス）
   各キャラ個別調整: HTMLのbutton要素に style="--fz-scale:4;--fz-ox:50%;--fz-oy:10%" を設定
   --fz-scale=拡大率 / --fz-ox=横位置(0%=左,50%=中央,100%=右) / --fz-oy=縦位置(0%=頭頂,50%=中央) */
.char-tab--face-zoom .char-tab__figure img {
  object-position: center 0%;
  transform: scale(var(--fz-scale, 4));
  transform-origin: var(--fz-ox, 50%) var(--fz-oy, 10%);
  opacity: .85;
}

.char-tab--face-zoom:hover .char-tab__figure img,
.char-tab--face-zoom.is-selected .char-tab__figure img {
  transform: scale(calc(var(--fz-scale, 4) * 1.05));
  transform-origin: var(--fz-ox, 50%) var(--fz-oy, 10%);
  opacity: 1;
}

.char-tab__name {
  font-family: var(--font-serif);
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--text-sub);
  transition: color .3s ease;
}

.char-tab.is-selected .char-tab__name {
  color: var(--accent-gold);
}

/* JS無効時: タブは非表示にし、全キャラの詳細パネルを縦積み表示する（プログレッシブエンハンスメント） */
html:not(.js) .char-tabs {
  display: none;
}

/* 詳細パネル（JS無効時は全キャラが縦積みで表示される） */
html.js .char-panel {
  display: none;
}

html.js .char-panel.is-active {
  display: grid;
  animation: char-fade-in .45s ease both;
}

@keyframes char-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .char-panel.is-active {
    animation: none;
  }
}

/* v1.8: 詳細パネル（立絵＋テキスト・名前左上・拡大） */
.char-panel {
  display: grid;
  gap: 28px;
  background: var(--surface);
  border: 1px solid rgba(139, 92, 246, .25);
  border-radius: 8px;
  padding: 32px;
}

/* 詳細パネル内の立絵（選択タブと同じface-zoom対応・クリックで拡大） */
.char-panel__figure {
  margin: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, .3);
  cursor: pointer;
}

.char-panel__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

/* face-zoom: 選択タブと同じカスタムプロパティで個別調整（同一要素に両クラス） */
.char-panel__figure.char-panel--face-zoom img {
  object-position: center 0%;
  transform: scale(var(--fz-scale, 4));
  transform-origin: var(--fz-ox, 50%) var(--fz-oy, 10%);
  transition: transform .5s ease, opacity .3s ease;
}

.char-panel__figure.char-panel--face-zoom:hover img {
  transform: scale(calc(var(--fz-scale, 4) * 1.05));
  transform-origin: var(--fz-ox, 50%) var(--fz-oy, 10%);
  opacity: 1;
}

.char-panel__body {
  min-width: 0;
}

.char-panel__name {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: .08em;
  color: #f3ecff;
  margin-bottom: 4px;
  text-align: left;
}

.char-panel__name span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: .15em;
  color: var(--accent-gold);
}

.char-panel__data {
  margin: 18px 0;
  padding: 14px 0;
  border-block: 1px solid rgba(233, 228, 240, .12);
}

.char-panel__data div {
  display: flex;
  gap: 16px;
  padding: 5px 0;
  font-size: .9rem;
}

.char-panel__data dt {
  flex: 0 0 72px;
  color: var(--text-sub);
  letter-spacing: .1em;
}

.char-panel__data dd {
  margin: 0;
  color: var(--text-main);
}

.char-panel__voice {
  color: var(--accent-gold);
  font-size: .85rem;
  margin-bottom: 14px;
}

.char-panel__profile {
  color: var(--text-sub);
  font-size: .92rem;
  line-height: 1.9;
}

/* グループバッジ（ヒロイン/悪役側/魔法戦士） */
.char-group {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 14px;
  font-size: .75rem;
  letter-spacing: .12em;
  border-radius: 3px;
  font-weight: 500;
}

.char-group--heroine {
  color: #c4b5fd;
  background: rgba(139, 92, 246, .18);
  border: 1px solid rgba(139, 92, 246, .4);
}

.char-group--villain {
  color: #fca5a5;
  background: rgba(224, 82, 82, .15);
  border: 1px solid rgba(224, 82, 82, .4);
}

.char-group--ally {
  color: #99f6e4;
  background: rgba(45, 212, 191, .15);
  border: 1px solid rgba(45, 212, 191, .4);
}

/* ---------- PC/タブレット（≥768px） ---------- */
@media (min-width: 768px) {
  /* v1.6: PC/タブレットは150svh＋コンテンツ（ロゴ〜発売日・価格）を下に配置 */
  .hero {
    min-height: 150vh;
    min-height: 150svh;
    align-items: flex-end;
    padding: calc(var(--header-h) + 24px) 20px 12vh;
    background-size: cover;
    /* v2.0: 画像の最上部からではなく少し下から表示開始（上端を約25%クロップ） */
    background-position: center 25%;
  }

  /* v1.8: PC/タブレットは立絵左・テキスト右の2カラム */
  .char-panel {
    grid-template-columns: minmax(0, 420px) 1fr;
    align-items: start;
  }
}

/* v1.7: PC最大時（≥1024px）ロゴを1.5倍に拡大 */
@media (min-width: 1024px) {
  .hero__logo {
    width: min(1080px, 90vw);
  }
}

/* ---------- ギャラリー ---------- */
.gallery-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(233, 228, 240, .12);
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(139, 92, 246, 0);
  transition: background .3s ease;
  pointer-events: none;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.06);
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  background: rgba(139, 92, 246, .15);
}

/* v2.0: 本番素材待ちの個別アイテム無効化（クリック・タッチに反応しない） */
.gallery-item--disabled {
  pointer-events: none !important;
  cursor: default;
  opacity: .55;
  filter: saturate(.35);
}

.gallery-item--disabled img {
  transform: none !important;
}

.gallery-item--disabled::after {
  display: none;
}

/* ---------- 店舗特典（v1.9: 縦一列・画像付き構成） ---------- */
.bonus-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 720px;
  margin-inline: auto;
}

.bonus-store__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.bonus-store__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: .1em;
  color: #f3ecff;
  padding-left: 16px;
  border-left: 3px solid var(--accent-gold);
}

.bonus-store__link {
  display: inline-block;
  padding: 9px 24px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #171203;
  background: linear-gradient(135deg, #e6c96a, var(--accent-gold) 55%, #b8942e);
  border: 1px solid var(--accent-gold);
  border-radius: 4px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.bonus-store__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, .4);
  filter: brightness(1.1);
}

.bonus-store__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bonus-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
  background: var(--surface);
  border: 1px solid rgba(233, 228, 240, .1);
  border-radius: 8px;
  padding: 16px;
}

.bonus-item__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, .2);
}

/* クリックで拡大表示可能なサムネイル（ホバーズーム） */
.bonus-item__img-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
}

.bonus-item__img-btn .bonus-item__img {
  transition: transform .4s ease, filter .3s ease;
}

/* タペストリー等の縦長画像は元比率で全体表示（クロップしない） */
.bonus-item--zoomable .bonus-item__img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #0a0810;
}

/* タペストリー行: 右カラムを上寄せ（タイトルが画像上部に揃う） */
.bonus-item--zoomable {
  align-items: start;
}

.bonus-item--zoomable .bonus-item__info {
  padding-top: 4px;
}

/* タペストリーのキャラ名テキスト（タイトルより大きく表示） */
.bonus-item--zoomable .bonus-item__desc {
  color: var(--accent-gold);
  font-size: 1.25rem;
  letter-spacing: .08em;
  margin-top: 10px;
}

/* アクリルスタンド等: キャラ名付き・上寄せ配置 */
.bonus-item--charname {
  align-items: start;
}

.bonus-item--charname .bonus-item__info {
  padding-top: 4px;
}

.bonus-item--charname .bonus-item__charname-text {
  color: var(--accent-gold);
  font-size: 1.25rem;
  letter-spacing: .08em;
  margin-top: 10px;
}

.bonus-item__img-btn:hover .bonus-item__img,
.bonus-item__img-btn:focus-visible .bonus-item__img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.bonus-item__info {
  min-width: 0;
}

.bonus-item__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: .06em;
  color: #f3ecff;
  margin-bottom: 4px;
}

.bonus-item__desc {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--text-sub);
}

/* デジタルコンテンツ（ミニADV/システムボイス）は画像を大きく表示・タイトル上寄せ・概要下寄せ */
.bonus-item--digital {
  grid-template-columns: 260px 1fr;
  align-items: stretch;
}

.bonus-item--digital .bonus-item__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 767.98px) {
  .bonus-item,
  .bonus-item--digital {
    grid-template-columns: 1fr;
  }

  .bonus-item__img {
    max-height: 200px;
  }

  /* タペストリー（縦長）はmax-heightを解除して全体を表示 */
  .bonus-item--zoomable .bonus-item__img {
    max-height: none;
  }
}

/* ---------- フッター / 製品情報 ---------- */
/* v1.3: ページ全体背景を透けさせるため半透明化 */
.site-footer {
  background: rgba(10, 8, 16, .85);
  border-top: 1px solid rgba(212, 175, 55, .3);
  padding: 88px 0 48px;
}

.product-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 44px;
  background: var(--surface);
}

.product-table th,
.product-table td {
  border: 1px solid rgba(233, 228, 240, .12);
  padding: 14px 18px;
  text-align: left;
  font-size: .9rem;
  vertical-align: top;
}

.product-table th[scope="row"] {
  width: 200px;
  background: rgba(139, 92, 246, .12);
  color: #f3ecff;
  font-weight: 500;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* 製品情報のサブ見出し（基本情報 / 動作環境 / スタッフ） */
.product-subhead {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: var(--accent-gold);
  margin: 36px 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--accent-gold);
}

.site-footer .section-head + .product-subhead {
  margin-top: 0;
}

/* スタッフリスト */
/* ul[role="list"]リセット(0,1,1)に負けないよう型セレクタで優先度を上げる（左端パディング復元） */
ul.staff-list {
  display: grid;
  gap: 8px;
  margin-bottom: 44px;
  background: var(--surface);
  border: 1px solid rgba(233, 228, 240, .12);
  padding: 20px 24px;
  border-radius: 6px;
}

.staff-list li {
  display: flex;
  gap: 16px;
  font-size: .9rem;
  padding: 5px 0;
}

.staff-list__role {
  flex: 0 0 72px;
  color: var(--text-sub);
  letter-spacing: .1em;
}

.footer__warning {
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid rgba(224, 82, 82, .4);
  background: rgba(224, 82, 82, .08);
  border-radius: 4px;
  color: #f3caca;
  font-size: .8rem;
  text-align: center;
}

/* v2.0: Triangleブランドロゴ（フッター・©表記の上） */
.footer__brand-logo {
  display: block;
  width: fit-content;
  margin: 48px auto;
  opacity: .75;
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}

.footer__brand-logo img {
  height: 64px;
  width: auto;
  display: block;
}

.footer__brand-logo:hover {
  opacity: 1;
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, .3));
}

@media (max-width: 767.98px) {
  .footer__brand-logo {
    margin: 36px auto;
  }

  .footer__brand-logo img {
    height: 48px;
  }
}

.footer__copy {
  color: var(--text-sub);
  font-size: .75rem;
  letter-spacing: .05em;
  text-align: center;
}

/* ---------- ライトボックス（FR-04） ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 9, .92);
  opacity: 0;
}

/* ふわっと表示: 開閉時にオーバーレイのフェードイン＋画像フレームの浮き上がりアニメーション */
.lightbox.is-open {
  display: flex;
  animation: lb-overlay-in .4s ease forwards;
}

@keyframes lb-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox__stage {
  max-width: min(1100px, 92vw);
  margin: 0;
  transform: scale(.94) translateY(12px);
  opacity: 0;
}

.lightbox.is-open .lightbox__stage {
  animation: lb-stage-in .55s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes lb-stage-in {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  border: 1px solid rgba(212, 175, 55, .4);
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  transition: opacity .3s ease;
}

.lightbox__stage img.is-fading {
  opacity: 0;
}

/* v2.0: 差分切替ヒント（画像右下・枠付きテキスト） */
.lightbox__hint {
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 8px 18px;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--text-main);
  background: rgba(13, 11, 18, .75);
  border: 1px solid rgba(212, 175, 55, .6);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.lightbox__hint.is-visible {
  opacity: 1;
}

.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(233, 228, 240, .3);
  background: rgba(28, 23, 40, .7);
  color: var(--text-main);
  font-size: 1.6rem;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease;
}

.lightbox__btn:hover {
  background: rgba(139, 92, 246, .4);
  border-color: var(--accent-purple);
}

.lightbox__close {
  top: 20px;
  right: 20px;
  font-size: 1.4rem;
}

.lightbox__prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-sub);
  letter-spacing: .2em;
  font-size: .9rem;
}

/* ---------- トップへ戻る（FR-08） ---------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .5);
  background: rgba(28, 23, 40, .85);
  color: var(--accent-gold);
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover {
  background: rgba(212, 175, 55, .2);
}

/* ---------- JS無効時: 年齢確認ゲート・ライトボックス・トップへ戻るを非表示（元: index.htmlの<noscript>） ---------- */
html:not(.js) #age-gate,
html:not(.js) .lightbox,
html:not(.js) .back-to-top {
  display: none !important;
}

/* ---------- スクロールリビール（FR-06 / JS利用時のみ） ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- レスポンシブ（§3.4） ---------- */
@media (max-width: 1023.98px) {
  .char-tabs {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  :root {
    --header-h: 64px;
  }

  .section {
    padding: 72px 0;
  }

  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 55;
    height: 100vh;
    height: 100dvh;
    width: min(320px, 84%);
    flex-direction: column;
    justify-content: center;
    gap: 36px;
    background: rgba(13, 11, 18, .97);
    border-left: 1px solid rgba(212, 175, 55, .3);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s ease, visibility 0s .35s;
  }

  body.nav-open .nav-menu {
    transform: none;
    visibility: visible;
    transition: transform .35s ease, visibility 0s 0s;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* v1.7: スマホはaspect-ratioでメインビジュアルの表示縦幅に一致（下部スペースなし） */
  .hero {
    aspect-ratio: 1920 / 2711;
    padding: 0;
  }

  /* v1.7: キャッチコピーを上部・ロゴ/発売日/価格を下部へ配置 */
  .hero__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: none;
    padding: 20px 20px 20px;
  }

  /* スマホ: ロゴ〜価格を最下部に寄せる（releaseのmargin-bottomを消去） */
  .hero__release {
    margin-bottom: 0;
  }

  .hero__catch {
    order: -1;
    margin-top: 0;
    margin-bottom: auto;
    padding: 0;
    white-space: nowrap;
    font-size: clamp(.7rem, 3.6vw, .95rem);
    letter-spacing: .04em;
  }

  /* スマホ: スクロールボタンを非表示 */
  .hero__scroll {
    display: none;
  }

  /* スマホ: ロゴ〜価格を最下部に寄せる（catchのmargin-bottom:autoが全空きスペースを取る） */
  .hero__logo {
    width: min(560px, 78vw);
    margin-left: auto;
    margin-right: auto;
  }

  .char-tabs {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .char-tab {
    padding: 10px 6px;
  }

  .char-tab__name {
    font-size: .72rem;
  }

  .char-panel {
    padding: 20px;
    gap: 24px;
  }

  .char-panel__figure {
    max-width: 100%;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .age-gate__buttons .btn {
    width: min(320px, 100%);
  }

  .product-table th[scope="row"] {
    width: 110px;
    white-space: normal;
  }

  .lightbox__prev {
    left: 10px;
  }

  .lightbox__next {
    right: 10px;
  }

  .lightbox__btn {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}