/* Ensychord 公開サイト共通スタイル
   方針（要件2）: ビジネスカジュアル / 白ベースで視認性重視 / POP過ぎないフォント / レスポンシブ必須 */

:root {
  /*
    ⚠️ **暗い配色に対応していると、ブラウザに伝える**（運営の報告。2026-09-16）。

    > 携帯のバックグランドカラーが黒いと非常に見づらいです。

    配色そのものは揃っていた（明るい61変数に対し、暗いほうで**色は全部**上書き済み。
    残る4つは角丸・幅・書体で、色ではない）。**足りなかったのは宣言のほう。**

    この1行が無いと、ブラウザは「このサイトは明るい前提」とみなす。すると:

    - Chrome（Android）が**自動で暗くする**——**こちらの暗い配色の上から**かかるので、
      二重に反転して読めない色になる
    - 入力欄・選択欄・スクロールバーが**明るいまま**、暗い地の上に出る

    `light dark` と書くと「両方に対応している」の意味になり、
    **自動の暗転が止まり、部品も地に合わせて描かれる。**
  */
  /*
    ⚠️ **端末の設定で暗転させない**（運営の指示。2026-09-18）。

    > あと、**携帯でみると黒くなります**。
    > サイト全体に background-color を入れてほしいのですが。**今の色合いがよい**と思います。

    暗い配色は壊れていたのではなく、61個中57個の変数を上書きする
    **作り込まれた配色**で、設計どおり切り替わっていた。
    ただし運営の判断は「いまの色合いで揃える」。

    ⚠️ **消さずに止める。** 暗い配色の指定は6箇所ともファイルに残してあり、
    `prefers-color-scheme` で自動的に効かないようにしただけ。
    出したくなったら、その条件を戻せばよい。

    `color-scheme: light` と書くことで、**入力欄・選択欄・スクロールバーも
    明るいまま**描かれる（ここを書かないと、端末の設定で部品だけ暗転する）。
  */
  color-scheme: light;

  /*
    **白いカードを白い背景に置いていた**ので、細い灰色の線だけが仕切りになり、
    どれも同じ重さに見えていた（運営の指摘。2026-09-01）。

    紙（`--color-bg`）と机（`--color-bg-page`）を分ける。
    カードは白のまま、その下の面をわずかに沈めると、
    **色を増やさずに「浮いているもの」と「地」が分かれる**。

    青緑に寄せた灰色を使う。無彩色の灰にすると、
    主色（深い青緑）と混ざったときに濁って見える。
  */
  --color-bg: #ffffff;
  /*
    **地はほぼ白。ただし色味はサイトの主色から取る**（運営の指示。2026-09-01）。

    最初は灰色（緑寄り）にしていたが、
    「灰色なのが重たい」「テーマカラーを薄くしたほうがよいのでは」と指摘を受けた。

    主色（#204b52）を白で3%まで薄めたもの。
    明度97.6%でほぼ白だが、**灰ではなく青緑の側にいる**ので、
    主色・淡色と並べたときに濁らない。

    純白との差は1.048。**カードには枠線が付いている**ので、
    段差は色だけに頼っていない。
  */
  --color-bg-page: #f8fafa;
  /*
    面と枠は、**明るさは変えず色相だけ主色（188度）にそろえる**。
    地だけ主色寄りにしたら、他が165〜171度でわずかにずれ、
    緑と青緑が混ざって濁って見える（2026-09-01）。
  */
  --color-bg-alt: #eef1f2;
  --color-bg-alt2: #e3e8e9;
  --color-text: #1e2527;
  --color-text-muted: #556162;
  --color-border: #d5dbdc;
  --color-primary: #204b52;
  --color-primary-dark: #163439;
  --color-primary-tint: #e2ecec;
  --color-accent: #9c7a3c;
  /* アクセントは「探している人がいちばん知りたいこと」にだけ使う */
  --color-accent-tint: #f7f0e2;
  /*
    淡色の上に置く文字。**アクセントそのものでは薄すぎる**
    （淡色との差が3.52で、本文に要る4.5に届かない）。
    #7a5e2c なら5.34。
  */
  --color-accent-dark: #7a5e2c;

  /*
    **印（タグ）の色。系統ごとに1組ずつ持つ。**

    31種類のタグが、それぞれ色を直に書いていた（16種）。
    そのため**暗い配色にまったく対応しておらず**、
    暗い画面に淡い色の札だけが白く浮いていた（2026-09-01に確認）。

    種類ごとではなく**系統ごと**に持つ。「緑は今あるもの」「琥珀は注意」
    のように意味で分けておけば、新しい札を足すときに色を選び直さずに済む。

    どの組も、明暗どちらでも本文の基準（4.5）を満たす値にしてある。
  */
  --tag-blue-bg: #eef4fb;
  --tag-blue-fg: #24557f;
  --tag-blue-line: #c6d9ec;
  --tag-green-bg: #e8f3ec;
  --tag-green-fg: #2c5c3a;
  --tag-green-line: #bcdcc8;
  --tag-amber-bg: #fbf1e2;
  --tag-amber-fg: #6f4a12;
  --tag-amber-line: #efd9b4;
  --tag-red-bg: #fdecec;
  --tag-red-fg: #9b2c2c;
  --tag-red-line: #f5c2c2;
  --tag-grey-bg: #e6eae9;
  --tag-grey-fg: #4d5758;
  --tag-grey-line: #d0d7d6;
  --color-danger: #a4413a;
  --color-danger-tint: #f7eae8;
  /*
    地図の色。**海と陸の差が付いていないと、地図に見えない。**
    ピンは地図と同じ系統だと埋もれるので、**赤**で別系統にする（運営の指示。2026-08-28）。
  */
  --color-map-sea: #cfe1e6;
  --color-map-land: #fbfcfb;
  --color-map-line: #8fa1a4;
  --color-map-here: #a9cdcb;
  /*
    地図の印。**黄色は、この地図の地色（ほぼ白）の上では単体で成立しない。**
    測ったら #d69700 で 2.46、#ffd75c では 1.35（図形に要るのは3.0）。
    明るさの選び方ではなく、黄色という色相と白い地の組み合わせの問題なので、
    **輪郭で境目を作る**（#6b4900 は地色と 7.92、塗りと 5.87）。2026-09-01に測って決めた。
  */
  --color-map-pin: #b28700;
  --color-map-pin-edge: #6b4900;
  /*
    件数の円は**白い数字を載せる**ので、点より濃くする。
    白は #f9bd25 の上で 1.70 しかなく（本文に要るのは4.5）読めない。
    #9c6600 なら 4.87 で通り、地色との差も 4.73 ある。
  */
  --color-map-count: #9c6600;
  --color-map-count-text: #ffffff;
  /* 公演の近さ。イベントのタグ（.tag--timing-*）と同じ赤→橙の並び */
  --color-map-pulse-today: #cf3b2f;
  --color-map-pulse-soon: #dd6a17;
  /*
    施設のまとまりの色（`App\Support\FacilityGroup`）。

    **形が主、色が従。** 形だけでも読めるようにしてあるので、
    色は「速く読む」ための助けにとどめる（色の見え方が違う人にも伝わる）。
    **演奏する場所は黄色のまま**——ホール専用ページと同じ色にして、ページ間で揺らさない。
    輪郭は、どの色でも地色から浮くだけの濃さを持たせる。

    ⚠️ **地色に対して 3:1 を割らない**（運営の指摘。2026-09-03）。

    > 青と緑の三角ですが、背景色とのコントラストが弱くて見づらい気がします。

    測ったら**明るい配色では5種類とも 3:1 未満**だった
    （青 2.13、緑 1.78、黄 1.35、紫 2.14、灰 1.80）。
    印は6px前後しかないので、薄い色だと陸（#fbfcfb）に溶ける。
    暗い配色は元から 7〜9:1 あり、問題は明るい側だけだった。

    **色味は変えず、濃さだけ上げた。** 系統を変えると、
    ホール専用ページの黄色や凡例と食い違う。

    ⚠️ **明るさも互いに離す。** 全部を同じ濃さに揃えると、白黒で見たときや
    色の見え方が違う人には**5つとも同じ色**になる。
    3.2 / 3.9 / 4.6 / 5.4 / 6.3 と段を付けてあり、
    どの2つを比べても明るさの比が 1.15 以上ある。
    （`MapMarksStandOutFromTheLandTest` が両方を見張る）
  */
  --color-map-perform: #b28700;
  /*
    練習できる場所（ホールは無いが練習室がある）。ホールの金と分ける（2026-09-05）。

    ⚠️ **明るさは、いちばん濃い段に置くしかなかった**（2026-09-05に測って直した）。
    最初に選んだ #2f7d6f は音楽教室の青と**明るさがほぼ同じ**（1.03倍）で、
    白黒で見ると2つとも同じ灰色になっていた。
    6色ですでに 3.2〜7.4:1 の段が埋まっており、**間に入る隙間が無い**
    （どこへ入れても隣と1.15倍に届かない）。薄いほうへ出すと陸に溶けるため、
    残るのは濃いほうだけ。8.4:1 の深い青緑にした。
  */
  --color-map-practice: #14494c;
  --color-map-practice-edge: #082a2c;
  --color-map-perform-edge: #6b4900;
  --color-map-teach: #1b78b9;
  --color-map-teach-edge: #1d4a66;
  /*
    自動車駅（目印）。**色相を持たない灰**にする（2026-09-05 運営の指示）。
    施設の種類はどれも色で語っているので、目印がそこへ割り込まない。
  */
  --color-map-bus: #5c6470;
  --color-map-buy: #329132;
  --color-map-buy-edge: #1f5a2a;
  /*
    直す場所（運営の判断。2026-09-03）。
    ⚠️ **赤・橙は使えない**——そこは「公演が近い」の波紋
    （`--color-map-pulse-today` #cf3b2f / `--color-map-pulse-soon` #dd6a17）が
    先に使っている。同じ色で別の意味を言うと、どちらも読めなくなる。
    急ぎの印として読めて、5色のどれとも色相が離れているローズにする。
    **いちばん濃い段**（7.4:1）に置いて、地図の中で先に目に入るようにした。
  */
  --color-map-repair: #9f1a52;
  --color-map-repair-edge: #5c0d2f;
  --color-map-gather: #8b34b3;
  --color-map-gather-edge: #4a2a5c;
  --color-map-other: #79654a;
  --color-map-other-edge: #4d4236;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(20, 30, 30, 0.08);
  --shadow-md: 0 4px 16px rgba(20, 30, 30, 0.1);
  --max-width: 1120px;
  --font-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Noto Sans JP", "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  /* 暗い配色では逆に、カードを地より**浮かせる**（明るくする） */
  --color-bg: #1b2123;
  --color-bg-page: #14181a;
  --color-bg-alt: #232a2c;
  --color-bg-alt2: #2b3335;
  --color-text: #e7eceb;
  --color-text-muted: #a7b0af;
  --color-border: #313a3c;
  --color-primary: #6fb2ae;
  --color-primary-dark: #8fc9c5;
  --color-primary-tint: #1e2c2b;
  --color-accent: #d1ab6a;
  --color-accent-tint: #2e2721;
  /* 暗い配色では逆に、淡い面の上なので明るく置く */
  --color-accent-dark: #e0c28c;

  /* 印の色。暗い配色では**濃い面に明るい文字**（明暗を入れ替える） */
  --tag-blue-bg: #1b3247;
  --tag-blue-fg: #9dc4e8;
  --tag-blue-line: #2b4a66;
  --tag-green-bg: #17301f;
  --tag-green-fg: #96d0ab;
  --tag-green-line: #27482f;
  --tag-amber-bg: #33280f;
  --tag-amber-fg: #e0bd7a;
  --tag-amber-line: #4c3c19;
  --tag-red-bg: #3a1f1f;
  --tag-red-fg: #eb9a9a;
  --tag-red-line: #542d2d;
  --tag-grey-bg: #2f3638;
  --tag-grey-fg: #b9c0bf;
  --tag-grey-line: #3f4749;
  --color-danger: #e08a80;
  --color-danger-tint: #2c1e1c;
  --color-map-sea: #16262b;
  --color-map-land: #2b3437;
  --color-map-line: #59696c;
  --color-map-here: #35595a;
  /*
    **暗い配色では逆になる。** 明るい黄は暗い地（#2b3437）の上で 8.65 あるので、
    輪郭は要らない——地色で離すだけでよい（重なった印を分けるため）。
    件数の円も明るくするので、**そこだけ数字を濃い色に戻す**。
    白い数字が通る濃さ（4.5以上）と、暗い地から浮く明るさ（3.0以上）は
    計算上どの色でも両立しない。
  */
  --color-map-pin: #ffdf8f;
  --color-map-pin-edge: #2b3437;
  --color-map-count: #e8a317;
  --color-map-count-text: #4a3200;
  --color-map-pulse-today: #ff6b5e;
  --color-map-pulse-soon: #f59a5c;
  /* 暗い配色では、塗りを明るくして輪郭を地色にする（地色で離すだけでよい） */
  --color-map-perform: #ffdf8f;
  --color-map-perform-edge: #2b3437;
  --color-map-teach: #9ed0f0;
  --color-map-teach-edge: #2b3437;
  --color-map-bus: #b4bcc8;
  /*
    練習できる場所。⚠️ **暗い配色の指定が抜けていた**（2026-09-05に気づいて追加）。
    明るい配色の濃い緑(#2f7d6f)のまま暗い地の上に出ており、地色から浮いていなかった。
  */
  --color-map-practice: #86d8c8;
  --color-map-practice-edge: #2b3437;
  --color-map-buy: #a9e3a9;
  --color-map-buy-edge: #2b3437;
  --color-map-repair: #ff9ec2;
  --color-map-repair-edge: #2b3437;
  --color-map-gather: #dbb8ea;
  --color-map-gather-edge: #2b3437;
  --color-map-other: #ded3c6;
  --color-map-other-edge: #2b3437;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
}


* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/*
  ⚠️ **いちばん外側にも地の色を置く**（運営の指示。2026-09-18「携帯でみると黒くなります」）。
  `body` だけに置くと、**スクロールの行き過ぎ（バウンス）で外側の地が見える**。
  そこは端末の既定色なので、暗い設定の端末では黒く出る。
*/
html {
  background: var(--color-bg-page);
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  /*
    **地はカードより沈める。** 白いカードを白い地に置くと、
    細い線だけが仕切りになり、どれも同じ重さに見える。
  */
  background: var(--color-bg-page);
  line-height: 1.7;
  font-size: 16px;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Header ---------- */
/* ヘッダーは画面上に貼り付いている。その下に貼り付けたいもの（索引など）が
   高さを知る必要があるので、変数にして共有する */
:root {
  --header-height: 3.6rem;
}

@media (max-width: 640px) {
  :root {
    --header-height: 3.2rem;
  }
}

.site-header {
  /*
    **上端にサイトの色を1本置く。** 白地に細い灰色の線だけだと、
    どのサイトを見ているのか分からない。
    面で塗ると重いので、線1本にとどめる。
  */
  border-top: 3px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  /*
    印を置いたぶん、上下にも余白を足す。
    28pxの印は名乗り2行とほぼ同じ高さなので、0.85remのままだと
    印が枠の上下に張り付いて窮屈に見えた（運営の指摘。2026-08-28）。
  */
  padding: 1.05rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary-dark);
  /* 名乗りは縮めない。縮ませると副題が2〜3行に割れてヘッダーが崩れる */
  flex-shrink: 0;
  white-space: nowrap;
  /* 印を名前の左に置く。印が無いときは間隔も生まれない（要素そのものが出ない） */
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/*
  サイトの印（運営が管理画面から差し替える。無ければ出ない）。

  **角を丸めない。** 画像は背景を抜いた版を使うので、
  丸めると輪郭の無いところに角丸だけが現れて、かえって箱に見える。
*/
.site-mark {
  display: block;
  flex-shrink: 0;
}

.brand__name {
  display: block;
  line-height: 1.15;
}

.brand:hover {
  text-decoration: none;
  opacity: 0.85;
}

/*
  **「β版」の札**（運営の指示。2026-10-22）。

  ⚠️ **名乗りのすぐ右に置き、`margin-right: auto` で残りを右へ押す。**
  ヘッダーの内側は `justify-content: space-between` なので、
  これが無いと札が**ヘッダーの真ん中に浮いて**、名乗りと無関係な札に見える。

  ⚠️ **金色（accent）にして、緑（primary）のナビと見分ける。**
  ナビと同じ色にすると「押せる項目」に見える。これは状態の札で、押せない。

  ⚠️ **小さくしすぎない。** 読めない札は、出していないのと同じ。
*/
.beta-badge {
  flex-shrink: 0;
  margin-right: auto;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  white-space: nowrap;
  /* 押せないので、文字を選ぼうとしたときのカーソルのままでよい */
  cursor: default;
}

/*
  狭い画面では、名乗り・札・ハンバーガーで横が埋まる。

  ⚠️ **札が押し出す側になってはいけない。**
  名乗り（`.brand`）は `flex-shrink: 0` で縮まないので、
  詰まったときに押し出されるのは**いちばん右のハンバーガー**——
  つまり**スマホで唯一のメニューが画面の外へ出る**。

  そこで札だけを縮む側にする。入りきらなければ札が欠けるが、
  **メニューが消えるよりはるかにまし**。

  ⚠️ **480pxでは実測で9px余っている**（ハンバーガーの右端 x=470 / 画面 479）。
  それより狭い幅は、手元の描画系が480px未満に組み直さないため**確かめられていない**。
  この指定は、確かめられない幅での壊れ方を**軽いほうへ倒すため**のもの。
*/
@media (max-width: 640px) {
  .beta-badge {
    margin-right: 0;
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    /* 詰まったら、ここが縮む */
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  /* メニューは最後まで残す */
  .hamburger {
    flex-shrink: 0;
  }
}

/*
  名乗りの読み（運営の指示。2026-09-28）。

  「Ensychord」は日本人には読みにくく、「エンシーコード」と読まれる。
  **名前のすぐ下に、小さく添える。**

  ⚠️ **副題より小さくしない。** 読めないことのほうが困るので、
  副題と同じ大きさにして、色だけ落とす。
*/
.brand__reading {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
  line-height: 1.2;
}

.brand__sub {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav__list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  /*
    **足りなくなったら、項目ごと折り返す。**
    運営と会員の両方でログインしていると右上のバッジが2つ並び、
    そのぶん幅が足りなくなる。既定のままだと項目が押し潰されて
    「ログアウト」が1文字ずつ縦に割れ、他の項目だけ上に寄っていた
    （運営の指摘。2026-08-28）。

    `align-items: center` … 高さが揃わなくても上に張り付かない
    `flex-wrap` + `li` の `nowrap` … 割れるのは項目の間だけで、語の中では割れない
  */
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  row-gap: 0.5rem;
}

.site-nav__list > li {
  white-space: nowrap;
}

.site-nav__list a {
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 500;
  /* 「作品・楽曲」が「作品・」「楽曲」に割れるのを防ぐ。
     入りきらないときは折り返すのではなく、項目そのものを減らす（--sub） */
  white-space: nowrap;
}

/*
  広い画面のヘッダーに並べないもの。
  区分（4つ）とログインだけを残す。畳んだものはフッターと
  右上のアカウント（.account-badge）から辿れる。
  狭い画面ではメニューを開いて縦に並ぶので、下の media query で出す。
*/
.site-nav__item--sub {
  display: none;
}

.site-nav__list a:hover {
  color: var(--color-primary);
}

.nav-toggle {
  display: none;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.hamburger:hover {
  background: var(--color-bg-alt);
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  margin: 0 auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 区分5つ＋ログインが横一列に収まる下限は約800px。その手前でメニューに畳む */
@media (max-width: 840px) {
  .site-nav {
    /*
      ⚠️ **中央そろえのまま畳むと、上が永久に見えなくなる**（運営の報告。2026-09-16）。

      > ハンバーガーメニューの上側がヘッダーで隠れて押せません。
      > あと、段組みがちょっと変です。
      > 作品の検索画面とかでてこないのでしょうか？

      素の `.site-nav` は `display: flex; align-items: center` で、
      **狭い画面でも上書きしていなかった**。ここは `overflow-y: auto` で
      `max-height` を付けた入れ物なので、**中身が入りきらないと上下に等しくはみ出す**——
      そして**上へのはみ出しには巻き戻せない**（スクロールは0から下にしか動かない）。
      結果、先頭の「楽曲・楽譜（楽曲 7,123／楽器 262）」が**出ているのに触れない**状態だった。

      同じ指定で**段組みも崩れていた**。子は `<ul>` 1つだけなので、
      横並びのフレックスだと**幅いっぱいに広がらず**、
      見出しの位置も下線の右端もばらついて見える。

      **`block` にすれば両方直る。** 縦に積むだけの入れ物なので、フレックスである必要が無い。
    */
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
  }

  .site-nav__list a {
    display: block;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    white-space: normal;
  }

  /* 縦に並ぶので幅の制約が無い。畳んでいたものもここでは全部出す */
  .site-nav__item--sub {
    display: block;
  }

  .hamburger {
    display: flex;
  }

  /*
    **開いたら、画面に入る高さいっぱいまで広げて、入りきらない分は中で流す。**

    以前は `max-height: 400px` に固定していたため、メニューが27項目ある状態では
    8項目ほどで切れ、しかも `overflow: hidden` のままなので**スクロールもできなかった**
    （運営の指摘。2026-08-31。`/places` で気付いたが、全ページで起きていた）。

    `100dvh` は、スマートフォンでアドレスバーが出入りしても実際に見えている高さを指す。
    対応していない環境のために `100vh` を先に書く（後の行が勝つ）。
  */
  .nav-toggle:checked ~ .site-nav {
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    /* メニューの端まで来たときに、後ろのページまで動かない */
    overscroll-behavior: contain;
  }

  .nav-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-wrap {
  padding: 0.65rem 1.25rem;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  overflow-x: auto;
  white-space: nowrap;
}

/*
  パンくずの区切り。
  以前は「›」(U+203A) を使っていたが、iOS では別の字形（絵文字寄り）に置き換わり、
  文字化けしたように見えることがある。**文字に頼らず、線で三角を描く**。
*/
.breadcrumb__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.45rem;
  border-top: 1.5px solid var(--color-text-muted);
  border-right: 1.5px solid var(--color-text-muted);
  transform: rotate(45deg) translateY(0.05em);
  vertical-align: middle;
}

.breadcrumb__item a {
  color: var(--color-text-muted);
}

.breadcrumb__item a:hover {
  color: var(--color-primary);
}

.breadcrumb__item span[aria-current] {
  color: var(--color-text);
}

/* ---------- Main / typography ---------- */
.site-main {
  min-height: 60vh;
  padding: 2rem 0 3.5rem;
}

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.page-title {
  font-size: 1.6rem;
  margin: 0 0 0.35rem;
}

.page-lead {
  color: var(--color-text-muted);
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
}

/* 邦題の下に続く英題など、補助的な見出し（7-19） */
/*
  原綴・英題など、上の行の「続き」として添える1行。

  **上に何も無いときに詰めてはいけない。**
  見出しのすぐ下に置かれると、負の余白で見出しに重なって読めなくなる
  （作曲家ページは邦題にあたる行が無く、実際に重なっていた）。
  詰めるのは、すぐ上に同じ種類の行があるときだけにする。
*/
.page-lead--sub {
  font-size: 0.9rem;
  font-style: italic;
}

.page-lead + .page-lead--sub {
  margin-top: -1.4rem;
}

/* 作品番号（例: 作品20a）をタイトル横に小さく添える（7-19） */
.page-title__opus {
  font-size: 0.7em;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 0.4em;
  white-space: nowrap;
}

.section-title {
  font-size: 1.15rem;
  border-left: 4px solid var(--color-primary);
  padding-left: 0.6rem;
  margin: 2rem 0 1rem;
}

/* ---------- Buttons / forms ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}

.btn:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  text-decoration: none;
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary-tint);
}

.btn--block {
  width: 100%;
}

.form-field {
  margin-bottom: 1.15rem;
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field .hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

.form-field .error {
  font-size: 0.8rem;
  color: var(--color-danger);
  margin-top: 0.3rem;
}

.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}

.checkbox-group label,
.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 400;
}

.alert {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.alert--success {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
}

.alert--error {
  background: var(--color-danger-tint);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

/* ---------- Tags / chips ---------- */
.tag {
  display: inline-block;
  font-size: 0.76rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  margin: 0 0.3rem 0.3rem 0;
}

.tag--secondary {
  background: var(--color-bg-alt2);
  color: var(--color-text-muted);
}

/* 楽器の属性（分類・まとまり・同族・管の調）。見出しのすぐ下に並べる */
.instrument-tags {
  margin: 0.25rem 0 1rem;
}

/* 作曲者本人の言葉。**他の説明と混ざらないように囲う**（誰の言葉かが読めることが要点） */
.composer-comment {
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-alt);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
}

.composer-comment__author {
  font-weight: 700;
  margin: 0 0 0.35rem;
}

/* 本人にだけ出す「書く」入口。コメントが1件も無い作品でもここに出る */
.composer-comments__invite {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.75rem;
}

/* 作曲家ページの「ご本人ですか？」。**探している人にだけ意味がある**ので目立たせない */
.composer-claim {
  margin: 0.75rem 0 1.5rem;
}

/* 掲載についての連絡（取り下げ依頼）への導線。
   目立たせすぎない（本文の邪魔をしない）が、探せば必ず見つかる位置に置く */
.report-link {
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
}

.report-link a {
  color: var(--color-text-muted);
}

/* 連絡フォームのご用件（種類ごとに説明を添える） */
.report-reason {
  display: block;
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.report-reason__label {
  font-weight: 600;
  margin-left: 0.3rem;
}

.report-reason__description {
  display: block;
  margin-left: 1.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* 券種と料金。「前売2,000円／当日2,500円」を1行ずつ */
.ticket-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticket-list > li {
  padding: 0.15rem 0;
}

.ticket-list__name {
  display: inline-block;
  min-width: 5em;
  font-weight: 600;
}

.ticket-list__price {
  margin-left: 0.4rem;
}

/* 「いつ・どの演奏会で・何を吹いたか」の記録（非公開） */
.experience-detail {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.experience-detail__summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

.experience-detail__list {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
}

.experience-detail__list > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.experience-detail__event {
  font-weight: 600;
}

.experience-detail__remove form,
.experience-detail__remove {
  margin: 0;
}

.experience-detail__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin-top: 0.5rem;
}

.experience-detail__form label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* 「誰が入れて、誰が確かめたか」の小さな目印。本文の邪魔をしない大きさにする */
.data-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 1rem;
}

.data-status__item {
  font-size: 0.7rem;
  line-height: 1.6;
  padding: 0.05rem 0.45rem;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: help;
}

.data-status__item--verified {
  border-color: #2e7d32;
  color: #2e7d32;
}

.data-status__item--pending {
  border-color: #b3261e;
  color: #b3261e;
}

/* イベントの種類（演奏会・コンクールなど）。状態の札と見分けが付くよう色を変える */
.tag--type {
  background: var(--color-primary);
  color: #fff;
}

/* 初演の目印。運営が確かめたものではないので、確認済みの色（緑）とは変える */
.tag--premiere {
  background: #7a3fa0;
  color: #fff;
  font-weight: 700;
  cursor: help;
}

/* 載ったばかりの情報。一覧は開催日の順に並ぶので、新しいものが埋もれる */
.tag--new {
  background: #b3261e;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 開催が近いもの。近いほど強い色にする */
.tag--timing {
  font-weight: 700;
}

.tag--timing-today {
  background: #b3261e;
  color: #fff;
}

.tag--timing-tomorrow {
  /*
    **白文字が読める濃さにする。** #c86a00 は白との差が3.81しかなく、
    本文に要る4.5に届いていなかった（2026-09-01に測って判明）。
    #a85700 なら4.81。「今日」「明日」「まもなく」の並びも保たれる。
  */
  background: #a85700;
  color: #fff;
}

.tag--timing-soon {
  background: #7a5c00;
  color: #fff;
}

/* 指導楽器から講師を辿るアコーディオン（7-20） */
.instrument-teachers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.instrument-teachers__item {
  flex: 1 1 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.instrument-teachers__summary {
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  font-weight: 700;
  font-size: 0.92rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.instrument-teachers__summary::-webkit-details-marker {
  display: none;
}

.instrument-teachers__count {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.instrument-teachers__list {
  padding: 0.2rem 0.8rem 0.7rem;
  margin: 0;
  border-top: 1px solid var(--color-border);
}

/*
  楽団の演奏曲目リスト（7-20）。

  **見出しは貼り付けておく。** 何十行も流すと、右端の数字が何の数か分からなくなる
  （運営の指摘。2026-08-30）。ヘッダーが画面上に固定されているので、その下に付ける。

  列は「曲名／作曲者・編曲者／回数」の3つ。作曲と編曲を分けていたときは
  32remないと収まらず、狭い画面では横に流していた。
*/
.repertoire { overflow-x: auto; margin: 0 0 1.5rem; }
.repertoire__table { width: 100%; min-width: 22rem; }
.repertoire__count-head,
.repertoire__count { text-align: right; white-space: nowrap; }

.repertoire__table thead th {
  position: sticky;
  top: var(--header-height);
  z-index: 1;
  background: var(--color-bg);
  box-shadow: inset 0 -1px 0 var(--color-border);
}

/* 残りの曲。**畳んでおく**（先頭20曲の下に何十行も続くと、その先が読まれない） */
.repertoire__more {
  margin: -0.75rem 0 1.5rem;
}

.repertoire__more > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* 住所の地図表示（7-20） */
.address-map {
  margin: 0 0 1.5rem;
}

/*
  地図の枠。**押してから差し込む iframe にも同じ見た目を当てる**。
  差し込むときにクラス名を書くと、その文字がすべてのページのHTMLに載ってしまい、
  「住所非公開なら地図を出さない」の見張りに引っかかる（2026-08-30）。
*/
.address-map__frame,
.map-embed > iframe {
  width: 100%;
  max-width: 100%;
  height: 320px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/*
  地図の代わりに最初に出す面。**押されるまで外へ通信しない**（動画と同じ考え方）。
  枠の高さは読み込み後の地図と揃える（押した瞬間に下の文章が飛ばないように）。
*/
.map-embed__cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 12rem;
  padding: 1rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
}

.map-embed__cover:hover {
  background: var(--color-bg-alt2);
}

.map-embed__pin {
  font-size: 1.6rem;
}

.map-embed__label {
  font-weight: 700;
}

.map-embed__note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.address-map__link {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
}

/* 番地を伏せている住所で、地図の代わりに出す案内（曖昧公開） */
.address-map__note {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  background: var(--color-surface-alt, #f6f6f6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* 掲載データに所属として入っているときの案内（登録ボタンの代わり） */
.relationship-actions__listed {
  margin: 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: var(--color-surface-alt, #f6f6f6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* 会員設定の一覧で、保存と削除を横に並べる */
.relationship-row-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  white-space: nowrap;
}

.relationship-row-actions form {
  margin: 0;
}

/* 曲によって持つ楽器が変わる席の補足（No.1 では A クラリネット）。
   曲名は畳むが、持ち替えがあること自体は閉じたままでも分かるようにする */
.part-variants {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.part-variants__summary {
  cursor: pointer;
  white-space: nowrap;
}

.part-variants__hint {
  margin-left: 0.15rem;
}

.part-variants__list {
  margin: 0.25rem 0 0;
  padding-left: 0;
  list-style: none;
}

/* 内訳は「何を持つか」が先。曲名から読ませると、
   24曲ぶんの曲名を読み終わるまで楽器に辿り着けない */
.part-variants__list > li {
  margin-top: 0.35rem;
}

.part-variants__instruments {
  color: var(--color-text);
}

.part-variants__count {
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  font-size: 0.75rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}

.part-variants__movements {
  display: block;
  padding-left: 0.6rem;
  border-left: 2px solid var(--color-border);
}

/* ⚠️ **読めなかった楽器は、楽章ごとの行にも出す**（運営の指示。2026-10-12）。
   「無い」と読まれないよう、曲名の下に続けて置く。
   目立たせはしない——直すのは運営で、読む人に行動を求めるものではない */
.part-variants__note {
  display: block;
  padding-left: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* 「この情報は何を見て書いたか」の断り書き */
.source-note {
  margin: 0 0 1.5rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 楽章・区分の形式（ソナタ形式など） */
.movement-tree__form {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* 演奏会のプログラム（部の入れ子） */
.program__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.program__section {
  margin: 0 0 1rem;
  padding-left: calc(var(--depth, 0) * 1.2rem);
}

.program__section-title {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.program__section-type {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.program__section-note {
  margin-left: 0.5rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.program__works {
  list-style: none;
  margin: 0;
  padding-left: 0.4rem;
}

.program__works > li {
  padding: 0.2rem 0;
}

/* 番号は部ごとに1から。全体の通し番号だと当日の進行と食い違う */
.program__number {
  display: inline-block;
  min-width: 1.6em;
  color: var(--color-text-muted);
}

.program__loose-title {
  margin: 1rem 0 0.35rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* 「どの曲で使うか」。曲名は畳んでおかないと表が読めなくなる */
/*
   「使う曲」の欄。

   **折り返せるようにする。** 以前は nowrap にしていたが、それで済んでいたのは
   中身が「18曲は休み」のように短かったからで、通奏低音のチェンバロは
   「レチタティーヴォと2曲」になる。欄からはみ出して**隣の列と文字が重なっていた**。
*/
.scope__summary {
  cursor: pointer;
  overflow-wrap: anywhere;
}

.scope__hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.scope__list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/* 調性・拍子・速度の表 */

/* 広い画面でも、列が多いときは表だけ横に流す（ページ全体は横スクロールさせない） */
.attribute-table-wrap {
  overflow-x: auto;
}

/*
  **幅は列の役割で決める。内容で決めない。**
  自動レイアウトのままだと、長い曲名（「第9番 アリア『もう飛ぶまいぞ、この蝶々』（Aria）」）で
  列が伸び、他の列が潰れて文字が重なっていた。
  固定レイアウトにすれば、**どんな作品でも同じ幅**になる。
*/
.attribute-table {
  width: 100%;
}

/* 表が潰れるくらいなら横に流す（包む側が overflow-x: auto） */
/*
  **横スクロールにしない。**
  最小幅を持たせていたため、列の多い作品では画面からはみ出していた（運営の指摘）。
  幅は割合で決めてあるので、どんな画面でも必ず収まる。
  狭い画面では下の media query が表をカードに組み替える。
*/
.attribute-table-wrap > .attribute-table {
  min-width: 0;
}

/*
  区分の名前は左端に。行が続いていることが分かるよう、続きの行は空にする。

  **折り返しを禁じない。** 以前は nowrap にしていたため、
  「第9番 アリア『もう飛ぶまいぞ、この蝶々』（Aria）」のような長い曲名で
  列が伸び、表そのものがはみ出していた。
  **作品ごとにCSSを変えない**ので、幅は列の役割で決めて長い文字は折り返す。
*/
/*
  **`.info-table th` の指定を打ち消す。**
  この表は info-table を継いでいるが、あちらの `th` は「項目名の列」を想定していて
  `white-space: nowrap` と固定幅が入っている。
  こちらの `th` は曲名が入るので、**折り返さないと隣の列に重なる**（実際に重なっていた）。

  **打ち消しは、詳しさで勝たせる。**
  `.attribute-table th` は `.info-table th` と詳しさが同じなので、
  **後に書かれたほうが勝つ**。`.info-table th` はこのファイルの後ろにあるため、
  打ち消したつもりが打ち消せておらず、長い曲名
  （「第1曲 イントロイトゥスとキリエ（Introitus et Kyrie）」）が
  折り返さずに隣の列へはみ出していた（運営の指摘）。
  並び順に頼らず、クラスを2つ重ねて勝たせる。
*/
.info-table.attribute-table th {
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.info-table.attribute-table .attribute-table__section {
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 幅は列そのものに持たせる（table-layout: fixed は先頭行ではなく col を見る） */
/*
  **文の場所は文の列に。**
  備考を小節のセルに入れていたため、小節の列を15emも取ることになり、
  そのぶん**調性・拍子・速度が潰れて**いた（運営の指摘。2026-08-26）。
  「第330小節〜」は短い。備考は独立した列に出す。
*/
.attribute-table__col--section {
  width: 26%;
}

.attribute-table__col--where {
  width: 14%;
}

.attribute-table__col--note {
  width: 16em;
}

/* 「第57小節〜」は短いので折らない。備考は同じセルの中で折り返す */
.attribute-table__where {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.attribute-table__measure {
  display: inline-block;
  white-space: nowrap;
}

/* 値の列は内容が短い。折り返しの余地を残しつつ、縦位置を揃える */
.attribute-table td {
  vertical-align: top;
}

/* 変わらなかった項目の「〃」。値そのものと見分けが付くよう薄くする */
.attribute-table__same {
  color: var(--color-text-muted);
}

/* 「3拍目から」のような、小節番号だけでは足りない補足 */
/*
  **表のセルに `display: block` を当てない。**
  備考を独立した列にしたとき、`<span>` 向けの `display: block` が
  `<td>` にもそのまま当たり、**セルが表の桝から外れて崩れていた**（運営の指摘。2026-08-26）。
  楽章のページ（`movements/show`）では今も `<span>` で使うので、そちらだけに当てる。
*/
span.attribute-table__note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.info-table.attribute-table td.attribute-table__note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* 続きの行の見出し。区分名より控えめにして、続いていることだけを示す */
.attribute-table__continued {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/*
  途中の変化。冒頭の指定が埋もれないように畳んでおく。

  表を分けると同じ曲の続きなのに別々に見えるため、表は1つのままにして行だけを開閉する。
  JavaScriptは使わず、チェックボックスと兄弟セレクタで切り替える
  （ハンバーガーメニューと同じ作り）。
*/
/*
  **途中での変化は、はじめから見せる。**
  畳んでいたため、**調が変わったこと自体が画面に出ていなかった**
  （運営の指摘。2026-08-26）。調や速度がどこで変わるかは、この表の主役である。

  量の心配は要らなかった。調性などを持つ156作品のうち**134作品は変化が0箇所**で、
  いちばん多い作品でも20箇所。数十になるのは歌劇だけで、そちらは幕ごとに畳んである。

  それでも短く見たいときのために、畳む道は残す（印を付けると隠れる）。
*/
/*
  **印は行にも入れ物にも付く。**
  1つの区分を1つの `tbody` にまとめたとき、印を `tr` へ移した。
  `table-row-group` を行に当てると**表の列がそろわなくなる**ので、付いた先で使い分ける。
*/
tbody.attribute-changes__rows {
  display: table-row-group;
}

tr.attribute-changes__rows {
  display: table-row;
}

/*
  **畳み（details）を挟んでも届くようにする。**
  兄弟セレクタは1つ下の階層までしか辿らないので、
  畳みを入れた時点で「途中の変化」が開かなくなっていた。
*/
.attribute-changes__toggle:checked ~ .attribute-table-wrap .attribute-changes__rows,
.attribute-changes__toggle:checked ~ .attribute-fold .attribute-changes__rows {
  display: none;
}

.attribute-changes__label {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.88rem;
  color: var(--color-primary);
  cursor: pointer;
}

.attribute-changes__label:hover {
  text-decoration: underline;
}

/* キーボード操作でも、どこにいるか分かるようにする */
.attribute-changes__toggle:focus-visible ~ .attribute-changes__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 既定は開いている。文言も「隠す」から始める */
.attribute-changes__when-closed,
.attribute-changes__toggle:checked ~ .attribute-changes__label .attribute-changes__when-open {
  display: none;
}

.attribute-changes__toggle:checked ~ .attribute-changes__label .attribute-changes__when-closed {
  display: inline;
}

/* 編成の表。楽器の欄に持ち替え・代替をまとめるので、そこを広く取る */
.instrumentation-table__col--instrument {
  width: 36%;
}

.instrumentation-table__col--part {
  width: 18%;
}

/* 「レチタティーヴォと2曲」が入る。均等割りでは足りない */
.instrumentation-table__col--scope {
  width: 28%;
}

.instrumentation-table__col--count {
  width: 18%;
}

.instrumentation-table th:last-child,
.instrumentation-table td:last-child {
  white-space: nowrap;
}

/*
  **同じ楽器が続く行は、1つのまとまりに見せる。**

  「フルート／フルート」と並ぶと、読む人は違いを探すことになる
  （運営の指示。2026-08-27）。続きの行は名前を書かず、
  **間の仕切り線も消して**、上の行の続きだと目に見せる。

  仕切り線は `.info-table` が `border-bottom` で引いている。
  下側に引いていると「上の行の線」を消せないので、
  この表だけ**上側に引き直す**（調性の表と同じやり方）。
*/
.info-table.instrumentation-table tbody th,
.info-table.instrumentation-table tbody td {
  border-bottom: 0;
  border-top: 1px solid var(--color-border);
}

.info-table.instrumentation-table tbody tr:first-child > th,
.info-table.instrumentation-table tbody tr:first-child > td {
  border-top: 0;
}

.info-table.instrumentation-table tbody tr.instrumentation-table__continues > td {
  border-top: 0;
}

/* 楽器・持ち替え・代替を縦に積む。横に並べると1つあたりが細くなって読めない */
.part-cell,
.part-cell__extras {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.part-cell__instrument {
  font-weight: 600;
}

.part-cell__note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* 分売の楽譜（「第3楽章のみ」）。買う前に気づけるよう、品番より目立たせる */
.tag--part {
  background: var(--tag-blue-bg);
  color: var(--tag-blue-fg);
  border-color: var(--tag-blue-line);
}

/*
  何人で組めるか（出版社の楽譜一覧）。**最初に目に入る数字**なので、
  品番や価格より前に、数字だけを読み取れる形にする。
*/
/*
  何人で組めるか（出版社の楽譜一覧）。

  **買える形態（「紙の楽譜 5,500円」）と同じ色をしていた**ため、
  何の印なのか見分けられなかった（運営の指摘。2026-08-31）。
  ここは**曲の性質**なので、値段や品番とは別の系統にする。
*/
/* 印の中の内訳（「13パート（必須11）」の後半）。主の数字より一段弱く */
.tag__sub {
  font-weight: 400;
  opacity: 0.8;
}

.tag--count {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 並べ替えの選び場所。中身より前に置くが、主役ではないので小さく */
.score-catalog__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.score-catalog__sort-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-right: 0.15rem;
}

/* 持ち替え・代替に添える但し書き（「2楽章は任意で持ち替え可」）。楽器名より一段弱く */
.part-cell__hint {
  color: var(--color-text-muted);
  font-size: 0.95em;
}

.part-cell__count {
  white-space: nowrap;
}

/*
  「曲による」「組による」に添える内訳。

  **人数の列は折り返さない指定になっている**（「必須 1人」を途中で切らないため）。
  そこに「III. ワシントン・ポストでは任意」のような長い文が入ると、
  折り返せないまま列が伸び、**表そのものが横スクロールになる**（運営の指摘）。
  内訳は次の行に落として、そこだけ折り返しを許す。
*/
.part-cell__detail {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* 代替楽器が10種を超える作品がある。畳んで数だけ見せる */
.part-alternatives__summary {
  cursor: pointer;
}

.part-alternatives__list {
  display: block;
  margin-top: 0.15rem;
}

/*
  狭い画面では、表のまま出すと1列あたり数文字になって読めない。
  1行を1枚のカードに組み替え、値の前に項目名（data-label）を出す。
*/


/* 「習った」「在籍した」「使ったことがある」の登録ボタン */
.relationship-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.relationship-actions__form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.relationship-actions__done {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.btn--quiet {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
  color: inherit;
  background: var(--color-surface-alt, #f6f6f6);
}

/* 公式サイト・SNSのリンク（link_types のアイコン付き） */
.entity-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.entity-link__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.entity-link__icon--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

/* 一覧ページ: アイコンだけを横一列に並べる（1件あたりの背を高くしない） */
.entity-links--icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.entity-link--icon-only {
  width: 30px;
  height: 30px;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
}

.entity-link--icon-only:hover,
.entity-link--icon-only:focus-visible {
  border-color: var(--color-accent, #2a5d8f);
  background: var(--color-surface-alt, #f6f6f6);
}

/* 「市区町村まで」など、どこまで出しているかの断り書き */
.address-line__note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* 終了・解散など「もう活動していない」ことを示すバッジ（7-20） */
.tag--muted {
  background: var(--tag-grey-bg);
  color: var(--tag-grey-fg);
}

/*
  「これから閉まる」ことを示すバッジ（閉館予定・閉店予定）。
  **灰色にはしない。** まだ使える施設なので、終わったものと同じ見た目にすると
  一覧の中で「もう無い」と読まれてしまう。目に留まる色で、印としてだけ添える。
*/
.tag--closing {
  background: var(--tag-amber-bg);
  color: var(--tag-amber-fg);
  border: 1px solid #e8c98a;
}

/* 詳細ページ内の小見出し（「これから」「これまで」など。7-20） */
.subsection-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 1.2rem 0 0.5rem;
}

/* 解散した組織の詳細ページ上部に出す告知（7-20） */
.dissolved-notice {
  border: 1px solid #d8c48a;
  background: var(--tag-amber-bg);
  color: #6b5a2a;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

/*
  これから閉まる施設の告知。**済んだものより強く出す。**
  「もう使えない」は諦めがつくが、「あと1年で使えなくなる」は
  これから予定を組む人が動くための情報なので、目に留まる必要がある。
*/
.dissolved-notice--planned {
  border-left: 4px solid #e0a800;
  background: var(--tag-amber-bg);
  color: #7a5600;
  font-weight: 600;
}

/* ---------- Home ---------- */
.hero {
  background: linear-gradient(180deg, var(--color-primary-tint), var(--color-bg) 80%);
  padding: 2.5rem 0 3rem;
  border-bottom: 1px solid var(--color-border);
}

/*
  ⚠️ **ヒーローは2段組**（モックの配置。2026-09-17）。
  左に見出し・説明・検索窓、右に画像。

  ⚠️ **色は今のまま**（運営の指示）。モックの灰色は仮のもので、
  「今のちょっと緑っぽい色合いは好み」とのことなので `--color-primary-tint` を保つ。

  ⚠️ **画像が無ければ1段のまま。** `.hero__figure` が出ないときは
  `.hero__body` が幅いっぱいに広がる（空の段を作らない）。
*/
.hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

.hero__body {
  flex: 1 1 24rem;
  min-width: 0;
}

.hero__figure {
  flex: 1 1 18rem;
  min-width: 0;
}

.hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.hero__title {
  font-size: 1.85rem;
  margin: 0 0 0.6rem;
}

.hero__lead {
  color: var(--color-text-muted);
  max-width: 42rem;
  margin: 0 0 1.75rem;
}

/*
  **日本語を、意味の切れ目で折り返す。**
  既定では文字単位で折り返すので「…できるポータルサ／イトです。」のように
  語の途中で切れる。`auto-phrase` は文節で折る（対応していないブラウザは今までどおり）。
*/
.hero__lead,
.page-lead,
.section-lead {
  word-break: auto-phrase;
}

.home-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 900px) {
  .home-layout {
    grid-template-columns: 1fr;
  }
}

.area-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.area-list__pref {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  background: var(--color-bg);
}

.area-list__pref-name {
  font-weight: 700;
  display: block;
  margin-bottom: 0.4rem;
}

.area-list__muni {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}

.instrument-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.instrument-list a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.85rem;
}

.instrument-list a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* ---------- Search filter panel ---------- */
/* オプション的な検索条件のアコーディオン（7-20） */
.search-advanced {
  margin: 1rem 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.search-advanced__summary {
  cursor: pointer;
  padding: 0.65rem 0.8rem;
  font-weight: 700;
  font-size: 0.9rem;
  list-style: none;
}

.search-advanced__summary::-webkit-details-marker {
  display: none;
}

.search-advanced__summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.4em;
  font-size: 0.7em;
  transition: transform 0.15s ease;
}

.search-advanced[open] > .search-advanced__summary::before {
  transform: rotate(90deg);
}

.search-advanced__body {
  padding: 0 0.8rem 0.6rem;
  border-top: 1px solid var(--color-border);
}

.search-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  background: var(--color-bg);
}

.search-panel h2 {
  font-size: 1rem;
  margin-top: 0;
}

/* ---------- Listing layout (PC: 左カラム条件 / SP: 上部サマリ) ---------- */
.listing-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}

/*
  **グリッドの列は、既定では中身より狭くできない**（`min-width: auto`）。
  そのため中に横長のものが1つあると、列ごと画面より広がる。
  狭い画面で一覧のページが29px横にはみ出していた（運営の指摘。2026-08-29）。
  同じ対処が表の側にも書いてある（`.repertoire__table` のあたり）。
*/
.listing-layout__results,
.listing-layout__filter {
  min-width: 0;
}

@media (max-width: 900px) {
  .listing-layout {
    grid-template-columns: 1fr;
  }

  .listing-layout__filter {
    order: 2;
  }

  .listing-layout__results {
    order: 1;
  }
}

/*
  絞り込み条件の表示。以前はPCで非表示にしていたが、
  条件を1つずつ外す導線をここに置いたため、常に表示する。
  0件になったときに条件を戻せないと行き止まりになる。
*/
.filter-summary {
  display: block;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
}

.filter-summary__title {
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.filter-summary .tag {
  margin-bottom: 0;
}

/* クリックで外せることが分かるようにする */
.tag--removable {
  text-decoration: none;
  cursor: pointer;
}

.tag--removable:hover,
.tag--removable:focus-visible {
  background: var(--color-bg);
  border-color: var(--color-text-muted);
}

.filter-summary__clear {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.85rem;
}

/*
 * **もっと広く見る**（2026-09-06）。
 * 「条件をすべて外す」の下に置く。**条件の札とは意味が違う**ので、
 * 札のように囲まず、文として出す。
 */
.filter-summary__wider {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.filter-summary__wider a {
  white-space: nowrap;
}

.result-count {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.listing-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

/* これからの公演（ホールの詳細ページ）。日付を目立たせて、次にいつ何があるか分かるようにする */
.event-news__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.event-news__item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}

.event-news__date {
  flex: 0 0 4.5rem;
  text-align: center;
  padding: 0.3rem 0;
  background: var(--color-primary-tint);
  border-radius: var(--radius-sm);
}

.event-news__day {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.2;
}

.event-news__year {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.event-news__title {
  font-size: 1.02rem;
  font-weight: 600;
}

.event-news__meta {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
}

/* 件数が多いときに畳んでおく「もっと見る」 */
.more-events__summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/*
  絞り込みのツリー（編成・楽器）。
  200件近い選択肢を平らに並べると目的のものに辿り着けないので、親で畳む。
*/
.checkbox-group--tree {
  max-height: 26rem;
  overflow-y: auto;
}

.filter-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-tree[data-depth] {
  /* 階層が分かる程度の字下げ。深くしすぎると幅が足りなくなる */
  margin-left: 0.9rem;
  border-left: 1px solid var(--color-border);
  padding-left: 0.4rem;
}

.filter-tree__summary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  padding: 0.1rem 0;
  list-style: none;
}

/* 開閉の三角。文字に頼らず線で描く（環境による字形の差を避ける） */
.filter-tree__summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4em;
  height: 0.4em;
  border-top: 1.5px solid var(--color-text-muted);
  border-right: 1.5px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.filter-tree__node[open] > .filter-tree__summary::before {
  transform: rotate(135deg);
}

.filter-tree__summary::-webkit-details-marker {
  display: none;
}

.filter-tree__label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 400;
  font-size: 0.88rem;
  cursor: pointer;
}

.filter-tree__label--leaf {
  padding-left: 0.7em;
}

/* 閉じている親の脇に、選ばれている子の名前を出す。長ければ「…」で切る */
.filter-tree__chosen {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--color-primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-tree__node[open] > .filter-tree__summary .filter-tree__chosen {
  display: none;
}

/* 絞り込みのチェックボックスを1行ずつ並べる */
.checkbox-line {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  margin-bottom: 0.15rem;
}

/* 一覧カードの紹介文。1〜2行で「どんなものか」が分かるようにする */

.listing-card__contact {
  margin-right: 0.6rem;
}

/* イベントのカードの1行（出演・曲目・チケット） */
.listing-card__line {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
}

.listing-card__label {
  display: inline-block;
  min-width: 3.6em;
  margin-right: 0.4rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.listing-card__ticket {
  margin-left: 0.4rem;
  font-weight: 600;
}

/* 終わった・中止になったイベント。まだやるものと見分けが付くよう色を落とす。
   薄くしすぎると読めなくなるので、背景を灰色にして文字だけ少し落とす */
.listing-card--over {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

.listing-card--over .listing-card__title a,
.listing-card--over .listing-card__meta {
  color: var(--color-text-muted);
}

/*
   解散した組織の一覧カード。

   **一目で「もう無い」と分かるようにする。**
   背景を少し変えるだけだと、並んでいる中で見分けが付かず、
   閉店した店に問い合わせてしまう。斜めの縞と左の帯を入れる。
   （並び順でも後ろへ回している。Organization::scopeDissolvedLast）

   **`.listing-card` より後ろに置く。** 同じ強さの指定なので、
   前に置くと `.listing-card` の背景に上書きされて何も変わらない
   （実際、最初はそうなっていて見分けが付かなかった）。
*/
.listing-card--dissolved {
  background-color: var(--color-bg-alt2);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    rgb(0 0 0 / 6%) 7px,
    rgb(0 0 0 / 6%) 14px
  );
  border-color: var(--color-border);
  border-left: 5px solid var(--color-text-muted);
  box-shadow: none;
}

.listing-card--dissolved .listing-card__title a,
.listing-card--dissolved .listing-card__meta {
  color: var(--color-text-muted);
}

/* 暗い配色では、黒を重ねても縞にならない */
:root[data-theme="dark"] .listing-card--dissolved {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    rgb(255 255 255 / 6%) 7px,
    rgb(255 255 255 / 6%) 14px
  );
}


/*
  一覧カードの見出し。

  ⚠️ **お気に入りの星は右端で固定**（運営の要望。2026-09-03）。

  > 一覧ページにお気に入りのボタンを配置してほしいです。
  > 右側に固定にしたほうがいいです。ボタンだけでいいです。

  名前のすぐ後ろに置いていたので、**名前の長さで星の位置が毎行ずれて**いた
  （「船橋市民文化ホール」と「船橋市民文化創造館（きららホール）」で30px以上違う）。
  並んだ星を目で追えないと、押したい行を探すことになる。

  横並びにして、名前は伸び縮みし、星は縮まない。
  `align-items: flex-start` で、名前が2行になっても星は1行目の高さに残る。
*/
.listing-card__title {
  margin: 0 0 0.4rem;
  font-size: 1.08rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

/* 長い名前で星を枠の外へ押し出さない（flexの既定は「中身より縮まない」） */
.listing-card__title > a {
  min-width: 0;
}

.listing-card__favorite {
  flex: 0 0 auto;
}

/*
  一覧カードの情報。

  **共通の情報は、どの種類でも同じ位置に置く**（運営の指示。2026-08-31）。

  これまでは全部を1つの折り返す行に流していたので、
  **文字数によって最寄り駅が1行目に来たり2行目に来たり**していた。
  カードを見比べるときに目が上下に泳ぐ。

  行を縦に積み、中身のある行だけを出す。

    1行目  種別と状態（何なのか・いま使えるのか）
    2行目  場所（エリア・最寄り駅・駐車場）
    3行目  その種類だけの情報
*/
.listing-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

/*
  1行の中は、これまでどおり横に並べて折り返す。

  **行ごとの名前（`--kind` など）は付けていない。**
  見た目が同じなら分ける理由が無く、名前だけあって中身の無いクラスは
  「何か効いている」と読ませてしまう。
*/
.listing-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.9rem;
  /* 長い名前が並んでも、カードの外へはみ出させない */
  min-width: 0;
  max-width: 100%;
}

.listing-card__price {
  color: var(--color-accent);
  font-weight: 700;
}

.listing-card__tags {
  margin: 0.3rem 0 0;
}

/*
  人数で絞ったときにカードへ添える編成。**畳んでおく。**
  「8人で演奏できる」と分かっても中身が分からないと組めるか判断できないが、
  常に開いていると1件あたりが長くなり、一覧としては読みにくい
*/
.work-card__instrumentation {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}

.work-card__instrumentation > summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

.work-card__parts {
  margin: 0.3rem 0 0;
  line-height: 1.6;
}

/* いま何で絞り込んでいるかと、その外し方 */
.player-filter-notice {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.empty-state {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--color-text-muted);
}

.empty-state h2 {
  font-size: 1.05rem;
  color: var(--color-text);
}

/*
  0件のときの「条件を広げる」。

  ⚠️ 運営の相談（2026-09-02）:
  > あとは、調べ直す場合のいい導線の案はないですか？

  **件数を右端に揃える。** 数を見比べるためのものなので、
  左右に散らばっていると比べられない（`tabular-nums` で桁も揃える）。

  **0件は押せないことが、色と形で分かるようにする。**
  薄いだけだと「読み込み中」に見えるので、下線も枠も持たせない。
*/
.widen {
  margin: 0 auto 1.5rem;
  max-width: 34rem;
  text-align: left;
}

.widen__title {
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.widen__none {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.widen__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.widen__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-primary);
  text-decoration: none;
}

a.widen__link:hover,
a.widen__link:focus-visible {
  background: var(--color-primary-tint);
}

/* 条件の名前。長い条件名でも件数を押し出さないよう、ここだけ縮む */
.widen__label {
  min-width: 0;
}

.widen__count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* 押せないもの。枠を点線にして、押せる行と形で見分ける */
.widen__item--empty .widen__link {
  border-style: dashed;
  color: var(--color-text-muted);
  cursor: default;
}

.pagination {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pagination a,
.pagination span {
  display: inline-flex;
  min-width: 2.1rem;
  height: 2.1rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  padding: 0 0.5rem;
}

.pagination .active span {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ---------- Detail page ---------- */
.detail-header {
  margin-bottom: 1.75rem;
}

.detail-header__badges {
  margin-bottom: 0.6rem;
}

.detail-section {
  margin-bottom: 1.75rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
}

/*
  **横に長い表があっても、列を押し広げさせない。**

  グリッドの列は既定で「中身より狭くできない」（min-width: auto）ため、
  編成の詳細のように**曲の数だけ列が増える表**があると、本文の列が広がりきって
  右側の「掲載情報の修正・削除について」が潰れる。
  バレエ音楽「くるみ割り人形」（楽章が多い）で実際にそうなっていた。

  表を包む側は overflow-x: auto にしてあるので、
  ここで min-width: 0 にすれば、**表だけが横に流れて**版面は崩れない。
*/
.detail-grid > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.info-table th,
.info-table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.info-table th {
  width: 9.5rem;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.hours-table th,
.hours-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.side-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--color-bg-alt);
}

.side-card h3 {
  font-size: 0.95rem;
  margin-top: 0;
}

.teacher-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.teacher-mini-list li {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  padding: 2rem 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
}

.site-footer__links a {
  color: var(--color-text-muted);
}

.site-footer__copy {
  margin: 0;
}

/* ---------- Accessibility: skip link / focus ---------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--color-primary);
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0.5rem;
  text-decoration: none;
}

/* キーボード操作時のフォーカスを明確に可視化（要件: アクセシビリティ） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.hamburger:focus-visible,
.japan-map__tile--active:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

#main-content:focus {
  outline: none;
}

.section-lead {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 0.9rem;
}

/* ---------- 日本地図（タイルグリッド・模式図） ---------- */
.japan-map {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
  margin: 0 0 1.5rem;
  padding: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  overflow-x: auto;
}

.japan-map__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 2.1rem;
  font-size: 0.62rem;
  line-height: 1.15;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 0.1rem;
  word-break: break-all;
}

.japan-map__tile--active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.japan-map__tile--active:hover {
  background: var(--color-primary-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.japan-map__tile--inactive {
  background: var(--color-bg-alt2);
  color: var(--color-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

/* 要件3章: 該当0件の導線（リンク/選択肢）はグレーアウトしてクリック・選択不可にする。 */
.is-disabled {
  color: var(--color-text-muted);
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}

/*
  **狭い画面では、13列がそのまま画面に収まるようにする。**

  タイルに最小幅を持たせていたため、13列で約400px必要になり、
  スマートフォンでは中で横に流れていた（運営の指摘。2026-08-30）。
  地図として形が意味を持つので、横に流すと本州と九州が同時に見えない。

  最小幅を外して 1fr に任せる。文字は画面幅に合わせて縮める
  （375pxで1文字6px。「鹿児島」でも1行に収まる）。
*/
@media (max-width: 620px) {
  .japan-map {
    gap: 2px;
    padding: 0.6rem;
  }

  .japan-map__tile {
    min-width: 0;
    font-size: clamp(0.4rem, 1.6vw, 0.5rem);
    padding: 0;
    overflow-wrap: anywhere;
  }
}

/* ---------- コラム一覧 / 記事 ---------- */
.column-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.column-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.column-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.column-card__link {
  display: block;
  color: inherit;
}

.column-card__link:hover {
  text-decoration: none;
}

.column-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-alt2);
}

.column-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-primary);
  opacity: 0.4;
}

.column-card__body {
  padding: 0.9rem 1.05rem 1.1rem;
}

.column-card__title {
  font-size: 1.02rem;
  margin: 0 0 0.4rem;
}

.column-card__excerpt {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.column-card__date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}

.column-article {
  max-width: 760px;
  margin: 0 auto;
}

.column-article__title {
  font-size: 1.7rem;
  margin: 0 0 0.5rem;
}

.column-article__date {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.column-article__thumb {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.column-article__back {
  margin-top: 2.5rem;
}

/* コラム本文（サニタイズ済みHTML）の体裁 */
.rich-content {
  font-size: 1rem;
}

.rich-content h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-border);
}

.rich-content h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.6rem;
}

.rich-content p {
  margin: 0 0 1.1rem;
}

.rich-content ul,
.rich-content ol {
  margin: 0 0 1.1rem;
  padding-left: 1.5rem;
}

.rich-content li {
  margin-bottom: 0.4rem;
}

.rich-content img {
  border-radius: var(--radius-md);
  margin: 1rem 0;
}

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.text-muted { color: var(--color-text-muted); }

/*
  **書いてあるのに効いていなかったもの。**（2026-08-30の点検で判明）

  ビューで使っているのにCSSに1行も無いクラスがいくつもあった。
  `.text-small` は66か所で使われていたのに、ふつうの大きさのまま出ていた。
  `.table-scroll` は表を包む箱として3つの部品で使われていたが、
  横に流れず**ページごと横スクロール**していた。
*/
.text-small { font-size: 0.85rem; }

/*
  メンバー募集中の印。**探している人にとって一番の情報**なので、
  他の印より目に入る色にする（種別や編成の印とは別系統）。
*/
.tag--recruiting {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  font-weight: 700;
}

/* 募集しているパートの並び */
.recruitment__parts {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.recruitment__summary {
  margin: 0 0 0.75rem;
}

/* 楽器ごとの人数。数字は右に揃えて比べやすくする */
.member-range__count-head,
.member-range__count {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 結んだ掲載ページへの行き来 */
.linked-organization {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

/* 自分の団体で絞り込む入口（作品一覧）。主役ではないので小さく置く */
.my-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.my-groups__label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* 節の中の小見出し（「指揮者として関わっている団体」など） */
.section-subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}


/* 表が画面より広いときは、ページではなく表の中で流す */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

/* 入力の誤りを伝える一行。**色だけに頼らない**よう、記号を先頭に置く */
.form-error {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-danger, #b3261e);
}

.form-error::before {
  content: '⚠ ';
}

/* 上から下へ積む素朴なフォーム（会員の作成・編集など） */
.stacked-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

/* チェックの並び。狭い画面では1列に落ちる */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 1rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.75rem;
}

/* 本文の塊（楽器の説明など）。行間だけ広げる */
.prose {
  line-height: 1.9;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 会員機能（第X3段階）: お気に入り・コメント ---------- */
.btn--favorite {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--favorite:hover {
  background: var(--color-primary-tint);
}

.btn--favorite.is-favorited {
  background: var(--color-primary);
  color: #fff;
}

.btn--small {
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
}

.favorite-button {
  margin: 0.5rem 0 1rem;
}

/* ログイン中であることを示すユーザー名表示（7-20） */
.site-nav__user {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted, #666);
}

.site-nav__user-name {
  font-weight: 700;
  color: inherit;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav__user-note {
  font-size: 0.75rem;
}

.site-nav__logout {
  display: inline;
  margin: 0;
}

.site-nav__logout-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.column-comments {
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

.column-comments__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.column-comments__item {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-border);
}

.column-comments__meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 0.35rem;
}

.column-comments__body {
  margin: 0 0 0.5rem;
  white-space: pre-wrap;
}

.column-comments__report {
  margin: 0;
}


/* ---------- エリアのアコーディオン（都道府県→市区町村） ---------- */
/* 全国展開で市区町村が1,900件規模になり、全部並べると読めないため折りたたむ。
   JavaScript不要の <details> を使う（JS無効でも開閉でき、検索エンジンにも中身が見える）。 */
.area-accordion {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.4rem;
}

.area-accordion__details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.area-accordion__details[open] {
  /* 開いているものは目立たせ、複数開いても迷子にならないようにする */
  border-color: var(--color-primary);
  grid-column: 1 / -1;
}

.area-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  font-size: 0.92rem;
  list-style: none;
}

.area-accordion__summary::-webkit-details-marker {
  display: none;
}

/* パンくずの区切りと同じ理由で、文字ではなく線で三角を描く（iOSで字形が変わるため） */
.area-accordion__summary::before {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  border-top: 1.5px solid var(--color-text-muted);
  border-right: 1.5px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.area-accordion__details[open] > .area-accordion__summary::before {
  transform: rotate(135deg);
}

.area-accordion__summary:hover {
  background: var(--color-bg-alt);
}

.area-accordion__pref {
  flex: 1;
  font-weight: 600;
}

.area-accordion__count {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.area-accordion__body {
  padding: 0.2rem 0.8rem 0.8rem;
  border-top: 1px solid var(--color-border);
}

.area-accordion__all {
  margin: 0.6rem 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.area-accordion__muni {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: 0.86rem;
}

/* 該当0件の都道府県は開けないので、カーソルと配色で区別する */
.area-accordion__details--empty {
  background: var(--color-bg-alt);
  opacity: 0.7;
}

.area-accordion__summary--empty {
  cursor: default;
}

.area-accordion__summary--empty::before {
  content: "";
}

@media (max-width: 560px) {
  .area-accordion {
    grid-template-columns: 1fr;
  }
}

/* ---------- 予約できる枠（第X2段階） ---------- */
.slot-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  border-top: 1px solid var(--border, #e2e5ea);
}

.slot-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--border, #e2e5ea);
}

.slot-list__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  min-width: 0;
}

.slot-list__time {
  font-weight: 700;
  white-space: nowrap;
}

.slot-list__owner {
  font-weight: 600;
}

.slot-list__title,
.slot-list__place {
  font-size: 0.9rem;
  color: var(--text-muted, #6b7280);
}

.slot-list__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* 申込フォーム・完了画面で枠の内容を並べる定義リスト */
.detail-list {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.4rem 1rem;
  margin: 0.75rem 0 0;
}

.detail-list dt {
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}

.detail-list dd {
  margin: 0;
}

@media (max-width: 560px) {
  .detail-list {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .detail-list dd {
    margin-bottom: 0.5rem;
  }
}

/* ---------- イベントの問い合わせ先・開催終了の案内 ---------- */
.alert--info {
  background: var(--tag-blue-bg);
  border: 1px solid #c7d7f5;
  color: #1f3a68;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
}

.event-contact__name {
  font-weight: 600;
  margin-right: 0.5rem;
}

.event-contact__item {
  margin-right: 0.75rem;
  white-space: nowrap;
}

/* ---------- ログイン中のアカウント（ヘッダー右上） ---------- */
/* 画面には出さないが読み上げには残す文言用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* メニューはヘッダー右側に寄せ、その右端にアカウントを置く */
.site-nav {
  margin-left: auto;
}

.account-badge {
  position: relative;
  margin-left: 0.75rem;
  flex-shrink: 0;
}

/* 運営アカウントは会員と見分けがつかないと、
   運営のつもりで会員として操作する事故につながるため、枠線でも区別する */
.account-badge--admin .account-badge__button {
  border-color: #b03a3a;
}

.account-badge--admin .account-badge__role {
  color: #b03a3a;
  font-weight: 700;
}

.account-badge__button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}

.account-badge__button:hover,
.account-badge__button:focus-visible {
  background: rgba(128, 128, 128, 0.12);
  border-color: var(--color-border, #e2e5ea);
}

.account-badge__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.account-badge__labels {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.account-badge__name {
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-badge__role {
  font-size: 0.72rem;
  color: var(--text-muted, #6b7280);
}

/* カーソルを合わせる（キーボードならフォーカスする）と権限が開く。JavaScriptは使わない */
.account-badge__detail {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 60;
  width: 17rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e5ea);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0, 0, 0, 0.12));
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.account-badge:hover .account-badge__detail,
.account-badge:focus-within .account-badge__detail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.account-badge__detail-head { margin: 0 0 0.15rem; }

.account-badge__detail-mail {
  margin: 0 0 0.6rem;
  color: var(--text-muted, #6b7280);
  word-break: break-all;
}

.account-badge__detail-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: 0.78rem;
  border-top: 1px solid var(--color-border, #e2e5ea);
  padding-top: 0.5rem;
}

.account-badge__detail-list {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.account-badge__detail-note {
  margin: 0 0 0.5rem;
  color: var(--text-muted, #6b7280);
}

.account-badge__tag {
  display: inline-block;
  padding: 0 0.35rem;
  margin-right: 0.25rem;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.18);
  font-size: 0.72rem;
  font-weight: 600;
}

.account-badge__detail-links {
  margin: 0;
  display: flex;
  gap: 0.75rem;
  border-top: 1px solid var(--color-border, #e2e5ea);
  padding-top: 0.5rem;
}

@media (max-width: 840px) {
  /* 幅が狭いときはアイコンだけにする（ハンバーガーと並べても崩れないように） */
  .account-badge__labels { display: none; }

  /* メニューは画面幅いっぱいのドロップダウンになるので、
     行の並びは「ブランド → アカウント → ハンバーガー」にする */
  .hamburger { order: 1; }

  .account-badge {
    margin-left: auto;
    margin-right: 0.25rem;
  }

  .account-badge__detail {
    width: min(17rem, calc(100vw - 2rem));
    right: -0.5rem;
  }
}

/* ログイン中はアカウント表示のぶんだけ横幅が要る。
   1040px を下回ったら名前と権限は畳み、アイコンだけ残す（誰かはカーソルを合わせれば分かる）。
   ここを畳まないと、ログイン中のときだけナビが画面の外へはみ出す */
@media (max-width: 1040px) {
  .account-badge__labels {
    display: none;
  }
}

/* ---------- イベントの「行きたい／行った」 ---------- */
.event-attendance {
  margin: 0.5rem 0 0;
}

.event-attendance__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* 登録済みのボタンは押した状態が分かるようにする */
.event-attendance .btn.is-active {
  background: var(--color-primary, #3b6ea5);
  border-color: var(--color-primary, #3b6ea5);
  color: #fff;
}

/* ---------- 会場の演奏会記録 ---------- */
.concert-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  border-top: 1px solid var(--color-border, #e2e5ea);
}

.concert-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid var(--color-border, #e2e5ea);
}

.concert-list__date {
  font-weight: 600;
  white-space: nowrap;
}

.concert-list__room {
  font-size: 0.85rem;
  color: var(--color-text-muted, #6b7280);
}

/* ---------- エンティティのサムネイル（7-20） ---------- */
.entity-thumbnail img {
  display: block;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #e2e5ea);
  background: var(--color-bg-alt, #f6f7f9);
  object-fit: cover;
}

/* 一覧カード用。小さめに固定して行の高さが揃うようにする */
.entity-thumbnail--listing img {
  width: 96px;
  height: 96px;
}

/* 詳細ページ用。ルールで指定されたサイズを上限に、幅に合わせて縮む */
.entity-thumbnail--detail img {
  max-width: min(100%, 300px);
  height: auto;
}

/*
   一覧カードの中身。
   PCは「左に画像・右に文章とバッジ」、幅が狭いときは
   「名称 → 画像 → 文章」の順で縦に積む（名称が最初に目に入るように）。
*/
.listing-card__body {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.listing-card__thumb {
  flex-shrink: 0;
  line-height: 0;
}

.listing-card__text {
  min-width: 0;
  flex: 1;
}

@media (max-width: 560px) {
  .listing-card__body {
    flex-direction: column;
    gap: 0.6rem;
  }

  .entity-thumbnail--listing img {
    width: 120px;
    height: 120px;
  }
}

/* 詳細ページのサムネイル。見出しのすぐ下、本文の左に置く */
.detail-header__thumb {
  margin: 0.75rem 0 0;
}

@media (min-width: 761px) {
  .detail-header--with-thumbnail {
    display: grid;
    grid-template-columns: auto 1fr;
    /* バッジ・見出し・画像＋本文の3段。
       以前はバッジと見出しを同じ領域に置いていたため、重なって読めなくなっていた。 */
    /* ⚠️ バッジの段は無くした（2026-09-16、タグをページの下へ移したため） */
    /* ⚠️ **別名の段を持たせる**（運営の報告。2026-10-16「別名が多いからなのか、レイアウトが崩れています」）。

       `grid-area` を当てていない子は**自動で空いている場所に置かれる**ので、
       別名のあるページだけ余分な段ができて枠が崩れていた。
       ⚠️ **崩れたのは「別名が多いから」ではなく「別名があるから」。**
       実体765件（楽曲285・人物419・団体61）・11ページ種別に出ていた。 */
    grid-template-areas:
      "title  title"
      "kana   kana"
      "names  names"
      "thumb  body";
    gap: 0.5rem 1.25rem;
    align-items: start;
  }

  /* ⚠️ **この枠の直下に置く子は、全部ここで場所を決める。**
     1つでも決め忘れると、その子を出すページだけ崩れる
     （`DetailHeaderPlacesEveryChildTest` が見張る）。 */
  .detail-header--with-thumbnail > .other-names { grid-area: names; margin: 0; }
  .detail-header--with-thumbnail > .work-kana { grid-area: kana; margin: 0; }

  .detail-header--with-thumbnail .detail-header__badges { grid-area: badges; }
  .detail-header--with-thumbnail .page-title { grid-area: title; margin: 0; }
  .detail-header--with-thumbnail .detail-header__thumb {
    grid-area: thumb;
    margin: 0;
    line-height: 0;
  }
  .detail-header--with-thumbnail .detail-header__body { grid-area: body; }
}

/* ---------- 上階層トップ（都道府県・地方） ---------- */
.region-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.region-list a {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-border, #e2e5ea);
  border-radius: 999px;
  background: var(--color-bg, #fff);
  font-size: 0.9rem;
}

.area-top__categories,
.area-top__municipalities {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.75rem;
  display: grid;
  gap: 0.35rem 1rem;
  /* 市区町村名は短いので細い列で詰める（以前は14remと9remを二重に書いていた） */
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  font-size: 0.9rem;
}

.area-top__back {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, #e2e5ea);
}

/* ---------- コレクション（非公開の経験記録） ---------- */
.collection-button {
  margin: 0.5rem 0 0;
}

.collection-button__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.collection-button .btn.is-active {
  background: var(--color-primary, #3b6ea5);
  border-color: var(--color-primary, #3b6ea5);
  color: #fff;
}

.collection-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.75rem;
  border-top: 1px solid var(--color-border, #e2e5ea);
}

.collection-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid var(--color-border, #e2e5ea);
}

.collection-list__name {
  font-weight: 600;
}

.collection-list__remove {
  margin-left: auto;
}

/* ---------- 出典・未確認の断り ---------- */
.data-provenance {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, #e2e5ea);
  font-size: 0.85rem;
}

.data-provenance__notice {
  margin: 0 0 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--tag-amber-bg);
  border: 1px solid #d8c48a;
  border-radius: 6px;
  color: #6b5a2a;
}

.data-provenance__sources {
  margin: 0;
  color: var(--color-text-muted, #6b7280);
}

/* バッジを押すとその楽器のページへ行けることが分かるようにする */
/*
  押せる印。押せないものと見分けが付くようにする
  （区分ページの「エリアから」「楽器から」、楽譜一覧の買える先など）。

  **同じ内容を2か所に書いていた**（行3318と5321）。後ろが勝つので、
  前を直しても効かない状態だった（2026-08-31に1つにまとめた）。
*/
.tag--link {
  text-decoration: none;
}

.tag--link:hover,
.tag--link:focus-visible {
  background: var(--color-primary-tint);
  border-color: var(--color-text-muted);
  text-decoration: none;
}

/*
  買える先（外部の店）。**曲の性質の印とは別系統の色にする。**
  「必須11パート」と「紙の楽譜 5,500円」が同じ色で、
  どちらが何の印なのか見分けられなかった（運営の指摘。2026-08-31）。
*/
.score-catalog__edition .tag--link {
  background: var(--color-bg);
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  font-weight: 700;
}

.score-catalog__edition .tag--link:hover,
.score-catalog__edition .tag--link:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg));
  border-color: var(--color-accent);
}

/* 品番。**押せないので、押せる印と同じ形にしない**（丸い枠を付けない） */
.score-catalog__edition > .text-muted {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/*
  人物のプロフィール写真は3:4（縦長）。正方形だと顔が切れたり余白が目立つ。

  **人物のときだけ**縦長にする。`.entity-thumbnail img` をまとめて書き換えると、
  組織や作品のサムネイルまで巨大化する（実際に作曲家一覧で起きた）。
*/
.entity-thumbnail--portrait.entity-thumbnail--listing img {
  width: 96px;
  height: 128px;
}

/*
  詳細ページの人物写真。
  幅で決めると縦長のぶん背が高くなり、右カラムが下へ押されて不揃いに見える。
  **高さを基準**にして、隣の本文と頭を揃える。
*/
.entity-thumbnail--portrait.entity-thumbnail--detail img {
  height: 200px;
  width: auto;
  max-width: 100%;
  aspect-ratio: 3 / 4;
}

@media (max-width: 560px) {
  .entity-thumbnail--portrait.entity-thumbnail--listing img {
    width: 120px;
    height: 160px;
  }
}

/*
  作品のサムネイルは楽譜の表紙。**A4（210:297）**で出す。
  正方形に収めると、題名（上）か出版社名（下）のどちらかが必ず切れる。
*/
.entity-thumbnail--score.entity-thumbnail--listing img {
  width: 96px;
  height: 136px;
  object-fit: cover;
}

.entity-thumbnail--score.entity-thumbnail--detail img {
  height: 220px;
  width: auto;
  max-width: 100%;
  aspect-ratio: 210 / 297;
  object-fit: cover;
}

@media (max-width: 560px) {
  .entity-thumbnail--score.entity-thumbnail--listing img {
    width: 120px;
    height: 170px;
  }
}

/* 本人の写真ではないことが分かるよう、少し控えめに見せる */
.entity-thumbnail--default img {
  background: var(--color-bg-alt);
  object-fit: contain;
}

/* ---------- 楽曲の構成（幕・場・曲・小曲） ---------- */
/*
  段の深さが揃わない曲（くるみ割り人形は 幕→場→曲 と 幕→曲→小曲 が混在）でも
  どこに属するかが読み取れるよう、左の線と字下げで階層を示す。
*/
.movement-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.movement-tree--root {
  margin-bottom: 1.5rem;
}

.movement-tree .movement-tree {
  margin-left: 0.85rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--color-border);
}

.movement-tree__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.28rem 0;
}

/* 曲番号は幅を揃えて、曲名の頭が縦に並ぶようにする */
/*
  ⚠️ **番号の見た目を、題名のある曲と無い曲で揃える**（運営の指摘。2026-10-04）。

  > I, II, IVとIIIでフォントが違うのが嫌です。統一してください。
  > **I, II, IVに合わせて**問題ないと思いますが

  原因は**どの要素に番号が入るか**が分かれていたこと。
  ・題名が無い曲 … 番号が `__title`（リンク）に入る → 第1階層は **太字700・地の色**
  ・題名がある曲 … 番号は別の `__number` に出る → **薄い色・太さ標準**
  同じ「I.」「III.」なのに、片方だけ薄く細く見えていた。

  ⚠️ **運営の指示どおり `__title` 側（I・II・IV）に合わせる。**
  薄いほうに寄せると、番号だけの曲まで薄くなって読みにくくなる。
*/
.movement-tree__number {
  min-width: 3.2em;
  font-variant-numeric: tabular-nums;
}

/* 第1階層は題名と同じ太さにする（`__title` の 700 に合わせる） */
.movement-tree__item--depth-0 > .movement-tree__row > .movement-tree__number {
  font-weight: 700;
}

.movement-tree__title {
  font-weight: 500;
}

/* 幕・場は曲そのものではないので、少し強めに見せて区切りだと分かるようにする */
.movement-tree__item--depth-0 > .movement-tree__row > .movement-tree__title {
  font-weight: 700;
}

/* 一覧の紹介文。長さはプランで変わるので、行数では抑えず素直に出す */
.listing-card__intro {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text);
  /*
    ⚠️ **行数で止める**（2026-09-09）。文字数だけだと、画面の広さで見え方が変わる——
    200文字はパソコンで約4行だが、**スマホでは約10行**になり、
    カード1枚が概要で埋まって次の項目まで遠くなる。
    下の `listing-card__summary` と同じ手。
  */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* 一覧の小さいお気に入りボタン。星だけにして、名称の右に添える */
.listing-card__title .favorite-button {
  display: inline;
  margin-left: 0.35rem;
}

.btn--favorite-compact {
  padding: 0.05rem 0.4rem;
  font-size: 1rem;
  line-height: 1.2;
  vertical-align: middle;
  border-radius: var(--radius-sm);
}

/* 読み上げにだけ渡す文字 */

/* 楽譜は1件ずつ枠で囲う。表を続けて並べると、どこまでが同じ楽譜の話なのか分からず、
   ある出版社の版に別の出版社の情報が混ざって読めてしまう */
.score-card {
  margin-bottom: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-bg);
}

.score-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.score-card__title {
  margin: 0;
  font-size: 1rem;
}

/* 版・品番は出版社を特定したうえでの補足。同じ大きさだとどちらが主か分からない */
/*
  どの曲集に入っているか（2026-09-08）。出版社名の下に、控えめに置く。
  ⚠️ `.score-card__title` は**見出し（出版社名）が既に使っている**ので、別の名前にする。
*/
.score-card__book {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.score-card__edition {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.score-card .info-table {
  margin: 0;
  border: 0;
}

/* 中身が短い箇条書き（活動日・参加資格）。記号を付けると表の中でうるさい */
.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain-list > li + li {
  margin-top: 0.2rem;
}

/* 「足りないと分かっている情報」。載せるが、決まった情報ではないと分かる見た目にする。
   黙って出すと、読み手はその1つに決まったと受け取ってしまう */
.info-gap {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.info-gap__mark {
  font-weight: 700;
}

.info-gap-list {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.info-gap-list > li {
  padding-left: 0.2rem;
}

/* 絞り込み欄（幅280px）の中のエリア一覧。
   47件を縦に並べると、その大半が「該当なし」の行でページが縦に伸びる。
   該当のあるものだけを出し、残りは下の折りたたみに入れる（x-area-accordion の compact） */
.area-accordion--compact {
  grid-template-columns: 1fr;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}

.area-accordion--compact .area-accordion__summary {
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}

/* 該当が無い都道府県。消さずに畳む。
   存在しないと思われるより、開けば出てくるほうがよい（リンクも残る） */
.area-folded {
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

.area-folded__summary {
  cursor: pointer;
  padding: 0.4rem 0;
  color: var(--color-text-muted);
}

/* 名前だけの短いリンクなので、狭い欄でも2〜3列に収まる */
.area-folded__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.15rem 0.4rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

/* レッスンの雰囲気・目的。コース全体から集めて一覧に出す */
.listing-card__styles {
  margin: 0.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* 入団の条件（団費・年齢・活動日など）。名前より目立たないようにする */
.listing-card__terms {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/*
  バッジは「何を表しているか」で見た目を決める。**ページごとに変えない。**
  同じ楽器のバッジが、講師の一覧と教室の詳細で違って見えると、
  同じ種類の情報だと気づけない。

  塗り／枠線／色相の3つで区別する。色だけで分けると、
  色が見分けづらい人にとって全部同じものになる。
*/

/* 楽器。いちばん多く出るので、塗りつぶしの既定（.tag）をそのまま使う */
.tag--instrument {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

/* 合奏形態。楽器と並ぶことが多いので、塗らずに枠線で分ける */
.tag--ensemble {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* レッスンの雰囲気・楽団の活動スタイル。
   楽器とは性質がまったく違うので、色相から変える（寒色→暖色） */
.tag--style {
  background: var(--tag-amber-bg);
  color: var(--tag-amber-fg);
  border: 1px solid #e6d3b3;
}

/* ジャンル（映画音楽・クラシック・吹奏楽オリジナル など）。
   編成（吹奏楽・木管八重奏）とは観点が違うので、**枠の形から変える**。
   編成が「角の枠線」なのに対し、ジャンルは「角丸の塗り」にして、
   同じ行に並んでも別の種類の情報だと一目で分かるようにする */
.tag--genre {
  background: var(--tag-green-bg);
  color: var(--tag-green-fg);
  border: 1px solid #cfe3d5;
  border-radius: 999px;
}

/* 役職・肩書き（常任指揮者、講師 など）。人に付くものはグレーで控えめに */
.tag--role {
  background: var(--color-bg-alt2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* リンクになっているバッジは、押せることが分かるようにする */
a.tag--instrument:hover,
a.tag--ensemble:hover,
a.tag--genre:hover,
a.tag--style:hover,
a.tag--role:hover {
  text-decoration: underline;
}

/* 講師からのメッセージ。名前より控えめだが、読ませたい文章なので本文の大きさを保つ */
.teacher-message {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text);
  white-space: pre-line;
}

/* 紹介の一言。本文より少し大きく、最初に目に入るようにする */
.lead-text {
  margin: 0 0 0.6rem;
  font-size: 1.02rem;
}

/* レッスン料の他にかかるお金（施設費・入会金・体験レッスン）。
   月謝だけ見て決められないので、同じ欄に小さく続ける */
.course-fees {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* コースの紹介文と開講日。表の中なので本文より小さく */
.course-description {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
}

.course-schedule {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* 「作品名 より 楽章名」。作品名より控えめにして、どちらが主か分かるようにする */
.program__movement {
  margin-left: 0.25rem;
  font-size: 0.9em;
  color: var(--color-text-muted);
}

/* ── 出版社カタログ（発行している楽譜） ─────────────────────────
   件数が多い一覧を編成の木で畳んで見せる。多い枝だけ深くなるので、
   階層の深さは枝によって違う。 */
.score-catalog__group {
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    margin: 0 0 .5rem;
    padding: .5rem .75rem;
}

.score-catalog__group > summary {
    cursor: pointer;
    font-weight: 600;
}

.score-catalog__group > summary .text-muted {
    font-weight: 400;
    margin-left: .5em;
    font-size: .9em;
}

/* 入れ子は左に寄せて、どこまでが子なのかを見せる */
.score-catalog__children {
    margin-top: .5rem;
    padding-left: .75rem;
    border-left: 2px solid var(--border, #ddd);
}

.score-catalog__list {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

.score-catalog__item {
    padding: .4rem 0;
    border-bottom: 1px dashed var(--border, #eee);
}

.score-catalog__item:last-child {
    border-bottom: none;
}

/* 品番と、その品番で買える形態（紙・ダウンロード）をひとかたまりにする */
.score-catalog__edition {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    flex-wrap: wrap;
    margin-left: .5em;
}

/*
  **広い画面では今までどおり1行に流す。**
  題名・作曲者・印を1つの流れに置いたまま、狭い画面でだけ行を分けたいので、
  包みは既定では `inline`（＝無いのと同じ）にしておく。
*/
.score-catalog__head,
.score-catalog__meta {
    display: inline;
}

/*
  **狭い画面では、題名の行と印の行を分ける。**
  1つの流れのままだと、題名の途中で折り返したあとに作曲者・パート数・品番・価格が続き、
  どこまでが1件なのか分からなかった（運営の指摘。2026-08-31）。
*/
@media (max-width: 700px) {
    .score-catalog__item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .3rem;
        padding: .6rem 0;
    }

    .score-catalog__head {
        display: block;
    }

    .score-catalog__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .3rem .5rem;
    }

    .score-catalog__edition {
        margin-left: 0;
    }
}

/* ── 頭出しの索引（作品一覧など） ─────────────────────────────
   ページ送りと組みで使う。同じページ内の見出しはその場へ、
   別ページの見出しはそのページの同じ位置へ飛ぶ。

   **画面の上に貼り付ける。** 見出しへ飛んだ先で索引が視界から消えると、
   隣の見出しへ移るたびに上まで戻ることになる。
   貼り付く位置はヘッダーの下（ヘッダーも貼り付いているため、
   top:0 にするとヘッダーの裏に潜ってしまう）。 */
.title-index {
    position: -webkit-sticky;
    position: sticky;
    /* 変数が効かない環境でも貼り付くよう、素の値を先に置く */
    top: 3.6rem;
    top: var(--header-height);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 1rem;
    padding: .5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.title-index__item {
    display: inline-block;
    min-width: 2.2em;
    padding: .2rem .45rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.4;
}

.title-index__item:hover {
    background: var(--color-bg-alt);
}

/* 今見ているページにある見出しを目立たせる */
.title-index__item--here {
    font-weight: 600;
    border-color: currentColor;
}

/* 見出しの先頭に置く目印。
   飛んだ先が**ヘッダーと索引の両方の下**に隠れないよう、その分の余白を取る。

   カード一覧は縦並びの flex で、要素の間に必ず隙間が入る。
   高さ0の目印もその隙間を1つぶん増やしてしまうので、負の余白で打ち消す。 */
/*
  索引の2階層目。

  **まとめた見出しだけを並べる。** 1文字ずつ並べると索引が50個を超え、
  狭い画面では一覧を押しのけていた（運営の指摘）。
  押した見出しの中身だけが、その場で開く。
*/
.title-index__group {
  display: inline-block;
}

.title-index__group > summary {
  list-style: none;
  cursor: pointer;
}

/* Safari の三角印を消す（見出しそのものを押させたい） */
.title-index__group > summary::-webkit-details-marker {
  display: none;
}

.title-index__group[open] > summary {
  background: var(--color-bg-subtle, #f4f4f5);
}

.title-index__children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.title-index__anchor {
    display: block;
    height: 0;
    margin-bottom: -1rem;
    scroll-margin-top: calc(var(--header-height) + 4.5rem);
}

/* プログラムの作曲家リンク。1ページに数十個並ぶので、
   曲名より控えめにして「読む列」を邪魔しないようにする */
.composer-link {
    color: inherit;
    text-decoration-color: currentColor;
    text-decoration-style: dotted;
}

.composer-link:hover {
    text-decoration-style: solid;
}

/* 名前の横に添える所在地。主役は名前なので、色と大きさで一段下げる */
.area-summary {
  margin-left: 0.5em;
  font-size: 0.85em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* 住所の中の地名リンク。**見た目は本文のまま。**
   バッジや色付きにすると住所が読めなくなる（「千葉県館山市北条…」の
   途中だけ色が変わると、地名と番地の区切りが分からなくなる）。
   押せることは、細い点線の下線だけで伝える */
.area-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-text-muted);
}

.area-link:hover {
  text-decoration-style: solid;
  text-decoration-color: var(--color-primary);
}

/* 一覧に添える「関連するもの」。**答えそのものではない**ので、
   結果一覧より控えめにして、別のものだと分かるようにする */
.related-listings {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.related-listings__title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.related-listings__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* 楽器ごとの本数指定。1行＝1楽器。狭い画面では縦に積む */
/*
  **1行に4つ並べると、狭い列で潰れる。**
  楽器の欄・切り替え・本数を横一列にしていたため、
  絞り込みの列（280px）で「打って探す」が読めない幅になっていた。
  楽器の欄で1行、本数と切り替えで1行にする。
*/
.part-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.75rem;
}

/* 楽器の欄は行いっぱい */
.part-filter__field {
  flex: 1 1 100%;
}

.part-filter__row select {
  flex: 1 1 auto;
  min-width: 0;
}

.part-filter__row input[type="number"] {
  width: 4.5em;
  flex: 0 0 auto;
}

.part-filter__range,
.part-filter__unit {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.9em;
}

/*
  作曲した作品の一覧。

  **同じ項目が縦にそろっていないと読み比べられない。**
  曲名の長さはまちまちなので、属性を曲名の後ろに続けて書くと、
  編成やパート数の位置が行ごとにずれて、目で追えなくなる。
  曲名は伸び縮みする列、属性は右端の列に置く。

  **横長の表にはしない。** 狭い画面では列を保てないので、縦に積む。
*/
.work-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.work-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.9rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--color-border);
}

.work-list__title {
  min-width: 0;
}

/* 属性は1つのまとまり。**折り返してもばらけない**ように並べる */
.work-list__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.4rem;
}

.work-list__arrangements {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0 0 0 1.2rem;
  font-size: 0.9rem;
}

.work-list__heading {
  font-size: 1rem;
  margin: 1.25rem 0 0.35rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  /* 狭い画面では列を保てない。**属性を下に落として左そろえ**にする */
  .work-list__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-list__meta {
    justify-content: flex-start;
  }
}

/*
  一覧の数字は桁をそろえる。

  **左そろえのままだと、行ごとに位置がずれて読み比べられない。**
  「約8分」と「約10分30秒」が並ぶと、分の位も秒の有無もばらける。
  幅を固定し、秒が無い行にもその場所を空けておく（0埋めはしない。
  書かれていない秒を「00秒」と言い切ることになるため）。
*/
.duration {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.duration__minutes {
  display: inline-block;
  min-width: 1.5em;
  text-align: right;
}

.duration__seconds {
  display: inline-block;
  min-width: 3.1em;
  text-align: left;
}

/* 演奏時間が無い行。**場所だけ空けて、中身は見せない** */
.duration--empty {
  visibility: hidden;
}

.work-list__parts {
  display: inline-block;
  min-width: 4.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.work-list__parts-number {
  display: inline-block;
  min-width: 1.5em;
  text-align: right;
}

@media (max-width: 640px) {
  /* 狭い画面では桁そろえより、詰めて読めることを優先する */
  .work-list__parts,
  .duration__minutes,
  .duration__seconds {
    min-width: 0;
  }
}

/* --------------------------------------------------
   公式動画の埋め込み
   プレーヤーは押されてから読み込む。表紙のサムネイルは
   Cookieを置かない配信元（i.ytimg.com）から取る
   -------------------------------------------------- */
.video-embed {
    max-width: 640px;
}

.video-embed__cover,
.video-embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
}

.video-embed__cover {
    position: relative;
    padding: 0;
    background: #2b3446;
    color: #fff;
    cursor: pointer;
    font: inherit;
    overflow: hidden;
}

/* YouTubeのサムネイルは4:3で配信され、上下に帯が入っている。
   16:9に切り出して帯を隠す */
.video-embed__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-embed__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    transition: background 0.15s;
}

.video-embed__cover:hover::after,
.video-embed__cover:focus-visible::after {
    background: rgba(0, 0, 0, 0.12);
}

.video-embed__play {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.video-embed__label {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/*
    セクションの末尾に置く、控えめな断り書き（2026-09-14）。

    運営の指示:
    > これらは、免責に近く、読みてからしたら最初に知りたい情報ではない。
    > 少なくともそのセクションの下部に控えめに出すのがいいのではないでしょうか？

    ⚠️ **「どの楽曲でも同じこと」だけをここに入れる。**
    その作品について分かったこと（「編成は確かめられていません」など）は
    **読む前に要る**ので、上の `.hint` のまま。ここに混ぜない。

    ⚠️ **消したのではなく、順番を変えただけ。** 薄くするが、読めなくはしない。
*/
/*
    エリアを複数選ぶ欄（2026-09-14）。編成と同じ畳めるアコーディオンの中に入る。

    ⚠️ **モーダルにしない**（運営の判断）。閉じると選択が見えない／読み上げと
    相性が悪い／戻るボタンで消える、の3つが最初から無い。
*/
/*
    reCAPTCHA v2 の枠（2026-09-15）。**鍵が無い間は出ない。**

    ⚠️ **中身はGoogleが描く**ので、こちらから形は変えられない。
    ここでやるのは**まわりの余白だけ**——
    ほかの入力欄と間隔が揃っていないと、フォームの中で浮いて見える。
*/
.g-recaptcha {
    margin: 0.4rem 0 0.2rem;
}

.area-picker {
    max-height: 22rem;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.area-picker__pref {
    margin-top: 0.4rem;
}

/* 市区町村は県の下にぶら下げる。170件あるので畳んでおく */
.area-picker__munis {
    margin: 0.2rem 0 0.6rem 1.2rem;
    font-size: 0.86rem;
}

.area-picker__munis > summary {
    cursor: pointer;
    color: var(--color-text-muted, #666);
}

.section-footnote {
    margin: 1rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--color-text-muted, #666);
}

.video-embed__note {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted, #666);
}

/* --------------------------------------------------
   団体の条件で絞った作品一覧（会員限定）
   同じURLでも人によって並ぶ曲が変わるので、
   通常の一覧と見た目で区別する
   -------------------------------------------------- */
.group-filter {
    margin: 0 0 1.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border, #ddd);
    border-left: 4px solid var(--color-accent, #4a6fa5);
    border-radius: 6px;
    background: var(--color-surface-muted, #f7f8fa);
}

.group-filter__lead {
    margin: 0 0 0.4rem;
}

.group-filter__note {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #666);
}

.group-filter__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem;
    margin-top: 0.7rem;
    font-size: 0.85rem;
}

.group-filter__form fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 4px;
}

.group-filter__form legend {
    padding: 0 0.3rem;
    font-size: 0.78rem;
    color: var(--color-text-muted, #666);
}

.group-filter__form input[type="number"] {
    width: 4.5rem;
}

.work-card__shortfall {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: #a05a2c;
}

.work-card__shortfall--ok {
    color: #2c7a4b;
}

/*
 * ⚠️ **なぜ上に並んでいるかの理由**（2026-09-10）。
 * 順番だけ変えても伝わらないので、札にして本文の流れから浮かせる。
 * 不足の文（上）とは色で役割を分ける——あちらは「足りない」、こちらは「合っている」。
 */
/*
 * ⚠️ **「演奏できるか分からない」ものの畳み**（2026-09-10）。
 * 本編と見分けが付くように、内側へ下げて色を落とす。
 * 同じ見た目で並べると、判断済みのものと混ざって読める。
 */
.unknown-works {
    margin: 1.5rem 0 0;
    padding: 0.6rem 0.9rem;
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-alt);
}

.unknown-works > summary {
    cursor: pointer;
    font-size: 0.95rem;
}

/*
 * ⚠️ **1行に並べる入力の組**（エキストラの「楽器＋本数」。2026-09-10）。
 * 縦に積むと、どの本数がどの楽器のものか読めなくなる。
 * 狭い画面では折り返す（横スクロールを出さない）。
 */
/*
 * ⚠️ **外へ出ることが、押す前に分かるようにする**（2026-09-10）。
 * サイト内のリンクと同じ見た目だと、押した先が別のサイトだと気づけない。
 * 矢印は控えめに——読む邪魔をせず、あることは分かる大きさ。
 */
.external-link__mark {
    margin-left: 0.15em;
    font-size: 0.85em;
    opacity: 0.7;
}

/*
 * ⚠️ **「未確認を含める」は、他の条件と切り離して見せる**（2026-09-11）。
 * 他の条件と同じ並びに置くと、**もう1つの絞り込み**に見える。
 * これは絞り込みではなく、**絞り込みの効き方を変える**もの。
 */
/*
 * ⚠️ **種別を外すと消える条件を、押す前に伝える**（2026-09-11）。
 * 札に添える短い断りなので、目立たせず、しかし読める大きさで。
 */
.filter-summary__note {
    margin-left: 0.3rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.form-field--unconfirmed {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--color-border);
}

/*
 * 件数のとなりの「未確認を含める」（運営の指摘。2026-09-11）。
 * **件数の一部として読ませる**ので、離さずに直下へ置き、
 * 薄い地色で「結果ではなく、結果の出し方の話」だと分かるようにする。
 */
.result-count__unconfirmed {
    margin: -0.6rem 0 1rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    background: var(--color-surface-muted, #f6f6f4);
    border-left: 3px solid var(--color-border);
    border-radius: 0 4px 4px 0;
}

.result-count__unconfirmed a {
    white-space: nowrap;
}

/*
 * 「おそらくこの版」（運営の指示。2026-09-11）。
 * **警告ではない。** 掲載者が根拠を持って結んだもので、間違いではない。
 * 赤にすると「誤りがある」と読まれるので、控えめな枠線だけで「一段弱い」と示す。
 */
.tag--inferred {
    background: transparent;
    border: 1px dashed var(--color-border-strong, #b9bcc4);
    color: var(--color-text-muted);
    cursor: help;
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
}

.form-inline > select {
    flex: 1 1 12rem;
    min-width: 0;
}

.form-inline > input[type="number"] {
    width: 5.5rem;
}

.work-card__fit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.3rem 0 0;
}

.group-filter__missing {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
}

/* 判定の限界。**見抜けないことは、見抜けると装わない** */
.group-filter__warning {
    margin: 0.5rem 0 0;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    background: var(--tag-amber-bg);
    font-size: 0.85rem;
    color: #7a5320;
}

/* 作品カードの概要（登録内容から組み立てた1行） */
.listing-card__summary {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #666);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --------------------------------------------------
   作曲家一覧
   選ぶときに見るのは住んでいる場所ではなく、
   どこの国の人か・いつの時代の人か・何曲あるか
   -------------------------------------------------- */
.composer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.composer-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0.2rem;
    border-bottom: 1px solid var(--color-border, #eee);
}

.composer-list__name {
    font-weight: 600;
    min-width: 14em;
}

.composer-list__life {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* 件数は行の右端にそろえる（縦に読み比べられるように） */
.composer-list__works {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--color-text-muted, #666);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .composer-list__name {
        min-width: 0;
        flex-basis: 100%;
    }
}

/* 楽譜があることを示すバッジ。演奏する人にとっていちばん大きな分かれ目 */
.tag--score {
    background: var(--tag-green-bg);
    color: var(--tag-green-fg);
    border-color: var(--tag-green-line);
}

/* このサイトについて：点が線になることの図。
   外部の描画ライブラリは使わず、書き出しのSVGを置いている */
.about-network {
  display: block;
  width: 100%;
  height: auto;
  max-width: 760px;
  margin: 1rem auto 1.25rem;
}

.about-network__edges line {
  stroke: var(--color-border, #d7dee8);
  stroke-width: 1.5;
}

.about-network__nodes rect {
  fill: var(--color-bg-alt, #f4f7fb);
  stroke: var(--color-border, #d7dee8);
  stroke-width: 1;
}

.about-network__nodes text {
  /* ⚠️ 箱の幅は文字数から決めてある（`about-network.blade.php`）。ここだけ変えるとはみ出す */
  font-size: 16px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--color-text, #333);
}

/* 中心（曲）。ここから全部が伸びていることが一目で分かるようにする */
.about-network__node--core rect {
  fill: var(--color-primary, #4a6fa5);
  stroke: var(--color-primary, #4a6fa5);
}

.about-network__node--core text {
  fill: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* 中継点（作曲者・演奏会・楽器・楽譜）。ここから先へ枝が伸びる */
.about-network__node--mid rect {
  fill: #fff;
  stroke: var(--color-primary, #4a6fa5);
  stroke-width: 1.5;
}

/*
  ⚠️ **狭い画面でも出す**（運営の指摘。2026-09-17）。

  > これってまだ**領域に余裕がある**ので、文字を大きくできませんか？
  > 多分SPでも全然入ると思いますよ。

  そのとおりだった。隠していたのは**文字が潰れるから**だったが、
  原因は図が広すぎたこと——**節点が占めていたのは11.2%**で、
  残り88.8%は線と余白だった。**線を短くして詰めた**ら 841×525 → 450×304 になり、
  スマホ(360px)でも **11.7px** で読める。節点は15個のまま減らしていない。
*/

/* このサイトについて：辿れる経路の枝分かれ。
   1本の線ではなく「どの点からも別の方向へ抜けられる」ことを見せる */
.about-paths {
  margin: 0.5rem 0 1rem;
  padding-left: 1.25rem;
}

.about-paths > li {
  margin-bottom: 0.5rem;
}

.about-paths ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  list-style: none;
}

.about-paths ul > li::before {
  content: '└ ';
  color: var(--color-text-muted, #666);
}

/* 持ち替えがあることを示すバッジ。
   検索の本数には数えていない情報なので、色は控えめにして「注意書き」として置く */
.tag--doubling {
    background: var(--tag-amber-bg);
    color: var(--tag-amber-fg);
    border-color: var(--tag-amber-line);
}

/* 編成そのものが確かめられていない印。持ち替えより強く見せる（判断に直結するため） */
.tag--doubt {
    background: var(--tag-red-bg);
    color: var(--tag-red-fg);
    border-color: var(--tag-red-line);
}

/* 作品ページの「この編成は確かめられていません」の断り */
.hint--warning {
    border-left: 3px solid #e0a3a3;
    padding-left: 0.6rem;
    color: #9b2c2c;
}

/* --------------------------------------------------
   絞り込みのアコーディオン
   選択肢が200件近くある欄を開いたまま並べると、
   絞り込み欄だけで画面を何度もスクロールすることになる
   -------------------------------------------------- */
.filter-accordion > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.4rem 0;
    list-style-position: inside;
}

.filter-accordion > summary:hover {
    color: var(--color-accent, #4a6fa5);
}

/* 選んだ件数。畳んでいても、何で絞っているかが分かる */
/*
 * ⚠️ **このサイトの肝は、他の畳みより目立たせる**（運営の指摘。2026-09-07）。
 * 「楽器と本数で絞る」は自由文字検索のすぐ下に出す。
 * 畳んであっても、**あることが分かる**強さにする。
 */
/*
 * ⚠️ **左端は他の項目と揃える**（運営の指摘。2026-09-07）。
 * > 楽器と本数で絞るが強調されているのよいのですが、他の項目と左端を揃えてほしいです。
 * > 今、内側に入って見えます。
 *
 * 目立たせるために背景を付けたが、**左に余白も入れてしまった**ので、
 * 上下の「編成で絞る」「ジャンルで絞る」より内側にずれて見えていた。
 * 背景は左右いっぱいに広げ、字の位置は動かさない。
 */
.filter-accordion--headline > summary {
  font-weight: 700;
  background: var(--color-bg-alt);
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  margin-left: -0.6rem;
  margin-right: -0.6rem;
}

.filter-accordion__count {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--color-accent, #4a6fa5);
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
}

.filter-accordion[open] > summary {
    margin-bottom: 0.3rem;
}

/* --------------------------------------------------
   狭い画面の情報テーブル

   **項目名と中身を横に並べない。**
   「管・弦楽器の必須パート数」のような長い項目名が左を占めると、
   肝心の中身が数文字ぶんの幅に押し込まれ、1文字ずつ折り返される。
   縦に積めば中身が画面いっぱいに使える。

   **PCと同じ見た目にしなくてよい。** 表として横に読めるのは
   幅があるからで、狭い画面では「項目名 → 中身」の縦読みのほうが速い。
   -------------------------------------------------- */
/*
    **調性・拍子の表には当てない。**
    ここは「項目名 → 中身」の縦読みにするための指定で、
    あちらは項目名を出さず、区分・小節・値の3つに組み替えている。
    当ててしまうと組み替えが打ち消され、**値が横に並んだまま**になり、
    狭い画面で表が崩れていた（運営の指摘）。
*/
@media (max-width: 640px) {
    .info-table:not(.attribute-table),
    .info-table:not(.attribute-table) tbody,
    .info-table:not(.attribute-table) tr,
    .info-table:not(.attribute-table) th,
    .info-table:not(.attribute-table) td {
        display: block;
        width: auto;
    }

    .info-table:not(.attribute-table) tr {
        padding: 0.55rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .info-table:not(.attribute-table) th,
    .info-table:not(.attribute-table) td {
        padding: 0.1rem 0;
        border-bottom: 0;
    }

    /* 項目名は小さく。長くても折り返して構わない */
    .info-table:not(.attribute-table) th {
        width: auto;
        white-space: normal;
        font-size: 0.8rem;
        line-height: 1.35;
    }
}

/* --------------------------------------------------
   長い曲名の折り返し

   「小さな白鳥たちの踊り（4羽の白鳥の踊り）」のような題名は
   区切りが少なく、そのままだと枠からはみ出す。
   日本語は語の途中で折り返して構わない。
   -------------------------------------------------- */
.info-table td,
.attribute-table__section,
.work-list__title,
.movement-tree a,
.listing-card__title {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --------------------------------------------------
   狭い画面の絞り込み（引き出し）

   **絞り込み欄を縦に積まない。** 選択肢が多いページでは
   絞り込みだけで画面何枚分にもなり、一覧に辿り着く前に力尽きる。
   **隠したままにもしない。** 絞り込めること自体に気づけなくなる。

   JavaScriptは使わず、チェックボックスの状態だけで開閉する
   （ハンバーガーメニューと同じ作り）。
   -------------------------------------------------- */
.listing-filter-open,
.listing-filter-close {
    display: none;
}

@media (max-width: 900px) {
    .listing-filter-open {
        display: inline-block;
        margin: 0 0 0.8rem;
        padding: 0.5rem 1.1rem;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        background: var(--color-bg);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }

    .listing-filter-open::before {
        content: '▤ ';
    }

    .listing-layout__filter {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 60;
        width: min(88vw, 22rem);
        height: 100dvh;
        padding: 1rem;
        overflow-y: auto;
        background: var(--color-bg);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
        /* 押されるまでは画面の外。表示自体は消さない（中身が検索に拾われる） */
        transform: translateX(-102%);
        transition: transform 0.2s ease;
    }

    .listing-filter-toggle:checked ~ .listing-layout__filter {
        transform: translateX(0);
    }

    /* 開いている間は後ろを暗くする。閉じ方が分からなくならないよう、ここを押しても閉じる */
    .listing-filter-toggle:checked ~ .listing-layout__results::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, 0.4);
    }

    .listing-filter-close {
        display: block;
        margin: 0 0 0.8rem auto;
        padding: 0.4rem 0.9rem;
        border: 1px solid var(--color-border, #ddd);
        border-radius: 999px;
        background: var(--color-bg);
        font-size: 0.85rem;
        width: fit-content;
        cursor: pointer;
    }
}

/*
  本文に出す絞り込み（作品の一覧だけがこの形。運営の報告。2026-09-27）。

  条件が無いときフォームは本文に出るが、**畳む手段が無かった**ため、
  狭い画面では946個のチェックボックスが結果の上に居座っていた。

  **広い画面では畳まない。** 左に並べる余地があるので閉じる理由が無い。
  `<details open>` を既定にし、狭い画面のときだけ閉じた状態から始める。
*/
/*
  条件が無いときの絞り込み欄（本文の中に出るほう）。

  ⚠️ **開閉を `<details>` に任せない**（運営の報告。2026-09-29
  「検索窓が出なくなっている気がしますが？？？」）。

  以前は `<details>` で畳み、広い画面は
  `.listing-filter-inline > .search-panel { display: block }` で開けていた。
  ⚠️ **これは効かない。** いまのブラウザは閉じた `<details>` の中身を
  `::details-content` の `content-visibility: hidden` で隠すので、
  子に `display` を当てても現れない。**広い画面でも検索欄が消えていた。**

  いまはチェックボックス＋ラベルで、`display` だけで切り替える。
  `display` はこちらが完全に握っているので、ブラウザの実装に左右されない。
*/
.listing-filter-inline__summary {
    /* 広い画面では見出しを出さない（開いたままなので押す意味が無い） */
    display: none;
}

/* 広い画面は開いたまま。左に並べる余地があるので閉じる理由が無い */
.listing-filter-inline {
    display: block;
}

@media (max-width: 900px) {
    /*
      ⚠️ **狭い画面は畳んだ状態から始める。**
      結果が主役なので、毎回閉じさせるのは手間を全員に配ることになる。
      ⚠️ **見出し（ラベル）は必ず出す。** ここまで消えると「探す欄が無い」に見える。
    */
    .listing-filter-inline__summary {
        display: block;
        margin: 0 0 1rem;
        padding: 0.6rem 0.9rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }

    .listing-filter-inline__summary::before {
        content: '▤ ';
    }

    .listing-filter-inline {
        display: none;
    }

    /* 開いたら、見出しと中身がひと続きに見えるようにする */
    .listing-filter-inline-toggle:checked ~ .listing-filter-inline__summary {
        margin-bottom: 0;
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
    }

    .listing-filter-inline-toggle:checked ~ .listing-filter-inline {
        display: block;
        margin: 0 0 1rem;
        padding: 0.6rem;
        border: 1px solid var(--color-border);
        border-top: 0;
        border-radius: 0 0 8px 8px;
    }
}

/*
  ⚠️ **何で絞ったのかを見せる欄**（運営の指摘。2026-09-29）。
  件数だけでは、なぜその曲が出た/出ないのかが辿れない。
*/
.group-filter__capacity {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
}

.group-filter__capacity > summary {
    cursor: pointer;
    font-weight: 600;
}

.group-filter__capacity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.group-filter__capacity-list > li {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface, #fff);
    white-space: nowrap;
}

.group-filter__capacity-name {
    font-weight: 600;
}

.group-filter__capacity-count {
    color: var(--color-text-muted, #666);
}

/* 団員ごとの担当楽器。⚠️ 名前は出さない（本人の情報）。番号だけ振る */
.group-filter__roster {
    margin: 0.5rem 0 0;
    padding-left: 1.6rem;
}

.group-filter__roster > li {
    margin: 0.15rem 0;
}

.group-filter__capacity-note {
    margin: 0.5rem 0 0;
    color: var(--color-text-muted, #666);
    line-height: 1.6;
}

/* 適用中の絞り込み条件。題名に入りきらないものを、無かったことにしない */
.applied-conditions {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted, #666);
}

.applied-conditions > summary {
    cursor: pointer;
}

.applied-conditions__list {
    margin: 0.4rem 0;
    padding-left: 0;
    list-style: none;
}

.applied-conditions__list li {
    padding: 0.15rem 0;
}

.applied-conditions__label {
    display: inline-block;
    min-width: 11em;
    color: var(--color-text-muted, #888);
}

@media (max-width: 640px) {
    .applied-conditions__label {
        display: block;
        min-width: 0;
        font-size: 0.78rem;
    }
}

/*
   出版社カードの、楽譜の大ジャンル別件数。
   「／」で区切って1行に収める。数が増えたら折り返す
*/
.listing-card__score-counts {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.listing-card__score-counts span + span::before {
  content: '／';
  margin-right: 0.5rem;
  color: var(--color-border);
}

/* 詳細ページで畳んである編成のバッジ（数が多い曲だけ出る） */
.ensemble-more {
  display: inline-block;
}

.ensemble-more > summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--color-border);
  border-radius: 999px;
  list-style: none;
}

.ensemble-more__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

/* コンクールの部門と成績表 */
.contest-section__title {
  margin: 1.4rem 0 0.5rem;
  font-size: 1.02rem;
}

.contest-table__note {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

/* 一覧カードで省いた編成の件数。押せないので、バッジと見分けが付く見た目にする */
.tag--more {
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
}

/* ---------- コンクールの統計（機能フラグ: statistics） ---------- */
/*
  **数字は「どれだけ確かか」と一緒に読ませる。**
  人数も楽器も演奏形態からの推計を含むので、注記を小さくしすぎない。
*/
.contest-stats__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle, #f7f7f5);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
  line-height: 1.7;
}

.stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.stat-card {
  flex: 1 1 8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-card__label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.stat-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card__value small {
  font-size: 0.85rem;
  font-weight: 400;
  margin-left: 0.15rem;
}

.stat-table {
  margin-bottom: 0.75rem;
}

/* グラフは横に伸びるので、狭い画面では中で送れるようにする */
.stat-chart {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  color: var(--color-text-muted);
}

.stat-chart--pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.stat-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.9;
}

.stat-legend__swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.35rem;
}

/* 表とグラフを横に並べる（狭い画面では縦に積む） */
.stat-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.stat-columns > * {
  flex: 1 1 20rem;
  min-width: 0;
}

.stat-year-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
}

/* 統計の絞り込みフォームと「もっと見る」 */
.stat-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.stat-more {
  margin: 0 0 1.5rem;
}

.stat-more > summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* 差し替え中であることを、うっすら伝える */
.contest-stats[aria-busy='true'] {
  opacity: 0.5;
}

/*
 * ⚠️ **「所属している団体」の見た目は、ここでは決めていない**（2026-09-09）。
 *
 * 登録すると何ができるのかを先に見せる案内（`.group-guide`）と、
 * 「あなただけに見える画面」だと分かる帯（`.mypage-banner`）が、ここにあった。
 *
 * 2026-09-07 に運営から
 * 「公開ページと同じデザインになっているが、実質公開ページではなく、
 * ユーザー毎の固有ページである」と指摘され、帯を足して分かるようにしていた。
 *
 * **帯は応急処置だった。** 2026-09-09 に画面そのものをマイページのパネルへ移したので、
 * 使っていた2画面（所属している団体の一覧・詳細）ごと無くなった。
 * 案内は `resources/views/filament/contributor/group-guide.blade.php` にある。
 * `/mypage` の下に公開サイトの見た目の画面は残っていない
 * （`MypageLooksLikeMypageTest` が見張る）。
 */


/*
  編成の組み合わせ（フレキシブル楽譜の版）。
  **どれか1つの組で演奏する**ことが分かるよう、組ごとに枠で囲む。
*/
.part-combinations {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.part-combination {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.8;
}

.part-combination__label {
  display: block;
  font-weight: 700;
}

.part-combination__part--optional {
  color: var(--color-text-muted);
}

.instrumentation-note {
  background: var(--color-bg-subtle, #f7f7f5);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.8;
}

/*
  一覧の中の試聴ボタン。**アイコンだけ**にする（一覧の情報量を増やさない）。
  押すと下にプレーヤーが開く。
*/
.youtube-inline {
  display: inline-block;
  position: relative;
}

.youtube-inline__button {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0 0.15rem;
  cursor: pointer;
  color: #c00;
  line-height: 1;
}

.youtube-inline__button:hover .youtube-inline__icon,
.youtube-inline__button:focus-visible .youtube-inline__icon {
  opacity: 1;
}

.youtube-inline__icon {
  opacity: 0.75;
  transition: opacity 0.15s;
}

/*
  プレーヤーは一覧の流れを崩さないよう、押した行の下に出す。
  **絶対配置にしない** — 重ねると下の行が読めなくなる。
*/
.youtube-inline__player {
  display: block;
  margin: 0.5rem 0;
  max-width: 480px;
  aspect-ratio: 16 / 9;
}

.youtube-inline__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-md);
}

/*
  区分ページ（/music/ など）の入口カード。
  **件数と、何で絞れるかを一緒に見せる**（入る前に分かるように）。
*/
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 2rem;
}

.section-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
}

.section-card:hover,
.section-card:focus-visible {
  border-color: var(--color-primary);
}

.section-card__label {
  font-weight: 700;
}

.section-card__count {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/*
  ⚠️ **カードの中の「詳細を見る」は、リンクではなくボタンの見た目だけ**
  （モックの配置。2026-09-17）。カード全体が既にリンクなので、
  中にもう1つリンクを置くと**入れ子のリンク**になり、読み上げも打鍵の順序も壊れる。
*/
.section-card__action {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

.section-card:hover .section-card__action,
.section-card:focus-visible .section-card__action {
  background: var(--color-primary);
  color: #fff;
}

.section-card__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/*
  ⚠️ **図と箇条書きを横に並べる**（モックの配置。2026-09-17）。
  図は描画（SVG）なので、狭い画面では畳んで箇条書きに任せる
  （`.about-network` 側に既にその指定がある）。
*/
.home-can__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.home-can__layout > .about-network {
  flex: 1 1 22rem;
  min-width: 0;
}

.home-can__layout > .home-can {
  flex: 1 1 22rem;
  min-width: 0;
  margin: 0;
}

/*
  **いただいた絵を出すときは全幅**（運営の指示。2026-10-22）。

  ⚠️ 1536pxの絵を半分の幅（約540px）に収めると、
  **図の中の文字が8px相当**になって読めない。図を上に全幅で置き、箇条書きは下へ回す。

  ⚠️ 上の `.home-can__layout > .about-network` は**残してある**——
  描画の図は [このサイトについて](/about) で今も使っていて、
  トップに戻す判断になったときにそのまま効く。
*/
/*
  ⚠️ 上の `.home-can__layout` 一式は**残してある**——
  描画の図は [このサイトについて](/about) で今も使っていて、
  トップに戻す判断になったときにそのまま効く。
  いまのトップは**図と箇条書きのあいだに見出しが入る**ので、横並びにはしていない。
*/
.home-can__figure {
  margin: 0 0 1rem;
}

/* 「例えばこんなことができます」。h2の帯より軽く、でも段が変わったと分かる大きさに */
.home-can__heading {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.75rem;
}

.home-can__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/*
  ⚠️ **狭い画面では縮めずに横へ流す。**
  絵は畳めないので、390pxまで縮めると図の中の文字が6px相当になって読めない。
  760pxを下回らせず、横にスクロールしてもらう。
*/
.home-can__figure-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* 広い画面では収まりきるので、案内は出さない（読む手間だけが増える） */
.home-can__figure-note {
  display: none;
}

@media (max-width: 800px) {
  .home-can__figure-scroll > img {
    min-width: 760px;
  }

  .home-can__figure-note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }
}

.home-can__more {
  text-align: right;
}

.section-card__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tag--filter {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* フッターは区分ごとの列に */
.site-footer__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.site-footer__group-title {
  font-weight: 700;
  margin: 0 0 0.4rem;
}

/*
  使えない条件はグレーで残す（消さない）。
  消すと「さっきあった欄が無い」と迷うが、グレーなら「この種類では使えない」と伝わる。
*/
/*
  **使えない条件は、薄くするのではなく隠す。**
  「この種類では使えません」と灰色で残していたが、
  作品を探しているときにエリアの欄が居座るのは邪魔なだけだった（運営の指摘）。
  種類を変えれば戻るので、消えたままにはならない。

  **JavaScriptが動かないときは、隠さない。** 隠す指示はJSが付ける印に紐づけているので、
  印が付かない環境では今までどおり全部出る（絞り込みは受け口の側でも落としている）。
*/
.form-field--unavailable {
  display: none;
}

.form-field--unavailable label,
.form-field--unavailable .hint {
  color: var(--color-text-muted);
}

.form-field--unavailable input,
.form-field--unavailable select {
  cursor: not-allowed;
  background: var(--color-bg);
}

/* 楽器の絞り込み。教室・講師のチェックボックス一覧と同じ見た目に揃える */
.instrument-search .checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 18rem;
  overflow-y: auto;
}

.instrument-search .checkbox-list label.is-disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* 「頃」から数えた値など、確かめきれていない情報の印 */
.tag--uncertain {
  background: var(--tag-amber-bg);
  color: var(--tag-amber-fg);
  border: 1px solid #f0d9b5;
}

/* 楽器と本数の絞り込み。「含む」への切り替えは条件のすぐ下に置く */
.part-filter__mode {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

.part-filter__mode .hint {
  display: block;
  margin: 0.15rem 0 0 1.4rem;
}

/* 条件をすべて消すリンク。検索ボタンの下に、控えめに置く */
.filter-reset {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.9rem;
}

/* 一覧どうしの行き来（作曲家 ↔ 編曲家）。結果の下に控えめに置く */
.listing-crosslink {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/*
 * 曲の補足（レチタティーヴォの小節数・場のまたぎなど）。
 * 調も拍子も速度も無い曲では、表にすると「—」が並ぶだけになるため、
 * 備考そのものをここに出す。**どこの話かが先に読めるように**、位置を左に置く。
 */
.movement-notes {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.movement-notes li {
    display: flex;
    gap: .75rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--color-border, #d4d4d8);
    background: var(--color-surface-muted, #fafafa);
    line-height: 1.8;
}

.movement-notes li + li {
    margin-top: .25rem;
}

.movement-notes__where {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

/*
 * 場をまたぐ曲の印。構成の図で「→ 第2場へ続く」と添える。
 * 曲名と並ぶので、**曲名より弱く**見せる（曲そのものではなく、つながりの説明のため）。
 */
.movement-tree__continues {
    color: var(--color-text-muted, #71717a);
}

.movement-tree__continues a {
    color: inherit;
    text-decoration: underline;
}

/*
  調性・拍子・速度を幕ごとに畳む。

  歌劇は区分が数十になる。全部を開いておくと表だけで画面何枚ぶんにもなり、
  目当ての曲に辿り着けない（狭い画面では1件が1枚のカードになるので、なおさら長い）。
*/
.attribute-fold {
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.attribute-fold > .attribute-table-wrap {
  padding: 0 0.75rem 0.75rem;
}

.attribute-fold__summary {
  padding: 0.6rem 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.attribute-fold__count {
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* 畳んでいない（1つだけの）ときは枠を出さない */
.attribute-fold:not([open]) > .attribute-table-wrap,
.attribute-fold > .attribute-table-wrap:only-child {
  padding: 0;
}

/*
  畳まないときは `<details>` ではなく、ただの入れ物にする。
  `<summary>` の無い `<details>` はブラウザが「詳細」の印を自分で描き、
  その字が表に重なる。
*/
.attribute-fold--plain {
  border: 0;
  margin-bottom: 0;
}

/*
  入力の途中であることの断り。

  **足りないことを黙っていると、「無い」と読まれる。**
  歌劇の曲を半分しか入れていないのに「この3曲で休み」と出すと、
  残りの曲では吹くように読めてしまう。
  警告ではないので赤くしない（内容が間違っているわけではない）。
*/
.in-progress-note {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-muted, #f4f4f5);
  line-height: 1.8;
}

/*
  楽章ページの「原曲」。

  編曲版の楽章には調も編成も入らないことが多い（原曲の側に入っている）。
  原曲へ飛べないと、何も情報が無いページで行き止まりになる。
*/
.movement-source {
  margin: 0 0 1.5rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-muted, #fafafa);
  line-height: 1.8;
}

.movement-source .hint {
  display: block;
}


/* ---------- 横断検索（種類を問わないキーワード検索） ---------- */
.cross-search__form {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  max-width: 34rem;
}

.cross-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.cross-search__group {
  margin: 0 0 2rem;
}

.cross-search__count {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.cross-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.cross-search__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

/* 種類をまたいで並ぶので、名前だけでは何の名前か分からない。短い説明を添える */
.cross-search__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.cross-search__more {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

.cross-search__fallback {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

/*
  楽器・編成から探す行き先（運営の指摘。2026-09-25）。

  「フルート」と打った人が欲しいのは**フルートの曲**で、
  題名に「フルート」が入る曲ではない。結果の前に、行き先として出す。

  **枠で囲うが、色は主張させない。** 結果より目立つと、
  探し直しの案内が本体に見えてしまう。
*/
.cross-search__taxonomy {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-muted, #f6f8f8);
}

.cross-search__taxonomy-title {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.cross-search__taxonomy ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
  padding: 0;
}

.cross-search__taxonomy li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

/*
  **完全に一致したものは太く。**
  候補を全部同じ顔で並べると、「フルート」と打った人が
  「フルート属」「フルート二重奏」の中から**もう一度選び直す**ことになる。
  順番でも先に出しているが、見た目でも分かるようにする。
*/
.cross-search__taxonomy li.is-exact > a:first-child {
  font-weight: 600;
}


/* ---------- トップの入口（キーワード1本・エリアの控え・できること） ---------- */
/* **入口はキーワード1本。** 絞り込みは着いた先の一覧が持っている */
.hero__search {
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
  margin: 0 0 0.5rem;
}

.hero__search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.hero__search-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* 地図を使わない道。情報のある県だけなので、1行に収まる */
.area-fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
}

.area-fallback__label {
  color: var(--color-text-muted);
}

.home-can {
  margin: 1.25rem 0 1.5rem;
  padding-left: 1.2rem;
}

.home-can li {
  margin-bottom: 0.6rem;
}


/* ---------- 故人の別枠（演奏家・指揮者・講師） ---------- */
/* **依頼できる相手の一覧に混ぜない。**辿る道は残すので、本文の下に区切って置く */
.deceased-people {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.deceased-people .card-list {
  opacity: 0.85;
}


/* ---------- オンライン専用の教室の別枠 ---------- */
/*
   **場所を持たない教室を、場所で探す一覧に混ぜない**（運営の指示。2026-09-02）。
   混ぜると、どの県にも数えられないのに合計だけ増える。
   故人の別枠と同じく、辿る道は残して本文の下に区切って置く。
*/
.online-only-schools {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}


/* ---------- エリアから辿る入口（本文の下） ---------- */
/* 左カラムは絞り込みの道具だけにして、別の集合へ移る入口はここに置く */
.area-explorer {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}


/* 区分ページの降り口（種類の一覧）。本文の先頭に置くので、左カラムのときより余白を取る */
.link-list--entries li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}


/* ---------- 本文の先頭の検索欄（狭い画面で最初に入力できる場所） ---------- */
.listing-keyword {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  max-width: 30rem;
}

.listing-keyword__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}



/* 飛んだ先が見出しの真下に来るように（貼り付いたヘッダーの下に隠れないように） */
#area,
#instrument {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}


/* 該当のない選択肢は畳んでおく（消さずに、探して目で追わせない） */
.checkbox-group__folded {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.checkbox-group__folded > summary {
  cursor: pointer;
  color: var(--color-text-muted);
}


/* ---------- ヘッダーの区分メニュー（その場で種類が開く） ---------- */
/*
  **区分ページを経由しなくても、1回で目的の一覧に着けるようにする。**
  区分ページ（ハブ）は検索エンジンからの入口として残すが、
  普段の導線としては「押す→選ぶ」の2回を1回にする。
  JavaScriptは使わない（:hover / :focus-within だけ）。
*/
.site-nav__group {
  position: relative;
}

.site-nav__sub {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  z-index: 60;
  display: none;
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* 上の見出しとメニューの間に隙間があるとカーソルが外れて閉じる */
.site-nav__group::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.85rem;
}

.site-nav__group:hover > .site-nav__sub,
.site-nav__group:focus-within > .site-nav__sub {
  display: block;
}

.site-nav__sub li {
  margin: 0;
}

.site-nav__sub a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.site-nav__sub a:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}

.site-nav__count {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.site-nav__sub-all {
  border-top: 1px solid var(--color-border);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

@media (max-width: 840px) {
  /* 触る画面には hover が無い。メニューの中では畳まずに並べる */
  .site-nav__group::after {
    content: none;
  }

  .site-nav__sub {
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .site-nav__sub a {
    padding-left: 2.5rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav__sub-all {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }
}


/* ホール一覧で、施設の中の会場名を出す（施設名だけでは何のホールか分からない） */
.listing-card__rooms {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}


/* 楽器の親子関係（候補の説明だけでは伝わらないブラウザ向けの控え） */
.part-filter__guide {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.85rem;
}

.part-filter__guide > summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

.part-filter__tree {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.part-filter__tree li {
  margin-bottom: 0.25rem;
}


/* ---------- 楽器の指定（一覧から選ぶ／打って探す の切り替え） ---------- */
/*
  **口は1つ。** 2つ並べると場所を取り、どちらに入れるのか迷わせる。
  JavaScriptは使わず、チェックボックスの状態だけで見せ方を切り替える。
*/
.part-filter__field {
  display: inline-flex;
  min-width: 0;
}

.part-filter__field > select,
.part-filter__field > input[type="text"] {
  min-width: 0;
  width: 100%;
}

/* 切り替えのラベルは、状態によって位置が変わらないように幅を持たせる */
.part-filter__switch {
  min-width: 4.6em;
  text-align: right;
}

/*
  ⚠️ **切り替えはチェックボックスではなくボタンになった**（2026-09-17）。

  もとは `<select>` と `<input>` を両方置き、チェックボックスとCSSで
  出し分けていた。その場で切り替わる代わりに、
  **画面に出ていない `<select>`（263件）が5行ぶんDOMに載っていた**。

  いまは**その行に必要なほうだけ**を書き、切り替えは送信で描き直す
  （「枠を増やす」「✗」と同じやり方）。出し分けのCSSは要らなくなった。
*/

/* 切り替えは本数の右端に置く（楽器の欄と同じ行に押し込まない） */
.part-filter__switch {
  margin-left: auto;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-primary);
  white-space: nowrap;
  text-decoration: underline;
  /* ⚠️ ボタンの既定の見た目を消す。リンクに見えていたものを変えない */
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
}




/* ---------- 「？」で開く説明 ---------- */
/*
  **決まりごとは畳んで、要るときだけ出す。**
  重ねる（PC）だけだと触る画面で出せないので、**押しても開く**ようにする
  （ボタンにフォーカスが移ると開く。画面の別の場所を押せば閉じる）。
  JavaScriptは使わない。
*/
.help {
  position: relative;
  display: inline-block;
  margin-left: 0.35rem;
}

.help__mark {
  display: inline-block;
  text-align: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.help__toggle:checked ~ .help__mark,
.help__mark:hover,
.help__toggle:focus-visible ~ .help__mark {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.help__body {
  position: absolute;
  z-index: 70;
  top: calc(100% + 0.4rem);
  left: -0.5rem;
  display: none;
  width: min(20rem, 78vw);
  padding: 0.7rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  white-space: normal;
}

/*
  **押して開き、×で閉じる。重ねただけでは開かない。**

  hover でも開くようにしていたが、**×を押しても閉じない**という形で破綻した。
  説明そのものが `.help` の中にあるので、×を押した瞬間もマウスは `.help` の上にあり、
  hover の指定が勝って開いたままになる（＝ボタンが効かないように見える）。

  触る画面には hover が無く、どのみち押して開く必要がある。
  **開け方を1つにする**ほうが、PCとスマホで同じ動きになって迷わない。
*/
.help__toggle:checked ~ .help__body {
  display: block;
}

/* 閉じる（×）。押すと「出したまま」を解く */
.help__close {
  position: absolute;
  top: 0.15rem;
  right: 0.35rem;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
}

.help__close:hover {
  color: var(--color-text);
}

/* ×のぶん、右側に余白を空ける */
.help__body {
  padding-right: 1.6rem;
}


/* 区分ページの切り口（編成から・ジャンルから）。件数を添えて横に並べる */
.shortcut-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.shortcut-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

/* ---------- 団員が吹ける楽器 ---------- */
/*
  **1人にいくつでも付く。** 持ち替えできる人を所有楽器として何本も登録すると
  1人で何席も埋まっていることになるため、人に紐づけて持つ。
  楽器と「外す」ボタンは離れないよう1つのまとまりにする。
*/
.member-instrument {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.member-instrument form {
  display: inline;
}

/* 名前・楽器と並べる小さな入力（楽器を足す欄など） */
.inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.inline-form select {
  max-width: 14rem;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}

/* 団員の行に置く「会員として招待」（畳んでおく。ふだんは使わない） */
.member-invite summary {
  font-size: 0.85rem;
  cursor: pointer;
}

.member-invite .form-hint {
  display: block;
  margin-top: 0.2rem;
}

/*
  **一覧の行の中で開くプレーヤーは、行いっぱいに置く。**
  `.work-list__item` は2列のグリッドなので、そのまま足すと
  右の列（バッジの側）に入って半分の幅になる。
  `.work-list__arrangements` と同じように、行をまたがせる。
*/
.work-list__item > .youtube-inline__player,
.card > .youtube-inline__player {
  grid-column: 1 / -1;
}

/*
  探していたところへ戻る導線。

  **邪魔をしない。** パンくずの下に小さく置くだけで、本文を押しのけない。
  1つ前しか見ないので、古い検索条件が残り続けることはない。
*/
.back-to-search {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

.back-to-search a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.back-to-search a:hover {
  text-decoration: underline;
}

/*
  備考の引用番号。**どの行の備考かを、番号でつなぐ。**
  列から行へ移して読みやすくなった代わりに、
  どこの備考か分からなくなっていた（運営の指摘）。
*/
/*
  備考。**表の中に置かない。**
  文がそのまま入るので、列にすると幅を取ったうえ、それでも収まらず
  表ごと横スクロールになっていた。全幅の行として挟む形にしたが、
  今度は値の行の並びが途切れて表が読みにくくなったため、
  **番号で結んで表の下にまとめる**（運営の指摘。2026-08-26）。
*/
.attribute-notes {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.attribute-notes > .attribute-table__note-row {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  white-space: normal;
  overflow-wrap: anywhere;
  /* 番号のぶんだけ、2行目以降を下げる */
  padding-left: 1.6em;
  text-indent: -1.6em;
}

/* 帯と印は狭い画面だけ。表として読める幅では、色の区間がそのまま見える */
.attribute-table__ribbon,
.attribute-table__marks {
  display: none;
}

.attribute-table__mark {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

sup.attribute-table__mark {
  margin-left: 0.15rem;
}

/*
  同じ値が続く区間を、**ひとまとまりとして見せる**。

  「変イ長調のまま」と毎行書くのは、機械には読みやすくても人には読みづらい。
  「〃」も分かりにくい（運営の指摘）。

  **列は色みで分け、まとまりは同じ色みの中の濃さで分ける。**
  濃淡だけで塗ると隣の列と同じ色になってくっついて見え、
  仕切り線を足すと今度は線がうるさい。色みが違えば線は要らない（運営の指摘）。

  値のセルと、その続きのセルは同じ色。空欄だけ塗ると、値とつながって見えない。

  行そのものは結んでいない（rowspan にしない）ので、
  折りたたみとも両立し、列が増えても崩れない。
*/
.info-table.attribute-table td.attribute-table__run,
.info-table.attribute-table th.attribute-table__run {
  background: var(--run-light, #f5f5f6);
}

.info-table.attribute-table td.attribute-table__run--deep,
.info-table.attribute-table th.attribute-table__run--deep {
  background: var(--run-deep, #e7e7ea);
}

/* 調性は赤系。黄（拍子）・緑（速度）・青（メトロノーム）と並べたときの釣り合いで選んだ */
.attribute-table__run--key {
  --run-mark-light: #e6adad;
  --run-mark-deep: #d08c8c;
  --run-light: #fdf2f2;
  --run-deep: #f6dcdc;
}

/* 拍子は黄系 */
.attribute-table__run--time {
  --run-mark-light: #e6cb8b;
  --run-mark-deep: #cfa95e;
  --run-light: #fdf7e6;
  --run-deep: #f6e8c4;
}

/* 速度標語は緑系 */
.attribute-table__run--tempo {
  --run-mark-light: #a3ccaa;
  --run-mark-deep: #7db089;
  --run-light: #eef6ef;
  --run-deep: #dbebdd;
}

/* メトロノームは青系 */
.attribute-table__run--metronome {
  --run-mark-light: #a8bce2;
  --run-mark-deep: #8aa5d2;
  --run-light: #eef2fa;
  --run-deep: #d9e2f4;
}

/* 決めていない列は無彩色 */
.attribute-table__run--other {
  --run-mark-light: #cfcfd6;
  --run-mark-deep: #b4b4bd;
  --run-light: #f5f5f6;
  --run-deep: #e7e7ea;
}

/*
  **この表の横罫線は「上の線」で引く。**

  `info-table` は `border-bottom` で罫線を引いているが、それだと
  **続きのセル側から線を消せない**（線は1つ上の行のものなので）。
  「同じまとまりの中には線を引かない」を素直に書けるように、この表だけ上の線にする。
*/
.info-table.attribute-table tbody th,
.info-table.attribute-table tbody td {
  border-bottom: 0;
  border-top: 1px solid var(--color-border);
}

/*
  **まとまりの中には線を引かない。**
  値が続いている間は線が消え、変わったところにだけ線が入るので、
  どこからどこまでが同じなのかが線だけで分かる。
  区分の列も同じ（そちらは色を付けず、線だけで表す）。
*/
.info-table.attribute-table tbody td.attribute-table__continues,
.info-table.attribute-table tbody th.attribute-table__continues {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* --------------------------------------------------
   調性・拍子の表を、狭い画面向けに組み替える。

   **この指定はファイルの最後に置く。**
   同じ詳しさの指定があとから来ると上書きされるので、
   置き場所で勝たせる（実際、あとの指定に打ち消されて
   値が横に並んだままになっていた）。
   -------------------------------------------------- */
/*
  **組み替えるのは、本当に狭い画面だけ。**

  列が潰れるのを避けようとして境目を960pxまで広げたことがあるが、
  **机上の画面までSPの見た目になってしまった**（運営の指摘）。
  いまは列幅を割合で持たせていて、広い画面では表のまま収まる。
  組み替えるのは、表では読めなくなる幅（携帯）だけにする。
*/
@media (max-width: 700px) {
  /*
    **狭い画面では、表として横に並べない。**

        導入
          第1小節〜  ■変ホ長調／■4分の2拍子／■速度標語（なし）／■♩＝69
          第11小節〜 ■／■／■Sostenuto／■
        ────────────────────────
        しゃぼん玉
          第17小節〜 ...

    区分の名前は**その区分の見出し**として1行を取る。
    その下は「小節｜値」で、値は**／で並べて折り返す**（運営の案。2026-08-27）。
    1項目1行にすると4項目で4行を使い、縦に伸びるばかりだった。

    **欄は変わっていなくても必ず4つ並べる。**／は必ず3つになり、
    何番目が何の欄かが位置で読める。変わっていない欄は■だけを出す。

    面では塗らない。色は**行頭の■**と**右端の帯**だけに持たせる。
    いくつも同時に変わる行で色の面が並ぶと、目がちかちかする（運営の指摘）。

    縦書きも試したが、区分名の長さで高さが揃わず読みづらかった（運営の指摘）。
  */
  .attribute-table {
    min-width: 0;
    table-layout: auto;
  }

  .attribute-table,
  .attribute-table thead,
  .attribute-table tbody,
  .attribute-table tr,
  .attribute-table th,
  .attribute-table td {
    display: block;
    width: auto;
  }

  /* 見出し行は使わない（色と、値そのものの形で読み取れる） */
  .attribute-table thead {
    display: none;
  }

  /*
    1つの区分＝1つの入れ物。区分の変わり目にだけ線を引く。

    **入れ物の側に余白を持たせない。**
    帯（右端の縦線）は行ごとに引くので、入れ物に余白があると
    **区分の変わり目で帯が切れる**（運営の指摘。2026-08-27）。
    余白は行の中（区分名の上・最後の行の下）に移し、
    帯が端まで途切れずに続くようにする。
  */
  .attribute-table tbody {
    padding: 0;
  }

  .info-table.attribute-table tbody > tr:last-child {
    padding-bottom: 0.45rem;
  }

  /*
    **区分の切れ目の線は、帯の手前で止める。**
    端まで引くと帯を横切って、色の続きが分断されて見える。
  */
  .info-table.attribute-table tbody + tbody {
    border-top: 0;
  }

  .info-table.attribute-table tbody + tbody > tr:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    right: 1.9rem;
    top: 0;
    border-top: 1px solid var(--color-border);
  }

  /*
    **値は縦に積まず、／で並べて折り返す。**
    1項目1行だと、4項目で4行を使ってしまい、区分がいくつも続く曲では
    画面が縦に伸びるばかりで見通しが悪い（運営の案。2026-08-27）。

    **欄は変わっていなくても必ず4つ並べる。**
    消してしまうと並びが詰まって、何番目が何の欄か分からなくなる。
    変わっていない欄は■だけを出す。**／は必ず3つ**になり、位置で読める。

    折り返した2行目以降は、小節の幅ぶん下げて値の側に揃える
    （ぶら下げ。小節の欄を負の余白で左へ出す）。
  */
  /*
    **小節で1行、値はその下に「/」で並べて折り返す。**

        導入
          第1小節〜                                    ▍▍▍▍
            ■変ホ短調 / ■4分の4拍子 / ■Adagio / ■♩＝60
          第9小節〜                                    ▍▍▍▍
            ■Piu mosso / ■♩＝72

    **書くことが無い欄は出さない**（運営の指示。2026-08-27）。
    その小節で分かっていることだけを並べるので、
    「調性/速度標語」だけの行も「拍子」だけの行もある。
    どれが何の欄かは、頭の■の色と、行の右端の帯で分かる。

    区切りは半角の「/」。幅の足りない画面のための組み方なので、
    全角だと1つにつき約0.5文字ぶん余計に取り、3つで1.5文字ぶん損をする。
    左右に余白を入れれば、離れ方は全角と変わらない。
  */
  .attribute-table tr {
    display: block;
    /* 値の行は少し下げて、小節の行と見分ける */
    padding-left: 0.9rem;
  }

  .info-table.attribute-table tbody th,
  .info-table.attribute-table tbody td {
    border: 0;
    padding: 0.12rem 0;
  }

  /* 区分の名前は、そのまとまりの見出し。1行を取る（ぶら下げの外へ戻す） */
  .info-table.attribute-table tbody th.attribute-table__section {
    display: block;
    margin-left: -0.9rem;
    /* 入れ物から移した余白。行の中なので、帯がここも塗る */
    padding: 0.5rem 0 0.3rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
  }

  /*
    小節は、印（■■■■）と並べて1行を取る。
    **小節は左詰め、印は右詰め**（運営の指示。2026-08-27）。
    印が帯のとなりに縦に揃うので、上下の行と見比べられる。
  */
  .info-table.attribute-table tbody td.attribute-table__where {
    display: flex;
    align-items: center;
    margin-left: -0.9rem;
    padding-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }

  /*
    小節の欄の幅を決めておく。
    「第1小節〜」でも「第111小節〜 *1」でも、
    **その右に並ぶ印の左端が動かない**（運営の指示。2026-08-27）。
  */
  .attribute-table__at {
    flex: 0 0 6.4rem;
  }

  /*
    **狭い画面では、面で塗らない。**
    1行で調も拍子も速度も変わる曲だと、色の面がいくつも並んで
    目がちかちかする（運営の指摘。2026-08-26）。
    地は白のままにして、**行頭の小さな四角**だけで列を示す。
  */
  /* 値は文字として流す。入りきらなければ折り返す */
  .info-table.attribute-table tbody td.attribute-table__run {
    display: inline;
    padding: 0;
    background: none;
  }

  /*
    **色の印は、値の前にまとめて並べる。**
    値の1つずつに付けると、印と文字が交互に並んで読みにくい
    （運営の指示。2026-08-27）。並びは下に出す値と同じ順。
  */
  .attribute-table__marks {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
  }

  /*
    **変わった欄だけ色を付ける**（運営の指示。2026-08-27）。
    どの欄が動いたかが、色の付いた位置で一目で分かる。

    色は**行の右端の帯と同じ**。同じ区間なら同じ濃さになるので、
    印と帯が同じものを指していることが見て分かる。
  */
  .attribute-table__marks > i {
    /*
      小さすぎると、淡い色が色として見えない。
      少し大きくして、やわらかい色でも読めるようにする（運営の指示。2026-08-27）。
    */
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    /*
      薄いほうの色も、しっかり色として見える濃さにする。
      0.55 では地色に近すぎて、動きの無い欄の四角と明るさが並んでいた
      （運営の指摘。2026-08-27）。

      **濃いほうは、広い画面の地色と同じやわらかさに寄せてある。**
      強い色にするとどぎつく見えた（運営の指摘）。
      ただし小さな四角は面と違い、淡くしすぎると色そのものが消えるので、
      広い画面の地色（#f6dcdc など）ほどは淡くできない。

      **グレーにするのは、その小節で変わらなかった欄だけ**（下の `--off`）。
      印そのものを無彩色にすると、どの欄が動いたのかが読めなくなる
      （運営の指摘。2026-08-27）。
    */
    background: var(--run-mark-light, #b9b9c0);
    opacity: 0.85;
  }

  .attribute-table__marks > i.attribute-table__run--deep {
    background: var(--run-mark-deep, #6f6f78);
    opacity: 1;
  }

  /*
    動きの無い欄は**地色よりほんの少しだけ濃く**する（運営の指示。2026-08-27）。
    まったく同じ色だと場所が消えて落ち着かないが、
    濃くすると動いた欄と紛れる。**在ることが分かる程度**に留める。
    色みは持たせない（白黒）ので、色が付いている＝動いた欄、と読める。
  */
  .attribute-table__marks > i.attribute-table__mark--off {
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
  }

  /* 欄と欄の区切り。見える最後の欄には付けない */
  .info-table.attribute-table tbody td.attribute-table__run::after {
    content: "/";
    margin: 0 0.3rem;
    color: var(--color-border, #d8d8dc);
  }

  .info-table.attribute-table tbody td.attribute-table__run--last::after {
    content: none;
  }

  /* 書くことが無い欄は出さない（値も、■も、区切りも） */
  .info-table.attribute-table tbody td.attribute-table__empty {
    display: none;
  }

  /*
    **分かっていない欄は、狭い画面では出さない。**
    「速度標語（なし）」と書くことも試したが、
    書くことが無い欄は並べないほうが読みやすい（運営の指示。2026-08-27）。
    その欄の区間は、右端の帯でたどれる。
  */
  .info-table.attribute-table tbody td.attribute-table__unknown {
    color: var(--color-text-muted);
  }

  /* 項目名は出さない（値そのもので読み取れる） */
  .attribute-table td::before,
  .attribute-table th::before {
    content: none;
  }

  /*
    **変わっていない欄も、場所は空けておく。**
    消すと並びが詰まって、何番目が何の欄か分からなくなる
    （運営の指摘。2026-08-27）。値は書かず、印（■）だけを残す。
    区分の名前だけは、続きの行では消す（見出しなので繰り返さない）。
  */
  .info-table.attribute-table tbody th.attribute-table__continues {
    display: none;
  }

  /*
    **右端の帯。**
    値を出さない行（前から続いている行）でも、
    いまどの区間にいるかが色で分かる。
    左から 赤（調性）・黄（拍子）・緑（速度標語）・青（メトロノーム）。
  */
  .attribute-table tr {
    position: relative;
    /* 帯4本（5px）＋隙間ぶん。ここが狭いと値の文字が帯に潜り込む */
    padding-right: 1.9rem;
  }

  .attribute-table__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 2px;
  }

  .attribute-table__ribbon > i {
    width: 5px;
    /* 地色の薄さのままでは、濃淡の差が見えなかった（運営の指摘） */
    background: var(--run-mark-light, #b9b9c0);
    /* 印と同じ濃さにする（同じものを指していると見て分かるように） */
    opacity: 0.85;
  }

  .attribute-table__ribbon > i.attribute-table__run--deep {
    background: var(--run-mark-deep, #6f6f78);
    opacity: 1;
  }

  /* 中身が複数の要素でも、細く折り返さないようにする */
  .attribute-table td > *,
  .attribute-table th > * {
    min-width: 0;
  }

  /*
    **編成の表は、調性の表とは別の組み方にする。**

    この表も `attribute-table` を継いでいるため、狭い画面では
    「楽器名／パート名／必須」が**ただ縦に3行積まれるだけ**になっていた。
    見出しは出さない作りなので、どれが何なのか、
    どこまでが1つのパートなのかが読めない（運営の指摘。2026-08-27）。

        ────────────────────────
        フルート                  必須
        Flute 1
        ────────────────────────
        フルート                  必須
        Flute 2

    1パート＝1つのまとまり。**必須・任意は右端に**そろえて、
    上から目で追えるようにする。パートの区切りには線を引く。
  */
  .instrumentation-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 0.6rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
  }

  .instrumentation-table tbody tr:first-child,
  .instrumentation-table tbody tr.instrumentation-table__continues {
    border-top: 0;
  }

  .info-table.instrumentation-table tbody td {
    padding: 0;
  }

  /*
    **狭い画面では、読む順に並べ替える。**

      楽器名
      パート名                     必須／任意
      持ち替え・曲によって持ち替え・休み

    持ち替えなどが楽器名とパート名の間に挟まると、
    どのパートの話なのか分からないまま読むことになる
    （運営の指示。2026-08-27）。

    入れ物（td と .part-cell）を `display: contents` で透かして、
    中の「楽器名」と「その他」を別々の場所に置く。
  */
  .instrumentation-table tbody td[data-label="楽器"],
  .instrumentation-table tbody td[data-label="楽器"] > .part-cell {
    display: contents;
  }

  .instrumentation-table tbody .part-cell__instrument {
    grid-column: 1;
    grid-row: 1;
  }

  .instrumentation-table tbody .part-cell__extras {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0.15rem;
  }

  /* パート名は添え物。楽器名より一段落とす */
  .instrumentation-table tbody td[data-label="パート"] {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.82rem;
    color: var(--color-text-muted);
  }

  /*
    休み（使う曲）は、持ち替えのあと。
    **同じ行に置くと重なる。** 持ち替えと同じ `grid-row: 3` にしていたため、
    「10曲のみ」と「持ち替え: B♭ クラリネット…」が
    文字どうし重なっていた（運営の指摘。2026-08-27）。
  */
  .instrumentation-table tbody td[data-label="使う曲"] {
    grid-column: 1 / -1;
    grid-row: 4;
    font-size: 0.8rem;
  }

  /*
    **必須・任意は、パート名の真横に置く。**

    行のいちばん上に置くと**楽器名の横**に並んでしまい、
    「クラリネットが必須」と読める。実際に必須か任意かは
    **パートごと**で、1st は必須・2nd は任意ということがある
    （運営の指摘。2026-08-27）。
  */
  .instrumentation-table tbody td[data-label="人数"] {
    grid-column: 2;
    grid-row: 2;
    max-width: 9.5rem;
    text-align: right;
  }

  /*
    **必須と任意は、太字と斜体では見分けられない。**
    ひと目で分かるよう、必須だけ**塗りつぶした札**にする。

    **強くするのは必須のほうだけ**（運営の指示。2026-08-27）。
    両方を札にすると、並んだときにどちらも同じ重さに見えて、
    結局1つずつ読むことになる。
    任意は文字のまま静かにしておくと、**塗ってあるものを拾えば必須**と読める。
  */
  .instrumentation-table .part-cell__count > strong {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: var(--color-primary, #204b52);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .instrumentation-table .part-cell__count > em {
    font-size: 0.78rem;
    font-style: normal;
    color: var(--color-text-muted);
  }

}

/*
  ページの端へ一気に移動するボタン。

  **長いページが多い。** 歌劇のように126曲ある作品では画面何十枚ぶんになり、
  上の検索へ戻るのも下の出典を見るのも、指でこすり続けることになっていた
  （運営の指示。2026-08-27）。

  **右端に浮かせる。** 本文の幅を削らないため、内容の上に重ねる。
  ただし本文の文字に重ならないよう、画面が狭いときは小さくする。
*/
.scroll-jump {
  position: fixed;
  right: 0.6rem;
  bottom: 1.2rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.scroll-jump__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface, #fff);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.scroll-jump__button:hover,
.scroll-jump__button:focus {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 700px) {
  .scroll-jump {
    right: 0.4rem;
    bottom: 0.8rem;
  }

  .scroll-jump__button {
    width: 2.1rem;
    height: 2.1rem;
  }
}

/*
  **押した先が見出しの真下に来ないようにする。**
  固定の帯があるページでは、飛んだ先が帯の下に隠れる。
*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

/*
  見出しと中身のまとまり。**狭い画面では畳んでおく。**

  作品ページは構成・調性・編成・楽譜と続き、歌劇のように126曲ある作品では
  画面何十枚ぶんになる。狭い画面では、まず何が載っているかを見出しで見せて、
  読みたいところだけ開くほうが辿りやすい（運営の指示。2026-08-27）。

  **広い画面では畳まない。** 横に余裕があるので、開く手間が増えるだけ。
*/
.page-section__heading > label {
  cursor: default;
}

@media (max-width: 700px) {
  .page-section__heading > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
  }

  /* 開けることが分かるように、印を出す */
  .page-section__heading > label::after {
    content: "＋";
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-muted);
  }

  .page-section__toggle:checked ~ .page-section__heading > label::after {
    content: "−";
  }

  .page-section__toggle:not(:checked) ~ .page-section__body {
    display: none;
  }
}

/*
  検索欄の置き場所。**中身は同じ、見た目だけ変える。**

  探していないときは本文に大きく出し（`--main`）、
  条件が付いたら左へ寄せる（`--sidebar`）。
  このサイトの主目的はサイト内検索なので、
  まだ何も探していない人には探す場所を最初に見せる（運営の指示。2026-08-27）。
*/
.listing-layout__results--wide {
  grid-column: 1 / -1;
}

.search-panel--main {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface, #fff);
}

.search-panel--main > h2 {
  margin-top: 0;
}

/* 本文に置くときは、代表的な欄を横に並べて場所を取らない */
@media (min-width: 701px) {
  .search-panel--main .filter-form__primary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
  }
}

/*
  **一覧は検索の下。**
  「検索しなかった人のための入口」なので、探す場所より先には出さない。
*/
.search-panel--main + .listing-keyword {
  margin-top: 0;
}

/*
  楽器一覧。**族ごとにまとめて見せる。**

  分類の中に60件を一列に流していたため、まとめ役（クラリネット）と
  実物（C クラリネット）と珍しい楽器（ティンホイッスル）が
  同じ重みで混ざり、どこを見ればよいのか分からなかった
  （運営の指摘。2026-08-27）。
*/
.instrument-families {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.instrument-family {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  align-items: baseline;
}

/* 族の名前は左に。行の頭が揃うと、上下を見比べられる */
.instrument-family__name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: right;
}

/* 族の名前が無い（1つで族になっている）ものは、値の側だけ使う */
.instrument-family > .instrument-list {
  grid-column: 2;
}

.instrument-family > .instrument-family__name + .instrument-list {
  grid-column: 2;
}

@media (max-width: 700px) {
  .instrument-family {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .instrument-family__name {
    text-align: left;
  }

  .instrument-family > .instrument-list,
  .instrument-family > .instrument-family__name + .instrument-list {
    grid-column: 1;
  }
}

/*
  音源のボタンの置き場所。**有る無しで行が凸凹しないようにする。**

  ボタンは文字より背が高く、無い行は幅も取らないため、
  一覧に並べると行の高さも右端の位置もばらついていた
  （運営の指摘。2026-08-27）。
  中身が無くても同じ大きさの枠を置き、高さは1行に収める。
*/
.work-video-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.2rem;
  vertical-align: middle;
}

.work-video-slot .youtube-inline__button {
  padding: 0;
  height: 1.2rem;
}

/* 押したときに開く再生窓は、枠の外へ出す（枠の中に押し込めない） */
.work-video-slot .youtube-inline__player {
  position: absolute;
}

/*
  区分ページ（ハブ）。**送り出すためのページ。**

  左に絞り込みを置いていたが外した（運営の指示。2026-08-28）。
  本文の先頭に検索欄があるのに左にも同じ入力欄が並び、
  しかも一覧ページの下位互換だった。
*/
.section-hub {
  max-width: 60rem;
}

/*
  主な行き先。**大きく出す。**
  小さな文字リンクだったため、下の編成のボタン群のほうが目立ち、
  主役が負けていた。
*/
.hub-entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.hub-entries > li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hub-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface, #fff);
  text-decoration: none;
}

.hub-entry:hover,
.hub-entry:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}

.hub-entry__label {
  font-size: 1.05rem;
  font-weight: 700;
}

.hub-entry__count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hub-entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.hub-entry__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* 「何で絞れるか」の印は、入口のすぐ下に横並びで */
.hub-entry__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-left: 0.2rem;
}

/*
  「曲が演奏された演奏会」の一覧。

  **左から 日付・曲・演奏会。**
  並べる順を決めておかないと、行ごとに目が泳ぐ（運営の指摘。2026-08-28）。
  日付を左端にそろえると、上下で年月日を読み比べられる。
*/
.performance-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.performance-list__item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.2rem 1rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-top: 1px solid var(--color-border);
}

.performance-list__item:first-child {
  border-top: 0;
}

.performance-list__date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.performance-list__works {
  font-weight: 600;
}

/* 年ごとのまとまり。古い年は畳んでおく */
.performance-year {
  margin-bottom: 0.6rem;
}

.performance-year__summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.35rem 0;
}

@media (max-width: 700px) {
  /* 3列は保てない。日付を1行目に、曲と演奏会をその下に積む */
  .performance-list__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
    padding: 0.5rem 0;
  }
}

/*
  これから行けるイベントの地図（`x-event-map`）。

  **地図は背景に徹する。** 主役はピンと円なので、陸地は薄い面と細い境界だけにする。
  外部のタイルを読まない自前のSVGなので、色は配色の変数に合わせられる。
*/
.event-map {
  margin: 1.5rem 0;
  /* 拡縮のボタンを図の右下に重ねるための基準（`event-map__zoom-buttons`） */
  position: relative;
}

.event-map__figure {
  display: block;
  width: 100%;
  height: auto;
  /* 押せる要素が並ぶので、指で触れる大きさを確保する */
  max-height: 70vh;
  margin: 0 auto;
  /*
    ⚠️ **狭い画面では文字を大きくする**（運営の指摘。2026-09-03）。

    > やっぱり、字が小さいと思います。

    SVGは `width: 100%` なので、見える大きさは `font-size × 画面幅 ÷ 枠の幅`。
    枠の幅に比例させてあるぶんが打ち消し合い、**どの地図も `11 × 画面幅 ÷ 560`** になる。
    390pxの携帯では**約7.7px**——読めない。

    画面の幅はサーバー側では分からないので、ここで倍率を掛ける。
  */
  /*
    ⚠️ **広い画面でも小さい**（運営の指摘。2026-09-03）。

    > このページはもうすでに字が大きくなっているのでしょうか？まだ、小さく見えますが…

    はじめは狭い画面だけ大きくしたが、**運営が見ていたのは広い画面**だった。
    柏市は12.1px指定で、700pxの器なら見た目13.8px——
    「700pxで12px以上」という前の決まりは満たしていても、地図の中の文字としては小さい。
    どの幅でも底上げする。
  */
  --map-text-scale: 1.3;
}

/*
  携帯。

  ⚠️ **1.45倍（約11px）でもまだ小さかった**（運営の指摘。2026-09-03）。
  余白を引いた実幅は358pxほどで、`11 × 358 ÷ 560 × 1.45 = 10.2px`。
  地図の中の文字は、本文より大きくないと読めない。2.0倍で約14pxにする。
*/
@media (max-width: 640px) {
  .event-map__figure {
    --map-text-scale: 2;
  }
}

/*
  地図の色は変数で持つ（明るい配色・暗い配色の両方で決める）。
  **海と陸の差が付いていないと、地図に見えない。**
  最初は海も陸も白に近く、背景と区別が付かなかった（運営の指摘。2026-08-28）。
*/
.event-map__sea {
  fill: var(--color-map-sea);
}

.event-map__land {
  fill: var(--color-map-land);
  stroke: var(--color-map-line);
  stroke-width: 0.7;
  stroke-linejoin: round;
}

/* いま見ている県は、はっきり塗り分ける（周りは位置関係が分かればよい） */
.event-map__land--here {
  fill: var(--color-map-here);
  stroke: var(--color-primary);
  stroke-width: 1.4;
}

/*
  件数の円。**点より濃い。** 白い数字を載せるため（上のトークンに測った値がある）。
  白いフチは、重なった印どうしを分けるためのもの。
*/
.event-map__count {
  fill: var(--color-map-count);
  stroke: var(--color-map-land);
  stroke-width: 1.2;
  transition: fill 0.15s ease;
}

/*
 * ⚠️ **地図の上のリンクを「掴んで持ち上げる」動きを止める**（運営の指摘。2026-09-07）。
 *
 * > 動かす前に押したときも、そのまま押しっぱなしにして動かしたらクリック扱いにはしてほしくない
 *
 * 印は `<a>` なので、ブラウザは押したまま動かすと
 * **リンクを掴んで運ぶ動き**を始める。そのあいだ地図は動かず、
 * 指を離した先で押したことになる。地図の上では、押すか動かすかの2つでよい。
 */
.event-map__figure a {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/*
 * ⚠️ **件数の多さを、大きさだけに任せない**（運営の指摘。2026-09-07）。
 *
 * > 丸の大きさが違うだけだとちょっと見分けがしづらいです。
 * > 明度と彩度を使い分けてもらうのがよさそうです。
 *
 * 半径は件数の**平方根**に比例させてあるので（面積を件数に比例させるため）、
 * 3件と9件の円は半径で1.7倍しか違わない。並んでいないと比べられなかった。
 *
 * ⚠️ **明度と彩度を一緒に動かす。** 彩度だけだと、白い数字が読めなくなる段が出た
 * （測ったら 2.23:1）。明度も動かし、**段によって数字の色も変える。**
 *
 * ⚠️ **薄い／濃いは「対象外のエリア」にも使っている**（`--dim`）。
 * こちらは彩度の幅を大きく取って見分ける。
 *
 * ⚠️ **4段だけ。** 連続で変えると隣どうしの差が小さすぎて気づけない。
 * どの段でも「数字が4.5:1」「地から3:1」「隣の段と1.25:1」を満たす
 * （`MapCountCirclesTellDensityApartTest` が測って見張る）。
 */
.event-map__count--step1 { fill: #a78444; }
.event-map__count--step2 { fill: #8c6721; }
.event-map__count--step3 { fill: #805300; }
.event-map__count--step4 { fill: #573800; }

/* いちばん薄い段だけ、数字を濃い色にする（白では読めない） */
.event-map__count--step1 + .event-map__count-label,
.event-map__count--step1 ~ .event-map__count-label {
  fill: #2b1f00;
}

:root[data-theme="dark"] .event-map__count--step1 { fill: #978259; }
:root[data-theme="dark"] .event-map__count--step2 { fill: #bf984a; }
:root[data-theme="dark"] .event-map__count--step3 { fill: #eeb94f; }
:root[data-theme="dark"] .event-map__count--step4 { fill: #fcda97; }

:root[data-theme="dark"] /* 暗い配色では地が暗いので、どの段でも数字は濃い色 */
.event-map__count--step1 ~ .event-map__count-label,
:root[data-theme="dark"] .event-map__count--step2 ~ .event-map__count-label,
:root[data-theme="dark"] .event-map__count--step3 ~ .event-map__count-label,
:root[data-theme="dark"] .event-map__count--step4 ~ .event-map__count-label {
  fill: #1e1500;
}


.event-map__figure a:hover .event-map__count,
.event-map__figure a:focus-visible .event-map__count,
.event-map__figure a:hover .event-map__dot,
.event-map__figure a:focus-visible .event-map__dot {
  fill: var(--color-text);
}

.event-map__count-label {
  /*
    ⚠️ **大きさはここで決めない**（運営の指摘。2026-09-03）。

    > 文字の大きさ変わっていないです。地図内のです。

    SVGの `font-size` **属性**よりCSSのほうが強いので、
    ここに書いてあるあいだ、枠の幅に比例させる仕組みは
    **ブラウザでは一度も効いていなかった**。
    大きさは図の側が `style` で書く（`event-map` の `$fontOf`）。
  */  fill: var(--color-map-count-text);
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  /*
    ⚠️ **数字を、下の地図から切り離す**（運営の指摘。2026-09-07）。

    > 丸が3桁だと白地図と数字が一緒になって見づらいです。

    3桁になると数字が丸からはみ出し、**陸の白と重なって読めなく**なっていた。
    丸を大きくすると場所を食うので、**数字のほうに縁を付ける**。
    `paint-order: stroke` で、縁を字の下に敷く（字が痩せない）。
  */
  paint-order: stroke;
  stroke: var(--color-map-count);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* 縁の色は、その丸の色に合わせる（丸からはみ出しても地続きに見える） */
.event-map__count--step1 ~ .event-map__count-label { stroke: #a78444; }
.event-map__count--step2 ~ .event-map__count-label { stroke: #8c6721; }
.event-map__count--step3 ~ .event-map__count-label { stroke: #805300; }
.event-map__count--step4 ~ .event-map__count-label { stroke: #573800; }
.event-map__count--tier1 ~ .event-map__count-label { stroke: #a78444; }
.event-map__count--tier2 ~ .event-map__count-label { stroke: #805300; }
.event-map__count--tier3 ~ .event-map__count-label { stroke: #573800; }

:root[data-theme="dark"] .event-map__count--step1 ~ .event-map__count-label { stroke: #978259; }
:root[data-theme="dark"] .event-map__count--step2 ~ .event-map__count-label { stroke: #bf984a; }
:root[data-theme="dark"] .event-map__count--step3 ~ .event-map__count-label { stroke: #eeb94f; }
:root[data-theme="dark"] .event-map__count--step4 ~ .event-map__count-label { stroke: #fcda97; }
:root[data-theme="dark"] .event-map__count--tier1 ~ .event-map__count-label { stroke: #978259; }
:root[data-theme="dark"] .event-map__count--tier2 ~ .event-map__count-label { stroke: #eeb94f; }
:root[data-theme="dark"] .event-map__count--tier3 ~ .event-map__count-label { stroke: #fcda97; }


/* 市区町村の固まり。円を小さくしたので、字も合わせる */
.event-map__count-label--cluster {
  font-size: 8.5px;
}

/*
  **指で押せる大きさだけを確保する、見えない円。**

  狭い画面では図が縮み、件数の少ない県の円やピンが数pxになる。
  見た目は変えずに当たり判定だけ広げるために重ねている（2026-08-28に追加）。

  **`fill` を書かないと黒く塗られる。** SVGの既定の塗りは黒なので、
  規則を書き忘れるとピンの下に黒い円が出る（運営の指摘。2026-08-30）。
  実際に書き忘れており、地図のあるページすべてでそう見えていた。

  `none` ではなく `transparent` にする。`none` は塗られていない扱いになり、
  **押しても反応しなくなる**（当たり判定を広げた意味が無くなる）。
*/
.event-map__hit {
  fill: transparent;
}

/*
  会場の印。**刺す形（ピン）をやめて、置く形（点）にした**（運営の指摘。2026-09-01）。

  ピンは先の尖った棒で、28本並ぶと針山に見える——
  「ぶっ刺さっている感じが気持ち悪い」という指摘。数の問題ではなく形の問題だった。
  **位置は動いていない。** ピンは先端が座標で、頭は15px上に浮いていたので、
  点にしたほうが見た目の重心と座標が一致する。

  輪郭は省略できない（上のトークンに理由と測った値がある）。
*/
.event-map__dot {
  fill: var(--color-map-pin);
  stroke: var(--color-map-pin-edge);
  stroke-width: 0.9;
}

/*
  番地まで分からないものは、**円でそのあたり**を示す。

  点線のピンにしていたが、**存在しないものや仮のものに見える**と指摘を受けた
  （運営の指摘。2026-08-28）。ピンは「ここ」と指す形なので、
  市の中心に置くと嘘になる。位置が点ではなく範囲なら、広がりのある円で出す。
*/
/*
  **場所がはっきりしていないものは、破線で囲む**（運営の指摘。2026-09-01）。

  実線だと「そこにある」と言い切った形になる。**境界そのものが曖昧**なので、
  切れた線でそう見せる。

  2026-08-28 に**点線のピン**を却下した経緯があるが、あれは別の話——
  ピンを点線にすると「存在しないもの・仮のもの」に見えた。
  ここで曖昧なのは**存在ではなく位置**なので、境界を切るのが合っている。
*/
.event-map__area {
  fill: color-mix(in srgb, var(--color-map-pin) 30%, transparent);
  stroke: var(--color-map-pin-edge);
  stroke-width: 1;
  stroke-dasharray: 2.5 2.5;
}

.event-map__figure a:hover .event-map__area,
.event-map__figure a:focus-visible .event-map__area {
  fill: color-mix(in srgb, var(--color-map-pin) 55%, transparent);
}

/*
  **公演が近い会場は、輪が浮かんで消える**（運営の指示。2026-09-01）。

  回す案（読み込み中の弧）は「ダサい」と却下されたので、その場で明滅させる。
  **動かすのは輪だけで、印の塗りには触れない**——塗りを書き換えると、
  席数の段（濃淡）が脈打つ間だけ読めなくなる。

  **速さだけで見分けない。** 2秒と3.5秒では差が小さく、
  たまたま同時に出た瞬間に区別がつかない。実線と点線、太さ、色でも分ける。
  境目は `Event::timingKey()`（本日・明日 / 2〜7日先）にしかない。
*/
@keyframes event-map-pulse-today {
  0% { opacity: 0; transform: scale(0.5); }
  8% { opacity: 0.92; }
  45%, 100% { opacity: 0; transform: scale(1.6); }
}

@keyframes event-map-pulse-soon {
  0% { opacity: 0; transform: scale(0.55); }
  5% { opacity: 0.88; }
  26%, 100% { opacity: 0; transform: scale(1.5); }
}

.event-map__pulse {
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.event-map__pulse--today {
  stroke: var(--color-map-pulse-today);
  stroke-width: 2;
  animation: event-map-pulse-today 2s ease-out infinite;
}

.event-map__pulse--soon {
  stroke: var(--color-map-pulse-soon);
  stroke-width: 1.5;
  /* pathLength=100 なので、輪の大きさが変わっても点線の見え方は同じ */
  stroke-dasharray: 4.5 6.5;
  animation: event-map-pulse-soon 3.5s ease-out infinite;
}

/*
  **動きを止めても見分けられるようにする。**
  速さだけで区別していると、止めた瞬間に区別が消える。
  実線の輪と点線の輪が、出たまま止まる。
*/
@media (prefers-reduced-motion: reduce) {
  .event-map__pulse {
    animation: none;
    opacity: 0.9;
    transform: none;
  }
}


/*
  地図に重ねる路線（`App\Support\RailwayMapSegments`）。

  **主役はホール。** 路線はその背景に徹する——
  彩度と濃さの両方を落とす。濃さだけ下げると全体が白っぽく薄れるだけで、
  色の主張は残る（運営と見比べて決めた。2026-09-02）。
*/
.event-map__rails {
  opacity: 0.45;
  filter: saturate(0.45);
}

/*
  **線が多すぎる県は、色をやめて灰色にする**（東京・大阪・愛知）。
  区間が400本を超えると、色を落としても読めない。
  それでも消さないのは、**線があること自体は伝わる**ため。
*/
.event-map__rails--crowded {
  opacity: 0.12;
  filter: grayscale(1);
}

/*
  **市区町村まで寄せたときは、さらに薄くする**（運営の判断。2026-09-02）。

  線は駅と駅を直線で結んだ近似で、**寄せるほど実物とのずれが見える**。
  「本物っぽくて誤解されそう」という懸念に対して、
  位置関係は伝わる濃さを残しつつ、線路の形としては読まれない濃さまで落とす。
*/
.event-map__rails--close {
  opacity: 0.18;
  filter: saturate(0.2);
}

/*
  ⚠️ **線路は角ばらない**（運営の要望。2026-09-02）。

  > 直角というのはほぼありえないので。。。

  区間は**駅ごとに別の線**として描いているので、駅のところが継ぎ目になる。
  `butt`（切りっぱなし）だと、角度が付いたところで**切れ目や角**が見える。
  `round` にすると継ぎ目が丸くなり、線がつながって見える。

  補正点を足した区間は1本の線になるので、**角そのもの**を
  `App\Support\RoundedPath` が弧にしている。
*/
.event-map__rail {
  stroke: var(--color-map-line);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}

/*
  **路線を消せるようにする**（運営の指示。2026-09-02）。
  JavaScriptは使わない——この地図はJSを一切使わない作りなので、
  切り替えだけ例外にはしない。チェックボックスとCSSで足りる。
*/
.event-map__switch {
  display: flex;
  align-items: center;
  /*
    **折り返す。** 施設の種類が増えると項目が5つ以上並ぶので、
    折り返さないと狭い画面で文字が潰れる（運営の指摘。2026-09-02）。
  */
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: flex-end;
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/*
  **狭い画面では、上から順に並べる**（運営の指摘。2026-09-02）。

  > SPにすると凡例が見づらいです。凡例を横並びではなくて、上から順に並べてもよいのでは？

  折り返すだけだと、行の途中で切れて**どれとどれが対か分からない**。
  縦に積めば、印と名前が必ず横に並ぶ。

  切り替えの幅は中身から決めた——項目は5つ（路線＋施設4種）で、
  日本語のラベルは1つ約120〜150px。**640pxを下回ると2行に割れる。**
*/
@media (max-width: 640px) {
  .event-map__switch {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/*
  ⚠️ **チェックと名前は、必ず横に並べる**（運営の指摘。2026-09-02）。

  > チェックボックスとは並べて表示したほうが良くないですか

  チェックとラベルを兄弟のまま並べていたので、
  縦に積んだときに**チェックだけが上の行に取り残された**。
  1組ずつ `<span>` で包み、包みのほうを縦に積む。
*/
.event-map__switch-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.event-map__switch-input:focus-visible + label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.event-map__switch label {
  cursor: pointer;
}

.event-map__switch-input:checked ~ label {
  color: var(--color-text);
  font-weight: 700;
}

/*
  チェックが入ったら線を消す。
  **`~` は同じ親の後ろの要素にしか効かない**ので、
  切り替えは図と同じ親（`.event-map`）の直下に置いてある。
*/
.event-map__switch:has(.event-map__switch-input:checked) ~ .event-map__figure .event-map__rails {
  display: none;
}

/*
  市区町村まで寄せた地図に出す駅（`App\Support\NearestStationPoints`）。

  **寄せると「ただの四角」になる**——同梱の輪郭に市区町村の境が無いので、
  船橋市と市川市の見分けが付かない（運営の指摘。2026-09-02）。
  目印を置くしかないので、**ホールの最寄り駅**だけを出す。

  **主役はホール。** 印は小さな輪だけにして、位置は名前で伝える。
*/
.event-map__station {
  fill: var(--color-map-land);
  stroke: var(--color-text-muted);
  stroke-width: 1.2;
  pointer-events: none;
}

.event-map__station-name {
  /*
    ⚠️ **大きさはここで決めない**（運営の指摘。2026-09-03）。

    > 文字の大きさ変わっていないです。地図内のです。

    SVGの `font-size` **属性**よりCSSのほうが強いので、
    ここに書いてあるあいだ、枠の幅に比例させる仕組みは
    **ブラウザでは一度も効いていなかった**。
    大きさは図の側が `style` で書く（`event-map` の `$fontOf`）。
  */
  font-weight: 600;
  fill: var(--color-text);
  /*
    **地図の上に載るので、地色で縁を取る。**
    線や陸の色に重なると読めなくなる。
  */
  stroke: var(--color-map-land);
  stroke-width: 3;
  paint-order: stroke fill;
  pointer-events: none;
}

/*
  駅から少しだけ出て消える線（運営の指示。2026-09-02）。

  **これは線路ではない。** 点がぽつんと置かれているだけでは「駅」だと分かりにくいので、
  **何かにつながっている**ことだけを示す。
  破線の間隔を広げていくことで、線を引かずに「消えていく」ように見せる
  （SVGのグラデーションを使うと、向きごとに定義が要る）。
*/
.event-map__station-stub {
  stroke: var(--color-text-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 2 3 3 1.5 4;
  opacity: 0.45;
  pointer-events: none;
}


/*
  枠のふちに置く「至 ◯◯」（運営の案。2026-09-02）。

  市区町村の地図に路線は引かない（引くと「線路はこう通っている」という嘘になる）。
  代わりに、**線路が出ていく向きのふちの手前だけ**を短く描いて行き先を書く。
  遠くから来る人が、どちら側から入ってくるのかを思い浮かべられるように。

  **駅名より控えめにする。** 主役は施設で、次が駅。行き先はその外側の手がかり。
*/
.event-map__direction-stub {
  stroke: var(--color-text-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1.5 4 3 3 5 2;
  opacity: 0.4;
  pointer-events: none;
}

.event-map__direction-name {
  /*
    ⚠️ **大きさはここで決めない**（運営の指摘。2026-09-03）。

    > 文字の大きさ変わっていないです。地図内のです。

    SVGの `font-size` **属性**よりCSSのほうが強いので、
    ここに書いてあるあいだ、枠の幅に比例させる仕組みは
    **ブラウザでは一度も効いていなかった**。
    大きさは図の側が `style` で書く（`event-map` の `$fontOf`）。
  */
  fill: var(--color-text-muted);
  /* 地図の上に載るので、地色で縁を取る */
  stroke: var(--color-map-land);
  stroke-width: 3;
  paint-order: stroke fill;
  pointer-events: none;
}

/*
  枠に写り込んでいる**隣の自治体の名前**（運営の案。2026-09-02）。

  > 隣の市も移ってしまっている場合、（自治体名）とすると、変でしょうか？

  **押せない。** ここは「どちらが何市か」を読むための下地なので、
  駅名（600・text色）よりさらに薄くして、主役の掲載を邪魔しない。
*/
.event-map__around-area {
  /*
    ⚠️ **大きさはここで決めない**（運営の指摘。2026-09-03）。

    > 文字の大きさ変わっていないです。地図内のです。

    SVGの `font-size` **属性**よりCSSのほうが強いので、
    ここに書いてあるあいだ、枠の幅に比例させる仕組みは
    **ブラウザでは一度も効いていなかった**。
    大きさは図の側が `style` で書く（`event-map` の `$fontOf`）。
  */
  fill: var(--color-text-muted);
  /*
    ⚠️ **薄くしすぎない**（2026-09-03に明度差を測って見つけた）。

    `opacity: 0.65` を掛けていたので、陸の色との明度差が**2.90**しかなかった
    （読める目安は4.5）。主役ではないので目立たせたくないが、
    **読めないなら置く意味が無い。**

    薄さは `--color-text-muted` の側で足りている（実測6.24）。
    ここでさらに薄くしない。
  */
  /* 地図の上に載るので、地色で縁を取る */
  stroke: var(--color-map-land);
  stroke-width: 3;
  paint-order: stroke fill;
  pointer-events: none;
}

/* ぶつかって離した名前には、どの駅のものか分かるように線を引く */
.event-map__station-leader {
  stroke: var(--color-text-muted);
  stroke-width: 0.7;
  opacity: 0.5;
  pointer-events: none;
}

/*
  縮尺の目盛り（運営の指示。2026-09-02）。

  寄り方が縮尺で変わる作りなので、**どれくらいの範囲を見ているのか**が
  画面から読み取れないと距離の感覚が持てない。
  置き場所は左下——右下は沖縄の別枠が入る。
*/
.event-map__scale {
  /* 目盛りは読むだけのもの。押せる印と取り違えないよう、当たり判定を持たせない */
  pointer-events: none;
}

.event-map__scale-plate {
  fill: color-mix(in srgb, var(--color-map-land) 82%, transparent);
}

.event-map__scale-bar,
.event-map__scale-tick {
  stroke: var(--color-text);
  /*
    ⚠️ **寄っても線の太さを保つ**（2026-09-04）。
    目盛りは図の中に描いてあるので、寄ると線まで一緒に太くなる。
    `--map-scale-stroke` は「画面1pxが図の何目盛りにあたるか」で、
    動かしたときに JavaScript が入れ直す（動かさなければ 1 のまま）。
  */
  stroke-width: calc(var(--map-scale-stroke, 1) * 1.4);
}

.event-map__scale-label {
  /*
    ⚠️ **大きさはここで決めない**（運営の指摘。2026-09-03）。

    > 文字の大きさ変わっていないです。地図内のです。

    SVGの `font-size` **属性**よりCSSのほうが強いので、
    ここに書いてあるあいだ、枠の幅に比例させる仕組みは
    **ブラウザでは一度も効いていなかった**。
    大きさは図の側が `style` で書く（`event-map` の `$fontOf`）。
  */
  font-weight: 700;
  fill: var(--color-text);
}

/*
  種類ごとに引っ込める（運営の指示。2026-09-02）。

  **消さずに薄くする。** 「そこに何かある」は伝わったまま、注意だけが移る
  （路線を消さずに灰色にしたのと同じ考え方）。
  薄さは路線の下地（0.12）と同じくらいまで落とす。

  **JavaScriptは使わない。** チェックボックスとCSSで足りる。
*/
/*
  施設のまとまりごとの色（運営の指示。2026-09-02）。

  **形だけでも読める。** 色は「速く読む」ための助けで、
  色だけに頼らないので、色の見え方が違う人にも伝わる。
  **段の濃淡は使わない**——エリアのページでは席数の意味を持たないので、
  1色に揃えたほうが種類の違いが読み取りやすい。
*/
.event-map__mark--perform { fill: var(--color-map-perform); stroke: var(--color-map-perform-edge); }
.event-map__mark--teach { fill: var(--color-map-teach); stroke: var(--color-map-teach-edge); }
/*
  音大・専門学校（2026-09-05）。**音楽教室と同じ色**——どちらも教わる場所で、
  違いは形（二重の四角）だけにしてある。`FacilityGroup` の説明を参照。
*/
.event-map__mark--academy { fill: var(--color-map-teach); stroke: var(--color-map-teach-edge); }
.event-map__mark--buy { fill: var(--color-map-buy); stroke: var(--color-map-buy-edge); }
.event-map__mark--repair { fill: var(--color-map-repair); stroke: var(--color-map-repair-edge); }
.event-map__mark--gather { fill: var(--color-map-gather); stroke: var(--color-map-gather-edge); }
.event-map__mark--other { fill: var(--color-map-other); stroke: var(--color-map-other-edge); }

/*
  **1つの場所が2つの顔を持つとき**（楽器店であり音楽教室でもある、など。実データで8件）。
  **印は増やさない**——2つ描くと場所の数を偽ることになる。
  形はそのまま、外側にもう1つの色の輪を足す。
*/
/*
  2つの顔を持つ場所の、**もう一方の顔**（運営の指摘。2026-09-02）。

  > 楽器店の印の意味が消えました。なんとか併存してほしいのですが。

  内側の形（塗り）と**違う形**を、外側に線で重ねる。
  ⚠️ **`fill: none` を後ろの `.event-map__mark--*` に上書きさせない**——
  種類の色は塗りで持っているので、順序を間違えると外形が塗り潰される。
*/
.event-map__mark-second {
  fill: none !important;
  stroke-width: 1.8;
  pointer-events: none;
}

/*
  ⚠️ **顔が3つ以上あるときは、形を順番に入れ替える**（運営の要望。2026-09-03）。

  > 重なっているものについては、同時にだせないのであれば、交互に表示するなど、できませんか？
  > ✗は残るんですね…なんか特別っぽいので、交互でいい気がしますけど…

  印に描けるのは形と輪の2つまで（7pxに3つ目は乗らない）。
  「直す＋教わる＋買う」の3つを持つ場所では、3つ目が地図から消えていた。

  はじめは1つ目を形のまま固定し、残りだけを輪で入れ替えたが、
  **並びの先頭（修理＝✗）だけが特別に見えた**。
  3つ以上あるときは、**どれも特別にしない**——形そのものを順番に入れ替える。

  ⚠️ **2つのときは動かさない。** 形＋輪で同時に見せられるので、動かす必要がない。
*/
@keyframes event-map-take-turns {
  /* 出ている時間より消えている時間を長くする（重なって見えないように） */
  0%, 26% { opacity: var(--map-turn-opacity, 1); }
  33%, 100% { opacity: 0; }
}

.event-map__dot--taking-turns {
  opacity: 0;
  animation: event-map-take-turns 3s linear infinite;
}

/*
 * ⚠️ **切り替わる図形も、対象外のエリアなら薄くする**（運営の指摘。2026-09-07）。
 *
 * > アニメーションで切り替わる図形は対象外のエリアでも濃い色のままです。
 *
 * 薄くするのは `opacity: 0.42`。ところが切り替わる図形は
 * **`opacity` をアニメーションで動かしている**ので、
 * アニメーションのほうが必ず勝ち、薄い指定は一度も効いていなかった。
 *
 * アニメーションの中で使う値を変数にして、薄いときはその変数を下げる。
 */
.event-map__dot--taking-turns.event-map__dot--dim {
  --map-turn-opacity: 0.42;
}

.event-map__figure a:hover .event-map__dot--taking-turns.event-map__dot--dim,
.event-map__figure a:focus-visible .event-map__dot--taking-turns.event-map__dot--dim {
  --map-turn-opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを止めている人には、最初の1つだけが出る。そこにも薄さを効かせる */
  .event-map__dot--taking-turns.event-map__dot--dim:first-of-type {
    opacity: 0.42;
  }
}

/*
  ⚠️ **動きを止めている人には、最初の1つを出したままにする。**
  動きが読めない人に情報が届かなくなるのを避ける
  （残りの顔は「i」の札に文字で書いてある）。
*/
@media (prefers-reduced-motion: reduce) {
  .event-map__dot--taking-turns {
    animation: none;
    opacity: 0;
  }

  .event-map__dot--taking-turns:first-of-type {
    opacity: 1;
  }
}

.event-map__ring--perform { stroke: var(--color-map-perform); }
.event-map__ring--teach { stroke: var(--color-map-teach); }
.event-map__ring--academy { stroke: var(--color-map-teach); }
.event-map__ring--buy { stroke: var(--color-map-buy); }
.event-map__ring--repair { stroke: var(--color-map-repair); }
.event-map__ring--gather { stroke: var(--color-map-gather); }
.event-map__ring--other { stroke: var(--color-map-other); }

.event-map__switch-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.event-map__switch-mark {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.event-map__switch:has(.event-map__switch-input--perform:checked) ~ .event-map__figure .event-map__mark--perform,
.event-map__switch:has(.event-map__switch-input--teach:checked) ~ .event-map__figure .event-map__mark--teach,
.event-map__switch:has(.event-map__switch-input--academy:checked) ~ .event-map__figure .event-map__mark--academy,
.event-map__switch:has(.event-map__switch-input--practice:checked) ~ .event-map__figure .event-map__mark--practice,
.event-map__switch:has(.event-map__switch-input--buy:checked) ~ .event-map__figure .event-map__mark--buy,
.event-map__switch:has(.event-map__switch-input--repair:checked) ~ .event-map__figure .event-map__mark--repair,
.event-map__switch:has(.event-map__switch-input--gather:checked) ~ .event-map__figure .event-map__mark--gather,
.event-map__switch:has(.event-map__switch-input--other:checked) ~ .event-map__figure .event-map__mark--other {
  opacity: 0.16;
  filter: grayscale(1);
}

/*
  自動車駅・バスターミナル（運営の要望。2026-09-05）。

  > 駅が路線の結節点の○なので、それとは違う形にしたいですが、
  > 目印であって目的地ではないので色はつけたくありません

  **バス停の標識の形**（塗らない○＋支柱）。**色は付けない**——
  地図の色は施設の種類で使い切っており、目印に色を割くと種類の読み取りが鈍る。
  文字の色より少し薄い灰にして、「読めるが前に出ない」濃さにする。
*/
.event-map__bus-stop line {
  stroke: var(--color-map-bus, #5c6470);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.event-map__bus-stop circle {
  fill: none;
  stroke: var(--color-map-bus, #5c6470);
  stroke-width: 1.1;
}

.event-map__bus-leader {
  stroke: var(--color-map-bus, #5c6470);
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
}

.event-map__bus-name {
  fill: var(--color-map-bus, #5c6470);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--color-map-land);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.event-map__rails-note,
.event-map__outline-note {
  display: block;
  margin-top: 0.25rem;
}

/* 名前が置けずに出せなかった駅の数（黙って落とさない。2026-09-02） */
.event-map__stations-note,
.event-map__outline-note {
  display: block;
  margin-top: 0.25rem;
}

.event-map__note {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}

/*
  **別枠の島は線を太くする。**
  小さいので、本図と同じ細さだと海に沈んで見える。
*/
.event-map__land--inset {
  stroke-width: 1.4;
}

/*
  沖縄の別枠。**下地と囲みを分ける。**
  1枚の四角を陸のあとに重ねていたため、島が塗り潰されて海だけに見えていた
  （運営の指摘。2026-08-28）。下地は陸より先、囲みの線は陸より後。
*/
.event-map__inset-fill {
  fill: var(--color-map-sea);
}

/*
  県の図の別枠は、**陸と印の上に重なる**（運営の指摘。2026-09-13）。

  > 重ねる場合は、重ねて上に下ほうのバックグラウンドカラーを
  > 何かしら半透過でいいので、つけてほしいです。ちょっと見づらい。

  全国の図の別枠は右下の海の上に置くので下地が要らなかった。
  県の図では下に地図があるので、**半透過の板**を敷いて「別の地図だ」と分かるようにする。
  透かすのは、下に何があるかを消してしまわないため（全部隠すと、隠れた県が読めなくなる）。
*/
.event-map__inset-fill--panel {
  fill: var(--color-surface, #fff);
  /*
    **半透明に戻した**（運営の指摘。2026-09-13）。

    > 下が完全にかくれてしまって、情報が見えないのが気になってしまいます。

    「変な線」の本当の原因は**描く順番**だった（下地を陸より先に敷いていたので、
    隣の県の輪郭が別枠の**上**に描かれていた）。順番を直した以上、
    透かしても線が乗ることはなく、**薄く透ける**だけになる。
    いったん不透明にしたが、それでは下の地図が読めなくなるので戻す。
  */
  fill-opacity: 0.82;
}

:root[data-theme="dark"] .event-map__inset-fill--panel {
  fill: var(--color-surface, #1b1b1b);
  fill-opacity: 0.85;
}


.event-map__inset {
  fill: none;
  stroke: var(--color-map-line);
  stroke-width: 1;
}

.event-map__inset-label {
  fill: var(--color-text-muted);
  font-size: 10px;
}

/*
  イベントカードの「行き方」。最寄り駅と駐車場。

  **1行に収める。** 駅を全部並べると一覧が縦に伸びて、
  何件あるのか掴めなくなる（いちばん近い1駅＋「ほか2駅」にしてある）。
*/
/*
  行けるかどうか（最寄り駅・駐車場）。
  **演奏会・ホール・教室・楽器店で同じ形にする**（運営の指摘。2026-08-31）。
  以前は演奏会だけがこの形で、ホールは別の書き方、他は出ていなかった。
*/
.access-line {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.access-line__station::before {
  content: '🚉';
  margin-right: 0.25rem;
}

.access-line__parking::before {
  content: '🅿';
  margin-right: 0.25rem;
}

/*
  「もしかして」。**検索結果に混ぜず、上に添える。**
  言い方が違うだけで1件も出ないことがあるが、勝手に混ぜると
  探しているものと違うものが紛れ込む。
*/
.did-you-mean {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.9375rem;
}

/*
  団員募集。

  **注意書きは目立たせる**（運営の指示。2026-08-31）。
  「パートは応相談」だけで検索に当たっている募集は、
  何も言わずに並べると「その楽器を募集している」と読まれる。
  探している人が問い合わせてから違うと分かるのは、双方にとって損。
*/
.recruiting-bands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.recruiting-bands__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .5rem;
}

.recruitment__caution {
  margin: .5rem 0 0;
  padding: .6rem .75rem;
  border-left: 4px solid var(--color-accent, #c2410c);
  background: color-mix(in srgb, var(--color-accent, #c2410c) 8%, transparent);
  border-radius: 0 4px 4px 0;
  font-size: .88rem;
  line-height: 1.6;
}

/*
  地図の凡例。

  **大きさに意味があると書かなければ、意味は伝わらない。**
  書かないまま点の大きさを変えると、読む人が勝手に理由を考える。
*/
.event-map__legend {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  font-size: .82rem;
}

/* 凡例も、狭い画面では上から順に（切り替えの並びと揃える） */
@media (max-width: 640px) {
  .event-map__legend {
    flex-direction: column;
    gap: .3rem;
  }
}

.event-map__legend-item {
  display: flex;
  /*
    ⚠️ **上に揃える**（2026-09-03）。
    説明が2行になったとき、真ん中に揃えると印が文の途中の高さに来る。
  */
  align-items: flex-start;
  gap: .3rem;
  /*
    **1つの項目の中で折り返さない。**
    「500〜999席」が印から離れて次の行に落ちると、
    どの印の説明なのか分からなくなる（項目の間では折り返してよい）。
  */
  white-space: nowrap;
}

/*
  ⚠️ **長い説明は折り返す**（運営の指摘。2026-09-03）。

  > SPだと見切れています。

  「2つの顔を持つ場所」の説明は1文あるので、
  折り返さない決まりのままだと**狭い画面で切れる**。
  短い項目（「500〜999席」など）は折り返さないままにする——
  印から離れて次の行に落ちると、どの印の説明か分からなくなるため。
*/
.event-map__legend-item--wrap {
  white-space: normal;
}

.event-map__legend-mark {
  width: 1.6rem;
  height: 1.6rem;
  /* 狭い画面で押し潰されると、大小の差が読み取れなくなる */
  flex: none;
  overflow: visible;
}

/*
  一覧カードの「これからの公演」（ホール）。

  **領域ごと囲む**（運営の指示。2026-09-01）。
  最初は公演名を1つずつ囲んだが、**目立たせたいのは領域のほう**だった。
  住所や客席数と同じ重みで流れていると、読み飛ばされる。

  色は**アクセント（金茶）**を使う。ページの主色は深い青緑なので、
  暖色を1か所だけ置くと、落ち着きを壊さずに目を引ける。
  ホールを探している人にとって「いま何が行われているか」は、
  そのホールの性格が分かる数少ない手がかり。
*/
.listing-card__events {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .6rem;
  margin: 0 0 .6rem;
  padding: .5rem .75rem;
  font-size: .85rem;
  background: var(--color-accent-tint);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
}

.listing-card__events-label {
  flex: none;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.listing-card__events-list {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  min-width: 0;
}

/*
  中は囲まない。**囲みの中に囲みを作ると、かえって読みにくい**
  （最初は公演名を1つずつ丸く囲んでいた）。
*/
.listing-card__events-list a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.listing-card__events-list a:hover,
.listing-card__events-list a:focus-visible {
  color: var(--color-primary);
}

/*
  ホールの大きさの段。

  **大きさだけでは読み取りにくい**（運営の指摘。2026-08-31）。
  濃さも変えて、離れて見ても差が分かるようにする。

  **色相は変えない。** 別の色にすると「種類が違うもの」に見え、
  大小の並びとして読めなくなる（赤いピンと青いピンが混ざった地図は、
  席数ではなく別の区分を表しているように見える）。
  同じ色のまま、明度と彩度だけを段で変える。

  小さい段は「499席以下」と「不明」の両方を含むので、
  **薄くしすぎない**——見落とすと「そこには何も無い」と読まれる。
*/
/*
 * ⚠️ **まとめた丸も、席数の段で色を変える**（運営の指摘。2026-09-07）。
 *
 * > 大田区はアプリコがあって1000席以上のホールがありますが、薄いです。
 *
 * 点は段ごとに色を変えていたのに、**まとまって丸になった瞬間に件数の色**へ変わっていた。
 * 段は `MapMarks::circleFor()` が**中でいちばん大きいもの**から決める
 * （平均にすると、席数が分からないものが引き下げる）。
 *
 * ⚠️ 丸には白い数字が載るので、点よりも濃くする
 * （`MapCountCirclesTellDensityApartTest` が測って見張る）。
 */
.event-map__count--tier3 { fill: #573800; }
.event-map__count--tier2 { fill: #805300; }
.event-map__count--tier1 { fill: #a78444; }

/* いちばん小さい段だけ、数字を濃い色にする（白では読めない） */
.event-map__count--tier1 ~ .event-map__count-label {
  fill: #2b1f00;
}

/* ⚠️ 暗い配色は**あとに**書く（先に書くと明るい配色に上書きされる） */
:root[data-theme="dark"] .event-map__count--tier3 { fill: #fcda97; }
:root[data-theme="dark"] .event-map__count--tier2 { fill: #eeb94f; }
:root[data-theme="dark"] .event-map__count--tier1 { fill: #978259; }

:root[data-theme="dark"] .event-map__count--tier1 ~ .event-map__count-label,
:root[data-theme="dark"] .event-map__count--tier2 ~ .event-map__count-label,
:root[data-theme="dark"] .event-map__count--tier3 ~ .event-map__count-label {
  fill: #1e1500;
}


.event-map__dot--tier3 {
  fill: color-mix(in srgb, var(--color-map-pin) 100%, #000 18%);
}

.event-map__dot--tier2 {
  fill: var(--color-map-pin);
}

.event-map__dot--tier1 {
  fill: color-mix(in srgb, var(--color-map-pin) 62%, #fff);
}

/*
  長期休止（大規模改修など）。

  **いま使えないことは、探す段階で分からないと意味がない。**
  ページの下に書いても、上から読んだ人は席数や住所を見て
  「使える」と思ったまま連絡してしまう。
*/
.tag--closed {
  background: color-mix(in srgb, var(--color-text-muted, #6b7280) 16%, transparent);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text-muted, #6b7280) 40%, transparent);
}

/*
  ページの上で断る一言（休止など）。
  **土台と修飾を対にして持つ。** 修飾だけ書くと、
  `notice--closed` 以外の知らせを足したときに何も効かない。
*/
.notice {
  padding: .75rem 1rem;
  border-radius: 4px;
  margin: 0 0 1rem;
  line-height: 1.7;
}

.notice--closed {
  border-left: 4px solid var(--color-accent, #c2410c);
  background: color-mix(in srgb, var(--color-accent, #c2410c) 8%, transparent);
  border-radius: 0 4px 4px 0;
}

.closure__subject {
  margin-right: .35rem;
}

/* 休止の知らせに添える「教えてください」の導線 */
.notice__action {
  display: inline-block;
  margin-top: .4rem;
  font-size: .88rem;
}

/*
  重なった点を離したときに引く、元の位置への線。

  **位置を動かすのは地図としては嘘**なので、
  線があれば「本当はここ」と分かる。細く薄く引く——
  線が目立つと、点より線を追ってしまう。
*/
.event-map__leader {
  stroke: var(--color-map-pin-edge);
  stroke-width: 0.6;
  opacity: 0.3;
  pointer-events: none;
}

/*
  閉館したホール。

  **一覧に混ぜない。** 使えるホールと同じ並びに入れると
  「そこで演奏会を組める」と読まれる（2026-08-28の判断）。
  **辿れなくもしない**——演奏会の記録から会場として参照される
  （運営の指摘。2026-09-01）。畳んでおいて、探している人が自分で開く。
*/
.closed-halls {
  margin: 1rem 0 0;
  padding: .5rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.closed-halls > summary {
  cursor: pointer;
  font-size: .9rem;
  color: var(--color-text-muted);
}

.closed-halls__list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.closed-halls__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
}

/*
  客席数で絞る欄（ホール一覧）。

  **ホールを探す人は「何人入るか」から入る**（運営の指示。2026-09-01）。
  地名より先に決まっていることも多い。
*/
/*
  客席数の絞り込み。**左カラムに置く**（絞り込みは左に集める。2026-09-01）。
  送信ボタンは共通パーツ（`<x-filter-form>`）が出すので、ここでは数字の並びだけを整える。
*/
.seat-filter {
  font-size: .9rem;
}

.seat-filter__range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .6rem;
}

.seat-filter input[type="number"] {
  /*
    4桁が入れば足りる。広いと「もっと細かく指定するのか」と迷わせる。

    **左カラムに置いたので、幅は残りに合わせて縮む**（運営の指摘。2026-09-01）。
    絞り込みは左に集める決まりなのに、席数だけ本文側にあった。
    固定幅のままだと、狭い左カラムで「〜」や単位が折り返して読めなくなる。
  */
  width: 6rem;
  min-width: 0;
  flex: 1 1 4.5rem;
  padding: .3rem .5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.seat-filter__unit {
  color: var(--color-text-muted);
}

/*
  長期休止（改修などで、いま使えないホール）。

  **閉館とは分けて見せる**（運営の指示。2026-09-01）。
  閉館は戻ってこないが、**休館は戻ってくる**。
  同じ斜線の見た目にすると「もう無くなった」と読まれ、
  再開を待っている人が候補から外してしまう。

  閉館 … 斜線を敷いて沈める（`.listing-card--dissolved`）
  休館 … 色を変えて目を引かせる。いま使えないが、いずれ戻る

  **`.listing-card` より後ろに置く。** 同じ強さの指定なので、
  前に置くと背景に上書きされて何も変わらない。
*/
.listing-card--closed {
  background-color: color-mix(in srgb, var(--color-accent, #c2410c) 5%, var(--color-bg));
  border-color: color-mix(in srgb, var(--color-accent, #c2410c) 35%, var(--color-border));
  border-left: 5px solid var(--color-accent, #c2410c);
}

/*
  楽器のページから「その楽器が主役の演奏会」への導線（2026-09-01）。
  探し方があること自体に気づいてもらう場所なので、本文より少し立たせる。
*/
.instrument-events {
  margin: 0 0 .25rem;
  padding: .7rem .9rem;
  background-color: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: 4px;
}

.instrument-events .text-muted {
  margin-left: .6rem;
  font-size: .9rem;
}


/* ---------- 補正点のプレビュー（管理画面） ---------- */
/*
  **どこを指しているのかを、その場で見せる**（運営の要望。2026-09-02）。

  ⚠️ 見えないまま足すと、逆に悪くする。
  館山の補正点は**すでに陸の中**にあり、そこへ海を食い込ませていた
  （線が海に出る点が 8/41 → 15/41 に増えた）。数値だけを見ていても気付けない。

  **青が「いまの形」、赤が「足したあとの形」。** 重ねて出すので差だけが見える。
*/
/*
  ⚠️ **地図と同じ色の変数を使う**（2026-09-02）。
  最初は青系の生の値を書いたので、**暗い配色でそこだけ明るいまま**になった
  （`StylesheetWorksInDarkModeTest` が捕まえた）。
*/
.map-correction-preview svg {
  width: 100%;
  height: auto;
  background: var(--color-map-sea);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.map-correction-preview p {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/*
  ⚠️ **青と赤が見分けられなかった**（運営の指摘。2026-09-02）。

  > 確認画面の青と赤の色分けは見えません。

  「いまの形」を**地図の陸と同じ色**にしたので、下地に溶けて見えなかった。
  しかも **`<polyline>` に `fill` を掛けていた**ので、
  路線の図では**線が面に塗りつぶされて**いた。

  いまの形＝青（`--color-primary`）、直したあと＝赤（`--color-danger`）。
  どちらも配色の変数なので、暗い配色でも見分けられる。
*/
.map-correction-preview .preview__before {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
}

/* 輪郭（閉じた形）だけは、薄く塗って「陸」だと分かるようにする */
.map-correction-preview path.preview__before {
  fill: var(--color-primary-tint);
}

/* 直したあとの形。**塗らない**——下の形が透けないと差が見えない */
.map-correction-preview .preview__after {
  fill: none;
  stroke: var(--color-danger);
  stroke-width: 2.5;
  stroke-dasharray: 7 4;
}

.map-correction-preview .preview__point {
  fill: var(--color-danger);
  stroke: var(--color-map-land);
  stroke-width: 1.5;
}

.map-correction-preview .preview__station {
  fill: var(--color-text);
  stroke: var(--color-map-land);
  stroke-width: 1.5;
}

.map-correction-preview .preview__label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--color-text);
  stroke: var(--color-map-land);
  stroke-width: 3;
  paint-order: stroke fill;
}


/* ---------- 隣の市区町村へ移る道 ---------- */
/*
  **隣接自治体の名前を出して、押すとそのページへ移る**（運営の要望。2026-09-02）。

  ⚠️ **地図の上に重ねない**（運営の指摘）。
  はじめは地図のふちに浮かせたが、**配置がぐちゃぐちゃ**になり、
  左下では**縮尺の目盛りとぶつかった**。

  ⚠️ そして **地図が無い市区町村では矢印ごと消えていた**——
  掲載が0件の市（八街市）は地図が出ないので、隣へ移る道がどこにも無かった。
  **地図とは別に、地図の外へ置く。**

  **無い方角は出さない**（鴨川市の南は海）。判定は `App\Support\NeighbourAreas`。
*/
.neighbour-areas {
  margin: 1rem 0 0;
}

.neighbour-areas__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.neighbour-areas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.neighbour-areas__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.neighbour-areas__link:hover,
.neighbour-areas__link:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/*
  **掲載が無いことを先に伝える**（運営の懸念。2026-09-02）。
  押してから空だと分かるのでは、押し損になる。
  **消さない**——地図をたどって隣へ移ること自体には意味がある。
*/
.neighbour-areas__link--empty {
  color: var(--color-text-muted);
  border-style: dashed;
}

.neighbour-areas__arrow {
  color: var(--color-text-muted);
}

.neighbour-areas__name {
  /* 長い名前（「印旛郡酒々井町」など）で札が伸びすぎないように */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11em;
  white-space: nowrap;
}

.neighbour-areas__count {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}


/* ---------- 狭い画面では、小さすぎる文字を上げる ---------- */
/*
  **SPで文字が小さい**（運営の指摘。2026-09-02）。

  本文は16pxだが、札・件数・補足のたぐいが **0.65〜0.78rem（10.4〜12.5px）** で、
  手元の画面では読みづらい。

  **下限を1つに決める。** 0.85rem（13.6px）を切らないようにする——
  種類ごとに少しずつ変えると、どれがどの大きさか誰も分からなくなる。
  広い画面はそのまま（並べて見るので、小さくても文脈で読める）。

  ⚠️ `.japan-map__tile` だけは対象外。**枡の大きさが決まっている**ので、
  文字を上げると枠からあふれる。
*/
@media (max-width: 640px) {
  .account-badge__detail-title,
  .account-badge__role,
  .account-badge__tag,
  .applied-conditions__label,
  .area-accordion__count,
  .attribute-table__mark,
  .brand__sub,
  /* ⚠️ 読みも同じ下限にする（2026-09-28。SPで10.4pxは読めない） */
  .brand__reading,
  .column-card__date,
  .data-status__item,
  .event-news__year,
  .filter-accordion__count,
  .filter-tree__chosen,
  .form-field .hint,
  .group-filter__form legend,
  .help__mark,
  .info-gap,
  .instrumentation-table .part-cell__count > em,
  .instrumentation-table .part-cell__count > strong,
  .listing-card__label,
  .movement-tree__form,
  .part-variants__count,
  .program__section-type,
  .scope__hint,
  .site-nav__user-note,
  .tag,
  .tag--filter {
    font-size: 0.85rem;
  }
}


/*
  **携帯では、指を乗せられない**（運営の要望。2026-09-03）。

  > hoverの代わりのSPを検討してください。
  > ぶつからないように◯のすぐ上下左右に？をおいて、タップしたら見える消える。

  印の右上の「？」を押すと説明が出る。**JavaScriptは使わない**——
  `tabindex` を付けた `<g>` はタップで焦点が当たるので `:focus` で出せる。
  他を押せば焦点が外れて消える。

  広い画面では指を乗せれば `<title>` が読めるので、出さない。
*/
.event-map__hint {
  display: none;
  cursor: pointer;
}

@media (max-width: 640px) {
  .event-map__hint {
    display: inline;
  }
}

/*
  ⚠️ **「？」は半透過にする**（運営の指摘。2026-09-03）。

  > ？は半透過でもいいと思います。

  主役は掲載の印で、「？」はその補助。地の色でべた塗りすると
  **地図の上に白い粒が並ぶ**。透かせば、下の陸や線が見えたまま置ける。

  文字と輪郭は透かさない——**薄いと読めない**（明度差は測ってある）。
*/
.event-map__hint-dot {
  fill: var(--color-map-land);
  fill-opacity: 0.55;
  stroke: var(--color-text-muted);
  stroke-width: 0.8;
}

.event-map__hint-mark {
  fill: var(--color-text-muted);
  font-weight: 700;
  pointer-events: none;
}

/*
  説明の札。**押すまでは出さない。**

  ⚠️ **`:focus` に頼らない**（2026-09-03）。
  iOSでは押しただけでは焦点が当たらないことがあるので、
  URLの `:target` で開く。「✕」は地図そのものへ戻るので、押せば閉じる。
*/
.event-map__hint-card {
  visibility: hidden;
}

/*
  ⚠️ **JavaScriptが動くときは `is-open` で開ける**（運営の指摘。2026-09-03）。

  > ？ボタンを押すと、下にずれるのは仕様ですか？

  `:target` はブラウザが**札を画面内に入れようとして画面を動かす**。
  動くときは押した瞬間に止めて、印だけで開け閉めする。
  `:target` は残す——JavaScriptを切っていても開ける道が要る。
*/
.event-map__hint-card:target,
.event-map__hint-card.is-open {
  visibility: visible;
}

/*
  ⚠️ **存在しない変数を書くと、黒く塗り潰される**（運営の指摘。2026-09-03）。

  > ？はまだ実装中ですか？今、真っ黒塗りつぶしになっています。

  `--color-surface` はこのサイトに無い（`--color-bg` / `--color-bg-alt`）。
  SVGの `fill` は値が読めないと**初期値の黒**になるので、札が真っ黒になった。
*/
.event-map__hint-card rect {
  fill: var(--color-bg);
  stroke: var(--color-border);
  stroke-width: 0.8;
}

.event-map__hint-card text {
  fill: var(--color-text);
}

/* 閉じる印 */
.event-map__hint-close circle {
  fill: var(--color-bg-alt);
  stroke: var(--color-border);
  stroke-width: 0.8;
}

.event-map__hint-close text {
  fill: var(--color-text-muted);
  pointer-events: none;
}

/*
  練習の印（2026-09-04 運営の要望）。

  > 楽器の制限がない＞一部あり＞不明で表示を変えたいです。
  > 制限がないははっきりと、不明はぼんやりさせたり、？マークを出して、
  > タップすると情報がでる。一部ありは！マークにして情報がでるとか。

  それまでは3つとも `.tag` の同じ見た目で、**文字を読まないと区別できなかった。**

  ⚠️ **重さで差をつける。** 色の違いだけにすると、色の見え方が違う人に伝わらない
  （印の中の形と、塗り・破線の違いでも分かるようにしてある）。
   - 制限なし … 塗った丸＋濃い面。押せない（言い切れているので押す意味がない）
   - 一部あり … 塗った丸＋「！」。押すと使えない楽器が出る
   - 不明     … 破線の丸＋「？」。面を塗らず、線も文字も弱くする
*/
.practice-mark {
  display: inline-block;
  position: relative;
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 0 0.3rem 0.3rem 0;
  vertical-align: middle;
}

/* 札そのもの。開かない札（span）と、開く札（summary）で同じ見た目にする */
span.practice-mark,
.practice-mark__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.18rem 0.62rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.practice-mark__badge {
  cursor: pointer;
  /* details の三角を消す（印を左に置くので、目印が2つ並ぶと読みにくい） */
  list-style: none;
}

.practice-mark__badge::-webkit-details-marker {
  display: none;
}

.practice-mark__badge:hover,
.practice-mark__badge:focus-visible {
  border-color: currentColor;
}

.practice-mark__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* 制限なし … **はっきり**。主色で塗り、文字も濃くする */
span.practice-mark--free {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* 一部あり … 注意の色（金）。押せることが分かるよう、面は塗る */
.practice-mark--partial .practice-mark__badge {
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
}

/*
  不明 … **ぼんやり**。面を塗らず、細い線で囲むだけにする。
  ⚠️ 消してはいけない——並びの中で書いていないものは「無い」と読まれるので、
  出さないと「制限なし」と受け取られる。
*/
.practice-mark--unknown .practice-mark__badge {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* 練習できないと確かめた部屋 */
.practice-mark--not-allowed .practice-mark__badge,
span.practice-mark--not-allowed {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}

/* 押したときに出る説明 */
.practice-mark__body {
  position: absolute;
  z-index: 5;
  left: 0;
  top: calc(100% + 0.3rem);
  width: min(23rem, 78vw);
  padding: 0.6rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.55rem;
  box-shadow: 0 6px 18px rgba(30, 37, 39, 0.1);
  color: var(--color-text);
  font-size: 0.78rem;
  line-height: 1.75;
  text-align: left;
  font-weight: 400;
}

.practice-mark__body p {
  margin: 0;
}

.practice-mark__body p + p {
  margin-top: 0.4rem;
}

.practice-mark__detail {
  color: var(--color-text-muted);
}

/*
  一覧のカードに出すぶんは小さく。
  ⚠️ **カードの中では浮かせない。** カードは幅が狭く、
  横にはみ出したぶんが切れて読めなくなるので、押したら下へ押し出す。
*/
.practice-mark--small {
  font-size: 0.7rem;
}

.practice-mark--small .practice-mark__body {
  position: static;
  width: auto;
  margin-top: 0.35rem;
  box-shadow: none;
}

/*
  札の文字。印と横並びになるので、**縮められるようにしておく**
  （`min-width: auto` のままだと、狭い画面で札がカードからはみ出す）。
*/
.practice-mark__text {
  min-width: 0;
}

/* 押したときの1行目＝その印が何を意味するか（2行目は部屋ごとの事情） */
.practice-mark__meaning {
  color: var(--color-text);
}

/*
  駅の出口（2026-09-04 運営の要望）。

  > 門型のマークで駅に属するので、色はなくていいと思います。小さくていいです。

  **色を持たせない。** 出口は駅の付属物で、それ自体が探す対象ではない。
  地図の線と同じ中立の色にして、駅の点（金）と施設の印（種類の色）の邪魔をしない。
*/
.event-map__exit {
  fill: none;
  stroke: var(--color-map-line);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* 出口名。**駅名より小さく、薄く**——駅を探す手がかりであって、行き先ではない */
.event-map__exit-name {
  fill: var(--color-text-muted);
  paint-order: stroke;
  stroke: var(--color-map-land);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

/*
  地図の広さの切り替え（2026-09-04 運営の要望）。

  > 市区町村のデータなどは、隣接する自治体が見える程度までは拡大できてもいい

  **凡例と注記のあいだに置く。** 図のすぐ下は凡例（印の意味）で、
  そのあとに「見え方を変える操作」、最後に注記（読み方の断り書き）という順にする。
*/
.event-map__zoom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
}

.event-map__zoom-label {
  color: var(--color-text-muted);
}

.event-map__zoom-label::after {
  content: '：';
}

/* いま選んでいる広さ。**押せないものは、押せない見た目にする** */
.event-map__zoom-current {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.event-map__zoom-link {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
}

.event-map__zoom-link:hover,
.event-map__zoom-link:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/*
  二本指・ホイールで動かせる地図（2026-09-04 運営の要望）。

  ⚠️ **`is-movable` は JavaScript が付ける。**
  動かせないのに「動かせる見た目」にしない。
*/
.event-map__figure.is-movable {
  /*
    ⚠️ **1本指のスクロールは奪わない。**
    地図は画面の途中にあるので、1本指まで受け取ると
    そこから先へスクロールできなくなる。二本指だけを地図が受け取る。
  */
  touch-action: pan-x pan-y;
  cursor: grab;
}

.event-map__figure.is-movable:active {
  cursor: grabbing;
}

/* 動かしている最中は、段階のリンクとの食い違いが出るので控えめに知らせる */
.event-map__figure.is-zoomed {
  outline: 2px solid var(--color-primary-tint);
  outline-offset: -2px;
}

.event-map__zoom-hint {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

/*
  地図を全画面で開く（2026-09-04 運営の判断。よくある地図の「A」の形）。

  ⚠️ **ページの中身は何も変えない。** 一覧はそのままで、地図だけを大きく開き、
  閉じれば元に戻る。こうしておけば
  「地図に出ているのに一覧に無い」というズレが**そもそも起きない**。

  ⚠️ **ボタンは JavaScript が作る**（`event-map__expand` / `event-map__close`）。
  動かない環境で「開く」と書いてあってはいけないため、CSSだけが先に居る形にしてある。
*/
.event-map.is-fullscreen {
  position: fixed;
  inset: 0;
  /* 既存でいちばん高いのが 100（ヘッダー）。その上に出す */
  z-index: 110;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  overflow: hidden;
}

/*
  ⚠️ **図の大きさを、画面に固定する**（運営の報告。2026-09-05）。

  > 画面の大きさが変わると、いままで地図の中にあってスクロールできていたのに、
  > 再描画されると地図の範囲外にあって、おかしな操作につながります

  前は「残りの高さを図に渡す」形だったので、
  **凡例や注記の行数が変わるたびに図の大きさが変わって**いた。
  取り直すと注記の文言も変わるので、指を置いていた場所が図の外になる。

  全画面のあいだは**図が画面そのもの**。凡例や注記は上に浮かせる。
*/
.event-map.is-fullscreen .event-map__figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
}

/* 凡例・注記・切り替えは、図の上に浮かせる（図の大きさに影響させない） */
.event-map.is-fullscreen > *:not(.event-map__figure):not(.event-map__close):not(.event-map__zoom-buttons) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.4rem 0.75rem;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  font-size: 0.72rem;
  max-height: 30vh;
  overflow: auto;
}

/* 後ろのページが動くと、閉じたときに読んでいた場所を見失う */
body.has-open-map {
  overflow: hidden;
}

.event-map__expand {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary-dark);
  font-size: 0.72rem;
  cursor: pointer;
}

.event-map__expand:hover,
.event-map__expand:focus-visible {
  border-color: var(--color-primary);
}

/* 閉じるボタンは、開いているときだけ出す */
.event-map__close {
  display: none;
}

/*
  ⚠️ **地図の上に浮かせて、見つけやすくする**（運営の指摘。2026-09-05）。

  > 全画面表示の閉じるボタンが、わかりにくいです。
  > もう少し地図に近づけて視認性を上げたほうがいい

  前は図の上に押し出す形だったので、**図から離れていて目に入らなかった**。
  右上に浮かせて、影と枠で地図から浮かせる（＋／−は右下なのでぶつからない）。
*/
.event-map.is-fullscreen .event-map__close {
  display: inline-block;
  position: fixed;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(30, 37, 39, 0.18);
}

.event-map.is-fullscreen .event-map__close:hover,
.event-map.is-fullscreen .event-map__close:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/*
  全画面のときの寄る・引く・全体（2026-09-04 運営の指摘「やや操作感が悪い」）。

  **二本指もホイールも使えない場面がある**（片手・トラックパッドの設定・キーボード）。
  押して寄せる手を残す。

  ⚠️ **左下は縮尺の場所**（`event-map__scale`）。ぶつからないよう右下に置く。
*/
/*
 * ⚠️ **ページの中でも、押して拡縮できるようにする**（運営の指摘。2026-09-07）。
 *
 * > マウスだと地図拡大できないので、拡縮のGoogle Mapの右下にあるやつをつけてほしいです。
 *
 * ボタンは前から作られていたが、`display: none` で**全画面のときしか出ていなかった**。
 * ページの中では、素のホイールは**ページを動かす**ためのものなので
 * （2026-09-05「動かそうと思って縮尺が縮むことがあります」）、
 * マウスだけの人には拡大する手が1つも無かった。
 *
 * ⚠️ **地図の右下に重ねる**（Google Map と同じ場所）。
 * 全画面では画面の右下（`fixed`）、ページの中では図の右下（`absolute`）。
 */
.event-map__zoom-buttons {
  display: flex;
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  flex-direction: column;
  gap: 0.35rem;
}

.event-map.is-fullscreen .event-map__zoom-buttons {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

.event-map__zoom-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(30, 37, 39, 0.12);
}

.event-map__zoom-button:hover,
.event-map__zoom-button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.event-map__zoom-button--reset {
  width: auto;
  height: auto;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

/* 映る範囲を取り直しているあいだ（2026-09-05）。**画面は消さない**——待つあいだも地図は読める */
.event-map.is-loading .event-map__figure {
  opacity: 0.75;
  transition: opacity 0.15s ease-out;
}

/*
  このページの掲載ではない印（2026-09-05 運営の案）。

  > 見えているけど該当エリアではない場合は、グレーで出すとかでしょうか

  全画面で範囲を広げると、隣の市のものまで入ってくる。
  **消さずに薄くする**——消すと「そのあたりに何があるか」が読めなくなる。
  ⚠️ **押せることは変えない。** 薄いだけで、行き先はある。
*/
.event-map__dot--dim {
  opacity: 0.42;
}

.event-map__figure a:hover .event-map__dot--dim,
.event-map__figure a:focus-visible .event-map__dot--dim {
  opacity: 1;
}

/*
  まとめた丸のうち、このページの分でないもの（2026-09-05 運営の指摘）。

  > 白井市をみていたときに縮小すると、どこが白井市だったのかわからなくなってしまいます

  点には濃淡があったが、**丸は素通りしていた**。
  縮めて丸になった瞬間、見ていた市と隣の市が同じ顔になっていた。
*/
.event-map__count--dim {
  opacity: 0.4;
}

.event-map__figure a:hover .event-map__count--dim,
.event-map__figure a:focus-visible .event-map__count--dim {
  opacity: 1;
}

/* 見ていた場所の丸にだけ添える名前。**全部に添えると文字で埋まる** */
.event-map__count-home {
  fill: var(--color-text);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--color-map-land);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

/*
  全画面のあいだは、1本指も地図が受け取る（2026-09-05 運営の報告）。

  > SPモードで動かすにはどうしたらいいですか？
  > 縮小拡大はできるけど動かせません

  ページの中では1本指をスクロールに残しているので、
  **スマートフォンには動かす手立てがまったく無かった。**
  全画面では後ろのページを止めてあるので、受け取ってよい。
*/
.event-map.is-fullscreen .event-map__figure.is-movable {
  touch-action: none;
}

/* 出口の名前を、実際の場所へ結ぶ線（2026-09-05） */
.event-map__exit-leader {
  stroke: var(--color-map-line);
  stroke-width: 0.7;
  stroke-dasharray: 2 1.6;
  fill: none;
}

/*
  使えない楽器はあるが、どれかは決まっていない（2026-09-05 運営の要望）。

  > 音が大きい場合お断りさせていただく。要相談みたいなケースもありそうです

  「！」だが**破線**にする。制限があることは分かっているので「？」ではなく、
  中身は決まっていないので、楽器まで確かめた「一部あり」と同じ重さにはしない。
*/
.practice-mark--ask .practice-mark__badge {
  background: transparent;
  color: var(--color-accent-dark);
  border-color: var(--color-accent);
}

/*
  練習できる場所（ホールは無いが練習室がある。2026-09-05 運営の指摘）。

  > ホールと練習だけできる場所が同じ印なのがどうしても違和感あります。
  > ホールを探しているのに、練習場所をクリックしてがっかりする、怒る人がいると思います

  形は**二重丸**（ホールと同じ丸の仲間だが、中を抜いて見分ける）。
  色もホール（金）と分けて、遠目にも取り違えないようにする。
*/
.event-map__mark--practice { fill: var(--color-map-practice); stroke: var(--color-map-practice-edge); }
.event-map__ring--practice { stroke: var(--color-map-practice); }
/*
  ⚠️ 「練習できる場所を薄く」は**効いていなかった**（2026-09-05に気づいた）。
  切り替えの入力は `.event-map__switch` の**中**にあるので、
  入力から `~ .event-map__figure` では届かない。
  他の6つと同じく、上の `:has()` の並びに入れてある。
*/

/*
  「見たまま編集」（運営の要望。2026-09-06）。

  > 本当の理想はこの画面を編集して反映する。ユーザーはここを編集できないと触りづらいです。

  ⚠️ **運営にしか出ない。** 帯も鉛筆も `@auth('admin')` と `?edit=1` の中にある。
*/
.inline-edit__banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #16a34a;
  color: #fff;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}

/* 預かるだけのときは、色を変える（その場で反映される状態と混ぜない） */
.inline-edit__banner--proposal {
  background: #b45309;
}

.inline-edit__banner a {
  color: #fff;
  text-decoration: underline;
}

/* 鉛筆のボタンと、その場の入力欄（`?edit=1` のときだけ画面に出る） */
.detail-row__edit {
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 0.85em;
  line-height: 1.6;
}

.detail-row__edit:hover {
  /* 既にある「うっすら敷く色」を使う（新しい変数を増やさない） */
  background: var(--color-bg-alt);
}

/*
  公開設定の切り替え（`?edit=1` のときだけ出る）。
  ⚠️ **非公開のほうを目立たせる**——「入れたのに出ない」に気づけるように。
*/
.detail-row__visibility {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid #b45309;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  cursor: pointer;
  font-size: 0.7rem;
}

.detail-row__visibility.is-public {
  border-color: var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
}

/* 中身のほう。**鉛筆と並べるためだけの入れ物**（見た目は変えない） */
.detail-row__value {
  display: inline;
}

.inline-edit__form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.3rem;
}

.inline-edit__form input,
.inline-edit__form select {
  flex: 1 1 auto;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
}

/*
  貸館情報。**箇条で書かれるので改行を残す**（2026-09-07）。
  「予約は6か月前から」「営利利用不可」を1行に潰すと読めなくなる。
*/
.rental-info {
  white-space: pre-line;
}

/* 複数行で書く欄（貸館情報）。1行の欄と並ぶので、上端をそろえる */
.inline-edit__form:has(.inline-edit__multiline) {
  align-items: flex-start;
}

.inline-edit__form textarea.inline-edit__multiline {
  flex: 1 1 auto;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  font: inherit;
  resize: vertical;
}

.inline-edit__hint {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

/*
  駐車場をその場で直す（2026-09-07）。最寄り駅の直しと同じ並びにする。
*/
.parking-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-end;
  margin-top: 0.4rem;
}

.parking-edit__label {
  align-self: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.parking-edit label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.parking-edit input,
.parking-edit select {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  font-size: 0.85rem;
}

.parking-edit input[name="capacity"] {
  width: 6rem;
}

/* 「直す」ボタンは `btn` と並べているので、位置だけ整える */
.parking-edit__save {
  align-self: flex-end;
}

/*
  **いま自分にだけ見えている部分**（2026-09-08 運営の指示）。

  > 10秒くらいかけてもいいから、その間だけ見られる、使える部分をチカチカさせるとか。
  > 色を変えるだと、そういう色だと勘違いされる可能性がある。

  ⚠️ **色を使わない。** 色は「その部品の色」として読まれてしまう。
  動きは残らないので、そう読まれる心配がない。
  ⚠️ **10秒で止める。** ずっと動いていると読む邪魔にしかならない。
*/
.preview-only {
  position: relative;
  display: inline-block;
  border-radius: 0.3rem;
  /* 動きが終わったあとも「囲まれている」ことは残す（色は付けない） */
  outline: 1px dashed var(--color-border);
  outline-offset: 2px;
  animation: preview-only-blink 1.1s ease-in-out 0s 9;
}

@keyframes preview-only-blink {
  0%, 100% { outline-color: var(--color-border); outline-width: 1px; }
  50% { outline-color: currentColor; outline-width: 2px; }
}

/* 印そのもの。**文字ではなく形**で出す（言葉が増えると本文と混ざる） */
.preview-only__mark {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  animation: preview-only-dot 1.1s ease-in-out 0s 9;
}

@keyframes preview-only-dot {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/*
  ⚠️ **動きを嫌う人には動かさない。** 点線の枠だけを残す——
  動かなくても「ふつうと違う」ことは伝わる。
*/
@media (prefers-reduced-motion: reduce) {
  .preview-only,
  .preview-only__mark {
    animation: none;
  }

  .preview-only {
    outline-width: 2px;
  }

  .preview-only__mark {
    opacity: 1;
  }
}

/*
  沿線から探す（2026-09-08）。不動産サイトの「沿線から探す」と同じ3段。
*/
.railway-line-list,
.railway-station-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
}

.railway-line-list li,
.railway-station-list li {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 0.35rem;
  background: var(--color-surface, #fff);
}

/* 施設がまだ無い駅。**押せないと分かる見た目にする**（無いという意味ではない） */
.railway-station-list li.is-empty {
  border-style: dashed;
  opacity: 0.55;
}

.railway-station-name {
  color: var(--color-text-muted);
}

.railway-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.railway-facility {
  margin-bottom: 0.6rem;
}

.railway-facility__access {
  margin: 0.2rem 0 0;
}

/* ＋（部屋・最寄り駅をその場で足す。`?edit=1` のときだけ画面に出る） */
.inline-add {
  margin-top: 0.5rem;
}

.inline-add__open,
.inline-add__cancel {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 0.85rem;
}

/*
  ⚠️ **`hidden` を効かせる**（2026-09-06）。
  `display: flex` を書いた時点で、HTMLの `hidden`（＝`display:none`）を**上書きしてしまう**。
  開く前から入力欄が出ていた。
*/
.inline-add__form[hidden] {
  display: none;
}

.inline-add__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  margin-top: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
}

.inline-add__field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* 「足す」ボタン。`btn` と並べているので、見た目は `btn` に任せて余白だけ整える */
/* 駅の候補（人が選ぶ。機械に当てさせない） */
.inline-add__candidates {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.inline-add__candidate {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 0.8rem;
}

.inline-add__candidate.is-picked {
  background: var(--color-accent, #16a34a);
  color: #fff;
}

.inline-add__save {
  align-self: flex-end;
}

.inline-add__field input {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  font-size: 0.9rem;
}

/* 最寄り駅の直し（`?edit=1` のときだけ出る） */
.station-edit {
  margin-top: 0.4rem;
}

/* 「直す」ボタンは `btn` と並べているので、位置だけ整える */
.station-edit__save {
  align-self: flex-end;
}

.station-edit__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-end;
  margin-bottom: 0.4rem;
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.station-edit__name {
  align-self: center;
  font-weight: 700;
  color: var(--color-text);
}

.station-edit__row input {
  display: block;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  font-size: 0.85rem;
  max-width: 8rem;
}

.station-edit__remove {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 0.8rem;
}

/* 脚注（「誰でも借りられる」に付ける※など） */
.footnote-mark {
  margin-left: 0.15rem;
  font-size: 0.75em;
  color: var(--color-text-muted);
}

.footnote {
  margin-top: 0.5rem;
  line-height: 1.7;
}

/* リンクの直し（`?edit=1` のときだけ出る） */
.link-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.link-edit__kind {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.link-edit input {
  flex: 1 1 12rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  font-size: 0.8rem;
}

.link-edit__save,
.link-edit__remove {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 0.75rem;
}


/*
  **上の段を選んでいるので含まれている**選択肢（2026-09-13）。

  押せるのに効かない、がいちばん困る。印は付けたうえで押せなくし、
  薄くして「自分で選んだものではない」ことを示す。
  外し方は `title` に書いてある（上の段を外す）。
*/
.filter-tree__label--inherited {
  opacity: 0.6;
  cursor: not-allowed;
}


/*
  **楽器の枠を増やす**（運営の指摘。2026-09-13）。

  > ？を見たらわかるけど、見ないです。普通の人は。

  「埋めれば増える」という作りだけでは、画面に出ていないので誰も知りようがない。
  行の下に置く——上に置くと、まず何を入れる欄なのかが分からない。
*/
.part-filter__add {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.35rem 0.9rem;
  border: 1px dashed var(--color-border, #bbb);
  border-radius: 4px;
  background: none;
  color: var(--color-text, inherit);
  font-size: 0.9em;
  cursor: pointer;
}

.part-filter__add:hover {
  border-style: solid;
}

.part-filter__add-note {
  margin-top: 0.5rem;
  font-size: 0.85em;
  color: var(--color-text-muted, #666);
}


/*
  **編成の組み合わせ**（運営の指摘。2026-09-13）。

  > 羅列だとちょっとわかりにくいので…
  > 通常の編成表と同じように、楽器を上から順番に並べて、
  > 右脇に必須・任意をフォントの差をつけて表現する。

  並びは組ごとに変えない。#6763 は12組とも同じ19パートを持っていて、
  違うのは必須／任意の印だけ。並びを固定すれば、違う行だけが浮き上がる。
*/
.part-combination__box > summary {
  cursor: pointer;
}

.part-combination__note {
  margin: 0.25rem 0 0.5rem;
}

.part-combination__table {
  width: 100%;
  max-width: 34rem;
  margin: 0.4rem 0 0.9rem;
  border-collapse: collapse;
}

.part-combination__table td {
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid var(--color-border-weak, #eee);
}

.part-combination__need {
  width: 4.5em;
  text-align: right;
  white-space: nowrap;
  font-size: 0.85em;
}

/*
  **必須は太字、任意は薄く小さく**（運営の指摘。2026-09-13）。

  > フォントの差をもう少しつけてほしいです。必須は太字とか…
  > 今のだとちょっと差がわかりにくいです。

  はじめは任意だけを薄くしていたが、**必須の側が普通のままでは差が立たない**。
  ⚠️ **文字（必須／任意）も一緒に出しているので、太さだけに頼ってはいない**——
  色や太さが見えない人にも、読み上げにも伝わる。
*/
.part-combination__part,
.part-combination__need {
  font-weight: 700;
}

/*
  ⚠️ **任意は斜体**（運営の指摘。2026-09-13）。
  薄さと大きさだけでは差が立たなかった。字の形そのものを変える。
*/
.part-combination__row--optional .part-combination__part,
.part-combination__row--optional .part-combination__need {
  color: var(--color-text-muted, #666);
  font-size: 0.88em;
  font-weight: 400;
  font-style: italic;
}


/*
  運営者情報（2026-09-13）。

  > ただし、運営者情報は簡潔に作ったほうがいい。

  ⚠️ **読ませる場所ではない。** 誰がやっているかを確かめに来た人が、
  1秒で確かめて帰る場所なので、幅を絞って項目を縦に並べるだけにする。
*/
.page-narrow {
  max-width: 42rem;
}

.operator-info {
  margin: 1.5rem 0;
}

.operator-info dt {
  margin-top: 1rem;
  font-size: 0.85em;
  color: var(--color-text-muted, #666);
}

.operator-info dd {
  margin: 0.2rem 0 0;
}


/*
  名前の由来（2026-09-13）。**「ちらっと」を守る。**
  本文と同じ大きさで書くと、由来が主題に見える。小さく、少し離して置く。
*/
.site-name-origin {
  margin-top: 0.75rem;
  font-size: 0.92em;
  color: var(--color-text-muted, #666);
}

/*
  楽器と本数の行を、1行ずつ消す（指摘。2026-09-16）。
  ⚠️ **切り替えの右。** 本数より先に目に入る位置に置くと、消すほうを先に押されかねない。
*/
/*
  ⚠️ **幅の割り当ては、もともと3つぶんだった**（運営の報告。2026-09-17
  「領域からはみ出ているので文字が重なっています」）。

  この行は「**楽器の欄で1行、本数と切り替えで1行**」という設計で、
  絞り込みの列（**280px**）にちょうど収まるようにしてあった——
  本数 4.5em ＋ 単位 ＋ 切り替え 6em。
  そこへ✗を足して**4つ目**にしたため、はみ出した。

  **切り替えを少し詰め、✗を小さくして、3つぶんの幅に収め直す。**
  ⚠️ **押せる大きさは保つ**（1.5rem ＝ 24px。指で押す下限に近いので、これ以上は縮めない）。
*/
.part-filter__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1;
}

.part-filter__remove:hover,
.part-filter__remove:focus-visible {
  background: var(--color-bg-subtle, #f7f7f5);
  color: var(--color-text);
}

/*
  編成のタグ。**ページの下に置く**（指摘。2026-09-16）。
  ⚠️ **見出しを付ける。** 下に置くと文脈が離れるので、何のタグか言葉で示す。
*/
.work-tags {
  margin: 2rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.work-tags__label {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.work-tags__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/*
  一覧のパート数。**押すと編成が開く**（指摘。2026-09-16）。
  ⚠️ **リンクではない。** 「同じパート数の楽曲一覧」という分類に意味が無いため外した。
*/
.part-count {
  /*
    ⚠️ **開いたら幅いっぱい。** `inline-block` のままだと、
    中の表が親の幅を無視して伸び、カードからはみ出す（指摘。2026-09-16）。
  */
  display: block;
  width: 100%;
  min-width: 0;
}

.part-count__summary {
  cursor: pointer;
  list-style: none;
}

.part-count__summary::-webkit-details-marker {
  display: none;
}

.part-count__summary::after {
  content: "＋";
  margin-left: 0.2rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.part-count[open] > .part-count__summary::after {
  content: "−";
}

/*
  ⚠️ **狭い画面では、表だけ横に動かす。**
  パート名と必須／任意の欄は折り返さないので、幅が足りないと押し出される。
  ページごと横に伸びると読めなくなるので、ここで受け止める。

  ⚠️ **`<table>` そのものに `display: block` を当てない。**
  表としての幅の配り方が効かなくなり、**中身なりに縮んで逆に狭く**なる。
  囲みの `<div>` 側で受ける（編成の詳細の `.attribute-table-wrap` と同じ形）。
*/
.part-count__wrap {
  overflow-x: auto;
}

/*
  ⚠️ **中身の幅に合わせる**（運営の報告。2026-09-17）。

  > 曲目全体の領域に対して、編成を広げるとPCで**3分の2くらいのところまでしかデータがなく、
  > 右側が空いて**しまっています。

  `width: 100%` で伸ばすと、**余った幅を楽器名の列が全部吸う**。
  パート名も必須／任意も中身ぴったり（`width: 1%`）なので、
  **楽器名の右にだけ大きな空きができる**。

  3列とも短いので、**表そのものを中身の幅にする**。
  はみ出すときだけ `.part-count__wrap` が横に動かす。

  ⚠️ もとは `max-width: 34rem` で頭打ちにしていた（「領域がやけに狭い」の原因）。
  長い行は楽器名の欄が折り返して受けるので、上限で抑える必要は無い。
*/
.part-count__table {
  width: auto;
  max-width: 100%;
  margin: 0.4rem 0 0.2rem;
  border-collapse: collapse;
  font-size: 0.85rem;
  /* 長い楽器名（「Percussion（Tambourine、Triangle…）」）でも折り返す */
}

/*
  ⚠️ **1文字ずつ折るのは、楽器名の欄だけ**（2026-09-17）。
  ここを `td` 全体に当てていたため、パート名と必須／任意の欄まで
  「縮められる限界＝1文字」になり、縦に並んでいた。
*/
.part-count__instrument {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/*
  ⚠️ **幅を固定して折り返しを止めない**（運営の報告。2026-09-17
  「パート名と楽器名が重なっています」）。

  `Baritone Saxophone in E♭`（24文字）は 7.5rem に収まらないのに
  `white-space: nowrap` が付いていたため、**列からあふれて隣の楽器名に重なっていた**。
  「6通り中4通りで必須」も 3rem では収まらない。

  **中身に合わせて伸ばし、足りなければ折り返す。**
*/
/*
  ⚠️ **`width: 1%` と折り返しを同時に許すと、1文字ずつ縦に並ぶ**
  （運営の報告。2026-09-17）。

  > 楽器名の領域が大きくて、**それ以外は全部縦表示**（SPの場合）になっていますが…
  > **なんとPCも一緒**でした。

  `width: 1%` は「**中身ぴったりまで縮めろ**」という指定。
  折り返しを許すと**縮められる限界＝1文字**になるので、列が1文字幅に潰れる。
  `td` に `overflow-wrap: anywhere` が効いていたので、日本語も英語も1文字ずつ折れた。

  ⚠️ **「幅を決めて折り返し禁止」とは別物。**
  あふれて重なったのは `width: 7.5rem`（**決め打ちの幅**）＋ `nowrap` の組。
  `width: 1%` ＋ `nowrap` は「中身の幅ちょうど」になるので**あふれようがない**
  （`FixedWidthCellsDoNotOverflowTest` が見ているのも決め打ちの幅のほう）。
*/
.part-count__label {
  width: 1%;
  white-space: nowrap;
}

.part-count__need {
  width: 1%;
  white-space: nowrap;
  /* ⚠️ 右端に寄せない。中身の幅の表になったので、寄せると隣とのすき間が空くだけ */
  text-align: left;
}

.part-count__table td {
  padding: 0.15rem 0.6rem 0.15rem 0;
  vertical-align: top;
}

.part-count__label {
  color: var(--color-text-muted);
}

.part-count__need {
  color: var(--color-text-muted);
}

/*
  ⚠️ **条件に当たった行は、色だけで示さない。**
  「→ ◯◯で演奏可」という言葉も出すので、色が見えなくても理由が読める。
*/
/*
  ⚠️ **行ごと太字にしない**（運営の指示。2026-09-17）。

  > 主たる楽器が絞った条件と一致しないのであれば、**そちらは強調表示しなくてよい**ので、
  > **→◯◯◯で出ている◯◯◯のほうを強調**にしてほしいです。

  代替で当たった行は、主の楽器（探していないもの）まで太くなっていた。
  **太字は、条件に挙げた楽器だけに付ける**（`<strong>` で個別に）。
  行そのものは**地の色**で示す。
*/
.part-count__row--match {
  background: var(--color-bg-subtle, #f7f7f5);
}

/*
  ⚠️ **その団体で組める席を、はっきり分かる形で出す**（運営の指摘。2026-09-30
  「太字や赤字など何らかの方法でわかりやすく表示する」）。
  ⚠️ **色だけに頼らない**——左の縁と「組める」の文字を併せて出す
  （色が見えない人・読み上げにも伝わるように）。
*/
.part-count__row--ours {
  background: var(--color-accent-subtle, #eef6ff);
  box-shadow: inset 3px 0 0 var(--color-accent, #1d6fb8);
}

.part-count__ours-mark {
  display: inline-block;
  padding: 0 0.35rem;
  border-radius: 3px;
  background: var(--color-accent, #1d6fb8);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 0.05em;
}

.part-count__legend {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #666);
  line-height: 1.6;
}

.part-count__via {
  margin-left: 0.3rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* 条件に挙げた楽器は、地の色より濃く出す（探しているものが目に入るように） */
.part-count__via strong {
  color: var(--color-text);
}

/* 楽器の列。⚠️ **ここがいちばん長くなる**ので、折り返しはこの列に効かせる */
.part-count__instrument {
  width: auto;
}

.part-count__times {
  margin-left: 0.15rem;
  color: var(--color-text-muted);
}

/*
  `Part 1a` `Part 1b` は、もとは出版社の `Part 1` ひとつ（運営の指摘。2026-09-16）。
  **束の名前は1回だけ書き、続きは枝だけ**を字下げして出す。
*/
/*
  続きの行は、少し字下げして仲間だと分かるようにする。

  ⚠️ **`display: inline-block` と 2.9rem の字下げをやめた**（運営の報告。2026-09-17
  「2nd Clarinet in Bbが変な改行になっています」）。

  もとは**枝の1文字（`b`）だけ**を出していたので、
  束の名前のぶん（2.9rem）ずらせば桁が揃った。
  いまは**名前をそのまま出す**（`2nd Clarinet in B♭`）ので、
  **大きな字下げのぶん幅が削られ、変なところで折れていた**。
  `inline-block` も箱ごと押し出すので、折り返しが読みにくくなる。
*/

/*
  ⚠️ **線を引く基準は「パート名 ＞ 楽器名」**（運営の指示。2026-09-16）。
  束の鍵（パート名の共通部分／無ければ楽器）が変わったところにだけ線が入る。
  ここで消しているのは**束の中**の線。
*/
/*
  ⚠️ **詳細度を基本の罫線に合わせる**（運営の報告。2026-09-16「線の引き方が直っていません」）。

  もとは `.instrumentation-table__same-part > td` と書いていたが、罫線は
  `.info-table.attribute-table tbody td` で引かれていて**そちらのほうが強く**、
  こちらが**まるごと効いていなかった**。

  ⚠️ **見分けにくい形で出た。** 同じ楽器が続く行（`Part 2b` と `Part 2c` は
  どちらもB♭クラリネット）は `__continues` の指定が別に効いて線が消えるため、
  **そこだけ消えて、他は残る**——「一部だけ直っている」ように見えていた。
*/
.info-table.instrumentation-table tbody tr.instrumentation-table__same-part > td,
.info-table.instrumentation-table tbody tr.instrumentation-table__same-part > th {
  border-top: 0;
}

/*
  ⚠️ **楽器が続いていても、束が変われば線を引く。**
  `__continues`（同じ楽器）だけで線を消していたため、
  `Part 2c` と `Part 3a` が同じ楽器だと**束の切れ目が消えていた**。
*/
.info-table.instrumentation-table tbody tr.instrumentation-table__continues:not(.instrumentation-table__same-part) > td {
  border-top: 1px solid var(--color-border);
}

/*
  別名・旧名・原語表記（運営の指摘。2026-09-17）。
  ⚠️ **見出しの言葉を添える。** 名前だけ並べると、いま使われているのか昔の名前か読めない。
*/
.other-names {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.other-names__label {
  margin-right: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}

/*
  ⚠️ **どの子も、列の幅を超えない**（運営の報告。2026-09-17）。
  細い列（280px）に押し込むので、1つでもはみ出すと隣に重なって読めなくなる。
*/
.part-filter__row > * {
  max-width: 100%;
}

/*
  パートの持ち替え・代替。**さらにたたむ**（運営の指示。2026-09-17）。
  打楽器は1人が何種類も持つので、並べると表が縦に伸びて他のパートが見えなくなる。
*/
.part-count__extras {
  margin-top: 0.15rem;
  font-size: 0.8rem;
}

.part-count__extras > summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

.part-count__extras ul {
  margin: 0.15rem 0 0;
  padding-left: 1rem;
}

/* 「持ち替え」「代替」の別を、色ではなく言葉で分ける */
.part-count__kind {
  margin-right: 0.3rem;
  padding: 0 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

/*
  組み合わせから読み解いた説明（運営の指摘。2026-09-17）。
  ⚠️ **人が書いた補足と見分けがつくようにする。** 機械が出した文なので、
  誤りがあれば人が書き直す前提。地の色を分けて、そうと分かる形にする。
*/
.instrumentation-note--derived {
  border-left-color: var(--color-primary);
}

/* アフィリエイトの参加表示（プログラムが指定する文面をそのまま出す） */
.affiliate-disclosure {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--color-text-muted, #666);
}

/* ⚠️ 原曲から引き継いだ情報だという断り（編曲版自身の情報と読まれないように） */
.inherited-note {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--color-border);
  background: var(--color-bg-subtle, #f7f7f5);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* 属のページに出す「含まれる楽器」。⚠️ 直下だけを並べる（段は壊さない） */
.family-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.family-members > li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface, #fff);
}

.family-members > li > a {
  font-weight: 600;
}

/* 楽章ごとの小節数。⚠️ 入っている曲にだけ出す（未入力を情報のように見せない） */
.movement-tree__measures {
  margin-left: 0.4rem;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
}

/*
  調性・拍子・速度の表の「上の段」（運営の指示。2026-10-10）。

  > #5870 調性・拍子・速度だと**3番まであるのがよくわかりません**
  > 1番（他にももし幕とかあれば書いても良い）／ I. 情報 ／ II. 情報 …

  第1番〜第3番の下にそれぞれ3楽章ある楽曲で、表に I. II. Rondo が3回並び、
  どの番の楽章か分からなかった。仕切りの行で分ける。

  ⚠️ 色は薄く。ここは**見出しではなく仕切り**で、
  肝心の調性・拍子・速度より目立ってはいけない。
*/
.attribute-table__group > .attribute-table__group-name {
  text-align: left;
  font-weight: 600;
  background: var(--color-surface-muted, #f3f4f6);
  border-top: 2px solid var(--color-border, #d1d5db);
  padding: 0.4rem 0.6rem;
}

/* 作品の読み。**題名のすぐ下に、控えめに**（団体の `page-lead` と同じ扱い）。
   ⚠️ 出すのは**人が入れた読み**だけ。機械の推定は探すためのもので、ここには出さない */
.work-kana {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---- スタイル見本（/style-guide。運営だけ） ---- */
/* ⚠️ **見本そのものの見た目**。デザイナーが読む画面なので、素っ気なくてよい */
.style-guide__tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0;
  margin: 0.5rem 0 0;
  list-style: none;
}

.style-guide__token {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 16rem;
}

/* 色は見ないと分からないので、必ず実物を添える */
.style-guide__swatch {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.style-guide__section {
  margin-top: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.style-guide__classes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}

/* ---- スタイル見本の目次とモックの対応 ---- */
.style-guide__toc {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
}
.style-guide__toc-title {
    margin: 0 0 .5rem;
    font-weight: 700;
}
.style-guide__toc-list {
    margin: 0;
    padding-left: 1.5rem;
    display: grid;
    gap: .25rem;
}
.style-guide__mock {
    margin: 0 0 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
.style-guide__mock:last-of-type {
    border-bottom: 0;
}
/* ⚠️ モックは横長なので、はみ出さず全体が見えるようにする */
.style-guide__mock-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.style-guide__mock-heading {
    margin: 1.25rem 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
}
.style-guide__mock-list {
    margin: 0;
    padding-left: 1.5rem;
    display: grid;
    gap: .25rem;
}

/* ---- スタイル見本の「実物と名前」の並べ方 ---- */
/* ⚠️ **実物と名前を並べて置く。** 名前だけだと、何を指しているのか分からない */
.style-guide__specimen {
    margin: 0 0 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.style-guide__specimen-view > *:first-child {
    margin-top: 0;
}
.style-guide__specimen-names {
    margin: .75rem 0 0;
    padding-top: .75rem;
    border-top: 1px dashed var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}
.style-guide__specimen-names code {
    font-size: .85em;
}
/* ⚠️ クラス名と「どのページで見られるか」を1行に並べる */
.style-guide__class-list {
    margin: .5rem 0 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: .35rem;
}
.style-guide__class {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--color-bg-alt);
}
.style-guide__class-where {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    font-size: .85em;
}
/* ⚠️ **行き先が並んでいることが、見て分かるようにする**（区切り文字は使えない。「/」が行き先に出る） */
.style-guide__class-where a {
    padding: 0 .35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

/* =========================================================================
   新しい見た目（デザイナーのスマホモックに寄せたもの）。2026-10-22
   =========================================================================

   > WEBデザイナがモックを作ってくれました。スマホ版です。
   > すべて真似はしなくてもいいですが、「何を探しますか」の位置や緑の棒。
   > 作品・楽曲、コンクールなどの配置、色、またアイコン、
   > 新着リリース（これは新設しましょう。）
   > フッターの色味など。（文字のフォントは今のままでとりあえず良いです）
   > **一応、元に戻せるようにしてください。**

   ⚠️ **ここから下は、すべて `.design-refresh` の中にしか書かない。**
   `<body>` のクラスは機能フラグ `design_refresh` が付ける。
   旗を下ろせばクラスが消え、**ここは1行も効かなくなる**＝前の見た目に戻る。

   ⚠️ **上にある既存のCSSの値は、1つも書き換えていない。**
   書き換えると「戻す」ができなくなる。追加だけで寄せている。

   ⚠️ **フォントには触れていない**（「今のままでとりあえず良いです」）。

   色はモックから**数値で採った**（目で合わせていない）:
     緑の棒 #204B51 … 既存の --color-primary (#204b52) とほぼ同値だったので、変数をそのまま使う
     カードの地 #FAFBFB → #F0F3F3（上から下へのごく薄い階調）
     ボタン #204B51 ＋ 白文字
     フッター #0F2D31
   ========================================================================= */

.design-refresh {
  /* ⚠️ **既存の変数は上書きしない。** 新しい名前で足すだけにする */
  --refresh-card-top: #fafbfb;
  --refresh-card-bottom: #f0f3f3;
  --refresh-footer-bg: #0f2d31;
  --refresh-footer-text: #cdd8d9;
  --refresh-footer-title: #ffffff;
  --refresh-footer-line: rgba(255, 255, 255, 0.14);
  /* 種別の札の地。カードの上に乗るので、カードより明るい面にする */
  --refresh-chip-bg: #ffffff;
}

/* 暗い配色のときは、白地のモックの値をそのまま置くと浮くので入れ替える */
:root[data-theme="dark"] .design-refresh {
  --refresh-card-top: #232a2c;
  --refresh-card-bottom: #1d2426;
  --refresh-footer-bg: #0d1214;
  --refresh-footer-text: #a7b0af;
  --refresh-footer-title: #e7eceb;
  --refresh-footer-line: rgba(255, 255, 255, 0.1);
  /* 暗い配色では「明るい面」の向きが逆になるので、地より沈ませる */
  --refresh-chip-bg: #14181a;
}

/* ---------- 見出しを中央に置き、下に棒を敷く ---------- */
/*
  ⚠️ **`--centre` が付いた見出しだけ。** `.section-title` は十数ページで使っているので、
  まとめて中央にすると**頼まれていない画面まで変わる**。
*/
.design-refresh .section-title--centre {
  border-left: 0;
  padding-left: 0;
  text-align: center;
  margin: 2.5rem 0 0;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.design-refresh .section-title--centre::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 0.75rem auto 0;
  border-radius: 2px;
  background: var(--color-primary);
}

.design-refresh .section-lead--centre {
  text-align: center;
  margin-top: 1.25rem;
  line-height: 2;
}

/* ---------- 4区分のカード ---------- */
/*
  ⚠️ **狭い画面でも2列を保つ。** 既定の `minmax(200px, 1fr)` は
  390px幅で1列に落ちるが、モックは2列。縦に4枚並ぶと
  「新着リリース」まで指2本ぶん遠ざかる。
*/
.design-refresh .section-grid {
  /*
    ⚠️ **`auto-fit` であって `auto-fill` ではない**（運営の指摘。2026-10-23）。

    > PC版の何を探しますかが左によっています。
    > 右側にサイドカラムを配置することになったら問題無いのですが、
    > そうでなければ**均等に配置しないと変**です。

    `auto-fill` は**入るだけ列を作る**ので、広い画面では7列できて
    **4枚が左に詰まり、右に3列ぶんの空きが残る**。
    `auto-fit` は**空いた列を潰す**ので、残った4枚が全幅に均等に広がる。

    ⚠️ **区分の数は4つとは限らない**（0件の種類は台帳から落ちる）。
    枚数が変わっても均等になるのは `auto-fit` の側。
  */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.design-refresh .section-card {
  border: 0;
  border-radius: 12px;
  padding: 1.25rem 1rem;
  text-align: center;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(180deg, var(--refresh-card-top), var(--refresh-card-bottom));
}

/* 枠が無いので、触れたことは影で示す（枠を足すと寸法が動いて1pxずれる） */
.design-refresh .section-card:hover,
.design-refresh .section-card:focus-visible {
  box-shadow: 0 2px 10px rgba(32, 75, 82, 0.16);
}

/* 印と札を1行に並べる。印は札の左 */
.design-refresh .section-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.design-refresh .vertical-icon {
  display: block;
  flex-shrink: 0;
  color: var(--color-primary);
}

.design-refresh .section-card__label {
  color: var(--color-primary);
  font-size: 1.05rem;
  line-height: 1.35;
}

.design-refresh .section-card__count {
  margin-bottom: 0.5rem;
}

/* ボタンは丸く、地を塗る（モックの #204B51 ＝ --color-primary） */
.design-refresh .section-card__action {
  align-self: center;
  min-width: 10rem;
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
}

.design-refresh .section-card:hover .section-card__action,
.design-refresh .section-card:focus-visible .section-card__action {
  background: var(--color-primary-dark);
}

/* ---------- フッターの色味 ---------- */
.design-refresh .site-footer {
  border-top: 0;
  background: var(--refresh-footer-bg);
  color: var(--refresh-footer-text);
}

.design-refresh .site-footer a {
  color: var(--refresh-footer-text);
}

.design-refresh .site-footer a:hover {
  color: #fff;
}

.design-refresh .site-footer__group-title a,
.design-refresh .site-footer__group-title {
  color: var(--refresh-footer-title);
}

/* 区分の切れ目を線で示す。暗い地では枠より薄い線のほうが数えやすい */
.design-refresh .site-footer__group + .site-footer__group {
  border-top: 1px solid var(--refresh-footer-line);
  padding-top: 1.25rem;
}

@media (min-width: 720px) {
  /* 横に並ぶ幅では、上の線は段の頭にしか付かないので外す */
  .design-refresh .site-footer__group + .site-footer__group {
    border-top: 0;
    padding-top: 0;
  }
}

.design-refresh .site-footer__copy {
  text-align: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--refresh-footer-line);
}

/* ---------- フッターの名乗りとアカウントの入口 ---------- */
/*
  > Ensychordの文字がないですし。ログインと会員登録の文字もないです。

  ⚠️ **ヘッダーの名乗りと同じ値を書き直さない。** 名前も副題も `SiteIdentity` から出る。
*/
.design-refresh .site-footer__brand {
  /*
    ⚠️ **モックでは副題が名前の「右」**（同じ行）。縦に積むと別物に見える。
    入りきらない幅では折り返す——`nowrap` にすると、狭い画面で横にはみ出す。
  */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem 0.75rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.design-refresh .site-footer__brand-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--refresh-footer-title);
}

/* 印は濃い地の上に乗るので、少し小さくして文字と高さを揃える */
.design-refresh .site-footer__brand-mark {
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.design-refresh .site-footer__brand-name:hover {
  text-decoration: none;
  opacity: 0.85;
}

.design-refresh .site-footer__brand-sub {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.design-refresh .site-footer__account {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}

/*
  **濃い地の上のボタン。**
  ⚠️ `.btn--outline` は**緑の文字**なので、濃い地では沈んで読めない。
  地の色に依らず、白い枠と白い文字にする。
*/
.design-refresh .btn--ghost {
  border-radius: 999px;
  min-width: 8.5rem;
  border: 1px solid var(--refresh-footer-title);
  background: transparent;
  color: var(--refresh-footer-title);
}

.design-refresh .btn--ghost:hover {
  background: var(--refresh-footer-title);
  color: var(--refresh-footer-bg);
}

/* ---------- フッターを「＋」で開く（狭い画面だけ） ---------- */
/*
  > モックでは＋マークがあるので、＋マークを押すと出てくるタイプだと思います。

  ⚠️ **JavaScriptを使わない。** ヘッダーのメニューと同じ形
  （隠した `<input type="checkbox">` ＋ `<label>`）。JSが止まっていても開ける。

  ⚠️ **中身は `display` で隠すだけ。** HTMLからは消さないので、
  閉じていても**検索にも読み上げにも乗る**。
*/
/*
  ⚠️ **隠し方は `.sr-only` に任せる**（HTMLで併記している）。
  ここで同じ指定を書き直したら `FixedWidthCellsDoNotOverflowTest` に捕まった——
  「幅を決めて折り返し禁止」の指定が**また1つ増えた**ことになるため。
  画面からは見せないが、`display: none` にはしない（キーボードの移動先として残す）。
*/

.design-refresh .site-footer__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* 広い画面では「＋」も開閉も無し（モックはスマホ版。畳むと今見えているものが隠れる） */
.design-refresh .footer-toggle__mark {
  display: none;
}

@media (max-width: 719px) {
  /*
    ⚠️ **1列にする**（運営の指摘。2026-10-23）。

    > SP版のフッターは**縦2列ではなくて1列**ですね。

    既定は `repeat(auto-fit, minmax(180px, 1fr))` なので、
    440pxの幅には**2列入ってしまう**。畳んだ見出しが2列に並ぶと、
    モックの「上から順に＋が並ぶ」形にならない。
  */
  .design-refresh .site-footer__groups {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .design-refresh .footer-toggle__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    /* ⚠️ 指で押せる大きさにする。小さい「＋」は押せない */
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.5rem -0.5rem -0.5rem 0;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--refresh-footer-title);
  }

  .design-refresh .footer-toggle__mark::before {
    content: "＋";
  }

  .design-refresh .footer-toggle:checked ~ .site-footer__group-title .footer-toggle__mark::before {
    content: "－";
  }

  /* 閉じているあいだは隠すだけ。HTMLからは消さない */
  .design-refresh .footer-toggle ~ .site-footer__links {
    display: none;
  }

  .design-refresh .footer-toggle:checked ~ .site-footer__links {
    display: block;
  }

  /* キーボードで来たときに、どこに居るか分かるようにする */
  .design-refresh .footer-toggle:focus-visible ~ .site-footer__group-title .footer-toggle__mark,
  .design-refresh .footer-toggle__mark:focus-visible {
    outline: 2px solid var(--refresh-footer-title);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* 畳んだぶん、区分どうしの間隔を詰める */
  .design-refresh .site-footer__group + .site-footer__group {
    padding-top: 0.75rem;
  }

  .design-refresh .site-footer__group-title {
    margin-bottom: 0;
  }
}

/* =========================================================================
   新着リリース。2026-10-22
   =========================================================================
   ⚠️ **ここは `.design-refresh` の外に書く。**
   欄そのものは別のフラグ（`new_arrivals`）で出しているので、
   「新着は出すが、見た目は元に戻す」組み合わせがある。
   `.design-refresh` の中だけに書くと、その組み合わせで**素のリスト**になる。
   ========================================================================= */

.new-arrivals {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.new-arrivals__item + .new-arrivals__item {
  /* 点線にするのはモックに合わせたもの。実線より行の区切りが軽く見える */
  border-top: 1px dashed var(--color-border);
}

.new-arrivals__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.9rem 0.25rem;
  color: inherit;
  text-decoration: none;
}

.new-arrivals__link:hover {
  text-decoration: none;
  background: var(--color-bg-page);
}

.new-arrivals__meta {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.new-arrivals__date {
  letter-spacing: 0.04em;
}

.new-arrivals__kind {
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 700;
}

/*
  **「新規」か「更新」か**（運営の回答。2026-10-23）。

  ⚠️ **色で強さを変える。** いまは更新のほうが圧倒的に多いので、
  同じ見た目にすると**新しく載ったものが埋もれる**。
*/
.new-arrivals__state {
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.new-arrivals__state--new {
  background: var(--color-primary);
  color: #fff;
}

.new-arrivals__state--updated {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.new-arrivals__title {
  grid-column: 1;
  grid-row: 2;
  line-height: 1.6;
}

/* 矢印は2行ぶんの高さの右端に置く */
.new-arrivals__go {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

.new-arrivals__more {
  margin: 1.25rem 0 2rem;
  text-align: center;
}

/* 見た目の旗が立っているときだけ、モックのように箱へ入れる */
.design-refresh .new-arrivals {
  margin-top: 1.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--refresh-card-top), var(--refresh-card-bottom));
}

.design-refresh .new-arrivals__link:hover {
  background: transparent;
  opacity: 0.75;
}

/*
  ⚠️ **色を直に書かない。** `#fff` と書いたら
  `StylesheetWorksInDarkModeTest` に捕まった——
  暗い配色のときだけ**白い札が浮いて残る**ため。
*/
.design-refresh .new-arrivals__kind {
  background: var(--refresh-chip-bg);
  color: var(--color-primary);
}

/*
  **「Ensychordはこれを解決します。」の一行**（2026-10-23）。

  運営が書いた本文の中で、**ここだけが言い切り**になっている。
  前後の段落と同じ見た目だと流れて読まれるので、少しだけ強くする。
  ⚠️ **見出しにはしない。** 章の区切りではなく、段落の中の一文なので、
  `<h2>` にすると目次の構造が変わってしまう。
*/
.about-claim {
  margin: 1.5rem 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--color-primary);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
}