/* tanimura.com 暫定ページ 共通スタイル
   フォント: Google Fonts（Bodoni Moda / Shippori Mincho / Noto Sans JP）を各HTMLの<head>で読み込み
   配色: 写真の背景（生成り）に、墨藍の文字と、スカーフの紅を一点だけ重ねる */

:root {
  /* ===== 季節の配色（背景写真を替えたら、ここだけ直す） =====
     --paper と --paper-rgb、--ink と --ink-rgb は同じ色を2通りに書いたもの。片方だけ変えないこと。
     スマホのブラウザ上部の色（theme-color）は、menu.js が --paper を読んで合わせる */
  --paper: #e7d7c7;              /* 写真の背景色と同じ */
  --paper-rgb: 231, 215, 199;    /* --paper を数値で（半透明の背景・ぼかしに使う） */
  --ink: #232a3b;                /* 墨藍 */
  --ink-rgb: 35, 42, 59;         /* --ink を数値で */
  --crimson: #ad1f4a;            /* スカーフの紅（差し色） */
  --header-scrolled: var(--header-scrolled);   /* PCでスクロールしたときのヘッダー（生成りより明るい半透明） */
  --leaf-1: #c7392f;             /* 落ち葉の色（3色を6枚に割り当て） */
  --leaf-2: #b5314a;
  --leaf-3: #d38a2c;
  /* ===== 配色ここまで ===== */
  --ink-soft: rgba(var(--ink-rgb), .72);
  --rule: rgba(var(--ink-rgb), .2);
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  /* 書体の使い分けは旧サイトと同じ：本文・メニュー・日付などはゴシック、ページ見出し・記事タイトルなどの見出しだけ明朝 */
  --mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;   /* 見出し用（和文・英数字とも同じ書体） */
  --title-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;   /* タイトル「谷村新司」専用（固定・指示なしに変えない） */
  --gothic: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --frame: 1240px;                                         /* PCで本文と写真をまとめる幅 */
  --gutter: max(0px, calc((100vw - var(--frame)) / 2));   /* その外側の余白（写真の背景色） */
  --col: min(720px, max(500px, 56vw), 100%);              /* 本文の列幅（人物の手前まで） */
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  display: flow-root;            /* 先頭要素の上余白がbodyの外にはみ出さないように */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
/* 紙の質感（ごく薄く） */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: inherit; text-decoration: none; }   /* リンクは下線なし（ホバーで紅色） */
a:hover { color: var(--crimson); }
a:focus-visible { outline: 2px solid var(--crimson); outline-offset: 4px; }

/* ---------- 見出し ---------- */
.site-title { margin: 0; font-weight: 400; line-height: 1; font-size: clamp(2.5rem, 5.6vw, 4.2rem); }
.site-title .ja, .header-title .ja {   /* トップの大タイトルとヘッダーのロゴは同じ組み文字 */
  display: block;
  font-family: var(--title-mincho);
  font-weight: 600;
  letter-spacing: .14em;
}
.site-title .en, .header-title .en {
  display: block;
  margin-top: 1em;
  font-family: var(--display);
  font-style: italic;
  font-size: .228em;           /* 「谷村新司」の幅にそろう大きさ（実測） */
  letter-spacing: .04em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* SNSアイコン（メニュー右端。角丸の枠付き・ホバーで紅色）
   枠の太さ・角丸・マークの大きさは fleu2.net のアイコン（48px画像）の比率に合わせる */
.sns-icons { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sns-icons a { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.25px solid currentColor; border-radius: 3.5px; }
.sns-icons svg { display: block; fill: currentColor; }
.sns-icons .x svg { width: 13px; height: 13px; }      /* マークは枠の約56% */
.sns-icons .line svg { width: 16px; height: 16px; }   /* 吹き出しは枠の約64% */
h2.label {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px;
  font-family: var(--gothic);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .32em;
}
#news-title { font-family: var(--mincho); font-size: 1.3rem; letter-spacing: .28em; margin-bottom: 18px; }   /* 新着情報の見出しは大きめ・明朝 */
section[aria-labelledby="news-title"] { margin-top: clamp(60px, 7.4vh, 80px); }   /* 新着情報のパートを見出しから離す */
section { margin-top: 52px; }

/* ---------- 新着の行 ---------- */
ul.news-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
ul.news-rows li { border-bottom: 1px solid var(--rule); }
ul.news-rows a {
  display: grid;
  grid-template-columns: 7.2em 1fr;
  align-items: baseline;
  gap: 2px 16px;
  padding: 15px 2px;
  color: inherit;
  text-decoration: none;
}
ul.news-rows .date { font-family: var(--gothic); font-weight: 400; font-size: .95rem; color: var(--crimson); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; }
ul.news-rows .title { font-family: var(--gothic); font-weight: 400; font-size: .98rem; justify-self: start; }
ul.news-rows a:hover, ul.news-rows a:focus-visible { color: var(--crimson); }   /* ホバーは全リンク共通で紅色に */
.more-link { display: block; width: fit-content; margin: 14px 0 0 auto; font-family: var(--gothic); font-size: .88rem; letter-spacing: .2em; }

/* ---------- お知らせ（ページ最上段の控えめな枠囲み） ---------- */
.notice {
  position: relative; z-index: 2;
  margin: clamp(16px, 3vh, 28px) calc(var(--gutter) + 24px) 0 calc(var(--gutter) + clamp(24px, 6vw, 96px));   /* 本文の左端から写真の右端まで */
  padding: 12px 18px;
  border: 1px solid var(--rule);
  background: rgba(var(--paper-rgb), .7);
  color: var(--ink-soft);
}
.notice p { margin: 0 0 .5em; font-family: var(--gothic); font-size: .84rem; line-height: 1.85; }
.notice p:last-child { margin-bottom: 0; }

/* ---------- 連絡先 ---------- */
.contact { margin-top: clamp(60px, 7.8vh, 84px); }   /* 新着から離し、コピーライトに寄せる */
.contact h2.label { font-family: var(--gothic); font-weight: 500; font-size: .8rem; letter-spacing: .12em; }   /* 見出しが長いので小さめに（ゴシック） */
.contact ul { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
/* トップ：ファンクラブ案内・SNSへのリンク */
.link-list li + li { margin-top: 18px; }   /* 見出しの下にリンク（区切り線なし） */
.link-list .name { display: block; margin-bottom: 2px; font-family: var(--gothic); font-weight: 700; font-size: .9rem; letter-spacing: .06em; }   /* 見出しは明朝のボールドで強調（太さで目立つので文字はリンクと同じ大きさ） */
.link-list a { font-family: var(--gothic); font-weight: 400; font-size: .9rem; letter-spacing: .1em; }
.link-list a.url { font-family: var(--gothic); font-weight: 400; letter-spacing: .02em; overflow-wrap: anywhere; }
.link-list a::after, .more-link::after, .back-link::after { content: " ›"; color: var(--crimson); }   /* リンクは矢印で統一 */

/* ---------- ファンクラブページ ---------- */
.fc-fee { font-weight: 600; letter-spacing: .06em; }
main.sub section { margin-top: 44px; }
.fc-list { margin: 0; border-top: 1px solid var(--rule); }
main.sub h2.label { font-weight: 700; font-size: 1rem; letter-spacing: .06em; }   /* Club DAOページの見出し（会員特典・お問い合わせ）は項目名と同じ文字 */
.fc-list dt { margin: 0; padding-top: 16px; font-family: var(--gothic); font-weight: 700; font-size: 1rem; letter-spacing: .06em; }
.fc-list dd { margin: 4px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--rule); font-family: var(--gothic); font-size: .95rem; line-height: 2; }
.fc-note { margin: 36px 0 0; font-family: var(--gothic); font-size: .95rem; line-height: 2; }   /* 会員特典とお問い合わせの間の注記 */
.fc-contact ul { list-style: none; margin: 0; padding: 0; font-family: var(--gothic); font-size: .95rem; }
.fc-contact ul .fc-name { margin: 0 0 4px; font-weight: 700; font-size: 1rem; letter-spacing: .06em; color: var(--crimson); }   /* 会員特典の項目名（会員証発行など）と同じ文字、色は紅 */

/* ---------- トップ：写真 ---------- */
.photo {
  position: fixed; top: 0; right: var(--gutter);
  height: 100vh; height: 100dvh;
  aspect-ratio: 1700 / 1835;
  z-index: 0; pointer-events: none;
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--paper) 0%, rgba(var(--paper-rgb), 0) 22%);   /* 右端（腕の切れ目）はぼかさずに見せる */
}

/* ---------- トップ：落ち葉（紅葉） ---------- */
.leaves { position: fixed; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.leaf { position: absolute; top: -40px; width: 20px; height: 20px; opacity: 0; animation: fall linear infinite; }
.leaf svg { width: 100%; height: 100%; display: block; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
@keyframes fall {
  0%   { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .8; }
  50%  { transform: translate3d(var(--sway), 55vh, 0) rotate(170deg); }
  92%  { opacity: .6; }
  100% { transform: translate3d(calc(var(--sway) * -.6), 110vh, 0) rotate(340deg); opacity: 0; }
}
.leaf:nth-child(1) { left:  8%; --sway:  60px; animation-duration: 26s; animation-delay: -4s;  width: 18px; height: 18px; color: var(--leaf-1); }
.leaf:nth-child(2) { left: 24%; --sway: -50px; animation-duration: 32s; animation-delay: -17s; width: 24px; height: 24px; color: var(--leaf-2); }
.leaf:nth-child(3) { left: 42%; --sway:  70px; animation-duration: 29s; animation-delay: -9s;  width: 16px; height: 16px; color: var(--leaf-3); }
.leaf:nth-child(4) { left: 58%; --sway: -60px; animation-duration: 35s; animation-delay: -22s; width: 22px; height: 22px; color: var(--leaf-1); }
.leaf:nth-child(5) { left: 74%; --sway:  45px; animation-duration: 30s; animation-delay: -12s; width: 18px; height: 18px; color: var(--leaf-3); }
.leaf:nth-child(6) { left: 90%; --sway: -40px; animation-duration: 38s; animation-delay: -27s; width: 20px; height: 20px; color: var(--leaf-2); }

/* ---------- トップ：本文 ---------- */
.top-head { position: relative; z-index: 2; width: var(--col); margin-left: var(--gutter); padding: clamp(28px, 4.5vh, 48px) 24px 0 clamp(24px, 6vw, 96px); }
main.top { position: relative; z-index: 2; width: var(--col); margin-left: var(--gutter); padding: 0 24px 36px clamp(24px, 6vw, 96px); }
.site-footer { position: relative; z-index: 2; padding: 0 24px 20px calc(var(--gutter) + clamp(24px, 6vw, 96px)); font-family: var(--gothic); font-size: .74rem; letter-spacing: .04em; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { .leaves { display: none; } }

/* ---------- メニュー（全ページ最上段。lanaruta.com と同じ配置：左にサイト名・中央にメニュー） ---------- */
.site-header { position: sticky; top: 0; z-index: 10; padding: 16px calc(var(--gutter) + 24px) 16px calc(var(--gutter) + clamp(24px, 6vw, 96px)); transition: background .18s ease; }   /* 左端はトップの本文と同じ */
/* スクロールしたら白っぽい生成りの半透明（透過45%）に。文字色はそのまま（PCのみ。スマホは下の @media で別指定） */
@media (min-width: 761px) {
  .site-header.is-scrolled { background: var(--header-scrolled); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.header-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; grid-template-rows: 28px; height: 28px; }   /* 高さはトップ（メニュー文字だけ）と同じに固定。下層のロゴ（約49px）は上下の余白にはみ出して中央に収まる */
.header-title { grid-column: 1; justify-self: start; display: block; line-height: 1; font-size: 2.1rem; }   /* 大タイトルの組み文字を縮小して使う（英字は和文の幅にそろう比率のまま） */
.header-title:hover .en { color: inherit; }   /* 英字もホバーで紅色に */
.header-menu { display: contents; }   /* PCはメニューとアイコンをヘッダーのグリッドに直接並べる */
.nav { grid-column: 2; display: flex; gap: clamp(22px, 3vw, 40px); font-family: var(--gothic); font-weight: 600; font-size: .92rem; letter-spacing: .16em; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--crimson); }   /* 今いるページは紅色 */
.site-header .sns-icons { grid-column: 3; justify-self: end; }   /* 右端は写真の右端（本文の有効範囲）にそろう */
.menu-toggle { display: none; position: relative; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.menu-toggle .menu-line { position: absolute; left: 7px; width: 24px; height: 1px; background: currentColor; transition: transform .22s ease; }
.menu-toggle .menu-line:first-child { transform: translateY(-4px); }
.menu-toggle .menu-line:last-child { transform: translateY(4px); }
.menu-toggle:hover { color: var(--crimson); }
@media (max-width: 760px) {
  /* 背景の透過率は lanaruta.com と同じ（ヘッダー50%・メニューパネル75%、ぼかし14px）
     ヘッダー本体にぼかしをかけるとパネル側のぼかしが効かなくなるため、ヘッダーの背景は ::before で敷く */
  .site-header, .site-header.is-scrolled, .site-header.is-menu-open { padding: 10px 16px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--paper-rgb), .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .header-bar { grid-template-columns: 38px 1fr 38px; gap: 8px; position: relative; grid-template-rows: 38px; height: 38px; }
  .menu-toggle { display: block; grid-column: 3; grid-row: 1; justify-self: end; }   /* 開閉ボタンは右 */
  .header-title { grid-column: 2; grid-row: 1; justify-self: center; font-size: 1.7rem; }
  .site-header.is-menu-open .menu-line:first-child { transform: rotate(35deg); }
  .site-header.is-menu-open .menu-line:last-child { transform: rotate(-35deg); }
  .header-menu { display: none; }
  .site-header.is-menu-open .header-menu {   /* メニュー項目の下に線を挟んでSNSアイコン */
    display: flex; flex-direction: column; align-items: center;
    grid-column: 1 / -1; position: absolute; top: calc(100% + 10px); left: -16px; right: -16px;   /* 画面幅いっぱいに */
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    background: rgba(var(--paper-rgb), .75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    animation: menuPanelIn .22s ease both;
  }
  .nav { flex-direction: column; align-items: center; gap: 22px; padding: 32px 24px 28px; font-size: 1rem; }
  .site-header .sns-icons { align-self: stretch; justify-content: center; gap: 14px; padding: 26px 24px 28px; border-top: 1px solid var(--rule); }
}
@keyframes menuPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-header.is-menu-open .header-menu { animation: none; } }
/* 下層ページの中くらいの幅：メニューが5項目あるので、ロゴと重ならないように詰める（トップはヘッダーにロゴがないので対象外） */
@media (min-width: 761px) and (max-width: 1080px) {
  body:has(main.sub) .header-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  body:has(main.sub) .nav { justify-self: center; gap: clamp(14px, 1.8vw, 22px); font-size: .86rem; letter-spacing: .08em; }
}

/* ---------- 下層ページ（一覧・詳細） ---------- */
main.sub { position: relative; z-index: 2; width: min(860px, 100%); margin: 0 auto; padding: 44px 24px 72px; }
/* 下層ページを開いたとき、見出しから順に、下からふわっと浮かび上がる */
main.sub > * { animation: subIn 1.9s cubic-bezier(.22, .61, .36, 1) both; }
main.sub > :nth-child(2) { animation-delay: .2s; }
main.sub > :nth-child(3) { animation-delay: .4s; }
main.sub > :nth-child(4) { animation-delay: .6s; }
main.sub > :nth-child(n+5) { animation-delay: .8s; }
@keyframes subIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main.sub > * { animation: none; } }   /* 動きを減らす設定の人には動かさない */
main.sub h1 { margin: 0 0 22px; font-family: var(--mincho); font-weight: 600; font-size: clamp(1.4rem, 3.6vw, 1.8rem); letter-spacing: .28em; }
.detail-meta { margin: 8px 0 0; font-family: var(--gothic); font-size: 1.5rem; color: var(--crimson); letter-spacing: .02em; line-height: 1.2; }
.detail-meta.fc-sub { font-family: var(--mincho); }   /* Club DAO のサブタイトルは見出しなので明朝 */
.detail-title { margin: 10px 0 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(1.35rem, 3.6vw, 1.75rem); line-height: 1.6; letter-spacing: .04em; }
.detail-body { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--rule); }   /* 本文は枠いっぱい（左右の余白をそろえる） */
/* 新着情報一覧のページ番号（21件目から出る） */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 16px; margin: 34px 0 0; font-family: var(--gothic); font-size: .95rem; font-variant-numeric: lining-nums tabular-nums; }
.pager [aria-current="page"] { color: var(--crimson); font-weight: 700; }
.pager .gap { color: var(--ink-soft); }
.pager .prev, .pager .next { letter-spacing: .1em; }
.pager + .back-link { margin-top: 28px; }
.detail-body a { color: var(--crimson); }   /* 本文中のリンクは紅で見分ける（ホバーは既定の紅のまま） */
.detail-body strong { font-weight: 700; }
.detail-body figure { margin: 0 0 1.4em; }   /* 管理画面から入れた画像 */
.detail-body img { display: block; max-width: 100%; height: auto; }
.detail-body p { margin: 0 0 1.1em; font-family: var(--gothic); font-size: 1.02rem; line-height: 2.1; }
.back-link { display: block; width: fit-content; margin: 34px 0 0 auto; font-family: var(--gothic); font-size: .9rem; letter-spacing: .16em; }
.sub-footer { position: static; text-align: center; padding: 0 24px 40px; }

/* ---------- 縦長・狭い画面：写真を上、文章を下 ---------- */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  /* タイトルを写真の顔の横（眉のあたり）に重ねる：写真を上に引き上げ、タイトルは下げる */
  .top-head { width: 100%; max-width: 640px; margin: 0 auto; padding: min(25vw, 160px) 22px 0; }
  /* 写真は頭から上着の上のボタンのすぐ上まで */
  .photo { position: relative; right: auto; height: auto; width: 100%; max-width: 640px; margin-left: auto; aspect-ratio: 1 / .84; overflow: hidden; margin-top: calc(-38px - min(30vw, 192px)); }
  .photo picture { display: block; position: absolute; top: -41%; right: 0; width: 160%; }
  .photo img { height: auto; }
  .photo::after {
    background:
      linear-gradient(to top, var(--paper) 0%, rgba(var(--paper-rgb), 0) 10%),
      linear-gradient(to bottom, var(--paper) 0%, rgba(var(--paper-rgb), 0) 8%),
      linear-gradient(to right, var(--paper) 0%, rgba(var(--paper-rgb), 0) 10%);
  }
  .notice { margin: 16px 22px 0; }
  main.top { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 22px 40px; }
  main.top > section:first-child { margin-top: 56px; }   /* 写真から新着情報までの間（狭い画面のみ） */
  .site-footer { max-width: 640px; margin: 0 auto; padding: 0 22px 40px; }
}
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .leaf:nth-child(n+4) { display: none; }
}
@media (max-width: 480px) {
  ul.news-rows a { grid-template-columns: 1fr; }
  .site-footer { font-size: .68rem; letter-spacing: .01em; }   /* コピーライトを1行に収める */
}

/* ---------- ヒストリー ---------- */
.hist-intro { margin: 0; font-family: var(--gothic); font-size: 1.02rem; line-height: 2; }
.hist-help, .disco-help { margin: 6px 0 0; font-family: var(--gothic); font-size: .84rem; color: var(--ink-soft); }
.hist-index { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 26px 0 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--gothic); font-size: .92rem; letter-spacing: .08em; font-variant-numeric: lining-nums; }
.hist-index a[aria-expanded="true"] { color: var(--crimson); }   /* 開いている年代は紅色 */
.hist-toggle { display: flex; gap: 14px; margin-left: auto; }
.hist-toggle button { padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .84rem; letter-spacing: .06em; cursor: pointer; }
.hist-toggle button:hover { color: var(--crimson); }
.hist-decade { margin-top: 36px; scroll-margin-top: 90px; }
.hist-decade > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.hist-decade > summary::-webkit-details-marker { display: none; }
.hist-decade > summary::before { content: "▸"; color: var(--crimson); font-size: .9rem; transition: transform .15s ease; }
.hist-decade[open] > summary::before { transform: rotate(90deg); }
.hist-decade > summary h2.label { margin: 0; }
.hist-decade > summary:hover h2.label { color: var(--crimson); }
.hist-decade[open] > summary { margin-bottom: 14px; }
.hist-milestone { margin: 18px 0 0; font-family: var(--gothic); font-weight: 700; font-size: .95rem; letter-spacing: .06em; color: var(--crimson); }
.hist-list { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); margin: 0; border-top: 1px solid var(--rule); font-family: var(--gothic); font-size: .95rem; line-height: 1.9; }
.hist-list > dt, .hist-list > dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.hist-list > dt { color: var(--crimson); white-space: pre; font-variant-numeric: lining-nums tabular-nums; }
.hist-list > dd { padding-left: 12px; }
.hist-series summary { cursor: pointer; list-style: none; }
.hist-series summary::-webkit-details-marker { display: none; }
.hist-series summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--crimson); transition: transform .15s ease; }
.hist-series[open] summary::before { transform: rotate(90deg); }
.hist-series summary:hover { color: var(--crimson); }
.hist-series dl { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 4px 1.1em; padding: 10px 0 0; border-top: 1px dashed var(--rule); font-size: .88rem; line-height: 1.8; }
.hist-series dl dt { color: var(--ink-soft); white-space: pre; font-variant-numeric: lining-nums tabular-nums; }
.hist-series dl dd { margin: 0; }
.hist-note { margin: 10px 0 0 1.1em; font-size: .88rem; line-height: 1.9; color: var(--ink-soft); }

/* ---------- ディスコグラフィー ---------- */
.disco-filter { margin: 0 0 26px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--gothic); }
.disco-filter-row { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.disco-filter-row + .disco-filter-row { margin-top: 8px; }
.disco-filter button { padding: 3px 12px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .86rem; letter-spacing: .06em; cursor: pointer; }
.disco-filter button:hover { color: var(--crimson); border-color: var(--crimson); }
.disco-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.disco-count { margin: 10px 0 0; font-size: .84rem; color: var(--ink-soft); }
.disco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 22px; margin: 0; padding: 0; list-style: none; }
.disco-grid a { display: block; font-family: var(--gothic); }
.disco-jacket, .disco-cover { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: transparent; }   /* 画像の周りはページの地の色のまま */
.no-image { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10%; border: 1px solid var(--rule); background: transparent; text-align: center; font-family: var(--mincho); font-weight: 600; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.disco-grid .no-image { font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }   /* 一覧の枠は小さいので、長い作品名も正方形に収める */
.disco-grid .disco-cat { display: block; margin-top: 10px; font-size: .74rem; letter-spacing: .1em; color: var(--crimson); }
.disco-grid .disco-title { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.6; }
.disco-grid .disco-date { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.disco-crumb { margin: 0 0 24px; font-family: var(--gothic); font-size: .86rem; letter-spacing: .12em; }
.disco-crumb a::before { content: "‹ "; color: var(--crimson); }
.disco-item { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px; align-items: start; }
.disco-item .disco-cover.no-image { font-size: 1.1rem; }
.disco-info .disco-cat { margin: 0; font-family: var(--gothic); font-size: .84rem; letter-spacing: .12em; color: var(--crimson); }
.disco-info .detail-title { margin: 4px 0 0; letter-spacing: .04em; }   /* ページ見出し（main.sub h1）の余白と字間を外し、新着情報の記事タイトルと同じに */
.disco-info .disco-artist { margin: 2px 0 0; font-family: var(--mincho); font-weight: 600; font-size: 1.12rem; letter-spacing: .06em; }   /* 名義はタイトルと同じ書体で、タイトルのすぐ下に */
.disco-spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; margin: 18px 0 0; font-family: var(--gothic); font-size: .92rem; }
.disco-spec dt { color: var(--ink-soft); }
.disco-spec dd { margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.disco-tracks ol { margin: 0; padding: 0; list-style: none; counter-reset: track; border-top: 1px solid var(--rule); font-family: var(--gothic); }
.disco-tracks li { counter-increment: track; border-bottom: 1px solid var(--rule); }
.disco-tracks li.disc-head { counter-increment: none; counter-set: track 0; padding: 22px 0 8px; font-weight: 700; font-size: .92rem; letter-spacing: .08em; color: var(--crimson); }   /* ディスクの見出し。曲番号はここから数え直す */
.disco-tracks li.disc-head:first-child { padding-top: 12px; }
.disco-tracks .track, .disco-tracks summary { display: block; padding: 11px 0 11px 2.4em; text-indent: -2.4em; font-size: .98rem; }
.disco-tracks .track::before, .disco-tracks summary::before { content: counter(track, decimal-leading-zero); display: inline-block; width: 2.4em; text-indent: 0; color: var(--crimson); font-size: .84rem; font-variant-numeric: lining-nums tabular-nums; }
.disco-tracks summary { cursor: pointer; list-style: none; }
.disco-tracks summary::-webkit-details-marker { display: none; }
.disco-tracks summary::after { content: "歌詞 ▸"; margin-left: 12px; font-size: .76rem; letter-spacing: .08em; color: var(--ink-soft); }
.disco-tracks details[open] summary::after { content: "閉じる ▴"; }
.disco-tracks summary:hover { color: var(--crimson); }
.lyrics { padding: 4px 0 18px 2.4em; }
.lyrics p { margin: 0 0 1.4em; font-size: .94rem; line-height: 2.1; }
.lyrics p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .hist-list, .hist-series dl { grid-template-columns: 1fr; }
  .hist-list > dt { padding-bottom: 0; border-bottom: 0; }
  .hist-list > dd { padding-top: 2px; padding-left: 0; }
  .hist-series dl dd { margin-bottom: 6px; }
  .disco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .disco-item { grid-template-columns: 1fr; gap: 22px; }
  .disco-item .disco-cover { max-width: 320px; }
}