/* =========================================================================
   実体ページ（楽曲／キャラクター／世界設定／FAQ／作者）専用スタイル
   トップの style.css を土台に、読み物としての可読性だけを足す。
   ========================================================================= */

.subpage main{ position:relative; z-index:1; padding-top:34px; }
.subpage .section{ padding-block:26px 64px; }

.pg{ max-width:760px; }

/* ---- パンくず ---- */
.crumbs{
  font-size:13px; color:var(--muted); margin:0 0 22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.crumbs a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; }
.crumbs a:hover{ color:var(--gold); border-bottom-color:var(--gold-glow); }
.crumb-sep{ color:var(--line); }
.crumbs [aria-current]{ color:var(--text-soft); }

/* ---- 見出し ---- */
.pg h1{
  font-family:var(--serif); font-weight:800; line-height:1.35;
  font-size:clamp(26px,4.6vw,40px); margin:0 0 6px; letter-spacing:.01em;
}
.pg-en{
  font-family:var(--latin); font-style:italic; color:var(--gold-deep);
  font-size:17px; letter-spacing:.04em; margin:0 0 20px;
}
.pg-lede{
  font-size:17px; color:var(--text-soft); line-height:1.95;
  padding-left:16px; border-left:2px solid var(--gold-deep); margin:0 0 30px;
}

.pg-block{ margin:38px 0 0; }
.pg-block h2{
  font-family:var(--serif); font-size:19px; font-weight:700; color:var(--text);
  margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.pg-block p{ margin:0 0 1.1em; }
.pg-block p:last-child{ margin-bottom:0; }

/* ---- 事実表 ---- */
/* flex + flex-grow にすることで、折り返した最終行に空セルを残さない */
.pg-facts{
  display:flex; flex-wrap:wrap;
  gap:1px; margin:26px 0 0; padding:0;
  background:var(--line-soft); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.pg-facts > div{ background:var(--ink-1); padding:13px 16px; flex:1 1 190px; }
.pg-facts dt{ font-size:12px; color:var(--muted); letter-spacing:.08em; margin:0 0 3px; }
.pg-facts dd{ margin:0; font-size:15px; color:var(--text); }

/* ---- 一覧カード ---- */
.pg-cards{ display:grid; gap:16px; margin-top:28px; }
.pg-card{
  background:var(--ink-1); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px;
  transition:border-color .25s ease, transform .25s ease;
}
.pg-card:hover{ border-color:var(--gold-deep); transform:translateY(-2px); }
.pg-card h2{
  font-family:var(--serif); font-size:19px; margin:0 0 4px;
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
}
.pg-card h2 a{ color:var(--text); text-decoration:none; }
.pg-card h2 a:hover{ color:var(--gold); }
.pg-card .badge{
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.06em;
  color:var(--gold); border:1px solid var(--gold-deep); border-radius:999px;
  padding:2px 10px; line-height:1.7;
}
.pg-card-meta{ font-size:13px; color:var(--muted); margin:0 0 9px; }
.pg-card p:last-child{ margin:0; color:var(--text-soft); font-size:15px; }

/* ---- リンクリスト ---- */
.pg-list{ margin:0; padding-left:1.25em; }
.pg-list li{ margin:0 0 .5em; }
.pg-list a{ color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-glow); }
.pg-list a:hover{ border-bottom-color:var(--gold); }
.pg-list--urls{ list-style:none; padding-left:0; }
.pg-list--urls li{ margin:0 0 .85em; }
.pg-list--urls a{ color:var(--text-soft); border-bottom-color:var(--line); }
.pg-list--urls a:hover{ color:var(--gold); }
.pg-url{ display:block; font-size:12px; color:var(--muted); word-break:break-all; line-height:1.6; }
.pg-svc{ color:var(--muted); margin-right:.6em; }
.pg-svc::after{ content:"／"; margin-left:.6em; color:var(--line); }

/* ---- FAQ ---- */
.faq-list{ margin-top:28px; }
.faq-item{
  border-top:1px solid var(--line); padding:24px 0;
}
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item h2{
  font-family:var(--serif); font-size:18px; font-weight:700; margin:0 0 10px;
  color:var(--gold); line-height:1.6;
}
.faq-item p{ margin:0; color:var(--text-soft); }

/* ---- 年表の補足 ---- */
.tl-note{ color:var(--muted); font-size:14px; }

/* ---- 兄弟ページ導線・戻り ---- */
.pg-siblings{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:44px;
  padding-top:22px; border-top:1px solid var(--line);
}
.pg-siblings a{
  font-size:14px; color:var(--text-soft); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:7px 16px;
}
.pg-siblings a:hover{ color:var(--gold); border-color:var(--gold-deep); }

.pg-back{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-size:14px; }
.pg-back a{ color:var(--text-soft); text-decoration:none; }
.pg-back a:hover{ color:var(--gold); }

.pg-note{ font-size:13px; color:var(--muted); margin-top:26px; }

/* ---- 埋め込み動画の余白調整 ---- */
.pg .yt-wrap{ margin:26px 0 0; }

/* ---- 狭い画面 ---- */
/* 実体ページのナビは5項目あり、幅の狭い端末で1行に収まらず左へはみ出すため詰める */
@media (max-width:700px){
  .subpage .menu{ gap:8px 13px; }
  .subpage .menu a{ font-size:13px; letter-spacing:.02em; }
}
@media (max-width:400px){
  .subpage .menu a{ font-size:12px; }
  .subpage main{ padding-top:20px; }
  .pg-lede{ font-size:16px; padding-left:13px; }
}