/* Discover Hokuto — page system (2026-11-06)
   TOP と七賢のページの決まりを、ほかのページに当てる層。body.ds のページだけに効く（TOP と七賢以外の施設ページは対象外）。
   法則:
   1. 文字は墨。緑は面（帯・フッター）だけ。
   2. ページの頭: 写真（全幅・PC 21:9 / スマホ 4:3）→ パンくず → 大見出し（700）→ リード（17px・行間 2）。写真がないページは大見出しの下に墨の細線。
   3. 章の見出し: TOP と同じ（上に墨の 1px 線・26〜36px・700・字間 .04em）。章と章の間は PC 96px / スマホ 64px。
   4. 小見出し・ラベル: 14〜15px・700・字間 .08em（TOP の kicker と同じ）。
   5. 面: 青白（#f4f7fa）は情報のまとまり、蒼（#1d4a6e）は帯、濃い蒼（#163a57）はフッター、森の緑（#2f5c4e）は小さな差し色だけ。罫線は #d6d6d6、強い罫線は墨。角は 4px。
   6. 操作: 主ボタンは墨地・シャンパン文字・高さ 48px。入力欄も高さ 48px・角 4px・枠 #767676。
   7. 写真のリンク: 写真は変えず、タイトルに下線。 */

.ds {
  --ds-ink: var(--base-color-sumi, #151515);
  --ds-ink-soft: var(--base-color-sumi-soft, #3a3a3a);
  --ds-line: var(--base-color-line, #d6d6d6);
  --ds-line-strong: var(--base-color-line-strong, #767676);
  --ds-champagne: var(--semantic-color-surface-champagne, #f4f7fa);
  --ds-on-dark: var(--semantic-color-text-inverse, #ffffff);
  --ds-primary: var(--component-button-primary-background, #1d4a6e);
  --ds-primary-hover: var(--component-button-primary-background-hover, #163a57);
  --ds-deep: var(--semantic-color-surface-deep, #1d4a6e);
  --ds-sec: clamp(4rem, 2.7rem + 3.6vw, 6rem);
  --ds-h1: clamp(2rem, 1.45rem + 1.9vw, 3rem);
  --ds-h2: clamp(1.625rem, 1.1rem + 1.3vw, 2.25rem);
  --ds-h3: clamp(1.1875rem, 1.05rem + .4vw, 1.375rem);
  /* 白銀比（1 : 1.414）の刻み。本文 18px × √2 の n/2 乗。値は silver.css と同じ。使うかどうかはページの層（parts.css・silver.css）が決める */
  --s-n4: 9px; --s-n3: 10.7px; --s-n2: 12.73px; --s-n1: 15.14px; --s-0: 18px; --s-1: 21.4px; --s-2: 25.46px;
  --s-4: 36px; --s-6: 50.91px; --s-8: 72px; --s-10: 101.82px;
  --lh-body: 1.707; --lh-head: 1.5;
}

/* ---------- 2. ページの頭 ---------- */
.ds main > h1, .ds .page-banner__text h1, .ds .article--text > h1, .ds .zone-head h1, .ds .page-title-row h1,
.ds .detail__head h1, .ds .detail__main > h1, .ds .article--story h1, .ds .result h1, .ds .tour-head h1 {
  font-size: var(--ds-h1); font-weight: 700; letter-spacing: .04em; line-height: 1.35; color: var(--ds-ink);
}
.ds main > .page-banner:has(> .media) { width: 100%; margin: 0; }
.ds .page-banner > .media { aspect-ratio: 21 / 9; max-height: min(62vh, 620px); width: 100%; background: var(--ds-champagne); }
.ds .page-banner > .media img { width: 100%; height: 100%; object-fit: cover; }
.ds .page-banner__text { padding-top: clamp(2.5rem, 1.8rem + 2vw, 4rem); }
.ds .page-banner__text h1 { margin: 0; }
.ds .page-banner__text p, .ds main > .lead, .ds .page-intro > p, .ds .tk__lead {
  margin-block: 16px 0; max-width: 40em; font-size: 1.0625rem; line-height: 2; color: var(--ds-ink-soft);
}
.ds .page-banner:not(:has(.media)) .page-banner__text { padding-bottom: 0; border-bottom: 0; }
.ds .crumbs + .page-banner { margin-top: 8px; }
.ds .crumbs ol { margin-block: 16px 0; font-size: .875rem; color: var(--ds-ink-soft); }
.ds .crumbs a { color: var(--ds-ink-soft); text-underline-offset: 3px; }
.ds .crumbs a:hover { color: var(--ds-ink); }
/* 写真のない文章ページ（パンくず → 大見出し） */
.ds .article--text > h1, .ds main > h1 { margin-block: 40px 0; padding-bottom: 32px; border-bottom: 1px solid var(--ds-ink); }
.ds main > h1:has(+ h2), .ds .article--text > h1:has(+ h2) { padding-bottom: 0; border-bottom: 0; }
.ds main > h1 + .page-intro, .ds main > h1 + .lead { margin-top: 24px; }

/* ---------- 3. 章 ---------- */
.ds main > .section, .ds main > section.section, .ds .article > .section, .ds:not(.page-place) .detail__main > .section { margin-block: var(--ds-sec) 0; }
.ds main > .section > .section__title, .ds main > section.section > h2:first-child, .ds:not(.page-place) .detail__main > .section > .section__title, .ds:not(.page-place) .detail__main > section.section > h2:first-child, .ds .article--story > h2,
.ds .tour-group > h2, .ds .article--text > h2, .ds main > h2 {
  margin-block: 0 40px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--ds-ink);
  font-size: var(--ds-h2); font-weight: 700; letter-spacing: .04em; line-height: 1.4; color: var(--ds-ink);
}
.ds main > h2, .ds .article--text > h2 { margin-top: var(--ds-sec); }
.ds .section__lead { margin-block: -24px 40px; max-width: 40em; font-size: 1.0625rem; line-height: 2; color: var(--ds-ink-soft); }
.ds main h3 { font-size: var(--ds-h3); font-weight: 700; letter-spacing: .03em; line-height: 1.5; }

/* ---------- 4. ラベル ---------- */
.ds .card__kicker, .ds .tour-kicker, .ds .eyebrow, .ds .detail__kicker, .ds .zone-head__kicker {
  font-size: .875rem; font-weight: 700; letter-spacing: .08em; color: var(--ds-ink); text-transform: none;
}

/* ---------- 5. 面と罫線 ---------- */
.ds .facts > div, .ds dl.facts > div { border-color: var(--ds-line); }
.ds .facts dt { color: var(--ds-ink-soft); font-weight: 400; }
.ds .facts dd { color: var(--ds-ink); }
.ds .panel, .ds .callout, .ds .note-box { background: var(--ds-champagne); border: 0; border-radius: 4px; }

/* ---------- 6. 操作 ---------- */
.ds .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 4px; font-weight: 700; letter-spacing: .04em; box-sizing: border-box; }
.ds .btn--primary { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-dark); }
.ds .btn--primary:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); color: var(--ds-on-dark); }
.ds .btn:not(.btn--primary):not(.btn--link) { border-color: var(--ds-line-strong); background: #fff; color: var(--ds-ink); }
.ds .btn:not(.btn--primary):not(.btn--link):hover { border-color: var(--ds-ink); background: #fff; }
.ds main input[type="text"], .ds main input[type="email"], .ds main input[type="tel"], .ds main input[type="number"],
.ds main input[type="date"], .ds main input[type="search"], .ds main select, .ds main textarea {
  min-height: 48px; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--ds-line-strong); border-radius: 4px;
  background: #fff; color: var(--ds-ink); font: inherit; font-size: 1rem;
}
.ds main textarea { min-height: 144px; line-height: 1.8; }
.ds main input:focus-visible, .ds main select:focus-visible, .ds main textarea:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 1px; border-color: var(--ds-ink); }

/* ---------- 7. 文章の幅（左端は見出しにそろえ、行の長さだけを詰める） ---------- */
.ds main > .form, .ds main > form { box-sizing: border-box; max-width: none; padding-right: max(0px, calc(var(--wrap) - 640px)); }
.ds main > .lead, .ds main > p.note { box-sizing: border-box; max-width: none; padding-right: max(0px, calc(var(--wrap) - 40em)); }
.ds .article--text > p, .ds .article--text > ul, .ds .article--text > ol, .ds .article--story > p { max-width: 40em; line-height: 2; }

/* ================= ページの型ごと ================= */

/* よくある質問 */
.ds details.faq { border: 0; border-bottom: 1px solid var(--ds-line); padding: 0; }
.ds main > h2 + details.faq { border-top: 0; }
.ds details.faq > summary { list-style: none; position: relative; display: flex; align-items: center; min-height: 64px; padding: 16px 48px 16px 0; box-sizing: border-box; font-size: 1.0625rem; font-weight: 700; line-height: 1.7; cursor: pointer; }
.ds details.faq > summary::-webkit-details-marker { display: none; }
.ds details.faq > summary::before, .ds details.faq > summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; background: var(--ds-ink); transition: transform .2s; }
.ds details.faq > summary::after { transform: rotate(90deg); }
.ds details.faq[open] > summary::after { transform: rotate(0deg); }
.ds details.faq > summary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ds details.faq > :not(summary) { max-width: 40em; margin-block: 0 24px; line-height: 2; color: var(--ds-ink-soft); }

/* 文章のページ（運営者・規約など） */
.ds .article--text .toc { margin-block: 40px 0; padding: 24px 32px; background: var(--ds-champagne); border: 0; border-radius: 4px; }
.ds .article--text .toc ol { margin: 0; padding-left: 1.4em; line-height: 2.2; }
.ds .article--text > h2 { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); margin-top: 72px; margin-bottom: 24px; }

/* 一覧の組（セルフツアー） */
.ds .tour-group { margin-block: var(--ds-sec) 0; }
.ds .tour-group > p { margin-block: -24px 40px; max-width: 40em; line-height: 2; color: var(--ds-ink-soft); }

/* セルフツアーの各ページ */
.ds .tour-kicker { margin-block: 24px 12px; }
.ds .tour-lead { margin-block: 16px 0; max-width: 40em; font-size: 1.0625rem; line-height: 2; color: var(--ds-ink-soft); }
.ds .tour-start { margin-block: 32px 0; padding: 24px 28px; background: var(--ds-champagne); border-radius: 4px; line-height: 1.9; }
.ds .tour-start > :first-child { margin-top: 0; } .ds .tour-start > :last-child { margin-bottom: 0; }
.ds .tour-start strong, .ds .tour-start b { font-weight: 700; }
.ds .section--exits .exits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ds .exit { padding: 28px; border: 1px solid var(--ds-line); border-radius: 4px; background: #fff; }
.ds .exit--home { background: var(--ds-champagne); border-color: var(--ds-champagne); }
.ds .exit h3 { margin-block: 0 8px; }
.ds .exit p { margin: 0; line-height: 1.9; }
.ds .exit ul { margin-block: 12px 0; padding: 0; list-style: none; }
.ds .exit li { padding: 10px 0; border-top: 1px solid var(--ds-line); }
.ds .facts dt { word-break: auto-phrase; overflow-wrap: anywhere; min-width: 0; }   /* 長い見出しは2行に折り返す（1行に収めると右の値と重なるため。11/6） */

/* ストーリー（読みもの） */
.ds .article--story > .media { margin: 0 calc(50% - 50vw + var(--sbw, 0px) / 2); aspect-ratio: 21 / 9; max-height: min(62vh, 620px); }
.ds .article--story > .media img { width: 100%; height: 100%; object-fit: cover; }
.ds .article--story > h1 { margin-block: 56px 0; }
.ds .article--story > p:first-of-type { font-size: 1.1875rem; line-height: 2; color: var(--ds-ink); }
.ds .article--story blockquote { margin: 48px 0; padding: 0 0 0 28px; border-left: 2px solid var(--ds-ink); font-size: 1.1875rem; line-height: 2; }

/* 受付完了 */
.ds .result { margin-block: 64px 0; }
.ds .result > p { max-width: 40em; }

/* 404 */
.ds .article--text > .media { margin-top: 40px; border-radius: 0; }

/* ---------- 七賢（見本の施設ページ）---------- */
html:root body.ds.page-place .guide-card__footer a.guide-card__button { text-decoration: none; color: var(--ds-on-dark); background: var(--ds-primary); border-color: var(--ds-primary); }
html:root body.ds.page-place .guide-card__footer a.guide-card__button:hover { color: var(--ds-on-dark); background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.ds.page-place .dayline__row--do .dayline__bar { background: var(--ds-line-strong); }
.ds.page-place .dos__head, .ds.page-place .detail__main > .section--audio > h2, html:root body.ds.page-place #audio > h2, html:root body.ds.page-place .detail__main > .section > .section__title.ds-major {
  margin-block: 0 40px; padding: 0; border-top: 0;
  font-size: var(--ds-h2); font-weight: 700; letter-spacing: .04em; line-height: 1.4;
}

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  .ds .page-banner > .media, .ds .article--story > .media { aspect-ratio: 4 / 3; max-height: none; }
  .ds .page-banner__text { padding-top: 32px; }
  .ds main > .section > .section__title, .ds main > h2, .ds .tour-group > h2 { margin-bottom: 28px; }
  .ds .section__lead, .ds .tour-group > p { margin-block: -12px 28px; }
  .ds .article--text .toc { padding: 20px; }
  .ds .exit { padding: 22px; }
  .ds .tour-start { padding: 20px; }
}

/* セルフツアー: 見どころの下の地図 */
.ds .detail__main .map[data-map] { margin-top: 48px; }
.ds.page-place .dos__head { display: block; width: auto; max-width: none; grid-column: 1 / -1; }
/* 営業時間のグラフ（11/6 Takeru）：営業している時間は緑の帯で示す（黒・灰色だと「閉まっている時間」にも読めるため）。店は深緑、体験・見学は明るい緑 */
.dayline__bar, .ds.page-place .dayline__bar { background: var(--ds-deep); }
.dayline__row--do .dayline__bar, .ds.page-place .dayline__row--do .dayline__bar { background: var(--ds-deep); }