/* css/views-detail-hero.css
   コース詳細ページのリデザイン（Figma 75:207「01-top」）。

   【なぜ views-detail.css に足さないか】あちらは既に 1486 行で、CLAUDE.md の
   「1ファイル400行を超えそうなら追記せず分割」に反する。ヒーロー・タブ帯・仕様カード・
   右サイドバーは**新しい版だけが使う**まとまりなので、丸ごとこちらに置く。

   【色・角丸は既存トークンをそのまま使う】Figma の8色は css/tokens.css と完全に一致していた
   （#14181a→--ink-900 / #23292b→--ink-800 / #6b7577→--ink-500 / #b3b9ba→--ink-300 /
    #e6e8e6→--border-color / #f7f8f6→--bg / #0f7b4d→--accent / #f5a623→--star）。
   新しい色は1つも足していない。角丸も 8/16/999 が --radius-sm/lg/pill に対応する。
   例外は 24px（カードの角丸）だけで、デザインの2箇所にしか出ないので直値で置く。

   【見出しのフォント】デザインは Lexend Peta Black だが、**書体は既定のまま**にして
   ウェイトだけ合わせる（作者の判断・2026-08-25「フォントは無視して大丈夫です。
   普通にデフォルトのフォントにして、ウェイトだけ参考にしてください」）。
   webfont を足さないので「外部依存ゼロ」も保てる。 */

.detail-redesign {
  --detail-card-radius: 24px;
}

/* ヒーローの上に重ねるガラス質のボタン（GORAで開く・ゴルフ場を検索・ヘッダーの検討リスト）。
   【:root に置く】ヘッダー（.site-header）は #app の外にあるので、.detail-redesign に
   置くと**ヘッダーのピルからは見えない**（実測: 変数が未定義になり地色が透明・枠が白になった）。
   【暗幕の上に重ねる地色】コース詳細のヒーローの中身は rgba(0,0,0,0.64) の暗幕の上にあるので、
   ここで16%の黒を足すと実効7割の黒＝黒い板に見える（作者の指摘・2026-08-26）。
   白を薄く乗せて「ガラス」に見せる。ヘッダーの検討リストピル（ホームを含む）も同じ値を使う
   （css/home.css の body.has-hero-header .shortlist-link）。 */
:root {
  --detail-glass-bg: rgba(255, 255, 255, 0.12);
  --detail-glass-bg-hover: rgba(255, 255, 255, 0.22);
  --detail-glass-border: rgba(255, 255, 255, 0.32);
}

/* ── ヒーロー ─────────────────────────────────────────────────
   写真の上に rgba(0,0,0,0.64) + backdrop-blur(20px) を敷いて白文字を乗せる。
   【スクリムを濃くしてある理由】以前このページは「明るい写真だと白文字が読めない」ため
   写真上のオーバーレイをやめた経緯がある（course-gallery.js 冒頭）。デザインは
   0.64 の暗幕とぼかしで読めるようにしているので、**その2つは薄くしないこと**。 */
.detail-hero-band {
  position: relative;
  min-height: 400px;
  display: flex;
  overflow: hidden;
  background-color: var(--ink-900);
}

.detail-hero-band__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.detail-hero-band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero-band__veil {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* 【上はヘッダーぶん空ける】共有ヘッダー（body.has-hero-header）は position: absolute で
     この帯に重なる。空けないとロゴとコース名が重なる */
  padding: calc(var(--header-height) + var(--space-4)) var(--space-6) var(--space-6);
}

.detail-hero-band__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-inline: var(--space-6);
}

.detail-hero-band__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.detail-hero-band__logo {
  height: 24px;
  width: auto;
  display: block;
}

.detail-hero-band__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: 10px 0;
  text-align: center;
  color: #fff;
}

.detail-hero-band__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.detail-hero-band__title {
  margin: 0;
  font-size: 48px;
  font-weight: 800;   /* comp は Black。既定書体で近いウェイトに寄せる */
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.detail-hero-band__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 所在地リンクは下線あり（デザイン指定）。白文字なので色は継承させる */
.detail-hero-band__meta a {
  color: inherit;
  text-decoration: underline;
}

/* 評価の数値は既定が --ink-900（暗い写真の上で黒く沈む。作者の指摘・2026-08-26）。
   ヒーローの中だけ白に戻す。星（.rating__stars）は元から色付きなので触らない。 */
.detail-hero-band__meta .rating__value,
.detail-hero-band__meta .rating__count {
  color: inherit;
}

/* 【2行ぶんの高さを常に確保する（2026-08-27・issue #58 の CLS）】紹介文は後から届く。
   要素が空のまま高さ0だと、届いた瞬間に body（justify-content: center）が再センタリングされ、
   見出しが27px上・ピルが37px下・帯が400→410pxに動く（実測）。 */
.detail-hero-band__lead {
  min-height: 40px;
  max-width: 880px;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 20px;
}

/* ガラスのピル（ヒーローと右上プロモで共通） */
.glass-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 10px var(--space-4);
  border: 2px solid var(--detail-glass-border);
  border-radius: var(--radius-pill);
  background: var(--detail-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* 【暗幕の中ではピル自身をぼかさない】作者の指摘・2026-08-26「暗い部分の上にある検討リストの
   方が明るく見える。goraの方はbackdropが二重に入っている？」＝そのとおりだった。
   `.detail-hero-band__veil` が backdrop-filter を持つと**そこが backdrop root になる**ので、
   中のピルの backdrop-filter は写真ではなく**暗幕の中身（64%の黒）だけ**をぼかして拾う。
   結果、地色を白にしても平たい暗色の板になる（実測: ピルの backdrop-filter を none にすると
   ヘッダーの検討リストピルと同じ明るさになった）。暗幕がすでにぼかしているので二重にしない。
   **プロモカードのピル（.detail-promo）は暗幕の外**なので、あちらは blur を残す。 */
.detail-hero-band__veil .glass-pill {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-pill:hover {
  background: var(--detail-glass-bg-hover);
}

.glass-pill--block {
  width: 100%;
}

/* 【ヘッダーの検討リストピルと同じ見た目】ヒーローの「GORAで開く」に使う
   （作者の指示・2026-08-26）。素の .glass-pill は右のプロモの主ボタン用で、
   16px/700・字間0.08em・高さ40pxと一段大きい。
   **値は css/base.css の .shortlist-link と css/home.css のガラス指定に合わせてある**
   （地色・枠線はどちらも同じ rgba を --detail-glass-* として持っている）。
   ヘッダー側の寸法を変えるときはここも見る。 */
.glass-pill--sm {
  gap: var(--space-2);
  height: auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: normal;
}

.glass-pill--sm .glass-pill__icon {
  width: 18px;
  height: 18px;
}

.glass-pill__icon {
  width: 24px;
  height: 24px;
  flex: none;
}

/* ── タブ帯（濃色・全幅） ───────────────────────────────────────
   既存の tabsHtml のマークアップ（.tabs > .tabs__list > .tabs__tab）をそのまま使い、
   modifier で見た目だけ変える。**bindTabs の挙動と ARIA を作り直さない**ため。

   【全幅にするのに負のマージンを使わない】タブ列は .detail-tabs の直下に置いてあり、
   .detail-tabs 自体が画面幅いっぱいなので、そのままで帯になる。パネルだけを
   中の .container が 1200px に絞る（tabsPartsHtml で列とパネルを分けた理由）。 */
.detail-tabs > .tabs__list {
  border-bottom: 0;
  /* 【基本形の margin-bottom を消す】下線型タブ用の24pxが残っていて、2カラム側の
     padding-block 24px と足して48px空いていた（2026-08-26 の監査） */
  margin-bottom: 0;
  /* 48px（作者の指示・2026-08-26。comp の64pxは大きすぎた） */
  min-height: 48px;
  background: var(--ink-900);
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  overflow-x: auto;
}

.detail-tabs > .tabs__list > .tabs__tab {
  min-height: 48px;
  /* 下線型の名残（1px線に重ねるための負マージン）。帯の中では選択中の緑が1px下に出る */
  margin-bottom: 0;
  padding: 8px var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  /* 16px（作者の指示・2026-08-26。comp の20pxは大きすぎた） */
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.detail-tabs > .tabs__list > .tabs__tab:hover {
  background: var(--ink-800);
}

.detail-tabs > .tabs__list > .tabs__tab.is-active {
  background: var(--accent);
  color: #fff;
}

/* プランカードの「更新中」。日付を変えたときの進行表示（js/views/detail.js）。
   **同じコースの再描画ではスケルトンに落とさない**ので、進行はここだけで示す。 */
.detail-plan__busy {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-500);
}

/* ── 2カラム ─────────────────────────────────────────────────
   1200 = 32(余白) + 752(左) + 24(間) + 360(右) + 32(余白)。右は追従させる。 */
.detail-redesign__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5);
}

.detail-redesign__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--space-5);
}

/* ── カード（左の詳細・右のプラン共通） ───────────────────────── */
.detail-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--detail-card-radius);
  padding: var(--space-4);
  box-shadow: 0 1px 1px rgba(20, 24, 26, 0.05);
}

.detail-card__title {
  margin: 0 0 var(--space-4);
  font-size: 28px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.014em;
  color: var(--ink-900);
}

/* 【節と節は32px空ける】comp（Figma 93:999）は各ブロックが下に16pxの余白を持ち、さらに
   ブロック間が16px空く＝表の最終行から次の見出しまで32px。
   【隣接セレクタでは効かない】各節は実データ到着後に差し替えるためのスロット
   （data-role="facts-facility" 等）に1つずつ包まれていて、`.block + .block` は
   **一度も一致しない**。そのため節どうしがくっついて見えていた（作者の指摘・2026-08-26）。
   節そのものに上の余白を持たせ、カード先頭のフォトギャラリーだけ打ち消す。 */
.detail-card__block {
  margin-top: var(--space-6);
}

.detail-card > .detail-card__block:first-of-type {
  margin-top: 0;
}

/* 【18pxは意図的】comp は20pxだが、タブ帯（20→16px）・タブの高さ（64→48px）と同じく
   縮める判断（作者の指示・2026-08-26）。**字送りも18px基準に直してある**:
   comp の -0.1504px は20px基準の値で、18pxに載せると詰まりすぎる（-0.1504/18 ≒ -0.0084em）。
   同じ理由で「プラン」「最安値の数字」「+N」も18pxで揃えている。 */
.detail-card__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.0084em;
  color: var(--ink-900);
}

/* ── 写真の横列（左カードの中） ─────────────────────────────── */
.detail-photostrip {
  display: flex;
  gap: var(--space-2);
  /* フォーカスリング（2px + offset 1px）が overflow でクリップされないぶんの余白。
     選択枠は持たない（下のコメント参照）が、キーボード操作のリングは全周見せる。 */
  padding: 3px;
  /* 【横スクロールさせない】入りきらないぶんは最後の枠を「+N」にして畳む
     （作者の指示・2026-08-26。畳む枚数の計算は js/components/course-gallery.js の fitThumbs） */
  overflow: hidden;
  /* 【空でも高さを取る（issue #84 の CLS）】サムネは写真が届いてから入る。hidden で作ると
     届いた瞬間に下の「施設」以降が78px下がり、本番の PageSpeed で最大 0.16 出ていた
     （2026-08-30 実測。ヒーロー側の2件を直したあと、残る最大のずれがこれだった）。
     92×64 のサムネ＋フォーカスリングぶんの padding 3px×2 = 70px を最初から確保する。
     写真が0〜1枚のコースでは course-gallery.js が hidden にして畳む。 */
  min-height: 70px;
}

/* 中身は course-gallery.js が .detail-gallery__thumb で描く（クラス名はあちらが正）。
   ここではその子を並べ直すだけで、マークアップは持たない。 */
.detail-photostrip .detail-gallery__thumb {
  flex: none;
  width: 92px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: pointer;
}

.detail-photostrip .detail-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 【読み込み前のグレーの枠（issue #84）】写真はAPIが返ってから入るので、それまで同じ大きさの
   枠を出しておく＝届いても高さが変わらない（作者の求め・2026-08-30）。押せる要素ではないので
   span で出し、読み上げからも外す（course-facts-card.js の photoSkeletonHtml）。 */
.detail-photostrip .detail-gallery__thumb--skeleton {
  cursor: default;
  pointer-events: none;
  animation: photostrip-skeleton 1.4s ease-in-out infinite;
}

@keyframes photostrip-skeleton {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-photostrip .detail-gallery__thumb--skeleton { animation: none; }
}

/* 「+N」の枠。写真の上に暗幕を敷いて残り枚数を出す（枚数は --more-count で渡す） */
.detail-photostrip .detail-gallery__thumb--more {
  position: relative;
}

.detail-photostrip .detail-gallery__thumb--more::after {
  content: var(--more-count, "");
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 26, 0.56);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 700;
}

/* 【選択枠は出さない】サムネを押しても左上のヒーロー写真は変わらず、プレビューが開くだけ。
   枠を出すと「今この写真を見ている」という嘘になる（作者指摘・2026-08-26）。
   選択の表示が要るのはプレビュー側のサムネ列（.photo-lightbox__thumb.is-selected）だけ。 */

/* ── レイアウト・攻略カード（Figma 98:3269 / 情報が少ないときは 124:325） ───────
   器は「ゴルフ場詳細」と同じ .detail-card。ここが持つのは、上に置く要約タイルと
   空状態の見た目だけ（ホールのカード・ハザードの表は既存の実装をそのまま入れる）。 */
.detail-layout__lead {
  /* 下は comp と同じ16px（節と節の32pxはブロックどうしの間隔で、リード文は別） */
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-900);
}

/* 「コース概要」のタイル。4列。comp の 8px gap / 8px 角丸 / 12px 内側余白 */
.detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(20, 24, 26, 0.04);
}

/* 【12px未満を置かない — 読ませる文字だけ（issue #77）】#65 は静的HTMLの
   `.price-band__count` だけを12pxにしていて、SPAが描き直したあとの10pxが45個残っていた。
   2026-08-28 に部品ごとに12pxへ上げて実測し、**レイアウトが1pxも動かない**ものだけ上げた
   （grid/flex の子で幅がセル側で決まるため。文字切れ0件・親からのはみ出し0px・
   ページの横スクロール0px）。
   **上げないもの**: ヒストグラムの目盛り `.price-pos__scale > span`（16個中8個が1行→2行に
   なる。唯一動く部品）と、記号・単位（`.detail-plan__price-value > span` の「〜」・
   `.detail-stat__unit` の「ヤード」・`.review-rank__value` の「位」・`.video-card__dur`）。
   これらは読む文字ではなく大きな主値に付く目印なので10pxのままにする（作者の判断）。
   サイズは px 直書きをやめて --text-xs（12px）＝トークンの下限に合わせる。 */
.detail-stat__label {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 21.7px;
  color: var(--ink-500);
}

/* 数値が主役（20px）。単位と補足は小さく添える */
.detail-stat__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  /* comp は 20px。--text-lg(18) でも --text-xl(22) でもないので直値（タブ帯と同じ扱い） */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
}

/* 【長い値は小さくして1行に収める】「適度なアップダウン」は20pxだとタイル幅を超えて2行になり、
   その列だけ高さが変わる（作者の指摘・2026-08-26）。値の文字数で判断する（course-layout-card.js） */
.detail-stat__value--long {
  font-size: var(--text-sm);
}

.detail-stat__unit {
  font-size: 10px;
  font-weight: 400;
}

.detail-stat__note {
  font-size: 10px;
  color: var(--ink-500);
}

/* ── 口コミカード（Figma 109:5717） ─────────────────────────────────
   概要文 → 満足度（4軸） → 特徴（3軸） → 県内ランキングのタイル。
   バーは既存の .rating-breakdown（css/views-filters-misc.css）をそのまま使う。 */
.detail-review-card .review-summary {
  /* 【下に余白を持たせる】.detail-card__block の上マージンは :first-of-type で消えるので、
     概要文と「満足度」の見出しがくっつく（2026-08-26 実測で 0px）。
     **節の間と同じ32px**にする（--space-5 の24pxではまだ詰まって見えた。作者の指摘・同日。
     comp も概要文の下16px＋カードのgap16px＝32px） */
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.7;
  /* 【--text は未定義】ホールマップ節だけが使う別系統の語彙で、ここに1行だけ持ち込まれていた。
     同じ役割の .detail-layout__lead は --ink-900（2026-08-26 の監査） */
  color: var(--ink-900);
}

/* タイルは4枚→3枚の2段（Figma）。**枚数が変わっても崩れないように grid で折り返す**
   （順位を持たない軸はタイルごと出さないので、5枚や6枚になることがある）
   【`.detail-review-card` で囲まない】同じタイルを静的HTML（scripts/prerender-course.mjs）も
   出すので、口コミカードの中でしか効かない形にしない（2026-08-26 / issue #54） */
.review-ranks {
  list-style: none;
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.review-rank {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  /* 【8px】comp（Figma 109:5717）は8px。同じ形の .detail-stat（コース概要のタイル）も
     8pxなので揃える（作者の指示・2026-08-26。ここだけ12pxだった） */
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

/* いちばん良い順位の軸だけ色を付ける（Figma の緑のタイル） */
.review-rank--best {
  background: var(--accent-light);
}

.review-rank__label {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  /* Figma は rgba(20,24,26,0.64)。トークンで近いのは --ink-500 */
  color: var(--ink-500);
}

.review-rank__value {
  font-size: 10px;
  color: var(--ink-900);
}

.review-rank__value b {
  margin-right: 2px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.review-rank__avg {
  font-size: var(--text-xs);
  color: var(--ink-500);
}

@media (max-width: 700px) {
  /* 375px では4列だとタイルが70px弱になり「フェアウェイの広さ」が3行になる。2列にする */
  .review-ranks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ホールがまだ無いコース（Figma 124:325）。文とリクエスト導線だけ */

.detail-layout__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.detail-layout__empty-text {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 16.8px;
  color: var(--ink-500);
}

.detail-layout__request {
  min-height: 40px;
  border-radius: var(--radius-pill);
  padding-inline: 17px;
  font-size: var(--text-xs);
  font-weight: 700;
}

/* カードの中では節の見出しと中身の間隔をカード側の作法に合わせる
   （既存の .detail-section は余白を自分で持っているので、カードの中では殺す） */
.detail-layout-card .detail-section {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 仕様テーブル（施設 / コース / 競技） ─────────────────────
   Figma は絶対配置で「ラベル幅102px・値の左端153px」。ここは grid で同じ位置にする
   （絶対配置にすると値の折り返しで行が重なる）。 */
.detail-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.detail-facts__row {
  display: grid;
  grid-template-columns: 153px minmax(0, 1fr);
  gap: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
  line-height: 21.7px;
  letter-spacing: -0.011em;
}

/* 「これまでの開催 ◯件」。行の中でリンクと同じ見た目にする（押すと一覧のモーダル） */
/* SNSの行（公式サイトの下）。リンクを横に並べる。文字はプラットフォーム名だけで、
   アカウント名は出さない（作者の指示・2026-08-30。並べたときに形が崩れない） */
.course-sns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.detail-facts__more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.detail-facts__more:hover {
  text-decoration: underline;
}

/* 一覧モーダル（js/components/modal.js の openListModal）。中身は .detail-facts の表。
   表が2つ（プロ・連盟／過去のアマ大会）並ぶので、間を空けて区切りが分かるようにする */
.list-modal__body .detail-facts + .detail-facts {
  margin-top: var(--space-5);
}

/* 最終行の罫線は出さない（次の見出しとの間に線だけが浮く。作者の指摘・2026-08-26） */
.detail-facts__row:last-child {
  border-bottom: 0;
}

.detail-facts__label {
  color: var(--ink-500);
}

.detail-facts__value {
  color: var(--ink-900);
  font-weight: 700;
}

.detail-facts__value a {
  color: var(--accent);
}

/* ── 右サイドバー: プロモ ───────────────────────────────────── */
.detail-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  /* 【既定値を持たせる（2026-09-01）】このカードはエリアLPの左サイドバーでも使うようになり、
     そこは `.detail-redesign` の外なので `--detail-card-radius` が**未定義＝角丸0**に落ちていた
     （作者の指摘。実測で border-radius: 0px）。詳細ページでは従来どおり変数が勝つ。 */
  border-radius: var(--detail-card-radius, 24px);
  overflow: hidden;
  background: var(--ink-800);
  color: #fff;
}

.detail-promo__image {
  position: absolute;
  inset: 0;
  background-image: url('/assets/home/hero-960.webp');
  background-size: cover;
  background-position: center;
}

/* 背景写真の上に 40% の暗幕。文字は白 */
.detail-promo__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.detail-promo__text {
  position: relative;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.detail-promo .glass-pill {
  position: relative;
}

/* ── 右サイドバー: プラン ───────────────────────────────────── */
/* 「プラン」。カードのタイトルと同じ役割なので .detail-card__title と同じ扱いにする
   （字送りは18px基準。comp の 0.3828px は20px基準＝0.3828/18 ≒ 0.0213em） */
.detail-plan__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.0213em;
  color: var(--ink-900);
}

.detail-plan__prices {
  display: flex;
  gap: var(--space-4);
}

.detail-plan__price {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(20, 24, 26, 0.04);
}

.detail-plan__price-label {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 21.7px;
  letter-spacing: -0.015em;
  color: rgba(20, 24, 26, 0.64);
}

.detail-plan__price-value {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink-900);
  letter-spacing: -0.0075em;
}

.detail-plan__price-value b {
  font-size: var(--text-lg);
  font-weight: 700;
}

.detail-plan__price-value span {
  font-size: 10px;
  font-weight: 400;
}

/* 【最安値の節に回り方のタブを置く — issue #63】スニペット（18H基準）と、着地して最初に見る
   大きな数字（ハーフ込み）が最大45%ちがっていた。「料金の県内での位置」と同じピルタブで
   基準を選べるようにする（既定18H）。**タブは小見出し「最安値」の右**に置く — カード見出し
   「プラン」の右だと検索条件に掛かって見え、「9Hのプランだけ検索できる」と読める（作者の指摘）。
   見出し左・タブ右・パネル全幅の並べ方は .tabs--pill-inline（料金の県内での位置と同じ）を
   そのまま使う。ここに足すのは行間と、タブが無いときの高さの確保だけ。 */
.detail-plan__minprice-tabs {
  row-gap: var(--space-3);
}

.detail-plan__subheading {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

/* 【値が来る前からタブの行を確保する】data/prices.json は getCourseRatings とは別の経路で
   遅れて届く。タブが後から生えると下の条件・検索ボタンがずれる（CLS）。回り方が1つしか
   無いコース（実測 752/1,050）でも同じ高さを取る。26px は .tabs--pill-sm のピルの高さ。 */
.detail-plan__minprice-tabs > .detail-plan__tabslot {
  grid-column: 2;
  /* 【26px ではなく30px（2026-08-27 のデバッグで実測）】`.tabs--pill > .tabs__list` は
     `padding: 2px` を持つので、26px のピルが入った列の実高は **30px**（border-box）。
     26px で予約すると、タブが生えた瞬間に下の条件・検索ボタンが**4px下がる**
     （2つの回り方を持つ115ページで発生）。 */
  min-height: 30px;
}

.detail-plan__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* 3本の行（プレー日・スタート時間・詳細条件）の中の文字。枠（ピル）は
   プレー日・スタート時間が .sidebar-picker__toggle、詳細条件が .sidebar-accordion__summary。 */
.detail-plan__field-label {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-500);
}

.detail-plan__field-value {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  font-size: var(--text-sm);
  letter-spacing: -0.011em;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 見た目を消してもキーボードのフォーカスは見えるようにする */
/* 【プレー日の行も同じピルに揃える】この行だけ既存の日付ピッカー
   （.sidebar-picker__toggle）を差し込んでいるため、素だと高さ67px・角丸なしで
   他の2行と揃わない。**ピッカーの中身は作り直さず**、見た目だけ合わせる。 */
/* 【3つの間隔を揃える】.detail-date は本文用に margin-bottom:16px を持っており、
   そのままだと プレー日→スタート時間 だけ 28px（12+16）になる。
   間隔は .detail-plan__fields の gap（12px）だけで作る。 */
.detail-plan__fields .detail-date {
  width: 100%;
  margin-bottom: 0;
}

.detail-plan__fields .sidebar-picker__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: 9px 17px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.detail-plan__fields .sidebar-picker__label {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-500);
}

/* 【全角の「）」の分だけ詰める】"2026/09/12（土）" は字の右に約0.55em（14pxで9.6px）の
   余白を持つ（canvas の actualBoundingBoxRight で実測）。ボックスは他の行と揃っていても
   **目には左にずれて見える**（作者の指摘・2026-08-26）。この行の値だけ視覚的に詰める。
   プレー日は必ず確定しているので、括弧の無い「日付を選択」がここに出ることはない。 */
.detail-plan__fields .detail-date .sidebar-picker__value {
  margin-right: -0.55em;
}

.detail-plan__fields .sidebar-picker__value {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 【カレンダーはプレー日の真下に出す】検索結果サイドバーと同じ挙動（作者の指示・2026-08-26）。
   中央オーバーレイ（旧 html.is-date-open）はフィールドごと画面中央へ飛び、押した場所と
   開く場所が離れるため廃止した。位置決めは .sidebar-picker__popup（css/views-results.css）
   の絶対配置をそのまま使うので、ここは基準（position: relative）と幅だけを与える。 */
.detail-plan__fields .detail-date__picker {
  position: relative;
  max-width: none;
  width: 100%;
}

/* プラン一覧モーダルの条件行（プレー日・スタート時間・詳細条件）。
   カードと同じ .detail-plan__fields をそのまま入れるので、幅と余白だけ整える。 */
.plans-modal__fields {
  /* 【罫線を引かない】一番上のプランカードの上辺にくっついて二重線に見える
     （作者の指摘・2026-08-26）。条件行とプランの区切りは余白だけで足りる。
     【左右は持たない】この要素は .modal（padding 24px）の直下なので、左右を足すと
     下のプラン行より24px内側にずれる（2026-08-26 の監査で実測） */
  padding: 0 0 var(--space-4);
}

.plans-modal__fields .detail-plan__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 詳細条件のパネルはモーダルの中でも**下に押し出さず**重ねて出す（カードと同じ作法） */
.plans-modal__fields .detail-plan__filters > .sidebar-accordion__body {
  max-height: min(320px, 50vh);
}

@media (max-width: 700px) {
  .plans-modal__fields {
    padding: 0 0 var(--space-3);
  }
}

/* ── モバイルの固定CTA ────────────────────────────────────────
   1カラムではプランカードが最下部に来るので、予約導線に届くまで全部スクロールすることになる。
   **並びは変えず**（プランをタブの上に出すと、タブを切り替えるたびに跨ぐ）、画面下に
   「最安値＋プランを見る」を固定して、押すと既存のプラン一覧モーダルを開く。
   デスクトップは右サイドバーが常に見えているので出さない。 */
.detail-cta {
  display: none;
}

@media (max-width: 900px) {
  .detail-cta:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60; /* モーダル(100)より下・タブ帯より上 */
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    /* iPhone のホームインジケータぶんを足す（固定要素が指の届かない位置に入らないように） */
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 12px rgba(20, 24, 26, 0.08);
  }

  /* 【プランカードは隠す】1カラムではカードが「他のゴルフ場」9枚の後ろ＝ページ最下部
     （全高の87%の位置）に来る。予約導線は固定バーとモーダルに集約する（作者の指示・
     2026-08-26）。**プロモカードは残す**（サービスの説明なので最下部でよい）。
     カードのDOMは残す＝絞り込みの結果を持つのはこれまでどおりカード側 */
  .detail-card.detail-plan {
    display: none;
  }

  /* 左のプレー日。ドロップダウンの中身は右サイドバーと同じ部品（.detail-date） */
  .detail-cta .detail-date {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
  }

  .detail-cta .detail-date__picker {
    position: relative;
    max-width: none;
    width: 100%;
  }

  .detail-cta .sidebar-picker__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding: 9px var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--surface);
  }

  .detail-cta .sidebar-picker__label {
    /* 幅が狭いので「プレー日」は目には見せない。**display: none にはしない**
       （読み上げからも消えて、ボタンの名前が日付だけになる）。base.css の
       .visually-hidden と同じ隠し方にする */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .detail-cta .sidebar-picker__value {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0;
    max-width: none;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--ink-900);
  }

  /* 【カレンダーは上に開く】固定バーは画面最下部なので、既定の「トグルの真下」だと
     画面外に出る。幅もバーの半分では足りないので画面幅いっぱいに広げる */
  .detail-cta .sidebar-picker__popup {
    top: auto;
    bottom: calc(100% + var(--space-2));
    left: 0;
    width: calc(100vw - var(--space-4) * 2);
    max-width: 360px;
    max-height: min(60vh, 420px);
  }

  .detail-cta__button {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: var(--space-4);
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
  }

  /* 固定バーがページ最下部に重なるぶんの余白。**body に持たせる**（.detail-redesign に
     付けてもフッターは #app の外にあるので、楽天の必須クレジットが隠れたままになる）。
     クラスの付け外しは js/views/detail.js、離脱時の解除は transient-overlays.js */
  body.has-plan-cta {
    /* 【safe-area を足す】CTA自身は env() を持つのに、ここが固定値だったため
       ノッチ端末（34px）でページ最下部＝楽天GORAの必須クレジットが隠れていた
       （2026-08-26 の監査） */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* 「すべてのプランを見る（N件）」。カードには5件までしか並べない（残りはモーダル） */
.detail-plan__more {
  width: 100%;
  min-height: 40px;
  margin-top: var(--space-3);
  padding: 10px var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.detail-plan__more:hover {
  background: var(--surface-sunken);
}

/* 料金の断りは一覧の下に1回だけ（行ごとに繰り返さない） */
.detail-plan__note {
  margin: var(--space-2) 0 0;
  font-size: 10px;
  color: var(--ink-500);
}

/* 詳細条件。閉じているときは他の2行（プレー日・スタート時間）と同じピルに見せ、
   開くと検索トップと同じ条件パネルをその場に出す（ページは移らない） */
.detail-plan__filters {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

/* 開いてもレイアウトを押し下げない（プレー日のカレンダーと同じ作法＝トグルの真下に絶対配置）。
   作者の指示は「トップページのようにポップアップで出す」なので、行の高さは変えない */
.detail-plan__filters {
  position: relative;
}

.detail-plan__filters > .sidebar-accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 9px 17px;
  list-style: none;
  cursor: pointer;
}

.detail-plan__filters > .sidebar-accordion__summary::-webkit-details-marker {
  display: none;
}

.detail-plan__filters .detail-plan__field-value {
  flex: 1 1 0;
  text-align: right;
}

/* アコーディオン既定のシェブロンは使わない（他の2行と大きさ・余白が違い、値の右端がずれる） */
.detail-plan__filters > .sidebar-accordion__summary::after {
  display: none;
}

/* 開いたら向きを変える（閉じているときは他の2行と同じ「下向き」） */
.detail-plan__filters[open] > .sidebar-accordion__summary .detail-plan__field-chevron {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.detail-plan__filters > .sidebar-accordion__body {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  /* 【固定CTA(60)より上】900px以下ではカードがページ最下部にあり、パネルは下へ開く。
     40 のままだと画面下の固定CTA（高さ68px＋safe-area）に潜って**その部分が押せない**
     （2026-08-26 の監査）。モーダル(100)より下は保つ */
  z-index: 70;
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* 注記は行の外に小さく出す（行の高さを崩さない） */
.detail-plan__fields .detail-date__note {
  display: block;
  margin-top: var(--space-1);
  padding-inline: 17px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-400);
}

.detail-plan__field-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid var(--ink-400);
  border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg);
}

.detail-plan__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: var(--space-4);
  padding-inline: 17px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 14.4px;
  cursor: pointer;
}

.detail-plan__submit:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* ── スマホ ─────────────────────────────────────────────────
   1カラムに落とす。ヒーローの見出しは 48px だと 375px で3行になるので詰める。 */
@media (max-width: 900px) {
  .detail-redesign__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-redesign__side {
    position: static;
  }

  .detail-hero-band {
    min-height: 320px;
  }

  .detail-hero-band__inner {
    padding-inline: 0;
  }

  .detail-hero-band__title {
    font-size: var(--text-2xl);
  }

  .detail-hero-band__lead {
    text-align: left;
  }

  .detail-tabs > .tabs__list {
    justify-content: flex-start;
    gap: 0;
    /* 【タブと同じ高さにする】タブだけ52pxに上げていたので、選択中の緑が帯の外に1px出ていた
       （2026-08-26 の実測: タブ49px / 帯48px。デスクトップは両方48pxで偶然揃っていた） */
    min-height: 52px;
  }

  .detail-tabs > .tabs__list > .tabs__tab {
    min-height: 52px;
    /* 【12px＋左右12px】4タブを375pxに収めるための値（作者の指示・2026-08-26）。
       16px だと合計471pxで「口コミ」が画面外に出ていた（2026-08-26 の実測）。
       収まるので横スクロールの手がかり（フェード）も出ない */
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
  }

  /* 【濃色の帯ではフェードを使わない】マスクは帯の地色ごと透明にするので、
     暗い帯の右端が**白いグラデーション**に見える（作者の指摘・2026-08-26）。
     上の12px化で4タブが収まるため手がかり自体が不要。ピル型（白地）はそのまま使う */
  .detail-tabs > .tabs__list.can-scroll-right,
  .detail-tabs > .tabs__list.can-scroll-left,
  .detail-tabs > .tabs__list.can-scroll-left.can-scroll-right {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .detail-facts__row {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}

/* ── 同じエリアの他のゴルフ場（カード一覧） ─────────────────────
   Figma 75:207 の 174:5848。**このブロックは #app の外**（プリレンダが SEO のために
   退避する唯一の内部リンク経路）なので、ビューの配線が届かない。
   平日/休日の切替は**ラジオと :checked ~ だけ**で作る（JSを増やさない）。
   マークアップは scripts/prerender-course.mjs の siblingLinksHtml が唯一の実装。 */
.sibling-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
}

/* ラジオは見せない（操作はラベル＝チップ側で行う）。
   display:none だとキーボードで到達できなくなるので、視覚的にだけ隠す */
.sibling-grid__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sibling-grid__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sibling-grid__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 48px;
  color: var(--ink-900);
}

.sibling-grid__switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sibling-grid__switch-label {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.sibling-grid__chip {
  min-width: 96px;
  padding: 8px var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

/* 選択中のチップ。ラジオはリストより前にあるので `~` で届く */
#sibling-price-weekday:checked ~ .sibling-grid__head label[for='sibling-price-weekday'],
#sibling-price-holiday:checked ~ .sibling-grid__head label[for='sibling-price-holiday'] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* キーボード操作でも選択位置が分かるようにする */
.sibling-grid__radio:focus-visible ~ .sibling-grid__head .sibling-grid__chip {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sibling-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sibling-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.sibling-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.sibling-card__link:hover .sibling-card__name {
  text-decoration: underline;
}

/* 写真はプリレンダのデータに無いので、写真の無いコースと同じ面で出す */
.sibling-card__media {
  display: block;
  width: 100%;
  /* 【height: auto が要る】img の height 属性（240）が presentational hint として効くため、
     これが無いと aspect-ratio が使われず**ほぼ正方形**になる（実測 0.99。作者の指摘
     「縦長になっている・左右がトリムされている気がする」の正体） */
  height: auto;
  aspect-ratio: 4 / 3;
  /* object-fit が無いと写真が枠に合わせて歪む。検索結果カードと同じく cover で切り取る */
  object-fit: cover;
  background: linear-gradient(160deg, var(--accent-light) 0%, var(--surface-sunken) 100%);
}

.sibling-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.sibling-card__name {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-900);
}

.sibling-card__where,
.sibling-card__meta {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.sibling-card__price {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--border-color);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink-900);
}

/* 平日/休日の出し分け。**どちらか一方だけを出す** */
#sibling-price-weekday:checked ~ .sibling-grid__list .sibling-card__price--holiday,
#sibling-price-holiday:checked ~ .sibling-grid__list .sibling-card__price--weekday {
  display: none;
}

.sibling-grid__more {
  margin: var(--space-5) 0 0;
  text-align: center;
}

.sibling-grid__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}

.sibling-grid__more-link:hover {
  background: var(--accent-dark);
}

@media (max-width: 900px) {
  .sibling-grid {
    padding-inline: var(--space-4);
  }

  .sibling-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sibling-grid__title {
    font-size: var(--text-2xl);
    line-height: 1.3;
  }
}

@media (max-width: 560px) {
  .sibling-grid__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 左カラムに借りてきた「同じエリアの他のゴルフ場」。
   退避ブロックは section.view > .container.prerender の形なので、
   左カラムの中では余白と最大幅を打ち消す（.container は 1200px 想定のため）。 */
.detail-redesign__siblings:empty {
  display: none;
}

.detail-redesign__siblings .container.prerender {
  max-width: none;
  padding: 0;
}

.detail-redesign__siblings .sibling-grid {
  max-width: none;
  padding: var(--space-5) 0 0;
}

/* 【左カラムでも3列】752px に3列で1枚 240px（comp は 228.67px）なので収まる。
   2列にしていたが、作者の指示で comp どおり 3列×3行＝9件にする（2026-08-26）。 */
.detail-redesign__siblings .sibling-grid__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .detail-redesign__siblings .sibling-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .detail-redesign__siblings .sibling-grid__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── サイドバーのプラン一覧（Figma 174:4878） ─────────────────
   行の実装は js/components/plan-row.js（.plan-row）が唯一。ここは**360pxの中に
   収める見た目だけ**を上書きする。検索結果の一覧と同じ部品なので、
   あちらの .plan-row を壊さないよう必ず .detail-plan__list の中だけに効かせる。 */
/* 【検索ボタンとの間は16px】カードの gap は12pxなので、一覧の頭だけ足す
   （作者の指示・2026-08-26）。hidden のときは余白ごと消える */
.detail-plan__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-4);   /* 検索ボタンとの間（実測で16pxになることを確認する） */
}

.detail-plan__list .plan-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 17px;
  /* 【border-color は上書きしない】`border` の一括指定は border-color も含むので、
     `.plan-row:hover { border-color: var(--ink-300) }`（同じ詳しさ・先に読まれる）を
     打ち消して**サイドバーの行だけホバーが死んでいた**（2026-08-26 の監査）。
     幅と種類だけを指定して、色はホバー側に譲る */
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.detail-plan__list .plan-row:hover {
  border-color: var(--ink-300);
  box-shadow: var(--shadow-sm);
}

.detail-plan__list .plan-row__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-plan__list .plan-row__title {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 24.8px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

/* 【行を横に並べない】360px では料金とボタンが1行に収まらない。
   comp は 750px 幅のサイドバーを想定していないので、縦に積む */
.detail-plan__list .plan-row__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.detail-plan__list .plan-row__price-value {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 27.9px;
  letter-spacing: -0.024em;
  color: var(--ink-900);
}

.detail-plan__list .plan-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 【時間チップは横スクロール】クラスは .plan-times（plan-row.js が持つ名前）。
   360px のサイドバーでは6枠が収まらず、実測で 290px の枠に 1,146px 出ていた。
   **入れ物の名前を間違えると気づけない**ので、はみ出し幅を測って確認すること。 */
.detail-plan__list .plan-times {
  overflow-x: auto;
  scrollbar-width: thin;
  flex-wrap: nowrap;
}

/* 【検索ボタンとの間は16px】カードの中の縦の刻みは16px（値段の箱・条件の3行・検索ボタン・
   プラン一覧がすべて margin-top: 16px）。ここだけ 0 だったので、プランが0件の日に
   ボタンとテキストがくっついて見えていた（作者の指摘・2026-08-27。実測 0px → 16px）。
   一覧モーダルの中（.plans-modal__body の唯一の子）でも同じ余白でよい */
.detail-plan__empty {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* 【後から届く中身のぶんの高さを先に取る（issue #58・2026-08-27 の実測）】
   施設・コース・料金の3枠は、実データ（GoraGolfCourseDetail）と data/prices.json が
   届いてから埋まる。空のままだと左カラムが162pxしかなく、その下の「同じエリアの
   他のゴルフ場」（1,343px）が **y=620＝ビューポートの中**に入る。中身が届くと左カラムが
   1,415px伸びて塊が y=2035 へ動き、**画面内に見えていた186pxぶんが CLS 0.1416 として
   計上されていた**（rAFで追跡した実測。詳細は issue #58 のコメント）。
   **確保する量はビューポート基準にする。** 固定pxだと画面が縦に長い端末で塊が画面内に
   残って再発する（100px×2枠で siblings が y=820 ＝806pxの画面ではぎりぎり外だが、
   900pxの画面では中に入る）。カード1枚で「ヒーロー＋タブ帯の下から画面の底まで」を
   埋めれば、どの画面の高さでも塊は折り返しの下から始まる。
   470px ＝ ヒーロー410 + タブ帯48 + カードの上余白。埋まったあとのカードの実測は
   1,249px以上あるので、通常の画面ではこの min-height が余白として残ることはない。 */
.detail-card--reserve-fold {
  min-height: calc(100vh - 470px);
}

/* ── 料金の県内での位置（js/components/price-position.js） ──────────────
   静的HTMLとSPAの両方で使う。**列1本＝1つの価格帯**で、高さは件数の比。
   デザインはこれから決める前提の素の形（2026-08-27）。 */
.price-pos {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* 【ラベルの下に金額】左右に離すと右端の金額がヒストグラムの最大料金に見える
   （作者の指摘・2026-08-27） */
.price-pos__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-2);
}

.price-pos__label {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.price-pos__value {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

/* 価格帯のヒストグラム。左が安い帯・右が高い帯 */
.price-bands {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  height: 64px;
  margin: var(--space-2) 0 6px;
}

/* 列1本（押すとその価格帯のコース一覧） */
.price-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative; /* ツールチップ（[data-tooltip]:hover::after）の基準 */
}

.price-band:disabled {
  cursor: default;
}

.price-band__bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--border-color);
  transition: background 0.15s ease;
}

.price-band:not(:disabled):hover .price-band__bar {
  background: var(--ink-300, rgba(20, 24, 26, 0.24));
}

/* このコースが入る帯 */
.price-band--current .price-band__bar {
  background: var(--accent);
}

.price-band__count {
  /* 【12px未満にしない（issue #65・2026-08-27）】10pxで24個あり、375pxでの可読性の
     下限を割っていた。件数の最大は45（2桁・全県×全回り方で実測）なので、
     36pxの列に12pxでも収まる */
  font-size: 12px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.price-pos__scale {
  /* 列8本に対して目盛りは1つおき（4つ）。列2本ぶんの幅に1つずつ左寄せで置くと、
     どの列がどの帯かが目で追える */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  font-size: 10px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* 【モバイルは上下の境目で必ず折り返す（作者の指摘・2026-08-28）】375pxでは
   `¥6,000〜¥7,999` が1行・`¥10,000〜¥12,999` が2行と**桁数で高さが変わり**、
   目盛りの行が不揃いに見えていた。上限だけの帯（`〜¥3,999`）は1要素なので1行のまま。
   デスクトップは幅に余裕があるので折り返さない（横に伸ばしたほうが読みやすい）。 */
@media (max-width: 700px) {
  .price-pos__scale > span > span {
    display: block;
  }
}

.price-pos__note {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  color: var(--ink-900);
}

/* 価格帯のコース一覧（モーダルの中身 / 静的HTMLの「同じ価格帯のゴルフ場」） */
.price-band-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.price-band-list__item {
  display: flex;
  align-items: baseline;
  /* 【名前の逃げ場を作る（2026-09-02）】行は「料金 / 名前 / 補足 / 評価」の横並びで、
     名前だけが伸び縮みする要素。気候モーダルの補足（`24.9℃ ・ 744m`）は設計者モーダルの
     補足（県名3文字）より広く、375pxで名前が**1文字ずつ折り返して**いた。
     入りきらないときは補足と評価を次の行へ送る。 */
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
}

/* 2番目の子＝コース名（リンク or 素のテキスト、「このページ」の行では span で包まれる）。
   クラスが無いので位置で指す。ここだけが余白を吸う */
.price-band-list__item > :nth-child(2) {
  flex: 1 1 9em;
  min-width: 0;
}

.price-band-list__item:last-child {
  border-bottom: 0;
}

.price-band-list__price {
  min-width: 72px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

.price-band-list__self {
  margin-left: var(--space-2);
  font-size: 10px;
  color: var(--ink-500);
}

.price-band-list__rest {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* 同じ価格帯のコース（押さずに見える先頭5件。issue #60）。モーダルの中の一覧と
   同じ .price-band-list を使い、ここでは見出しと「すべて見る」だけを足す。 */
.price-peers {
  margin-top: var(--space-5);
}

.price-peers__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-700, var(--ink-900));
  line-height: 1.5;
}

/* 【見出しの右に平日/休日のタブを置く（作者の提案・2026-08-28）】縦に2つ並べると
   12件×2でページが伸び、ヒストグラムから遠いほうは見出しを読まないとどちらの話か
   分からなかった。切り替えにすれば**どちらも12件のまま**1つ分の高さに収まる。
   並べ方は「料金の県内での位置」の 18H/9H と同じ（.tabs--pill-inline）。
   `.tabs--pill-inline` は h2/h3 だけを1列目に置く指定なので、h4 もその仲間に入れる。 */
.tabs.tabs--pill-inline > .price-peers__title {
  grid-column: 1;
  margin-bottom: 0;
}

/* 帯の範囲はパネルの中に出す（平日と休日で帯が違い、見出しは切り替わらないため）。 */
.price-peers__range {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* 【気候の「◯◯県で9月に涼しいコース」も同じボタン（作者の求め・2026-09-02）】
   同じ「一覧をモーダルで開く」導線なので見た目をそろえる。宣言を2つ書くと
   どちらかだけ直ってズレるので、セレクタを足して共有する（.designer-link と同じ扱い）。 */
.price-peers__more,
.climate-peers__link {
  margin-top: var(--space-2);
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.price-peers__more:hover,
.climate-peers__link:hover {
  background: var(--surface-sunken);
}

/* 【中立な名前にした（2026-09-03）】価格帯モーダルの並べ替えで生まれた部品だが、
   設計者モーダルと気温の帯（最高/最低/県内平均の切り替え）でも同じ形を使う＝3か所目。
   `.price-band-sort` のままだと「価格の部品を借りている」ようにしか読めないので改名した
   （js/components/price-position.js に「呼び出し元が増えたら中立な名前に変える」と
   書いてあったのを実行した）。 */
.pill-tabs {
  display: flex;
  /* 設計者モーダルは3つ並ぶ（口コミ評価が高い順／安い順／県ごと）。375px で溢れさせない */
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.pill-tabs__btn {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

/* 【選択状態は黒（作者の指摘・2026-09-02「pillタブは選択状態は黒のはずだった」）】
   デザインシステム側の同じ形（css/views-detail.css の `.tabs--pill` の is-active）が
   `--ink-900` を使っている。緑は `.tabs--pill-accent` のほうの変種で、こちらではない。 */
.pill-tabs__btn.is-active {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}

.pill-tabs__btn:hover {
  background: var(--surface-sunken);
}

/* 見出しと同じ行に置く小さいピル（css/views-detail.css の `.tabs--pill-sm` と同じ寸法）。
   32px のままだと見出しの行が高くなり、行の中で縦位置がそろわない。気温の帯が使う */
.pill-tabs--sm > .pill-tabs__btn {
  padding: 3px 10px;
  font-size: 11px;
}

/* 選択中は hover で色が動かない（`.tabs--pill` と同じ挙動） */
.pill-tabs__btn.is-active:hover {
  background: var(--ink-900);
}

/* 一覧の行に出す補足（設計者モーダルの県名）。評価は margin-left:auto で右端に寄るので、
   これは名前のすぐ後ろに置く。価格帯モーダルは同じ県内なので note を渡さない＝出ない */
.price-band-list__note {
  font-size: var(--text-xs);
  color: var(--ink-500);
  white-space: nowrap;
}

/* 「コース情報」の設計者名（押すと同じ設計者のゴルフ場一覧が開く）。
   表の行の中に置くので、ボタンではなく**本文と同じ大きさのリンク**に見せる
   （周りの行は文字なので、ボタンの箱を並べると設計者だけが浮く） */
.designer-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.designer-link:hover {
  text-decoration-thickness: 2px;
}

/* 手がけたコース数。押す前に「何件あるか」がわかると、開くかどうかを決められる */
.designer-link__count {
  margin-left: 3px;
  font-size: var(--text-xs);
  color: var(--ink-500);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.designer-link__count::before {
  content: '(';
}

.designer-link__count::after {
  content: ')';
}

/* 一覧の行に出す口コミ評価（並べ替えの根拠が見えるように） */
.price-band-list__rating {
  margin-left: auto;
  padding-left: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* 【評価が無い行でも同じ幅を取る（作者の報告・2026-09-02）】`★4.4` のぶん
     （box-sizing: border-box なので padding-left も含んだ幅）。ここが0幅だと、
     その行だけ手前の列（気温・県名）が★の位置まで右へ滑る。
     **偽の「★0.0」を隠して置く手は採らない**（この一覧は静的HTMLにも出るので、
     見えない評価の文字がページの中身として残る） */
  min-width: 3.6em;
  text-align: right;
}

/* 見出し横の「？」（js/components/info-tip.js）。定義をコンパクトに出す共通部品 */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* 【和文の字面中心に合わせる】`vertical-align: middle` は「ベースライン＋x-heightの半分」に
     合わせる指定で、欧文の小文字を基準にしている。和文の字面（漢字・カナ）は x-height より
     高い位置に中心があるため、そのままだとアイコンが低く座る（18pxの見出しで**2.0px下**＝約0.155em。
     canvas の TextMetrics で文字のインク範囲を実測。2026-08-27・作者の指摘）。
     em で指定して、見出しの文字サイズが変わっても比率が保てるようにする。
     **`position: relative` の top で動かす**（margin だと行の高さが変わる） */
  top: -0.155em;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-300, rgba(20, 24, 26, 0.32));
  cursor: pointer;
  position: relative; /* ツールチップ（[data-tooltip]:hover::after）の基準 */
}

/* 【タップ領域を32×32にする（issue #65・2026-08-27 実測で16×16＝最小の操作要素だった）】
   見た目は16pxのまま当たり判定だけ広げる（padding だと見出しの行の高さが変わる）。
   `::after` はツールチップが使っているので `::before` を使う。 */
.info-tip::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.info-tip:hover,
.info-tip:focus-visible {
  color: var(--ink-500);
}

/* 一覧の中の外部リンク（ページを持たないコースは楽天GORAへ） */
.price-band-list__ext {
  margin-left: 6px;
  font-size: 10px;
  color: var(--ink-500);
}

/* 「月別の気温」の月別の帯（issue #108）。
   【数字は必ず文字でも出す】バーは補助で、読むのは下の数字（料金の位置の節と同じ方針）。
   12列を375pxに収める必要があるので、1列あたり約26px（343 / 12 ≒ 28）に収まる寸法にする。 */
/* 帯の見出しの行。**見出しと同じ行の右にピル**（作者の求め・2026-09-02）。
   料金の 9H/18H と同じ形。狭いときはピルが下の行へ回る（375pxでは3つ並べる幅が無い） */
.climate-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
}

.climate-graph-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.climate-series {
  margin: 0;
}

.climate-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  /* 【幅は器いっぱい（作者の求め・2026-09-02）】480px で止めていたのでデスクトップだと
     カードの左半分に寄っていた。列が広がるぶんバーも太くなる（下の __bar は割合指定）。 */
}
.climate-strip__col {
  display: grid;
  /* バー / 気温 / 月 の3段。バーの行だけ高さを固定して、値の大小が高さで読めるようにする */
  grid-template-rows: 40px auto auto;
  align-items: end;
  justify-items: center;
  gap: 2px;
}
.climate-strip__bar {
  /* 列幅に対する割合にして、狭い画面では従来どおり（375px で列23.9px → 約14px）、
     広い画面では列が広がるぶん太くなるようにする。太くなりすぎる手前で止める */
  width: 60%;
  max-width: 32px;
  border-radius: 2px 2px 0 0;
  background: var(--accent-light-strong);
}
.climate-strip__col.is-peak .climate-strip__bar {
  background: var(--accent);
}
.climate-strip__temp {
  white-space: nowrap;
  /* 【単位を足したので1段小さくする】`10月` は var(--text-xs)=12px だと375pxの列(約24px)に
     収まらない。11px にすると収まる（実測）。表のほうは var(--text-sm) のままなので、
     数字を読むのは表・帯は形を見るもの、という役割分担は変わらない */
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
}
.climate-strip__col.is-peak .climate-strip__temp {
  font-weight: 700;
  color: var(--ink-900);
}
.climate-strip__month {
  /* 【折り返させない（2026-09-02 の実測で発覚）】`10月` が375pxの列に収まらず2行になり、
     帯の下がガタついていた。はみ出しの検査（scrollWidth > clientWidth）は**折り返すと
     引っかからない**ので見落としていた。収まる大きさまで落として、折り返しを禁止する */
  white-space: nowrap;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}

/* これからの3か月の表（issue #108）。4列×3行しかないので横スクロールに倒さず、
   375px にそのまま収める（.prerender-table は min-width 720px なので使えない）。 */
.climate-table {
  border-collapse: collapse;
  /* 帯と同じく器いっぱい（作者の求め・2026-09-02）。上下で幅がそろっていないと、
     表の「9月」と帯の「9月」が同じ列に見えない */
  width: 100%;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  /* 【列幅を決め打つ（作者の求め・2026-09-02）】自動レイアウトだと4列が器いっぱいに
     広がり、数字が右端まで散っていた。上の「コース」の表と縦のラインをそろえる */
  table-layout: fixed;
}
.climate-table th,
.climate-table td {
  /* 【左の余白は取らない】余白があると文字の左端が列の境界から8pxずれ、上の表とそろわない
     （実測でそうなった）。列の境界＝文字の左端にする */
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-bottom: 1px solid var(--border-color);
  /* 【左寄せでラインをそろえる】値の**左端**が上の表の値と同じ位置に来るようにする。
     右寄せだと列の右端でしかそろわず、上の表（値は左寄せ）とは重ならない */
  text-align: left;
  white-space: nowrap;
}
/* 月の列は上の表のラベル列と同じ幅にする（.detail-facts__row の grid-template-columns と
   同じ 153px）。これで「最高」の値が上の表の値と同じ縦線から始まる */
.climate-table th:first-child,
.climate-table td:first-child {
  width: 153px;
  font-weight: 700;
}
/* 最高・最低は内容ぶんだけ。余りは最後の列（県内平均）が持ち、右に余白が出る
   （作者の指示・2026-09-02「右にスペースができてもいい」） */
.climate-table th:nth-child(2),
.climate-table td:nth-child(2),
.climate-table th:nth-child(3),
.climate-table td:nth-child(3) {
  width: 110px;
}
.climate-table thead th {
  color: var(--ink-500);
  font-weight: 600;
  font-size: var(--text-xs);
}
.climate-table thead th:first-child {
  font-weight: 600;
}
/* 県内平均は「比べる相手」なので、自分の値より弱く見せる */
.climate-table .is-area {
  color: var(--ink-500);
}

/* 【モバイルは詰める（作者の指示・2026-09-02「モバイルではスペースの確保が難しいので
   今のままでいい」）】375px では153pxの列を置くと数字の居場所が無くなる。
   自動レイアウトに戻し、数字は右寄せで列の右端にそろえる */
@media (max-width: 700px) {
  .climate-table {
    table-layout: auto;
  }
  .climate-table th,
  .climate-table td {
    padding: var(--space-1) var(--space-2);
    text-align: right;
  }
  .climate-table th:first-child,
  .climate-table td:first-child,
  .climate-table th:nth-child(2),
  .climate-table td:nth-child(2),
  .climate-table th:nth-child(3),
  .climate-table td:nth-child(3) {
    width: auto;
  }
  .climate-table th[scope='row'],
  .climate-table thead th:first-child {
    text-align: left;
  }
}

/* 「◯◯県で9月に涼しいコース」を開くボタン */
.climate-peers {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}