/* りかのぽーたるの見た目。index.html と、参加楽曲・ライブ出演履歴・出演メディアの
   各ページが共通で読み込む。
   ここを直すと全ページに効く。tips/ 配下のページだけは、いまも各自が写しを
   持っている（いずれこちらに寄せる）。 */
/* ============================================================
   トークン — ライトが基準。ダークはトークンだけを再定義する。
   ============================================================ */
:root {
  --ground:      #FBF8F9;
  --surface:     #FFFFFF;
  --surface-2:   #F5EFF2;
  --ink:         #1E181B;
  --ink-2:       #6C6167;
  --ink-3:       #9A8E95;
  --line:        #E8DEE3;
  --line-strong: #D6C7CF;

  --accent:      #D64A78;
  --accent-ink:  #A32E57;
  --accent-soft: #FCEBF1;

  --green:       #1F7A63;
  --green-ink:   #18614E;
  --green-soft:  #E3F2EC;

  --shadow: 0 1px 2px rgba(30, 24, 27, .04), 0 8px 24px -12px rgba(30, 24, 27, .16);

  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-util: "Outfit", "Zen Kaku Gothic New", sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --maxw: 1180px;

  /* ヘッダーと（狭い画面の）タブナビの高さ。JSが実測して入れ替える。
     ヘッダーは画面幅で段数が変わるため、固定値だとナビが重なってしまう。 */
  --topbar-h: 57px;
  --nav-h: 50px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #141013;
    --surface:     #1C171A;
    --surface-2:   #241D21;
    --ink:         #F3ECEF;
    --ink-2:       #A79AA1;
    --ink-3:       #7C7077;
    --line:        #352C31;
    --line-strong: #4A3D44;

    --accent:      #FF8FB3;
    --accent-ink:  #FFB3CB;
    --accent-soft: #3A1F2B;

    --green:       #58C9A6;
    --green-ink:   #7FDCC0;
    --green-soft:  #17342C;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --ground:      #141013;
  --surface:     #1C171A;
  --surface-2:   #241D21;
  --ink:         #F3ECEF;
  --ink-2:       #A79AA1;
  --ink-3:       #7C7077;
  --line:        #352C31;
  --line-strong: #4A3D44;

  --accent:      #FF8FB3;
  --accent-ink:  #FFB3CB;
  --accent-soft: #3A1F2B;

  --green:       #58C9A6;
  --green-ink:   #7FDCC0;
  --green-soft:  #17342C;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
}

/* ============================================================
   ベース
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 31px); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; margin: 0; line-height: 1.35; }
p { margin: 0; }
a { color: var(--accent-ink); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   トップバー
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* 埋め込みiframeは独自の描画レイヤーを持ち、スクロール中に固定要素へ
     はみ出すことがある。重なり順を確定させて防ぐ。 */
  isolation: isolate;
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.brand__mark {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.brand__tag {
  font-family: var(--font-util);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.topbar__spacer { flex: 1; }

.search { position: relative; flex: 0 1 320px; min-width: 0; }
.search__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 40px 8px 36px;
  transition: border-color .15s, box-shadow .15s;
}
.search__input::placeholder { color: var(--ink-3); }
.search__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.search__icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none; display: flex;
}
.search__key {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-util); font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 0 5px; line-height: 17px; pointer-events: none;
}
.search__input:not(:placeholder-shown) ~ .search__key { display: none; }

.iconbtn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
  :root[data-theme="dark"] .icon-sun { display: none; }
  :root[data-theme="dark"] .icon-moon { display: block; }
}

/* ============================================================
   シェル / サイドナビ
   ============================================================ */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px 80px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.sidenav { position: sticky; top: calc(var(--topbar-h) + 31px); padding-top: 40px; }
.sidenav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidenav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.sidenav__link:hover { color: var(--ink); background: var(--surface-2); }
.sidenav__link[aria-current="true"] {
  color: var(--accent-ink);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 500;
}
.sidenav__num {
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.sidenav__link[aria-current="true"] .sidenav__num { color: var(--accent); }
/* 別のページへ出る項目（参加楽曲・ライブ出演履歴・出演メディア）に付ける印。
   同じページの中を移動する項目と見分けが付くようにしている。 */
.sidenav__ex { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.sidenav__link:hover .sidenav__ex { color: var(--accent-ink); }


/* ============================================================
   セクション共通
   ============================================================ */
/* min-width は初期値の auto だと「中身の最小幅」に解決される。参加楽曲の表に
   min-width: 560px を掛けてあるため、放っておくと本文の列ごと560px以上に広がり、
   狭い画面でページ全体が横スクロールしてしまう。0 にすると列は画面幅まで縮み、
   .tablewrap の overflow-x: auto が効いて「表だけ」が横スクロールになる。 */
.main { padding-top: 40px; display: flex; flex-direction: column; gap: 72px; min-width: 0; }
.block { scroll-margin-top: calc(var(--topbar-h) + 31px); display: flex; flex-direction: column; gap: 20px; }
.block__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.block__title { font-size: 21px; }
.block__en {
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.block__count {
  margin-left: auto; font-family: var(--font-util); font-size: 11.5px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.empty code {
  font-family: var(--font-util); font-size: 12px;
  background: var(--surface-2); color: var(--ink-2);
  padding: 1px 6px; border-radius: 4px;
}

/* 未入力プレースホルダ */
.ph {
  display: inline-block;
  min-width: 5.5em;
  color: var(--ink-3);
  font-size: 12.5px;
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 1px;
}

/* ============================================================
   ヒーロー
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 44px 40px 40px;
  box-shadow: var(--shadow);
}
/* 「坂」— ごく淡い斜線を背景に */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, var(--accent-soft) 0%, transparent 42%),
    linear-gradient(292deg, var(--green-soft) 0%, transparent 34%);
  opacity: .85;
  pointer-events: none;
}
.hero > * { position: relative; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  align-items: center;
}
.hero__media {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
/* Instagramの埋め込みは白背景で固定されるため、器も白にして段差を消す。
   埋め込みは縦に長いので、画像が見える高さで切り、下端はフェードさせる。
   長さを変えたいときは max-height の値だけ調整する。 */
.hero__insta {
  background: #FFFFFF;
  line-height: 0;
  position: relative;
  z-index: 0;  /* 固定ヘッダーより前に出さない */
  /* 高さを幅に比例させる。固定値にすると、幅が広がる画面ほど写真が切れてしまう。
     17/21 は「ヘッダー＋写真」がちょうど収まる比率。写真をもっと見せたいなら
     21 を大きく（例 17/24）、詰めたいなら小さくする。 */
  aspect-ratio: 17 / 21;
  max-height: 640px;  /* 1カラムで幅が広がりすぎたときの上限 */
  overflow: hidden;
}
.hero__insta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(to top, #FFFFFF 18%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hero__insta .instagram-media {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* 読み込み前・失敗時に見えるフォールバック */
.hero__insta .instagram-media > a {
  display: block;
  padding: 26px 16px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: #A32E57;
}
.hero__caption {
  display: block;
  padding: 9px 12px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-top: 1px solid var(--line);
}
a.hero__caption {
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, color .15s;
}
a.hero__caption:hover { background: var(--surface-2); color: var(--accent-ink); }
.hero__caption-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-util);
  font-size: 10.5px;
  color: var(--ink-3);
}
.hero__eyebrow {
  font-family: var(--font-util); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink);
}
.hero__name {
  font-size: clamp(38px, 6vw, 60px);
  letter-spacing: .06em;
  margin: 10px 0 6px;
}
.hero__reading {
  font-family: var(--font-util);
  font-size: 13px; letter-spacing: .18em; color: var(--ink-2);
}
.hero__lead {
  margin-top: 20px;
  max-width: 42em;
  color: var(--ink-2);
  font-size: 14px;
}
.hero__swatches { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.swatch {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-util); font-size: 11.5px; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 3px 11px 3px 4px;
}
.swatch__dot { width: 15px; height: 15px; border-radius: 50%; display: block; }

/* ============================================================
   プロフィール表
   ============================================================ */
.facts {
  display: grid;
  /* minmax の下限を min(◯px, 100%) にしてある。ただの ◯px だと、画面が
     それより狭いときに列が縮めず、ページごと横にはみ出す。100% を噛ませると
     狭い画面では素直に1列へ落ちる。以下の grid も同じ理由で同じ書き方。 */
  grid-template-columns: repeat(auto-fill, minmax(min(238px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fact { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }

/* ダッシュボード型 */
.hero--slim { padding: 26px 32px 24px; }
.hero__slim {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
.hero__id { flex: none; }
.hero--slim .hero__name { font-size: clamp(28px, 4vw, 40px); margin: 3px 0 0; }
/* ふりがなの位置。上のグループ名と紛れないよう、細く薄くする */
.hero--slim .hero__reading {
  margin-top: 5px;
  font-size: 11.5px; font-weight: 400;
  letter-spacing: .2em; color: var(--ink-3);
}
.hero--slim .hero__lead {
  flex: 1 1 260px; max-width: 34em;
  margin: 0 0 5px; font-size: 13px; line-height: 1.85;
}
.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.dash__label {
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 9px;
}
.dash__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.dash__head .dash__label { margin-bottom: 0; }
.dash__link {
  font-family: var(--font-util); font-size: 11px;
  text-decoration: none; white-space: nowrap;
}
.dash__link:hover { text-decoration: underline; }
.facts--dash { grid-template-columns: 1fr; }
.facts--dash .fact { padding: 9px 13px; flex-direction: row; align-items: baseline; gap: 10px; }
.facts--dash .fact__label { flex: none; width: 6.5em; }
.dash__empty {
  list-style: none;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 18px 16px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}
.dash__more { margin-top: 10px; font-size: 12px; }
.dash__more a { text-decoration: none; }
.dash__more a:hover { text-decoration: underline; }
@media (max-width: 1000px) {
  .dash { grid-template-columns: 1fr; }
  /* 縦に積むときは写真を先に見せる。横並びのときの左右の位置は変えない */
  .dash__col--media { order: 1; }
  .dash__col--facts { order: 2; }
  .dash__col--next  { order: 3; }
}
.fact__label {
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.fact__value { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* 広い画面では値の下に落として、日付と年齢が中途半端に折り返すのを防ぐ */
.fact__age { display: block; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.fact__line { display: block; }
/* ペンライトカラーの色名。トークン経由なのでダークでも読める明度になる */
.fact__color--green { color: var(--green-ink); }
.fact__color--pink  { color: var(--accent-ink); }

/* ============================================================
   ブログ
   ============================================================ */
.bloglist {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.blog + .blog { border-top: 1px solid var(--line); }
.blog > a, .blog__plain {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 13px 16px;
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.blog > a:hover { background: var(--surface-2); }
.blog > a:hover .blog__title { color: var(--accent-ink); }
.blog__date {
  flex: none; width: 6.5em;
  font-family: var(--font-util); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
  padding-top: 3px;
}
.blog__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blog__title { font-size: 14.5px; font-weight: 500; transition: color .15s; }
.blog__summary { font-size: 12px; color: var(--ink-3); line-height: 1.65; }
.blog__arrow { flex: none; color: var(--ink-3); font-size: 12px; padding-top: 3px; }
.blog__more { font-size: 12.5px; }
.blog__more a { text-decoration: none; }
.blog__more a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .blog > a, .blog__plain { flex-wrap: wrap; gap: 2px 12px; }
  .blog__title { flex: 1 1 100%; }
}

/* ============================================================
   記録リスト（ライブ出演履歴・出演メディア）
   ============================================================ */
.recgroup + .recgroup { margin-top: 24px; }
.recyear {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-util); font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--ink-3); margin-bottom: 8px;
}
/* 種別の見出しに添える件数 */
.recyear__n { font-weight: 500; color: var(--ink-3); }
/* 種別ごとの開閉ボタンは、まわりの余白を詰める */
.recgroup .morewrap { margin-top: 10px; }
.reclist {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.rec + .rec { border-top: 1px solid var(--line); }
.rec > a, .rec__plain {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 12px 16px;
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.rec > a:hover { background: var(--surface-2); }
.rec > a:hover .rec__title { color: var(--accent-ink); }
.rec__date {
  flex: none; width: 9.4em;
  font-family: var(--font-util); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
  padding-top: 3px;
}
.rec__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rec__title { font-size: 14.5px; font-weight: 500; transition: color .15s; }
.rec__meta { font-size: 12px; color: var(--ink-3); line-height: 1.65; }
.rec__arrow { flex: none; color: var(--ink-3); font-size: 12px; padding-top: 3px; }
/* 櫻坂46みずからが開いた公演は、左端にアクセント色の細い線を出す */
.rec--own > a, .rec--own > .rec__plain { box-shadow: inset 3px 0 0 var(--accent); }

/* ============================================================
   Buddiesをはじめよう
   ============================================================ */
.tiplist {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(252px, 100%), 1fr));
  gap: 14px;
}
.tip > a, .tip__plain {
  display: flex; flex-direction: column; gap: 5px;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.tip > a:hover { border-color: var(--accent); background: var(--accent-soft); }
.tip > a:hover .tip__title { color: var(--accent-ink); }
.tip__label {
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; color: var(--green-ink);
}
.tip__title { font-size: 15px; font-weight: 700; transition: color .15s; }
.tip__summary { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.tip__arrow { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--accent); }
/* 準備中のものは、押せないことが見て分かるようにする */
.tip--soon .tip__plain { border-style: dashed; background: transparent; }
.tip--soon .tip__label { color: var(--ink-3); }
.tip--soon .tip__title { color: var(--ink-2); }

/* 複数回の出演日。数が多くなるので、本文より小さく・薄く出す */
.rec__days {
  font-family: var(--font-util); font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
  line-height: 1.75; word-break: keep-all;
}

/* 種別アイコン。見出しの左に並ぶ小さな線画 */
.ticons {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 7px; vertical-align: -2px;
}
.ticon { display: inline-flex; color: var(--ink-3); }
.ticon svg { width: 14px; height: 14px; display: block; }
.ticon--tv, .ticon--radio { color: var(--ink-2); }
.ticon--stream { color: var(--accent); }
.ticon--magazine, .ticon--news { color: var(--green-ink); }

/* 「もっと見る」 */
.morewrap { display: flex; justify-content: center; margin-top: 14px; }
.morebtn {
  font-family: var(--font-util); font-size: 12.5px;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 20px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.morebtn:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }

/* 見出しに付ける公式ページへのリンク（予定と共用） */
.exlink { color: inherit; text-decoration: none; }
.exlink:hover { color: var(--accent-ink); text-decoration: underline; }
.exlink__mark { font-size: 10.5px; color: var(--ink-3); margin-left: 5px; }

@media (max-width: 600px) {
  .rec > a, .rec__plain { flex-wrap: wrap; gap: 2px 12px; }
  .rec__body { flex: 1 1 100%; }
}

/* ============================================================
   年表
   ============================================================ */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  padding: 0 0 26px;
  position: relative;
}
.tl::before {
  content: "";
  position: absolute;
  left: 110px; top: 9px; bottom: -9px;
  width: 1px; background: var(--line);
}
.tl:last-child::before { display: none; }
.tl__date {
  font-family: var(--font-util); font-size: 12px; font-weight: 500;
  color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.tl__body { position: relative; padding-left: 22px; }
.tl__body::before {
  content: "";
  position: absolute; left: -6px; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--ground);
}
.tl__title { font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.tl__note { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* ============================================================
   テーブル（楽曲）
   ============================================================ */
.tablewrap {
  overflow-x: auto;
  /* 表の見出しにある読み上げ用ラベル（.visually-hidden）は position: absolute。
     ここに位置の基準が無いと、その要素だけが横スクロールの外へ抜け出し、
     表の中での本来の位置をページ全体に持ち出して横スクロールを生む。
     relative を置いて、この入れ物の中に閉じ込める。 */
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
/* min-width は置かない。列が「楽曲／区分／MV」の3つだけになったので、
   中身が必要とする幅まで自然に縮む。430px の画面なら横スクロールも出ない。 */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}
tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
/* リリースごとの見出し行。シングル名と発売日は同じリリースの曲すべてで
   同じ値になるため、行ごとに繰り返さず、ここにまとめている。 */
.songgroup > th {
  text-align: left;
  background: var(--surface-2);
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
tbody tr.songgroup:first-child > th { border-top: none; }
.songgroup__name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
.songgroup__date {
  font-family: var(--font-util); font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-left: 10px;
}
.songgroup__n { font-family: var(--font-util); font-size: 11px; color: var(--ink-3); margin-left: 8px; }
.td-title { font-weight: 500; }
.td-note { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); line-height: 1.6; }
/* MVへのボタン。URLが入っている曲にだけ出る */
.td-mv { width: 1%; white-space: nowrap; }
.mvbtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-util); font-size: 11px; font-weight: 600;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.mvbtn svg { width: 13px; height: 13px; }
.mvbtn:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
/* 読み上げにだけ渡したい文字 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.badge {
  display: inline-block;
  font-family: var(--font-util); font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-ink);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  white-space: nowrap;
}
.badge--muted {
  background: var(--surface-2); color: var(--ink-3);
  border-color: var(--line-strong); font-weight: 500;
}

/* 参加楽曲の区分バッジ */
.badge--select { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.badge--gen3   { background: var(--green-soft);  color: var(--green-ink);  border-color: color-mix(in srgb, var(--green) 32%, transparent); }
.badge--backs  { background: transparent;        color: var(--green-ink);  border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.badge--all    { background: var(--surface-2);   color: var(--ink-2);      border-color: var(--line-strong); font-weight: 500; }
.badge--unit   { background: transparent;        color: var(--ink-2);      border-color: var(--line-strong); font-weight: 500; }
.badge--center {
  background: var(--accent); color: var(--ground);
  border-color: var(--accent); margin-left: 7px; font-weight: 600;
}

/* Spotifyプレイリスト。配色はJSがサイトのテーマに合わせて切り替える */
/* z-index を明示して、固定ヘッダーより前に出ないようにする */
.spotify { line-height: 0; position: relative; z-index: 0; }
.spotify iframe { display: block; width: 100%; border: 0; }

/* ============================================================
   カードグリッド（出演・リンク）
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(252px, 100%), 1fr));
  gap: 14px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.card__kind {
  display: flex; align-items: center;
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink);
}
.card__kind--member { color: var(--accent-ink); }
.card__title { font-size: 15px; font-weight: 700; font-family: var(--font-body); }
.card__meta { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* 放送局・配信サービスを1行ずつ並べる */
.card__lines { display: flex; flex-direction: column; gap: 3px; margin-top: 1px; }
.card__line { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.card__line a { color: var(--accent-ink); text-decoration: none; }
.card__line a:hover { text-decoration: underline; }
.card__line-detail { color: var(--ink-3); }
.card__line-detail::before { content: " ／ "; }
.card__note { font-size: 12px; color: var(--ink-3); line-height: 1.65; margin-top: 2px; }

/* セクション見出しの下に置く補足 */
.block__note { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; margin-top: -6px; }

/* 公式リンク（1行1リンクのリスト） */
.linkgroup {
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; color: var(--green-ink);
  margin: 22px 0 8px;
}
.linkgroup:first-child { margin-top: 0; }
.linkgroup--member { color: var(--accent-ink); }
/* 横幅を余らせないよう2列に並べる。1件あたりは1行分の薄いカード */
.linklist {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 8px;
}
.linkrow {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.linkrow > a, .linkrow__plain {
  /* 段数がカードごとに違うので、アイコンは中央ではなく1段目に合わせる */
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px;
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.linkrow > a:hover { background: var(--surface-2); }
.linkrow > a:hover .linkrow__name { color: var(--accent-ink); }
.linkrow > a:hover .linkicon { transform: scale(1.06); }
.linkrow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
/* 1段目はサービス名。2段目のページ名より控えめだが、拾い読みできる強さにする */
.linkrow__service {
  font-family: var(--font-util); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--ink-2); line-height: 1.35;
}
.linkrow__name { font-size: 14px; font-weight: 500; transition: color .15s; word-break: break-word; }
/* アカウントIDは等幅寄りの字で、名前と説明の間に置く */
.linkrow__account {
  font-family: var(--font-util); font-size: 11.5px;
  color: var(--ink-2); word-break: break-all;
}
.linkrow__sub { font-size: 11.5px; color: var(--ink-3); word-break: break-word; }
.linkrow__ext { flex: none; font-size: 12px; color: var(--ink-3); }
.linkrow > a:hover .linkrow__ext { color: var(--accent); }
.linkicon {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: transform .15s;
}
.linkicon svg { width: 18px; height: 18px; display: block; }
.linkicon--member {
  background: var(--accent-soft); color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.linkicon--group {
  background: var(--green-soft); color: var(--green-ink);
  border-color: color-mix(in srgb, var(--green) 26%, transparent);
}
a.card--link:hover .linkicon { transform: scale(1.06); }

a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
a.card .card__title { color: var(--accent-ink); }
.card--disabled { opacity: .72; }
.card__foot {
  margin-top: 4px; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-util); font-size: 11.5px; color: var(--ink-3);
  word-break: break-all;
}

/* ============================================================
   カレンダー
   ============================================================ */
/* 表示切り替えタブ */
.viewtabs { display: flex; gap: 4px; margin-top: -4px; }
.viewtab {
  font-family: var(--font-body); font-size: 12.5px;
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-strong);
  transition: background .15s, color .15s, border-color .15s;
}
.viewtab:hover { color: var(--ink); }
.viewtab[aria-selected="true"] {
  background: var(--accent-soft); color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  font-weight: 500;
}

/* 月送り */
.calnav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.calnav__btn {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 8px;
  font-size: 16px; line-height: 1;
  transition: color .15s, border-color .15s;
}
.calnav__btn:hover { color: var(--accent); border-color: var(--accent); }
/* 当月より前には戻れない。押せないことが見て分かるようにする */
.calnav__btn:disabled { opacity: .3; cursor: default; }
.calnav__btn:disabled:hover { color: var(--ink-2); border-color: var(--line-strong); }
.calnav__label {
  font-family: var(--font-util); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 7.5em; text-align: center;
}
.calnav__today {
  margin-left: auto; cursor: pointer;
  font-family: var(--font-body); font-size: 11.5px;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px;
  transition: color .15s, border-color .15s;
}
.calnav__today:hover { color: var(--accent); border-color: var(--accent); }

/* PCではカレンダーを左に置き、空いた右側に選択日の詳細を並べる */
.calview__body {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 860px) {
  .calview__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* 月グリッド */
/* 列は minmax(0, 1fr)。ただの 1fr だと各列の最小幅が中身に引っ張られ、
   320px 級の画面でカレンダーごと横にはみ出す。 */
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calgrid__dow {
  text-align: center; padding-bottom: 4px;
  font-family: var(--font-util); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--ink-3);
}
.calgrid__dow.is-sun { color: var(--accent-ink); }
.calgrid__dow.is-sat { color: var(--green-ink); }

.calcell {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit; color: var(--ink-3);
  cursor: default;
  transition: background .15s, border-color .15s, color .15s;
}
.calcell.is-empty { border: none; }
.calcell__num { font-family: var(--font-util); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.calcell__marks { display: flex; gap: 2px; align-items: center; justify-content: center; flex-wrap: wrap; }
.calcell.has-event {
  background: var(--surface); border-color: var(--line);
  color: var(--ink); cursor: pointer;
}
.calcell.has-event:hover { border-color: var(--accent); }
.calcell.is-today { border-color: var(--line-strong); background: var(--surface-2); font-weight: 700; }
.calcell.is-today .calcell__num { color: var(--accent-ink); font-weight: 700; }
.calcell.is-picked { background: var(--accent-soft); border-color: var(--accent); }
.calcell.is-member.has-event { box-shadow: inset 0 -2px 0 var(--accent); }

/* 種類ごとのアイコン */
.calmark { display: inline-flex; }
.calmark svg { width: 21px; height: 21px; display: block; }
/* リストの行では、日付の隣に置くので少し小さめにする */
.ev .calmark svg { width: 18px; height: 18px; }
.calmark--live, .calmark--release { color: var(--accent-ink); }
.calmark--tv, .calmark--stream, .calmark--radio { color: var(--green-ink); }
.calmark--event { color: var(--ink-2); }
.calmark--other { color: var(--ink-3); }

/* 選んだ日の詳細 */
.caldetail {
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
}
.caldetail__head {
  font-family: var(--font-util); font-size: 12px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .04em;
}
.caldetail__hint { font-size: 12.5px; color: var(--ink-3); }
.caldetail__item { display: flex; gap: 11px; align-items: flex-start; }
.caldetail__item .calmark svg { width: 20px; height: 20px; margin-top: 2px; }

.calundated__label {
  margin: 22px 0 9px;
  font-family: var(--font-util); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; color: var(--ink-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

@media (max-width: 600px) {
  .calgrid { gap: 3px; }
  .calcell { padding: 3px 1px; }
  .calmark svg { width: 18px; height: 18px; }
  .calnav__label { font-size: 14px; min-width: 6.5em; }
}

.cal { display: flex; flex-direction: column; gap: 24px; }
.cal__month {
  font-family: var(--font-util); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; color: var(--ink-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.cal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* ダッシュボードの「次の予定」。列が狭いので、日付を上段に逃がして
   公演名に横幅をぜんぶ渡す。行を分けるぶん、文字は本文より小さめにする。 */
.nx {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r-md);
  padding: 11px 14px;
}
.nx--tbd { border-left-color: var(--line-strong); }
.nx__head { display: flex; align-items: center; gap: 7px; }
.nx__head .calmark svg { width: 16px; height: 16px; }
.nx__when {
  font-family: var(--font-util); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.nx__title { font-size: 13.5px; font-weight: 500; line-height: 1.55; }
.nx__place { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.ev {
  display: grid;
  /* 日付 / 種類のアイコン / 本文 */
  grid-template-columns: 58px auto 1fr;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r-md);
  padding: 12px 16px;
  align-items: center;
}
.ev--tbd { border-left-color: var(--line-strong); }
.ev__day {
  font-family: var(--font-util); font-variant-numeric: tabular-nums;
  text-align: center; line-height: 1.15;
}
.ev__day-num { display: block; font-size: 21px; font-weight: 600; }
.ev__day-dow { display: block; font-size: 10.5px; color: var(--ink-3); letter-spacing: .08em; }
.ev__title { font-weight: 500; font-size: 14.5px; }
.ev__meta { font-size: 12.5px; color: var(--ink-2); }

/* ============================================================
   フッター
   ============================================================ */

.disclaimer {
  border-top: 1px solid var(--line);
  padding: 22px 20px 40px;
  max-width: var(--maxw);
  margin: 0 auto;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.8;
}
.disclaimer strong { color: var(--ink-2); font-weight: 500; }
.disclaimer__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.disclaimer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.disclaimer__links a { color: var(--ink-2); text-decoration: none; }
.disclaimer__links a:hover { color: var(--accent-ink); text-decoration: underline; }
.disclaimer__copy { margin: 0; font-family: var(--font-util); }

.nohit {
  display: none;
  padding: 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.is-hidden { display: none !important; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 0; padding-bottom: 56px; }
  /* 狭い画面では、常に見えていてほしいのはセクションのタブだけ。
     サイト名と検索窓まで貼り付けると画面が狭くなるので、ヘッダーは流して消す。
     半透明＋ぼかしは埋め込みiframeと重なると描画が乱れるため使わない。 */
  .topbar { position: static; background: var(--ground); backdrop-filter: none; }
  .sidenav {
    position: sticky; top: 0; z-index: 40;
    padding: 8px 0;
    margin: 0 -20px;
    background: var(--ground);
    backdrop-filter: none;
    border-bottom: 1px solid var(--line);
    /* グリッド項目の min-width は初期値が auto で、「中身の最小幅」に解決される。
       タブは white-space: nowrap なので、全部を1列に並べた幅（900px超）が
       そのまま最小幅になり、列ごと画面からはみ出してしまう。
       0 にすると列が画面幅まで縮み、下の overflow-x: auto が効いて横スクロールになる。 */
    min-width: 0;
  }
  .block { scroll-margin-top: var(--nav-h); }
  html { scroll-padding-top: var(--nav-h); }

  /* ヘッダーを1行に収める。2行になると、サイト名とテーマ切替の間が
     大きく空いてしまうため。非公式である旨はフッターに書いてある。 */
  .topbar__inner { flex-wrap: nowrap; padding: 10px 20px; gap: 10px; }
  .brand__tag { display: none; }
  .topbar__spacer { display: none; }
  .sidenav__list {
    flex-direction: row; gap: 6px;
    overflow-x: auto; padding: 2px 20px;
    scrollbar-width: none;
  }
  .sidenav__list::-webkit-scrollbar { display: none; }
  .sidenav__link {
    border-left: none; border-bottom: 2px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    white-space: nowrap; padding: 6px 12px;
  }
  .sidenav__link[aria-current="true"] { border-left-color: transparent; border-bottom-color: var(--accent); }
  .sidenav__num { display: none; }
  .main { padding-top: 28px; gap: 56px; }
  .hero { padding: 32px 24px 28px; }
  .hero__inner { grid-template-columns: 1fr; gap: 26px; }

  /* 基本情報は、値が短いのに右側が大きく空いていた。
     2列にしてラベルを値の上に置き、横も縦も詰める。
     値が長い項目（wide）だけ横幅いっぱいを使う。 */
  .facts--dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--dash .fact { flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 13px; }
  .facts--dash .fact__label { width: auto; }
  .facts--dash .fact--wide { grid-column: 1 / -1; }
  /* 半分の幅でも収まるよう少し詰め、年齢は改行せず続けて出す */
  .facts--dash .fact__value { font-size: 14px; }
  .facts--dash .fact__age { display: inline; font-size: 12px; }
  /* 横幅いっぱいの項目は、値を縦ではなく横に並べる */
  .facts--dash .fact--wide .fact__line { display: inline-block; margin-right: 16px; }
  .topbar__inner { flex-wrap: wrap; padding: 10px 20px 10px; gap: 10px; }
  .search { flex: 1 1 auto; min-width: 0; }
  .search__key { display: none; }
  .tl { grid-template-columns: 68px 1fr; gap: 14px; }
  .tl::before { left: 80px; }
}

/* --- 子ページ（参加楽曲・ライブ出演履歴・出演メディア） ------------------ */
/* トップと違って左のナビが無いので、1列にする。 */
.shell--solo { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* トップへ戻る導線。章の見出しの上に小さく置く。 */
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 26px;
  font-family: var(--font-util); font-size: 13px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.backlink:hover { color: var(--accent-ink); }

/* 子ページの本文は1章だけなので、上の余白を少し詰める。 */
.main--solo { padding-top: 34px; gap: 34px; }