/* セルフツアーの詳細（/self-tour-1〜6、指示書 06）。部品は parts.css、旅程の時間軸は style.css の .pstop と .leg（/plan・/suggest と同じ部品）
   組み方：頭 C（写真と要点 1.414:1）→ 目次（青白の面）→ この旅でできること → 旅程（地図と時間軸を 1 : 1.414）→ 出口 → 2列の章 */

.page-tour--self main .tour-overview { margin-top: var(--s-0); }
.page-tour--self main .tour-overview .overview__body { gap: var(--s-0); }
.page-tour--self main .tour-overview h1 { font-size: var(--ds-h2); }
.page-tour--self main .tour-overview .facts > div { grid-template-columns: calc(var(--s-0) * 5) minmax(0, 1fr); }
.page-tour--self main .tour-overview .overview__act .btn { min-width: calc(var(--s-0) * 12); }

/* 本文：右の白紙（旧 .detail の 300px 列）をなくし、1200px の幅を 12 列で使う */
.page-tour--self main .tour-detail { display: block; margin-inline: auto; }
.page-tour--self main .tour-detail > .detail__main {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4);
  grid-template-areas: "toc toc toc toc toc toc toc toc toc toc toc toc" "s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1" "s2h s2h s2h s2h s2h s2h s2h s2h s2h s2h s2h s2h" "map map map map map list list list list list list list" "s3 s3 s3 s3 s3 s3 s3 s3 s3 s3 s3 s3" "s4 s4 s4 s4 s4 s4 s5 s5 s5 s5 s5 s5" "s6 s6 s6 s6 s6 s6 s7 s7 s7 s7 s7 s7";
}
.page-tour--self main .tour-detail .side-toc { grid-area: toc; align-self: start; } /* 目次は共通部品（parts.css の .side-toc） */
.page-tour--self main .tour-detail #sec-1 { grid-area: s1; }
.page-tour--self main .tour-detail .tour-itin { display: contents; }
.page-tour--self main .tour-detail .tour-itin > h2 { grid-area: s2h; scroll-margin-top: 88px; }
/* 章の見出し：system.css の .detail__main 用の 40px を、白銀比の刻みに戻す */
.page-tour--self main .tour-detail > .detail__main > section.section > h2.section__title { margin-block: 0 var(--s-4); padding-top: var(--s-0); }
.page-tour--self main .tour-detail > .detail__main > section.tour-itin > h2.section__title { margin-top: var(--ds-sec); }
.page-tour--self main .tour-detail .tour-map { grid-area: map; align-self: start; margin: 0; } /* 地図はスクロールについてこない（その場に置く） */
.page-tour--self main .tour-detail .tour-itin__day { grid-area: list; min-width: 0; }
.page-tour--self main .tour-detail #sec-3 { grid-area: s3; }
.page-tour--self main .tour-detail #sec-4 { grid-area: s4; }
.page-tour--self main .tour-detail #sec-5 { grid-area: s5; }
.page-tour--self main .tour-detail #sec-6 { grid-area: s6; }
.page-tour--self main .tour-detail #sec-7 { grid-area: s7; }
.page-tour--self main .tour-detail > .detail__main > * { min-width: 0; max-width: none; margin-inline: 0; }

/* 目次：七賢の目次と同じ青白の面 */

/* この旅でできること：写真 1.414:1 の3枚 */
.page-tour--self main .highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); }
.page-tour--self main .highlight .media { aspect-ratio: 1.414 / 1; margin: 0 0 var(--s-0); }
.page-tour--self main .highlight h3 { margin: 0 0 var(--s-n2); font-size: var(--ds-h3); }
.page-tour--self main .highlight p { margin: 0; }

/* 旅程：/plan と同じ時間軸。時刻の列・1本の線・番号・カード・移動の行 */
.page-tour--self main .tour-itin__day { --tcol: 4.5rem; --rail: 40px; --ease-move: cubic-bezier(.45, 0, .1, 1); }
.page-tour--self main .tour-itin__day .plan__items { position: relative; margin: 0; padding: 0; list-style: none; }
.page-tour--self main .tour-itin__day .plan__items::before { content: ""; position: absolute; left: calc(var(--tcol) + var(--rail) / 2 - 1px); top: 22px; bottom: calc(var(--head-h, 92px) / 2); width: 2px; background: var(--ds-rule); }
.page-tour--self main .tour-itin__day .pstop { --head-h: 92px; margin: 0; }
.page-tour--self main .tour-itin__day .pstop__in { grid-template-columns: var(--tcol) var(--rail) minmax(0, 1fr); }
.page-tour--self main .tour-itin__day .pstop__time { font-size: var(--s-n1); line-height: var(--lh-head); }
.page-tour--self main .tour-itin__day .pstop__card::before { left: calc(var(--rail) / -2 - 6px); }
.page-tour--self main .tour-itin__day .pstop__no { left: calc(var(--rail) / -2 - 12px); } /* カードの枠1pxのぶんを引いて、丸（22px）を縦の線の真ん中に */
@media (max-width: 767px) { .page-tour--self main .tour-itin__day .pstop__no { left: calc(var(--rail) / -2 - 11px); } }
.page-tour--self main .tour-itin__day .pstop--point .pstop__card { padding: 12px 0; font-size: var(--s-0); line-height: var(--lh-head); }
.page-tour--self main .tour-itin__day .pstop--point .pstop__card span { font-size: inherit; }
.page-tour--self main .tour-itin__day .pstop__head { grid-template-columns: 102px minmax(0, 1fr) auto; padding: 10px; }
.page-tour--self main .tour-itin__day .pstop__thumb { width: 102px; height: 72px; }
.page-tour--self main .tour-itin__day .pstop__name { margin: 0; font-size: var(--s-0); line-height: var(--lh-head); word-break: auto-phrase; }
.page-tour--self main .tour-itin__day .pstop__meta { margin: var(--s-n4) 0 0; font-size: var(--s-n1); line-height: var(--lh-head); color: var(--ds-muted); }
.page-tour--self main .tour-itin__day .pstop__toggle { font-size: var(--s-n1); }
.page-tour--self main .tour-stop__text { display: grid; gap: var(--s-n2); padding: 0 var(--s-1) var(--s-0) calc(10px + 102px + var(--s-0)); }
.page-tour--self main .tour-stop__text > * { margin: 0; }
.page-tour--self main .tour-stop__text .itin__why { max-width: 36em; font-size: var(--s-0); line-height: var(--lh-body); word-break: auto-phrase; }
/* 立ち寄り先の「旅程に保存」は、ほかのページと同じ共通のボタン（枠つき、保存済みは塗り）。大きさだけここで決める（11/11 Takeru） */
.page-tour--self main .tour-stop__text .btn.btn--add.tour-stop__add { justify-self: start; width: auto; min-height: 44px; padding: 0 var(--s-0); }
.page-tour--self main .tour-itin__day .pstop__body-in { padding: 0 var(--s-1) 0 calc(10px + 102px + var(--s-0)); font-size: var(--s-n1); }
.page-tour--self main .tour-itin__day .pstop__body-in::after { height: var(--s-0); }
.page-tour--self main .tour-itin__day .pstop__body-in > .facts { margin: 0; padding: var(--s-0) 0 0; border-top: 1px solid var(--ds-rule); }
.page-tour--self main .tour-itin__day .pstop__body-in > .facts > div { grid-template-columns: calc(var(--s-0) * 6) minmax(0, 1fr); }
.page-tour--self main .tour-itin__day .leg { min-height: 48px; padding: var(--s-n4) 0 var(--s-n4) calc(var(--tcol) + var(--rail)); font-size: var(--s-n1); line-height: var(--lh-head); color: var(--ds-sumi); }
.page-tour--self main .tour-itin__day .leg__text, .page-tour--self main .tour-itin__day .leg__route { min-height: 44px; font-size: var(--s-n1); }
.page-tour--self main .tour-itin__day .leg__route { color: var(--ds-muted); text-decoration: underline; text-decoration-color: var(--ds-rule); text-underline-offset: 4px; }
.page-tour--self main .tour-itin__day .leg__route:hover { color: var(--ds-sumi); text-decoration-color: currentColor; }
.page-tour--self main .tour-map .map__note { font-size: var(--s-n2); }

/* 旅の出口：帰る・泊まるを2列の面に */
.page-tour--self main .exits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; }
.page-tour--self main .exits:not(:has(.exit--stay)) { grid-template-columns: minmax(0, 1fr); max-width: calc(50% - var(--s-4) / 2); }
.page-tour--self main .exit { margin: 0; padding: var(--s-1); border: 0; border-radius: 4px; background: var(--ds-face); }
.page-tour--self main .exit > * { margin: 0; }
.page-tour--self main .exit__label { margin-bottom: var(--s-n2); font-size: var(--s-n1); color: var(--ds-muted); font-weight: 400; }
.page-tour--self main .exit__place { font-size: var(--ds-h3); font-weight: 700; line-height: var(--lh-head); }
.page-tour--self main .exit__inns { display: grid; gap: var(--s-n4); padding: 0; list-style: none; }
.page-tour--self main .exit__inns li { padding: 0; border: 0; }
.page-tour--self main .exit__inns a { font-size: var(--ds-h3); font-weight: 700; line-height: var(--lh-head); }
.page-tour--self main .exit__area { margin-left: var(--s-n2); font-size: var(--s-n1); color: var(--ds-muted); }
.page-tour--self main .exit__note { margin-top: var(--s-n2); }
.page-tour--self main .exits__lead { margin: calc(-1 * var(--s-0)) 0 var(--s-4); }

/* 2列の章（ポイントと注意、金額と手配） */
.page-tour--self main .tips { display: grid; gap: 0; max-width: none; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ds-rule); }
.page-tour--self main .tip { margin: 0; padding: var(--s-0) 0; border: 0; border-bottom: 1px solid var(--ds-rule); }
.page-tour--self main .tip__text { margin: 0; }
.page-tour--self main #sec-5 .callout { margin: 0; padding: var(--s-1); border: 0; border-radius: 4px; background: var(--ds-tint); color: var(--ds-sumi); }
.page-tour--self main .cost__big { margin: 0 0 var(--s-1); font-size: var(--s-4); font-weight: 700; line-height: var(--lh-head); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.page-tour--self main .cost__big .price__note { display: block; margin-top: var(--s-n4); font-weight: 400; letter-spacing: .04em; }
.page-tour--self main #sec-6 .facts { margin: 0 0 var(--s-0); }
.page-tour--self main #sec-6 .facts > div { grid-template-columns: minmax(7em, 1fr) auto; } /* スマホで値が長いとき、項目名が1字の幅に縮まないように */
.page-tour--self main #sec-6 .facts dd { text-align: right; font-variant-numeric: tabular-nums; }
.page-tour--self main #sec-7 > p { margin: 0 0 var(--s-1); }

@media (max-width: 1023px) {
  .page-tour--self main .tour-detail > .detail__main { grid-template-areas: "toc toc toc toc toc toc toc toc toc toc toc toc" "s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1" "s2h s2h s2h s2h s2h s2h s2h s2h s2h s2h s2h s2h" "map map map map map map map map map map map map" "list list list list list list list list list list list list" "s3 s3 s3 s3 s3 s3 s3 s3 s3 s3 s3 s3" "s4 s4 s4 s4 s4 s4 s5 s5 s5 s5 s5 s5" "s6 s6 s6 s6 s6 s6 s7 s7 s7 s7 s7 s7"; }
  .page-tour--self main .tour-detail .tour-map { position: relative; top: auto; margin-bottom: var(--s-4); }
}
@media (max-width: 767px) {
  .page-tour--self main .tour-detail > .detail__main > section.section > h2.section__title { margin-bottom: var(--s-1); }
  .page-tour--self main .tour-overview h1 { font-size: var(--ds-h1); }
  .page-tour--self main .tour-overview .overview__act .btn { width: 100%; }
  .page-tour--self main .tour-detail > .detail__main { display: flex; flex-direction: column; }
  .page-tour--self main .tour-detail .tour-map { margin-bottom: var(--s-1); }
  .page-tour--self main .highlights { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .page-tour--self main .tour-itin__day { --tcol: 2.9rem; --rail: 28px; }
  .page-tour--self main .tour-itin__day .pstop { --head-h: 67px; }
  .page-tour--self main .tour-itin__day .pstop__head { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "thumb name toggle" "meta meta meta"; gap: var(--s-n4) var(--s-n2); padding: 8px; }
  .page-tour--self main .tour-itin__day .pstop__thumb { grid-area: thumb; width: 72px; height: 51px; }
  .page-tour--self main .tour-itin__day .pstop__title { display: contents; }
  .page-tour--self main .tour-itin__day .pstop__name { grid-area: name; align-self: center; }
  .page-tour--self main .tour-itin__day .pstop__meta { grid-area: meta; margin: 0; }
  .page-tour--self main .tour-itin__day .pstop__toggle { grid-area: toggle; }
  .page-tour--self main .tour-itin__day .pstop__time { padding-right: 0; }
  .page-tour--self main .tour-stop__text, .page-tour--self main .tour-itin__day .pstop__body-in { padding: 0 var(--s-n2) var(--s-0) 8px; }
  .page-tour--self main .tour-stop__text .btn.btn--add.tour-stop__add { margin-left: -8px; }
  .page-tour--self main .tour-itin__day .pstop__body-in { padding-bottom: 0; }
  .page-tour--self main .tour-itin__day .pstop__body-in > .facts > div { grid-template-columns: minmax(0, 1fr); }
  .page-tour--self main .exits, .page-tour--self main .exits:not(:has(.exit--stay)) { grid-template-columns: minmax(0, 1fr); max-width: none; gap: var(--s-0); }
  .page-tour--self main .cost__big { font-size: var(--s-2); }
}