@charset "utf-8";
/* 下層ページ（spots / itinerary / itinerary-new / itinerary-spots / privacy / 404）
   ==========================================================================
   トップと同じ骨格（左レール・中央ストリーム・右レール・貫く線）を使い、
   左レールの主見出しだけをページ名に置き換える。値は tokens.css。
   トップ専用の見た目は style.css に残したまま触らない。

   縦型フィード（feed.html）は Player なので別系統。feed.css を参照。 */

/* ============================================================ 下層の外枠 */
/* 主見出しの代わりにページ名を縦組みで置く。ロゴの位置はトップと同じ */
.vtext-sub { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 14px; margin-top: 32px; }
.vpage {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.5;
  letter-spacing: .1em; color: var(--navy);
}
.stream-sub { padding-bottom: 40px; }
/* 一覧ページはレールの間いっぱいを使う。80% のままだと3列になり、縦に伸びすぎる */
.stream-wide { width: 100%; }

.crumb { margin: -10px 0 18px; }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumb li { display: flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: .06em; color: var(--ink-mid); }
.crumb li + li::before { content: "／"; color: var(--ink-rule); }
.crumb a, .crumb [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
/* 短い語（「トップ」など）でも当たり判定を 44px 角にする。
   負のマージンで見た目の間隔は変えない（ブランドガイド p11） */
.crumb a { padding-inline: 5px; margin-inline: -5px; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: var(--terra); }
.crumb [aria-current] { color: var(--navy); }

/* 下層は最初の節を詰める（トップのように Hero で間を取らないため） */
.stream-sub .sec:first-of-type, .stream-sub > .sec { padding-top: 8px; }

/* ============================================================ スポットを探す */
.mu-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px; }
.mu-mini {
  display: block; background: var(--panel); border-radius: var(--r-card);
  overflow: hidden; box-shadow: 0 8px 24px rgba(30, 47, 82, .08);
  transition: box-shadow var(--transition), transform var(--transition);
}
.mu-mini:hover { box-shadow: 0 16px 36px rgba(30, 47, 82, .14); transform: translateY(-2px); }
/* 中央の再生ボタンの基準になるので position を持たせる
   （持たせないと、もっと外の .stream を基準に中央へ行ってしまう。実測で -1895px ずれた） */
.mu-mini-f { position: relative; height: 108px; border-radius: 0; }
.mu-mini-b { padding: 12px 14px 15px; }
.mu-mini-n {
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--mu-ink, var(--mu)); color: #fff;
  font-size: 12px; letter-spacing: .06em;
}
.mu-mini-t { font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--navy); margin-top: 8px; text-wrap: balance; }
.mu-mini-m { font-size: 13px; line-height: 1.7; color: var(--ink-mid); margin-top: 5px; text-wrap: balance; }

/* 件数が増減するので、列は幅に追従させる。3列固定だと広い画面で写真が伸びすぎる */
.spot-grid-all { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 30px 18px; }
/* .spot-area の地色は style.css へ移した（全ページで効かせるため。2026-09-17） */
.spot-n { font-size: 12.5px; letter-spacing: .06em; color: var(--ink-mid); margin-bottom: 14px; }
.spot-n:empty { display: none; }
.spot-src { margin-top: 34px; font-size: 13px; line-height: 1.9; color: var(--ink-mid); max-width: 44em; text-wrap: pretty; }

/* ============================================================ しおりビューア */
/* overflow は **clip**。hidden にすると中の position:sticky が効かなくなり、
   SP の行程ナビが上に貼り付かない（実測で top が -1034px まで流れた）。
   トップの .frame と同じ理由 */
.sh { background: var(--panel); border-radius: var(--r-panel); box-shadow: 0 16px 44px rgba(30, 47, 82, .10); overflow: clip; }
.sh[hidden] { display: none; }
.sh-badge {
  margin: 0; padding: 11px 26px; background: var(--sand);
  font-size: 12px; letter-spacing: .06em; color: var(--navy);
}
.sh-badge[hidden] { display: none; }

.sh-cover { display: grid; grid-template-columns: 1fr 232px; gap: 26px; padding: 30px 26px 26px; align-items: center; }
.sh-cover-e { font-family: var(--en); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--terra); }
.sh-t { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.5; letter-spacing: .06em; color: var(--navy); margin-top: 10px; text-wrap: pretty; }
/* 概要。値だけを置かず、必ずラベルを添える。
   狭い画面でも文字を極端に縮めない（12px を下限にする） */
.sh-facts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.sh-fact { display: grid; gap: 2px; }
.sh-fact dt { font-size: 12px; letter-spacing: .1em; color: var(--ink-mid); }
.sh-fact dd { margin: 0; font-family: var(--en); font-size: 17px; font-weight: 500; color: var(--navy); letter-spacing: .04em; }
.sh-fact dd:lang(ja) { font-family: inherit; }
.sh-d { margin-top: 12px; font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); max-width: 34em; text-wrap: pretty; }
.sh-d:empty { display: none; }

/* ---- 表紙のコラージュ（依頼者指示 2026-08-26）
   1件目をいちばん大きく、2・3件目は補助。写真の上には何も重ねない。
   角丸は**メインビジュアル用**の 16px（選択画面のサムネイル 12px とは別）。 */
.sh-col { display: grid; gap: 8px; border-radius: 16px; }
.sh-col[hidden] { display: none; }
.sh-col-i { margin: 0; overflow: hidden; border-radius: 14px; background: var(--sand); min-height: 0; }
.sh-col-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 枚数ごとの型。無い枠は出さない（同じ写真を複製して3枚風にはしない） */
.sh-col[data-n="1"] { grid-template-columns: 1fr; }
.sh-col[data-n="1"] .sh-col-1 { aspect-ratio: 16 / 9; }
.sh-col[data-n="2"] { grid-template-columns: 1.55fr 1fr; aspect-ratio: 16 / 9; }
.sh-col[data-n="3"] { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; }
.sh-col[data-n="3"] .sh-col-1 { grid-row: 1 / span 2; }

/* 行程。トップの .stops と同じ型だが、移動時間の行が挟まる */
/* ============================================================ 行程（曲線でめぐる）
   ラフ3案の A を実装に落としたもの。1スポットに
   **メイン写真・サブ写真・動画サムネイル**の3枚を組み合わせ、
   スポットとスポットのあいだは PC では曲線、SP では左の直線でつなぐ。 */
.sh-stops { position: relative; padding: 10px 26px 12px; isolation: isolate; }
/* SP と、曲線が引けないときの直線。PC では消す */
.sh-stops::before {
  content: ""; position: absolute; left: 42px; top: 40px; bottom: 40px; width: 1px;
  background: rgba(30, 47, 82, .26);
}
/* 曲線は**意図したデザイン**（依頼者指示 2026-08-26）。直線化しない。
   z-index: -1 で本文の背面を通し、.sh-stops の isolation で外へ漏らさない */
.sh-curve { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; display: none; }
.sh-curve-1 { fill: none; stroke: var(--sage-fill); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; }
.sh-curve-2 { fill: none; stroke: var(--cta); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke; opacity: .6; }

/* ナビが貼り付いているぶん、飛び先が隠れないように逃がす。
   ナビの実測は PC 99px ／ SP 94px */
.sh-stop { position: relative; padding: 18px 0 0 62px; scroll-margin-top: 112px; }
.sh-stop::after {
  content: ""; position: absolute; left: 37px; top: var(--dot-y, 42px);
  width: 11px; height: 11px; border-radius: 50%; transform: translateY(-50%);
  background: var(--mu); box-shadow: 0 0 0 4px var(--panel);
}

/* ---- スポットとスポットのあいだの移動（依頼者指示 2026-08-26）
   徒歩・車・公共交通の3つを**並べて比べられる**ようにする。押せない（情報表示）。
   PC ではこの下を曲線が通る。地を敷いて文字だけを守り、**曲線は隠さない**
   （器は中央の 340px ほどなので、上下と左右に曲線が見えたまま残る）。 */
.sh-transfer { position: relative; list-style: none; padding: 26px 0; }
/* 列は**出す手段の数**（1〜3）に合わせる。--n は itinerary.js が入れる。
   3列ぶんの幅で固定していると、徒歩だけの区間で右半分が空いて見えた（実測） */
.sh-travel-comparison {
  position: relative; margin-inline: auto;
  width: fit-content; max-width: 350px;
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(84px, 1fr));
  align-items: start; gap: 4px 8px;
  padding: 14px 10px 13px; border-radius: var(--r-card);
  background: rgba(245, 241, 232, .92);
  border: 1px solid var(--ink-hair);
}
.sh-travel-option {
  display: grid; justify-items: center; row-gap: 5px; text-align: center;
}
/* 区間ごとの経路確認（依頼者指示 2026-08-28）。3手段の下に1本、枠いっぱいに置く。
   **見た目は START の「Google Mapsで経路を確認」と同じ**（依頼者指示 2026-08-28）。
   形と色（カプセル・1px の枠・ネイビー）は .btn .btn-line が持つので、
   ここは置き場所と寸法だけ。`.sh-start-a` と同じ 44px / 13.5px にそろえる。 */
.sh-travel-comparison .sh-travel-map {
  grid-column: 1 / -1; margin-top: 12px; width: 100%;
  min-height: 44px; font-size: 13.5px;
  /* 320px では1行に入らない。**折り返して全文を出す**（… で切らない）。
     .btn の padding: 0 30px は折り返すと窮屈なので、ここだけ詰める */
  padding: 8px 16px;
  white-space: normal; text-align: center; text-wrap: pretty;
}
/* 支給SVG は線が白で描かれていて CSS からは色を変えられない。
   SVG の中は書き換えず、**丸い地に載せて**ブランドの色になじませる。
   3種は絵の入り方が違うので、内側の余白だけで**描かれる対角**をそろえる
   （実測 20.4〜20.7px）。SVG そのものは変形も傾斜もさせない。 */
.sh-travel-mark {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy);
}
.sh-travel-mark img {
  width: 100%; height: 100%; display: block; box-sizing: border-box; padding: 7.5px;
}
.sh-travel-option[data-mode="walk"] .sh-travel-mark { background: var(--sage-fill); }
.sh-travel-option[data-mode="walk"] .sh-travel-mark img { padding: 7px; }
.sh-travel-option[data-mode="car"] .sh-travel-mark { background: var(--cta); }
.sh-travel-option[data-mode="car"] .sh-travel-mark img { padding: 7.5px; }
.sh-travel-option[data-mode="transit"] .sh-travel-mark { background: var(--navy); }
.sh-travel-option[data-mode="transit"] .sh-travel-mark img { padding: 8px; }
/* 色だけで手段を見分けさせない。手段名は必ず文字でも出す */
.sh-travel-label {
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--navy);
  line-height: 1.35;
}
.sh-travel-time {
  font-size: 12px; letter-spacing: .02em; color: var(--ink-mid); line-height: 1.35;
}

/* ---- メイン1つ＋サブ（依頼者指示 2026-09-18）
   メイン＝次のスポットの到着予定の計算に使っている手段。どれをメインにするかは
   itinerary.js の時刻の割付が決め、ここは**見せ方だけ**を持つ。
   コンパクトに：メインは1行、サブも「ほかの移動手段｜アイコン 手段 時間 …」の1行。
   入りきらない幅では**項目の単位で**折り返す（語の途中では折らない）。
   3列に並べる .sh-travel-option の組みは、この形では使わない（CSS は残してある）。 */
.sh-travel-comparison.is-ranked {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: min(100%, 340px); max-width: 340px;
  padding: 12px 14px 12px;
}
.sh-travel-main { display: flex; align-items: center; gap: 10px; }
.sh-travel-main .sh-travel-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.sh-travel-main-b { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; min-width: 0; }
.sh-travel-main .sh-travel-label { font-size: 13px; }
.sh-travel-main .sh-travel-time {
  font-size: 17px; font-weight: 600; letter-spacing: .02em; color: var(--navy);
}
.sh-travel-subs {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--ink-hair);
  /* 見出し｜項目 の2列。項目が入りきらないときは**右の列の中で**折り返し、
     2行目も1つ目の項目の頭にそろえる（見出しの下へ回り込ませない） */
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px;
}
.sh-travel-subs-h { font-size: 12px; letter-spacing: .02em; color: var(--ink-mid); line-height: 1.4; white-space: nowrap; }
.sh-travel-subs-l {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0;
}
.sh-travel-subs-h { padding-top: 2px; }
.sh-travel-sub {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 5px; max-width: 100%;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-mid);
}
/* 語の途中では折らない。どうしても入らない幅（EN の 320px）では、手段と時間のあいだで折る */
.sh-travel-sub-l, .sh-travel-sub-t { white-space: nowrap; }
.sh-travel-sub .sh-travel-mark { width: 20px; height: 20px; flex: 0 0 auto; }
.sh-travel-sub .sh-travel-mark img { padding: 4px; }
.sh-travel-sub-l { color: var(--navy); font-weight: 500; }
/* 地の色は手段ごと（.sh-travel-option と同じ対応） */
.sh-travel-mark[data-mode="walk"] { background: var(--sage-fill); }
.sh-travel-mark[data-mode="car"] { background: var(--cta); }
.sh-travel-mark[data-mode="transit"] { background: var(--navy); }
.sh-travel-main .sh-travel-mark[data-mode="walk"] img { padding: 7px; }
.sh-travel-main .sh-travel-mark[data-mode="car"] img { padding: 7.5px; }
.sh-travel-main .sh-travel-mark[data-mode="transit"] img { padding: 8px; }
.sh-travel-comparison.is-ranked .sh-travel-map { margin-top: 10px; }
@media (max-width: 899px) {
  .sh-travel-comparison.is-ranked,
  .sh-travel-comparison.is-ranked[style] { width: min(100%, 340px); max-width: 340px; }
}

.sh-figs { position: relative; padding-bottom: 40px; }
.sh-fig { position: relative; overflow: hidden; border-radius: var(--r-card); background: rgba(30, 47, 82, .06); }
.sh-fig-i { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-fig { aspect-ratio: 4 / 3; }
/* 「イメージ」の札（.sh-fig-c）は外した（2026-10-14）。生成画像を実写と
   取り違えないための断りだったが、写真はCMSの素材に差し替え済み。 */
.sh-figs-b {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: 10px;
}
.sh-fig2 {
  flex: 0 0 auto; width: 38%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-card); border: 4px solid var(--panel);
  box-shadow: 0 8px 22px rgba(30, 47, 82, .16);
}
/* 動画サムネイル。押すと縦型フィードのその1本へ戻る */
/* 動画サムネイル。押すと縦型フィードのその1本へ戻る。
   **どの画面でも 9:16 を保つ**（依頼者指示 2026-08-27）。高さは指定しない */
.sh-vid {
  position: relative; flex: 0 0 auto; width: 76px; aspect-ratio: 9 / 16; height: auto;
  border-radius: var(--r-card); border: 4px solid var(--panel); overflow: hidden;
  box-shadow: 0 8px 22px rgba(30, 47, 82, .18);
  transition: transform var(--transition);
}
.sh-vid:hover { transform: translateY(-3px); }
.sh-vid-i { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-vid-l {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 4px 5px;
  background: linear-gradient(180deg, rgba(22, 35, 61, 0), rgba(22, 35, 61, .90) 60%);
  color: #fff; font-size: 11px; line-height: 1.35; letter-spacing: .08em; text-align: center;
}

/* ---- 文字側 */
.sh-copy { padding-top: 16px; }
/* 目的タグはサイトの表示から外した（依頼者指示 2026-08-26） */
/* ---- 到着予定と滞在目安（依頼者指示 2026-08-26）
   スラッシュで区切らず、**それぞれにラベル**を付ける。
   目立たせる順は 到着予定 → スポット名 → 滞在目安 なので、
   時刻だけを大きく・太くし、滞在は一段落とす。 */
.sh-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.sh-arr { display: flex; align-items: baseline; gap: 7px; }
.sh-time { font-family: var(--en); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; color: var(--navy); }
.sh-arr-l { font-size: 12.5px; letter-spacing: .08em; color: var(--terra-ink, #BE451E); }
/* 最終入館を過ぎる立ち寄り先（依頼者指示 2026-09-18）。
   時刻は消さずに残し、入れないことをその場で伝える。
   注意の赤（--negative）に頼らず、枠と文字で分かるようにする
   ―― 色だけに意味を持たせない（WCAG 1.4.1）。 */
.sh-late {
  margin-left: 2px; padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--terra-ink, #BE451E);
  font-size: 11.5px; letter-spacing: .04em; line-height: 1.5;
  color: var(--terra-ink, #BE451E); white-space: nowrap;
}
/* 時刻そのものも落ち着かせて、間に合う行と見分けられるようにする */
.sh-arr.is-late .sh-time { color: var(--terra-ink, #BE451E); }
.sh-stay { display: flex; align-items: baseline; gap: 6px; }
.sh-stay-l { font-size: 12px; letter-spacing: .08em; color: var(--ink-mid); }
.sh-stay-v { font-size: 14px; font-weight: 500; color: var(--navy); }
/* 行程順の番号（.sh-idx と、写真の背後の .sh-no）は出さない
   （依頼者指示 2026-08-27）。順番は**時刻・並び・縦の線**が伝える。
   番号が持っていた上の余白（12px）は、そのまま名前の側に渡してある
   ―― 消したぶんの空きが残らないように。 */
.sh-n { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.55; letter-spacing: .04em; color: var(--navy); margin-top: 18px; text-wrap: balance; }
/* 主要3館だけ、施設名の直前に目印を置く（依頼者指示 2026-08-27）。
   ・**先頭行にそろえる**（align-items: flex-start）。名前が2行になっても動かない
   ・見出しを中央寄せにしない。左端は名前の列のまま
   ・該当しないスポットではこの器ごと出さないので、**アイコンぶんの空きは残らない** */
.sh-title { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; }
.sh-title .sh-n { margin-top: 0; }
/* 「河南町 ／ 近鉄長野線 喜志駅／富田林駅からバス」のような長い行が
   1文字だけ折り返していた。2行になるときは均等に割る */
/* 副情報（所在地・最寄り・開いている時間・混みやすい時間）。
   スポット名や説明を読んだあとに確かめるまとまりなので、**薄い点線でひとつに囲う**
   （依頼者指示 2026-08-26）。カード本体の枠より弱く、影は付けない。
   ラベルは太くせず、値も説明文（15px）より大きくしない。 */
.sh-side {
  margin-top: 14px; display: grid; gap: 9px;
  border: 1px dashed var(--ink-rule);
  border-radius: 12px; padding: 14px 16px;
  background: rgba(255, 255, 255, .36);
}
.sh-side-r { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 2px 12px; }
.sh-side dt { font-size: 12px; line-height: 1.7; letter-spacing: .04em; color: var(--ink-mid); }
/* 長い駅名やアクセス文が枠の外へ出ないようにする */
.sh-side dd {
  margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--navy);
  min-width: 0; overflow-wrap: anywhere; text-wrap: pretty;
}
/* 開いている時間（＋実データがあれば混みやすい時間帯）。
   アクセスの行と説明のあいだに、事実として1行だけ置く */
.sh-open {
  margin-top: 6px; font-size: 13px; line-height: 1.8; letter-spacing: .02em;
  color: var(--ink-mid); text-wrap: pretty;
}
/* 「開」「混」の1文字チップはやめた。10.5px で下限（12px）を割るうえ、
   読み上げでも意味が取れない。ことばのラベルにして、値をネイビーで立てる */
.sh-op { display: inline-block; margin-right: 16px; color: var(--navy); }
.sh-op-m { font-style: normal; margin-right: 7px; color: var(--ink-mid); }
.sh-line { margin-top: 10px; font-size: 15px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.sh-line:empty { display: none; }
/* 地図と動画は**ボタンの形**（依頼者指示 2026-08-26）。
   遷移なので要素は <a> のまま。2つで高さと形をそろえる。
   角丸はカプセルにせず、副情報の枠や選択画面のサムネイルと同じ 12px。
   ホバーで傾けず、大きく動かさない（地色と枠の濃さだけを変える）。 */
.sh-stop-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sh-tb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 12px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--navy);
  /* 文言を途中で折らない。入らないときは行ごと下へ落とす（横スクロールを作らない） */
  white-space: nowrap;
  border: 1px solid rgba(30, 47, 82, .36); background: transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
/* 別タブで開く印。文字の下限（12px）は飾りでも割らない */
.sh-tb-ex { font-size: 12px; line-height: 1; }
.sh-tb:hover { border-color: var(--navy); background: rgba(30, 47, 82, .05); }
.sh-tb:active { background: rgba(30, 47, 82, .09); }
.sh-play {
  grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--ink-rule); color: var(--mu);
  transition: background var(--transition), border-color var(--transition);
}
.sh-play svg { width: 10px; height: 10px; fill: currentColor; margin-left: 2px; }
.sh-play:hover { background: var(--ivory); border-color: var(--mu); }
.sh-acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 26px 24px; border-top: 1px solid var(--ink-hair); margin-top: 14px; }
.sh-acts .btn { min-height: 50px; font-size: 14px; padding: 0 24px; }
.sh-stamp {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px;
  border: 1px solid var(--sand); border-radius: var(--r-btn); background: var(--ivory);
  font-size: 13.5px; font-weight: 500; color: var(--navy);
}
.sh-stamp:hover { border-color: var(--terra); color: var(--terra); }
/* 折り返しは**枠の右端まで**使う（依頼者指示 2026-10-14）。
   以前は max-width: 46em で半分ほどの幅で折り返しており、右が大きく空いていた。 */
.sh-note { padding: 0 26px 26px; font-size: 13px; line-height: 1.9; color: var(--ink-mid); }
/* 行程全体の注意と、スポット別の注意を分ける（依頼者指示 2026-10-14） */
.sh-note-b { display: block; }
.sh-note-s { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-hair); }
/* 1件1行（・始まり＋<br>）は itinerary.js 側。ここでは折り方だけを決める（依頼者指摘 2026-10-01）。
   日本語は文節で折る（auto-phrase。未対応のブラウザでは従来どおり）。文節が枠より長いときだけ中で折る。
   折り返した最後の行が1〜2文字だけにならないよう pretty も掛ける */
.sh-note { text-wrap: pretty; }
.sh-note:lang(ja) { word-break: auto-phrase; overflow-wrap: anywhere; }

/* 空状態。ここから見本へ逃がす */
.sh-empty { padding: 20px 0 40px; }
.sh-empty[hidden] { display: none; }
.sh-empty-t { font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.5; letter-spacing: .06em; color: var(--navy); }
.sh-empty-l { margin-top: 14px; font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); max-width: 38em; text-wrap: pretty; }
.sh-empty-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* ============================================================ わたしのしおり（一覧）
   itinerary-list.html（依頼者指示 2026-10-01）。カードは itinerary.js の listCard()。
   カード全体が1つのリンク。削除は下の段に、リンクの外で置く。
   PC は2列・SP は1列。写真は1件目のスポットの1枚（4:3）。無ければ文字だけの型。
   影は最小限、傾き・回転なし。番号は付けない（しおり本体と揃える）。 */
.shl-head { margin-bottom: 26px; }
.shl-e { font-family: var(--en); font-size: 12px; letter-spacing: .22em; color: var(--terra); }
.shl-h { margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: clamp(27px, 2.6vw, 34px);
  line-height: 1.45; letter-spacing: .06em; color: var(--navy); }
.shl-l { margin-top: 10px; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.shl-n { margin-left: .6em; font-weight: 500; color: var(--navy); }
.shl-n[hidden] { display: none; }
/* 2列。ただしカードが 344px を下回る幅（1200〜1279px など）では1列にする。
   確かめる段（問い・削除・やめる）が1行に収まる最小の幅が 344px のため */
.shl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(344px, calc((100% - 20px) / 2)), 1fr)); gap: 20px; }
.shl-list[hidden] { display: none; }
.shl-i { display: flex; }
.shl-c { flex: 1; display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--ink-hair); border-radius: var(--r-card); overflow: clip;
  transition: box-shadow var(--transition), border-color var(--transition); }
.shl-a { flex: 1; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
/* 写真は最大3枚の組み合わせ。枠全体は 4:3 のまま、中の割り方だけを枚数で変える。
   すき間はカードの地（白）で見せる */
.shl-fig { aspect-ratio: 4 / 3; overflow: hidden; display: grid; gap: 3px; background: var(--panel); }
.shl-fig[data-n="2"] { grid-template-columns: 1fr 1fr; }
.shl-fig[data-n="3"] { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; }
.shl-fig[data-n="3"] img:first-child { grid-row: 1 / 3; }
.shl-fig img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; background: var(--panel-warm);
  transition: transform .5s var(--e-out-quint); }
.shl-b { padding: 18px 20px 6px; }
.shl-t { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.55; letter-spacing: .05em;
  color: var(--navy); text-wrap: balance; }
.shl-facts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.shl-fact { display: grid; gap: 1px; }
.shl-fact dt { font-size: 12px; letter-spacing: .1em; color: var(--ink-mid); }
.shl-fact dd { margin: 0; font-family: var(--en); font-size: 15px; font-weight: 500; letter-spacing: .04em; color: var(--navy); }
.shl-fact dd:lang(ja) { font-family: inherit; }
/* めぐる順番。名前を → でつなぐ。長い名前は語の途中で折らない */
.shl-route { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ink-rule);
  display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.shl-route li { display: inline-flex; align-items: baseline; }
/* 矢印は**前の名前の後ろ**に付ける。次の名前の前に付けると、折り返したとき行頭が「→」になる。
   名前の途中では折らない（狭い画面だけ、入りきらない名前は文節で折る） */
.shl-route li { white-space: nowrap; }
.shl-route li:not(:last-child)::after { content: "→"; margin: 0 .5em; color: var(--ink-mid); }
.shl-c.is-nofig .shl-b { padding-top: 22px; }
.shl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px 8px 20px; }
.shl-foot[hidden] { display: none; }
.shl-saved { font-size: 12px; letter-spacing: .04em; color: var(--ink-mid); }
.shl-del { min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 10px; font-size: 13px;
  color: var(--ink-mid); text-decoration: underline; text-underline-offset: 3px; }
.shl-del:hover { color: var(--terra); }
/* 確かめる段は「問い・削除する・やめる」の**1行**（依頼者指示 2026-10-01）。
   問いが左、ボタンが右。カードの幅が足りないときだけ、ボタンが問いの下に回る */
.shl-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 8px;
  padding: 8px 8px 8px 16px; border-top: 1px solid var(--ink-rule); }
.shl-ask[hidden] { display: none; }
.shl-ask-q { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--navy); white-space: nowrap; }
.shl-ask-b { display: flex; gap: 4px; flex: 0 0 auto; }
/* 「削除」は2字なので、押しやすい幅を下限で持たせる */
/* 見た目は 40px（依頼者指示 2026-10-01）。押せる範囲は ::after で上下 2px 広げて 44px を保つ */
.shl-ask-b .btn { position: relative; min-height: 40px; min-width: 64px; font-size: 13px; letter-spacing: .04em; padding: 0 16px;
  white-space: nowrap; flex: 0 0 auto; width: auto; }  /* ボタンの中では折らない。入らなければボタンごと次の行へ */
.shl-ask-b .btn::after { content: ''; position: absolute; inset: -2px 0; }
/* 枠線つき（やめる）は ::after の基準が枠線の内側になるので、枠線ぶん（1px）外へ足す */
.shl-ask-b .btn-line::after { inset: -3px -1px; }
.shl-note { margin-top: 22px; font-size: 13px; line-height: 1.85; color: var(--ink-mid); max-width: 44em; }
.shl-note[hidden] { display: none; }
.shl-note-l { display: block; }
/* 日本語は文節で折る（auto-phrase。未対応のブラウザでは従来どおり）。
   1つの文節が枠より長いときだけ、文節の中で折る（overflow-wrap: anywhere）。
   2行目が数文字だけにならないよう pretty も掛ける（題は既に pretty） */
.shl-t:lang(ja), .shl-l:lang(ja), .shl-note-l:lang(ja), .shl-route li:lang(ja) { word-break: auto-phrase; overflow-wrap: anywhere; }
.shl-note-l, .shl-l { text-wrap: pretty; }
@media (max-width: 420px) { .shl-route li { white-space: normal; } }
.shl-empty { padding-top: 6px; }
.shl-a:focus-visible { outline: none; }
.shl-c:has(.shl-a:focus-visible) { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .shl-c:has(.shl-a:hover) { border-color: rgba(30, 47, 82, .32); box-shadow: 0 10px 28px rgba(30, 47, 82, .08); }
  .shl-c:has(.shl-a:hover) .shl-t { color: var(--terra); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .shl-a:hover .shl-fig[data-n="1"] img { transform: scale(1.03); }
}
@media (max-width: 899px) {
  .shl-list { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .shl-b { padding: 16px 16px 4px; }
  .shl-t { font-size: 18px; }
  .shl-foot { padding: 2px 8px 6px 16px; }
  .shl-ask { padding: 8px 6px 8px 14px; }
  .shl-ask-q { font-size: 12.5px; }
  .shl-ask-b .btn { font-size: 13px; padding: 0 12px; }
}
/* 360px（Android で多い幅）でも1行に収める。374px 以下だけ余白とボタンの左右を少し詰める */
@media (max-width: 374px) {
  .shl-ask { gap: 8px 6px; padding: 8px 4px 8px 12px; }
  .shl-ask-b .btn { padding: 0 10px; }
}

/* ============================================================ 作成フロー */
.stp { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.stp-n { font-family: var(--en); font-size: 12px; letter-spacing: .18em; color: var(--terra); }
.stp-dots { display: flex; gap: 6px; }
.stp-d { width: 26px; height: 3px; border-radius: 2px; background: var(--ink-rule); }
.stp-d.is-on { background: var(--terra); }

.mk-h { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.45; letter-spacing: .06em; color: var(--navy); }
.mk-l { margin-top: 12px; font-size: 14px; line-height: 1.95; color: var(--ink-soft); max-width: 38em; text-wrap: pretty; }
.mk-form { margin-top: 30px; max-width: 620px; }
.mk-f { border: 0; padding: 0; margin: 0 0 26px; }
.mk-lg { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: .1em; color: var(--navy); margin-bottom: 9px; padding: 0; }
.mk-hint { font-size: 13px; line-height: 1.8; color: var(--ink-mid); margin-bottom: 10px; text-wrap: pretty; }
.mk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-in {
  width: 100%; min-height: 52px; padding: 0 15px;
  border: 1px solid rgba(30, 47, 82, .28); border-radius: var(--r-card);
  background: var(--panel); color: var(--navy); font: inherit; font-size: 15px;
}
.mk-in:hover { border-color: rgba(30, 47, 82, .5); }

/* 時刻の選択（select）だけ、▼の印を自前で描く。ブラウザ既定の矢印は角丸の縁の
   ぎりぎりに描かれ、右へ寄って見えるため（依頼者指摘 2026-10-14）。
   日付（input[type=date]）はカレンダーの印が既定のままで問題ないので触らない。
   色は --navy（#1E2F52）。data URI では currentColor が使えないため直書き。 */
select.mk-in {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E2F52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}
select.mk-in::-ms-expand { display: none; }
.mk-other { margin-top: 10px; }
.mk-other[hidden] { display: none; }


.mk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }
.mk-acts .btn { min-height: 54px; }
.mk-skip { font-size: 12.5px; color: var(--ink-mid); text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.mk-skip:hover { color: var(--terra); }

/* ---- STEP2 の一覧 */
/* ---- 順番の選び方と、選別のまとめ（依頼者指示 2026-08-25） */
.s2-ctl {
  margin-top: 22px; padding: 16px 18px; background: var(--panel-warm);
  border-radius: var(--r-card); display: grid; gap: 14px;
}
.s2-ctl[hidden] { display: none; }
.s2-order { border: 0; padding: 0; margin: 0; min-width: 0; }
.s2-order-l { padding: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .1em; color: var(--navy); }
.s2-order .chips { margin-top: 9px; }
.s2-order-h { margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--ink-mid); text-wrap: pretty; }
.s2-pick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding-top: 13px; border-top: 1px solid var(--ink-hair);
}
.s2-pick-n { flex: 1 1 auto; font-size: 13px; line-height: 1.7; color: var(--navy); }
.s2-pick-a {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid rgba(30, 47, 82, .24); font-size: 13px; color: var(--navy);
  transition: border-color var(--transition), background var(--transition);
}
.s2-pick-a:hover { border-color: var(--terra); color: var(--terra); background: var(--panel); }

.s2-empty { margin-top: 22px; padding: 26px; background: var(--panel); border-radius: var(--r-panel); }
.s2-empty[hidden] { display: none; }
.s2-empty-t { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--navy); }
.s2-empty-l { margin-top: 10px; font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); max-width: 36em; }
.s2-empty-a { margin-top: 18px; }

.s2-add { margin-top: 30px; }
.s2-add[hidden] { display: none; }
.s2-add-h { font-size: 12.5px; font-weight: 500; letter-spacing: .1em; color: var(--navy); }
.s2-add-l { margin-top: 5px; font-size: 12px; color: var(--ink-mid); }
.s2-add-l2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.s2-r {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; text-align: left;
  align-items: center; padding: 12px 14px; min-height: 56px;
  border: 1px dashed rgba(30, 47, 82, .3); border-radius: var(--r-card);
  transition: border-color var(--transition), background var(--transition);
}
.s2-r:hover { border-style: solid; border-color: var(--terra); background: var(--panel); }
.s2-r-p { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--sand); color: var(--navy); display: grid; place-items: center; font-size: 13px; }
.s2-r-n { font-size: 13.5px; font-weight: 500; color: var(--navy); line-height: 1.5; }
.s2-r-m { font-size: 11px; color: var(--ink-mid); }

.s2-sum { margin-top: 30px; padding: 20px 22px; background: var(--panel-warm); border-radius: var(--r-card); }
.s2-sum[hidden] { display: none; }
.s2-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; }
.s2-facts > div { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: baseline; }
.s2-facts dt { font-size: 11.5px; letter-spacing: .06em; color: var(--ink-mid); }
.s2-facts dd { font-size: 13.5px; color: var(--navy); margin: 0; }
.s2-warn { margin-top: 14px; padding-left: 20px; position: relative; font-size: 12.5px; line-height: 1.85; color: var(--terra); }
.s2-warn[hidden] { display: none; }
.s2-warn::before { content: "！"; position: absolute; left: 0; top: 0; font-size: 12px; }

/* ---- 生成演出 */
.gen {
  position: fixed; inset: 0; z-index: 95; background: var(--navy);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: gen-in .3s var(--e-out-quart) both;
}
.gen[hidden] { display: none; }
@keyframes gen-in { from { opacity: 0; } }
.gen-in { width: 100%; max-width: 300px; text-align: center; color: var(--ivory); }
.gen-t { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.7; letter-spacing: .06em; }
.gen-bar { margin-top: 26px; height: 4px; border-radius: 2px; background: rgba(245, 241, 232, .22); overflow: hidden; }
.gen-bar i { display: block; height: 100%; width: 0; background: var(--brand-terra); transition: width .6s var(--e-out-quart); }
.gen-s { margin-top: 14px; font-size: 12px; letter-spacing: .12em; color: rgba(245, 241, 232, .78); }

/* ============================================================ 文書ページ */
.sec-doc { max-width: 46em; }
.doc-h { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: .06em; color: var(--navy); }
.doc-l { margin-top: 14px; font-size: 14px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.doc-l code { font-size: 12.5px; background: var(--panel); padding: 2px 6px; border-radius: 4px; }
.doc-fact { margin-top: 18px; padding: 16px 18px; background: var(--panel); border-radius: var(--r-card); font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); border-left: 3px solid var(--sage-fill); }
.pv-s { margin-top: 30px; }
.pv-h { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: .04em; color: var(--navy); }
.pv-b { margin-top: 8px; font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.pv-q { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--terra); }
.pv-q-n { display: inline-block; margin-right: 8px; padding: 1px 8px; border: 1px solid var(--terra); border-radius: var(--r-pill); font-size: 12px; letter-spacing: .06em; }
.doc-upd { margin-top: 36px; font-size: 13px; color: var(--ink-mid); }

/* ============================================================ 404 */
.sec-404 { padding: 30px 0 60px; }
.nf-n { font-family: var(--en); font-size: 72px; line-height: 1; letter-spacing: .06em; color: var(--sand); }
.nf-h { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.5; letter-spacing: .06em; color: var(--navy); margin-top: 14px; }
.nf-l { margin-top: 12px; font-size: 14px; line-height: 1.95; color: var(--ink-soft); }
.nf-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ============================================================ 画面幅 */
@media (max-width: 1199px) {
  /* 下層には Hero が無いので、トップとは違う配置にする。
     左レールのページ名は**畳んだら出さない**。横組みになると、パンくず・h1 と
     同じ語が3回続いて読み手を止める（2026-08-20 SP で確認）。
     デスクトップでは縦組みの装飾として効くので、レールが生きている間だけ出す。 */
  body.sub .site { grid-template-areas: "brand brand" "stream stream"; }
  .vtext-sub { display: none; }
  .mu-minis { grid-template-columns: 1fr; gap: 10px; }
  .mu-mini { display: grid; grid-template-columns: 116px 1fr; align-items: center; }
  .mu-mini-f { height: 100%; min-height: 84px; }
  .spot-grid-all { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .sh-cover { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
  .sh-col { order: -1; }
  .sh-t { font-size: 23px; }
  .sh-stops { padding: 4px 18px 8px; }
  .sh-stops::before { left: 74px; }
  .sh-acts { padding: 18px; }
  .sh-note { padding: 0 18px 22px; }
  .mk-row { grid-template-columns: 1fr; }
  .s2-add-l2 { grid-template-columns: 1fr; }
  .s2-facts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* 375px でも3列を守る。まず余白、次に級数の順で詰める（依頼者指示 2026-08-26）。
     「公共交通」を2行にしないため、ラベルだけ 12px まで落とす（下限） */
  .sh-travel-comparison { gap: 4px 4px; padding: 12px 6px 11px; }
  .sh-travel-mark { width: 30px; height: 30px; }
  .sh-travel-mark img { padding: 6.5px; }
  .sh-travel-option[data-mode="walk"] .sh-travel-mark img { padding: 6px; }
  .sh-travel-option[data-mode="car"] .sh-travel-mark img { padding: 6.5px; }
  .sh-travel-option[data-mode="transit"] .sh-travel-mark img { padding: 7px; }
  .sh-travel-label { font-size: 12px; letter-spacing: 0; }
  .sh-travel-time { font-size: 12px; letter-spacing: 0; }

  .spot-grid-all { grid-template-columns: repeat(2, 1fr); }
  /* 操作は × と取っ手の2つになったので、下の段へ落とさず**縦に積む**。
     44px 幅のまま、行の高さも1行ぶんで済む（旧：チェック＋↑↓＋× の4つを
     2行目へ落としていた。列を 2 にしたままだと番号と写真が上下に割れる） */
  .sh-acts .btn, .nf-a .btn, .sh-empty-a .btn { width: 100%; }
  .sh-stamp { width: 100%; justify-content: center; }
  .vpage { font-size: 23px; }
}


/* ============================================================ 行程：PC の2カラム */
/* 写真と文を左右に振り、あいだを曲線でつなぐ。奇数番は写真が左、偶数番（.is-alt）は右。
   動きを止めている人には出さない（下の reduce ブロックで縦積みに戻す） */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .sh-stops { padding: 18px 30px 20px; }
  .sh-stops::before { display: none; }
  .sh-curve { display: block; }
  .sh-stop {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 74px;
    align-items: center; padding: 34px 0 0;
  }
  .sh-stop:first-of-type { padding-top: 6px; }
  /* ★ order 任せにせず、置き場所は必ず明示する。
     **交互はクラスで持つ**（.is-alt）。あいだに移動の li が入るので、
     :nth-of-type で数えると左右が入れ替わってしまう */
  .sh-figs { grid-column: 1; grid-row: 1; }
  .sh-copy { grid-column: 2; grid-row: 1; }
  .sh-stop.is-alt .sh-figs { grid-column: 2; }
  .sh-stop.is-alt .sh-copy { grid-column: 1; }
  /* 重ねた2枚は外側の縁へ寄せる。内側だと中央の線に寄って窮屈になる */
  .sh-stop.is-alt .sh-figs-b { flex-direction: row-reverse; }
  .sh-copy { padding-top: 0; }
  .sh-n { font-size: 23px; }
  .sh-fig2 { width: 34%; }
  .sh-vid { width: 74px; }
  .sh-stop::after { left: 50%; transform: translate(-50%, -50%); }
  /* 移動は**左右のレイアウトによらず中央**。曲線の上を通るが、
     器は 350px までなので曲線は左右と上下に見えたまま残る。
     曲線の動きに合わせて傾けない ―― アイコンも文字も常に正位置 */
  .sh-transfer { padding: 30px 0; }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .sh-stop { column-gap: 88px; padding-top: 44px; }
  .sh-n { font-size: 25px; }
}

/* 動きを止めているときは、曲線をやめて左の直線に戻す。
   3手段の情報は**そのまま出す**（欠落させない） */
@media (prefers-reduced-motion: reduce) {
  .sh-curve { display: none !important; }
  .sh-stops::before { display: block !important; }
}

/* ============================================================ しおり：インパクト強化 */
/* 2026-08-21・依頼者指示。トップと同じ言語を当てる
   （大きな番号／非対称／端へのはみ出し／マーキー1本／写真のホバー）。
   **時刻・スポット名・アクセス・下部のボタンは情報の取りやすさを優先**して、
   級数と配置は変えない。強めるのは表紙と写真だけ。 */

/* ---- 表紙。ページのいちばん強い面にする */
.sh-cover { position: relative; }
.sh-cover-b { position: relative; z-index: 1; }
.sh-col { position: relative; z-index: 1; }

/* 写真の背後にあった大きな行程番号（.sh-no）は削除した（依頼者指示 2026-08-27） */
.sh-figs, .sh-copy { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .sh-cover {
    grid-template-columns: 1fr 46%; gap: 0 36px;
    padding: 46px 0 42px 30px; align-items: center;
  }
  .sh-cover-e { font-size: clamp(13px, 1.05vw, 16px); font-weight: 700; letter-spacing: .3em; }
  .sh-t { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.32; margin-top: 12px; }
  .sh-m { font-size: 13.5px; margin-top: 14px; }
  .sh-d { margin-top: 16px; font-size: 15px; }
  /* コラージュはパネルの右端まで届かせる。縦横比で高さが決まるので height は切らない */
  .sh-col { margin-right: 0; }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* 左右を 50:50 にせず、行ごとにリズムを変える。
     曲線は JS が実測して引き直すので、行の高さが変わってもズレない */
  /* 57:43 ＋ gap 64 だと文字の列が 242px しかなく、アクセスの行が
     「近鉄長野線 喜／志駅」と割れた（実測）。gap を詰めて 54:46 にする */
  .sh-stop { grid-template-columns: 54% 1fr; column-gap: 44px; }
  .sh-stop.is-alt { grid-template-columns: 1fr 54%; }
  /* ★ 写真の列を 50% より狭くしてはいけない。曲線は viewBox の中央
     （x=50%）を通るので、写真がそこに届かないと線が文字の上に出る。
     3行目を 42% にしたとき、アクセスの行を 18px 横切っていた（実測）。
     行ごとのリズムは列比ではなく**写真の縦横比**で出す */
  .sh-stop.is-wide .sh-fig { aspect-ratio: 3 / 2; }
  .sh-stop.is-alt .sh-fig { aspect-ratio: 5 / 4; }
  /* 写真をパネルの端まで広げる。文字側は動かさない */
  .sh-stop .sh-figs { margin-left: -30px; }
  .sh-stop.is-alt .sh-figs { margin-left: 0; margin-right: -30px; }
  /* 端に着いた側の角丸は落とす（依頼者指示 2026-08-26）。
     丸みが残っていると、パネルの縁から浮いて見えた。
     左に寄っている行は左側、右に寄っている行は右側を 0 にする */
  .sh-stop .sh-fig { border-radius: 0 var(--r-card) var(--r-card) 0; }
  .sh-stop.is-alt .sh-fig { border-radius: var(--r-card) 0 0 var(--r-card); }
  /* 1行目に 46px の字下げを入れていたのは、写真の背後の番号を
     他の行と同じだけのぞかせるためだった。番号を消したので**不要な空きになる**。
     素の 34px（.sh-stop の padding-top）に戻す */
}

/* ---- マーキーは表紙と行程のあいだに1本だけ。パネルの中なので高さは控えめに */
.mq2-sh { padding: 14px 0 10px; margin: 0; }
.mq2-sh .mq2-t span { font-size: clamp(24px, 3.4vw, 44px); }

/* ---- ホバー。傾けるのは写真だけで、ボタンには掛けない */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sh-fig, .sh-fig2 {
    transition: transform .45s var(--e-out-quint), box-shadow .45s var(--e-out-quint);
  }
  /* 傾け（rotate）はやめた（依頼者指示 2026-08-26）。浮き上がりと影だけ残す */
  .sh-stop:hover .sh-fig { transform: translateY(-2px) scale(1.01); box-shadow: 0 20px 44px rgba(30, 47, 82, .18); }
  .sh-stop:hover .sh-fig2 { transform: translateY(-4px); }
  .sh-col-i { transition: box-shadow .45s var(--e-out-quint); }
  .sh-cover:hover .sh-col-i { box-shadow: 0 18px 40px rgba(30, 47, 82, .18); }
}

/* ---- 狭い画面。写真をパネルの幅いっぱいに使い、番号は上端にのぞかせる */
@media (max-width: 899px) {
  /* 表紙も写真を画面幅いっぱいに使い、文字はその下に置く。
     PC の縮小コピーにしない（依頼者指示 2026-08-21） */
  .sh-cover { padding: 0 20px 24px; gap: 0; }
  /* コラージュは画面幅いっぱい。角丸は下側だけ残す（外枠 16px は内側の札が持つ） */
  .sh-col {
    order: -1; margin-inline: -20px; width: calc(100% + 40px);
    padding: 0 6px 6px; border-radius: 0;
  }
  /* SP は 1件目を全幅、2・3件目を下に横並び */
  .sh-col[data-n="3"] {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto;
  }
  .sh-col[data-n="3"] .sh-col-1 { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; }
  .sh-col[data-n="3"] .sh-col-2, .sh-col[data-n="3"] .sh-col-3 { aspect-ratio: 4 / 3; }
  .sh-col[data-n="2"] { grid-template-columns: 1fr; aspect-ratio: auto; }
  .sh-col[data-n="2"] .sh-col-i { aspect-ratio: 16 / 9; }
  .sh-col-i { border-radius: 12px; }
  .sh-cover-b { margin-top: 22px; }
  .sh-t { font-size: clamp(23px, 5.8vw, 32px); }
  /* ---- 行程は「1枚ずつ読む」組みにする（依頼者指示 2026-08-26）。
     参考どおり、写真は画面の幅いっぱい、文字はそのすぐ下。
     左の時間軸の帯（62px の字下げと縦線）はやめる ―― 上に貼り付く行程ナビが
     同じ役目を果たしているうえ、帯のぶん写真が痩せて主役でなくなっていた */
  .sh-stops { padding: 0 20px 12px; }
  .sh-stops::before { display: none; }
  .sh-stop { padding: 0; margin-top: 24px; scroll-margin-top: 104px; }
  .sh-stop:first-of-type { margin-top: 18px; }
  .sh-stop::after { display: none; }
  /* SP は曲線を引かないので、**移動の要素が自分で縦ラインを持つ**。
     器の上下で途切れさせ、文字やアイコンには重ねない（依頼者指示 2026-08-26） */
  /* START から1件目へのつながりも、同じ形の短い縦ラインで見せる
     （依頼者指示 2026-08-26。START だけ線が無いと行程から浮いて見えた） */
  .sh-start { padding-bottom: 30px; }
  .sh-start::after {
    content: ""; position: absolute; left: 50%; bottom: 4px;
    width: 1px; height: 20px;
    /* 移動案内の縦ラインと同じ点線（線の言語をそろえる） */
    background-image: linear-gradient(to bottom,
      rgba(30, 47, 82, .32) 0 2px, rgba(30, 47, 82, 0) 2px 5px);
    background-size: 1px 5px; background-repeat: repeat-y;
  }
  /* 上の線が「動画をもう一度見る」に くっついて見えたので、
     **下と同じだけ空ける**（依頼者指示 2026-08-28）。
     下の空き ＝ 次のスポットの margin-top（24px）。上も 24px にそろえる。 */
  .sh-transfer { padding: 44px 0 20px; }
  .sh-transfer::before, .sh-transfer::after {
    content: ""; position: absolute; left: 50%; width: 1px; height: 20px;
    transform: translateX(-.5px);
    /* **点線**にする（依頼者指示 2026-08-28）。dot 2px ＋ すき間 3px の
       5px 周期。20px なのでちょうど 4つ入る */
    background-image: linear-gradient(to bottom,
      rgba(30, 47, 82, .32) 0 2px, rgba(30, 47, 82, 0) 2px 5px);
    background-size: 1px 5px; background-repeat: repeat-y;
  }
  .sh-transfer::before { top: 24px; }
  .sh-transfer::after { bottom: 0; }
  /* 3手段のときだけ画面幅いっぱいに広げる。1〜2手段なら中身の幅のまま中央に置く */
  .sh-travel-comparison { gap: 4px 6px; padding: 13px 8px 12px; }
  /* **320px では 84px の3列が入らない**（3×84 ＋ すき間 12 ＝ 264 に対し、
     枠の内側は 224px しかなく、枠の外へはみ出していた ―― 実測。この不具合は
     経路ボタンを足す前からあった）。列の下限を外して、中身の幅で決めさせる。 */
  @media (max-width: 360px) {
    .sh-travel-comparison { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  }
  .sh-travel-comparison[style*="--n:3"], .sh-travel-comparison[style*="--n: 3"] { max-width: none; width: 100%; }

  /* 写真はパネルの幅いっぱい。左右の角丸は落として縁になじませる */
  .sh-figs { margin-inline: -20px; padding-bottom: 0; }
  .sh-fig { border-radius: 0; }
  /* サブと動画は**重ねずに、写真の下の1行**へ。重ねると主写真が読めなくなり、
     8.5px の札も潰れていた（実測） */
  .sh-figs-b {
    position: static; margin: 10px 20px 0; gap: 10px; align-items: stretch;
  }
  .sh-fig2 {
    width: auto; flex: 1 1 auto; aspect-ratio: 16 / 10;
    border: 0; border-radius: var(--r-card); box-shadow: none;
  }
  /* 高さは**左の写真にそろえる**（依頼者指示 2026-09-13）。
     幅は 72px のまま、中の画像は object-fit: cover なので縦に合わせて
     左右が中心で切り取られる。
     以前は 9:16 を保つため自分だけ伸ばさない指定にしていたが、
     写真と高さが揃わず段違いに見えていた。比率より高さのそろいを優先する */
  .sh-vid { width: 72px; flex: 0 0 auto; align-self: stretch; aspect-ratio: auto;
            border-width: 0; box-shadow: none; }

  .sh-copy { padding-top: 16px; }
  .mq2-sh { padding: 10px 0 6px; }
  .mq2-sh .mq2-t span { font-size: 26px; }
}


/* ============================================================ STEP2：狭い画面 */
/* 列は PC と同じ [番号][写真][文字][操作] のまま。
   **番号は消さない**（行程順は読み上げでも要るので、生成内容ではなく本文で持つ）。
   幅は、余白・写真・操作の並べ方から稼ぐ：操作（× と取っ手）を縦に積むと
   88px → 44px になり、375px でも文字に 180px 前後を残せる（実測）。 */
@media (max-width: 560px) {
  .s2-i { column-gap: 8px; padding: 10px 8px 10px 10px; }
  .s2-no { font-size: 13px; min-width: 1.7em; }
  .s2-fig { width: 40px; height: 40px; }
  .s2-n { font-size: 14px; }
}


/* ============================================================ 旅のダイジェスト */
/* 行程の詳細を読み始める前の見取り図（依頼者指示 2026-08-27）。
   ・カードに入れるのは**到着予定の時刻と「番号｜スポット名」だけ**
   ・スポットのあいだは**順番を示す細い曲線だけ**。移動手段も時間も出さない
   ・PC は横並び（入らなければ横スクロール）、SP は縦並び
   ・切符のモチーフは「薄い枠・小さな切り欠き・左端の細いエリアカラー」まで。
     傾けない・影を強くしない・写真を入れない */
.dg[hidden] { display: none; }
.dg-wrap { position: relative; margin-top: 18px; }

.dg-list { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; }
/* 列の高さをカードにも伝える。これが無いと、名前が 1行の回だけ
   背が低くなって並びが揃わない（実測） */
.dg-i { display: grid; }

/* --- 始まりと終わりの印。カードと同じ大きさにはしない */
.dg-e { flex: 0 0 auto; display: grid; place-items: center; gap: 5px; align-content: center; }
.dg-e-m {
  /* **無理に正円にしない**（依頼者指示 2026-08-28）。
     文字の長さに合わせた**カプセル型**。円に収めるために
     字間を詰めていたのをやめ、英字として普通に組めるようにした。
     色・線の太さ・級数はそのまま。 */
  min-height: 34px; padding: 0 14px; border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--en); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  border: 1px solid currentColor;
}
.dg-start { color: var(--terra); }
.dg-goal { color: var(--navy); }
.dg-e-t { font-family: var(--en); font-size: 12px; letter-spacing: .04em; color: var(--ink-mid); }

/* --- つなぎの線。**順番が分かるための補助**で、経路の情報ではない */
.dg-sep { flex: 0 0 auto; align-self: center; display: block; }
.dg-sep svg { display: block; width: 100%; height: 100%; }
/* 直線にしたぶん、細すぎると線として読めない。1.2 → 1.5px にした
   （うねっていたときは長さがあったので 1.2 でも見えていた） */
.dg-sep path { fill: none; stroke: var(--ink-rule); stroke-width: 1.5; }
.dg-sep .dg-v { display: none; }

/* --- カード。**時刻は枠線の上にまたがる札**にした
   （依頼者指示 2026-08-28。参照の box26 の型）。
   切符の切り欠き（::before / ::after）は、札と同じ場所でぶつかるので外した。
   枝の色（エリア）は左端の 4px の帯 → **枠線そのもの**が受け持つ。
   線は **1px**（依頼者指示 2026-08-28。ガイドの「線 1px」に戻した） */
.dg-c {
  position: relative; flex: 0 0 auto; display: grid; align-content: center;
  background: var(--panel);
  border: 1px solid var(--mu, var(--navy)); border-radius: var(--r-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* 時刻の札。高さ 14px の字を 2px の枠の中心（y = -1px）に置くので top: -8px。
   地をカードと同じ --panel で塗るので、枠線が札の分だけ消える。
   （囲いの中に地色を敷かないのは、この札の地と揃えるためでもある） */
.dg-time {
  /* 高さ 16px の字を 1px の枠の中心（ボーダーボックスの上端から .5px）に
     置くので top: -8.5px。地をカードと同じ --panel で塗るので、
     枠線が札の分だけ消える。
     色は**ネイビー固定**（依頼者指示 2026-08-28）。
     エリアの色は枠線が受け持つので、時刻まで振ると行ごとに濃さが揃わない。 */
  position: absolute; top: -8.5px; left: 12px; padding: 0 7px;
  background: var(--panel);
  font-family: var(--en); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--navy); line-height: 1;
}
.dg-n { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
/* 番号（.dg-no）と区切りの縦線（.dg-bar）は削除した（依頼者指示 2026-08-27）。
   順番は**切符の並びと時刻**が伝える。エリアの色は左端の帯が受け持つ。 */
.dg-name {
  min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--navy);
  overflow-wrap: anywhere;
  /* 長い名前は2行まで。**級数は落とさない** */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.dg-c:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .dg-c:hover { border-color: var(--mu-ink, var(--mu, var(--navy)));
                box-shadow: 0 6px 16px rgba(30, 47, 82, .08); }
}

/* 端のぼかしは**やめた**（依頼者指示 2026-08-28）。
   続きがあることは、見出しの右の送りのボタンとスクロールバーが知らせる。 */

/* 送りのボタン。形は KV・3館のスライダーと同じ支給 SVG。
   置き場所は**見出しの右**。カードの上に重ねると START の札に被る（実測）。
   横に流れないときは hidden なので、SP の縦並びでは出ない。 */
.dg-ar {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: var(--panel); color: var(--navy);
  border: 1px solid var(--ink-rule); box-shadow: 0 2px 10px rgba(30, 47, 82, .14);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              opacity var(--transition);
}
.dg-ar[hidden] { display: none; }
/* 見た目は 34px、当たり判定は 44px。
   **inset の基準は padding box（34 − 枠 1px × 2 ＝ 32px）**なので、
   -5px だと 32 + 10 = 42px にしかならない（実測。2026-09-02）。
   -6px で 32 + 12 = 44px ＝ 枠から 5px 外まで届く。見た目は変わらない */
.dg-ar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.dg-ar .ar-i { width: 14px; height: 14px; fill: currentColor; }
.dg-ar:disabled { opacity: .32; cursor: default; box-shadow: none; }
.dg-ar:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .dg-ar:not(:disabled):hover { border-color: var(--navy); background: var(--ivory); }
}

/* ---------------------------------------------------------- PC：横に並べる */
@media (min-width: 900px) {
  /* スクロールバーもサイトの色に揃える（依頼者指示 2026-08-28）。
     Firefox は scrollbar-color、Chromium / WebKit は ::-webkit-scrollbar で指定する。
     トラックを消さずに残すのは、**どこまで進めるのか**が分かるようにするため */
  .dg-wrap {
    overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
    /* Firefox 向けの標準プロパティ。太さと色だけ指定できる */
    scrollbar-width: thin; scrollbar-color: rgba(30, 47, 82, .3) rgba(30, 47, 82, .07);
  }
  /* **scrollbar-width を指定していると ::-webkit-scrollbar は無視される**。
     Chromium / WebKit では標準プロパティを auto に戻し、
     こちらで形まで指定する（丸いつまみ、矢印なし、ホバーで濃く）。
     Firefox はこの @supports を通らないので上の指定が残る */
  @supports selector(::-webkit-scrollbar) {
    .dg-wrap { scrollbar-width: auto; scrollbar-color: auto; }
    .dg-wrap::-webkit-scrollbar { height: 6px; }
    .dg-wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    .dg-wrap::-webkit-scrollbar-track {
      background: rgba(30, 47, 82, .07); border-radius: 999px;
    }
    .dg-wrap::-webkit-scrollbar-thumb {
      background: rgba(30, 47, 82, .3); border-radius: 999px;
    }
    .dg-wrap:hover::-webkit-scrollbar-thumb { background: rgba(30, 47, 82, .44); }
  }
  /* 上は時刻の札が 8px はみ出すぶんを空ける。
     overflow-x: auto の器なので、縦は見た目どおり切り取られる */
  /* 下はスクロールバーの分。囲いの下余白と同じにして、
     バーがカード寄りに見えないようにする（依頼者指摘 2026-08-28） */
  .dg-list { padding: 14px 2px 16px; }
  /* 幅は**長い施設名が2行で収まる**ことを優先して決めた。
     152px にすると「太子町立竹内街道歴史資料館」が3行目に溢れて … で切れた（実測）。
     そのぶん 1440px では3件でも横に流れるが、続きは端のぼかしが知らせる。
     切り捨てを避けるほうを取る（依頼者指示「省略記号による切り捨ては原則避ける」）。 */
  /* 時刻を札に逃がしたので、本文は施設名だけ。
     同じ 2行に収めたまま幅を詰められる
     （最長「いずみ学習館（池上曽根弥生学習館）」で実測。… で切らない） */
  .dg-c { width: clamp(132px, 10vw, 148px); min-height: 52px; padding: 13px 12px 12px; }
  /* 幅を詰めたので、長い名前は 3行まで許す。
     日本語は 2行で収まるので背は変わらないが、英語は 3行要る（実測）。
     **… で切るより背が伸びるほうを取る**（§44 と同じ判断） */
  .dg-name { -webkit-line-clamp: 3; }
  .dg-sep { width: 24px; height: 22px; }
  /* 印はカプセル型になったので、幅は文字の長さで決める（固定しない） */
}

/* ---------------------------------------------------------- SP：縦に並べる */
@media (max-width: 899px) {
  .dg { padding: 26px 20px 0; }
  .dg-list { flex-direction: column; align-items: stretch; }
  .dg-c {
    width: auto; min-height: 52px; padding: 14px 14px 12px;
    grid-template-columns: minmax(0, 1fr); align-items: center;
  }
  .dg-time { font-size: 15px; top: -8px; left: 14px; }
  /* START / GOAL は**中央に置く**（依頼者指示 2026-08-28）。
     縦のつなぎも同じく中央。直線なので、短すぎると点に見える（34px） */
  .dg-sep { width: 22px; height: 34px; align-self: center; }
  .dg-sep .dg-h { display: none; }
  .dg-sep .dg-v { display: block; }
  /* 丸と「終わりの目安」を**ひとまとまり**にして中央へ。
     align-self を入れないと、列の flex が幅いっぱいに伸ばして
     時刻だけが右端へ離れる（実測）。
     時刻は丸の**真下**に置く。横に並べると、組の中央が文字のぶんだけ
     ずれて、**縦のつなぎが丸の中心を外す**（実測 19px） */
  .dg-e { align-self: center; justify-items: center; align-items: center;
          align-content: center; gap: 6px; }
  /* カプセルの寸法は PC と同じ（文字の長さで決まるので上書きしない） */
}

/* 出るときのフェードだけ。横に動かさない・回さない・傾けない */
@media (prefers-reduced-motion: no-preference) {
  .dg { animation: dg-in .5s var(--e-out-quart) both; }
}
@keyframes dg-in { from { opacity: 0; } to { opacity: 1; } }


/* ============================================================ しおり：行程ナビ */
/* 一日の長さと、いま読んでいる場所を1つの帯で見せる（依頼者指示 2026-08-25）。
   **SP では上に貼り付く。**PC は表紙と行程のあいだに静かに置くだけ。 */
/* 行程ナビ（依頼者指示 2026-08-26：PC でも上部に貼り付ける）。
   2026-08-27：**最初は出さず、スクロールしたら上から出て貼り付く**ようにした。
   表紙と旅のダイジェストを読んでいるあいだは要らないため。

   ・`sticky` をやめて `fixed` にした。流れから外すので、
     出ていないあいだ**場所を取らない**（節が 99px ぶん上に詰まる）
   ・左右は `.sh` の実測を JS が入れる（--sh-nav-l / --sh-nav-w）。
     祖先に transform が無いことは実測ずみ（あると fixed が効かない）
   ・隠れているあいだは `visibility: hidden` なので、
     キーボードでも読み上げでも触れない */
.sh-nav {
  position: fixed; top: 0; z-index: 4; background: var(--panel);
  left: var(--sh-nav-l, 0px); width: var(--sh-nav-w, 100%);
  padding: 12px 30px 11px; border-bottom: 1px solid var(--ink-hair);
  box-shadow: 0 6px 16px rgba(30, 47, 82, .06);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .28s var(--e-out-quint), opacity .18s linear, visibility .28s;
}
.sh-nav.is-on { transform: none; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .sh-nav { transition: none; }
}
/* ナビがもともと居た位置の目印。場所は取らない */
.sh-nav-s { height: 0; }
.sh-nav[hidden] { display: none; }
.sh-nav-l {
  position: relative; display: flex; align-items: flex-start; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sh-nav-l::-webkit-scrollbar { display: none; }
/* 節と節をつなぐ線。ドットの中心（上から 11px）を通す */
.sh-nav-l::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px;
  background: var(--ink-hair);
}
.sh-nav-i { position: relative; flex: 1 1 0; min-width: 54px; text-align: center; }
.sh-nav-a {
  display: block; min-height: 44px; padding: 4px 2px 0;
  transition: color var(--transition);
}
.sh-nav-d {
  display: block; width: 9px; height: 9px; margin: 3px auto 0; border-radius: 50%;
  background: var(--panel); box-shadow: 0 0 0 1.5px var(--ink-rule) inset;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.sh-nav-t {
  display: block; margin-top: 7px; font-family: var(--en);
  font-size: 12px; letter-spacing: .04em; color: var(--ink-mid); white-space: nowrap;
}
.sh-nav-i.is-past .sh-nav-d { background: var(--ink-rule); box-shadow: none; }
.sh-nav-i.is-on .sh-nav-d {
  background: var(--mu); box-shadow: 0 0 0 3px var(--panel), 0 0 0 4.5px var(--mu);
  transform: scale(1.15);
}
.sh-nav-i.is-on .sh-nav-t { color: var(--navy); font-weight: 500; }
.sh-nav-a:hover .sh-nav-t { color: var(--terra); }
/* 終了の目安。ここは押せないし、立ち寄り先でもない。
   丸のままだと「5つ目のスポット」に見えるので、**線の終わりの縦棒**にする */
.sh-nav-end { color: var(--ink-mid); padding-top: 4px; flex: 0 0 auto; min-width: 46px; }
.sh-nav-end .sh-nav-d {
  width: 2px; height: 11px; margin: 2px auto 0; border-radius: 1px;
  background: var(--ink-rule); box-shadow: none;
}
.sh-nav-end .sh-nav-t { margin-top: 6px; }
.sh-nav-c {
  margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 899px) {
  /* SP は縦に長いので、行程ナビだけを画面の上に残す */
  .sh-nav { padding: 10px 16px 9px; }
  .sh-nav-i { min-width: 50px; }
  .sh-nav-t { font-size: 12px; }   /* 補足の下限（CLAUDE.md §14 2-7） */
  .sh-nav-c { font-size: 12px; }

}

/* 貼り付きは、動きを止めていても外さない（位置を見失わないための機能なので）。
   外すのは滑らかスクロールだけで、それはブラウザの scroll-behavior 側に任せる */


/* ============================================================ スポットを選ぶ：2段階 */
/* 依頼者指示 2026-08-26。
   STEP 1 で博物館（1館以上・複数可）、STEP 2 でそのエリアの周辺スポットを選ぶ。
   合計は最大6か所。件数と、選べない理由は必ず**文字で**出す。 */
/* 件数は **STEP2 の見出しの右**（依頼者指示 2026-08-26）。
   エリア候補の 35 行が無くなって画面が短くなったので、貼り付けはやめた。
   数えるのは STEP1 の博物館を含めた合計。 */
.sel-count {
  flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--panel); border: 1px solid var(--ink-hair);
}
.sel-count-l { font-size: 12.5px; letter-spacing: .1em; color: var(--ink-mid); }
.sel-count-v { font-family: var(--en); font-size: 17px; font-weight: 700; color: var(--navy); }

.sel-st { margin-top: 34px; }
.sel-st-n { font-family: var(--en); font-size: 12px; letter-spacing: .18em; color: var(--terra); }
.sel-st-h { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: .04em; color: var(--navy); margin-top: 4px; }
.sel-st-l { margin-top: 7px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); text-wrap: pretty; }
.sel-st-note { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-card); background: var(--panel); font-size: 13px; line-height: 1.85; color: var(--ink-mid); }
.sel-st-note[hidden], .sel-empty[hidden] { display: none; }

/* 選べない理由・エラー。色だけに頼らず、印（！）と文言で出す */
.sel-msg {
  display: grid; gap: 2px; margin-top: 12px; padding: 12px 16px 12px 34px; position: relative;
  border-radius: var(--r-card); font-size: 13px; line-height: 1.8;
}
.sel-msg[hidden] { display: none; }
.sel-msg::before { content: "！"; position: absolute; left: 15px; top: 12px; font-size: 12.5px; }
.sel-msg-err { background: rgba(202, 79, 39, .08); color: var(--terra-ink, #BE451E); }

/* 上限（6か所）のお知らせは**下から浮かぶ札**（依頼者指示 2026-08-26）。
   節の中の1行のままだと、6か所目を選んだ瞬間に画面の外で出ることがあり、
   「なぜ選べなくなったのか」に気づけなかった。

   2026-08-27：**枠と文字をテラコッタ**にして気づきやすくし、✕ で閉じられるようにした。
   ・枠は塗りの版（--cta #CA4F27）。白地に対して 3:1 以上あり、線として見える
   ・文字は文字用の版（--terra #993818）。白地で 4.5:1 を満たす
   ・閉じても**要素は残す**（見た目だけ消す）。操作できない ＋ からの
     aria-describedby が生きたままになる
   ・1つ外して6か所を割ったら、閉じた覚えは忘れてまた出す */
.sel-msg-full {
  position: fixed; z-index: 72;
  left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: block;
  width: min(560px, calc(100vw - 32px)); margin-top: 0;
  padding: 15px 56px 15px 40px;
  background: var(--panel); color: var(--terra);
  border: 2px solid var(--cta);   /* 1.5px は DPR 1 の描画で 1px に丸められた（実測） */
  box-shadow: 0 18px 44px rgba(30, 47, 82, .22);
  animation: sel-full-up .42s var(--e-out-quint) both;
}
.sel-msg-full::before { left: 18px; top: 15px; }
.sel-msg-b { display: grid; gap: 2px; }
/* 閉じる。**カードの右上**（依頼者指示 2026-08-27）。当たり判定は 44px。
   文が3行になっても位置が動かないよう、縦中央ではなく上に固定する */
.sel-msg-x {
  position: absolute; right: 5px; top: 5px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; color: var(--terra);
  transition: background var(--transition);
}
.sel-msg-x svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .sel-msg-x:hover { background: rgba(202, 79, 39, .10); }
}
/* 閉じたとき。**消さずに見えなくする**（読み上げの参照先を残すため） */
.sel-msg-full.is-off {
  animation: none;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  border: 0; box-shadow: none;
}
@keyframes sel-full-up {
  from { opacity: 0; transform: translate(-50%, 24px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sel-msg-full { animation: none; }
}
/* 狭い画面では追従ボタン（旅ポケット）と横に並べられないので、その上に置く */
/* しおりをつくるページには**下部の追従バー**があるので、その上に出す
   （依頼者指示 2026-08-28）。バーの高さは JS が --mkbar-h に入れる
   （文字サイズや折り返しで変わるため、決め打ちにしない）。
   バーの高さには env(safe-area-inset-bottom) が入っているので、ここでは足さない。
   **z-index も 1つ上げる** ―― 同じ 72 だと、後に来るバーが上に来て隠れる。 */
body.is-mkpage .sel-msg-full {
  z-index: 73;
  bottom: calc(var(--mkbar-h, 96px) + 16px);
}

@media (max-width: 1023px) {
  .sel-msg-full { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* --- 共通のチェック。**写真の左上に重ねる**（依頼者指示 2026-08-26）。
   ボックスと印を**同じグリッドのマス**（1/1）に置き、`place-items: center` で
   そろえる。位置を px で決め打ちしないので、ブラウザの描画差でずれない。
   当たり判定は 44px、目に見えるボックスは 26px（SP は 24px）。 */
.sel-box {
  position: absolute; z-index: 2; left: -2px; top: -2px;
  width: 44px; height: 44px; display: grid; place-items: center;
}
.sel-cb, .sel-ck { grid-area: 1 / 1; }
.sel-cb {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; margin: 0; cursor: pointer;
  border: 1.5px solid rgba(30, 47, 82, .30); border-radius: 8px;
  /* 明るい写真でも暗い写真でも輪郭が出るよう、白地と影を持たせる */
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(22, 35, 61, .24);
  transition: background var(--transition), border-color var(--transition);
}
.sel-cb:checked { background: var(--mu-ink, var(--mu)); border-color: var(--mu-ink, var(--mu)); }
.sel-cb:disabled { cursor: default; background: rgba(230, 220, 198, .94); border-color: var(--ink-rule); }
.sel-ck { width: 17px; height: 17px; color: #fff; opacity: 0; pointer-events: none; }
.sel-cb:checked ~ .sel-ck { opacity: 1; }

/* --- STEP 1：博物館のカード（依頼者指示 2026-08-26 で作り直し）
   ・選択・未選択で**構造を変えない**。状態の札は文字だけ入れ替わる
   ・チェックは写真の左上に重ね、**写真の外に列を作らない**
     → 写真・館名・所在地の左辺がそろう
   ・所在地と状態は**同じ最下段**。館名が2行でも位置が動かないよう
     `margin-top: auto` で下へ押し付ける */
.sel-mus { margin-top: 16px; display: grid; gap: 8px; }
.sel-mu {
  border-radius: var(--r-card); background: var(--panel);
  border: 1px solid var(--ink-hair);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.sel-mu.is-on { border-color: var(--mu-ink, var(--mu)); box-shadow: 0 6px 18px rgba(30, 47, 82, .08); }
.sel-mu-l { position: relative; display: grid; height: 100%; cursor: pointer; }
/* 写真。角丸は写真自身に持たせ、器では切り取らない
   （チェックの当たり判定が角で削られるため） */
.sel-mu-fig, .sel-pk-fig {
  position: relative; border-radius: var(--r-thumb); background: var(--sand); display: block;
}
.sel-mu-fig-i, .sel-pk-fig-i {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-thumb);
}
.sel-mu-fig.is-none, .sel-pk-fig.is-none { background: var(--mu); opacity: .22; }
.sel-mu-b { min-width: 0; display: flex; flex-direction: column; }
.sel-mu-n { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--navy); text-wrap: balance; }
/* 所在地が2行になっても状態の札の位置が動かないよう、**下端でそろえる**。
   center にしていたときは「南河内・南河内郡河南町」が折り返した館だけ
   札が 7px 高くなっていた（1280px で実測） */
.sel-mu-f {
  margin-top: auto; padding-top: 8px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.sel-mu-m { font-size: 12px; color: var(--ink-mid); min-width: 0; }
/* 状態の札。カプセルにはしない。行送りを 1 にして文字が縦にぶれないようにする */
.sel-mu-tag {
  flex: 0 0 auto; min-height: 32px; padding: 0 13px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em; line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--mu-ink, var(--mu)); color: var(--mu-ink, var(--mu));
  background: transparent;
  transition: background var(--transition), color var(--transition);
}
.sel-mu.is-on .sel-mu-tag { background: var(--mu-ink, var(--mu)); color: #fff; border-color: transparent; }

/* エリア別の候補アコーディオン（.sel-ar / .sel-sp）は撤去した
   （依頼者指示 2026-08-26）。STEP2 は旅ポケットのカードだけになった。
   スポットのデータ自体は data.js に残っていて、ほかの画面が使っている */

/* --- STEP 2：旅ポケットのカード（依頼者指示 2026-08-26）
   上段＝サムネイル・名前・エリアと滞在・選択、
   下段＝関連スポット（細い罫で分ける）。
   コンパクトな横型にして、貯めた場所が増えても見比べられるようにする。 */
.sel-st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sel-st-head-b { min-width: 0; }

/* 並び順の断り。**同じエリアを先に出しているときだけ**出す（依頼者指示 2026-08-29） */
.sel-pk-note { margin-top: 10px; font-size: 12.5px; line-height: 1.8; color: var(--ink-mid); }
.sel-pk-note[hidden] { display: none; }

.sel-pk-l { margin-top: 16px; display: grid; gap: 10px; }
/* グループの見出し。**控えめに** ―― 小さな文字＋細い罫だけ。
   カードの見た目は変えない（同じエリアかどうかで差を付けない）。
   2列のときは行いっぱいに広げる */
.sel-pk-gh { grid-column: 1 / -1; margin-top: 6px; }
.sel-pk-l > .sel-pk-gh:first-child { margin-top: 0; }
.sel-pk-gh-t {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--ink-mid);
}
.sel-pk-gh-t::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--ink-rule);
}
.sel-pk-l[hidden] { display: none; }
.sel-pk {
  border-radius: var(--r-card); background: var(--panel);
  border: 1px solid var(--ink-hair);
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* 選んだカードは**枠でも分かる**ようにする（ボタンの色だけに頼らない） */
.sel-pk.is-on {
  border-color: var(--mu-ink, var(--mu));
  box-shadow: 0 6px 18px rgba(30, 47, 82, .08);
}
.sel-pk-main {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 10px 12px;
}
.sel-pk-b { min-width: 0; }
/* 種別の札（.sel-pk-k）は撤去した（依頼者指示 2026-08-26）。
   こちらで分類を付け足さない。エリアと市町村は下の行に文字で出ている */
.sel-pk-n { font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--navy); text-wrap: balance; }
.sel-pk-m { margin-top: 3px; font-size: 12px; line-height: 1.7; color: var(--ink-mid); }
/* 区切りの単位では折り返すが、語の途中では折らない */
.sel-pk-m-p { white-space: nowrap; }
/* 選択のボタン。印（＋ / ✓）と文字を必ず添える。
   **見た目の大きさは STEP1 の札（.sel-mu-tag）に合わせる**（依頼者指示 2026-08-27）。
   STEP1 は札そのものが飾りで、押す対象はラベル全体（44px 以上）だが、
   こちらは**このボタンだけが押す対象**なので、
   当たり判定は ::after で 44px に戻す（見た目は 32px のまま）。 */
.sel-pk-go {
  position: relative;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 32px; padding: 0 13px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em; line-height: 1; white-space: nowrap;
  border: 1px solid var(--mu-ink, var(--mu)); color: var(--mu-ink, var(--mu));
  background: transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sel-pk-go::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.sel-pk-go-i { display: grid; place-items: center; }
.sel-pk-go-i svg { width: 13px; height: 13px; }
.sel-pk-go[aria-pressed="true"] {
  background: var(--mu-ink, var(--mu)); color: #fff; border-color: transparent;
}
.sel-pk-go:disabled { opacity: .38; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .sel-pk-go:hover:not(:disabled) { background: var(--mu-soft, var(--ivory)); }
  .sel-pk-go[aria-pressed="true"]:hover { background: var(--mu-ink, var(--mu)); color: #fff; }
}

/* 下段の関連スポット。**細い罫**で上と分ける。＋ は置かない（情報だけ）。
   **列全体が1つのボタン**（依頼者指示 2026-08-27）。どこを押しても詳細が開く */
.sel-pk-reco {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 2px 6px 2px 12px; border-top: 1px solid var(--ink-hair);
  border-radius: 0 0 var(--r-card) var(--r-card);
  transition: background var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .sel-pk-reco:hover { background: var(--ivory); }
  .sel-pk-reco:hover .sel-ic { color: var(--navy); }
}
.sel-pk-reco:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; }
.sel-pk-reco-l {
  flex: 0 0 auto; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; letter-spacing: .04em; color: var(--ink-mid); background: var(--ivory);
}
.sel-pk-reco-n {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.6; color: var(--navy);
  overflow-wrap: anywhere;
}
/* 情報アイコン。44px。線の太さ 2・端は丸で、サイト内のほかのアイコンと同じ描き方 */
.sel-ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-mid);
  transition: background var(--transition), color var(--transition);
}
.sel-ic svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .sel-ic:hover { background: var(--ivory); color: var(--navy); }
}

/* 旅ポケットが空のとき。空白のままにせず、次にすることを出す */
.sel-pk-empty {
  margin-top: 16px; padding: 26px; border-radius: var(--r-panel); background: var(--panel);
}
.sel-pk-empty[hidden] { display: none; }
.sel-pk-empty-t { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--navy); }
.sel-pk-empty-l { margin-top: 10px; font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); }
.sel-pk-empty-a { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }

/* --- PC。3館を横3列。カードの高さをそろえ、最下段の位置も3枚でそろえる */
@media (min-width: 769px) {
  .s2-drag-h { display: none; }
  .sel-mus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sel-mu-l { grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 12px; }
  .sel-mu-fig { width: 100%; height: 84px; }
  /* 旅ポケットのカードは**2列**。中身は横型のまま */
  .sel-pk-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sel-pk-fig { width: 76px; height: 76px; }
}
/* --- SP。**PC の縮小コピーにしない**（依頼者指示 2026-08-26）。
   左に 1:1 の写真、右に名前・所在地・状態を置く横型のカードにする */
@media (max-width: 768px) {
  .sel-mus { gap: 8px; }
  .sel-mu-l {
    grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    align-items: center; gap: 12px; padding: 10px;
  }
  .sel-mu-fig { width: 76px; height: 76px; align-self: center; }
  .sel-mu-n { font-size: 14px; }
  .sel-mu-f { padding-top: 6px; }
  .sel-mu-tag { min-height: 30px; padding: 0 11px; font-size: 12px; }
  /* 写真が 76px なので、ボックスは 24px にして左上から 8px 内側に置く */
  .sel-box { left: -4px; top: -4px; }
  .sel-cb { width: 24px; height: 24px; border-radius: 7px; }
  .sel-ck { width: 16px; height: 16px; }

  /* SP は1列。写真は 1:1 の 76px、操作はカードの右側のまま */
  .sel-pk-l { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sel-pk-fig { width: 76px; height: 76px; }
  .sel-pk-main { gap: 10px; padding: 10px; }
  /* STEP1 の札（.sel-mu-tag）と同じ縮め方 */
  .sel-pk-go { min-height: 30px; padding: 0 11px; font-size: 12px; }
  .sel-pk-reco { padding-left: 10px; gap: 8px; }
}
@media (max-width: 560px) {
  .sel-mu-l { gap: 10px; }
  /* 375px でも「＋ 追加する」が1行に収まるところまで詰める */
  .sel-pk-main { gap: 8px; padding: 8px 8px 8px 10px; }
  .sel-pk-fig { width: 72px; height: 72px; }
  /* .sel-pk-go はここでは詰めない。STEP1 の札（.sel-mu-tag）と同じ
     11px のままにする（依頼者指示 2026-08-27）。印を 13px にしたぶん、
     320px でも「＋ 追加する」は1行に収まる（実測） */
  .sel-pk-reco-l { padding: 3px 8px; }
}


/* ============================================================ しおり：START */
/* 行程の先頭に置く、施設ではない出発地点（依頼者指示 2026-08-26）。
   ・スポット数にも番号にも含めない
   ・現在地はサイト側で取得も保存もしない。移動時間も出さない
   ・PC は曲線、SP は縦ラインが、この下から1件目へ続く（どちらも器の外にある） */
.sh-start { position: relative; z-index: 1; padding: 6px 0 26px; }
.sh-start-b {
  display: inline-grid; gap: 10px; justify-items: start;
  padding: 16px 22px 18px; border-radius: var(--r-card);
  background: var(--panel); border: 1px dashed var(--ink-rule);
  max-width: min(100%, 420px);
}
/* 時刻の札を外したぶん、START 自体を**この札でいちばん目立つ文字**にする
   （依頼者指示 2026-08-26。以前の 10:30 と同じくらいの大きさ）。
   字間は広げすぎない ―― .18em で「START」が1語に見える範囲に収める */
.sh-start-e {
  font-family: var(--en); font-size: clamp(26px, 3vw, 34px); font-weight: 700;
  line-height: 1.1; letter-spacing: .18em; color: var(--terra);
  white-space: nowrap;
}
.sh-start-n { font-size: 12px; line-height: 1.75; color: var(--ink-mid); text-wrap: pretty; }
.sh-start-ng { font-size: 12px; line-height: 1.75; color: var(--ink-mid); }
.sh-start-a { min-height: 44px; font-size: 13.5px; }

@media (min-width: 900px) {
  /* 曲線は中央を通る。START の器は左半分に置いて、線を隠さない */
  .sh-start { padding: 10px 0 30px; }
  .sh-start-b { max-width: min(46%, 420px); }
}
@media (max-width: 899px) {
  /* 縦ラインは左 28px。器はその右へ寄せる */
  .sh-start { padding: 4px 0 22px 0; }
  .sh-start-b { width: 100%; max-width: none; }
}


/* ============================================================ しおり：副情報と操作（狭い画面） */
@media (max-width: 899px) {
  /* 副情報は上下に積む（無理な2列組みにしない）。ラベルと値の関係は
     行のまとまり（.sh-side-r）と余白で示す */
  .sh-side-r { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .sh-side { padding: 14px 15px; }
  /* ボタンは幅が足りれば2列、足りなければ縦に落ちる。高さは 44px のまま。
     150px は「動画をもう一度見る」が1行に収まる下限（実測 145px） */
  .sh-stop-a { gap: 8px; }
  .sh-tb { flex: 1 1 150px; }
}

/* ============================================================ しおりをつくる（統合） */
/* 2ページ（条件入力 → スポット選択）を1枚にまとめた（依頼者指示 2026-08-27）。
   ページ遷移の「STEP 1／2」は廃止し、**同じページの中の章番号 01〜04** にした。 */
.mk-intro { margin-bottom: 30px; }
.mk-intro .sel-count { margin-top: 14px; }
.mk-st { margin-top: 40px; scroll-margin-top: 24px; }
.mk-st:first-of-type { margin-top: 30px; }
/* 章番号。行程の番号（.s2-no）とは別物なので、エリアの色ではなくネイビーで置く */
.mk-st-n {
  font-family: var(--en); font-size: 12.5px; font-weight: 700;
  letter-spacing: .18em; color: var(--terra-ink, #BE451E);
}
.mk-st-h {
  margin-top: 4px; font-family: var(--serif); font-weight: 500; font-size: 21px;
  letter-spacing: .05em; line-height: 1.5; color: var(--navy);
}
.mk-st-l { margin-top: 7px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); max-width: 40em; text-wrap: pretty; }
.mk-st .sel-mus, .mk-st .sel-pk-l, .mk-st .s2-ctl { margin-top: 16px; }
.mk-st .mk-form { margin-top: 18px; }
.mk-st .mk-f { margin-bottom: 0; }
.mk-note { margin-top: 14px; font-size: 12px; line-height: 1.8; color: var(--ink-mid); text-wrap: pretty; }

/* --- 並び替えカード。1列で [番号＋取っ手][64px サムネイル][情報][削除]
   （依頼者指示 2026-08-27）。**サムネイルは縮めない**。高さは padding と
   gap で抑える。固定の min-height は持たせない（1行の名前なら 88〜96px） */
.s2-list { margin-top: 14px; display: grid; gap: 9px; }
.s2-list[hidden] { display: none; }
.s2-i {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 13px 6px 13px 12px; background: var(--panel);
  border-radius: var(--r-card); border-left: 3px solid var(--mu);
  box-shadow: 0 6px 18px rgba(30, 47, 82, .06);
}
/* 左端の細い列。上に番号、下に取っ手。サムネイル（64px）の高さに収める */
.s2-lead {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  width: 30px; flex: 0 0 auto;
}
.s2-no {
  font-family: var(--en); font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--mu-ink, var(--mu)); line-height: 1;
}
/* 取っ手。**PC も SP もここから並び替える**（↑↓ ボタンは画面から外した）。
   当たり判定は 44px を確保しつつ、見た目は 26px に収めて行を高くしない */
.s2-h {
  position: relative; width: 26px; height: 26px; display: grid; place-items: center;
  cursor: grab; color: var(--ink-mid); touch-action: none;
  border-radius: 7px; background: none;
}
.s2-h::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.s2-h:hover { background: var(--ivory); color: var(--navy); }
.s2-h svg { width: 15px; height: 15px; fill: currentColor; }
.s2-h[aria-pressed="true"] { background: var(--sand); color: var(--navy); }
/* サムネイルは 64px 固定。**施設名が長くても縮めない**（320px でも 64px） */
.s2-fig {
  width: 64px; height: 64px; aspect-ratio: 1 / 1; flex: 0 0 auto;
  border-radius: var(--r-thumb); overflow: hidden; background: var(--sand);
}
.s2-fig-i { width: 100%; height: 100%; object-fit: cover; display: block; }
.s2-b { min-width: 0; }
.s2-n {
  display: block; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--navy);
  /* 施設名は最大2行 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.s2-m { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.6; color: var(--ink-mid); }
.s2-m-p { white-space: nowrap; margin-right: .3em; }
/* 削除は右端の上下中央。取っ手とは離れているので操作がぶつからない */
.s2-o-rm {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; color: var(--ink-mid); flex: 0 0 auto;
}
.s2-o-rm:hover { background: var(--ivory); color: var(--terra); }

/* ドラッグ中 */
.s2-i.is-drag {
  position: relative; z-index: 3; opacity: .96;
  box-shadow: 0 16px 36px rgba(30, 47, 82, .22);
}
.s2-i.is-drag .s2-h { cursor: grabbing; }
/* ---- 追加・削除の控えめなモーション（依頼者指示 2026-08-29）。
   キーフレーム（oc-bump / oc-pop）は style.css が持つ。
   **動きを止めている人には何も出さない**（この囲いの外には書かない）。 */
@media (prefers-reduced-motion: no-preference) {
  /* 増えた行だけ、下から少し上がってなじむ */
  .s2-i.is-in { animation: s2-in .42s var(--e-out-quint) both; }
  @keyframes s2-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  /* 消える行だけ静かに引く。残りの行は JS が FLIP で送る */
  .s2-i.is-out {
    transition: opacity .18s var(--e-out-quart), transform .18s var(--e-out-quart);
    opacity: 0; transform: scale(.985);
  }
  /* 旅ポケットのボタン。**印だけ**決まる（文字と枠は動かさない） */
  .sel-pk-go.is-pop .sel-pk-go-i { animation: oc-pop .34s var(--e-out-quint); }
  /* 件数。数字だけ小さく脈打つ */
  .sel-count-v.is-bump { display: inline-block; animation: oc-bump .34s var(--e-out-quint); }
}

.s2-list.is-dragging { user-select: none; -webkit-user-select: none; }
.s2-list.is-dragging .s2-i:not(.is-drag) { transition: transform .18s var(--e-out-quint); }
/* 入る位置のガイド。細い線1本だけ（傾きや回転は使わない） */
.s2-guide { height: 2px; border-radius: 1px; background: var(--terra); margin: -5px 0; }

.s2-drag-h { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--ink-mid); text-wrap: pretty; }
.s2-drag-h[hidden] { display: none; }

/* --- 追従バー。件数と主操作を常に見えるところに置く。
   右のグローバルナビとは別（サイドパネルは足さない） */
.mkbar {
  position: fixed; z-index: 72; left: 0; right: 0;
  bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--ink-hair);
  box-shadow: 0 -6px 20px rgba(30, 47, 82, .08);
}
.mkbar-in {
  max-width: var(--site-max); margin: 0 auto; padding: 10px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.mkbar-c { font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--navy); white-space: nowrap; }
.mkbar-a { display: flex; align-items: center; gap: 10px; }
.mkbar-jump {
  min-height: 44px; padding: 0 12px; font-size: 12.5px; color: var(--ink-mid);
  text-decoration: underline; text-underline-offset: 4px; white-space: nowrap;
}
.mkbar-jump:hover { color: var(--terra); }
.mkbar-go { min-height: 46px; font-size: 13.5px; padding: 0 20px; white-space: nowrap; }
/* 追従バーで本文の最後が隠れないぶんの余白 */
body.is-mkpage .site { padding-bottom: 168px; }
/* 旅ポケットの中身をこのページの本文に出しているので、追従の FAB は隠す。
   **保存データと他ページの FAB はそのまま**（この1ページの見た目だけ） */
body.is-mkpage .pk-fab { display: none; }

@media (max-width: 768px) {
  .mk-st { margin-top: 34px; }
  .mk-st-h { font-size: 19px; }
  .s2-i { gap: 9px; padding: 12px 4px 12px 10px; }
  .s2-lead { width: 26px; }
  .mkbar-in { padding: 9px 14px; gap: 10px; }
  .mkbar-jump { padding: 0 6px; font-size: 12px; }
  .mkbar-go { padding: 0 15px; font-size: 13px; }
  body.is-mkpage .site { padding-bottom: 150px; }
}
@media (max-width: 380px) {
  /* 320〜380px。**サムネイルは 64px のまま**、まわりを詰めて文字の幅を稼ぐ */
  .s2-i { gap: 7px; padding: 11px 2px 11px 8px; }
  .s2-lead { width: 22px; }
  .s2-no { font-size: 12px; }
  .mkbar-jump { display: none; }   /* 幅が足りないので CTA を優先する */
}
@media (prefers-reduced-motion: reduce) {
  .s2-list.is-dragging .s2-i:not(.is-drag) { transition: none; }
}

/* ---- 副情報の印（依頼者指示 2026-08-27）。支給 SVG をスプライトから引く。
   場所は Mappin、時間は time。**飾りなので aria-hidden** ―― 意味はラベルの文字が持つ。
   線は currentColor に読み替えてあるので、ラベルと同じ色で並ぶ */
.sh-side-r dt { display: flex; align-items: center; gap: 6px; }
.sh-side-ic {
  width: 14px; height: 14px; flex: 0 0 auto; color: var(--ink-mid);
  stroke-width: 1.6; overflow: visible;
}

@media (min-width: 900px) {
  /* ---- START を**ページの中央**に置く（依頼者指示 2026-08-27）。
     曲線は viewBox の中央（x=50%）を通るので、器を中央に置くと
     線の始まりと重なって「ここから始まる」感が出る。
     器は線より前（z-index）だが、地は不透明なので線を隠さない ――
     線の始点はこの器の下端から下へ続く */
  .sh-start { padding: 14px 0 34px; display: flex; justify-content: center; }
  .sh-start-b {
    max-width: min(58%, 460px);
    justify-items: center; text-align: center;
  }
  .sh-start-n, .sh-start-ng { text-align: center; }

  /* ---- サブ写真と動画が、メインコンテンツの左辺・右辺にぴったり付いていたので
     左右に余白を持たせる（依頼者指示 2026-08-27）。
     .sh-figs は列の外へ 30px はみ出しているので、その分＋16px 戻す */
  .sh-figs-b { left: 46px; right: 46px; }
}

/* ---- しおりのセクション区切り：**トップと同じネイビーの見出し帯**
   （依頼者指示 2026-08-27）。表紙・ダイジェスト・行程の切り替わりを
   はっきりさせる。トップの .secband をパネルの中で使うための変種。

   ・全幅（100vw）への引き出しはしない。**パネルの幅いっぱい**に敷く
     （main.js が入れる --sb-left / --sb-w は、ここでは参照しない）
   ・パネルの中なので、帯もマーキーもトップより一段小さくする
   ・地・書体・不透明度・モーション（60px/秒・画面外で停止・reduce）は
     トップと同じものをそのまま使う */
.secband.is-panel {
  width: auto; margin-left: 0;
  --sb-mq-h: clamp(56px, 6vw, 72px);
  --sb-mq-f: clamp(92px, 10vw, 118px);
  --sb-b-h: 0px;
  --sb-par: 6px;
}
.secband.is-panel .secband-b { min-height: 0; padding-block: 22px; }
.secband.is-panel .secband-in {
  width: auto; margin-left: 0; padding-inline: 30px; column-gap: 30px;
}
.secband.is-panel .secband-jp { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.35; }
.secband.is-panel .secband-en { margin-top: 5px; font-size: 11px; letter-spacing: .2em; }
.secband.is-panel .secband-lead { font-size: 12.5px; line-height: 1.85; max-width: 30em; }
@media (max-width: 899px) {
  .secband.is-panel .secband-in { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding-inline: 20px; }
  .secband.is-panel .secband-b { padding-block: 18px; }
}

/* ---- 旅のダイジェストは**点線で囲うだけ**（依頼者指示 2026-08-28）。
   ネイビーの地と見出し帯はやめた。「行程」の帯はそのまま残してあるので、
   表紙 → 点線の囲い → ネイビーの帯 → 行程 という区切りになる。

   左右は**表紙（.sh-cover）の内側にそろえる**（PC 30px / SP 20px）ので、
   囲いの左辺が表紙の文字の左辺と同じ位置に来る。
   囲いの中の余白は .dg-b が持つ。 */
/* 表紙と見出しのあいだ（依頼者指定の値 2026-08-28）。
   表紙の下余白（PC 42px ／ SP 24px）と合わせて 66px ／ 44px。
   あいだには表紙の下の罫が入る */
.dg { padding: 24px 30px 30px; }
.dg-b {
  padding: 20px 22px 16px;
  /* 1.5px は DPR 1 の描画で 1px に丸められて痩せる（§41・§50 と同じ）。2px にする。
     角丸は切符（--r-card 18px）より一段大きい --r-panel（22px）で、入れ子に見せる */
  border: 2px dotted rgba(30, 47, 82, .55);
  border-radius: var(--r-panel);
}
/* 見出し。ネイビーの帯はやめたが、**節の名前は画面に出す**。
   級数は「行程」の帯の見出し（.secband-jp）とそろえ、
   地が白なので色はネイビー。囲い（.dg-b）の**外**・上に置き、
   左辺は囲いと同じ位置にそろえる。 */
/* 表紙（タイトル＋ビジュアル）の下に細い罫（依頼者指示 2026-08-28）。
   左右は**表紙の内側**にそろえるので、下のダイジェストの囲いと同じ位置から始まる。
   色は --ink-rule（薄いネイビー）、太さは 1px。 */
.sh-cover::after {
  content: ""; position: absolute; left: 30px; right: 30px; bottom: 0;
  height: 1px; background: var(--ink-rule);
}
@media (max-width: 899px) {
  .sh-cover::after { left: 20px; right: 20px; }
}

/* 見出しと送りのボタンを1行に。ボタンが無い（横に流れない）ときは
   見出しだけが並ぶので、SP の見え方はこれまでと変わらない */
.dg-head {
  margin-bottom: 14px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 16px;
}
.dg-head-t { min-width: 0; }
.dg-nav { display: flex; gap: 8px; flex: 0 0 auto; padding-bottom: 2px; }
.dg-head-e {
  margin: 0; font-family: var(--en); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-mid);
}
.dg-head-h {
  margin: 6px 0 0; font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.35; letter-spacing: .02em;
}
.dg-head-l {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.85; color: var(--ink-mid);
}
/* 見出しを囲いの外に出してあるので、中のいちばん上の余白は padding が持つ */
.dg-b .dg-wrap { margin-top: 0; }
@media (max-width: 899px) {
  .dg { padding: 20px 20px 26px; }   /* 表紙の下余白 24px と合わせて 64px */
  .dg-b { padding: 16px 14px 20px; }
}