/* プライベートツアーの詳細（/course-a、/course-b と英語版）。指示書 07。
   頭は C 型（写真と要点を 1.414 : 1）。本文も同じ 1.414 : 1 の縦の線に乗せ、右の列に予約を残す。 */

/* ---------- ページの頭 ---------- */
.page-course main .course-top { margin-top: var(--s-1); column-gap: var(--s-6); }
.page-course main .course-top .overview__media { min-height: 0; aspect-ratio: 1 / 1.08; max-height: 720px; }
.page-course main .course-top .overview__body { gap: 0; justify-content: flex-end; padding-bottom: var(--s-n4); }
.page-course main .course-top .overview__kicker { margin: 0 0 var(--s-n2); }
.page-course main .course-top h1 { margin: 0; padding: 0; border: 0; font-size: var(--ds-h1); text-wrap: balance; }
.page-course main .course-top .detail__lead { margin: var(--s-0) 0 0; }
.page-course main .course-book { margin-top: var(--s-4); padding-top: var(--s-1); border-top: 1px solid var(--ds-sumi); }
.page-course main .course-book > * { margin: 0; }
.page-course main :is(.course-book__price, .course-side__price, .course-price__amount) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-n2); font-size: var(--s-n1); line-height: var(--lh-head); color: var(--ds-muted); }
.page-course main .course-book__price .price { font-size: var(--s-6); font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: var(--ds-sumi); font-variant-numeric: tabular-nums; }
.page-course main .course-book__incl { margin-top: var(--s-n2); font-size: var(--s-n1); line-height: var(--lh-body); color: var(--ds-sumi); }
.page-course main .course-book .overview__act { margin-top: var(--s-1); }
.page-course main .course-book .btn--primary { width: 100%; justify-content: center; }
.page-course main .course-book .drink-law { margin-top: var(--s-n2); }

/* ---------- プライベートツアーとは（蒼の帯） ---------- */
.page-course main .course-about { margin-top: var(--ds-sec); }
.page-course main .course-about h2 { margin: 0 0 var(--s-4); padding: 0; border: 0; font-size: var(--ds-h2); line-height: var(--lh-head); }
.page-course main .course-about ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.page-course main .course-about li { display: grid; align-content: start; gap: var(--s-n2); padding-top: var(--s-0); border-top: 1px solid currentColor; }
.page-course main .course-about strong { font-size: var(--s-1); line-height: var(--lh-head); }
.page-course main .course-about span { font-size: var(--s-0); line-height: var(--lh-body); }

/* ---------- 本文と予約の列 ---------- */
.page-course main .course-body { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
.page-course main .course-body__main > .section:first-child { margin-top: var(--ds-sec); }
.page-course main .course-side { position: sticky; top: calc(var(--hdr-h, 72px) + var(--s-1)); display: grid; gap: var(--s-0); margin-top: var(--ds-sec); padding: var(--s-1); border: 1px solid var(--ds-rule); border-radius: 4px; background: var(--semantic-color-surface-default); }
.page-course main .course-side > * { margin: 0; }
.page-course main .course-side__price .price { font-size: var(--s-2); font-weight: 700; line-height: var(--lh-head); color: var(--ds-sumi); font-variant-numeric: tabular-nums; }
.page-course main .course-side .btn--primary { width: 100%; justify-content: center; }

/* ---------- 旅程：/plan と同じ時間軸（時刻・線と点・内容） ---------- */
.page-course main .itin__day { margin: var(--s-4) 0 0; font-size: var(--ds-h3); }
.page-course main .section__title + .itin__day { margin-top: 0; }
.page-course main .itin__daylead { margin: var(--s-n2) 0 var(--s-1); color: var(--ds-muted); }
.page-course main .itin { --tcol: 5.5em; --rail: 36px; position: relative; margin: 0; padding: 0; list-style: none; }
.page-course main .itin::before { content: ""; position: absolute; top: 28px; bottom: 28px; left: calc(var(--tcol) + var(--rail) / 2); width: 1px; background: var(--ds-rule); }
.page-course main .itin__item { position: relative; display: grid; grid-template-columns: var(--tcol) var(--rail) minmax(0, 1fr); align-items: start; padding: 0 0 var(--s-n2); border: 0; }
.page-course main .itin__item:last-child { padding-bottom: 0; }
.page-course main .itin__time { grid-column: 1; padding-top: var(--s-0); text-align: right; font-size: var(--s-n1); font-weight: 700; line-height: var(--lh-head); font-variant-numeric: tabular-nums; }
.page-course main .itin__item::before { content: ""; position: absolute; top: calc(var(--s-0) + .75em * 1.5 - 6px); left: calc(var(--tcol) + var(--rail) / 2 - 6px); width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: var(--ds-band); box-shadow: 0 0 0 4px var(--semantic-color-surface-default); }
.page-course main .itin__item--point::before { background: var(--semantic-color-surface-default); border: 2px solid var(--ds-band); }
.page-course main .itin__body { grid-column: 3; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--s-0); align-items: start; padding: var(--s-n2); border: 1px solid var(--ds-rule); border-radius: 4px; }
.page-course main .itin__body:not(:has(> .itin__thumb)) { grid-template-columns: minmax(0, 1fr); padding: var(--s-n2) var(--s-0); }
.page-course main .itin__item--point .itin__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-n2); padding: var(--s-n2) 0; border: 0; }
.page-course main .itin__thumb { display: block; width: 136px; height: auto; aspect-ratio: 1.414 / 1; object-fit: cover; border-radius: 4px; background: var(--ds-face); }
.page-course main .itin__body p { margin: 0; }
.page-course main .itin__place { font-size: var(--s-0); font-weight: 700; line-height: var(--lh-head); }
.page-course main .itin__place a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.page-course main .itin__what { margin-top: var(--s-n4); font-size: var(--s-n1); line-height: var(--lh-body); color: var(--ds-muted); }
.page-course main .itin__item--point .itin__what { margin: 0; }
.page-course main .itin__why { margin-top: var(--s-n4); font-size: var(--s-n1); line-height: var(--lh-body); color: var(--ds-sumi); }
.page-course main .itin__move { grid-column: 3; margin: var(--s-n2) 0 0; padding-left: var(--s-0); font-size: var(--s-n1); line-height: var(--lh-body); color: var(--ds-muted); }
.page-course main .tag--booked { display: inline-block; margin: 0 var(--s-n4) 0 0; padding: 0 var(--s-n4); border: 1px solid var(--ds-band); border-radius: 2px; background: none; color: var(--ds-band); font-size: var(--s-n2); font-weight: 700; line-height: 1.6; letter-spacing: .04em; vertical-align: .15em; }
.page-course main .legend .tag--booked { flex: none; margin: 0; }
.page-course main .itin__place .tag--booked { display: table; margin: 0 0 var(--s-n4); }
.page-course main .legend { display: flex; align-items: baseline; gap: var(--s-n2); margin: var(--s-1) 0 0; padding-left: calc(var(--tcol, 5.5em) + 36px); font-size: var(--s-n1); line-height: var(--lh-body); color: var(--ds-muted); }

/* ---------- ランチ・アクティビティの候補：選べるカード ---------- */
.page-course main .choices { display: grid; gap: var(--s-0); margin: 0; padding: 0; list-style: none; }
.page-course main .choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.414fr); gap: var(--s-1); align-items: start; padding: var(--s-0); border: 1px solid var(--ds-rule); border-radius: 4px; }
.page-course main .choice:not(:has(> .choice__img)) { grid-template-columns: minmax(0, 1fr); padding: var(--s-1); }
.page-course main .choice__img { display: block; width: 100%; height: auto; aspect-ratio: 1.414 / 1; object-fit: cover; border-radius: 4px; background: var(--ds-face); }
.page-course main .choice:has(> .choice__img) .choice__body { padding: var(--s-n4) 0; }
.page-course main .choice__body > * { margin: 0; }
.page-course main .choice__kicker { margin-bottom: var(--s-n4); font-size: var(--s-n1); line-height: var(--lh-head); color: var(--ds-muted); }
.page-course main .section .choice__name { margin: 0; font-size: var(--s-1); line-height: var(--lh-head); letter-spacing: .04em; }
.page-course main .choice__name a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.page-course main .choice__lead { margin-top: var(--s-n4); }
.page-course main .choice__facts { display: grid; gap: var(--s-n4); margin-top: var(--s-n2); padding-top: var(--s-n2); border-top: 1px solid var(--ds-rule); }
.page-course main .choice__facts > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--s-n2); align-items: baseline; }
.page-course main .choice__facts dt { font-size: var(--s-n1); font-weight: 400; color: var(--ds-muted); }
.page-course main .choice__facts dd { margin: 0; font-size: var(--s-n1); line-height: var(--lh-body); }

/* ---------- 料金 ---------- */
.page-course main .course-price__amount { margin: 0 0 var(--s-1); }
.page-course main .course-price__amount .price { font-size: var(--s-6); font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: var(--ds-sumi); font-variant-numeric: tabular-nums; }
.page-course main .course-price .facts { padding-top: var(--s-0); border-top: 1px solid var(--ds-rule); }
.page-course main .course-price .drink-law { margin-top: var(--s-0); }

/* ---------- 最後の送り ---------- */
.page-course main .course-next { margin-top: var(--s-6); }

/* ---------- タブレット・スマホ ---------- */
@media (max-width: 1023px) {
  .page-course main .course-about ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .page-course main .course-top .overview__media { aspect-ratio: 1.414 / 1; max-height: none; }
  .page-course main .course-top .overview__body { justify-content: flex-start; }
  .page-course main .course-body { grid-template-columns: minmax(0, 1fr); }
  .page-course main .course-side { position: sticky; top: auto; bottom: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-n4) var(--s-0); width: auto; margin: var(--s-6) calc(-1 * var(--gutter, 16px)) 0; padding: var(--s-n2) var(--gutter, 16px) calc(var(--s-n2) + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--ds-rule); border-radius: 0; box-shadow: 0 -8px 24px rgb(21 21 21 / .06); }
  .page-course main .course-side__price { flex-direction: column; gap: 0; }
  .page-course main .course-side__price .price { font-size: var(--s-1); }
  .page-course main .course-side__consult { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .page-course main .course-top { margin-top: var(--s-0); }
  .page-course main .course-book { margin-top: var(--s-1); }
  .page-course main .course-book__price .price, .page-course main .course-price__amount .price { font-size: var(--s-4); }
  .page-course main .course-about ul { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .page-course main .course-about h2 { margin-bottom: var(--s-1); }
  .page-course main .itin { --tcol: 3.8em; --rail: 24px; }
  .page-course main .itin__time { font-size: var(--s-n2); }
  .page-course main .itin__body { grid-template-columns: minmax(0, 1fr); gap: var(--s-n2); }
  .page-course main .itin__thumb { width: 100%; max-width: 240px; }
  .page-course main .choice { grid-template-columns: minmax(0, 1fr); gap: var(--s-0); }
  .page-course main .choice:has(> .choice__img) .choice__body { padding: 0; }
  .page-course main .choice__facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page-course main .legend { padding-left: 0; }
  .page-course main .course-side__consult { display: none; }
}
.page-course main .checked:has(> .tag--unknown) { display: none; }