/* TOP：プライベートツアーが1本のとき（11/10 Takeru）。カードを帯の幅いっぱいに、写真（左）と文（右）で並べる。
   右の列は、帯の上の「1名 180,000円」の列と頭をそろえる */
@media (min-width: 768px) {
  .trip--private .trip__list:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); }
  .trip--private .trip__list > .card:only-child { display: grid; grid-template-columns: calc(47.667% - var(--sp-5)) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--sp-5); align-items: start; }
  .trip--private .trip__list > .card:only-child .card__link { display: contents; }
  .trip--private .trip__list > .card:only-child .media { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .trip--private .trip__list > .card:only-child > :not(.card__link), .trip--private .trip__list > .card:only-child .card__link > :not(.media) { grid-column: 2; }
  .trip--private .trip__list > .card:only-child .card__title { margin-top: 0; }
}

/* プライベートツアー1本を主役に見せる（11/10）。右の列は 名前・ひとこと・内容の表・詳しく見る。
   金額は帯の上にあるので、カードでは繰り返さない */
.trip--private .card--feature .card__lead { display: block; margin: 0 0 var(--sp-4); font-size: var(--t-md); line-height: 1.9; color: inherit; }
.trip--private .card--feature .card__facts { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--trip-line); }
.trip--private .card--feature .card__facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); column-gap: var(--sp-3); align-items: baseline; margin: 0; padding: var(--sp-3) 0; border-bottom: 1px solid var(--trip-line); }
.trip--private .card--feature .card__facts dt { margin: 0; color: var(--trip-soft); font-size: var(--t-sm); font-weight: 400; }
.trip--private .card--feature .card__facts dd { margin: 0; font-size: var(--t-md); font-weight: 400; line-height: 1.7; color: inherit; }
.trip--private .card--feature .card__more { margin: var(--sp-4) 0 0; }
.trip--private .card--feature .card__more .btn--primary { background: var(--c-bg); border-color: var(--c-bg); color: var(--c-deep); }
.trip--private .card--feature .card__more .btn--primary:hover, .trip--private .card--feature .card__more .btn--primary:focus-visible { background: rgba(255, 255, 255, .86); border-color: rgba(255, 255, 255, .86); color: var(--c-deep); }
html[lang="en"] .trip--private .card--feature .card__facts > div { grid-template-columns: 7em minmax(0, 1fr); }
.trip--private .card--feature .card__facts dd { color: var(--c-on-primary); opacity: 1; }
@media (max-width: 767px) {
  .top2 .trip--private .trip__list .card--feature .card__lead { display: block; margin: var(--sp-2) 0 var(--sp-3); font-size: var(--t-ui); line-height: 1.8; }
  .top2 .trip--private .trip__list .card--feature .card__facts { display: grid; }
  .trip--private .card--feature .card__facts > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 12px 0; }
  .trip--private .card--feature .card__facts dd { font-size: var(--t-ui); }
  .trip--private .card--feature .card__more { margin-top: var(--sp-3); }
  .trip--private .card--feature .card__more .btn { width: 100%; }
}

/* スマホ：「季節や目的から選ぶ」の3件を同じ扱いで並べる（大1＋小2をやめ、写真と名前の行を3つ） */
@media (max-width: 767px) {
  .top2 .entries__group--features .entries__list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--c-line); }
  .top2 .entries__group--features .door:first-child { grid-column: auto; }
  .top2 .entries__group--features .door__link { display: grid; grid-template-columns: 41.4% minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .top2 .entries__group--features .door .media, .top2 .entries__group--features .door:first-child .media { aspect-ratio: 1.414 / 1; margin: 0; }
  .top2 .entries__group--features .door__title { margin: 0; }
}
@media (max-width: 767px) { .top2 .trip--private .trip__price { margin-bottom: 12px; } }

/* TOP 全体の点検（11/10 Takeru）。区画ごとに違っていた列を、1つの12列（列の間 24px）にそろえる。
   半分に分ける区画は7列目、3つに分ける区画は5列目と9列目から始まり、
   4枚並びのカード（テーマから選ぶ）と同じ線に乗る */
@media (min-width: 768px) {
  /* セルフツアーのカード：写真と文を同じ幅に。写真は文の高さいっぱいまで伸ばし、上端と下端（保存ボタン）をそろえる */
  .top2 .trip--self .card { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .top2 .trip--self .card .media { position: relative; align-self: stretch; aspect-ratio: auto; min-height: 200px; }
  .top2 .trip--self .card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* 旅の選び方：見出しの右の列（金額・説明・ボタン）を7列目から */
  .top2 .section--choose .trip__intro { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
  /* プライベートツアー：写真（左半分）と文（7列目から）。写真の下端をボタンの下端にそろえる */
  .top2 .trip--private .trip__list > .card:only-child { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); align-items: start; }
  .top2 .trip--private .trip__list > .card:only-child .media { grid-row: 1 / span 4; position: relative; align-self: stretch; aspect-ratio: auto; min-height: 240px; }
  .top2 .trip--private .trip__list > .card:only-child .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* 東京から約2時間：右の列を5列目から。線から見出しまでの間を、ほかの区画と同じに */
  .page-home .top2 .section--access-strip { column-gap: var(--sp-4); padding-top: var(--sp-3); }
}
@media (min-width: 1024px) {
  /* セルフツアー：横に並ぶ2枚で、名前・所要時間・金額・ボタンの段の高さをそろえる */
  .top2 .trip--self .trip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
  .top2 .trip--self .trip__list > .card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .top2 .trip--self .trip__list > .card:nth-child(n+3) { margin-top: var(--sp-5); }
  /* ワーケーション：写真（左半分）と文（7列目から） */
  .page-home .top2 .teaser { column-gap: var(--sp-4); }
  .page-home .top2 .teaser > .media { grid-column: 1 / span 6; aspect-ratio: 1.414 / 1; }
  .page-home .top2 .teaser__text { grid-column: 7 / -1; }
  /* 音声ガイド：文は左の4列、2か所のカードは5列目と9列目から（「北杜に泊まる」と同じ線） */
  .page-home .top2 .section--audio .audio-guide { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .page-home .top2 .audio-guide__intro { grid-column: 1 / span 4; }
  .page-home .top2 .audio-guide__places { grid-column: 5 / -1; column-gap: var(--sp-4); }
}
@media (min-width: 768px) {
  .top2 .trip--self .card__title { text-wrap: balance; }
  .trip--private .card--feature .card__facts dt { font-size: var(--t-ui); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .trip--private .card--feature .card__facts > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* プライベートツアーの見出し：ボタンを外して右が2行になったので、左右を2段でそろえる。
   上の段は「専属ガイドと巡る」と金額、下の段は名前と説明を、それぞれ文字の底の線で合わせる */
@media (min-width: 768px) {
  .top2 .section--choose .trip--private .trip__intro { grid-template-areas: "eye price" "name lead"; align-items: baseline; row-gap: var(--sp-2); }
  .top2 .section--choose .trip--private .trip__eyebrow,
  .top2 .section--choose .trip--private .trip__name,
  .top2 .section--choose .trip--private .trip__price,
  .top2 .section--choose .trip--private .trip__lead { align-self: baseline; margin: 0; }
}
/* プライベートツアーが1本のとき、見出しとカードの間の線は外す（区切るものがないため。11/10 Takeru） */
@media (min-width: 768px) {
  .top2 .section--choose .trip--private .trip__list:has(> .card:only-child) { border-top: 0; padding-top: 0; }
}

/* 「東京から約2時間」：電車・車・空港からの来かたを、路線図のように線で見せる（11/10 Takeru）。
   線の描き方は地図の決まりに合わせる（鉄道＝白と色の交互、高速道路＝二本線、乗り継ぎ＝点線）。
   出発地・線・到着地の3列は3行で共通にして、線の両端をそろえる。スマホではこの区画は出ない */
.page-home .top2 .section--route { align-items: start; row-gap: var(--sp-3); grid-template-rows: auto auto auto 1fr; }
.page-home .top2 .section--route > .section__title { grid-column: 1 / span 4; grid-row: 1; }
.page-home .top2 .section--route > .route-lead { grid-column: 1 / span 4; grid-row: 2; margin: 0; font-size: var(--t-ui); line-height: 1.9; color: var(--c-text-weak); }
.page-home .top2 .section--route > .route-more { grid-column: 1 / span 4; grid-row: 3; margin: 0; }
.page-home .top2 .route { grid-column: 5 / -1; grid-row: 1 / span 4; }
@media (max-width: 1199px) {
  .page-home .top2 .section--route > .section__title, .page-home .top2 .section--route > .route-lead, .page-home .top2 .section--route > .route-more, .page-home .top2 .route { grid-column: 1 / -1; grid-row: auto; }
  .page-home .top2 .section--route > .route-more { order: 3; }
}

/* 北杜に泊まる：いちばん上の一棟貸し（宿場esoto）を、ほかの4つより大きく見せる（11/10 Takeru）。
   写真は左半分、文は7列目から。説明と、定員・食事・蔵元ツアーの表を足す。表の線はプライベートツアーと同じ作り */
.stay-feature__facts { display: none; }
@media (max-width: 767px) { .stay-feature__more { display: none; } }
@media (min-width: 768px) {
  .page-home .top2 .section--stay .card--stay-feature { grid-template-rows: auto auto auto 1fr; margin-bottom: var(--sp-4); }
  .page-home .top2 .section--stay .card--stay-feature .media { grid-column: 1 / span 6; grid-row: 1 / span 4; position: relative; align-self: stretch; aspect-ratio: auto; min-height: 416px; }
  .page-home .top2 .section--stay .card--stay-feature .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-home .top2 .section--stay .card--stay-feature .card__title { grid-column: 7 / -1; grid-row: 1; margin: 0 0 var(--sp-3); font-size: clamp(1.375rem, 1rem + .9vw, 1.75rem); line-height: 1.4; letter-spacing: .02em; }
  .page-home .top2 .section--stay .card--stay-feature .card__lead { grid-column: 7 / -1; grid-row: 2; margin: 0 0 var(--sp-4); font-size: var(--t-md); line-height: 1.9; color: var(--c-text); }
  .page-home .top2 .section--stay .card--stay-feature .stay-feature__facts { grid-column: 7 / -1; grid-row: 3; display: grid; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
  .stay-feature__facts > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
  .stay-feature__facts dt { margin: 0; font-size: var(--t-ui); font-weight: 400; color: var(--c-text-weak); }
  .stay-feature__facts dd { margin: 0; font-size: var(--t-body); line-height: 1.7; }
  .page-home .top2 .section--stay .card--stay-feature .stay-type__list { grid-column: 7 / span 3; grid-row: 4; align-self: end; margin: var(--sp-4) 0 0; }
  .page-home .top2 .section--stay .card--stay-feature .stay-type__list li { padding: 0; }
  .page-home .top2 .section--stay .card--stay-feature .card__ref { grid-column: 10 / -1; grid-row: 4; align-self: end; justify-self: end; margin: var(--sp-4) 0 0; }
}
/* ワーケーション：見出しを区画の上に出し、ほかの区画と同じ線で区切る */
@media (min-width: 768px) { .page-home .top2 .teaser__text > p:first-child { margin-top: 0; } }
/* タブレット幅：一棟貸しは写真を上に横長で置き、下を「説明｜表」の2列にする（写真が縦に伸びすぎないように） */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-home .top2 .section--stay .card--stay-feature { grid-template-rows: auto auto 1fr auto; }
  .page-home .top2 .section--stay .card--stay-feature .media { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 2 / 1; min-height: 0; margin-bottom: var(--sp-4); }
  .page-home .top2 .section--stay .card--stay-feature .card__title { grid-column: 1 / span 6; grid-row: 2; }
  .page-home .top2 .section--stay .card--stay-feature .card__lead { grid-column: 1 / span 6; grid-row: 3; margin-bottom: 0; }
  .page-home .top2 .section--stay .card--stay-feature .stay-feature__facts { grid-column: 7 / -1; grid-row: 2 / span 2; }
  .page-home .top2 .section--stay .card--stay-feature .stay-type__list { grid-column: 1 / span 6; grid-row: 4; }
  .page-home .top2 .section--stay .card--stay-feature .card__ref { grid-column: 7 / -1; grid-row: 4; }
}

/* プライベートツアーが1本のとき：見出しとカードの2段をやめ、1つの区画にまとめる（11/10 Takeru）。
   上は左右2列：左に文を1列（種類、ツアー名、ひとこと、金額、ボタン）、右の写真は文の上端からボタンの下端までで、右端は内訳の右端とそろえる。
   下は「この金額に含むもの」を横いっぱいに並べ、金額の根拠を宿・食事・ガイド・車・体験の5つで見せる。
   見出し側の説明文は、下の5つと同じ内容なので出さない */
.card__note { display: none; }
.trip--private .card--feature .card__note { display: block; margin: var(--sp-3) 0 0; font-size: var(--t-sm); line-height: 1.8; color: var(--trip-soft); }
@media (min-width: 768px) {
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) { --half: calc(50% - var(--sp-4) / 2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); align-content: start; padding-top: clamp(3.5rem, 6vw, 6rem); }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) :is(.trip__head, .trip__intro, .trip__list, .trip__list > .card, .card__link) { display: contents; }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) :is(.trip__eyebrow, .trip__name, .trip__price, .card__title, .card__lead, .card__more) { grid-column: 1; width: auto; max-width: none; padding-right: var(--sp-4); align-self: start; }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .trip__eyebrow { grid-row: 1; margin: 0 0 var(--sp-2); }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .trip__name { grid-row: 2; margin: 0 0 var(--sp-5); }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .card__title { grid-row: 3; margin: 0 0 var(--sp-3); }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .card__lead { grid-row: 4; margin: 0 0 var(--sp-4); text-wrap: pretty; }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .trip__price { grid-row: 5; margin: 0 var(--sp-4) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--trip-line); }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .card__more { grid-row: 6; margin: var(--sp-4) 0 0; }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .trip__lead { display: none; }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .trip__list > .card:only-child .media { grid-column: 2; grid-row: 1 / span 6; position: relative; align-self: stretch; justify-self: stretch; width: auto; min-height: 0; height: auto; margin: 0; border-radius: 4px; aspect-ratio: auto; }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .card__facts { grid-column: 1 / -1; grid-row: 8; margin-top: clamp(3rem, 5vw, 4.5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: var(--sp-4); row-gap: var(--sp-4); border-top: 0; }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .card__facts > div { display: block; padding: var(--sp-3) 0 0; border-bottom: 0; border-top: 1px solid var(--trip-line); }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .card__facts dt { margin: 0 0 var(--sp-2); font-size: var(--t-md); font-weight: 700; color: var(--c-on-primary); }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .card__facts dd { font-size: var(--t-ui); line-height: 1.8; opacity: .92; }
  .page-home .top2 .section--choose .trip--private:has(.trip__list > .card:only-child) .card__note { grid-column: 1 / -1; grid-row: 9; margin: var(--sp-4) 0 0; }
}
