/* ============================================
   Monogatari — Section Styles
   ============================================ */

/* ── ヒーローセクション ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 50% 30%, rgba(212, 168, 83, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255, 159, 67, 0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(124, 58, 237, 0.03) 0%, transparent 40%),
    linear-gradient(180deg, var(--color-void) 0%, var(--color-deep-dark) 50%, var(--color-void) 100%);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 100px,
      rgba(212, 168, 83, 0.02) 100px,
      rgba(212, 168, 83, 0.02) 101px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 100px,
      rgba(212, 168, 83, 0.02) 100px,
      rgba(212, 168, 83, 0.02) 101px
    );
  opacity: 0.4;
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: var(--z-particles);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: var(--z-base);
  max-width: 800px;
  padding: var(--space-xl);
}

.hero-logo {
  width: 160px;
  height: auto;
  margin: 0 auto var(--space-2xl);
  /* logo-mark.png は透過PNG。反転すると黒くなるので掛けない */
  animation: logoFloat 6s ease-in-out infinite;
  opacity: 0;
  animation: heroLogoReveal 2s ease forwards 0.5s, logoFloat 6s ease-in-out infinite 2.5s;
}

@keyframes heroLogoReveal {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55)) drop-shadow(0 2px 5px rgba(0,0,0,0.40)) blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55)) drop-shadow(0 2px 5px rgba(0,0,0,0.40)) blur(0px);
  }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  color: var(--color-gold);
  text-shadow: 
    0 0 40px rgba(212, 168, 83, 0.3),
    0 0 80px rgba(212, 168, 83, 0.1);
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: heroTextReveal 1.5s ease forwards 1s;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  font-weight: 300;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-sm);
  opacity: 0;
  animation: heroTextReveal 1.5s ease forwards 1.3s;
}

.hero-tagline-sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3xl);
  opacity: 0;
  animation: heroTextReveal 1.5s ease forwards 1.6s;
}

@keyframes heroTextReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-cta {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroTextReveal 1.5s ease forwards 2s;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  opacity: 0;
  animation: heroTextReveal 1.5s ease forwards 2.5s;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-gold-dim), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; height: 40px; }
  50% { opacity: 1; height: 50px; }
}

/* ── ストーリーセクション ────────────────────
   キービジュアルはセクション最上部に全幅で置く。ナビは
   スクロールするまで背景を持たないので、上端に暗幕を敷いて
   ナビの文字が絵の明るい空に埋もれないようにしている。 */
.story-kv {
  position: relative;
  margin: 0 0 calc(var(--space-3xl) * -1);
  overflow: hidden;
  line-height: 0;
}
.story-kv img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68vh;
  object-fit: cover;
  object-position: center 42%;
}
/* 上=ナビ用の暗幕 / 下=本文へ溶かす */
.story-kv-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(10, 6, 4, 0.88) 0%,
      rgba(10, 6, 4, 0.78) 9%,
      rgba(10, 6, 4, 0.34) 20%,
      rgba(10, 6, 4, 0) 34%),
    linear-gradient(to top,    var(--color-void) 0%, rgba(10, 6, 4, 0.55) 16%, rgba(10, 6, 4, 0) 52%);
}

.story-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-4xl);
}

/* ── 基本ストーリー ── */
.story-prose {
  font-size: var(--text-lg);
  line-height: 2.1;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-4xl);
  /* 日本語はどこでも改行できてしまい「眠ってい／る。」のように割れる。
     文節で折り返す(未対応ブラウザは無視するだけ) */
  word-break: auto-phrase;
  line-break: strict;
}
.story-prose p { margin: 0 0 var(--space-2xl); }
.story-prose em {
  color: var(--color-gold);
  font-style: normal;
}
.story-lead,
.story-close {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  letter-spacing: 0.06em;
}
.story-close { color: var(--color-text-gold); }

/* ── 動画への導線 ── */
.story-watch {
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  text-align: center;
}
.story-watch-lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-lg);
}

.story-watch-card {
  display: block;
  max-width: 520px;
  margin: 0 auto var(--space-lg);
  cursor: pointer;
}
.story-watch-thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
  background: var(--color-dark-wood);
  transition: border-color var(--transition-base);
}
.story-watch-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-watch-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 6, 4, 0.35);
  transition: background var(--transition-base);
}
.story-watch-play svg {
  width: 54px;
  height: 54px;
  fill: var(--color-text-primary);
  opacity: 0.9;
}
.story-watch-card:hover .story-watch-thumb { border-color: var(--color-gold-dim); }
.story-watch-card:hover .story-watch-play  { background: rgba(10, 6, 4, 0.15); }

.story-watch-info { margin-top: var(--space-md); }
.story-watch-badge {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-gold);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.9em;
  margin-bottom: var(--space-sm);
}
.story-watch-title {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}
.story-watch-series {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
}

.story-watch-go {
  display: inline-block;
  padding: 0.85em 2.4em;
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: 0.08em;
  transition: background var(--transition-base), color var(--transition-base);
}
.story-watch-go:hover {
  background: var(--color-gold);
  color: var(--color-void);
}

/* ── キャラクターセクション ── */
.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-xl);
  padding: 0 var(--space-xl) var(--space-4xl);
  max-width: var(--container-2xl);
  margin: 0 auto;
}

/* ── 音楽セクション ── */
.music-grid,
.videos-grid {
  padding: 0 var(--space-xl) var(--space-4xl);
  max-width: var(--container-2xl);
  margin: 0 auto;
}

.music-featured {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-xl);
}

.music-featured-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-2xl);
  background: var(--glass-bg);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-2xl);
}

.music-featured-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: var(--shadow-lg);
}

.music-featured-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-featured-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.music-featured-info h3 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

.music-featured-info p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  line-height: 1.8;
}

/* ── 動画セクション ── */
/* ── 動画モーダル ── */
.video-modal-content {
  padding: 0;
}

.video-modal-player {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

.video-modal-player iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.video-modal-info {
  padding: var(--space-xl);
}

/* ── 禁書庫セクション ── */
.restricted-intro {
  max-width: 600px;
  margin: 0 auto;
}

.restricted-intro p {
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

.restricted-content {
  display: none;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-4xl);
}

.restricted-content.unlocked {
  display: block;
  animation: sectionFadeIn 0.8s ease forwards;
}

.tier-selector {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
}

.tier-tab {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--transition-base);
  cursor: pointer;
  letter-spacing: 0.1em;
}

.tier-tab:hover {
  border-color: var(--color-gold-dim);
  color: var(--color-gold);
}

.tier-tab.active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-deep-dark);
}

.tier-content {
  display: none;
}

.tier-content.active {
  display: block;
  animation: sectionFadeIn 0.5s ease forwards;
}

.tier-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-xl);
}

.tier-item-card {
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-slow);
}

.tier-item-card:hover {
  border-color: var(--color-border-bright);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.tier-item-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border);
}

.tier-item-body {
  padding: var(--space-lg);
}

.tier-item-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text-gold);
  margin-bottom: var(--space-sm);
}

.tier-item-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* リンクセクションの指定は、このファイル末尾の LINKS 節にまとめてある。
   ここに古い2カラムのグリッドが残っていて、目的別の束が横並びになっていた。 */

/* ── 背景装飾（各セクション共通） ── */
.section-bg-ornament {
  position: absolute;
  pointer-events: none;
  z-index: var(--z-behind);
}

/* 各セクションの背後にある、ぼんやりした光。
   以前は単色の円に filter: blur(120px) を掛けていた。blur は元の大きさの
   外側まで描画面を広げて毎回ぼかし直すので、400px の円で約1100px四方になる。
   **不透明度3%の飾りにその負荷は見合わない**(スマホのスクロールが重くなる一因だった)。
   放射グラデーションなら、同じ「縁の消えた光」をフィルタ無しで出せる。
   ぼかしで広がっていた分は、箱を大きくして補う。 */
.section-bg-glow {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow, var(--color-gold)) 0%, transparent 68%);
  opacity: 0.03;
  pointer-events: none;
  z-index: var(--z-behind);
  /* 位置の基準は以前の 400px の円。広げた分だけ中心を戻す */
  margin: -120px 0 0 -120px;
}

.section-bg-glow--gold    { --glow: var(--color-gold); }
.section-bg-glow--phantom { --glow: var(--color-phantom); }
.section-bg-glow--flame   { --glow: var(--color-flame); }

/* ── キャラクターセクション（シリーズ別） ── */
.char-series-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
  padding: 0 var(--space-xl);
}

.char-series-btn {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--transition-base);
  cursor: pointer;
  letter-spacing: 0.08em;
  background: transparent;
}

.char-series-btn:hover {
  border-color: var(--color-gold-dim);
  color: var(--color-gold);
  background: rgba(212, 168, 83, 0.08);
}

.char-series-btn.active {
  background: linear-gradient(135deg, var(--color-gold-dim), var(--color-gold));
  border-color: var(--color-gold);
  color: var(--color-deep-dark);
  box-shadow: var(--shadow-glow);
}

.char-series-group {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-2xl);
}

.char-series-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-gold);
  text-align: center;
  margin-bottom: var(--space-sm);
  letter-spacing: 0.1em;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.char-series-title::before,
.char-series-title::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-dim), transparent);
}


.char-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 240px));
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
  justify-content: center;
}

/* ── キャラクター詳細モーダル ── */
.char-modal-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-2xl);
  padding: var(--space-2xl);
}

.char-modal-portrait {
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.char-modal-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--space-md);
}

.char-modal-role {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-mystic);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.char-modal-name {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.char-modal-name-en {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}

.char-modal-desc {
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  font-size: var(--text-base);
}

.char-modal-series-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gold-dim);
  color: var(--color-gold);
  background: rgba(212, 168, 83, 0.08);
  margin-bottom: var(--space-lg);
}

.char-modal-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  letter-spacing: 0.08em;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.char-modal-activity {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
}

.char-modal-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.char-modal-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  transition: all var(--transition-base);
  text-decoration: none;
}

.char-modal-link:hover {
  border-color: var(--color-gold-dim);
  color: var(--color-gold);
  background: rgba(212, 168, 83, 0.05);
  transform: translateX(4px);
}

.char-modal-link-icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}

.char-modal-appearances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

/* ── レスポンシブ（キャラクター詳細モーダル） ── */
@media (max-width: 768px) {
  .char-modal-inner {
    grid-template-columns: 1fr;
    padding: var(--space-lg);
  }

  .char-modal-portrait {
    max-width: 200px;
    margin: 0 auto;
  }

  .char-modal-name {
    font-size: var(--text-2xl);
    text-align: center;
  }

  .char-modal-role,
  .char-modal-name-en {
    text-align: center;
  }

  .char-series-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .char-series-btn {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-md);
  }
}

@media (max-width: 480px) {
  .char-series-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}


/* ── Story: 本編小説 ──────────────────────────
   タイトルロゴ(透過PNG)はここだけで使う。HOMEの「物語を読む」は
   バナーを使っており、そのバナーの中にも同じロゴが入っているため、
   両方に置くと同じロゴが重複して見える。 */
.story-novel { max-width: 720px; margin: 0 auto var(--space-2xl); }

.story-novel-card {
  display: block;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  text-align: center;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.story-novel-card:hover {
  border-color: var(--color-gold-dim);
  transform: translateY(-3px);
}

/* 透過PNGなので影は付けず、地にそのまま乗せる */
.story-novel-logo {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto var(--space-lg);
}
.story-novel-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-gold);
  margin: 0 0 var(--space-md);
}

.story-novel-meta {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-gold-dim);
  letter-spacing: 0.14em;
  margin-bottom: var(--space-md);
}
.story-novel-summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.9;
  margin: 0 auto var(--space-lg);
  max-width: 40em;
}
.story-novel-go {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: 0.06em;
}

/* あらすじの中で一拍置く行 */
.story-accent {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  letter-spacing: 0.06em;
}


/* ── VIDEOS ────────────────────────────────────
   並びはトップページと共通(app.js の seriesGroups)。
   ここではカルーセルにせず、サムネ+タイトル+あらすじの一覧にする。 */
.videos-latest {
  max-width: 1000px;
  margin: 0 auto var(--space-4xl);
  padding: 0 var(--space-xl);
}
.videos-latest-label {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-gold);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-sm);
  padding: 0.25em 1em;
  margin-bottom: var(--space-lg);
}
.videos-latest-card { display: block; cursor: pointer; }
.videos-latest-thumb {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
  background: var(--color-dark-wood);
  transition: border-color var(--transition-base);
}
.videos-latest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.videos-latest-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 6, 4, 0.32);
  transition: background var(--transition-base);
}
.videos-latest-play svg { width: 66px; height: 66px; fill: var(--color-text-primary); opacity: 0.92; }
.videos-latest-card:hover .videos-latest-thumb { border-color: var(--color-gold-dim); }
.videos-latest-card:hover .videos-latest-play  { background: rgba(10, 6, 4, 0.12); }

.videos-latest-info { padding-top: var(--space-lg); }
.videos-latest-series {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-gold-dim);
}
.videos-latest-title {
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin: var(--space-xs) 0 var(--space-sm);
}
.videos-latest-story {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.95;
  margin: 0;
  max-width: 60em;
  word-break: auto-phrase;
}

.series-block-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.9;
  margin: 0 0 var(--space-xl);
  max-width: 60em;
}

/* ── 一覧 1件 = サムネ + 本文 ── */
.video-rows {
  display: grid;
  gap: var(--space-xl);
}
.video-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-lg);
  align-items: start;
  cursor: pointer;
}
.video-row-thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
  background: var(--color-dark-wood);
  transition: border-color var(--transition-base);
}
.video-row-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.video-row-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 6, 4, 0.30);
  transition: background var(--transition-base);
}
.video-row-play svg { width: 40px; height: 40px; fill: var(--color-text-primary); opacity: 0.9; }
.video-row:hover .video-row-thumb { border-color: var(--color-gold-dim); }
.video-row:hover .video-row-play  { background: rgba(10, 6, 4, 0.10); }

.video-row-title {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}
.video-row-story {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.9;
  margin: 0;
  word-break: auto-phrase;
}


/* ── MUSIC ─────────────────────────────────────
   VIDEOS と同じ構成(最新を大きく → シリーズごとの一覧)。
   違いは各行に配信サービスへのリンクが付くことだけ。 */
.music-latest {
  max-width: 1000px;
  margin: 0 auto var(--space-4xl);
  padding: 0 var(--space-xl);
}
.music-latest-label {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-gold);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-sm);
  padding: 0.25em 1em;
  margin-bottom: var(--space-lg);
}
.music-latest-thumb {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
  background: var(--color-dark-wood);
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.music-latest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-latest-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 6, 4, 0.32);
  transition: background var(--transition-base);
}
.music-latest-play svg { width: 66px; height: 66px; fill: var(--color-text-primary); opacity: 0.92; }
.music-latest-thumb:hover { border-color: var(--color-gold-dim); }
.music-latest-thumb:hover .music-latest-play { background: rgba(10, 6, 4, 0.12); }

.music-latest-info { padding-top: var(--space-lg); }
.music-latest-series { font-size: var(--text-xs); letter-spacing: 0.16em; color: var(--color-gold-dim); }
.music-latest-title {
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin: var(--space-xs) 0 var(--space-sm);
}
.music-latest-story {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.95;
  margin: 0 0 var(--space-lg);
  max-width: 60em;
  word-break: auto-phrase;
}

/* ── 一覧 1件 ── */
.music-rows { display: grid; gap: var(--space-xl); }
.music-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.music-row-thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
  background: var(--color-dark-wood);
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.music-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-row-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 6, 4, 0.30);
  transition: background var(--transition-base);
}
.music-row-play svg { width: 40px; height: 40px; fill: var(--color-text-primary); opacity: 0.9; }
.music-row-thumb:hover { border-color: var(--color-gold-dim); }
.music-row-thumb:hover .music-row-play { background: rgba(10, 6, 4, 0.10); }

/* 動画が無い曲の代替 */
.music-row-thumb--none {
  display: grid;
  place-items: center;
  color: var(--color-gold-dim);
  cursor: default;
}
.music-row-thumb--none svg { width: 46px; height: 46px; opacity: 0.5; }

.music-row-title {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
  line-height: 1.5;
}
.music-row-also {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}
.music-row-story {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.9;
  margin: 0 0 var(--space-md);
  word-break: auto-phrase;
}


/* ── BOOKS（蔵書室） ───────────────────────────
   BASE のグッズ導線とは別系統。書籍は蔵書室(raindrop)で扱う。 */
.books-lead {
  max-width: 640px;
  margin: 0 auto var(--space-4xl);
  padding: 0 var(--space-xl);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 2;
  word-break: auto-phrase;
}

.books-list {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-4xl);
  display: grid;
  gap: var(--space-4xl);
}

.book-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}

/* 表紙は実物の判型に近い縦長。影は落とさず枠だけで見せる */
.book-cover {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-void);
}
.book-cover img { display: block; width: 100%; height: auto; }

.book-label {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  color: var(--color-gold-dim);
  margin-bottom: var(--space-sm);
}
.book-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.04em;
}
.book-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-gold);
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-lg);
}
.book-summary {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.95;
  margin: 0 0 var(--space-lg);
  word-break: auto-phrase;
}
.book-price {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-lg);
}

.book-buy {
  display: inline-block;
  padding: 0.85em 2.2em;
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: 0.08em;
  transition: background var(--transition-base), color var(--transition-base);
}
.book-buy:hover { background: var(--color-gold); color: var(--color-void); }

/* 購入の下に置く、ファンクラブで電子版を読む導線。購入より一段控えめに、紫(禁書庫の色)で */
.book-fc {
  display: table;
  margin-top: var(--space-md);
  padding: 0.7em 1.6em;
  border: 1px solid rgba(155, 109, 255, 0.45);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: #c4a8ff;
  letter-spacing: 0.06em;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.book-fc:hover { background: rgba(155, 109, 255, 0.14); border-color: rgba(155, 109, 255, 0.8); color: #e2d4ff; }
.book-modal-buy .book-fc { margin-left: auto; margin-right: auto; }


/* 一覧カード: 全体が詳細への入口 */
.book-card { cursor: pointer; transition: border-color var(--transition-base); }
.book-card:hover,
.book-card:focus-visible { border-color: var(--color-gold-dim); outline: none; }
.book-more {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: 0.06em;
}

/* ── 書籍モーダル ──
   紹介文 → 購入 → 対応楽曲 → 購入 の順。埋め込みは開いた時だけ作る。 */
.book-modal { max-width: 620px; }
.book-modal-body { padding: var(--space-2xl) clamp(1.2rem, 4vw, 2.4rem) var(--space-2xl); text-align: center; }

.book-modal-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  letter-spacing: 0.24em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}
.book-modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}
.book-modal-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2xl);
}

.book-modal-desc {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.95;
  word-break: auto-phrase;
}
.book-modal-desc p { margin: 0 0 var(--space-sm); }

.book-modal-price {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin: var(--space-lg) 0 0;
}
.book-modal-buy { margin: var(--space-lg) 0 var(--space-2xl); }

.book-modal-songs-head {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px dashed var(--color-border);
}
.book-modal-songs { display: grid; gap: var(--space-lg); }
.book-embed {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-void);
  border: 1px solid var(--color-border);
}
.book-embed iframe { width: 100%; height: 100%; border: 0; display: block; }


/* ── LINKS（案内所） ───────────────────────────
   目的別にまとめる。URLが無い項目は描画側で落としている。 */
.links-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-4xl);
}

/* 公式LINEだけ特別枠 */
.link-feature {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-xl);
  margin-bottom: var(--space-4xl);
  border: 1px solid rgba(6, 199, 85, 0.28);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(6, 199, 85, 0.07), transparent 60%), var(--glass-bg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.link-feature:hover { border-color: rgba(6, 199, 85, 0.55); transform: translateY(-3px); }
.link-feature-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
}
.link-feature-icon svg { width: 28px; height: 28px; }
.link-feature-body { display: block; min-width: 0; }
.link-feature-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: #06c755;
  margin-bottom: 0.25em;
}
.link-feature-title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}
.link-feature-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-top: 0.2em;
}
.link-feature-go {
  font-size: var(--text-sm);
  color: #06c755;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* 目的ごとの束 */
.link-group { margin-bottom: var(--space-3xl); }
.link-group-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--color-gold-dim);
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.link-group-list { display: grid; gap: var(--space-md); }

.link-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.link-card:hover { border-color: var(--color-gold-dim); transform: translateX(4px); }

.link-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.link-card-icon svg { width: 23px; height: 23px; }

.link-card-info { display: block; min-width: 0; }
.link-card-title {
  display: block;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}
.link-card-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: 0.25em;
}
.link-card-arrow {
  color: var(--color-gold-dim);
  font-size: var(--text-sm);
  transition: transform var(--transition-base), color var(--transition-base);
}
.link-card:hover .link-card-arrow { color: var(--color-gold); transform: translateX(3px); }


/* ── RESTRICTED（禁書庫） ─────────────────────
   ファンクラブ4ティア(栞/保管庫/著者/管理者)に対応。累積型。
   正本は FC の /api/tiers。ここは表示の器だけを持つ。 */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-lg);
}
.tier-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  transition: border-color var(--transition-base);
}
.tier-card.is-open { border-color: rgba(167, 139, 250, 0.45); }
.tier-card-head { text-align: center; }
.tier-rank {
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  color: var(--color-phantom);
}
.tier-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin: 0.3em 0 0.15em;
}
.tier-tagline {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.tier-price {
  font-size: var(--text-sm);
  color: var(--color-text-gold);
  letter-spacing: 0.04em;
  margin: 0;
}
.tier-inherit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-border);
}
.tier-benefits {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.tier-benefits li {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.tier-benefit-icon { color: var(--color-phantom); margin-right: 0.5em; }
.tier-state {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-phantom);
  text-align: center;
}

.tier-join { text-align: center; margin-top: var(--space-2xl); }
.tier-join-note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* ── 解錠後の書庫 ── */
.vault-head { text-align: center; margin-bottom: var(--space-3xl); }
.vault-rank {
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  color: var(--color-phantom);
}
.vault-welcome {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin: 0.3em 0 0.2em;
}
.vault-lead { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.vault-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-md);
}
.vault-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
}
.vault-item.is-locked { opacity: 0.55; }
.vault-item-tier {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-phantom);
}
.vault-item-title {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  margin: 0.25em 0 0.2em;
}
.vault-item-desc { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; line-height: 1.8; }
.vault-item-go {
  font-size: var(--text-sm);
  color: var(--color-phantom);
  white-space: nowrap;
  letter-spacing: 0.06em;
}
.vault-item-note,
.vault-item-lock {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.vault-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
}
.vault-empty p { margin: 0 0 var(--space-sm); font-size: var(--text-sm); }
.vault-empty-note { font-size: var(--text-xs) !important; color: var(--color-text-muted); }
.vault-foot { text-align: center; margin-top: var(--space-3xl); }
#vault-lock-again { background: none; border: 0; cursor: pointer; font-family: inherit; }


/* ── 特典の一覧とプレビュー ── */
.vault-item[data-vault] { cursor: pointer; transition: border-color var(--transition-base); }
.vault-item[data-vault]:hover,
.vault-item[data-vault]:focus-visible { border-color: rgba(167, 139, 250, 0.5); outline: none; }
.vault-item { grid-template-columns: auto 1fr auto; }
.vault-item-cover {
  width: 84px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-void);
}
.vault-item-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-item-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  margin-left: 0.4em;
}

.vault-modal { max-width: 900px; }
.vault-modal-body { padding: var(--space-2xl) clamp(1.2rem, 4vw, 2.4rem); }
.vault-modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
  text-align: center;
}
.vault-modal-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 var(--space-2xl);
  line-height: 1.9;
  word-break: auto-phrase;
}
.vault-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-lg);
}
.vault-shot { display: block; }
.vault-shot-img {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-void);
  transition: border-color var(--transition-base);
}
.vault-shot-img img { width: 100%; height: auto; display: block; }
.vault-shot:hover .vault-shot-img { border-color: var(--color-phantom); }
.vault-shot-name {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  text-align: center;
  word-break: auto-phrase;
}
.vault-modal-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin: var(--space-2xl) 0 0;
}


/* ── MUSIC のカルーセル1枚 ──
   サムネは既定の配信先(Apple Music)へのリンク。下にサービスを並べる。
   YouTube は入れない(MVは VIDEOS の担当)。 */
.music-card {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: center;
  transition: transform var(--transition-base);
}
.music-card.is-active { transform: none; }
.music-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-dark-wood);
  transition: border-color var(--transition-base);
}
.music-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.music-card-thumb:hover { border-color: var(--color-gold-dim); }
/* 拡大は内側の画像だけにかける。外側の <a> を拡大すると枠ごと膨らむ */
.music-card:hover .music-card-thumb img { transform: scale(1.05); }
.music-card-disc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-gold-dim);
  background: linear-gradient(135deg, var(--color-dark-wood), rgba(212, 168, 83, 0.06));
}
.music-card-disc svg { width: 42px; height: 42px; opacity: 0.5; }

.music-card-title {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin: var(--space-md) 0 var(--space-sm);
  line-height: 1.5;
}
.music-card-svc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.music-card-none { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }


/* ── VIDEOS: シリーズを畳んで置く ──
   一覧はシリーズ名だけ。押すと中の動画が開く。 */
.series-fold {
  max-width: 1000px;
  margin: 0 auto var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  overflow: hidden;
  scroll-margin-top: 110px;
}
.series-fold[open] { border-color: var(--color-gold-dim); }

.series-fold-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
  list-style: none;
  transition: background var(--transition-base);
}
.series-fold-head::-webkit-details-marker { display: none; }
.series-fold-head:hover { background: rgba(212, 168, 83, 0.05); }

/* 折りたたみの見出しに置くシリーズの絵。
   カルーセルと同じものを seriesThumb() から受け取る。 */
.series-fold-thumb {
  flex: 0 0 auto;
  width: 132px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-abyss);
}
.series-fold-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.series-fold-head:hover .series-fold-thumb img { transform: scale(1.05); }
/* 絵が無いシリーズでも見出しの高さを揃える(空の箱として残す) */
.series-fold-thumb:empty { border: 1px solid var(--color-border-subtle); }

/* 絵が入ったぶん、名前側に幅を与える */
.series-fold-label { display: block; flex: 1 1 auto; min-width: 0; }
.series-fold-vol {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-gold-dim);
  margin-bottom: 0.2em;
}
.series-fold-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}
.series-fold-title.is-unclassified { font-style: italic; color: var(--color-text-secondary); }

/* 開閉の印 */
.series-fold-mark {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--color-gold-dim);
  border-bottom: 1px solid var(--color-gold-dim);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}
.series-fold[open] .series-fold-mark { transform: rotate(-135deg); }

.series-fold-body { padding: 0 var(--space-xl) var(--space-2xl); }

/* 最新動画も一覧の行と同じ形 */
.videos-latest .video-rows { max-width: none; }
.video-row.is-latest .video-row-title { font-size: var(--text-xl); }

/* MUSIC の見出しの巻数 */
.series-block-vol {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-gold-dim);
  margin-bottom: 0.2em;
}
.series-block-head { display: block; }


/* Page 番号。シリーズ内の収録順(再生リストの順)を示す */
.row-page {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-gold-dim);
  margin-bottom: 0.25em;
}
.music-card .row-page { margin-top: var(--space-md); margin-bottom: 0.15em; }


/* ── 特典の中身の目録 ──
   受け取り先が決まっていない間はリンクにせず、動かない行として出す。 */
.vault-articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.vault-article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.vault-article:hover {
  border-color: var(--color-phantom);
  transform: translateX(4px);
}
.vault-article-body { display: block; min-width: 0; }
.vault-article-title {
  display: block;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: 1.5;
}
.vault-article-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-top: 0.3em;
  word-break: auto-phrase;
}
.vault-article-go { color: var(--color-phantom); font-size: var(--text-sm); white-space: nowrap; }
/* 受け取り先がまだ無い行。押せないことが見て分かるようにする */
.vault-article.is-pending { opacity: 0.6; }
.vault-article.is-pending:hover { border-color: var(--color-border); transform: none; }
.vault-article.is-pending .vault-article-go { color: var(--color-text-muted); }


/* ═══════════════════════════════════════════════
   MEMBERS — 会員ページのプレビュー

   FC(fc.monogatari-room.jp)の /members を HP 上に
   再現したもの。テストのあと FC 側へ統合するので、
   この節はまとめて捨てられるようにしておく。
   ═══════════════════════════════════════════════ */

#section-members .section-header { margin-bottom: var(--space-xl); }

/* ── これはプレビューだと分かる帯 ── */
.preview-note {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  max-width: 860px;
  margin: 0 auto var(--space-xl);
  padding: var(--space-lg);
  border: 1px dashed rgba(124, 58, 237, 0.45);
  border-radius: var(--radius-md);
  background: rgba(124, 58, 237, 0.06);
}
.preview-note-tag {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-phantom);
  border: 1px solid rgba(124, 58, 237, 0.5);
  border-radius: var(--radius-sm);
  padding: 0.25em 0.6em;
}
.preview-note-text {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.9;
  color: var(--color-text-secondary);
  word-break: auto-phrase;
}
.preview-note-text strong { color: var(--color-text-primary); }

/* ── ランクの切り替え ── */
.member-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 860px;
  margin: 0 auto var(--space-2xl);
}
.member-switch-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: var(--space-sm) var(--space-lg);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base),
              background var(--transition-base);
}
.member-switch-btn:hover { color: var(--color-text-primary); border-color: var(--color-border-bright); }
.member-switch-btn.is-on {
  color: var(--color-text-primary);
  border-color: rgba(124, 58, 237, 0.6);
  background: rgba(124, 58, 237, 0.14);
}
.member-switch-rank {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.member-switch-btn.is-on .member-switch-rank { color: var(--color-phantom); }

/* ── 会員ページ本体 ── */
.member-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* 会員の情報 */
.member-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}
.member-id { display: flex; gap: var(--space-lg); align-items: center; min-width: 0; }
.member-avatar {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-size: var(--text-xl);
  color: var(--color-phantom);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: var(--radius-full);
  background: rgba(124, 58, 237, 0.1);
}
.member-id-body { display: grid; gap: 0.2em; min-width: 0; }
.member-mail {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.member-tier {
  display: flex; align-items: baseline; gap: 0.6em;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}
.member-tier-rank {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--color-phantom);
}
.member-tagline { font-size: var(--text-xs); color: var(--color-text-secondary); }

.member-meta { display: grid; gap: 0.35em; justify-items: end; text-align: right; }
.member-meta-row {
  display: grid; gap: 0.1em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.member-meta-row strong { font-weight: 400; color: var(--color-text-secondary); }
.member-meta .link-more { margin-top: var(--space-sm); font-size: var(--text-xs); }

.member-lead {
  margin: var(--space-xl) 0 var(--space-2xl);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.9;
  word-break: auto-phrase;
}
.member-lead strong { color: var(--color-text-primary); }

/* まとまりごと */
.member-group { margin-bottom: var(--space-2xl); }
.member-group-title {
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-text-gold);
  border-bottom: 1px solid var(--color-border-subtle);
}
.member-list { display: grid; gap: var(--space-sm); }

/* 一覧の1件 */
.mitem {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.mitem[data-member-item] { cursor: pointer; }
.mitem[data-member-item]:hover,
.mitem[data-member-item]:focus-visible {
  border-color: rgba(124, 58, 237, 0.5);
  transform: translateX(4px);
  outline: none;
}
.mitem.is-locked { opacity: 0.5; }
.mitem-cover {
  width: 64px; height: 48px;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-abyss);
}
.mitem-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mitem-cover--lock, .mitem-cover--blank {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
}
.mitem-body { min-width: 0; display: grid; gap: 0.25em; }
.mitem-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.6;
  word-break: auto-phrase;
}
.mitem-desc {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.8;
  word-break: auto-phrase;
}
.mitem-kind {
  justify-self: start;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
}
.mitem-lock { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.mitem-go { color: var(--color-phantom); font-size: var(--text-sm); }

/* 会員ページの足元 */
.member-foot {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-subtle);
}
.member-foot-link {
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: none; border: none; padding: 0;
  cursor: pointer;
  transition: color var(--transition-base);
}
.member-foot-link:hover { color: var(--color-text-secondary); }
.member-foot-sep { color: var(--color-border); font-size: var(--text-xs); }

/* ── コンテンツ詳細(/members/:id にあたる) ── */
.mdetail-back {
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: none; border: none; padding: 0;
  cursor: pointer;
  transition: color var(--transition-base);
}
.mdetail-back:hover { color: var(--color-text-secondary); }
.mdetail-head {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  margin: var(--space-xl) 0 var(--space-2xl);
}
.mdetail-cover {
  flex: 0 0 auto;
  width: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-abyss);
}
.mdetail-cover img { width: 100%; display: block; }
.mdetail-head-body { min-width: 0; display: grid; gap: var(--space-sm); justify-items: start; }
.mdetail-title {
  margin: 0;
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  line-height: 1.5;
  word-break: auto-phrase;
}
.mdetail-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.9;
  word-break: auto-phrase;
}
.mdetail-main { display: grid; gap: var(--space-lg); justify-items: start; }
.mdetail-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.9;
  word-break: auto-phrase;
}
.mdetail-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-abyss);
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── 未ログイン(/login にあたる) ── */
.member-login {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}
.member-login-title { margin: 0 0 var(--space-md); font-size: var(--text-xl); color: var(--color-text-primary); }
.member-login-lead {
  margin: 0 0 var(--space-xl);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.9;
}
.member-login-form { display: grid; gap: var(--space-sm); }
.member-login-input {
  width: 100%;
  padding: var(--space-md);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-abyss);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.member-login-note { margin: var(--space-md) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.member-login-join {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-subtle);
}
.member-login-join p { margin: 0 0 var(--space-sm); font-size: var(--text-xs); color: var(--color-text-muted); }


/* ═══════════════════════════════════════════════
   ARCHIVES — 資料室
   調べに来た人向けの読み物。装飾より可読性を優先する。
   ═══════════════════════════════════════════════ */

.lore-lead {
  max-width: 560px;
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-xl);
  line-height: 2;
}

/* 目次 */
.lore-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 860px;
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-xl);
}
.lore-toc a {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-lg);
  transition: color var(--transition-base), border-color var(--transition-base);
}
.lore-toc a:hover {
  color: var(--color-text-gold);
  border-color: var(--color-border-bright);
}

/* 本文 */
.lore {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.lore-block { margin-bottom: var(--space-4xl); scroll-margin-top: 96px; }
.lore-title {
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-md);
  font-size: var(--text-2xl);
  color: var(--color-text-gold);
  border-bottom: 1px solid var(--color-border-subtle);
}
.lore-sub {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: var(--text-base);
  color: var(--color-text-primary);
}
.lore-block p {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-sm);
  line-height: 2.1;
  color: var(--color-text-secondary);
  word-break: auto-phrase;
}
.lore-block strong { color: var(--color-text-primary); font-weight: 400; }
.lore-block a { color: var(--color-text-gold); border-bottom: 1px solid var(--color-border); }

/* 救済と破滅の定義 */
.lore-defs { margin: 0 0 var(--space-lg); }
.lore-defs dt {
  font-size: var(--text-base);
  color: var(--color-text-gold);
  margin-top: var(--space-lg);
}
.lore-defs dd {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-lg);
  border-left: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 2.1;
  color: var(--color-text-secondary);
  word-break: auto-phrase;
}

/* 舞台 */
.lore-places { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.lore-places li {
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-text-secondary);
  padding-left: var(--space-lg);
  border-left: 1px solid var(--color-border);
  word-break: auto-phrase;
}

/* ── 書庫の抜粋 ──
   ファンクラブの会員頁の「書き出し」だけを見せる。
   下端を暗く落として、文章がまだ続いていることを見た目で伝える。
   **ここに全文を置かない。** 置いた時点で会員限定ではなくなる。 */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0 0;
}
.teaser-card {
  position: relative;
  padding: var(--space-xl);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  min-width: 0;
}
.teaser-kind {
  margin: 0 0 var(--space-xs) !important;
  font-size: var(--text-xs);
  letter-spacing: .14em;
  color: var(--color-text-muted);
}
.teaser-name {
  margin: 0 0 var(--space-md);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text-gold);
}
/* 本文。高さで断ち切り、下端を背景へ溶かす */
.teaser-body {
  position: relative;
  max-height: 11.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.teaser-body p {
  margin: 0 !important;
  font-size: var(--text-sm);
  line-height: 2.1;
  color: var(--color-text-secondary);
  word-break: auto-phrase;
}
.teaser-cont { margin: var(--space-md) 0 0 !important; font-size: var(--text-xs); }
.teaser-cont a { border-bottom: none; }

.lore-more-sub { margin: var(--space-md) 0 0 !important; }

/* FCへの導線 */
.lore-more {
  margin-top: var(--space-4xl);
  padding: var(--space-2xl);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}
.lore-more-title { margin: 0 0 var(--space-md); font-size: var(--text-lg); color: var(--color-text-primary); }
.lore-more p {
  margin: 0 0 var(--space-xl);
  font-size: var(--text-xs);
  line-height: 2;
  color: var(--color-text-secondary);
  word-break: auto-phrase;
}

/* キャラクターのモーダルから資料室・保管庫へ */
.char-modal-more {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
}
.char-modal-more-link {
  font-size: var(--text-xs);
  color: var(--color-text-gold);
  transition: color var(--transition-base);
}
.char-modal-more-link:hover { color: var(--color-gold-bright); }


/* ── キャラクターのモーダルに埋め込む相関図 ──
   実体は別アプリ(sokanzu.monogatari-room.jp)の ?embed=1。
   モーダル自体が縦スクロールするので、高さは控えめに固定する。 */
.char-graph {
  margin: var(--space-md) 0 var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-void);
}
.char-graph iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}
.char-graph-full {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-text-gold);
  transition: color var(--transition-base);
}
.char-graph-full:hover { color: var(--color-gold-bright); }


/* ── ショップ(BASE から取り込んだ商品) ──
   売り切れは描かないので、ここに出ているものは必ず買える。 */
.shop-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.shop-all { font-size: var(--text-xs); color: var(--color-text-gold); }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-lg);
}
.shop-item {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.shop-item-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-abyss);
}
.shop-item-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.shop-item:hover .shop-item-img img { transform: scale(1.05); }
.shop-item-title {
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-secondary);
  word-break: auto-phrase;
}
.shop-item-price { font-size: var(--text-xs); color: var(--color-text-gold); }

/* ── SHOP の節(独立タブ) ──
   HOME のグッズ枠と同じ .shop-grid を使い回す。
   ここは売り切れも出すので、その分の飾りだけ足す。 */
.shop-lead {
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-xl);
  text-align: center;
  font-size: var(--text-sm);
  line-height: 2;
  color: var(--color-text-secondary);
}
.shop-block { max-width: 1000px; margin: 0 auto var(--space-3xl); padding: 0 var(--space-xl); }
.shop-block-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-gold);
  margin: 0 0 var(--space-sm);
}
.shop-block-note {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.shop-foot { text-align: center; margin-top: var(--space-2xl); }

/* 売り切れ: 品は見せるが、買えないことが一目で分かるようにする */
.shop-item.is-sold .shop-item-img { opacity: 0.45; }
.shop-item.is-sold .shop-item-img img { filter: grayscale(0.7); }
.shop-item.is-sold .shop-item-price { color: var(--color-text-muted); }


/* ── 初期設定資料 ──
   もとは保管庫の会員特典。2026-09-13 に一般公開した。 */
.settei-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0 var(--space-2xl);
}
.settei-item {
  display: grid;
  gap: var(--space-sm);
  padding: 0;
  font-family: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 0;
}
.settei-item-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-abyss);
}
.settei-item-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.settei-item:hover .settei-item-img { border-color: var(--color-border-bright); }
.settei-item:hover .settei-item-img img { transform: scale(1.04); }
.settei-item-name {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  word-break: auto-phrase;
}

/* ── 拡大表示 ──
   シートは横長で文字が小さい。通常のモーダル(最大800px)だと読めないので、
   画面いっぱいに出す。それでも足りない人には原寸を別タブで開かせる。 */
.settei-view {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-xl);
  background: rgba(4, 2, 1, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.settei-view.open { opacity: 1; visibility: visible; }
.settei-view-body {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: grid;
  gap: var(--space-md);
  justify-items: center;
}
.settei-view-body img {
  max-width: 100%;
  /* 見出しの行ぶんを引いて、画像だけで画面を超えないようにする */
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-abyss);
}
.settei-view-body figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.settei-view-body figcaption a { color: var(--color-text-gold); }

/* 拡大表示の下の「続きは書庫で」。案内が出ているぶん画像の高さを詰める */
.settei-view { overflow-y: auto; }
.settei-view.has-more .settei-view-body img { max-height: calc(100vh - 18rem); }
.settei-view-more {
  width: min(720px, 100%);
  margin-top: 0;
  padding: var(--space-md) var(--space-xl);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* 半透明だと後ろの頁の文字が透けて読みにくい(狭い画面で目立った) */
  background: var(--color-abyss);
}
.settei-view-more[hidden] { display: none; }
.settei-view-more-text {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xs);
  line-height: 2;
  color: var(--color-text-secondary);
  word-break: auto-phrase;
}
.settei-view-more-text strong { color: var(--color-text-gold); font-weight: 400; }
/* どのプランで読めるか(DR-022)。本文より一段落とす */
.settei-view-more-plan { color: var(--color-text-muted); font-size: .92em; }
.settei-view-more .btn { padding: .65rem 1.6rem; font-size: var(--text-xs); }
.settei-view-more-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
}
@media (max-width: 700px) {
  .settei-view.has-more .settei-view-body img { max-height: calc(100vh - 21rem); }
  .settei-view-more { padding: var(--space-md); }
}
.settei-view-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 44px; height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-secondary);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.settei-view-close:hover { color: var(--color-text-primary); border-color: var(--color-border-bright); }

/* キャラクターのモーダルから、その人のシートへ */
.char-settei {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-md);
  align-items: center;
  width: 100%;
  padding: var(--space-sm);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-gold);
  text-align: left;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.char-settei:hover { border-color: var(--color-border-bright); }
.char-settei img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

/* 節の前置き。見出しのすぐ下に置く短い注記 */
.lore-note {
  margin: calc(var(--space-md) * -1) 0 var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.9;
  word-break: auto-phrase;
}

/* ── CHARACTERS の先頭に置く相関図 ──
   実体は別アプリ(sokanzu.monogatari-room.jp)の ?embed=1。
   一覧より先に「誰と誰が、どう繋がっているか」を見せる。 */
.char-map {
  max-width: 1100px;
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-xl);
}
.char-map-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-void);
}
.char-map-frame iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
}
.char-map-note {
  margin: var(--space-md) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  word-break: auto-phrase;
}
.char-map-note a { color: var(--color-text-gold); margin-left: var(--space-md); }

/* ── 相関図の会員限定 ──
   線引きがされていなければ何も出ない。ここは鍵のかかった人がいるときだけ。 */
.char-map-gate {
  max-width: 640px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(20, 13, 9, 0.5);
  text-align: center;
}
.char-map-gate-note {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.9;
}
.char-map-gate-actions {
  display: flex; gap: var(--space-md);
  align-items: center; justify-content: center; flex-wrap: wrap;
}
.char-map-gate-actions .link-more {
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--color-text-gold);
}

/* 名前だけのカード(会員限定 / 相関図にしかいない人)。
   絵は出さない。錠前か人影だけを置いて、押すと行き先へ送る。 */
.char-series-note {
  margin: calc(var(--space-md) * -1) 0 var(--space-xl);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.character-card--locked,
.character-card--map { text-decoration: none; display: block; }
.card-image--locked,
.card-image--map {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(212, 168, 83, 0.10), rgba(10, 6, 4, 0.5));
  color: rgba(212, 168, 83, 0.55);
}
.card-image--locked { background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(10, 6, 4, 0.55)); }
.card-text--locked, .card-text--map {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── 禁書庫: ファンクラブと繋がった状態 ──
   合言葉は 2026-09-15 に廃止。ここは FC の /api/me の返事で出し分ける。 */
.fc-status { max-width: 640px; margin: 0 auto var(--space-3xl); padding: 0 var(--space-xl); }
.fc-box {
  padding: var(--space-2xl);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}
.fc-box p { margin: 0 0 var(--space-md); font-size: var(--text-sm); line-height: 1.9;
  color: var(--color-text-secondary); word-break: auto-phrase; }
.fc-note { font-size: var(--text-xs) !important; color: var(--color-text-muted) !important; }
.fc-warn { color: var(--color-flame) !important; }
.fc-actions { display: grid; gap: var(--space-md); justify-items: center; margin-top: var(--space-lg); }

.fc-box--member { border-color: rgba(124, 58, 237, 0.4); background: rgba(124, 58, 237, 0.06); }
.fc-rank {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-phantom);
  margin-bottom: var(--space-sm);
}
.fc-welcome { font-size: var(--text-lg) !important; color: var(--color-text-primary) !important; }

.vault-locked-head {
  max-width: 860px;
  margin: var(--space-3xl) auto var(--space-lg);
  padding: 0 var(--space-xl);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* 相関図の覆い。押すまでは図にスクロールを奪わせない */
.char-map-frame { position: relative; }
.char-map-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding-bottom: var(--space-lg);
  font-family: inherit;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 6, 4, 0.72));
  border: 0;
  cursor: pointer;
}
.char-map-cover-label {
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-full);
  background: rgba(10, 6, 4, 0.7);
}
.char-map-cover:hover .char-map-cover-label { border-color: var(--color-gold); }
.char-map-release {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  padding: var(--space-xs) var(--space-md);
  background: rgba(10, 6, 4, 0.8);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-full);
  cursor: pointer;
}


/* ══════════════════════════════════════════
   物販の一枚絵(商品ごとに押せる)
   絵の上に SVG の当たり判定を重ねている。
   明るくしているのは同じ絵を商品の形で切り抜いた複製。
   ══════════════════════════════════════════ */

.shop-scene-slot {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  box-sizing: border-box;
}
/* ヒーロー動画の直後に来る。動画の縁に接していると窮屈なので上にも余白を取る */
#shop-scene-home { margin-top: var(--space-4xl); margin-bottom: var(--space-3xl); }
#shop-scene-shop { margin-bottom: var(--space-3xl); }

.shop-scene { margin: 0; }
/* 絵と当たり判定だけを入れる枠。説明文は外に出す(ここに入れるとずれる) */
.shop-scene-frame {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-abyss);
  line-height: 0;
}
.shop-scene-inner { position: relative; }
.shop-scene-img { display: block; width: 100%; height: auto; }

.shop-scene-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 触れたときだけ出す、商品の形に切り抜いた複製。
   **線で囲まない。** drop-shadow は切り抜いた形の縁からにじむので、
   商品の輪郭に沿った、ぼやけた光だけが浮かぶ。
   ぼかしの数値は絵の座標(2000幅)基準。表示上はおよそ半分の大きさになる。 */
/* 光そのものは app.js が SVG の filter で作る(#sc-glow-*)。
   **ここで filter を足さない。** CSS の drop-shadow はぼかせる範囲が
   形の1割ほどに制限されていて、大きくぼかすと四角く切れて輪郭が崩れる。 */
.scene-glow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 商品そのものの明るさ。**ここが見え方の主役。**
   2026-09-21 に 1.45 → 1.12 まで落としたところ「輪郭が崩れた」と指摘を受けた。
   光を足す前の見え方に戻してある。触るときは慎重に。 */
/* 明るさは app.js の SVG フィルタ(#sc-bright-*)で掛けている。
   **ここに CSS の filter を戻さない。** iPhone の Safari では SVG の中の要素に
   CSS の filter が効かず、スマホで商品が明るくならなかった。 */
.scene-lit { pointer-events: none; }
/* 形そのものが当たり判定。塗りは透明だが反応はする(線は引かない) */
.scene-ring {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}
.scene-hot:hover .scene-glow,
.scene-hot:focus-visible .scene-glow { opacity: 1; }
.scene-hot:focus { outline: none; }

/* ── 見出しまわり ── */
.shop-scene-head { text-align: center; margin: 0 0 var(--space-xl); }
.shop-scene-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.34em;
  color: var(--color-text-muted);
}
.shop-scene-title {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 0.1em;
  color: var(--color-text-gold);
}
.shop-scene-rule {
  display: block;
  margin: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-text-gold);
  opacity: 0.35;
}
/* 折り返しは文言に入れた <wbr> の位置でだけ起こす。
   自動に任せると「ひとつ|ひとつ」「お|求め」のように語の途中で割れた。
   どうしても入らない幅では、最後の手段として任意の位置で折る。 */
.shop-scene-lead,
.shop-scene-note,
.shop-scene-cap {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.shop-scene-lead {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 2;
  color: var(--color-text-secondary);
}
.shop-scene-note {
  margin: var(--space-sm) 0 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.shop-scene-cta { margin: var(--space-md) 0 0; text-align: center; }
/* 触れている商品の名前は金色で出す(既定の案内文と見分けるため) */
.shop-scene-cap.is-item { color: var(--color-text-gold); }

.shop-scene-cap {
  margin: var(--space-md) 0 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-height: 1.5em;
}

/* 狭い画面: 絵を約1.23倍に寄せ、左のソファと燭台だけを削る。
   見せる範囲は横 300〜1930(絵の座標)。右端のボトル(〜1826)と
   右上のロゴ(〜1900)は欠けない。1.28倍にしたらボトルとロゴが切れたので戻した。 */
@media (max-width: 700px) {
  .shop-scene-slot { padding: 0 var(--space-md); }
  .shop-scene-inner { width: 122.7%; margin-left: -18.4%; }
  #shop-scene-home { margin-top: var(--space-2xl); }
}

/* 指で触る画面 */
@media (hover: none) {
  /* 当たり判定の外側に透明な線を足して、指で押しやすくする。
     太さは絵の座標(2000幅)基準。スマホ表示では片側4px前後に相当する。 */
  .scene-ring { stroke: transparent; stroke-width: 54; }
  .scene-hot:active .scene-glow { opacity: 1; }
}

/* 順番に光らせて「押せる」と知らせる(app.js の demoGlow が付け外しする)。
   押された時点で止まる。動きを減らす設定の人には最初から出さない。 */
.scene-hot.is-demo .scene-glow { opacity: 1; }

/* 狭い画面では絵ごと1つのリンクになる(当たり判定は置かない) */
a.shop-scene-frame { display: block; }


/* ══════════════════════════════════════════
   SHOP — ストアの見せ方(2026-09-22)
   サイト全体は金と装飾で「物語の館」を作っているが、SHOP だけは
   アパレルの店のように、無彩色・細い線・広い余白・字間の広い英字で見せる。
   **ここの指定はすべて #section-shop の中に閉じる。** 他の頁に漏らさない。
   ══════════════════════════════════════════ */

#section-shop {
  --st-ink:   #ece8e2;              /* 文字(生成りの白) */
  --st-mute:  #8f8b85;              /* 添え書き */
  --st-line:  rgba(236, 232, 226, 0.14);
  --st-bg:    #0b0b0b;              /* 地(ほぼ黒。金みを抜く) */
  --st-card:  #141414;              /* 商品写真の地 */
  background: var(--st-bg);
  color: var(--st-ink);
  font-family: var(--font-ui);
}

/* ── 頭(ワードマーク) ── */
/* 上の余白は他の頁の見出しと同じ(--space-5xl)。固定ナビの下に潜らせない */
#section-shop .store-head {
  text-align: center;
  padding: var(--space-5xl) var(--space-xl) var(--space-3xl);
}
#section-shop .store-kicker {
  margin: 0 0 var(--space-md);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6em;
  text-indent: 0.6em;               /* 字間ぶん右へずれるのを打ち消して中央に */
  color: var(--st-mute);
}
#section-shop .store-wordmark {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 200;
  font-size: clamp(44px, 9vw, 96px);
  line-height: 1;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--st-ink);
  text-shadow: none;
}
#section-shop .store-sub {
  margin: var(--space-lg) 0 0;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--st-mute);
}
#section-shop .store-sub span {
  display: block;
  margin-top: 6px;
  letter-spacing: 0.3em;
  font-size: 10px;
}

/* ── 一枚絵(キャンペーン写真の扱い) ── */
#section-shop .shop-scene-slot { max-width: 1240px; }
#section-shop .shop-scene-frame {
  border: 0;
  border-radius: 0;
  background: #000;
}
#section-shop .store-scene-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--st-line);
  text-align: left;
}
#section-shop .store-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--st-ink);
}
#section-shop .store-scene-title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--st-mute);
}
#section-shop .shop-scene-cap,
#section-shop .shop-scene-note {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--st-mute);
}
#section-shop .shop-scene-cap.is-item { color: var(--st-ink); }
#section-shop .shop-scene-cta { text-align: left; }
#section-shop .shop-scene-cta .link-more {
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--st-ink);
  border-bottom: 1px solid var(--st-ink);
  padding-bottom: 3px;
  text-decoration: none;
}

/* ── 一覧 ── */
#section-shop .store-lead {
  max-width: 560px;
  margin: var(--space-3xl) auto var(--space-3xl);
  padding: 0 var(--space-xl);
  text-align: center;
  font-size: 12px;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--st-mute);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#section-shop .store-block {
  max-width: 1240px;
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-xl);
}
#section-shop .store-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--st-line);
}
#section-shop .store-block-title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--st-ink);
}
#section-shop .store-block-title span {
  margin-left: 1.2em;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--st-mute);
}
#section-shop .store-count {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--st-mute);
}
#section-shop .store-block-note {
  margin: calc(var(--space-md) * -1) 0 var(--space-lg);
  font-size: 11px;
  color: var(--st-mute);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#section-shop .store-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-lg);
}
#section-shop .store-item {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* 商品写真は枠いっぱいに。BASE の写真は正方形で、地が明るい。
   縦長の枠に小さく収めると「暗い箱に明るい四角が浮く」見え方になり、
   店の写真らしくなかった。正方形の枠に隙間なく敷く。 */
#section-shop .store-item-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--st-card);
}
#section-shop .store-item-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
#section-shop .store-item:hover .store-item-img img { transform: scale(1.04); }
#section-shop .store-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 5px 8px 4px;
  background: rgba(11, 11, 11, 0.86);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--st-ink);
}
#section-shop .store-item.is-sold .store-item-img img { opacity: 0.72; filter: grayscale(0.55); }
#section-shop .store-item-name {
  display: block;
  margin-top: var(--space-md);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--st-ink);
  word-break: auto-phrase;
}
#section-shop .store-item:hover .store-item-name {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
#section-shop .store-item-price {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--st-mute);
}

/* ── 締め(店へ送るボタン) ── */
#section-shop .store-foot {
  text-align: center;
  padding: var(--space-xl) 0 var(--space-3xl);
}
#section-shop .store-btn {
  display: inline-block;
  min-width: 280px;
  padding: 18px 40px;
  border: 1px solid var(--st-ink);
  color: var(--st-ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-decoration: none;
  transition: background 300ms ease, color 300ms ease;
}
#section-shop .store-btn span {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
}
#section-shop .store-btn:hover { background: var(--st-ink); color: var(--st-bg); }

/* 狭い画面: 2列、余白を詰める */
@media (max-width: 900px) {
  #section-shop .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #section-shop .store-head { padding: var(--space-4xl) var(--space-md) var(--space-2xl); }
  #section-shop .store-block { padding: 0 var(--space-md); }
  #section-shop .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-md);
  }
  #section-shop .store-foot { padding-left: var(--space-md); padding-right: var(--space-md); }
  #section-shop .store-btn { min-width: 0; width: 100%; box-sizing: border-box; }
}

/* プラン表のいちばん下の無料の段「読者」(2026-09-26) */
.tier-card--free { border-style: dashed; }
.tier-card--free .tier-rank { letter-spacing: .08em; }
.tier-free-go {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-text-gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}