/*
Theme Name: onnashisho
Description: TVアニメ「同居している剣聖の女師匠が可愛すぎて毎日幸せです」公式サイト
Version: 0.1.0
Text Domain: onnashisho
Requires PHP: 8.1
*/

/* ============================================================
 * 1. Reset
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; color: inherit; font: inherit; padding: 0; }
input, select, textarea, button { font: inherit; }
table { border-collapse: collapse; }

/* ============================================================
 * 2. Design tokens
 * ============================================================ */
:root {
  /* Color — 20260814 カンプ実測値 */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-alt: #f0f0f0;
  --color-border: #d0d0d0;
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-primary: #333333;
  --color-primary-text: #ffffff;
  --color-badge: #4a4a4a;
  --color-tag: #e5e5e5;
  --color-link: #333333;
  --color-link-hover: #000000;
  --color-emphasis: #000000;
  --color-rail: #000000;
  --color-paper: #fffafa;         /* 紙面・ONAIR背景 */
  --color-blush: #ffe6e7;         /* NEWS/INTRO/STAFF背景 */
  --color-cream: #f9f6f2;         /* INTRODUCTION 右面の生成り紙色 (カンプ実測) */
  --color-coral: #ff4040;         /* 見出し・バッジ・現在話数 */
  --color-pink: #ff7676;          /* ナビ有効項目・ハンバーガー・Xバナー枠・MOVIE/STORY枠 */
  --color-nav-disabled: #fed5d6;  /* ナビ準備中項目 (ピンク・ユーザー指示 2026-08-28) */
  --color-wine: #700000;          /* 本文・ボタン・仕切り帯 */
  --color-frame: #ff9d26;         /* 紙面の金枠 (navi-bg.svg と同色) */
  --color-grass: #8cbd8a;         /* フッター芝生 (footer-top.svg と同色) */
  --color-grass-paper: #f3f8f0;   /* フッター SHARE ボックスの淡い若草白 (参考画像 2026-08-28) */
  --color-sky: #e5ecef;           /* CHARACTER 背景の空 */
  --color-brown: #65340f;        /* INTRODUCTION 紙面のドロップシャドウ (カンプ実測) */
  --color-dot: #fd7675;           /* KVスライダードット非アクティブ (ユーザー指示 2026-08-28) */
  --color-dot-current: #ff3f3f;   /* KVスライダードット アクティブ */

  /* Typography — Adobe Fonts (kit: dpp7ycz)
     neutronic-rounded-black(900)=メインビジュアルのナビ / neutronic-rounded(700)=各見出し / zen-maru-gothic(900)=通常の文字 */
  --font-display: "neutronic-rounded", "zen-maru-gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-display-black: "neutronic-rounded-black", "zen-maru-gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "zen-maru-gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;


  /* Font size */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-display: 3.125rem;

  /* Spacing */
  --sp-3xs: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;

  /* Layout */
  --content-max: 62.5rem; /* 1000px — 本文コンテンツ幅 (KV等を除き基本1000px・ユーザー指示 2026-08-17) */
  --sidebar-w: 20rem;
  --sidebar-max: 25rem;
  --z-iris: 1100;   /* ページ遷移オーバーレイ。モーダル (とその +1 のハンバーガー) より上 */
  --z-modal: 1000;
  --z-page-top: 900;
  --z-header: 800;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1.5rem; /* MOVIE 枠・STORY パネルの大きい角丸 (カンプ実測 ≈24px) */
  --radius-pill: 999rem;

  /* Icon (square dimensions) */
  --icon-xs: 1.25rem;   /* 20px */
  --icon-sm: 2rem;      /* 32px */
  --icon-md: 2.25rem;   /* 36px */
  --icon-lg: 2.5rem;    /* 40px */
  --icon-xl: 2.75rem;   /* 44px */
  --icon-2xl: 3rem;     /* 48px */
  --icon-3xl: 3.5rem;   /* 56px */
  --icon-4xl: 4rem;     /* 64px */

  /* Media / thumb widths */
  --media-sm: 8rem;     /* 128px */
  --media-md: 12rem;    /* 192px */
  --media-lg: 16rem;    /* 256px */
  --media-xl: 20rem;    /* 320px */

  /* Hairline (dividers・visually-hidden) */
  --hairline: 0.0625rem;  /* 1px */
  --hairline-2: 0.125rem; /* 2px */
  --border-frame: 0.25rem; /* 4px — 二重線枠 (double は 3px 以上必要) */
  --divider: 0.625rem;     /* 10px — セクション仕切り帯 */
  --dot-size: 0.625rem;    /* 10px — KVスライダードット */
  --dot-pill-w: 5rem;      /* 80px — 現在スライドのピル */
  --grass-h: 8rem;         /* 128px — footer-top.svg (2815.76×776.54) の表示天地 */

  /* Layout minimums (page/TOP heights). rem-only per skill: 48rem ≒ 768px. */
  --layout-min-h: 48rem;
  --content-paper: 62.5rem; /* 1000px — 紙面幅 (コンテンツ幅と同じ) */
}

/* ============================================================
 * 3. Base
 * ============================================================ */
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 900; /* zen-maru-gothic は 900 のみ提供 (通常の文字の指定ウェイト) */
  font-size: var(--fs-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Webフォント読込中 (html.wf-loading) は本文を隠して FOUT を防ぐ。
 * typekit ローダーが読込完了で wf-active、失敗・3秒超過で wf-inactive に差し替えるため
 * 最悪でも3秒後にはフォールバック書体で表示される。JS 無効時は wf-loading 自体が付かない */
.wf-loading body { visibility: hidden; }
a { color: var(--color-link); transition: color 0.2s, opacity 0.2s; }
a:focus { color: var(--color-link-hover); } /* hover 側は @media (hover: hover) に集約 */

/* ============================================================
 * 4. Layouts
 * ============================================================ */
.l-container {
  width: 90%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: var(--sp-xl);
}
/* 下層 (素の l-container で始まるページ): 固定ロゴとの重なりを避ける */
.l-main > .l-container { padding-top: 8.5rem; }
.l-main {
  min-height: var(--layout-min-h);
}
.l-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}
.l-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}

/* ============================================================
 * 5. Components
 * ============================================================ */

/* ---- 下層共通: 左上固定ロゴ (スクロール追従・ユーザー指示 2026-08-17) ---- */
/* logo.svg は viewBox のみで固有寸法が無いため、コンテナに明示幅が必須 */
.c-site-logo {
  position: fixed;
  top: var(--sp-sm);
  left: var(--sp-sm);
  z-index: calc(var(--z-header) + 1); /* c-top-menu と同層 */
  display: block;
  width: var(--media-md); /* 192px → 高さ約90px (397:187) */
}
.c-site-logo__img { width: 100%; } /* display/height はグローバル img (L15) に従う */
.c-hamburger {
  width: var(--icon-lg); height: var(--icon-lg);
  display: inline-flex; flex-direction: column;
  justify-content: center; align-items: center; gap: var(--sp-3xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.c-hamburger span {
  display: block;
  width: var(--icon-xs); height: var(--hairline-2);
  background: var(--color-text);
}


/* ---- TOP 固定ハンバーガー (白ダイヤ飾り + コーラル3本線) ---- */
.c-top-menu {
  position: fixed;
  top: var(--sp-sm);
  right: var(--sp-sm);
  z-index: calc(var(--z-header) + 1); /* 通常時は sticky 相当の層。他モーダルの背面に隠れる */
  width: 4.5rem;   /* 72px — SP (ユーザー指示 2026-08-28)。PC は 768px 以上で 5.5rem */
  height: 4.5rem;
  gap: 0.375rem;   /* 6px — ボタン縮小 (約0.82倍) に合わせた線間隔 */
  border: 0;
  background: url("assets/hamburger-bg.svg") center / contain no-repeat;
  transition: opacity 0.3s, visibility 0.3s; /* TOP PC: KV 通過でフェード表示 (js/main.js が is-kv-visible を付与) */
}
/* 3本線は参考画像 (2026-08-20) 準拠: ボタン幅の約41%・完全角丸・コーラル (SP 実寸。PC は 768px 以上で拡大) */
.c-top-menu span {
  width: 1.875rem;   /* 30px */
  height: 0.25rem;   /* 4px */
  border-radius: var(--radius-pill);
  background: var(--color-coral);
  transition: transform 0.3s, opacity 0.3s;
}
/* メニュー展開中 (このボタンが閉じる X を担う) だけモーダルより前面へ */
.c-top-menu[aria-expanded="true"] { z-index: calc(var(--z-modal) + 1); }
/* 開いている間は3本線を X に変形 (移動量 = 線ピッチ: 高さ + 間隔。SP 0.625rem / PC は 768px 以上で 0.8125rem) */
.c-top-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.625rem) rotate(45deg); }
.c-top-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.c-top-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.625rem) rotate(-45deg); }

/* ---- Global Nav ---- */
.c-gnav {
  margin-top: var(--sp-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xs) var(--sp-md);
}
.c-gnav__item a {
  display: block;
  padding: var(--sp-xs) 0;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.c-gnav__disabled {
  display: block;
  padding: var(--sp-xs) 0;
  color: var(--color-nav-disabled);
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* KVレール (TOP) と MENU モーダルでナビの表現を揃える (ユーザー指示 2026-08-18)。
 * 行間のリズムは項目の上下パディングで作るので .c-gnav の gap は 0 にする */
.p-top__side-nav .c-gnav__item a,
.p-top__side-nav .c-gnav__disabled,
.c-modal--menu .c-gnav__item a,
.c-modal--menu .c-gnav__disabled {
  padding: var(--sp-sm) 0;
  font-family: var(--font-display-black);
  font-size: var(--fs-lg); /* SP。PC では --fs-xl に上げる */
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.p-top__side-nav .c-gnav__item a,
.c-modal--menu .c-gnav__item a { color: var(--color-pink); }
.p-top__side-nav .c-gnav__item a:focus,
.c-modal--menu .c-gnav__item a:focus { color: var(--color-coral); }

/* ---- Modal ---- */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s; /* JS 側 FADE_MS と一致させる */
}
.c-modal:not([hidden]) { display: flex; }
.c-modal.is-open { opacity: 1; }
.c-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 20, 20, 0.7);
}
.c-modal__body {
  position: relative;
  background: var(--color-surface);
  padding: var(--sp-xl) var(--sp-lg);
  width: 90%;
  max-width: var(--content-max);
  max-height: calc(100% - var(--sp-2xl));
  overflow-y: auto;
  border-radius: var(--radius-md);
}
.c-modal__close {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  width: var(--icon-2xl); height: var(--icon-2xl); /* 48px — 推奨タップターゲット */
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--color-wine); /* X ボタンはワイン (ユーザー指示 2026-08-28) */
}
.c-modal--menu .c-modal__body {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  align-items: center;
  justify-content: center;
}
.c-modal--menu .c-gnav {
  grid-template-columns: 1fr;
  gap: 0;
  text-align: center;
}
/* MOVIE / STAFF / ライトボックスの 3 面はトンマナ統一 (ユーザー指示 2026-08-28):
 * 白ベースの明るい半透明の幕・ピンク枠なし・閉じるボタンはコンテンツ右上の外側 (下の共通ルール) */
.c-modal--movie .c-modal__body {
  /* 16:9 の動画高さ + X の頭上余白がビューポートに収まる幅まで縮める */
  width: min(90%, calc((100vh - var(--sp-2xl) * 2 - var(--icon-2xl)) * 16 / 9));
  max-height: none;
  padding: 0;
  border-radius: 0;  /* 角丸は動画枠 (c-movie-frame) が持つ */
  background: none;
  overflow: visible; /* 本体の外に出した X を切らない */
}
/* STAFF コメント: 白パネルだけを表示。長文のスクロールはパネル内で行う */
.c-modal--staff .c-modal__body {
  display: grid;     /* 唯一の在来フロー子 = 白パネルへ高さ制約を伝える (h2/X は absolute) */
  overflow: visible;
  padding: 0;
  border-radius: 0;  /* 角丸は白パネル (c-modal__body-content) が持つ */
  background: none;
  max-height: calc(100% - var(--sp-2xl) - var(--icon-2xl) - var(--sp-xs)); /* X の頭上余白を確保 */
}
.c-modal--staff .c-modal__body-content {
  min-height: 0;     /* grid 子の既定 min-height:auto を解除してパネル内スクロールを有効化 */
  overflow-y: auto;
  padding: var(--sp-lg) var(--sp-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.c-movie-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden; /* iframe の角を角丸に切る */
}
.c-movie-frame iframe {
  width: 100%; height: 100%; border: 0;
}

/* ---- Lightbox (画像の拡大表示: NEWS 詳細本文・TOP CHARACTER) ----
 * 枠なしで画像だけを表示する (ユーザー指示 2026-08-28)。幕は白ベースの明るい半透明で、
 * 閉じるボタンは画像右上の外側。幕は js/main.js が生成する .c-modal__backdrop が担う */
.c-modal--lightbox { padding: var(--sp-lg); }
.c-modal--lightbox .c-modal__body {
  width: auto;       /* 画像の実寸に合わせて縮む (基本の width:90% を打ち消す) */
  max-width: 100%;
  padding: 0;
  border-radius: 0;  /* 角丸は画像側 (c-lightbox__img) が持つ */
  background: none;
  overflow: visible; /* 本体の外に出した X を切らない */
}
.c-lightbox__img {
  display: block;
  max-height: calc(100vh - var(--sp-2xl) * 2 - var(--icon-2xl)); /* X の頭上余白も確保 */
  border-radius: var(--radius-lg);
}
/* 3 面共通: 閉じるボタンはコンテンツの右上外側・幕は白ベースの明るい半透明 (ユーザー指示 2026-08-28) */
.c-modal--movie .c-modal__close,
.c-modal--staff .c-modal__close,
.c-modal--lightbox .c-modal__close {
  top: calc((var(--icon-2xl) + var(--sp-xs)) * -1);
  right: 0;
}
.c-modal--movie .c-modal__backdrop,
.c-modal--staff .c-modal__backdrop,
.c-modal--lightbox .c-modal__backdrop {
  background: rgba(255, 250, 250, 0.85);
}
@media (prefers-reduced-motion: reduce) {
  .c-modal,
  .c-top-menu,
  .c-top-menu span { transition: none; }
  /* hearts の animation:none はソース順の都合で keyframes 定義の直後に置いている */
}

/* ---- Page iris (ページ読み込み時のハートワイプ。js/main.js + GSAP が駆動) ---- */
.c-page-iris {
  position: fixed;
  inset: 0;
  z-index: var(--z-iris);
  display: none;
  pointer-events: none;
}
/* html.is-iris-arrive = ページ読み込み直後 (閉じたまま表示が始まり、ゆっくり開いて紙面を見せる)。
 * 開き切るまで下の UI への操作をブロックする (完了時に js/main.js がクラスを外す) */
.is-iris-arrive .c-page-iris {
  display: block;
  pointer-events: auto;
}
.c-page-iris__svg { display: block; width: 100%; height: 100%; }
.c-page-iris__bg { fill: var(--color-pink); }
.c-page-iris__mini { fill: var(--color-paper); }
.c-page-iris__mini--alt { fill: var(--color-coral); }

/* ---- Tab nav ---- */
.c-tab-nav {
  margin: var(--sp-lg) 0;
}
.c-tab-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  justify-content: center;
}
.c-tab-nav__btn {
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  min-width: var(--icon-2xl);
  font-weight: bold;
}
.c-tab-nav__btn--active,
.c-tab-nav__btn.is_current {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.c-tab-nav__btn--character {
  width: var(--icon-3xl); height: var(--icon-3xl);
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.c-tab-nav__icon { width: 100%; height: 100%; object-fit: cover; }
.c-tab-nav__initial { font-size: var(--fs-lg); font-weight: bold; }

.c-tab-panel { display: none; }
/* 表示切替 (display none→表示) と同時にフェードイン (ユーザー指示 2026-08-21) */
.c-tab-panel--active,
.c-tab-panel.is_show {
  display: block;
  /* 退場側 (ease-in) と組で真のクロスフェードになるよう ease-out。両者を単純な ease に
   * すると中間で双方が半透明になり、背景が透けてしまう */
  animation: tab-fade-in 0.4s ease-out;
}
@keyframes tab-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* クロスフェード: 退場中のパネルを在来フローから外して新パネルへ重ね、フェードアウトさせる。
 * 親 (.js-tab-crossfade) が position:relative であることが前提 (js/main.js が付与する
 * c-tab-panel--leaving は、その親を持つパネルにのみ付く) */
.c-tab-panel--leaving {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  animation: tab-fade-out 0.4s ease-in forwards;
}
@keyframes tab-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.js-tab-crossfade { position: relative; }

/* STORY のサムネ→メイン切替 (js/main.js が旧画像の複製を重ねてクロスフェードする) と
 * 話数連動のセクション背景 (対応ブラウザではクロスフェード) */
.p-top__story-main,
.c-gallery__main { position: relative; }
.c-gallery__ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.c-gallery__ghost.is-fading { opacity: 0; }
.p-top__section--story::before { transition: background-image 0.4s ease; }
@media (prefers-reduced-motion: reduce) {
  .c-tab-panel--active,
  .c-tab-panel.is_show { animation: none; }
  .p-top__section--story::before { transition: none; }
}

/* ---- Buttons ---- */
.c-btn {
  display: inline-block;
  padding: var(--sp-xs) var(--sp-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  background: var(--color-surface);
  font-weight: bold;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.c-btn:focus {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.c-btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.c-btn--primary:focus { background: var(--color-link-hover); }
.c-btn--outline { background: transparent; }
.c-btn--back {
  min-width: var(--media-sm);
}

/* ---- Badges ---- */
.c-badge {
  display: inline-block;
  padding: var(--sp-3xs) var(--sp-sm);
  background: var(--color-badge);
  color: var(--color-primary-text);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  font-weight: bold;
}
.c-badge--bluray { background: var(--color-badge); }
.c-badge--dvd    { background: var(--color-text-muted); }

/* ---- Page Title ---- */
.c-page-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-align: center;
  padding: var(--sp-lg) 0;
  letter-spacing: 0.1em;
}
.c-section-title {
  /* ユーザー指定 (2026-08-18) のベタ書き */
  font-family: neutronic-rounded-black, sans-serif;
  font-size: var(--fs-xl);
  font-weight: 900;
  font-style: normal;
  text-align: center;
  margin-block: var(--sp-lg) var(--sp-md);
  letter-spacing: 0.1em;
}
.c-subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-block: var(--sp-md) var(--sp-xs);
}

/* ---- Card ---- */
.c-card-list {
  padding-inline: 0;
}
.c-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.2s;
}
.c-card__link { display: block; }
.c-card__thumb {
  aspect-ratio: 16 / 9;
  background: var(--color-surface-alt);
}
.c-card__thumb-img {
  width: 100%; height: 100%; object-fit: cover;
}
.c-card--goods .c-card__thumb,
.c-card--special .c-card__thumb {
  aspect-ratio: 1 / 1;
}
.c-card__date {
  display: block;
  padding: var(--sp-sm) var(--sp-sm) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.c-card__title {
  padding: var(--sp-xs) var(--sp-sm) var(--sp-sm);
  font-size: var(--fs-md);
  font-weight: normal;
  line-height: 1.5;
}

/* ---- Gallery ---- */
.c-gallery {
  margin-block: var(--sp-md);
}
.c-gallery__main {
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.c-gallery__main-img {
  width: 100%;
  height: auto;
}
.c-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--icon-4xl), 1fr));
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
}
.c-gallery__thumb-img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

/* ---- Info list ---- */
.c-info-list {
  display: grid;
  grid-template-columns: var(--media-sm) 1fr;
  gap: var(--sp-xs) var(--sp-md);
  margin-block: var(--sp-md);
  padding: var(--sp-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.c-info-list dt {
  font-weight: bold;
  color: var(--color-text-muted);
}

/* ---- Movie button (カンプ: ピンク角丸枠 + ハート再生ボタン。ラベルは visually-hidden) ---- */
.c-movie-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--sp-xs);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-pink);
  transition: opacity 0.2s;
}
.c-movie-btn__thumb {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius-lg) - var(--sp-xs));
}
.c-movie-btn__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem; /* 80px — SP サムネ幅の約 1/4。PC は 768px 以上で上書き */
  aspect-ratio: 118.86 / 103.06; /* heart-play.svg viewBox */
  background: url("assets/heart-play.svg") center / contain no-repeat;
  pointer-events: none;
}

/* ---- Share (丸ブランドアイコン — 参考画像 2026-08-28 準拠) ---- */
.c-share {
  display: flex;
  justify-content: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xs); /* 見出しとの間隔も縮小 (ユーザー指示 2026-08-31) */
}
.c-share__item a {
  display: block;
  width: var(--icon-lg);  /* SP は大きめ 40px (ユーザー指示 2026-08-31)。PC は 768px 以上で icon-md */
  height: var(--icon-lg);
  border-radius: 50%;
}
.c-share__icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Page top button ---- */
.c-page-top {
  position: fixed;
  right: var(--sp-md);
  bottom: var(--sp-md);
  z-index: var(--z-page-top);
  width: var(--icon-xl); height: var(--icon-xl);
  border-radius: 50%;
  background: var(--color-wine); /* ユーザー指示 2026-08-28 */
  color: var(--color-primary-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-md);
  box-shadow: 0 var(--hairline-2) var(--radius-sm) rgba(0, 0, 0, 0.15);
}

/* ---- Copyright ---- */
.c-copyright {
  display: block;
  margin-top: var(--sp-md);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ---- Hero (TOP): SP = KV全面 + サイドバー内容を下に縦積み / PC = 左サイドバー + 右KV ---- */
.p-top__hero {
  position: relative;
  display: grid;
  grid-template-areas:
    "slider"
    "side";
  background: var(--color-surface);
}
.c-hero__slider {
  grid-area: slider;
  position: relative;
  overflow: hidden;
}
.c-hero__slides { display: grid; }
.c-hero__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.6s;
  aspect-ratio: 935 / 1322;
}
.c-hero__slide.is-current { opacity: 1; }
.c-hero__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-hero__dots {
  position: absolute;
  bottom: var(--sp-md);
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  transform: translateX(-50%);
}
.c-hero__dots li { display: flex; }
.c-hero__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-dot);
  transition: width 0.3s, background-color 0.3s;
}
.c-hero__dot.is-current {
  width: var(--dot-pill-w);
  background: var(--color-dot-current);
}

/* ---- Pagination (数字のみ。ボタンは TOP STORY の話数タブと同じ意匠) ---- */
.c-pagination { margin-top: var(--sp-xl); }
.c-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
}
.c-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  min-width: var(--icon-xl); /* SP 44×36 (PC は 768px 以上で 48×40 に上書き) */
  height: var(--icon-md);
  padding-inline: var(--sp-3xs);
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--color-wine);
  color: var(--color-primary-text);
  font-size: var(--fs-lg);
  font-weight: 900;
}
.c-pagination .page-numbers.current { background: var(--color-coral); }
/* 省略記号 (…) はボタンに見せない */
.c-pagination .page-numbers.dots {
  min-width: auto;
  background: none;
  color: var(--color-wine);
}

/* ---- Footer ---- */
.c-footer {
  margin-top: var(--sp-2xl);
  padding-block: var(--sp-lg);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
}
.c-footer__banners {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-sm);
}
.c-footer__banner { flex: 0 1 var(--media-md); }
.c-footer__banner img { width: 100%; }
.c-footer__share-title {
  margin-top: var(--sp-lg);
  font-size: var(--fs-lg);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
}
.c-footer--brand {
  position: relative;
  margin-top: 0; /* 草(::before)を直前セクションに食い込ませる (基底 .c-footer の margin-top を打ち消す) */
  padding-block: var(--sp-lg);
  border-top: 0;
  background: var(--color-grass);
  color: var(--color-surface);
}
.c-footer--brand::before {
  content: "";
  position: absolute;
  top: calc(var(--grass-h) * -1 + var(--hairline));
  right: 0;
  left: 0;
  height: var(--grass-h);
  /* タイル幅を整数px (29rem = 464px ≒ 128px × 2815.76/776.54) に固定する。auto だと
   * 端数になり、リピートの繋ぎ目に端数分の隙間が出る。横に単純リピート (重ねない) */
  background: url("assets/footer-top.svg") left bottom / 29rem 100% repeat-x;
  pointer-events: none;
}
.c-footer--brand .l-container {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-lg);
  background: transparent;
}
.c-footer--brand .c-footer__banner {
  flex-basis: auto;
  width: min(90%, 22.5rem); /* SP: TOP サイドバナー (.p-top__side-banners) と同幅に統一 (ユーザー指示 2026-08-28)。PC は 768px 以上で上書き */
}
.c-footer--brand .c-footer__banners { flex-direction: column; }
/* SHARE ボックス: 淡い角丸パネル + 草色見出し + 丸ブランドアイコン (参考画像 2026-08-28)。
 * SP はバナーと同幅に広げ、見出し・アイコン・上下パディングも拡大 (ユーザー指示 2026-08-31)。PC は 768px 以上で小型のまま */
.c-footer__share-box {
  width: min(90%, 22.5rem); /* SP: フッターバナー (.c-footer--brand .c-footer__banner) と同幅 */
  margin-top: var(--sp-xl); /* 上のバナーとの余白を拡大 32px→48px (ユーザー指示 2026-08-31) */
  margin-inline: auto;
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  border-radius: var(--radius-lg); /* 角丸を拡大 8px→24px (ユーザー指示 2026-08-31) */
  background: var(--color-grass-paper);
}
.c-footer--brand .c-footer__share-title {
  margin-top: 0;
  color: var(--color-grass);
  font-family: var(--font-display-black);
  font-size: var(--fs-2xl); /* PC/SP 共通 32px */
  font-weight: 900;
  letter-spacing: 0.1em;
}
.c-footer--brand .c-copyright { color: var(--color-surface); }

/* ---- Frame box ---- */
.c-frame-box {
  border: var(--border-frame) double var(--color-border);
  background: var(--color-surface);
  padding: var(--sp-lg);
}
/* カンプの飾り枠 (corner-8x.png 実測の1/2スケール・ユーザー指示 2026-08-17): 外枠2px。
 * 内側8pxに完全な矩形、各角は外枠から16pxの位置に長さ18px(=16px+線幅)の短線(縦横)が
 * 矩形と交差して小正方形を作る。TOP・下層 NEWS の紙面で共有 */
.c-frame-box--paper {
  position: relative;
  border: var(--hairline-2) solid var(--color-frame);
  background:
    /* 内側矩形 (枠から0.5rem) */
    linear-gradient(var(--color-frame), var(--color-frame)) left 0.5rem top 0.5rem / calc(100% - 1rem) var(--hairline-2) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) left 0.5rem bottom 0.5rem / calc(100% - 1rem) var(--hairline-2) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) left 0.5rem top 0.5rem / var(--hairline-2) calc(100% - 1rem) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) right 0.5rem top 0.5rem / var(--hairline-2) calc(100% - 1rem) no-repeat,
    /* 角スタブ縦4本 (枠から1rem・長さ1.125rem) */
    linear-gradient(var(--color-frame), var(--color-frame)) left 1rem top 0 / var(--hairline-2) 1.125rem no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) right 1rem top 0 / var(--hairline-2) 1.125rem no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) left 1rem bottom 0 / var(--hairline-2) 1.125rem no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) right 1rem bottom 0 / var(--hairline-2) 1.125rem no-repeat,
    /* 角スタブ横4本 */
    linear-gradient(var(--color-frame), var(--color-frame)) left 0 top 1rem / 1.125rem var(--hairline-2) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) right 0 top 1rem / 1.125rem var(--hairline-2) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) left 0 bottom 1rem / 1.125rem var(--hairline-2) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) right 0 bottom 1rem / 1.125rem var(--hairline-2) no-repeat,
    rgba(255, 255, 255, 0.82); /* 半透明: 背後のハート散布がうっすら透ける (20260818 カンプ) */
  background-origin: border-box; /* オフセットは枠の外端基準 */
}


/* ---- Episode nav (STORY 話数一覧) ---- */
.c-ep-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-md);
}
.c-ep-nav__btn {
  min-width: var(--icon-xl); /* 高さより広めの少し横長 (ユーザー指示 2026-08-20) */
  height: var(--icon-md);
  padding-inline: var(--sp-3xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-wine);
  color: var(--color-primary-text);
  font-size: var(--fs-lg);
  font-weight: 900;
  transition: opacity 0.2s;
}
/* 選択状態は is_current のみ (初期 HTML も Tab システム (js/main.js) も同じクラスを使う) */
.c-ep-nav__btn.is_current { background: var(--color-coral); }

/* ---- Slider nav (左右矢印 + キャラ顔アイコン) ---- */
.c-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm); /* SP。PC は 768px 以上で広げる。選択ハートの拡大分の逃げを含む */
  margin-bottom: var(--sp-lg);
}
.c-slider-nav__arrow {
  flex: 0 0 auto;
  width: var(--icon-lg);  /* SP。PC は 768px 以上で prev/next.svg 実寸 48px */
  height: var(--icon-lg);
  transition: opacity 0.2s;
}
.c-slider-nav__arrow img { width: 100%; }
.c-slider-nav__faces {
  display: flex;
  align-items: center;
  gap: var(--sp-sm); /* SP。選択中の拡大 (scale1.18+縁取り) が隣へ重ならない間隔。PC は 768px 以上で広げる */
}

/* ---- Heart tab (CHARACTER 切替。heart.svg を mask にした顔アイコン) ----
 * 顔画像は白背景つきの矩形素材のため、ハート型 mask 済み画像そのものが
 * 「白ハート + 顔」に見える。選択中は一回り大きい coral ハート (::before) を
 * 背面に敷いて縁取りにする */
.c-heart-tab {
  position: relative;
  display: block;
  width: var(--icon-3xl); /* SP。PC は 768px 以上でカンプ実測幅に上書き */
  aspect-ratio: 118.86 / 103.06; /* heart.svg viewBox */
  transition: opacity 0.2s, transform 0.2s;
}
.c-heart-tab::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: var(--color-coral);
  -webkit-mask: url("assets/heart.svg") center / contain no-repeat;
  mask: url("assets/heart.svg") center / contain no-repeat;
  opacity: 0;
}
.c-heart-tab__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask: url("assets/heart.svg") center / contain no-repeat;
  mask: url("assets/heart.svg") center / contain no-repeat;
}
.c-heart-tab.is_current { transform: scale(1.18); }
.c-heart-tab.is_current::before { opacity: 1; }

/* ---- Zoom button (画像を包むライトボックス起動ボタン) ---- */
.c-zoom-btn {
  display: block;
  width: 100%;
  cursor: zoom-in;
  transition: opacity 0.2s;
}

/* ============================================================
 * 6. Page-specific
 * ============================================================ */

/* ---- TOP (PDF カンプ 20260814 準拠) ---- */
.p-top { font-family: var(--font-body); }

/* ヒーロー左サイドバー (PC)。SP では KV の下に縦積みし、ナビは非表示 */
.p-top__side {
  grid-area: side;
  display: grid;
  gap: var(--sp-md);
  justify-items: center;
  padding: var(--sp-xl) var(--sp-md); /* SP は上下広め (ユーザー指示 2026-08-28)。PC は 768px 以上で上書き */
  background: var(--color-surface);
}
.p-top__side-logo {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  z-index: var(--z-header);
  width: min(40%, var(--media-lg)); /* SP は従来 60% の 2/3 (ユーザー指示 2026-08-28)。PC は 768px 以上で上書き */
}
.p-top__side-logo-link { display: block; }
/* ぼかした白シャドウで背景上の視認性を上げる (PC/SP 共通・ユーザー指示 2026-08-28) */
.p-top__side-logo-img {
  width: 100%;
  filter: drop-shadow(0 0 0.375rem rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1rem rgba(255, 255, 255, 0.7));
}
.p-top__side-badges {
  width: min(90%, 17.1875rem); /* 275px — onair-date.svg 実寸 */
}
.p-top__side-badges img { width: 100%; }
.p-top__side-nav { display: none; }
.p-top__side-banners {
  display: grid;
  gap: var(--sp-sm); /* バナー間 16px (ユーザー指示 2026-08-21) */
  width: min(90%, 22.5rem);
}
.p-top__side-banner { width: 100%; }
.p-top__side-banner img { width: 100%; }
.p-top__side-banner-link { display: block; }

.p-top__section {
  position: relative;
  overflow: hidden;
  border-top: var(--divider) solid var(--color-wine);
  background: var(--color-surface);
  scroll-margin-top: var(--sp-lg);
}
/* MOVIE: 風景イラスト + 白半透明オーバーレイ (::before) */
.p-top__section--movie {
  background: var(--color-paper) url("assets/movie-bg.webp") center / cover no-repeat;
}
.p-top__section--movie::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 250, 250, 0.8); /* 参考画像の白トーンへ近似 (paper と同系のウォーム白) */
  pointer-events: none;
}
.p-top__section > .l-container {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-2xl);
}
.p-top__section--blush { background: var(--color-blush); }
.p-top__section--pale { background: var(--color-paper); }
/* 草フッター (::before) が食い込む分の逃げ。TOP は最終セクションが対象 */
.p-top__section:last-of-type { padding-bottom: calc(var(--grass-h) + var(--sp-2xl)); }
/* 白ハート散布は 2 レイヤーのパララックス (ユーザー指示 2026-08-21):
 * 奥 (::before) = bg-heart-far.svg (885.74×1300.39・小さいハート) — スクロール移動を小さく
 * 手前 (::after) = bg-heart-near.svg (1378.79×1384.12・大きいハート) — スクロール移動を大きく
 * js/main.js がスクロール進行度 --hearts-progress (-1〜1) を更新し、移動量の係数は
 * 各レイヤーの --hearts-shift が持つ。ゆらぎ (hearts-bob) と 1 つの transform に合成する */
.p-top__section--hearts::before,
.p-top__section--hearts::after,
.p-news::before,
.p-news::after {
  content: "";
  position: absolute;
  z-index: 0;
  animation: hearts-bob 8s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
/* 両 SVG はハート寸法/viewBox 比がほぼ同じ (far≈8%・near≈9%) のため、
 * background-size で見かけの大小差をつける (奥=縮小・手前=拡大) */
.p-top__section--hearts::before,
.p-news::before {
  --hearts-shift: calc(var(--hearts-progress, 0) * -1.5rem); /* 奥: 動き小 (±24px) */
  inset: -3rem 0; /* 揺れ ±1rem + 移動 ±1.5rem 分はみ出させ、端の露出を防ぐ */
  background: url("assets/bg-heart-far.svg") center top / 100% auto repeat-y; /* SP。PC は 768px 以上で縮小 */
}
.p-top__section--hearts::after,
.p-news::after {
  --hearts-shift: calc(var(--hearts-progress, 0) * -10rem); /* 手前: 動き大 (±160px) */
  inset: -12rem 0; /* 揺れ ±1rem + 移動 ±10rem 分はみ出させ、端の露出を防ぐ */
  background: url("assets/bg-heart-near.svg") center top / 180% auto repeat-y; /* タイル拡大でハートを大きく */
}
/* .p-news 側は在来フローの子の背面へ */
.p-news::before,
.p-news::after { z-index: -1; }
@keyframes hearts-bob {
  from { transform: translateY(calc(var(--hearts-shift, 0px) - 1rem)); }
  to   { transform: translateY(calc(var(--hearts-shift, 0px) + 1rem)); }
}
/* reduce 環境の打ち消し。@media は特異度を上げないため、
 * 通常宣言 (上の animation: hearts-bob) より後ろに置かないと負ける */
@media (prefers-reduced-motion: reduce) {
  .p-top__section--hearts::before,
  .p-top__section--hearts::after,
  .p-news::before,
  .p-news::after { animation: none; }
}
.p-top .c-section-title {
  margin: 0 0 var(--sp-lg);
  color: var(--color-coral);
  font-size: var(--fs-2xl);
  line-height: 0.9;
  letter-spacing: 0;
}
.p-top .c-section-title--ink { color: var(--color-wine); }
.p-top .c-section-title--ink .c-section-title__sub { color: var(--color-coral); }
.c-section-title__sub {
  display: block;
  margin-top: var(--sp-xs);
  color: currentColor;
  font-family: var(--font-body);
  font-size: var(--fs-md); /* カンプp2「最新情報」実測 ≈16px */
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.p-top__movies {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}
.p-top__movies--single {
  width: min(100%, 47rem); /* 750px — カンプのサムネイル幅 */
  margin-inline: auto;
}

/* ONAIR */
.p-top__onair {
  width: min(100%, var(--content-paper));
  margin-inline: auto;
  text-align: left;
}
.p-top__onair-heading {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-block: var(--sp-lg) var(--sp-md);
  color: var(--color-coral);
  font-size: var(--fs-lg);
  font-weight: 900;
}
.p-top__onair-heading::before {
  content: "";
  flex: 0 0 auto;
  width: 1em;  /* 見出しの文字サイズに追従する赤四角 */
  height: 1em;
  background: var(--color-coral);
}
.p-top__stations { display: grid; }
.p-top__station {
  display: grid;
  gap: var(--sp-xs);
  padding-block: var(--sp-sm);
  color: var(--color-wine);
}
.p-top__station:not(:last-child) { border-bottom: 1px solid var(--color-wine); }
.p-top__station-name { font-weight: 900; }
.p-top__station-time {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.p-top__streams { display: grid; }
.p-top__stream { padding-block: var(--sp-lg); }
.p-top__stream:not(:last-child) { border-bottom: 1px solid var(--color-wine); }
.c-badge-stream {
  display: inline-block;
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-md);
  background: var(--color-coral);
  color: var(--color-primary-text);
  font-size: var(--fs-md);
  font-weight: 900;
}
.p-top__stream-lead {
  margin-top: var(--sp-sm);
  color: var(--color-coral);
  font-size: var(--fs-lg);
  font-weight: 900;
}
.p-top__stream-time {
  margin-top: var(--sp-xs);
  color: var(--color-wine);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.p-top__stream-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}

.p-top__news-paper,
.p-top__staff-paper {
  max-width: var(--content-paper);
  margin-inline: auto;
}
/* SP: 紙面の上下だけ広げる (ユーザー指示 2026-08-28)。左右は c-frame-box の sp-lg のまま。
 * PC は 768px 以上の各 padding 指定が上書きする */
.p-top__news-paper,
.p-top__staff-paper { padding-block: var(--sp-xl); }
/* 行間・罫線は各行の padding-block + border で作る (カンプ: 罫線が全行を等間隔で挟む) */
.c-news-list {
  display: grid;
  padding-inline: 0;
}
.c-news-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs) var(--sp-3xl); /* 横 96px — カンプの日付→タイトル間 ≈90px */
  padding-block: var(--sp-md); /* SP。PC は 768px 以上でカンプの罫線間隔に上書き */
  border-top: 1px solid var(--color-wine);
}
.c-news-row:last-child { border-bottom: 1px solid var(--color-wine); }
.c-news-row__date {
  flex-shrink: 0;
  color: var(--color-wine);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.c-news-row__title {
  color: var(--color-wine);
  font-weight: 700;
}
.p-top__more {
  margin-top: var(--sp-xl); /* 最終罫線→MORE — カンプ実測 ≈70px */
  text-align: center;
}
.c-btn--top {
  padding: 0.75rem 1.75rem; /* 高さ ≈54px・左右 28px — カンプ実測 */
  font-size: var(--fs-xl);  /* カンプ実測 ≈26px */
  line-height: 1.2;
  border-color: var(--color-wine);
  background: var(--color-wine);
  color: var(--color-primary-text);
}
.p-top__more .c-btn--top { min-width: 17.25rem; /* 276px — カンプ MORE 実測 */ }
/* 配信サービス名のボタンは SP では一回り小さく (ユーザー指示 2026-08-28)。PC は 768px 以上で基本サイズへ戻す */
.p-top__streams .c-btn--top { font-size: var(--fs-md); }
/* INTRODUCTION: 森の背景 + 左右 2 面の紙面パネル (カンプの枠・面画像を CSS 化) */
.p-top__section--intro {
  background: var(--color-blush) url("assets/intro-bg.webp") center / cover no-repeat;
}
/* 面のツートーン (左=白 / 右=クリーム) はパネル背景で全高に持つ。
 * SP で画像と本文が縦積みになっても左右分割は変わらない (ユーザー指示 2026-08-20)。
 * 枠線ではなく背面のブラウン板 (::before) をドロップシャドウとして表現する
 * (20260818 カンプ実測: 上 0 / 左右 ≈15px / 下 ≈12px のはみ出し) */
.p-top__intro-panel {
  position: relative;
  display: grid;
  background: linear-gradient(to right, var(--color-surface) 50%, var(--color-cream) 50%);
}
.p-top__intro-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.75rem -1rem -0.75rem; /* 上は面より 12px 下がった位置から (カンプ実測 ≈13px) */
  background: var(--color-brown);
}
.p-top__intro-title {
  padding: var(--sp-xl) var(--sp-md) 0;
  text-align: center;
}
.p-top__intro-main {
  padding: 0 var(--sp-md) var(--sp-lg);
  text-align: center;
}
.p-top__intro-cut {
  width: min(100%, 33.75rem); /* 540px — カンプの場面カット幅 */
  margin-inline: auto;
}
.p-top__intro-cut img { border-radius: var(--radius-lg); }
.p-top__intro-body {
  display: grid;
  align-content: center;
  padding: 0 var(--sp-md) var(--sp-lg); /* SP: 場面カット→本文の間隔を半分 (64px→32px) にするため上 0 (ユーザー指示 2026-08-28)。PC は 768px 以上で上書き */
}
.p-top__intro-text {
  color: var(--color-wine);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 2.2;
  text-align: center;
}
.p-top__intro-text span { display: inline; } /* SP は自然折返し。PC で 1 行 = 1 span */
.p-top__intro-sword {
  position: absolute;
  bottom: calc(var(--sp-2xl) * -1);
  right: calc(var(--sp-sm) * -1);
  width: var(--media-sm);
  animation: sword-float 4s ease-in-out infinite alternate;
}
.p-top__intro-sword img { width: 100%; }
/* 剣がふわふわ浮いて見えるよう、上下+わずかな傾きを往復させる */
@keyframes sword-float {
  from { transform: translateY(-0.5rem) rotate(-1.5deg); }
  to   { transform: translateY(0.5rem) rotate(1.5deg); }
}
/* reduce 環境の打ち消し。@media は特異度を上げないため通常宣言より後ろに置く */
@media (prefers-reduced-motion: reduce) {
  .p-top__intro-sword { animation: none; }
}

/* STORY: 白背景 + 表示中の話の 1 枚目場面写真を透かしで敷く (--story-bg は js/main.js が
 * タブ切替に連動して更新。JS 無効時は 1 話目ダミーの scene-01 にフォールバック) */
.p-top__section--story { background: var(--color-surface); }
.p-top__section--story::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--story-bg, url("assets/scene-01.webp")) center / cover no-repeat;
  opacity: 0.2;
  pointer-events: none;
}
.p-top__story-panel {
  width: min(100%, var(--content-paper));
  margin-inline: auto;
  text-align: center;
}
/* 本編とミニアニメ劇場は別々の半透明シート (カンプ: 面が分かれ、背景の場面写真が透ける) */
.p-top__story-sheet {
  padding: var(--sp-lg) var(--sp-sm);
  border-radius: var(--radius-lg);
  background: rgba(255, 230, 231, 0.8); /* blush の半透明 */
}
.p-top__story-sheet--mini { margin-top: var(--sp-lg); /* 面間の隙間 — カンプ実測 ≈40px */ }
.p-top__story-ep {
  color: var(--color-wine);
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 1.2;
}
.p-top__story-ep b {
  padding-inline: var(--sp-3xs);
  font-size: var(--fs-2xl);
  font-weight: 900;
}
.p-top__story-headline {
  margin-top: var(--sp-xs);
  color: var(--color-coral);
  font-size: var(--fs-lg);
  font-weight: 900;
}
.p-top__story-gallery { margin-top: var(--sp-md); }
.p-top__story-main {
  width: 100%; /* サムネイル 6 枚の列と同幅 (カンプ実測: 内側 ≈900px) */
  border: var(--border-frame) solid var(--color-pink); /* SP 4px。PC は 768px 以上でカンプ実測の太さへ */
  border-radius: 1.75rem; /* 28px — カンプ実測の外側角丸 */
  overflow: hidden;
  background: var(--color-surface);
}
.p-top__story-main-img { width: 100%; height: auto; }
.p-top__story-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xs);
  width: 100%; /* メイン場面写真と同幅 */
  margin: var(--sp-md) auto 0;
}
.p-top__story-thumb {
  display: block;
  width: 100%;
  border: var(--hairline-2) solid var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  transition: opacity 0.2s;
}
.p-top__story-thumb.is-current { border-color: var(--color-pink); }
.p-top__story-thumb-img { width: 100%; height: auto; }
.p-top__story-body {
  width: 100%;
  margin: var(--sp-lg) auto 0;
  color: var(--color-wine);
  text-align: left;
}
/* ミニアニメ劇場シートはシート自体の padding が余白を担うため上マージン不要 */
.p-top__story-sheet--mini .p-top__story-body { margin-top: 0; }
.p-top__story-subtitle {
  color: var(--color-coral);
  font-size: var(--fs-lg); /* SP。PC は 768px 以上でカンプ実測 ≈24px */
  font-weight: 900;
}
.p-top__story-synopsis,
.p-top__story-mini-body,
.p-top__story-mini-credits {
  margin-top: var(--sp-sm);
  font-size: var(--fs-md); /* SP。PC は 768px 以上でカンプ実測 ≈19px */
  font-weight: 700;
  line-height: 1.9;
}
.p-top__story-credits,
.p-top__story-note {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: var(--hairline-2) dashed var(--color-coral);
  font-size: var(--fs-md); /* SP。PC は 768px 以上でカンプ実測 ≈19px */
  font-weight: 700;
}

/* CHARACTER: 村の背景イラスト (支給素材は白フェード済み) */
.p-top__section--character {
  background: var(--color-sky);
}
.p-top__section--character::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/character-bg.webp") center bottom / cover no-repeat;
  pointer-events: none;
}
/* タブパネルとして表示切替されるため display は is_show 側で grid を指定する */
.p-top__chara {
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  max-width: var(--content-paper);
  margin-inline: auto;
}
.p-top__chara.c-tab-panel--active,
.p-top__chara.is_show { display: grid; }
.p-top__chara-visual {
  width: min(60%, var(--media-xl));
  margin-inline: auto;
}
.p-top__chara-visual-img { width: 100%; height: auto; }
.p-top__chara-name {
  margin-bottom: var(--sp-md);
  color: var(--color-coral);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
}
.p-top__chara-cv {
  display: block;
  margin-top: var(--sp-3xs);
  color: var(--color-wine);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 800;
}
.p-top__chara-text {
  color: var(--color-wine);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 2;
}
.p-top__chara-scenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  width: min(100%, 33rem); /* 528px — カンプの場面写真 2 枚幅 */
  margin-top: var(--sp-lg);
}
.p-top__chara-scene-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* STAFF & CAST: 紙面内の名前リスト (1 件目はセンター 1 カラム) */
/* STAFF / CAST のグループ見出し: 意匠は c-section-title のままフォントだけ小さく (ユーザー指示 2026-08-28) */
.p-top .c-section-title--small {
  margin-top: var(--sp-xl);
  font-size: var(--fs-xl);
}
/* CAST 見出し (= リスト直後に来るグループ見出し) は上余白を広めに (ユーザー指示 2026-08-28)。
 * PC 5rem 指定・SP も同比率 (現行 3rem × 5/3) のため PC/SP 共通で 5rem */
.p-top .p-top__staff-list + .c-section-title--small { margin-top: 5rem; /* 80px */ }
.p-top__staff-list {
  display: grid;
  gap: var(--sp-lg); /* 列間を 64px→32px に縮小し行間と統一 (ユーザー指示 2026-08-31) */
  margin-top: var(--sp-lg);
  text-align: center;
}
.p-top__staff-role {
  color: var(--color-coral);
  font-size: var(--fs-sm);
  font-weight: 900;
}
.p-top__staff-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  color: var(--color-wine);
  font-size: var(--fs-lg);
  font-weight: 900;
}
/* 名前の下に添える補足 (例: 原作の出版元表記・ユーザー指示 2026-08-31) */
.p-top__staff-note {
  margin-top: var(--sp-3xs);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}
.p-top__staff-heart {
  flex: 0 0 auto;
  width: var(--icon-sm);
  transition: opacity 0.2s;
}
.p-top__staff-heart img { width: 100%; }

/* ---- NEWS 下層 (20260806 カンプ p2 実測。1400px幅 = CSS px 等倍) ---- */
.p-news {
  position: relative; /* ハートレイヤー (::before) の基準 */
  z-index: 0;         /* 負 z-index の ::before を自身の背景より前に留めるためのスタッキング文脈 */
  overflow: hidden;   /* はみ出したレイヤーを切り落とす */
  /* 固定ロゴ下端より深く帯を下げる (margin だと相殺で body 背景が露出するため padding) */
  padding-top: 10rem; /* SP/PC 共通 (ユーザー指示 2026-08-17) */
  padding-bottom: calc(var(--grass-h) + var(--sp-2xl)); /* 草の食い込み分 + 草上の余白 4rem */
  background: var(--color-blush); /* ハート画像は ::before レイヤーへ移設 */
}
.p-news__title-band {
  background: rgba(255, 255, 255, 0.8); /* カンプ実測: 帯境界の #fffafa = 白80%×blush */
}
.p-news__title-band .l-container { padding-block: var(--sp-md); }
.p-news__page-title {
  margin: 0;
  color: var(--color-coral);
  font-size: var(--fs-3xl); /* SP (ユーザー指示 2026-08-28)。PC は 768px 以上で 4.5rem */
  line-height: 0.9;
  text-align: center;
}
.p-news__stage {
  min-height: var(--layout-min-h);
  padding-block: var(--sp-xl) var(--sp-2xl);
}
.p-news__stage .l-container { padding-block: 0; /* PC 全体則の padding-block 4rem を打ち消す (帯→紙面はカンプ43px) */ }
.p-news__paper {
  width: 100%;
  max-width: var(--content-paper);
  margin-inline: auto;
  padding: var(--sp-lg) var(--sp-md); /* SP: 左右を飾り枠から離す (PC は 768px 以上で上書き) */
  /* 飾り枠・塗りはテンプレート側の c-frame-box--paper で TOP と共通 (ユーザー指示 2026-08-17) */
}
/* NEWS 一覧: 罫線は行間のみ (先頭行の上・最終行の下は無し・ユーザー指示 2026-08-20) */
.p-news__paper .c-news-row:first-child { border-top: 0; }
.p-news__paper .c-news-row:last-child { border-bottom: 0; }
.p-news__header { margin-bottom: var(--sp-lg); /* SP: 32px (PC は 768px 以上でカンプ49px に上書き) */ }
.p-news__date {
  display: block;
  margin-bottom: var(--sp-xs);
  color: var(--color-wine);
  font-size: var(--fs-lg);
  font-weight: 900;
}
.p-news__title {
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--color-wine);
  color: var(--color-wine);
  font-size: var(--fs-lg); /* SP: 20px (PC は 768px 以上で 34px に上書き) */
  font-weight: 900;
  line-height: 1.5;
}
.p-news__body {
  color: var(--color-wine);
  font-size: var(--fs-md); /* SP: 16px (PC は 768px 以上で 18px に上書き) */
  font-weight: 700;
  line-height: 2; /* PC/SP 共通で行間を詰める (旧 2.6) */
}
.p-news__body img {
  width: 100%;
  margin-block: var(--sp-md);
  cursor: zoom-in; /* ライトボックス起動 (js/main.js) */
}
.c-news-empty {
  color: var(--color-wine);
  text-align: center;
}
.p-news__back {
  margin-top: var(--sp-xl);
  text-align: center;
}

/* ---- STORY ---- */
.p-story__intro {
  padding: var(--sp-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.p-story__ep-heading {
  font-size: var(--fs-lg);
  margin-block: var(--sp-lg) var(--sp-md);
  text-align: center;
}
.p-story__ep-no { display: block; }
.p-story__ep-mini { font-size: var(--fs-md); color: var(--color-text-muted); }
.p-story__credits {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-xs);
}

/* ---- CHARACTER ---- */
.p-character__panel {
  display: none;
  padding: var(--sp-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.p-character__panel.c-tab-panel--active,
.p-character__panel.is_show { display: grid; grid-template-columns: 1fr; gap: var(--sp-lg); }
.p-character__standing-img { max-width: 100%; margin-inline: auto; }
.p-character__en { color: var(--color-text-muted); font-size: var(--fs-sm); }
.p-character__name { font-size: var(--fs-2xl); margin-bottom: var(--sp-xs); }
.p-character__cv { color: var(--color-text-muted); margin-bottom: var(--sp-sm); }
.p-character__desc { margin-bottom: var(--sp-md); }
.p-character__faces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--icon-4xl), 1fr));
  gap: var(--sp-xs);
}
.p-character__face-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- STAFF & CAST ---- */
.p-staffcast__section { margin-top: var(--sp-xl); }
.p-staffcast__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}
.p-staffcast__person {
  padding: var(--sp-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  position: relative;
}
.p-staffcast__role { color: var(--color-text-muted); font-size: var(--fs-sm); }
.p-staffcast__name { font-size: var(--fs-lg); font-weight: bold; }
.p-staffcast__note { color: var(--color-text-muted); font-size: var(--fs-sm); }
.p-staffcast__comment-btn {
  position: absolute;
  top: var(--sp-sm); right: var(--sp-sm);
  width: var(--icon-sm); height: var(--icon-sm);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
}
/* コメントモーダル: 名前・コメント・画像の縦積み (画像は末尾・ユーザー指示 2026-08-21) */
.p-staffcast__modal-inner { display: grid; gap: var(--sp-md); }
.p-staffcast__modal-photo-img { width: 100%; height: auto; border-radius: var(--radius-sm); }
/* 文字色はセクションの表記と揃える (役職=コーラル / 名前・本文=ワイン・ユーザー指示 2026-08-21) */
.p-staffcast__modal-role {
  color: var(--color-coral);
  font-size: var(--fs-sm);
  font-weight: 900;
}
.p-staffcast__modal-name {
  color: var(--color-wine);
  font-size: var(--fs-lg);
  font-weight: 900;
}
.p-staffcast__modal-note {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}
.p-staffcast__modal-body {
  color: var(--color-wine);
  margin-top: var(--sp-sm);
}

/* ---- Blu-ray & DVD ---- */
.p-bddvd__product {
  margin-block: var(--sp-lg);
  padding: var(--sp-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.p-bddvd__product-header {
  display: flex; align-items: center; gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--sp-sm);
}
.p-bddvd__product-name { font-size: var(--fs-lg); font-weight: bold; }
.p-bddvd__product-body { display: grid; gap: var(--sp-md); }
.p-bddvd__jacket-img { width: 100%; max-width: var(--media-xl); margin-inline: auto; }
.p-bddvd__package {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--media-md) - var(--sp-lg)), 1fr));
  gap: var(--sp-sm);
}
.p-bddvd__bonus-list { padding-inline: 0; }
.p-bddvd__bonus {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm);
  text-align: center;
}
.p-bddvd__bonus-store { font-weight: bold; margin-bottom: var(--sp-xs); }
.p-bddvd__bonus-img { margin-inline: auto; }
.p-bddvd__bonus-label { font-weight: bold; margin-top: var(--sp-xs); }

/* ---- MUSIC ---- */
.p-music__song {
  margin-block: var(--sp-lg);
  padding: var(--sp-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.p-music__song-header {
  display: flex; align-items: center; gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.p-music__song-title { font-size: var(--fs-lg); }
.p-music__song-body { display: grid; gap: var(--sp-md); }
.p-music__jacket-img { max-width: var(--media-lg); margin-inline: auto; }
.p-music__service-list {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-xs);
  padding-inline: 0;
}
.p-music__karaoke {
  width: 100%;
  border: 1px solid var(--color-border);
}
.p-music__karaoke th,
.p-music__karaoke td {
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--color-border);
  text-align: left;
}

/* ---- COMICS ---- */
.p-comics__subheading {
  text-align: center;
  font-size: var(--fs-xl);
  margin-block: var(--sp-lg);
}
.p-comics__list { padding-inline: 0; }
.p-comics__volume {
  padding: var(--sp-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.p-comics__cover-img { max-width: var(--media-md); margin-inline: auto; }
.p-comics__title { font-size: var(--fs-lg); margin-top: var(--sp-sm); }
.p-comics__author,
.p-comics__catchcopy { color: var(--color-text-muted); font-size: var(--fs-sm); }
.p-comics__synopsis { margin-block: var(--sp-sm); text-align: left; }
.p-comics__banner { display: inline-block; margin-top: var(--sp-sm); }
.p-comics__origin-link { text-align: center; margin-top: var(--sp-xl); }

/* ---- ON AIR ---- */
.p-onair__announcement {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: bold;
  margin-block: var(--sp-lg);
}
.p-onair__version-table,
.p-onair__station-table {
  width: 100%;
  margin-inline: auto;
  border-collapse: collapse;
}
.p-onair__version-table th,
.p-onair__version-table td,
.p-onair__station-table th,
.p-onair__station-table td {
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--color-border);
  text-align: left;
  background: var(--color-surface);
}
.p-onair__version-table th { background: var(--color-surface-alt); }
.p-onair__notes {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-sm);
}
.c-onair-version { margin-block: var(--sp-lg); }
.c-onair-version__label { font-size: var(--fs-lg); font-weight: bold; margin-bottom: var(--sp-sm); }
.c-onair-version__services {
  display: flex; flex-direction: column; gap: var(--sp-xs);
  padding-inline: 0;
}
.c-onair-version__service {
  display: flex; align-items: center; gap: var(--sp-sm);
  flex-wrap: wrap;
}
.c-onair-version__start {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  min-width: var(--media-sm);
}

/* ---- GOODS 詳細 ---- */
.p-goods__card {
  background: var(--color-surface);
  padding: var(--sp-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.p-goods__release { text-align: center; margin-block: var(--sp-sm); }
.p-goods__purchase { text-align: center; margin-top: var(--sp-md); }
.p-goods__back { text-align: center; margin-top: var(--sp-lg); }

/* ---- SPECIAL 詳細 ---- */
.p-special__card {
  background: var(--color-surface);
  padding: var(--sp-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.p-special__lead { margin-bottom: var(--sp-md); }
.p-special__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
  padding-inline: 0;
}
.p-special__gallery-img { width: 100%; }
.p-special__back { text-align: center; margin-top: var(--sp-lg); }

/* ---- 404 ---- */
.p-404 { text-align: center; }

/* ============================================================
 * 7. Utilities & A11y
 * ============================================================ */
.u-fs-sm  { font-size: var(--fs-sm); }
.u-fs-lg  { font-size: var(--fs-lg); }
.u-mt-sm  { margin-top: var(--sp-sm); }
.u-mt-md  { margin-top: var(--sp-md); }
.u-mt-lg  { margin-top: var(--sp-lg); }
.u-ta-center { text-align: center; }

.u-visually-hidden {
  position: absolute;
  width: var(--hairline); height: var(--hairline);
  padding: 0; margin: calc(var(--hairline) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * 8. Body-level lock (JS-controlled)
 * ============================================================ */
body.is-modal-open {
  overflow: hidden;
}

/* ============================================================
 * 9. Hover 表現 (ポインタデバイスのみ)
 * タッチ端末では hover が張り付いて誤操作の原因になるため、
 * hover を伴う表現はここに閉じ込める (ユーザー指示 2026-08-18)
 * ============================================================ */
@media (hover: hover) {
  /* リンクとボタンは opacity で反応させる */
  a:hover,
  .c-btn:hover { opacity: 0.7; }
  .c-card:hover { transform: translateY(calc(var(--hairline-2) * -1)); }
  .c-movie-btn:hover { opacity: 0.7; }
  /* TOP の新ボタン類 (話数タブ / ハートタブ / スライダー矢印 / サムネ / ハートコメント / 拡大) */
  .c-ep-nav__btn:hover,
  .c-heart-tab:hover,
  .c-slider-nav__arrow:hover,
  .p-top__story-thumb:hover,
  .p-top__staff-heart:hover,
  .c-zoom-btn:hover { opacity: 0.7; }
  /* KVレール / MENU モーダルのナビ: 色替え + ダイヤ飾り */
  .p-top__side-nav .c-gnav__item a:hover,
  .c-modal--menu .c-gnav__item a:hover {
    position: relative;
    z-index: 2;
    color: var(--color-coral);
  }
  .p-top__side-nav .c-gnav__item a:hover::before,
  .c-modal--menu .c-gnav__item a:hover::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    width: var(--icon-2xl);
    height: var(--icon-2xl);
    background: url("assets/navi-bg.svg") center / contain no-repeat;
  }
  .p-top__side-nav .c-gnav__item a:hover::before {
    left: -0.9rem;
    transform: translateY(-50%);
  }
  .c-modal--menu .c-gnav__item a:hover::before {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ============================================================
 * 10. PC (min-width: 768px)
 * ============================================================ */
@media (min-width: 768px) {
  .l-container {
    width: min(90%, var(--content-max));
    padding-inline: 0;
    padding-block: var(--sp-2xl);
  }

  .l-grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
  .l-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }

  /* TOP (PDF カンプ 20260814 準拠) */
  .c-top-menu {
    top: var(--sp-md);
    right: var(--sp-md);
    width: 5.5rem;  /* 88px */
    height: 5.5rem;
    gap: var(--sp-xs);
  }
  .c-top-menu span {
    width: 2.25rem;     /* 36px */
    height: 0.3125rem;  /* 5px */
  }
  .c-top-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.8125rem) rotate(45deg); }
  .c-top-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.8125rem) rotate(-45deg); }
  /* TOP: KV が見えている間はハンバーガーを隠し、通過でフェードイン (js/main.js が is-kv-visible を付与・PC のみ) */
  .c-top-menu.is-kv-visible {
    opacity: 0;
    visibility: hidden;
  }
  .p-top__hero {
    /* 100vw は縦スクロールバー幅を含み親幅を超えるため minmax(0,1fr) で収める */
    grid-template-columns: 25rem minmax(0, 1fr);
    grid-template-areas: "side slider";
  }
  .p-top__side {
    position: sticky;
    top: 0;
    align-self: start; /* stretch のままだと列いっぱいに伸びて sticky が効かない */
    align-content: start;
    gap: var(--sp-lg);
    padding: var(--sp-xl) var(--sp-lg) var(--sp-lg);
  }
  .p-top__side-logo {
    position: static;
    width: min(100%, var(--sidebar-max));
  }
  .p-top__side-nav {
    display: block;
    width: 90%;
  }
  .p-top__side-nav .c-gnav {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
  }
  /* PC ではレールと MENU モーダルを揃えて 1 段大きくする (他の指定は共通ブロック側) */
  .p-top__side-nav .c-gnav__item a,
  .p-top__side-nav .c-gnav__disabled,
  .c-modal--menu .c-gnav__item a,
  .c-modal--menu .c-gnav__disabled { font-size: var(--fs-xl); }
  .p-top__side-nav .c-gnav__item--marked { position: relative; }
  .c-hero__dots { bottom: var(--sp-xl); }
  .p-top__section > .l-container { padding-block: var(--sp-3xl); }
  .p-top .c-section-title { font-size: var(--fs-display); }
  .p-top .c-section-title--small { font-size: var(--fs-2xl); }
  .p-top__movies:not(.p-top__movies--single) { grid-template-columns: repeat(2, 1fr); }
  .c-movie-btn__play { width: 9rem; /* 144px — 参考画像のハート比率 (サムネ幅の約19%) */ }
  /* ONAIR: カンプ実測 — 見出し≈32px・局名/日時≈24px・リード≈32px・行ピッチ≈155px */
  .p-top__onair-heading {
    margin-block: var(--sp-xl) var(--sp-lg);
    font-size: var(--fs-2xl);
  }
  .p-top__station {
    grid-template-columns: minmax(var(--media-sm), var(--media-md)) 1fr;
    align-items: baseline;
    gap: var(--sp-2xl);
    padding-block: var(--sp-lg);
  }
  .p-top__station-name { text-align: center; }
  .p-top__station-name,
  .p-top__station-time { font-size: var(--fs-xl); }
  .p-top__stream { padding-block: var(--sp-xl); }
  .c-badge-stream { font-size: var(--fs-xl); }
  .p-top__stream-lead {
    margin-top: var(--sp-md);
    font-size: var(--fs-2xl);
  }
  .p-top__stream-time {
    margin-top: var(--sp-sm);
    font-size: var(--fs-xl);
  }
  .p-top__stream-services { margin-top: var(--sp-lg); }
  .p-top__streams .c-btn--top { font-size: var(--fs-xl); } /* SP の縮小を基本サイズへ戻す */
  .p-top__news-paper {
    padding: var(--sp-xl) var(--sp-2xl);
  }
  .c-news-row {
    flex-direction: row;
    align-items: baseline;
    padding-block: var(--sp-xl); /* 罫線間隔 ≈130px — カンプ実測 137px */
  }
  .c-news-row__date,
  .c-news-row__title { font-size: var(--fs-lg); /* カンプ実測 ≈20px */ }
  /* 見出しはパネル全幅の中央 (白/クリーム境界をまたぐ)。左右カラムは同幅 */
  .p-top__intro-panel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "main  body";
  }
  .p-top__intro-title { grid-area: title; padding: var(--sp-xl) var(--sp-xl) 0; }
  .p-top__intro-main { grid-area: main; padding: var(--sp-md) var(--sp-xl) var(--sp-2xl); }
  .p-top__intro-body {
    grid-area: body;
    padding: var(--sp-md) var(--sp-xl) var(--sp-2xl);
  }
  .p-top__intro-text span { display: block; } /* カンプの改行位置を維持 */
  .p-top__intro-sword {
    right: calc(var(--sp-lg) * -1);
    width: var(--media-md);
  }
  .c-ep-nav { gap: var(--sp-sm); }
  .c-ep-nav__btn {
    min-width: var(--icon-2xl); /* 48×40px の少し横長 */
    height: var(--icon-lg);
  }
  .p-top__story-sheet { padding: var(--sp-2xl) var(--sp-xl); }
  .p-top__story-main { border-width: 0.625rem; /* 10px — カンプ実測の枠太さ */ }
  .p-top__story-ep b { font-size: var(--fs-3xl); }
  .p-top__story-headline { font-size: var(--fs-xl); }
  .p-top__story-subtitle { font-size: var(--fs-xl); /* カンプ実測 ≈24px */ }
  .p-top__story-synopsis,
  .p-top__story-mini-body,
  .p-top__story-mini-credits,
  .p-top__story-credits,
  .p-top__story-note { font-size: var(--fs-lg); /* カンプ実測 ≈19px */ }
  .p-top__story-thumbs { grid-template-columns: repeat(6, 1fr); }
  .c-heart-tab { width: 5.625rem; /* 90px — カンプ実測 */ }
  .c-slider-nav {
    justify-content: space-between;
    gap: var(--sp-md);
    max-width: var(--content-paper);
    margin-inline: auto;
  }
  .c-slider-nav__arrow {
    width: var(--icon-2xl);
    height: var(--icon-2xl);
  }
  .c-slider-nav__faces { gap: var(--sp-md); } /* 選択ハートの拡大が隣へ重ならない間隔 */
  .p-top__section--character > .l-container {
    min-height: 60rem;
  }
  .p-top__chara {
    grid-template-columns: 21rem 1fr; /* カンプの立ち絵337px : 情報欄 */
    gap: var(--sp-xl);
    align-items: start;
  }
  .p-top__chara-visual { margin-inline: 0; width: 100%; }
  .p-top__chara-scenes { margin-top: var(--sp-2xl); }
  .p-top__chara-name { font-size: var(--fs-2xl); }
  .p-top__section--staffcast > .l-container {
    padding-block: var(--sp-3xl);
  }
  .p-top__staff-paper {
    padding: var(--sp-2xl);
  }
  .p-top__staff-list {
    /* 左右の列は同幅を維持 (ユーザー指示 2026-08-31)。fit-content 幅の 1fr 1fr は
     * 「両列とも最長文字列の幅」に解決されるため、等幅のままグリッドごと縮んで中央に寄る */
    width: fit-content;
    margin-inline: auto;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-2xl); /* 文字同士の距離 48px→64px (ユーザー指示 2026-08-31)。行間は基底の 32px のまま */
    margin-top: var(--sp-xl);
  }
  /* 奇数個の最後の 1 件 (例: STAFF の「製作」) は列を占有せず中央表示 (ユーザー指示 2026-08-31) */
  .p-top__staff-item:nth-child(odd):last-child { grid-column: 1 / -1; }

  /* Character panel: 2 column on PC */
  .p-character__panel.c-tab-panel--active,
  .p-character__panel.is_show {
    grid-template-columns: minmax(var(--sidebar-w), var(--sidebar-max)) 1fr;
  }

  /* STAFF & CAST: 2 column on PC */
  .p-staffcast__list { grid-template-columns: 1fr 1fr; }

  /* SPECIAL gallery 2 column on PC */
  .p-special__gallery { grid-template-columns: repeat(2, 1fr); }

  /* BDDVD product 2 column */
  .p-bddvd__product-body { grid-template-columns: var(--media-xl) 1fr; align-items: start; }
  .p-bddvd__jacket { grid-row: span 4; }

  /* MUSIC song 2 column */
  .p-music__song-body { grid-template-columns: var(--media-lg) 1fr; align-items: start; }
  .p-music__jacket { grid-row: span 4; }


  .c-site-logo {
    top: var(--sp-md);
    left: var(--sp-md);
    width: 14.5rem; /* 232px — カンプp2ロックアップ実測幅 (高さ約109px) */
  }
  .p-news__page-title { font-size: 4.5rem; /* カンプ NEWS キャップ高53px */ }
  .p-news__paper {
    padding: var(--sp-2xl); /* カンプ65px ≈ 4rem */
  }
  .p-news__article {
    min-height: 66.5rem; /* カンプ紙面実測 1064px */
  }
  .c-footer--brand .c-footer__banners { flex-direction: row; gap: var(--sp-2xl); }
  .c-footer--brand .c-footer__banner { flex-basis: var(--media-lg); width: auto; /* SP の統一幅を解除 */ }
  /* SHARE (ユーザー指示 2026-08-31): PC は小型のまま — アイコン 36px・パネルはアイコン列を包む幅・上下パディング 16/24px */
  .c-footer--brand .c-share { gap: var(--sp-md); }
  .c-footer--brand .c-share__item a {
    width: var(--icon-md);
    height: var(--icon-md);
  }
  .c-footer__share-box {
    width: fit-content;
    padding: var(--sp-sm) var(--sp-xl) var(--sp-md);
  }
  .p-news__title {
    padding-bottom: 2.5rem; /* タイトル→罫線 カンプ41px */
    font-size: 2.125rem;    /* カンプ34px */
  }
  .p-news__body {
    font-size: 1.125rem; /* カンプ18px */
  }
  .p-news__header {
    margin-bottom: var(--sp-xl); /* 罫線→本文 カンプ49px */
  }
  /* ハート散布: PC は奥をさらに縮小して遠近差を強調 (60% タイルは横も繰り返す) */
  .p-top__section--hearts::before,
  .p-news::before {
    background-size: 60% auto;
    background-repeat: repeat;
  }
  .p-top__section--hearts::after,
  .p-news::after { background-size: 150% auto; }
  /* ページネーション: PC は話数タブと同じ 48×40px */
  .c-pagination .page-numbers {
    min-width: var(--icon-2xl);
    height: var(--icon-lg);
  }
  /* Modal body wider */
  .c-modal__body { padding: var(--sp-2xl); }
  .c-modal--staff .c-modal__body-content { padding: var(--sp-xl); }
  /* 行間はレールと同じく項目のパディングで作るので row-gap は 0 */
  .c-modal--menu .c-gnav { grid-template-columns: 1fr 1fr; gap: 0 var(--sp-2xl); }
}