/* 共通の土台（2026-11-10）
   仕上がった5ページ（TOP・AI 提案・七賢・宿場esoto・旅程）の決まりを、ほかのページに当てる層。
   body に silver のクラスがあるページだけに効く（registry.json の attrs.class）。仕上がったページには付けない。
   大きさと余白は白銀比（1 : 1.414）の刻み。変数は system.css の .ds にある（--s-n4〜--s-10、--lh-body、--lh-head）。
   部品の名前と使い方：/tokens（見本帳）と design-briefs/共通部品の使い方.md */

.ds.silver {
  --ds-h1: var(--s-6); --ds-h2: var(--s-4); --ds-h3: var(--s-1); --ds-sec: var(--s-10);
  --ds-sumi: var(--semantic-color-text-primary);
  --ds-muted: var(--semantic-color-text-muted);
  --ds-face: var(--semantic-color-surface-muted);
  --ds-tint: var(--semantic-color-surface-tint);
  --ds-rule: var(--semantic-color-border-default);
  --ds-band: var(--component-band-surface);
  --ds-band-text: var(--component-band-text);
}
.silver main {
  --sp-1: var(--s-n4); --sp-2: var(--s-n2); --sp-3: var(--s-0); --sp-4: var(--s-1); --sp-5: var(--s-4); --sp-6: var(--s-10);
  --c-accent: var(--ds-sumi);
  font-size: var(--s-0); line-height: var(--lh-body); color: var(--ds-sumi);
}
@media (max-width: 767px) {
  .ds.silver { --ds-h1: var(--s-4); --ds-h2: var(--s-2); --ds-sec: var(--s-8); }
  .silver main { --sp-6: var(--s-8); }
}

/* ---------- 文字：本文 18px、ラベル 15px、注記 13px。13px より小さい字は使わない ---------- */
.silver main :is(p, li, dd, td, blockquote, figcaption, summary) { font-size: var(--s-0); line-height: var(--lh-body); }
.silver main :is(h1, h2, h3, h4) { line-height: var(--lh-head); }
.silver main h3 { font-size: var(--ds-h3); }
.silver main :is(dt, th, label, legend, .card__kicker, .detail__kicker, .zone-head__kicker, .tour-kicker, .eyebrow, .tag, .tab, .topic-chip, .for-tags__label, .card__ref-label, .why__label, .why__name, .crumbs li, .crumbs a, .kicker) { font-size: var(--s-n1); line-height: var(--lh-head); letter-spacing: .04em; }
.silver main :is(.note, .checked, .price__note, .drive__zone, .media__credit, .caption, small) { font-size: var(--s-n2); line-height: var(--lh-body); color: var(--ds-muted); }
.silver main .btn { font-size: var(--s-n1); }
.silver main :is(.lead, .detail__lead, .tour-lead, .section__lead, .page-banner__text p, .page-intro > p, .tk__lead, .exits__lead) { max-width: 40em; font-size: var(--s-0); line-height: var(--lh-body); color: var(--ds-sumi); }

/* ---------- ページの頭 ----------
   A：全幅の写真（PC 21:9・スマホ 1.414:1）→ h1 → リード。 .page-banner に .media と .page-banner__text
   B：写真なし。h1 → リード → 墨の 1px 線。 .page-banner に .page-banner__text だけ（または main 直下の h1）
   C：詳細型。写真と要点を 1.414:1 で並べる。 .overview（下の「部品」） */
.silver main .crumbs ol { margin-block: var(--s-0) 0; gap: var(--s-n4); color: var(--ds-muted); }
.silver main .crumbs li + li::before { margin-right: var(--s-n4); }
.silver main .crumbs + .page-banner { margin-top: var(--s-0); }
.silver main .page-banner > .media { aspect-ratio: 21 / 9; max-height: min(64vh, 640px); border-radius: 0; background: var(--ds-face); }
.silver main .page-banner__text { padding: var(--s-6) 0 0; }
.silver main .page-banner__text h1, .silver main > h1, .silver main .zone-head h1, .silver main .detail__main > h1, .silver main .article--story > h1, .silver main .tour-head h1, .silver main .result h1, .silver main .article--text > h1 {
  margin-block: 0; font-size: var(--ds-h1); line-height: var(--lh-head); letter-spacing: .04em;
}
.silver main .page-banner__text h1 + p, .silver main > h1 + .lead, .silver main > h1 + .page-intro { margin-top: var(--s-0); }
.silver main .page-banner:not(:has(> .media)) .page-banner__text, .silver main > h1:not(:has(+ .lead, + .page-intro)), .silver main > h1 + :is(.lead, .page-intro) { padding-bottom: var(--s-4); border-bottom: 1px solid var(--ds-sumi); }
.silver main > h1, .silver main .article--text > h1 { margin-top: var(--s-6); padding-bottom: 0; border-bottom: 0; }
/* 頭 B のすぐ後に章が続くときは、章の線が区切りを兼ねる（線を二重に引かない） */
.silver main .page-banner:not(:has(> .media)):has(+ .section) .page-banner__text, .silver main > h1 + :is(.lead, .page-intro):has(+ .section) { padding-bottom: 0; border-bottom: 0; }
.silver main > h1:not(:has(+ .lead, + .page-intro)) { padding-bottom: var(--s-4); border-bottom: 1px solid var(--ds-sumi); }
.silver main .article--story > .media { aspect-ratio: 21 / 9; }
.silver main .article--story > h1 { margin-top: var(--s-6); }
@media (max-width: 767px) {
  .silver main .page-banner > .media, .silver main .article--story > .media { aspect-ratio: 1.414 / 1; max-height: none; }
  .silver main .page-banner__text { padding-top: var(--s-4); }
  .silver main > h1, .silver main .article--text > h1, .silver main .article--story > h1 { margin-top: var(--s-4); }
}

/* ---------- 章：上に墨の 1px 線＋h2。章と章の間は PC 102px／スマホ 72px ---------- */
.silver main > .section, .silver main > section.section, .silver main .article > .section, .silver main .detail__main > .section, .silver main .tour-group { margin-block: var(--ds-sec) 0; }
.silver main :is(.section > .section__title, section.section > h2:first-child, .article--story > h2, .article--text > h2, .tour-group > h2), .silver main > h2 {
  margin-block: 0 var(--s-4); padding: var(--s-0) 0 0; border-top: 1px solid var(--ds-sumi);
  font-size: var(--ds-h2); line-height: var(--lh-head); letter-spacing: .04em;
}
.silver main > h2, .silver main .article--text > h2, .silver main .article--story > h2 { margin-top: var(--ds-sec); }
.silver main :is(.section__lead, .tour-group > p) { margin-block: calc(-1 * var(--s-0)) var(--s-4); }
.silver main .section h3, .silver main .article h3 { margin-block: var(--s-4) var(--s-n2); }
@media (max-width: 767px) {
  .silver main :is(.section > .section__title, section.section > h2:first-child, .article--story > h2, .article--text > h2, .tour-group > h2), .silver main > h2 { margin-bottom: var(--s-1); }
  .silver main :is(.section__lead, .tour-group > p) { margin-block: calc(-1 * var(--s-n2)) var(--s-1); }
}

/* ---------- 写真がないとき：空箱を出さない ----------
   写真の読み込みに失敗すると img は消える（onerror="this.remove()"）。中身のない .media は枠ごと出さない */
.silver main .media__ph { display: none; }
.silver main .media:not(:has(img)) { display: none; }
.silver main .media { border-radius: 4px; }

/* ---------- 「施設確認中」の出し方（Takeru 11/10） ----------
   詳しいページ（エリア・ツアー・セルフツアー・泊まる・記事）では、集めている途中の項目を「施設確認中」と出す。
   それ以外（探す・目的別など）では出さず、要点の表（dl）は値が確認中の行ごと外す */
.silver:where(:not(.page-zone, .page-course, .tour-list, .page-tour, .page-stay, .page-story)) main :is(.facts, .card__facts, dl) > div:has(.tag--unknown) { display: none; }
/* 表（tr）と箇条書き（li）は、行が一つの施設や文なので消さない。確認中の札だけを外し、値が札だけのセルは「—」にする */
.silver:where(:not(.page-zone, .page-course, .tour-list, .page-tour, .page-stay, .page-story)) main td:has(> .tag--unknown:only-child)::before { content: "—"; color: var(--ds-muted); }
.silver:where(:not(.page-zone, .page-course, .tour-list, .page-tour, .page-stay, .page-story)) main :is(.tag--unknown, .tag--book-unk) { display: none; }
/* 出すときは札の形にせず、まわりの文字と同じ大きさの静かな文字にする */
.silver main .tag--unknown { padding: 0; border: 0; border-radius: 0; background: none; color: var(--ds-muted); font-size: inherit; font-weight: 400; line-height: inherit; letter-spacing: 0; }
.silver main .tag--book-unk { border: 1px solid var(--ds-rule); background: none; color: var(--ds-muted); }

/* ---------- 施設カード（.card--place） ----------
   写真 1.414:1 → 種別・エリア → 名前 → 一文 → 要点（最大3行）→「＋ 旅程に保存」。ボタンは下にそろえる。
   楽しみ方のポイントは、カードの中で2行に畳む（顔写真と名前は出さない。Takeru 11/10） */
.silver main .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18em), 1fr)); gap: var(--s-4) var(--s-1); align-items: stretch; }
.silver main .card--place { display: flex; flex-direction: column; gap: 0; height: 100%; min-width: 0; padding: 0; border: 0; background: none; }
.silver main .card--place .card__link { display: block; color: inherit; text-decoration: none; }
.silver main .card--place .media { aspect-ratio: 1.414 / 1; margin: 0 0 var(--s-0); }
.silver main .card--place .card__kicker { margin: 0 0 var(--s-n4); color: var(--ds-muted); font-weight: 400; }
.silver main .card--place .card__title { margin: 0; font-size: var(--s-1); line-height: var(--lh-head); letter-spacing: .04em; }
.silver main .card--place .card__link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .card--place .card__lead { margin: var(--s-n2) 0 0; color: var(--ds-sumi); }
.silver main .card--place .why { margin: var(--s-n2) 0 0; padding: 0 0 0 var(--s-n2); border: 0; border-left: 2px solid var(--ds-rule); background: none; }
.silver main .card--place .why__label, .silver main .card--place .why__who { display: none; }
.silver main .card--place .why__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--s-n1); line-height: var(--lh-body); color: var(--ds-muted); }
.silver main .card--place .for-tags { display: none; }
.silver main .card--place .card__facts { display: grid; gap: var(--s-n4); margin: var(--s-0) 0 0; padding: var(--s-n2) 0 0; border-top: 1px solid var(--ds-rule); }
.silver main .card--place .card__facts > div { grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--s-n2); align-items: baseline; }
.silver main .card--place .card__facts > div:nth-child(n+4) { display: none; }
.silver main .card--place .card__facts dt { color: var(--ds-muted); font-weight: 400; }
.silver main .card--place .card__facts dd { margin: 0; font-size: var(--s-n1); line-height: var(--lh-body); }
.silver main .card--place .card__tags { display: flex; flex-wrap: wrap; gap: var(--s-n4); margin: var(--s-n2) 0 0; }
.silver:where(:not(.page-zone, .page-course, .tour-list, .page-tour, .page-stay, .page-story)) main .card__tags:not(:has(> :not(.tag--unknown, .tag--book-unk))) { display: none; }
.silver main .card--place .btn--add, .silver main .card--place .card__act { margin-top: auto; }
.silver main .card--place > .btn--add, .silver main .card--place .card__act .btn { width: 100%; }
.silver main .card--place > .card__tags + .btn--add, .silver main .card--place > .card__facts + .btn--add, .silver main .card--place > .card__lead + .btn--add, .silver main .card--place > .why + .btn--add { margin-top: auto; }
.silver main .card--place > :nth-last-child(2) { margin-bottom: var(--s-1); }

/* ---------- ツアーカード（.card--tour）：TOP の「旅の選び方」と同じ見え方 ----------
   写真（1.414:1）と文を横に並べる（スマホは縦）。名前 → 所要時間・出発 → 参考金額 → 保存ボタン */
.silver main .card--tour { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--s-1); align-content: start; height: auto; padding: 0; border: 0; background: none; }
.silver main .card--tour .card__link { display: contents; color: inherit; text-decoration: none; }
.silver main .card--tour .media { grid-column: 1; grid-row: 1 / span 4; width: 100%; aspect-ratio: 1.414 / 1; margin: 0; align-self: start; }
.silver main .card--tour > :not(.card__link), .silver main .card--tour .card__link > :not(.media) { grid-column: 2; }
.silver main .card--tour .card__title { margin: 0 0 var(--s-n2); font-size: var(--s-0); line-height: var(--lh-head); letter-spacing: .04em; }
.silver main .card--tour .card__link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .card--tour .card__facts { display: flex; flex-wrap: wrap; gap: 0 var(--s-n2); margin: 0; padding: 0; border: 0; }
.silver main .card--tour .card__facts > div { display: flex; gap: var(--s-n4); }
.silver main .card--tour .card__facts :is(dt, dd) { margin: 0; font-size: var(--s-n1); line-height: var(--lh-body); }
.silver main .card--tour .card__facts dt { color: var(--ds-muted); }
.silver main .card--tour .card__facts dd { font-weight: 700; }
.silver main .card--tour .card__ref { margin: var(--s-n4) 0 0; font-size: var(--s-n1); font-weight: 700; line-height: var(--lh-body); }
.silver main .card--tour .card__ref-label { display: inline; margin-right: var(--s-n4); font-weight: 400; color: var(--ds-muted); }
.silver main .card--tour .price__note { display: block; font-weight: 400; }
.silver main .card--tour .card__act { align-self: end; margin: 0; padding-top: var(--s-0); }
.silver main .card--tour .card__act .btn { width: 100%; }
.silver main .card--tour .card__link:focus-visible { outline: none; }
.silver main .card--tour .card__link:focus-visible .card__title { outline: 2px solid var(--semantic-color-focus-default, currentColor); outline-offset: 2px; }
.silver main .tour-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-block: 0; padding: 0; list-style: none; }
@media (max-width: 1023px) { .silver main .tour-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) {
  .silver main .card--tour { display: flex; flex-direction: column; }
  .silver main .card--tour .card__link { display: block; }
  .silver main .card--tour .media { margin-bottom: var(--s-0); }
  .silver main .card--tour .card__act { align-self: stretch; }
}

/* ---------- 要点の表（.facts）：項目名 15px 薄字・値 18px。七賢の「場所・アクセス」と同じ形 ---------- */
.silver main .facts { display: grid; gap: var(--s-n4); margin-block: 0; padding: 0; border: 0; }
.silver main .facts > div { display: grid; grid-template-columns: calc(var(--s-0) * 9) minmax(0, 1fr); column-gap: var(--s-0); align-items: baseline; padding: 0; border: 0; }
.silver main .facts dt { color: var(--ds-muted); font-weight: 400; line-height: var(--lh-body); }
.silver main .facts dd { margin: 0; }
@media (max-width: 767px) { .silver main .facts > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 比べる表（.info-table）：PC は 15px 以上。スマホは横にスクロールさせず、行ごとのまとまりに組み替える ----------
   td に data-label（列の見出し）を書いておくと、スマホでは「見出し 値」の2列で並ぶ */
.silver main .table-wrap { overflow-x: auto; }
.silver main .info-table { width: 100%; border-collapse: collapse; font-size: var(--s-n1); }
.silver main .info-table :is(th, td) { padding: var(--s-n2) var(--s-0) var(--s-n2) 0; border: 0; border-bottom: 1px solid var(--ds-rule); text-align: left; vertical-align: top; font-size: var(--s-n1); line-height: var(--lh-body); }
.silver main .info-table thead th { padding-top: 0; border-bottom: 1px solid var(--ds-sumi); color: var(--ds-muted); font-weight: 400; }
.silver main .info-table tbody th { font-weight: 700; }
.silver main .info-table td { font-size: var(--s-0); }
.silver main .info-table td:last-child, .silver main .info-table th:last-child { padding-right: 0; }
@media (max-width: 767px) {
  .silver main .table-wrap { overflow-x: visible; }
  .silver main .info-table, .silver main .info-table :is(tbody, tr, th, td) { display: block; }
  .silver main .info-table thead { display: none; }
  .silver main .info-table tr { margin: 0; padding: var(--s-0) 0; border: 0; border-bottom: 1px solid var(--ds-rule); }
  .silver main .info-table tr > :first-child { background: none; }
  .silver main .info-table tr:first-child { border-top: 1px solid var(--ds-sumi); }
  .silver main .info-table :is(th, td) { padding: 0; border: 0; }
  .silver main .info-table tbody th { margin-bottom: var(--s-n4); font-size: var(--s-0); }
  /* 見出しと値を2列に。セルを表にすると、見出しの後ろの文とリンクはまとめて一つの列（無名のセル）に入るので、値が分かれず、長い見出しも行の高さに入る（幅は 1 : 1.414） */
  .silver main .info-table td[data-label] { display: table; width: 100%; table-layout: fixed; padding: var(--s-n4) 0; }
  .silver main .info-table td[data-label]::before { content: attr(data-label); display: table-cell; width: 41.4%; padding-right: var(--s-n2); vertical-align: top; color: var(--ds-muted); font-size: var(--s-n1); line-height: var(--lh-body); }
}

/* ---------- 面と帯 ----------
   .panel … 情報のまとまり（青白）。 .panel--tint … やや強い面（淡青）。 .band … 帯（蒼地に白） */
.silver main :is(.panel, .callout, .note-box, .tour-start) { padding: var(--s-1); border: 0; border-radius: 4px; background: var(--ds-face); }
.silver main .panel--tint { background: var(--ds-tint); }
.silver main :is(.panel, .callout, .note-box, .tour-start) > :first-child { margin-top: 0; }
.silver main :is(.panel, .callout, .note-box, .tour-start) > :last-child { margin-bottom: 0; }
.silver main .band { width: 100%; max-width: none; margin-inline: 0; padding: var(--s-8) 0; background: var(--ds-band); color: var(--ds-band-text); }
.silver main .band > * { width: var(--wrap); margin-inline: auto; }
.silver main .band :is(h2, h3, p, li, dt, dd, a) { color: inherit; }
.silver main .band .btn--primary { background: var(--semantic-color-surface-default); border-color: var(--semantic-color-surface-default); color: var(--ds-band); }
.silver main .band .btn--primary:hover { background: var(--ds-tint); border-color: var(--ds-tint); color: var(--ds-band); }
@media (max-width: 767px) { .silver main :is(.panel, .callout, .note-box, .tour-start) { padding: var(--s-0); } .silver main .band { padding: var(--s-6) 0; } }

/* ---------- ページ詳細の頭 C（.overview）：写真と要点を 1.414:1 で並べる。写真の高さは文の列に合わせる ---------- */
.silver main .overview { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); column-gap: var(--s-4); align-items: stretch; margin-top: var(--s-0); container-type: inline-size; }
.silver main .overview__media { position: relative; min-height: calc((100cqw - var(--s-4)) / 2.414); margin: 0; border-radius: 4px; overflow: hidden; background: var(--ds-face); }
.silver main .overview__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.silver main .overview__body { display: flex; flex-direction: column; gap: var(--s-0); }
.silver main .overview__body > * { margin: 0; }
.silver main .overview__body h1 { font-size: var(--ds-h1); line-height: var(--lh-head); letter-spacing: .04em; }
.silver main .overview__kicker { color: var(--ds-muted); font-size: var(--s-n1); }
.silver main .overview__body .facts { padding-top: var(--s-0); border-top: 1px solid var(--ds-rule); }
.silver main .overview__body .facts > div { grid-template-columns: calc(var(--s-0) * 6) minmax(0, 1fr); }
.silver main .overview__act { display: flex; flex-wrap: wrap; gap: var(--s-n2); margin-top: auto; }
@media (max-width: 899px) {
  .silver main .overview { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); }
  .silver main .overview__media { min-height: 0; aspect-ratio: 1.414 / 1; }
  .silver main .overview__body .facts > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- リンクの並び（.links）：行ごとに線で区切り、右に › ---------- */
.silver main .links { margin-block: 0; padding: 0; list-style: none; border-top: 1px solid var(--ds-rule); }
.silver main .links > li { border-bottom: 1px solid var(--ds-rule); }
.silver main .links a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-0); min-height: 48px; padding: var(--s-n2) 0; color: var(--ds-sumi); text-decoration: none; font-weight: 700; }
.silver main .links a::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.silver main .links a:hover span:first-child, .silver main .links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .links small { display: block; font-weight: 400; }
.silver main .btn--link { font-size: inherit; font-weight: 700; color: var(--ds-sumi); text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* ---------- 畳む部品（details.fold）。よくある質問（details.faq）と同じ形 ---------- */
.silver main details.fold { border-bottom: 1px solid var(--ds-rule); }
.silver main details.fold:first-of-type, .silver main :not(details.fold) + details.fold { border-top: 1px solid var(--ds-rule); }
.silver main details.fold > summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: var(--s-n2) var(--s-6) var(--s-n2) 0; list-style: none; font-weight: 700; cursor: pointer; }
.silver main details.fold > summary::-webkit-details-marker { display: none; }
.silver main details.fold > summary::before, .silver main details.fold > summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; background: var(--ds-sumi); transition: transform var(--semantic-motion-duration-fast, .2s); }
.silver main details.fold > summary::after { transform: rotate(90deg); }
.silver main details.fold[open] > summary::after { transform: rotate(0deg); }
.silver main details.fold > summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main details.fold > :not(summary) { max-width: 40em; margin-block: 0 var(--s-1); }
.silver main details.faq > summary { font-size: var(--s-0); }
.silver main details.faq > :not(summary) { line-height: var(--lh-body); color: var(--ds-sumi); }

/* ---------- タブ（.tabs > .tab）と話題の札（.topic-chip） ---------- */
.silver main .tabs { display: flex; flex-wrap: wrap; gap: 0; margin-block: 0 var(--s-0); border-bottom: 1px solid var(--ds-rule); }
.silver main .tab { min-height: 48px; padding: 0 var(--s-0); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ds-muted); font-weight: 700; cursor: pointer; }
.silver main .tab:hover { color: var(--ds-sumi); }
html:root .silver main .tab[aria-selected="true"], html:root .silver main .tab.is-on { background: none; color: var(--ds-sumi); border-color: transparent transparent var(--ds-sumi); }
.silver main .topic-chip { min-height: 44px; padding: 0 var(--s-0); border-radius: 4px; }

/* ---------- 絞り込みの入力欄（.filters）：高さ 48px、ラベルは上に 15px ---------- */
.silver main .filters { gap: var(--s-0) var(--s-1); padding: var(--s-1); border-radius: 4px; background: var(--ds-face); }
.silver main .filters :is(select, input[type="date"], input[type="search"], input[type="text"]) { min-height: 48px; font-size: var(--s-n1); }
.silver main .filters fieldset { gap: var(--s-n2) var(--s-0); }
.silver main .filters label:not(:has(input[type="checkbox"])) { display: grid; gap: var(--s-n4); color: var(--ds-muted); }
.silver main .filters legend { margin-bottom: var(--s-n4); padding: 0; color: var(--ds-muted); }
.silver main .filters input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ds-band); }
.silver main .filters label:has(input[type="checkbox"]) { display: inline-flex; align-items: center; gap: var(--s-n3); min-height: 44px; }

/* ---------- ボタン：高さ 48px、角 4px。主は蒼地に白、副は枠だけ ---------- */
.silver main .btn:not(.btn--link) { min-height: 48px; padding-inline: var(--s-1); border-radius: 4px; }

/* ---------- 文章の幅：1行は全角40字ほどまで ---------- */
.silver main :is(.article--text, .article--story) > :is(p, ul, ol) { max-width: 40em; line-height: var(--lh-body); }
.silver main .article--story > p:first-of-type { font-size: var(--s-1); line-height: var(--lh-body); }

@media (prefers-reduced-motion: reduce) { .silver main * { transition: none !important; } }

/* ページの目次（旅程ページの目次と同じ形：「目次」の見出し、左に細い線、下線のリンク。11/10 Takeru）。
   右の余白に 200px と間 48px が入る幅（1696px〜）では、余白に置いてスクロールしても残す。
   入らない幅では本文の流れの中に列で並べる。
   使い方：1200px の本文と同じ幅になる位置に <nav class="side-toc"><div class="side-toc__in"><p class="side-toc__title">目次</p><ol>…</ol></div></nav> を置く。
   余白に残る範囲は nav の親の高さまでなので、ページの本文全体を包む要素の直下に置く */
.silver .side-toc { margin-top: var(--s-4, 36px); margin-bottom: 0; padding: 0; border: 0; background: none; }
.silver .side-toc__title { margin: 0 0 var(--s-n2, 9px); padding: 0; border: 0; font-size: 15px; line-height: 1.5; font-weight: 700; letter-spacing: .04em; }
.silver .side-toc ol { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 24px; }
.silver .side-toc li { margin: 0; padding: 0 0 0 18px; border: 0; border-left: 1px solid var(--ds-rule, #d9dee3); break-inside: avoid; }
.silver .side-toc a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; line-height: 1.5; color: var(--ds-sumi, #151515); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.silver .side-toc a:hover { text-decoration-thickness: 2px; }
.silver .side-toc a:focus-visible { outline: 3px solid var(--semantic-color-focus-default, #1d4a6e); outline-offset: 2px; }
@media (max-width: 1099px) { .silver .side-toc ol { columns: 3; } }
@media (max-width: 700px) {
  .silver .side-toc { margin-top: 25px; }
  .silver .side-toc ol { columns: 2; column-gap: 13px; }
  .silver .side-toc li { padding-left: 13px; }
  .silver .side-toc a { font-size: 13px; }
}
@media (min-width: 1696px) {
  .silver .side-toc { position: sticky; top: 96px; z-index: 1; height: 0; margin-top: 0; margin-bottom: 0; }
  .silver .side-toc__in { position: absolute; top: var(--side-toc-top, 36px); left: calc(100% + 48px); width: 200px; }
  .silver .side-toc ol { columns: 1; }
}

/* ---------- まだ行き先のないボタン・リンク（VELTRA の予約ページが公開されるまで）。押せず、薄く見せる ---------- */
a[aria-disabled="true"]:not([href]) { opacity: .45; pointer-events: none; }