/* 泊まる（/stay、/en/stay）だけの組み方。部品そのものは parts.css */
.page-stay main .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 旅の目的で選ぶ：町ごとの段。写真と文を 1.414 : 1、偶数の段は左右を入れ替える（七賢の見どころと同じ） */
.page-stay main .bases { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); margin: 0; container-type: inline-size; }
.page-stay main .base { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); column-gap: var(--s-4); align-items: stretch; margin: 0; padding: 0; border: 0; background: none; }
.page-stay main .base:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.414fr); }
.page-stay main .base:nth-child(even) .base__media { order: 2; }
.page-stay main .base__media { position: relative; min-height: calc((100cqw - var(--s-4)) / 2.414); margin: 0; border-radius: 4px; overflow: hidden; background: var(--ds-face); }
.page-stay main .base__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-stay main .base__body { display: flex; flex-direction: column; padding-block: var(--s-n2) 0; }
.page-stay main .base__body > * { margin: 0; }
.page-stay main .base__zone { color: var(--ds-muted); font-size: var(--s-n1); line-height: var(--lh-body); }
.page-stay main .base__zone a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.page-stay main .base__zone a:hover { color: var(--ds-sumi); }
html:root .page-stay main .base__name { margin: var(--s-n4) 0 0; font-size: var(--s-4); line-height: var(--lh-head); letter-spacing: .04em; }
.page-stay main .base__lead { margin-top: var(--s-0); max-width: 24em; }
.page-stay main .base .for-tags { display: flex; flex-wrap: wrap; gap: var(--s-n4); margin-top: var(--s-0); }
.page-stay main .base .tag--for { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-n2); border: 0; border-radius: 4px; background: var(--ds-face); color: var(--ds-sumi); font-size: var(--s-n1); }
.page-stay main .base__inns { margin-top: auto; padding-top: var(--s-1); border-top: 0; }
.page-stay main .base__inns > li { border-top: 1px solid var(--ds-sumi); border-bottom: 1px solid var(--ds-rule); }
.page-stay main .base__inns a { min-height: 64px; }
.page-stay main .base__inns a > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-0); flex: 1; }
.page-stay main .base__price { color: var(--ds-muted); font-size: var(--s-n1); font-weight: 400; }

@media (max-width: 899px) {
  .page-stay main .bases { gap: var(--s-6); }
  .page-stay main .base, .page-stay main .base:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .page-stay main .base:nth-child(even) .base__media { order: 0; }
  .page-stay main .base__media { min-height: 0; aspect-ratio: 1.414 / 1; margin-bottom: var(--s-0); }
  html:root .page-stay main .base__name { font-size: var(--s-2); }
  .page-stay main .base__lead { max-width: none; }
}

/* 宿と見どころの位置：地図と車の時間を 1.414 : 1 で並べる */
.page-stay main .stay-geo { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
.page-stay main .stay-geo .map { margin: 0; }
.page-stay main .stay-geo .map svg { display: block; width: 100%; height: auto; }
.page-stay main .stay-geo .map__note, .page-stay main .stay-geo .map__legend { margin: var(--s-n2) 0 0; font-size: var(--s-n2); color: var(--ds-muted); }
html:root .page-stay main .stay-drive > h3 { margin: 0 0 var(--s-0); }

/* 車の時間：短い順に、町と町の対と、分に比例した線 */
.page-stay main .drive { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ds-sumi); }
.page-stay main .drive > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-0); padding: var(--s-n2) 0 var(--s-0); border-bottom: 1px solid var(--ds-rule); position: relative; }
.page-stay main .drive > li::after { content: ""; grid-column: 1 / -1; display: block; height: 4px; margin-top: var(--s-n4); width: calc(var(--min) / var(--max) * 100%); border-radius: 2px; background: var(--ds-band); }
.page-stay main .drive__towns { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-n2); font-size: var(--s-0); line-height: var(--lh-body); }
.page-stay main .drive__to { display: inline-block; width: var(--s-0); height: 1px; background: currentColor; }
.page-stay main .drive__time { font-size: var(--s-0); font-weight: 700; line-height: var(--lh-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-stay main .drive__points-head { margin: var(--s-1) 0 var(--s-n4); color: var(--ds-muted); font-size: var(--s-n2); line-height: var(--lh-body); }
.page-stay main .drive__points { display: grid; gap: 0; margin: 0; }
.page-stay main .drive__points > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--s-n2); }
.page-stay main .drive__points :is(dt, dd) { margin: 0; color: var(--ds-muted); font-size: var(--s-n2); font-weight: 400; line-height: var(--lh-body); }
.page-stay main .stay-drive .checked { margin: var(--s-n2) 0 0; color: var(--ds-muted); }

@media (max-width: 899px) {
  .page-stay main .stay-geo { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
}

/* 宿の種類：1つの一覧。種類はカードの上の小さな見出しで示す */
.page-stay main .section--types .card__type { color: var(--ds-sumi); font-weight: 700; }
.page-stay main .section--types .card[id] { scroll-margin-top: var(--s-6); }

/* 最後の帯：主ボタンと副ボタンを並べる */
.page-stay main .stay-band { margin-top: var(--ds-sec); }
.page-stay main:has(> .stay-band:last-child) { padding-bottom: 0; margin-bottom: 0; }
html:root .page-stay main .stay-band h2 { margin: 0 0 var(--s-n2); padding: 0; border: 0; font-size: var(--ds-h2); }
.page-stay main .stay-band p { margin: 0; }
.page-stay main .stay-band__act { display: flex; flex-wrap: wrap; gap: var(--s-n2); margin-top: var(--s-1) !important; }
html:root .page-stay main .stay-band .btn--secondary { background: transparent; border-color: var(--ds-band-text); color: var(--ds-band-text); }
html:root .page-stay main .stay-band .btn--secondary:hover { background: rgb(255 255 255 / .12); }

/* 7軒を 3列でそろえるため、最初の1軒（一棟貸し）は横長に全幅で見せる */
@media (min-width: 900px) {
  .page-stay main .section--types .card-grid > .card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: var(--s-4); }
  .page-stay main .section--types .card-grid > .card:first-child .card__link { display: contents; }
  .page-stay main .section--types .card-grid > .card:first-child .media { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .page-stay main .section--types .card-grid > .card:first-child > :not(.card__link), .page-stay main .section--types .card-grid > .card:first-child .card__link > :not(.media) { grid-column: 2; }
  .page-stay main .section--types .card-grid > .card:first-child .card__kicker { padding-top: var(--s-n2); }
  html:root .page-stay main .section--types .card-grid > .card:first-child .card__title { font-size: var(--s-2); }
  .page-stay main .section--types .card-grid > .card:first-child > .btn--add { align-self: end; margin-bottom: 0; }
}

/* スマホ：宿のカードは要点だけ（写真を横に小さく、料金の目安だけ） */
@media (max-width: 559px) {
  .page-stay main .section--types .card-grid { gap: var(--s-4); }
  .page-stay main .section--types .card--place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.414fr); grid-template-rows: min-content 1fr; column-gap: var(--s-0); }
  .page-stay main .section--types .card--place .card__link { display: contents; }
  .page-stay main .section--types .card--place .media { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: start; }
  .page-stay main .section--types .card--place .card__kicker { grid-column: 2; grid-row: 1; align-self: start; }
  .page-stay main .section--types .card--place .card__title { grid-column: 2; grid-row: 2; align-self: start; font-size: var(--s-0); }
  .page-stay main .section--types .card--place > * { grid-column: 1 / -1; }
  .page-stay main .section--types .card--place .card__lead { margin-top: var(--s-n2); }
  .page-stay main .section--types .card--place .card__facts > div:nth-child(n+2) { display: none; }
}