/* ============================================================
   パソコンで見たときだけ効くCSS
   ------------------------------------------------------------
   ★このファイルは「PC担当のウィンドウ」だけが編集します。
   ★HTMLファイル（index.html など）は、ここからは絶対に触りません。

   決まりごと
   1. すべての指定を @media (min-width: 900px) の中に書くこと。
      → こうしておけば、何を書いてもスマホの見た目は変わりません。
   2. 900px 未満に手を入れたくなったら、スマホ担当に依頼すること。
   3. HTMLの構造を変えないと直せないものは、
      _作業ファイル/PC修正_HTMLが必要なもの.md に書き出して依頼すること。

   読み込み順：各ページの <style> より後ろに読み込むので、
   同じ強さの指定ならこちらが勝ちます。
   ============================================================ */

@media (min-width: 900px) {
  /* ここに書いていく */
}

/* ============================================================
   参考サイト（cosmic-okinawa.com/business/okinawapop/）を
   幅1280pxで実測した数値に合わせる。
     写真     666px（画面のはしまで裁ち落とし）
     文章     448px
     すきま    96px
     左右余白  50px
     見出し   30px / 行間54px
     本文     17px / 行間34px
     セクション 上120px / 下140px
   ============================================================ */

@media (min-width: 900px) {

  /* 参考サイトを 1280 / 1710 / 1920px の3つで測った結果、
     写真は「常に画面幅の52%」、すきまは「常に画面幅の7.5%」、
     文章だけ448pxで固定、と分かった。だから px ではなく vw（画面幅の％）で持つ。
        画面1280px → 写真666px  すきま96px
        画面1710px → 写真889px  すきま128px
        画面1920px → 写真998px  すきま144px
     ※ここを px で固定すると、広い画面で中身がまん中に取り残されて両脇が空く */
  :root {
    --pc-max:   1440px;  /* 「並びもの」の最大幅（カード6枚・ロゴ一覧など） */
    --pc-edge:    50px;  /* 左右の余白 */
    --pc-photo:   52vw;  /* 写真の幅（画面幅の52%） */
    --pc-text:   448px;  /* 文章の幅（画面が広がっても変えない） */
    --pc-gap:    7.5vw;  /* 写真と文章のすきま（画面幅の7.5%） */
    /* ページの本体（カード6枚など）の左端。1710pxなら135px、1280pxなら50px */
    --pc-side: max(var(--pc-edge), calc((100vw - var(--pc-max)) / 2));
  }

  /* ---------- トップの大きな写真（ヒーロー） ---------- */
  /* 写真は 2000x1250（8:5）。パソコンでは横に広いので、高さが足りないと
     上下が切り落とされる。実測：画面1710x950 だと高さ513pxしかなく、
     上下から325pxずつ・写真の52%が消えて、鳥居の上の横木が切れていた。
       高さ 74vh（画面950pxなら700px）→ 鳥居・石灯籠・玉垣まで入る
       位置 40%（まん中50%より上に寄せる）→ 切れるぶんを下側に回す
     下に少し余るので、次の見出しが画面の下に見えてスクロールしてもらえる */
  .hero {
    max-height: 74vh;
    background-position: center, center 40%;
  }

  /* ---------- トップの見出しを、鳥居の写真に重ねる ---------- */
  /* もともと写真の「下」に別の帯として置かれていた。パソコンでは場所を食うので、
     写真の上に重ねて1画面に「見出し＋Choose a tour＋カード6枚」を収める。

     .intro は index.html にしか無く、.hero は <main> の最初の要素なので、
     main を基準に top:0 / height:74vh と置けば写真にぴったり重なる。
     （74vh は上の .hero の max-height と同じ値。片方だけ変えないこと）

     文字は白＋影のみ。うしろを暗くする方法は写真の色がくすむので採らない。 */
  main { position: relative; }
  .intro {
    position: absolute; left: 0; right: 0; top: 0; height: 74vh;
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; z-index: 3;
    /* まん中から少しだけ上へ。
       ※ここは何度も調整した箇所。ひろこさんの頭のてっぺん（写真の上から
         624px地点、画面1710x900では page 425px）とのせめぎ合いになる。
         いまの値は「文字の底が髪のてっぺんに6pxだけ触れる」状態。
         ユーザーが見比べたうえで、しめ縄と文字が重ならないこちらを選んだ。
         これ以上下げると顔にかかるので下げないこと */
    transform: translateY(calc(-2vh + 4px));
    pointer-events: none;
  }
  .intro > .measure {
    width: min(100% - 100px, 1340px);
    max-width: none;
    margin-inline: auto;
    text-align: center;
  }
  /* 5rem＝80px。鳥居の柱を少しだけまたぐ大きさ。
     小さくすると柱の内側に収まって弱く、大きくすると鳥居の形が読めなくなる */
  .intro h1 {
    /* 4.68vw ＝ 画面1710pxのとき80px。上限5remで頭打ち。
       px で固定すると狭い画面で2行に折り返し、そのぶん背が伸びて
       説明文がひろこさんの頭にかかる（1280pxで実際に起きた）。
       画面幅に連動させれば、どの幅でも1行に収まる */
    font-size: clamp(1.6rem, 4.68vw, 5rem);
    /* 0.94 は文字の高さより低い値。見出しの箱が縮むぶん、
       説明文がさらに上がる（見出しは動かさずに詰められる）。
       1行なので、これで文字が切れることはない */
    line-height: 0.94;
    white-space: nowrap;
    color: #fff;
    margin: 0 0 0.05rem;  /* 見出しと説明文のすきま。元は0.8rem */
    text-shadow: 0 2px 22px rgba(8, 22, 32, 0.75), 0 1px 4px rgba(8, 22, 32, 0.55);
  }
  .intro .body {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.6rem;
    margin: 0;
    text-shadow: 0 1px 12px rgba(8, 22, 32, 0.85);
  }

  /* ---------- トップの写真の中の「THIS WEEK」のお知らせ ---------- */
  /* 左端が40pxで、下の「Choose a tour」ともそろっていなかった。
     ※ページの本体は「画面幅−100px、ただし最大1440pxで中央寄せ」なので、
       左端は画面幅で変わる（1710pxなら135px、1280pxなら50px）。
       50px 固定にすると広い画面でズレる。カードと同じ計算式を使うこと。
     これで「お知らせ → Choose a tour → カード1枚目」が縦一直線になる。
     毎週書き換える運用の情報なので、目立たせずに静かに置く */
  .hero {
    padding-inline: 0;
    padding-bottom: 2.6rem;
  }
  .hero-bottom {
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    margin-inline: auto;
  }

  /* ---------- 目次バーをヘッダーの帯の中に入れる ---------- */
  /* もとは position:fixed / top:53px で、ヘッダーの真下に降りてくる別の帯だった。
     ヘッダー53px ＋ 目次51px ＝ 上から104px を占めていた。
     ヘッダー（sticky・z-index 40）の上に重ねて 53px に収める。51px の節約。
     ・社名の右端225px、目次692〜1018px、MENUの左端1577px でぶつからない
     ・53px の帯の中で上下に動くと落ち着かないので、スライドではなくフワッと出す
     ・#tours などの scroll-margin-top も 104px 前提だったので合わせて詰める

     ★重要★ 必ず「.secnav-anchor + .secnav」で書くこと。ただの .secnav で書くと
     ツアーページ（kyoto-private-tour-1-day など）まで巻き込む。あちらの .secnav は
     position:sticky で常時表示、.show が付かないので、opacity:0 が
     効きっぱなしになり目次が完全に消える（実際に一度消した）。
     .secnav-anchor があるのは index.html だけなので、この書き方で切り分ける。 */
  .secnav-anchor + .secnav {
    top: 0;
    height: var(--barh, 53px);
    display: flex; align-items: center;
    background: transparent;
    border-top: 0; border-bottom: 0;
    z-index: 41;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .secnav-anchor + .secnav.show { opacity: 1; }
  /* ★同上：帯がクリックを吸わないように★（トップページ側） */
  .secnav-anchor + .secnav { pointer-events: none; }
  .secnav-anchor + .secnav ul {
    max-width: none; padding: 0; gap: 0.7rem;
    margin-inline: auto; overflow: visible;
    pointer-events: auto;
  }
  .secnav-anchor + .secnav a { padding: 0.5rem 0.7rem; }
  #tours, #map, #custom, #profile { scroll-margin-top: 4.5rem; }

  /* ---------- 本文の文字サイズ ---------- */
  /* 海外のプライベートツアー会社23社を幅1710pxで実測した結果、
     本文の中央値は16px（10社が16px、最小12px／最大22px）。
     うちも16pxで同水準だったが、1行の幅が海外の中央値463pxに対して
     600〜1440pxと長いぶん小さく見えるため、17pxに上げる。
     17px以上は23社中3社（17.6 / 18 / 22px）。
     ※.custom-cta の「Free to ask…」など、個別に大きさを決めている文字は
       それぞれの指定が優先されるので、ここでは変わらない。
     ★本体CSSの @media (min-width:780px) に
       「.tours .head .body, #map .body, #custom .body { font-size: 1rem }」
       がある。同じ書き方で並べないと効かない（section p.body では弱くて負ける）。
     ※本体CSSにある .story-text は index.html のCSSに残っているだけで、
       要素は0個（実測）。スマホ側でも使われていないので狙わない。 */
  .tours .head .body,
  #map .body,
  #custom .body,
  #profile .head .body { font-size: 17px; }

  /* ---------- ② ヘッダー ---------- */
  /* 左端は参考サイトと同じ50px。
     高さは 76px → 53px（30%減）。中身は社名2行の41pxなので、上下6pxずつで収まる。
     写真を早く見せたいので、帯は低くしている */
  .bar {
    padding-inline: var(--pc-edge);
    min-height: 53px;
    /* 上に貼り付ける。index.html の本体CSSはもともとこう書いてあるが、
       ツアー6ページの header.bar は position:static で、スクロールすると
       消えてしまう。目次バーをこの帯の中に重ねるので、ツアー側も
       index と同じ動きにそろえる（2026-08-30）。
       index では同じ指定が上書きされるだけなので、見た目は変わらない。 */
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(10px);
  }

  /* ---------- ④ ツアーページ：目次バーをヘッダーの帯の中に入れる ---------- */
  /* ユーザーの指定（2026-08-30）。トップページで同じことをしたのと同じ考え方。
     直す前：ヘッダー53px の下に、目次が48px の別の帯として置かれていた。
     重ねることで48px 節約し、スクロール中もずっと目次が見える。

     ★ツアー側だけを狙うこと★
     ただの `.secnav` で書くとトップページまで巻き込む。あちらは
     `.secnav-anchor + .secnav` で別に指定してあり、`.show` が付くまで
     opacity:0 の作りなので、こちらの指定が混ざると壊れる。
     `.where`（地図の節）はツアー6ページにしかなく、index には1つも無い。
     さらに `.secnav` の直前が必ず `.where` なので、これで切り分ける。

     実測（画面1710px）：社名の右端218px、目次656〜1054px、MENUの左端1577px。
     いちばん狭い1280pxでも 社名との間223px・MENUとの間308px あり、ぶつからない。
     アンカー先（#hl #itin #price #faq #cxl #book）は本体CSSで
     scroll-margin-top:3.6rem（57.6px）が付いており、53pxの帯に対して足りている。 */
  .where + .secnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--barh, 53px);
    display: flex; align-items: center;
    background: transparent;
    border-bottom: 0;
    z-index: 41;
  }
  /* ★クリックを吸わせないこと★（2026-08-30 ユーザー報告
     「ヘッダーにあるメニューボタンが押しても何も出てこない」）
     この帯は position:fixed で x=0〜1710 の全幅・z-index 41。
     ヘッダー（z-index 40）より手前にあるため、**帯の透明な部分が
     MENUボタン（x=1577〜1670）と社名のクリックを吸っていた**。
     実測：ボタンの中心(1624,26)で elementFromPoint が .secnav を返していた。
     帯そのものはクリックを通し、リンクだけ受け取るようにする。 */
  .where + .secnav { pointer-events: none; }
  .where + .secnav ul {
    max-width: none; padding: 0; gap: 0.7rem;
    margin-inline: auto; overflow: visible;
    pointer-events: auto;
  }
  .where + .secnav a { padding: 0.5rem 0.7rem; }

  /* ---------- ④ ツアーページ：節の見出しの大きさ ---------- */
  /* ユーザーの指定（2026-08-30「案B＝中間の32px」）。

     実測：トップページの節の見出し（Choose a tour / Choose by map /
     Build a tailor-made trip / About us / Your guides）は 38.4px。
     ツアーページの節の見出しは 24.8px で、トップの65%しかなく、
     同じサイトに見えていなかった。
     38.4pxに完全にそろえると、ただでさえ15,891pxあるページがさらに伸びるため、
     中間の 32px にする。

     対象は7つ：Highlights / Itinerary（この2つは .hl）/ Price / FAQ /
     Cancellation policy / Book / Other tours in this area。
     スポット名（25.5px）はそのまま。32px との差で上下の関係がはっきりする。

     ★index.html を巻き込まないか確認ずみ★
     index にも .hl は6件あるが、それは文字を光らせる <span>（h2 は入っていない）。
     .faq は index には無い。実測で6つの書き方すべて index では0件だった。

     本体CSSは clamp(1.25rem, 5vw, 1.55rem)。900px以上では常に上限が効くので、
     ここでは固定値で書いてよい。 */
  .hl h2,
  .inc h2,
  .faq h2,
  .cxl h2,
  .book h2,
  .also h2 { font-size: 2rem; }

  /* ---------- 目次バーの文言をPCだけ長い語にする ---------- */
  /* ユーザーの指定（2026-08-30・案A）。
     目次の `Sights` / `Route` は、飛び先の見出し `Highlights` / `Itinerary` と
     言葉が違っていた。2026-08-25 に**スマホの幅に収めるため短くした**経緯がある
     （バックアップ kyoto-1day_ハイライト短縮前_20260825.html に元の語が残っている）。

     実測：スマホ390pxで長い語にすると、リンク同士のすきまが 12px → 約5px になり
     押し間違えやすい。PC1710pxでは目次は幅398px、右のMENUまで500px以上空いていて余裕。
     → **スマホは短い語のまま、PCだけ長い語**にする。

     HTMLの `<span class="nav-s">短い語</span><span class="nav-l">長い語</span>` は
     スマホ担当が入れずみ。スマホ側で `.nav-l { display: none }`、ここで入れ替える。

     ★ `::before` で見た目だけ差し替えないこと ★
     それだと検索エンジンと読み上げには元の `Sights` が残り、
     見える文字とデータ上の文字が食い違う。 */
  /* ★1100px以上でだけ入れ替えること★（2026-08-30 スマホ担当の指摘＋こちらで再実測）
     目次は margin-inline:auto で画面の中央にあるので、語を長くすると
     **左右に均等に広がり、社名側が先に当たる**。

     実測（社名のインク右端との距離）
       | 画面 | kyoto-private-tour-1-day | kyoto-private-tour-with-driver |
       | 900px  | 短392→33px ／ 長437→13px | 短392→33px ／ **長497→−16px（重なる）** |
       | 1000px | 長437→63px | 長497→34px |
       | 1100px | 長437→113px | 長497→**84px** |

     スマホ担当からは `max-width: 1099px` で戻す案をもらったが、
     **PC担当は max-width を書かない決まり**（はじめに読む.md 第2条）。
     900〜1099pxでは何も書かず、ページ自身の `.secnav .nav-l { display:none }`
     に任せる＝短い語のまま。1100px以上でだけ入れ替える。

     ★ `.where + .secnav` と書くこと ★（スマホ担当の指摘。142行・208行と同じ理由）
     いまは index に nav-s/nav-l が無いので裸の `.secnav` でも実害は無いが、
     トップページの目次に同じ名前が付いたら巻き込む。 */
  @media (min-width: 1100px) {
    .where + .secnav .nav-s { display: none; }
    .where + .secnav .nav-l { display: inline; }
  }

  /* ---------- ④ ツアーページ：Highlights ---------- */
  /* ユーザーの指定（2026-08-30「案4＋番号」）。
     直す前：幅359pxで縦に4つ。ページ中で一番細く、まん中にぽつんとあった。
     文が短い（スマホ向けに切り詰めてある）ぶん、PCだと余計に小さく見えていた。

     見出し「Highlights」を左に固定（260px）、箇条書きを右に2列×2段で置く。
     ●の代わりに 01〜04 の番号を出して「4つの見どころ」だと一目で分かるようにする。
     高さ218px→74px。左端は上のテキスト（写真の左端）とそろう。

     ★ #hl で書くこと ★
     `.hl` は Itinerary の見出し（#itin）にも付いている。`.hl` で書くと
     そちらまで2列組みになって崩れる。id で狙って切り分ける。

     ★ ::before は本体CSSで●（7pxの青丸）として作られている ★
     content だけ差し替えても丸が残るので、width/height/border-radius/background を
     打ち消してから文字を入れること。

     実測（画面1710px）：右の2列は365pxずつ。1行に必要な最大が255pxなので、
     5ページとも4項目すべて1行に収まる。 */
  #hl {
    /* 左端を Fushimi Inari など「スポットの文字」と同じ x=128（7.5vw）にそろえ、
       右は画面のはしまで伸ばす（ユーザーの指定・2026-08-30「案2」）。
       直す前は x=314 で、すぐ下の 7:30 AM の行やスポットの文字より186px内側だった。 */
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-left: var(--pc-gap);
    padding-right: 0;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  #hl h2   { grid-column: 1; grid-row: 1; margin: 0; }
  #hl .rule { grid-column: 1; grid-row: 2; }
  #hl ul {
    grid-column: 2; grid-row: 1 / 4;
    flex-flow: row wrap;
    gap: 16px 36px;
    counter-reset: hlnum;
  }
  #hl li {
    flex: 0 0 calc((100% - 36px) / 2);
    min-width: 0;
    padding-left: 2.5rem;
    counter-increment: hlnum;
  }
  #hl li::before {
    content: counter(hlnum, decimal-leading-zero);
    position: absolute; left: 0; top: 0.16em;
    /* ↓ 本体CSSの●（丸）を消す */
    width: auto; height: auto; border-radius: 0; background: none;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent);
  }

  /* ---------- ④ ツアーページ：Itinerary ---------- */
  /* ユーザーの指定（2026-08-30）。Highlights と同じ並びにする。
     見出しを左（260px）、中身を右（630pxから）に置く。

     直す前：見出し「Itinerary」は x=790 に中央寄せでぽつんとあり、
     時刻の行は x=578（1つ目）と x=551（2つ目）でバラバラだった。

     ★見出しと時刻の行は別々の要素★
     #itin（見出しだけ）と .step（時刻の行）は兄弟で、あいだに
     スポット11個がはさまっている。1つの格子にまとめられない。
     見出しはここで左に置き、時刻の行はスポットと同じ列（x=128）に
     そろえている（指定はスポットの節にある）。

     ★index.html には .step も #itin も無い（実測で0件）★ */
  #itin {
    /* Highlights と同じ。左端を x=128 にそろえる（2026-08-30「案2」） */
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-left: var(--pc-gap);
    padding-right: 0;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  #itin h2   { grid-column: 1; grid-row: 1; margin: 0; }
  #itin .rule { grid-column: 1; grid-row: 2; }
  /* ※ 時刻の行（.step）の指定は、2026-08-30 の作り直しでスポットの節へ移した。
     ここには書かない（2か所に書くと後ろが勝って分かりにくくなる）。 */

  /* ---------- ② 下の固定バー（ツアー6ページ） ---------- */
  /* 値段が左端・ボタンが右端で1200px離れていたので、まん中に寄せてひとかたまりにする */
  .cta-bar {
    justify-content: center;
    gap: 2.2rem;
  }
  .cta-bar .price { flex: 0 0 auto; }
  .cta-bar .acts  { margin-left: 0; }

  /* ---------- ③ トップ：ツアーカード ---------- */
  /* 横スクロールをやめて3列×2段に。見出しとカードの左端もそろえる */
  /* 注意：地図の上に出るカードの入れ物にも .tours が付いている
     （<div class="tours map-callouts">）。巻き込まないよう .row の中だけに絞る */
  .tours .head {
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
  .tours .row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.9rem;
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    max-width: none;
    margin-inline: auto;
    padding: 1.6rem 0 0;
    overflow: visible;
  }
  .tours .row > .t-card {
    flex: none;
    max-width: none;
    width: 100%;
  }

  /* カードの金色の帯（Custom）と、左上のタグの重なりを防ぐ。
     index.html のCSSに「タグは縦に積む。横に並べると帯とぶつかる
     （135px・110pxの両方で確認ずみ）」とあるとおり、スマホ幅では成立していたが、
     PCでカードが228pxに広がったらタグが183pxまで伸び、帯（173pxから）に10pxかぶった。
     並ぶ幅を70%で止めて「1day / E-bike」＋「Car + driver」の2段に折り返す。
     縦3段にすると写真を隠す面積が増えるので、2段にとどめる */
  .tours .row .t-tags { max-width: 70%; }

  /* ---------- ① トップ：地図 ---------- */
  /* 1280px幅のまん中に544pxの地図がぽつんとあって、水色の面だけ広かった。
     参考サイトのやり方で「地図を左・見出しを右」の2段組みにする */
  /* 地図を画面の左はしまで届かせるため、セクションの左右余白を外す。
     上下の余白も詰める（地図セクションを1画面に収めるため） */
  #map {
    padding-inline: 0;
    /* 地図をできるだけ大きく見せたいので、上下の余白は最小限にする */
    padding-block: 12px;
  }
  #map .measure {
    max-width: none;
    display: grid;
    /* 地図の列は「auto」。地図の高さを画面基準で決め、幅はそこから決まる */
    grid-template-columns: auto var(--pc-text);
    /* 1行目を薄くして、見出しを上に寄せる。最後の 1fr が余りを吸う */
    grid-template-rows: 0.4rem auto auto auto auto 1fr;
    column-gap: var(--pc-gap);
    justify-content: start;
  }
  /* 見出しの置き場所は、拡大しているかどうかで左右に入れかわる。
       通常時：左（大きな日本地図の左上。海しか無いので文字が邪魔をしない）
       拡大中：右（左は京都の拡大地図とツアーカード6枚で埋まるため）
     どちらも「地図の上に重ねる」ので、見出しのぶんの高さが要らない。
     おかげで地図を大きいまま1画面に収められる。 */
  #map .measure > .divider { grid-row: 2; align-self: end; }
  #map .measure > h2       { grid-row: 3; }
  #map .map-head           { grid-row: 4; }

  /* ★padding ではなく margin で寄せること★
     .divider は width:40px の短い横棒だが、box-sizing:border-box のため
     padding-left を入れると padding のぶんが横棒の長さそのものになり、
     40px の棒が128pxまで伸びて左端（x=0）に張り付く（実際にそうなった）。 */
  #map .measure > .divider,
  #map .measure > h2,
  #map .map-head {
    grid-column: 1;
    margin-left: var(--pc-gap);
    max-width: var(--pc-text);
  }
  #map .measure:has(.label-layer.hide) > .divider,
  #map .measure:has(.label-layer.hide) > h2,
  #map .measure:has(.label-layer.hide) .map-head {
    grid-column: 2;
    margin-left: 0;
    max-width: none;
  }
  /* 「Back」ボタンを説明文の右端（x=1191）から、説明文の下・見出しと同じ左端へ移す。
     .map-head は本体CSSで display:flex / justify-content:space-between の横並び。
     ★ただの縦積み（flex-direction:column）にすると、.map-head の高さが
       38px→77px に増え、その39pxが右の列を押し広げて
       セクションが837px→876pxになり、1画面に収まらなくなる（実測ずみ）。
       ボタンだけ浮かせて（position:absolute）高さに数えさせないこと。 */
  #map .map-head {
    position: relative;
    justify-content: flex-start;
  }
  #map .back-btn {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.8rem;
  }

  /* ---------- 拡大中に「今どこか」を示す小さい日本地図 ---------- */
  /* 本体の地図は京都に拡大されるので、日本全体がどこにも残らない。
     スマホ担当に index.html へ入れてもらった複製（.map-locator）を、
     右の列の見出しの下に出す。

     ★注意1★ index.html 本体のCSSに .map-locator { display:none } がある。
       pc.css は @media (min-width:900px) の中しか書けず、スマホ側を消せないため、
       あちら側で消してもらい、こちらで display を戻す形にしてある。
       この display:block を消すと、PCでも地図が出なくなる。

     ★注意2★ 複製は id を全部消してある（同じ id が2つあると既存のJSが壊れるため）。
       そのぶん #jpmap で始まる本体のCSSが一切効かない。
       県の色・線・境界線の非表示は、ここでクラス指定として書き直す必要がある。
       放っておくと県がSVG自身の色（#EEEEEE）のままになる。

     ・出す/隠すは opacity と visibility で切り替える（display は使わない）。
       display を切り替えると、タップした瞬間に右の列の高さが変わって
       見出しがガクッと動くため。場所は常に確保しておく。
     ・拡大中かどうかは .label-layer.hide（本体のピンが隠れる）で判定する。 */
  .map-locator {
    display: block;
    grid-column: 2;
    /* 全行にまたがらせて、左の地図と縦位置をそろえる */
    grid-row: 1 / 7;
    align-self: center;
    justify-self: start;
    /* 左の地図と同じ高さ。幅はSVGの縦横比から自動で決まる（＝同じ大きさ）。
       右の列（448px）からはみ出すが、その右は何も無いので問題ない */
    height: min(calc(100vh - 87px), 900px, calc(41vw * 1.176));
    width: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  #map .measure:has(.label-layer.hide) .map-locator {
    opacity: 1;
    visibility: visible;
  }
  /* 見出しは常に上に置く。
     ・拡大中だけ上に動かすと、タップした瞬間に見出しがガクッと動く
     ・上にあれば、拡大中に出る右の地図の左上（海しか無いところ）に自然に重なり、
       見出しのぶんの高さが要らなくなる。おかげで右の地図を左と同じ大きさに
       しても1画面に収まる */
  #map .measure > .divider,
  #map .measure > h2,
  #map .map-head {
    position: relative;
    z-index: 2;
  }
  .map-locator svg { display: block; height: 100%; width: auto; }
  .map-locator svg .prefecture {
    fill: #D3DFE6;
    stroke: #FFFFFF;
    stroke-width: 1;
  }
  .map-locator svg .prefecture.plan { fill: var(--accent); }
  .map-locator svg .boundary-line { display: none; }
  .map-locator svg polygon,
  .map-locator svg path { vector-effect: non-scaling-stroke; }
  /* 本体側の「ここを押して」の点滅は、複製では不要 */
  .map-locator svg .tap-pulse,
  .map-locator svg .tap-target { display: none; }

  /* 「Kyoto」のピン。
     本体のピン（.pin）は .label-layer という別の入れ物にJavaScriptが作るもので、
     複製したのはSVGだけなので入っていない。CSSで作り直す。
     位置は複製の枠に対する割合で固定できる（複製は常に日本全体を映すため）。
       京都の中心＝横36.8% / 縦67.5%（実測）
     見た目は本体のピンに合わせた：白地・アクセント色の枠・角丸・12px・太さ600。
     左の丸い点は radial-gradient で描いている（要素を増やせないため）。

     ★本体のピンは「Kyoto 6」だが、ここは数字を付けない★
       本体の数字はJavaScriptがツアー本数を数えて入れている。CSSで書くと
       手打ちの固定値になり、ツアーが7本になっても6のまま残って食い違う。
       すぐ上に「Kyoto has N tours.」と出ているので数はそちらで分かる。
       （2026-08-28 ユーザーと相談のうえ、数字なしを採用） */
  .map-locator { position: relative; }
  .map-locator::after {
    content: "Kyoto";
    position: absolute;
    left: 36.8%;
    top: 67.5%;
    transform: translate(-50%, -50%);
    background: #fff radial-gradient(circle 3px at 11px 50%, var(--accent) 100%, transparent 0) no-repeat;
    color: var(--accent-deep);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 5px 11px 5px 22px;
    font: 600 12px/1 var(--body);
    white-space: nowrap;
    box-shadow: 0 2px 7px rgba(0, 118, 163, 0.22);
  }
  /* 地図は「幅52vw」で作ると、縦横比1:1.176のため高さが1046pxになり、
     画面（900px）に収まらず295pxはみ出していた。
     高さを画面基準（62vh）で決めて、幅はそこから決める。
     ※ width:auto と justify-self:start の両方が要る。
       width:100% のままだと枠だけ縮んで、中の地図が小さくなるだけになる。
     ※ ピンはSVGの実際の位置から毎回計算し直しているので、
       縦横比を変えてもずれない（layoutLabels）。 */
  #map .map-wrap {
    /* 見出し「Choose by map」の左端（7.5vw）にそろえる。
       画面の左はしまで裁ち落としていたが、ユーザーの指定で右へ寄せた */
    margin-left: var(--pc-gap);
    grid-column: 1;
    grid-row: 1 / 7;
    align-self: center;
    justify-self: start;
    width: auto;
    /* 「画面の高さ − 87px」＝ ヘッダー53px＋上下の余白24px＋予備10px を引いた残り全部。
       vh の割合ではなく引き算にすることで、どの画面の高さでも
       「1画面にちょうど収まる最大の大きさ」になる。
       画面900pxで 691x813、720pxで 538x633。 */
    /* ★幅でも抑えること★ 高さだけで決めると、縦長の画面（1280x900など）で
       地図が691pxになり、右の複製と合わせて画面からはみ出して横スクロールが出た。
       41vw*1.176 を足して、幅が足りないときは自動で小さくなるようにする
       （1710x900では813pxのまま変わらない） */
    height: min(calc(100vh - 87px), 900px, calc(41vw * 1.176));
    margin-top: 0;
  }

  /* ---------- ④ ツアーページ：表紙の写真ギャラリー ---------- */
  /* たて写真は2枚ならべ、よこ写真は1枚。スマホ担当がJSを直してくれたので
     （2026-08-30／PC修正_HTMLが必要なもの.md の依頼）、ここで見た目を作る。

     しくみ：写真の高さをそろえ、よこ幅は写真まかせ（width:auto）にする。
     たて（比4:5）2枚 ＝ 高さ×0.8×2 ＋ すきま14px
     よこ（比8:5）1枚 ＝ 高さ×1.6
     この2つは高さ667pxのとき 1081px と 1068px。差は14px（1.3%）しかないので、
     めくっても画面がほとんど動かない。

     ★高さを固定値にしないこと★ 667px固定にすると、画面900pxのときに
     写真が1081pxになり、横スクロールが出る。画面幅から引き算して、
     入りきらないときは自動で小さくなるようにする。
     140px は「左右の余白50px×2 ＋ 矢印が外にはみ出す分」。
     画面1181px以上で667pxに達し、そこからは変わらない。 */
  /* リードの見出しも同じ幅にそろえるので、変数にして1か所で決める */
  :root {
    --hg-h: min(667px, calc((100vw - 140px - 14px) / 1.6));
    /* たて2枚ならべたときの幅。よこ1枚（高さ×1.6）より14px広いので、こちらに合わせる */
    --hg-w: calc(var(--hg-h) * 0.8 * 2 + 14px);
  }
  .hg {
    width: var(--hg-w);
    max-width: none;
    margin-inline: auto;
  }
  /* 本体CSSは aspect-ratio:3/2 のよこ長の枠に object-fit:cover で押し込んでいた。
     そのせいでたて写真は上下が47%切り落とされていた。枠をやめて写真の形に任せる */
  .hg-main {
    aspect-ratio: auto;
    height: var(--hg-h);
    width: max-content;
    margin-inline: auto;
    background: transparent;
    overflow: visible;   /* 矢印を枠の外に出すため */
  }
  .hg-shots {
    display: flex;
    gap: 14px;
    width: auto;
    height: 100%;
  }
  .hg-shots img {
    width: auto;
    height: 100%;
    object-fit: contain;   /* 切らない */
    border-radius: 10px;
  }
  /* 矢印は写真の外へ。写真に重ねると、たて2枚のときに1枚目の顔に乗る */
  .hg-prev { left: -56px; }
  .hg-next { right: -56px; }

  /* サムネイル帯：8枚目から画面の外に切れていたので、折り返して全部見せる。
     枚数はページごとに違う（5〜14枚）ので、1枚の幅を決め打ちせず
     「最大12枚ぶんの幅」を上限にして、少ないページでは大きくなりすぎないようにする */
  .hg-strip {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .hg-thumb { flex: 0 1 calc((100% - 11 * 8px) / 12); }

  /* ---------- ④ ツアーページ：リードの見出し ---------- */
  /* 見出しを写真の左端・右端にそろえる（ユーザーの指定・2026-08-30「案B」）。

     直す前：本体CSSの .measure は幅608px・左右に40pxの内側余白がある。
     そのため見出しの左端が x=591 で、写真の左端 x=314 より277px内側にあった。

     内側余白を0にして、幅を写真とまったく同じ（--hg-w）にする。
     左端も右端も写真と一致し、大見出しも1行に収まる
     （1行に必要なのは847px、写真の幅は1081px）。

     ★ .measure の中の子要素にも max-width が掛かっている★
     枠だけ広げても中身が528pxのままなので、子にも max-width:none を書く。 */
  .lead-block .measure,
  .lead-after .measure,
  .facts {
    width: var(--hg-w);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
  .lead-block .measure > *,
  .lead-after .measure > *,
  .facts > * {
    max-width: none;
    margin-inline: 0;
  }
  /* 説明文と facts も同じ幅にそろえる（ユーザーの指定・2026-08-30）。
     直す前は写真の左端より277px内側にあり、見出しだけが写真とそろって
     下2つが取り残されていた。
     facts は6項目で、1段に収めるのに884px必要。写真の幅1081pxに収まるので
     2段から1段になり、上部が1230px→1195pxに縮む。
     説明文の1行が1081pxと長くなる点はユーザーに伝えたうえで、
     「右の写真の右端まで書いていい」との指定でこの形にした。 */

  /* ---------- ④ ツアーページ：地図の下の一文（Where） ---------- */
  /* 「We start at Kyoto Station…」を、上のリードと同じ左端・右端にそろえる
     （ユーザーの指定・2026-08-30）。
     直す前は x=551..1159 の枠に左右40pxの内側余白があり、
     文字の左端が591px。上のテキスト（314px）より277px内側だった。
     ※ 地図（.fig と .zpanel）はまだ 608px の枠の中にいる。別途あつかう。

     ★本体CSSの強さに合わせること★
     本体は `.where .where-note { max-width: var(--measure); ... }` と2語で書いてある。
     `.where-note` だけで書くと強さが足りず、何も起きない（実際にそうなった）。 */
  /* 2026-08-30 更新（ユーザーの指定）：
     「右側の拡大地図のすぐ下に配置して」
     直す前：2枚の地図の下に幅1081pxで1本、拡大図の下端から135px離れていた。
     直した後：拡大図と同じ列（x=986〜1396・409px）の**すぐ下16px**。

     ★ .inner を display:contents で透かすこと ★
     地図2枚は `.where > .inner`（flex）の中、注記は `.inner` の**外**にある兄弟。
     そのままでは同じ列に置けない。`.inner` を透かして、地図2枚と注記を
     `.where` の格子に直接置く。

     ★ 2行目を 1fr にすること ★（落とし穴3-2と同じ）
     日本地図（649px）は拡大図（435px）より高く、1〜2行にまたがる。
     両方 auto だと余り214pxが半分ずつ配られ、拡大図と注記の間が72px空く。
     1fr にすると余りは全部2行目へ行き、注記は拡大図のすぐ下に来る。 */
  .where {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      calc(var(--hg-w) * 0.6)
      23px
      calc(var(--hg-w) * 0.4 - 23px)
      minmax(0, 1fr);
    /* 2026-08-30 ユーザーの指定「拡大地図とテキストのかたまりを上下中央に」。
       1行目と4行目を 1fr にすると、余りが上下へ**半分ずつ**配られ、
       拡大図＋注記のかたまりが日本地図に対して上下中央にそろう。
       （注記だけを下げたい時とは逆で、ここでは半分ずつが正解） */
    grid-template-rows: 1fr auto auto 1fr;
    align-items: start;
    /* 地図の下に余白が1pxしかなく、次の節の区切り線とくっついていた
       （ユーザー指摘 2026-08-30・矢印）。上は区切り線から地図まで42px
       （= .where の margin-top 41.6px）あるので、下も同じにする。 */
    padding-bottom: 2.6rem;
  }
  .where .inner  { display: contents; }
  .where .fig    { grid-column: 2; grid-row: 1 / 5; }
  .where .zpanel { grid-column: 4; grid-row: 2; }
  .where .where-note {
    grid-column: 4; grid-row: 3;
    width: auto;
    max-width: none;
    margin: 16px 0 0;
    padding-inline: 0;
  }

  /* 地図そのものを大きくする（ユーザーの指定・2026-08-30「案4」）。
     直す前：枠608px・日本地図243px・拡大図263x278px。両脇がスカスカだった。

     枠を上のテキストと同じ --hg-w にそろえ、日本地図の取り分を46%→60%に増やす。
     画面1710pxで 日本地図649px・拡大図410x435px・節の高さ738px。

     ★.where .fig には max-width:16rem（256px）が掛かっている★
     幅の割合だけ変えても256pxで止まるので、max-width:none を必ず添える。

     ★拡大図は aspect-ratio:1/1.06 の縦長★
     幅を広げるとその分だけ背が高くなる。日本地図を主役（60%）にしたことで
     拡大図が細くなり、節の高さが案3（684px）より…ではなく738pxになっている。
     日本地図が正方形（比1:1）で、60%＝649px＝高さ649pxになるため。 */
  .where .inner {
    width: var(--hg-w);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
  .where .fig {
    flex: 0 0 60%;
    max-width: none;
  }

  /* ---------- ④ ツアーページ：スポット ---------- */
  /* ユーザーの指定（2026-08-30・スクショで指示）。
     ① 写真は常に右で固定（左右交互をやめた）
     ② 文字は常に左、写真の「上」でそろえる（上下中央をやめた）
     ③ たて1枚は、たて2枚の左の写真とまったく同じ（438x547・左そろえ）
     ④ 左の文字を写真の左端まで広げて行数を減らす（すきま64px）

     直す前の問題（実測）：
     ・写真が1つおきに左右へ飛び、文字も x=128 と x=1017 を行き来していた
     ・文字が上下中央だったため、写真の上から132〜445px 沈んでいた
     ・たて1枚が 889x1111px と画面より高く、左に884px も空いていた
     ・本文の合計63行

     直した後：写真は全部 x=821〜1710、文字は全部 x=128、上のズレ0px。
     本文の合計50行（13行減）。ページ 15,782px → 13,516px。

     ★文字の列を固定値にしないこと★
     `448px + 52vw + 7.5vw` という固定の足し算だったため、
     画面900〜1199px では合計が画面幅を超えて横スクロールが出ていた
     （900pxで984px、1000pxで1043px）。
     minmax(0, 629px) にすると、狭いときは文字の列が自動で縮んで収まる。
     629px は画面1710pxで「すきま64px」になる幅。 */
  /* ★ :nth-of-type(even) は書かない ★
     もとは1つおきに左右を入れかえるために使っていたが、写真を常に右に固定した今は不要。
     残しておくと `.spot:nth-of-type(even) > .pset`（強さ 0,3,0）が
     `.spot .p-tall`（0,2,0）に勝ってしまい、たて1枚の指定が1か所だけ効かなかった
     （実際に spot10 だけ 889x1111 のまま残った）。 */
  .spot {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 629px) var(--pc-photo);
    /* 見出し・本文・詰め物。下の 1fr が余りを吸うので、文字は上でそろう */
    grid-template-rows: auto auto 1fr;
    column-gap: 64px;
    padding-left: var(--pc-gap);
    padding-right: 0;
    justify-content: space-between;
  }
  .spot > .spot-head {
    grid-column: 1; grid-row: 1;
    max-width: none; margin-inline: 0; padding-inline: 0;
  }
  .spot > .spot-text {
    grid-column: 1; grid-row: 2;
    max-width: none; margin-inline: 0;
    padding: 1.15rem 0 0;
  }
  .spot > .pset {
    grid-column: 2; grid-row: 1 / 4;
    align-self: start;          /* ← 上でそろえる（前は center） */
    width: 100%; max-width: none; margin: 0;
  }
  /* たて2枚・よこ1枚は写真の列いっぱい（52vw）に */
  .spot .p-two,
  .spot .p-wide { max-width: none; }
  /* たて1枚は「たて2枚の左の写真」と同じ大きさ・同じ位置にする。
     たて2枚は 52vw を14pxのすきまで割った438pxずつなので、その式をそのまま使う。
     margin-inline: 0 auto で左そろえ（右に余りを寄せる） */
  .spot .p-tall {
    max-width: calc((var(--pc-photo) - 14px) / 2);
    margin-inline: 0 auto;
  }

  /* ---------- ④ ツアーページ：Itinerary の時刻の行 ---------- */
  /* 「7:30 AM Meet at…」「3:30 PM Finish at…」を、スポットの文字と同じ列に置く。
     直す前は x=630（見出しの列）にあり、すぐ下のスポットの文字（x=128）と
     500pxずれていた。スポットと同じ格子を掛けてそろえる */
  .step {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-left: var(--pc-gap);
    padding-right: 0;
    display: grid;
    grid-template-columns: minmax(0, 629px) var(--pc-photo);
    column-gap: 64px;
    justify-content: space-between;
  }
  .step .step-in { grid-column: 1; }

  /* ---------- ④ ツアーページ：Price ---------- */
  /* ユーザーの指定（2026-08-30）。Highlights と同じ位置にそろえ、中身を2カラムにする。
     左＝料金の表と説明、右＝What the price includes（含む／含まない／当日の実費）。

     直す前：9個の要素が幅608pxで縦一列に並び、高さ979px あった。
     直した後：624px（36%短縮）。左端は x=128 でスポットの文字とそろう。

     ★入れ物を足せないので、格子の位置を1つずつ指定している★
     HTMLは触れないため .ptable と .inc-h 以下を包む箱が作れない。
     そこで #price 自体を3列（見出し／料金／含むもの）の格子にして、
     子9個に grid-area で行と列を割り当てる。

     ★行は左右で共有される★
     .ptable を1行目だけに置くと、その高さ126pxに引っぱられて
     右側の「What the price includes」の下に97pxの穴が空く。
     .ptable を1〜2行、.ptable-note を3〜6行にまたがらせることで、
     行の高さは右列の中身が決めるようにしている。

     ★.onday と .note-more には max-width と margin:auto が掛かっている★
     外さないと列の中で中央に寄って細いままになる（実測 幅299px と 187px）。 */
  /* ★右のふちにくっつけない★（2026-08-30 ユーザー指摘・スクショのピンク枠）
     padding-right が 0 だったため、2列のかたまりの右端が x=1710（画面のふち）
     に達し、左は128pxあるので右に寄って見えていた。
     左右とも var(--pc-gap)（1710pxで128px）にして、節を 128〜1582 の左右対称にする。

     ★左の列（料金の表）だけ10%左へ伸ばす★（同・ユーザー指定）
     見出しの列を 260px→206px に詰めることで、左の列が 444→390 に伸びる（541→595px、＋10%）。
     右の列（What the price includes）は 1041〜1582 のまま動かさない。
     見出し「Price」の文字は x=128〜205（インク実測）なので、390 までは185px空いていて重ならない。

     ★fr の比で書くこと★（落とし穴3-1）
     595px と固定で書くと画面900pxで足し算が画面幅を超えて横スクロールが出る。
     1.1fr : 1fr にすると 1710pxでちょうど 595 : 541 になり、狭い画面では自動で縮む。
     900 / 1200 / 1440 / 1920px で横スクロールが出ないことを実測ずみ。 */
  #price {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
    display: grid;
    /* 2026-08-30 ユーザーの指定「そろえて」。
       下の FAQ・Refunds・Other tours の中身が 338〜985 になったので、
       Price の左の列も 390 → **338〜985（647px）** にそろえる。
       右の列は自動的に **1041〜1582** となり、右にある Book とぴったり同じ位置。

       すきまが左右で違う（見出しとの間4px／2列の間56px）ため、
       column-gap（全部同じ値になる）ではなく **すきまを列として書く**。
       fr の数字は最終の幅そのもの（647fr : 541fr）にしてあるので、
       画面が広くても狭くてもこの比のまま伸び縮みする。 */
    grid-template-columns:
      var(--pc-gap)
      minmax(0, 206px)
      4px
      minmax(0, 647fr)
      56px
      minmax(0, 541fr)
      var(--pc-gap);
    column-gap: 0;
    align-items: start;
  }
  #price h2           { grid-area: 1 / 2; margin: 0; }
  #price .rule        { grid-area: 2 / 2; }
  /* 左（2列目）＝払う金額のはなし。右（3列目）＝含む／含まないのはなし。
     「Costs on the day（当日の実費 約¥4,500）」も金額なので左に置く
     （ユーザーの指定・2026-08-30 スクショの矢印）。
     それを説明する「Notes on costs on the day」も一緒に左へ。
     結果、左411px・右384px でほぼ同じ高さになり、節は624px→539pxに縮んだ。 */
  #price .ptable      { grid-area: 1 / 4 / 3 / 5; margin-bottom: 0; }
  /* すきまを半分に（ユーザーの指定・2026-08-30）。
     表→説明文 50px→25px、説明文→水色の箱 48px→24px。

     ★margin-top が負の値なのは、格子の行を左右で共有しているから★
     .ptable（126px）は1〜2行にまたがる。行の高さは右列が決めるので
     1行目42px＋2行目127px＝169px となり、表の下に43pxの余りが出る。
     この余りは打ち消せないため、-25px 引いて見た目を25pxにしている。
     画面1440px以上では25px。1280pxでは右の Included が1行増えるので50pxになる。
     余りを右列に寄せる（.ptable を1行目だけに置く）と、今度は
     「What the price includes」の下に97pxの穴が空くので、こちらを選んだ。 */
  #price .ptable-note { grid-area: 3 / 4; margin-top: -25px; margin-bottom: 0; }
  #price .onday       { grid-area: 4 / 4; margin-top: 24px; }
  /* ★「Notes on costs on the day」（.note-more）にも置き場所を決めること★
     2026-08-30、kyoto-private-tour-1-day からは削除されたが**他の5ページには残っている**
     （中身はページごとに違い、重複していないので消していない）。
     置き場所を書き忘れていたため、自動で1列目＝左の余白の列（x=0〜128・幅128px）
     に落ちて、ページの左端にはみ出していた（ユーザー報告 2026-08-30・kyoto-food-tour）。
     内容は「当日の費用の注記」なので、金額の話をまとめている左の列の
     .onday（当日の実費）のすぐ下に置く。 */
  #price .note-more   { grid-area: 5 / 4; margin-top: 16px; }
  #price .note-more, #price .note2 { max-width: none; width: auto; margin-inline: 0; }
  /* ※「Notes on costs on the day」（.note-more）は 2026-08-30 にHTMLから削除された。
     ¥4,500の内訳は Not included の3行（¥2,500＋¥960＋¥1,000）に、
     「現金のみ」は FAQ の How much cash do I need on the day? に既にあり、重複していたため。
     消えたあとも左右の高さは 左9,284px・右9,318px でほぼそろっている（調整不要）。 */
  #price .inc-h       { grid-area: 1 / 6; margin-top: 0; }
  #price .yes         { grid-area: 2 / 6; }
  /* ★3〜5行にまたがらせること★
     3行目だけに置くと、この228pxに引っぱられて左の説明文（114px）の下に
     114pxの穴が空く。またがらせると行の高さは左の中身が決める */
  #price .no          { grid-area: 3 / 6 / 6 / 7; }
  /* 水色の箱を今の70%の高さに（117px→82px）。上下の余白と行間を詰める */
  #price .onday { padding-top: 6px; padding-bottom: 6px; }
  #price .onday .onday-v { line-height: 1.15; margin-top: 2px; }
  #price .onday .onday-s { margin-top: 1px; }
  #price .onday       { max-width: none; width: auto; margin-inline: 0; }
  /* ★kyoto-private-tour-with-driver だけにある `.onday-line`★（他5ページは0件・実測）
     置き場所を書き忘れていたので、自動で1列目＝**左の余白の列**に落ちていた。
     幅154pxで縦530pxに伸び、Price の節が他ページの倍（1,064px／532px）になり、
     文字がページの左端（x=0）にはみ出していた（落とし穴 4-2-11 と同じ）。
     他ページの `.onday`（当日の実費）と同じ、左の列の4行目に置く。 */
  #price .onday-line  { grid-area: 4 / 4; margin-top: 24px; margin-bottom: 0;
                        max-width: none; width: auto; margin-inline: 0; padding-inline: 0; }

  /* ---------- Price を薄い水色の帯にする ---------- */
  /* ユーザーの指定（2026-08-30・案B）：
     「旅程が終わって記載内容がガラリと変わる。ずっと白背景が続くから
       Priceの2カラムのところだけ背景色をトップページみたいに変えたい」

     色はトップページと同じ `--paper-2`（#EAF5FA）。
     トップの Choose by map・About us・DHJ PRIVE・フッターで使っている
     `.section-alt` と同じ色で、**新しい色は足していない**。

     #price は `grid-column: 1 / -1` で画面の端から端（x=0〜1710）まであるので、
     背景を付けるだけで全幅の帯になる。

     上下の内側余白64pxは帯の中の空気。上の64pxの余白（margin-top）はそのまま残し、
     帯の上に白を挟む（案B。案Aは margin-top:0 で前の節にくっつける形だった）。
     ページ全体は 11,709px → 11,837px（+128px）。

     ★ .onday（COSTS ON THE DAY）を白に反転すること ★
     この箱の背景は元から #EAF5FA で、帯とまったく同じ色。
     そのままだと帯に溶けて消える（実測）。白にすると
     「水色の帯の上に白いカード」になり、トップページのカードと同じ関係になる。 */
  #price {
    background: var(--paper-2);
    padding-top: 64px;
    padding-bottom: 64px;
  }
  #price .onday { background: var(--card); }

  /* ---------- kyoto-private-tour-with-driver：Places you could go の見出し ---------- */
  /* ユーザーの指定（2026-08-30）「他のツアーページと同じ左のほうに移動」。
     直す前：見出しも説明文も 551〜1159（608px）でまん中に浮いていた。
     直した後：見出しは **x=128 から**。Price・FAQ・Refunds・Other tours と同じ左端。

     2026-08-30 追記：説明文（.kmap-lead）は地図の下へ移した（スマホ担当が対応）。
     見出しの右が空いたので **2〜4列にまたがらせて1行**にしている。
     2行のままだと節が689px、1行なら **647px**（実測）。

     ※ここにあった `#kmap + .measure`（説明文を4列目に置く指定）は、
       説明文が `.stage` の中へ移って `.measure` の入れ物ごと消えたため削除した。 */
  main:has(.where) > #kmap {
    grid-column: 2 / 5;
    width: auto; max-width: none; margin-inline: 0; padding-inline: 0;
  }

  /* ---------- kyoto-private-tour-with-driver：地図とカードを大きく組み直す ---------- */
  /* ユーザーの指定（2026-08-30・案2）：
     「このページの一番特徴的なところ。できるだけ写真が大きく見えるように」

     直す前：舞台（.stage）は幅608px・縦横比1:1.32の固定で、写真は**92〜98px**しかなかった。

     ★幅を広げるだけでは大きくならない★（実測）
     舞台の中は 地図SVG＝絶対配置で上に貼り付き、カード＝「下から0」「上から54%」など
     比率で置かれている。幅を広げると地図とカードの間だけが伸びて、
     1081pxでは大きな空白ができ、1454pxではカードが地図に重なった。

     ★絶対配置をやめて格子にすること★
     舞台を「左＝地図34% ／ 右＝カード3枚（2列）／ 下＝Kyoto city（全幅6列）」の
     格子にして、高さは中身に決めさせる（aspect-ratio と height を打ち消す）。
     これで **900 / 1100 / 1280 / 1710 / 1920px のどこでも重なりゼロ**（実測ずみ）。
     縦横比のままだと、狭い画面で文字の折り返しが増えてカードが背高になり、
     Kyoto city に重なった（900pxで実際に起きた）。

     写真の大きさ（画面1710px）：**92〜98px → カード215px・Kyoto city 235px（約2.4倍）**
     節の高さ：697px → 1,115px

     ★ HTMLに直接書かれた指定がある ★
     `.g.cityg` は HTML に `style="bottom:0;left:0;width:58%"`、
     その中の `.cs` は `style="grid-template-columns:repeat(3,1fr)"` と
     **インラインで書かれている**。インラインはCSSより強い。
     打ち消し方は下の「使わずに済ませる書き方」を見ること。

     ★ svg.mp は width が効く ★
     `right` を指定しても元の `width: 54%` が勝って変わらない。width で書くこと。

     ※ svg.tie（カードと地図を結ぶ線の層）は中身が空なので消している。 */
  .kmap-wrap .stage {
    aspect-ratio: auto;
    height: auto;
    display: grid;
    /* 左の列＝地図とその下の文。最低210pxを確保する。
       割合だけだと画面900pxで138pxまで細くなり、文の塊が476pxに伸びた（実測）。
       210px入れると 900〜1280px でも文は313pxで安定する。 */
    grid-template-columns: minmax(210px, 18%) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 20px;
    align-items: start;
  }
  .kmap-wrap .stage > svg.tie { display: none; }
  .kmap-wrap .stage > svg.mp {
    position: static;
    width: 100%; height: auto; aspect-ratio: 68 / 76;   /* SVGのviewBoxと同じ比 */
    grid-column: 1; grid-row: 1;
  }
  /* 注記は 2026-08-30 にスマホ担当が .stage の中へ移してくれた。
     900px以上では position:static のままなので、そのまま格子に置ける
     （スマホ側だけJSで位置を指定している）。 */
  /* 2026-08-30、スマホ担当が `.kmap-side` という入れ物を作り、
     イントロ文（.kmap-lead）と注記（.kmap-note）の2つをまとめて .stage の中へ移してくれた。
     900px以上では position:static のままなので、そのまま格子に置ける
     （スマホ側だけ、そちらのJSがこの塊ごと位置を指定している）。
     ★ .kmap-note ではなく .kmap-side を狙うこと ★
     置き場所を決めないと、格子の空いたところに自動で入って塊が伸びる
     （実測：476 / 343 / 258px とバラバラになった）。 */
  .kmap-wrap .stage > .kmap-side { grid-column: 1; grid-row: 2; margin: 0; }
  .kmap-wrap .stage > .gcol {
    position: static; width: auto;
    grid-column: 2; grid-row: 1;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start;
  }
  /* ★ !important を使わずに済ませる書き方 ★（2026-08-30・検査の指摘を受けて）
     `.g.cityg` には HTML に `style="bottom:0;left:0;width:58%"` が直接書いてある。
     ・position は style に無いので、ふつうに static と書けば勝てる
       （bottom / left は static では意味を持たなくなる）
     ・width は style が勝つが、**min-width なら勝てる**。100%で全幅になる
     ・中の .cs も `style="grid-template-columns:repeat(3,1fr)"` があるが、
       **display:flex にすれば grid-template-columns は無視される**
     この3つで !important を3個 → 0個にできた。 */
  .kmap-wrap .stage > .g.cityg {
    position: static; min-width: 100%;
    grid-column: 2; grid-row: 2;
  }
  .kmap-wrap .stage > .g.cityg .cs { display: flex; gap: 8px; }
  .kmap-wrap .stage > .g.cityg .cs > .c { flex: 1 1 0; min-width: 0; }
  /* 写真の形（ユーザーの指定・2026-08-30「黒で囲った余白を使って縦長に」）。
     いったん正方形にして高さを稼いだが、その後
     ・イントロ文が地図の下へ移った
     ・見出しが1行になった
     の2つで余白が生まれ、**元の 4:5 のたて長に戻せた**。

     ★4:5 は写真そのものの形★
     `.c img` は object-fit: cover なので、正方形にすると上下が切り取られていた。
     4:5 なら**切らずに全部見える**。

     実測（画面1710px・使える高さ704px）
       | 形 | 節 | カードの写真 | 余り |
       | 1/1 | 647px | 178×178 | 57px |
       | 7/8 | 656px | 178×204 | 48px |
       | 5/6 | 676px | 178×214 | 28px |
       | **4/5** | **694px** | **178×223** | **10px** |
     ※画面1920pxでは755pxになるが、その幅の画面は縦も広いので問題にしない。 */
  .kmap-wrap .stage .c img { aspect-ratio: 4 / 5; }

  /* ---------- kyoto-private-tour-with-driver：How your day is built と Options を2カラムに ---------- */
  /* ユーザーの指定（2026-08-30 夜）「How your day is built と Options は2カラムにしよう」

     直す前：どちらも見出し・中身とも 551〜1159（608px・中央）にぽつんとあり、
     すぐ上の地図（128〜1582）ともすぐ下の Price（見出し128／中身338）ともズレていた。

     直した後：**下半分と同じ7本の列**に載せる。
       見出し … 2列目（128〜334）
       中身   … 4列目（338〜985）
     これで Price・FAQ・Refunds・Other tours と左端が一直線になる。

     ★入れ物を足せないので、見出しと中身は「別々の兄弟」のまま置く★
     #plan と .step、#opt と .measure は親（main）の格子に直接置いている。
     列だけ決めて行は自動に任せると、見出しは1つ目の中身と同じ行に入り、
     2つ目以降が下の行へ送られる（Chromeの自動配置の順番。実測で確認）。

     ★強さに注意★
     `main:has(.where) > *`（0,1,1）が全部の子を 1/-1 にしている。
     `.step` や `.measure` はクラスだけ（0,1,0）なので負ける。
     `#plan ~ .step` / `#opt + .measure` と id を頭に付けて（1,1,0）勝たせる。
     この書き方は kyoto-private-tour-with-driver にしか #plan / #opt が無いので、
     他5ページの Itinerary の時刻の行（.step）には掛からない。 */
  /* ★行は90番から決め打ちする★
     3つ目の STEP を「2つ目の下」ではなく「1つ目の右」に置きたい。
     ところが Chrome のふつうの自動配置は**前に置いた場所より後ろしか探さない**ので、
     列だけ 6/7 と決めても2つ目の下に落ちる。dense にすると今度は
     **地図の見出し（#kmap は 2/5 列）の行の空き**に吸い込まれて y=2006 まで飛んだ。

     そこで、既にこのファイルで使っている「行番号を決め打ちする」手（101〜104行）と
     同じやり方にする。行1〜100 はすべて auto なので、使わない行は高さ0で消える。
     この節より上にある要素は最大でも8個なので、90番はぶつからない。

       90行 … How your day is built の見出し（90〜92にまたがる）／STEP 1／Options の見出し（右）
       91行 … STEP 2／Options の中身（右・91〜92にまたがる）
       92行 … STEP 3
       93行 … Price
     ※Price は6ページ共通なので、kyoto-private-tour-with-driver だけに効くよう `#opt ~ #price` と書く。 */
  /* ユーザーの指定（2026-08-30 夜）：
     **STEP 1・2・3 は縦に並べたまま、その右に Options を持ってくる。**
     左の塊＝How your day is built（見出し128〜334＋STEP 338〜985）
     右の塊＝Options（見出しも中身も 1041〜1582。Book と同じ列） */
  #plan, #opt {
    width: auto; max-width: none; margin-inline: 0; padding-inline: 0;
  }
  #plan { grid-column: 2 / 3; }
  #opt  { grid-column: 6 / 7; }
  /* 見出しは90〜92の3行にまたがる。またがらせないと、見出しが2行に折り返すぶん
     90行だけ高くなり、STEP 1 と STEP 2 のすきまだけ82px（他は48px）になる。 */
  #plan { grid-row: 90 / span 3; }
  #opt  { grid-row: 90; }
  /* .step の共通指定（左に128pxの余白＋629pxの列）を打ち消す。
     すでに列の中に置かれているので、余白も内側の列も要らない。 */
  #plan ~ .step {
    grid-column: 4 / 5;
    padding-left: 0; padding-right: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  /* ★隣どうしでたどる★
     `:nth-of-type` は main の子の div を数えてしまい、上に何が増えてもズレる
     （落とし穴 4-2-4 と同じ理由）。3つの .step は必ず隣どうしなので + でたどる。 */
  #plan + .step                 { grid-row: 90; }
  #plan + .step + .step         { grid-row: 91; }
  #plan + .step + .step + .step { grid-row: 92; }
  /* ★見出しと中身の上をそろえる★
     見出し（.hl）は本体CSSで margin-top: clamp(1.8rem, 5.5vw, 2.4rem)。
     900px以上では 5.5vw が上限を超えるので**必ず 2.4rem（38.4px）**になる（実測）。
     中身の1つ目に同じ値を入れて、格子の同じ行で上端をそろえる。
     入れないと Options の中身だけ38px上に飛び出し、STEP 3 とすきま0でくっつく。 */
  #plan + .step { margin-top: 2.4rem; }
  /* .measure は本体CSSの max-width: var(--measure)（608px）＋ margin:auto。
     外さないと格子のマスの中で中央に寄って細いままになる（落とし穴3-7）。 */
  #opt + .measure {
    grid-column: 6 / 7;
    grid-row: 91 / 93;
    width: auto; max-width: none; margin-inline: 0; padding-inline: 0;
  }
  /* Price も決め打ちしないと、自動配置の順番が狂って90行より上に落ちる。
     `#opt ~ #price`（2,0,0）で kyoto-private-tour-with-driver だけに効かせる。 */
  #opt ~ #price { grid-row: 93; }

  /* ---------- ⑥ ツアーページ：FAQ／Cancellation policy／Book ---------- */
  /* ユーザーの指定（2026-08-30）：
     「FAQとCancellation policyをPriceに合わせて。2カラムにするから右にBookを持ってきて」

     直す前（画面1710px）：FAQ 幅324px・Cancellation 幅370px・Book 幅608px が
     まん中に縦一列。ページ中で一番細く、Price（1081px）の下でぽつんと浮いていた。

     直した後：Price と同じ枠に入れる。
       左  x=128〜985 … FAQ と Cancellation（見出し左206px＋中身595px）
       右  x=1041〜1582 … Book（541px）
     ページ全体 12,941px → 12,273px（668px短縮）。

     ★ main をグリッドにしている ★
     #faq / #cxl / #book は main の直下に並んだ別々の兄弟なので、
     Book を右へ動かすには main 自体を格子にするしかない（HTMLは触れない）。
     列は #price とまったく同じ7本にしてある：
       余白128 ／ 見出し206 ／ すきま56 ／ 左595 ／ すきま56 ／ 右541 ／ 余白128
     他の子は全部 `grid-column: 1 / -1` で今までどおり端から端まで。

     ★ 行番号を101から始めている ★
     main の子の数はページごとに違う（スポットの数が違うため21〜27個）。
     ただし **最後の5つ（#faq→#cxl→#book→.also→.end）の並びは6ページとも同じ**
     なので、そこだけ 101〜104 と決め打ちにする。100行目までは空のまま（高さ0）で、
     前の要素は今までどおり自動で1行目から順に入る。

     ★ 102行目を 1fr にする理由（落とし穴3-2の応用）★
     Book（1,596px）は FAQ＋Cancellation（約430px）よりずっと高い。
     101・102行を両方 auto にすると、余った1,168pxが**2つの行に半分ずつ**配られ、
     FAQ と Cancellation の間に606pxの穴が空く（実測ずみ）。
     102行目を 1fr にすると余りは全部そちらへ行き、
     FAQ のすぐ下に Cancellation が来て、空きは Cancellation の下にまとまる。
     `min-content` では止まらなかった（Chromeは半分ずつ配ってしまう）。

     ※Book の高さ1,596pxのうち1,219pxは Bokun の予約カレンダー。
       file:// でも localhost でも中身は空白のまま（Bokun側にドメイン登録が無いため）。
       高さはウィジェットが自分で申告している値。

     ★ `main:has(.where)` と書くこと ★
     このファイルの下のほう（「About us と DHJ PRIVE を横に並べる」）に
     `main { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) }`
     という**トップページ用**の指定があり、後ろにあるぶんそちらが勝つ。
     ただの `main` で書いたら7列が2列に上書きされ、6ページ全部が
     幅705pxに潰れてページが27,379pxになった（実測。落とし穴3-4の別型）。
     `.where` はツアー6ページにしか無く index には0件なので、これで切り分ける。 */
  main:has(.where) {
    display: grid;
    align-items: start;
    /* 2026-08-30 更新：すきまを 56px → 4px にして、中身を 390 → 338 始まりに
       （ユーザーの指定「カードの左端に合わせて」）。
       fr の数字は画面1710pxでの最終の幅そのもの（647 と 541）。
       #price もまったく同じ7本を使うので、**どの画面幅でも左端がそろう**。 */
    grid-template-columns:
      var(--pc-gap)
      minmax(0, 206px)
      4px
      minmax(0, 647fr)
      56px
      minmax(0, 541fr)
      var(--pc-gap);
    grid-template-rows: repeat(100, auto) auto auto 1fr;
    /* ★dense（詰めて置く）は使わないこと★
       3つ目の STEP を右の列に置くために一度 dense にしたら、
       **地図の見出し（#kmap）の行の空き**に吸い込まれて y=2006 まで飛んだ。
       #kmap は 2/5 列なので、その行の6列目が空いている。
       行番号を決め打ちする方式（下の kyoto-private-tour-with-driver の節）に変えた。 */
  }
  main:has(.where) > * { grid-column: 1 / -1; }

  /* ★`margin-inline: auto` が付いた子は、格子の中では横に伸びない★
     （2026-08-30 実際に壊した。ユーザー報告で発覚）
     格子のマスの中で auto マージンが効くと、幅は「中身の幅」まで縮む。
     kyoto-private-tour-with-driver の4つが縮んでいた（元はどれも 551〜1159 の608px）：
       #kmap  664〜1046（381px）
       .kmap-wrap 815〜895（**80px・高さ0**）← 京都の地図。中身が絶対配置なので
                  ぺしゃんこになり、下の文章の上に重なっていた
       #plan  652〜1058（406px）
       #opt   756〜954（197px）
     `width` を明示すれば auto マージンは中央寄せとしてだけ働く。
     ※`.measure` は max-width だけで margin:auto が無いため無事だった。 */
  main:has(.where) > .hl { width: min(100%, var(--measure)); }
  /* 地図は下の「⑤-2 kyoto-private-tour-with-driver」で全幅に組み直すので、ここでは幅を決めない */
  main:has(.where) > .kmap-wrap {
    grid-column: 2 / 7;
    width: auto; max-width: none; margin-inline: 0;
    padding-left: 0; padding-right: 0;
  }

  #faq  { grid-column: 2 / 5; grid-row: 101; }
  #cxl  { grid-column: 2 / 5; grid-row: 102; }
  /* ★ `main:has(.where) > .also` と書くこと ★
     `.also` だけ（強さ 0,1,0）では、すぐ上の `main:has(.where) > *`（0,1,1）に
     負けて全幅のままになる。#faq と #book は id（1,0,0）なので勝てていた。 */
  main:has(.where) > .also { grid-column: 2 / 5; grid-row: 103; }
  #book { grid-column: 6 / 7; grid-row: 101 / 104; }
  /* ★ここは名前が変わりやすい★
     2026-08-30、スマホ担当が最後の要素を `div.end` → `section.cta-final` に改名した。
     `.end` のままだったので行の指定が外れ、**「Not sure where to start?」の帯が
     FAQ の上（23行目）に飛んだ**（ユーザー報告「フッターがFAQの上にきた」）。
     index にも .cta-final があるので `main:has(.where) >` で切り分ける。 */
  main:has(.where) > .cta-final { grid-row: 104; }

  /* 予約カレンダーの枠と写真の帯がぴったり接していた（実測0px。
     ユーザー指摘 2026-08-30「隙間がなさすぎる」）。
     Book は 101〜103行にまたがり、その下端がそのまま104行の上端になるため。
     サイトの節と節のすきま（64px＝4rem）を空ける。
     ※index にも .cta-final があるので `main:has(.where) >` で切り分ける。
       トップページは前の節（.guides）の中に余白があるので0pxでも詰まって見えない。 */
  main:has(.where) > .cta-final { margin-top: 64px; }

  /* 本体CSSの max-width: var(--measure)（608px）と margin:auto を外す。
     外さないと格子のマスの中で中央に寄って細いままになる（落とし穴3-7）。 */
  #faq, #cxl, #book {
    width: auto; max-width: none; margin-inline: 0;
    padding-left: 0; padding-right: 0;
  }

  /* 見出しの上をそろえる。本体CSSは FAQ が clamp(3rem,10vw,4rem)＝64px、
     Book が clamp(2.6rem,9vw,3.4rem)＝54px で、10pxずれていた。 */
  #book { margin-top: 4rem; }

  /* FAQ と Cancellation の中は #price と同じ「見出し左＋中身右」。
     206px＋すきま56px＋残り＝ちょうど #price の見出し列・左の列に重なる。 */
  /* すきまは4px（ユーザーの指定・2026-08-30）。
     「FAQやRefundsのテキスト＆横棒を下のカードの左端と合わせて」
     Other tours のカードを 338px 始まりに広げたので、FAQ・Refunds の
     質問・区切り線も 390 → **338** にそろえる。中身は595→647pxになる。
     ※Price の左の列だけは390pxのまま（帯の中なので別の枠として見える）。 */
  #faq, #cxl {
    display: grid;
    grid-template-columns: minmax(0, 206px) minmax(0, 1fr);
    column-gap: 4px;
    align-items: start;
  }
  #faq h2, #cxl h2       { grid-area: 1 / 1; margin: 0; }
  #faq .rule, #cxl .rule { grid-area: 2 / 1; }
  /* ★ `#faq > details` と子セレクタで書くこと ★
     `.faq-more` の中にも details が6つ入っている。子だけに限らないと
     「もっと見る」の中の質問まで格子のマスに置かれてバラバラになる。 */
  #faq > details { grid-column: 2; }
  /* 1つ目だけ1〜2行にまたがらせて、見出しと上をそろえる（#price の .ptable と同じ形）。 */
  #faq > details:first-of-type { grid-row: 1 / 3; }
  #cxl ul        { grid-area: 1 / 2 / 3 / 3; }
  #cxl .cxl-note { grid-area: 3 / 2; }

  /* ---------- ⑦ Other tours in this area を左の列の空きに入れる ---------- */
  /* ユーザーの指定（2026-08-30）：「左下の空白に入れよう」

     Book（1,596px）は FAQ＋Cancellation（約430px）よりずっと高く、
     左の列の下に約1,100pxの空白ができていた。そこにこの節を入れる。
     ついでに **横スクロールも解消**する（トップページで直したのと同じ問題）。
     直す前：幅240pxのカード5枚が横一列で、画面には3枚しか見えなかった。

     行は 101=FAQ / 102=Cancellation / 103=ここ（1fr で余りを吸う）/ 104=最後の呼びかけ。
     Book は 101〜103 の3行にまたがる。

     中は FAQ・Cancellation と同じ「見出し左206px＋中身595px」。
     カードは595pxの中に3列。1枚あたり約190pxで、5枚が2段に収まる。 */
  .also {
    display: grid;
    grid-template-columns: minmax(0, 206px) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  /* 本体CSSの max-width: var(--measure)（608px）と margin:auto、
     左右の内側余白 var(--pad) を外す（落とし穴3-7）。 */
  .also .head, .also .foot {
    grid-column: 1;
    max-width: none; margin-inline: 0; padding-left: 0; padding-right: 0;
  }
  .also .foot { grid-column: 2; margin-top: 0.9rem; }
  .also .also-scroll { grid-column: 2; }
  /* ★ 本体CSSは `.also .row`（2語）で書かれている。同じ語数で書くこと（落とし穴3-5）。
     780px以上で max-width: calc(--measure + 8rem) が掛かっているのを外す。 */
  .also .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
    max-width: none; margin-inline: 0;
    padding-left: 0; padding-right: 0; padding-bottom: 0;
  }
  /* 本体CSSは flex: 0 0 66% / max-width: 15rem（240px）。格子に置くので両方外す。 */
  .also .card { flex: none; max-width: none; width: auto; }
  /* 横スクロールをやめたので、右端のぼかしと「→」ボタンは要らない */
  .also-scroll::after { display: none; }
  .also-scroll .swipe-more { display: none; }

  /* カードの幅をもう少し確保する（ユーザーの指定・2026-08-30 黒い長方形）。
     指示の枠を実測すると x=338〜1001。左端338pxは見出しの列の右端334pxのすぐ隣。
     そこで **この節だけ** 見出しとのすきまを 56px→4px にして、
     カードの列を 390〜985（595px）から **338〜985（647px）** に広げる。
     カード1枚は 188px → **205px**（＋9%）。

     ※右端は985pxのまま動かしていない。指示の枠は1001pxだったが、
       そこはFAQ・Refundsの中身の右端とそろえてある線なので、
       .also だけ16px出すと3つの節の右端がズレる。
     ※見出しの文字「Other tours」は x=128〜301 なので、
       カードとの間は見た目で37px空いている。 */
  .also { column-gap: 4px; }

  /* ---------- Build a tailor-made trip（オーダーメイドの説明） ---------- */
  /* この節は #custom（見出し）・.ordB（タイル8枚）・.custom-cta（料金とボタン）の
     3つが main の直下に並んだ兄弟。1つの節に見えるが別要素なので、
     3つとも同じ枠（画面幅−100px、最大1440px）にそろえる。

     直す前：全部544px幅で中央。両脇が583pxずつ空き、
       ・タイルが170x106pxで写真が潰れて読めない（3列なので8枚目の右が欠ける）
       ・料金の箇条書きが幅130pxに潰れて2〜3行に折り返していた
     ユーザーの意向で「タイル8枚」を主役にする。 */
  #custom .measure,
  .custom-cta > .measure,
  .ordB {
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    max-width: none;
    margin-inline: auto;
  }
  /* 見出しと説明文は左そろえ。
     説明文に max-width を掛けると2行に折り返す。1行に必要なのは1096pxで、
     枠は1440pxあるので上限は付けない（ユーザーの指示で1行に統一）。
     ただし画面1280px以下だと枠が1100pxしかなく、2行に折り返す。 */
  #custom .measure { padding-inline: 0; }
  /* 「水色背景の下」と「Build a tailor-made trip の横棒」のすきまを、
     「ヘッダー写真の下」と「Choose a tour の横棒」のすきま（29px）に合わせる。
     本体CSSの section 共通指定で112pxになっていた。
     .tours と同じ計算式を使うので、どの画面幅でも同じすきまになる */
  #custom { padding-top: clamp(1.2rem, 4vw, 1.8rem); }

  /* タイルは4列×2段。1枚が約348x217pxになり、面積で今の4倍。
     3列だと8枚目の右が1枠ぶん欠けるが、4列なら2段にきれいに収まる */
  .ordB {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-inline: 0;
    margin-top: 1.6rem;
  }
  .ordB .tile-cap {
    left: 0.9rem; right: 0.9rem; bottom: 0.8rem;
    font-size: 0.95rem;
  }

  /* 料金の箱。枠が広がったぶん、箇条書きの折り返しが解ける */
  /* 「金額 ｜ 箇条書き ｜ ボタン」の3つ並びにする。
     ボタンは .ord-price の兄弟（別要素）なので、入れ物の .measure を
     格子（grid）にして、1行目の右の列にボタンを置く。
       1行目 左：.ord-price（金額と箇条書き）／右：ボタンと「Free to ask…」
       2行目 ：Q&A（左右いっぱい）
     .ord-price に付いていた上の区切り線は .measure に移す。
     そうしないと線がボタンの手前で切れる */
  /* ★3つ並びは幅1560px以上のときだけ★
     金額304＋箇条書き560＋ボタン253＝1117px に、すきま60px×4＝240px を足すと
     1357px 必要。画面1280pxでは枠が1180pxしかなく、はみ出して横スクロールが出た。
     狭いときは「金額｜箇条書き」の下にボタンを置く縦積みにする。 */
  .custom-cta > .measure {
    padding-inline: 0;
    text-align: left;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    column-gap: 60px;
    border-top: 1px solid var(--line);
    /* 上下の横棒からのすきまを等しくする。
       文字の実際の描画位置で測ると 上32px / 下50px とずれていたので、
       上を増やし下（Q&Aの上の余白）を減らして 46px / 46px にそろえた。
       ※ボタンの位置を動かすとこの均衡が崩れるので、動かしたら測り直すこと */
    padding-top: 41px;
  }
  .custom-cta > .measure > .ord-price {
    grid-column: 1; grid-row: 1;
    justify-self: center;
    /* ★狭い画面で横スクロールが出ていた（2026-08-30 夜に発見）★
       下の `.ord-price { width: max-content }` で中身の幅（986px）に固定されるため、
       画面900pxでは191px、1000pxでは91pxはみ出していた（1100px以上は0）。
       `max-width` で枠に収め、入らないときは金額と箇条書きを上下に折り返す。
       ※`width: min(max-content, 100%)` は**書いても効かない**。
         min() の中に max-content は入れられず、指定ごと無効になる（実測で確認）。 */
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 1.2rem;
  }
  .custom-cta > .measure > .btn-primary {
    grid-column: 1; grid-row: 2;
    justify-self: center; align-self: end;
    /* ボタンの下と「Free to ask…」の文字がくっついていたので少し上げる。
       margin だと行の高さが変わって文字まで一緒に動くため、
       配置に影響しない position:relative で上げる */
    position: relative;
    top: -12px;
  }
  /* 「Free to ask…」は「Per day, per group」と同じ大きさ・色にして、
     ボタンの下に中央そろえで置く（ボタンも同じ軸で中央にそろえる） */
  .custom-cta > .measure > .body {
    grid-column: 1; grid-row: 3;
    /* 「Per day, per group」と文字の高さをそろえる。
       ★margin で詰めると、この列の行の高さが変わってボタンが動き、
         そのぶん文字も動くので、いつまでも合わない（実際に11.2px→1pxにしても
         10pxずれのうち6pxしか縮まなかった）。
         position:relative の top は配置に影響しないので、こちらで最後の4pxを合わせる。 */
    margin: 1px 0 0;
    position: relative;
    top: -5px;
    font-size: 0.86rem;
    color: var(--muted);
    text-align: center;
  }
  .custom-cta > .measure > .ord-faq {
    grid-column: 1 / -1; grid-row: 4;
    margin-top: 15px;
    /* 本体CSSに margin: 1.8rem auto がある。auto のままだと格子の中で
       中央寄せになり、料金の列（左端135px）とずれる（365pxになっていた）。
       左右のautoを消して幅いっぱいに広げ、左端をそろえる */
    margin-inline: 0;
    width: 100%;
  }
  /* 料金：左に金額、縦の仕切り線、右に箇条書き。
     仕切り線は .op-left の右の枠線で引く（要素を増やせないため）。
     .op-left の幅448px ＋ 左端135px ＝ 線は x=583（ユーザー指定の位置）。 */
  .ord-price {
    max-width: none;
    width: max-content;
    padding: 0;
    border-top: 0;
    align-items: stretch;
    gap: 0;
  }
  /* ★幅は max-content にすること★
     448px などの固定幅にすると、金額（304px）との差ぶんが右に余り、
     「金額→箇条書き」のすきまだけ広くなる（171px対88pxになっていた）。
     3つのかたまりを等間隔にするため、幅は中身ぴったりにして
     すきまは padding と column-gap で作る（仕切り線がちょうど中間に来る）。 */
  .ord-price .op-left {
    flex: 0 0 auto;
    width: max-content;
    padding-right: 60px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* 金額を1.35倍に。30.4px → 41.6px */
  .ord-price b { font-size: 2.6rem; }
  .ord-price .unit { font-size: 0.86rem; }
  /* 箇条書きは「文字の幅ぴったりの2列」にする。
     1fr の2列だと1つ460pxの枠に171〜220pxの文字が入り、
     左右の列が492pxも離れて散らばって見えた（実測）。
     縦は仕切り線に対してまん中にそろえる */
  .ord-price .op-right {
    /* ★flex:0 0 auto が要る★ 本体CSSは flex:1 1 auto で、
       これだと右いっぱいに伸びて justify-content:center が効かない */
    flex: 0 0 auto;
    padding-left: 60px;
    display: flex;
    align-items: center;
  }
  .ord-price .op-right ul {
    grid-template-columns: repeat(2, max-content);
    gap: 0.8rem 4rem;
  }
  /* 金額41.6pxに対して13.12pxは細すぎたので少し上げる */
  .ord-price .op-right li { font-size: 0.94rem; }
  /* 「Accommodation, meals and entrance fees are not included」を消す。
     チェック付きの箇条書き4つの下に、印の無い注意書きが1行だけぶら下がって
     見た目を崩していた。同じ文はすぐ下のQ&A「How is the price decided?」の
     答えの末尾にそのまま入っているので、消しても情報は失われない。
     （HTMLを触らずに済むのはそのため。文を消すのではなく、重複の片方を隠すだけ） */
  .ord-price .op-note { display: none; }
  .ord-price .op-right ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 2rem;
  }
  /* 「Per day, per group」を金額の右横から、金額の下へ移す。
     .op-amount は本体CSSで flex の横並び（align-items:baseline）。
     縦並びに変え、金額の右端にそろえる（左そろえではない。ユーザー指定の位置） */
  .ord-price .op-amount {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    /* ★width:fit-content が要る★
       .op-left に幅448pxを与えたので、これが無いと .op-amount が448px幅まで広がり、
       align-items:flex-end のせいで金額そのものまで右へ流れる（実際にそうなった）。
       金額の幅ぴったりに縮めることで、金額は左のまま、単位だけ右にそろう */
    width: fit-content;
    align-self: flex-start;
  }
  /* ---------- Q&A ---------- */
  .ord-faq { max-width: none; }

  /* 最初の2問は「＋」を押さなくても最初から見えるようにする。
     HTMLに open を足すのが正攻法だが、CSSだけで実現できる。
       ::details-content ＝ <details> の中身（summary以外）を指す新しい書き方。
       Chrome 131以降で使える（このサイトの確認環境は Chrome 151）。
       対応していないブラウザでは、これまでどおり閉じた状態になるだけで壊れない。
     開きっぱなしなので「＋／−」の印は消し、押せる見た目もやめる
     （押しても中身は出たままなので、印が動くと逆に紛らわしい）。 */
  .ord-faq > details:nth-of-type(-n + 2)::details-content {
    content-visibility: visible;
  }
  .ord-faq > details:nth-of-type(-n + 2) > summary {
    cursor: default;
    pointer-events: none;
  }
  .ord-faq > details:nth-of-type(-n + 2) > summary::after { display: none; }

  /* 質問19px・答え17px。
     本文が17pxなので、答えを本文とそろえ、質問はその上に立てて19pxにする。
     「See more questions」の行はこれまでどおり小さいまま（別指定が効いている）。
     ※答えは .ord-faq p 全体に効くので、中の質問（faq-more）にも同じく効く */
  .ord-faq summary { font-size: 19px; }
  /* ★max-width が要る★
     .custom-cta の格子は max-content 列なので、答えが1行で長く伸びると
     格子ごと広がる。17pxにしたら枠が1440px→1634pxまで膨らんだ。
     海外23社の本文1行の幅は中央値463px。ここでは枠いっぱいまで使う */
  /* 1245px は「料金の3つ並び（1357px）から Q&A の左右余白80pxと
     本体CSSの padding-right 32px を引いた残り」。ここを超えると
     格子ごと横に広がって、料金の並びより Q&A のほうが幅広になる */
  .ord-faq p { font-size: 17px; max-width: 1245px; }
  /* 「See more questions」を押して出てくる2問も、答えごと開いた状態で出す。
     .faq-more 自体の開け閉めはそのまま（押すまでは出てこない）。
     中の details だけ中身を常に見える状態にしておく */
  .ord-faq .faq-more .more-body > details::details-content {
    content-visibility: visible;
  }
  .ord-faq .faq-more .more-body > details > summary {
    cursor: default;
    pointer-events: none;
  }
  .ord-faq .faq-more .more-body > details > summary::after { display: none; }

  /* 質問と答えのすきま：13.6px →（半分）6.8px →（25%減）5.1px → 3px
     ★「.faq-more の中の質問」を必ず含めること★
       中の質問はCSSで中身を見せているだけで open 属性が付かない。
       details[open] だけで書くと当たらず、そこだけ13.6pxのまま広く残る。 */
  .ord-faq > details:nth-of-type(-n + 2) > summary,
  .ord-faq .faq-more .more-body > details > summary,
  .ord-faq details[open] > summary { padding-bottom: 3px; }

  /* 幅が十分あるときだけ「金額 ｜ 箇条書き ｜ ボタン」の3つ並びにする。
     min-width の入れ子なので、900px未満（スマホ）には一切影響しない */
  @media (min-width: 1560px) {
    .custom-cta > .measure { grid-template-columns: max-content max-content; }
    .custom-cta > .measure > .ord-price {
      grid-column: 1; grid-row: 1 / 3;
      justify-self: start;
    }
    .custom-cta > .measure > .btn-primary { grid-column: 2; grid-row: 1; }
    .custom-cta > .measure > .body { grid-column: 2; grid-row: 2; }
    .custom-cta > .measure > .ord-faq { grid-column: 1 / -1; grid-row: 3; }
    .ord-price .op-right {
      padding-right: 60px;
      border-right: 1px solid var(--line);
    }
  }

  /* ---------- About us と DHJ PRIVE を横に並べる ---------- */
  /* この2つは別々の <section>（#profile と #partner）で、main の直下に
     縦に並んでいる。写真はどちらも 544x340px で同じ大きさなので、
     main を2列の格子にして同じ段に置く。
     ほかの節は全部「2列ぶんにまたがる」ようにして、これまでどおり全幅のまま。 */
  main {
    display: grid;
    /* ★minmax(0, 1fr) にすること★ ただの 1fr だと中身の最小幅で列が広がる。
       About us の見出しブロックを1011pxに広げたら列まで広がり、
       すべての節が1791pxになって横スクロールが出た */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* すきまは column-gap ではなく、左右それぞれの内側の余白で作る。
       column-gap だとそこだけ背景が途切れて、水色の帯に白い隙間ができる */
    column-gap: 0;
    align-items: start;
  }
  main > * { grid-column: 1 / -1; }
  #profile {
    grid-column: 1;
    /* 節の上下の余白。本体CSSの section 共通指定で112pxあった。
       上：#custom と同じ計算式にそろえる（横棒の上が広すぎるため）
       下：「ツアーカードの下から水色の帯まで」の64pxに合わせる
           （SNSアイコンの下が112pxで広すぎたため） */
    padding-top: clamp(1.2rem, 4vw, 1.8rem);
    padding-bottom: 64px;
    padding-left: var(--pc-side);
    padding-right: calc(var(--pc-gap) / 2);
    align-self: stretch;   /* 左右の高さをそろえて、帯の下端をそろえる */
  }
  /* 左には「About us」の見出しブロックがあるぶん、写真が263px下から始まる。
     右にも同じだけ余白を入れて、2枚の写真の高さをそろえる。
       内訳：節の上の余白29px ＋ 見出しブロック93px ＋ すきま29px ＝ 151px
     ★About us の説明文の長さを変えると行数が変わり、ここもずれる。
       そのときは「写真の上端の差」を測り直して、この値を直すこと。 */
  #partner {
    grid-column: 2;
    padding-left: calc(var(--pc-gap) / 2);
    padding-right: var(--pc-side);
    padding-top: 151px;
    padding-bottom: 64px;
    align-self: stretch;
  }

  /* 2つとも中身を左そろえにして、枠いっぱいに広げる */
  /* 「About us」の説明文を1行にする。1行に必要なのは1011pxだが、列は656px。
     この見出しブロックは写真より上（右の列がまだ空白の帯）にあるので、
     列からはみ出しても右の中身とは重ならない。 */
  #profile > .head {
    width: max-content;
    /* ★この max-width は効いていなかった（実測：計算後は none）★
       そのため画面900pxで1,041pxのまま1行で伸び、191pxはみ出していた。
       素直に `max-width: 100%`（親の内側の幅）で止める。
       1710pxでは枠1440pxに対して1041pxなので、広い画面では何も変わらない。 */
    max-width: 100%;
    /* 855pxから先は右の #partner の帯が後から描かれて文字を覆い隠す
       （「as a private tour」で切れて見えていた）。手前に出す */
    position: relative;
    z-index: 1;
  }
  /* ★`#profile > .head` をここから外した（2026-08-30 夜）★
     ここは上の `#profile > .head { max-width: 100% }`（同じ強さ・前にある）を
     打ち消していて、そのせいで画面900pxで1,041pxのまま伸び、
     横スクロールが191px出ていた。同じ2つの指定は下の行で個別に入れる。 */
  #profile > .measure,
  #partner > .measure {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }
  #profile > .head { margin-inline: 0; text-align: left; }
  #profile .profile-photo,
  #partner .dhj-photo { width: 100%; height: auto; }
  #profile .sns { justify-content: flex-start; }

  /* ---------- Your guides（ガイド4人） ---------- */
  /* 直す前：1人 123x245px。顔が小さすぎて誰か分からず、
     名前と肩書きが3行に折り返していた。
     枠をページ本体の幅（最大1440px）まで広げて、4人を大きく並べる。
     1人あたり約342x428pxになる。 */
  .guides .measure,
  .guides .gd-grid {
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
  .guides .gd-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.8rem;
  }
  /* 顔が分かる大きさになったので、名前と肩書きも読める大きさに上げる */
  .guides .gd-name { font-size: 1.05rem; margin-top: 0.8rem; }
  .guides .gd-role { font-size: 0.9rem; margin-top: 0.25rem; }
  /* 節の上下の余白。横棒の上は他の節と同じ29pxにそろえる */
  .guides {
    padding-top: clamp(1.2rem, 4vw, 1.8rem);
    padding-bottom: 64px;
  }

  /* ---------- 最後の呼びかけ ---------- */
  /* 見出しと説明文を、ヒーロー（Not sure where to go in Japan?）と同じ大きさにする。
     ヒーローと同じ「写真の上に白い文字」なので、そろえたほうが対になる。
     枠が544pxのままだと見出しが折り返すので、枠も同じ計算式に合わせる。 */
  .cta-final > .measure {
    width: calc(100% - 60px);
    max-width: none;
    margin-inline: auto;
  }
  .cta-final h2 {
    font-size: clamp(1.6rem, 4.68vw, 5rem);
    line-height: 0.94;   /* ヒーローの見出しと同じ */
    white-space: nowrap;
  }
  .cta-final > .measure > p { font-size: 1.6rem; }
  /* お知らせ（THIS WEEK…）は、ヒーローとまったく同じ置き方にする。
     ヒーローの実測：左端135px（ページ本体の左端）・節の下から42px・左そろえ。
     文字の流れから外して（position:absolute）左下に固定するので、
     見出し・説明文・ボタンは中央のまま、お知らせだけ左下に来る。 */
  .cta-final { position: relative; }
  .cta-final .proof {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 42px;
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    margin-inline: auto;
    /* 本体CSSで下に22.4pxのマージンが付いている。
       消さないと bottom:42px と足されて64pxになる */
    margin-bottom: 0;
    align-items: flex-start;
  }

  /* 節の高さを About us と同じにする（ユーザーの指定・2026-08-30）。
     背景写真を 3632x2272 の新しいもの（柏島の漁港）に差し替えたため、
     464pxのままだと写真の上下が切れて、村も空もイルカも写らなかった。

     ★padding ではなく min-height を使うこと★
     すぐ上で .proof を position:absolute の bottom:42px で置いているので、
     padding を増やすと「THIS WEEK…」のお知らせだけ取り残されて位置がずれる。
     min-height なら節が下に伸びるだけで、お知らせは下から42pxのまま。

     実測（画面幅1440px）：About us=839px／変える前の .cta-final=464px。
     ベースCSSに .cta-final の min-height は無いので、ぶつからない。 */
  .cta-final {
    min-height: 839px;
    display: flex;
    align-items: center;
  }

  /* ---------- フッター ---------- */
  /* ・注意書きの真上の横線を消す（本体CSSの .disc に border-top がある）
     ・左端を「Your guides」などページ本体と同じ135pxにそろえる
       （本体CSSは padding 40px なので x=40 から始まっていた） */
  /* 2026-08-30 追記：ツアーページ6枚と terms のフッターを index と同じにする
     （ユーザーの指定「ここもトップページと合わせて」）。

     直す前（画面1710px）
       | | index | ツアー6枚 | terms |
       | 背景 | #EAF5FA | 無し（白） | 無し（白） |
       | 注意書きの幅 | 1440（x=135〜1575） | 608（x=551〜1159） | 704 |
       | 行数 | 1行 | 3行 | 3行 |
       | 上下の内側余白 | 41.6 / 48px | 35.2 / 44.8px | 同左 |

     ★ max-width: none を書くこと ★
     下の width だけでは効かない。ツアー・terms の本体CSSに
     `footer .disc { max-width: var(--measure) }`（608px）があり、
     語数が同じ（0,1,1）ぶん打ち消せず、608pxで頭打ちになっていた。

     index はこの指定で1pxも変わらない（もともと同じ値）。 */
  footer {
    padding-inline: 0;
    background: var(--paper-2);
    padding-top: 2.6rem;
    padding-bottom: 3rem;
  }
  footer .disc {
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    max-width: none;
    margin-inline: auto;
    line-height: 1.6;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

  /* ---------- ⑤ contact ---------- */
  /* ★`.hero` はトップページ（index）と contact の両方にある★
     `.hero` だけで書くとトップの鳥居の写真まで変わる。
     `.hero-txt` は contact にしか無く（実測：contact 5件／index 0件）、
     `.hero-bottom` は index にしか無い（2件／0件）。`:has()` で切り分ける。 */

  /* 表紙の写真の高さを、トップページと同じ 74vh にそろえる。
     ユーザーの指定（2026-08-30 夜）「写真はそのまま・高さだけ740pxに」。
     直す前は562px（写真の元の縦横比のまま）。トップは740px・ツアーは756pxだった。
     px で決め打ちせず 74vh にするのは、トップの `.hero { max-height: 74vh }` と
     同じ式にして、どの画面の高さでも一致させるため。
     写真は `object-fit: cover` なので、高くしても伸びずに写る範囲が広がる。 */
  /* padding-bottom: 2.6rem はトップページ用（`.hero-bottom` のための余白）。
     contact には要らない。残すと写真が 698px で止まり、下に41.6pxの帯が出る。 */
  .hero:has(.hero-txt) { height: 74vh; padding-bottom: 0; }
  /* ★`max-height` は `height` を書いただけでは外れない（落とし穴4-2-9と同じ）★
     本体CSSに `.hero img { max-height: 52vh }` があり、高さ520pxで止まっていた。
     写真の下に灰色の帯が220px残る。`max-height: none` を必ず添えること。 */
  .hero:has(.hero-txt) > img { height: 100%; max-height: none; object-fit: cover; }

  /* 大見出し「Plan your trip」を 32px → 46.4px（ツアーページ6枚と同じ）。
     ユーザーの指定（2026-08-30 夜）。トップの80pxは内側のページには大きすぎる。 */
  .hero-txt h1 { font-size: 2.9rem; }

  /* 見出しが写真のまん中あたりに浮いていたので、左端50pxに寄せる */
  .hero-txt { padding-inline: 0; }
  .hero-txt .measure {
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
  /* 「ご相談の種類」3つを横ならびに。
     中の .measure が608pxで細いままだと1枚200pxになって文字が折れるので、
     このページのこの部分だけ枠を広げる */
  .picker { padding-inline: 0; }
  .picker > .measure {
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    max-width: none;
    padding-inline: 0;
  }
  /* ユーザーの指定（2026-08-30 夜）「3つのボタンは縦に並べるほうが見やすい」。
     直す前：横3列（1枚465px・x=135／622／1110）。
     直した後：縦1列で、幅は**上の水色の箱と同じ600px**（x=135〜735）。
     これで水色の箱の左右の端と、3枚の左右の端が一直線になる。 */
  .picker .choices {
    grid-template-columns: minmax(0, 600px);
    gap: 1rem;
    /* ユーザーの指定（2026-08-30 夜）「中央に寄せよう」。
       枠は135〜1575（1440px）なので、600pxの列を中央＝555〜1155に置く。 */
    justify-content: center;
  }
  /* 上の「相談は無料です」の箱も、3枚の左はしにそろえる */
  .lead > .measure {
    width: min(100% - var(--pc-edge) * 2, var(--pc-max));
    max-width: none; padding-inline: 0;
  }
  /* 箱を1180pxまで伸ばすと1行が長すぎて読みにくいので、文章は600pxで止める
     （参考サイトの本文も448〜600px）。
     `margin-inline: auto` は「中央に寄せよう」（2026-08-30 夜）。下の3枚とそろえる。 */
  .lead .reassure { max-width: 600px; margin-inline: auto; }
  /* ---------- ⑥ terms（旅行約款） ---------- */
  /* ユーザーの指定（2026-08-30 夜）「文字を大きくするだけ」。
     枠（543〜1167の624px）と1カラムの作りはそのまま。法律の条文なので
     行き来しやすさより読みやすさを優先する。

     ★`main:has(.toc)` で切り分ける★
     `.toc`（目次の箱）は terms.html にしか無い（実測：他3ページとも0件）。
     裸の `p` や `h2` で書くと全9ページの文字が変わってしまう。

     ★直接の子（>）で書く★
     目次の中にも `<h2>CONTENTS</h2>`（12.8px の小さなラベル）がある。
     `main:has(.toc) h2` と書くとそれも24pxになって崩れる。
     条文の見出しはすべて main の直接の子（実測）。

     直す前 → 直した後（画面1710px）
       大見出し 30.4px → 46.4px（contact・ツアー6枚と同じ）
       節の見出し 20px → 24px
       章の見出し 16.32px → 19.2px
       条文の見出し 14.72px → 16px
       本文 14.72 / 14.08px → 16px
       目次の項目 14.4px → 16px */
  /* 枠を広げる（ユーザーの指定 2026-08-30 夜「横幅もう少し広いほうがいい」）。
     本体CSSは `main { max-width: var(--measure); padding-inline: var(--pad) }`で、
     枠704px − 左右の内側余白40px×2 ＝ **本文624px**だった。
     840pxにすると本文は **760px**（475〜1235）。本文16pxで1行あたり約83文字。
     読みやすさの上限（1行75〜85文字）に収まる。これ以上広げると目で行を追えなくなる。 */
  main:has(.toc) { max-width: 840px; }

  main:has(.toc) > h1 { font-size: 2.9rem; }
  main:has(.toc) > h2 { font-size: 1.5rem; }
  main:has(.toc) > h3 { font-size: 1.2rem; }
  main:has(.toc) > h4,
  main:has(.toc) > p  { font-size: 1rem; }
  main:has(.toc) .toc li { font-size: 1rem; }
}