:root{
  --dark:#141414; --paper:#fbfaf7; --card:#fff;
  --line:#eee9e0; --sub:#8a8378; --text:#2a2a28;
  /* アクセントは藍（--ai）と金（--kin）に寄せる。
     距離・リンク・タグ・主ボタンは以前ばらばらの青/緑/桃だったが、
     同じ「距離」が画面によって違う色になっていたため藍に統一した。
     --yellow は「今いる場所の印」と「ルート」ボタンだけ、
     --pink は地図の出発地ピンだけに用途を絞っている。 */
  --pink:#ef476f; --yellow:#ffd60a;
  --shadow-sm:3px 3px 0 var(--dark);
  --ai:#1b3a5c; --kin:#d8b25c;   /* TOPの流れる帯と同じ藍と金 */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* 地図表示で overflow:hidden にしてもスクロールバーぶん横にずれないよう、常に幅を確保する */
html{scrollbar-gutter:stable}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  background:#efeae0;color:var(--text);line-height:1.6;
  /* 紙の粒子（細かい点）に、地図の座標点をイメージした少し大きな青い点を重ねる。
     「道具ページは実用重視・大きな動きを足さない」方針は守り、模様だけを少し豊かにする
     （アニメーションは追加しない）。 */
  background-image:
    radial-gradient(rgba(120,95,60,.10) 1px,transparent 1px),
    radial-gradient(rgba(37,99,235,.07) 1.4px,transparent 1.4px);
  background-size:4px 4px, 26px 26px;
  background-position:0 0, 13px 13px;
  padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
button,select,input{font-family:inherit;font-size:100%}

/* ヘッダー（トップ・プロフィールと共通デザイン） */
/* grid(3列)に子要素5つ(ロゴ・出発地点・文字サイズ・ハンバーガー・ナビ)を
   収めようとして、PCでナビが2行目に落ちる不具合があった（zoombtn追加時に
   列数と要素数が食い違った）。grid をやめて flex に統一し、ロゴだけ
   margin-right:auto で左に固定、残りは自然な並び順で右にまとめる。
   これで文字サイズボタンは常に「ハンバーガー／ナビのすぐ左」に来る。 */
.hd{position:sticky;top:0;z-index:1200;background:var(--dark);color:#fff;
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom:2px solid var(--dark)}
/* h1 の行の高さが、中の「家アイコン＋文字」の実際の高さと1〜2pxずれ、
   他のヘッダー部品（出発地点ボタン等）と比べてロゴだけ上にずれて見えて
   いた（実測：中心が23pxと24〜25pxで食い違い）。h1 自体を flex にして
   中身を直接・確実に中央へ合わせる。 */
.hd h1{display:flex;align-items:center;font-size:12px;font-weight:900;margin-right:auto;min-width:0}
.hd-logo{font-size:12px;font-weight:900;letter-spacing:1.4px}
.hd-nav{display:flex;gap:16px;align-items:center;font-size:11.5px;font-weight:700;
  white-space:nowrap;flex-shrink:0}
.hd-nav a{color:#8a8378;padding:4px 2px 5px;border-bottom:2px solid transparent}
/* 現在いるページ（宿を探す）だけ黄色い下線で示す */
.hd-nav a.cur{color:#fff;border-bottom-color:var(--yellow)}
.hd h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* ---- スマホ：ハンバーガーメニュー（上から降りるパネル・index と共通の考え方） ---- */
.navbtn{display:none;background:transparent;border:0;color:#fff;
  font-size:19px;line-height:1;padding:2px 4px;cursor:pointer}
@media (max-width:759px){
  .navbtn{display:block}
  /* .hd は grid のままだと、position:absolute の子要素（ドロップダウン）が
     4列目のグリッドセル基準の幅になってしまい、grid-column:1/-1 を足しても
     効かない（WebKit の実装差・実測で確認）。index/profile の topbar と同じ
     flex に切り替えて、絶対配置の基準を素直に .hd 全体にする。 */
  /* 常に flex なので、ここでの上書きは不要になった */
  /* 真因はこちら：基本ルールの justify-self:end が絶対配置後も生きていた。
     left:0/right:0 を指定していても width:auto だと中身の幅に縮み、
     justify-self:end でその縮んだ箱が右端に寄る（＝左側が透明に見える）。
     stretch で埋め直す。 */
  /* display:none/flex の切替ではアニメーションできないため、
     常に flex のまま置き、透明度と位置ずらしで開閉を見せる。
     閉じている間は visibility:hidden で読み上げ・タップの対象から外す。 */
  .hd-nav{position:absolute;top:100%;left:0;right:0;display:flex;
    justify-self:stretch;
    flex-direction:column;gap:0;align-items:stretch;
    background:var(--dark);border-bottom:2px solid var(--dark);
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .hd-nav.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
    transition:opacity .22s ease,transform .22s ease,visibility 0s}
  .hd-nav a{padding:13px 16px;font-size:13px;
    border-bottom:1px solid #3a3a3a;border-left:4px solid transparent}
  .hd-nav a.cur{border-bottom-color:#3a3a3a;border-left-color:var(--yellow)}
}
/* 出発地点：中央に控えめに置き、設定済みのときだけ目立たせる */
.hd-home{background:transparent;color:#8a8378;
  border:1.5px solid #3a3a3a;border-radius:16px;
  padding:5px 14px;font-size:10.5px;font-weight:700;line-height:1.5;
  max-width:50vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.hd-home.set{background:#232323;border-color:#3a3a3a;color:var(--yellow);font-weight:800}

/* タブと絞り込みの2行をまとめて貼り付ける入れ物。
   下へ読み進めると2行ごと上に隠れ、上へ戻すとまた出る（Twitter のヘッダー方式）。
   別々に sticky にすると隠す量を揃えられないため、1つにまとめている。 */
.sticky-bars{position:sticky;top:var(--hdH,46px);z-index:1150;
  transition:transform .25s ease}
body.bars-hidden .sticky-bars{transform:translateY(-100%)}
/* 2行が隠れたら、一覧の県名見出しもヘッダーの真下まで一緒に上げる。
   ここを直さないと、隠れた2行のぶんだけ見出しが宙に浮いて見える。 */
body.bars-hidden .gh{top:var(--hdH,46px)}
/* 地図表示のときは絞り込みが消えて高さが変わるので、隠す動きはしない */
body.map-open .sticky-bars{transform:none}
@media (prefers-reduced-motion:reduce){ .sticky-bars{transition:none} }

/* 表示切替：黒枠の一体型セグメント */
/* flex-wrap は文字を大きくしたときのため。タブ3つと検索欄が横に収まらなく
   なったら、検索欄を次の行へ折り返す。これが無いと画面からはみ出して
   横スクロールが発生する（文字「大きい」で実測39pxはみ出していた）。 */
/* 周囲の地色は本文（カード表示の背景）と同じベージュにする。
   透過にする方法も検討したが、この行は position:sticky で常に画面上に
   居座るため、透過だと下にあるカードがスクロール中に透けて見えてしまう。
   本文の地色 #efeae0 をそのまま塗る方が確実（実際に使っている値と完全一致
   するので、色が微妙にずれる心配もない）。中のカプセル・プルダウン自体は
   今までどおり白のまま変えていない。 */
.views{display:flex;flex-wrap:wrap;overflow:hidden;
  justify-content:space-between;align-items:center;gap:10px;
  background:#efeae0
    radial-gradient(rgba(120,95,60,.10) 1px,transparent 1px)
    ,radial-gradient(rgba(37,99,235,.07) 1.4px,transparent 1.4px);
  background-size:4px 4px, 26px 26px;background-position:0 0, 13px 13px;
  padding:9px 12px}
/* 320px幅×文字拡大の組み合わせで、input自身が3pxだけ内側からはみ出す
   端数の丸め事故があった（実測）。この行だけ overflow:hidden にして、
   横スクロールが起きるくらいなら1〜3pxだけ隠れる方を選ぶ。 */
/* 表示切替の右の空きエリアに置く検索欄 */
.views-search{position:relative;flex:1;min-width:0;max-width:280px;
  display:flex;align-items:center}
/* 虫眼鏡アイコン。取っ手（::after）が円の内側にめり込むと「Q」に見えてしまう
   （実際に指摘された）。円の外周からはっきり離した位置を起点にする。 */
.views-search::before{content:'';position:absolute;left:12px;top:50%;
  width:10px;height:10px;transform:translateY(-50%);
  border:2px solid var(--sub);border-radius:50%;pointer-events:none}
.views-search::after{content:'';position:absolute;left:21px;top:50%;
  width:6px;height:2px;background:var(--sub);border-radius:1px;
  transform:translateY(3px) rotate(45deg);transform-origin:left center;pointer-events:none}
.views-search input{width:100%;border:2px solid var(--dark);border-radius:20px;
  padding:8px 30px 8px 30px;font-size:12.5px;background:#fff;color:var(--ink);min-width:0}
.views-search input::placeholder{color:var(--sub)}
.views-search #qClear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border:0;background:none;color:var(--sub);
  font-size:16px;line-height:1;cursor:pointer}
@media (max-width:479px){ .views-search{max-width:none} }
/* タブ3つ＋検索欄を必ず同じ行に収めるため、検索欄はここまで縮めてよいことにする。
   折り返しはこの幅でも収まらない時（文字を大きくした時）だけの保険にする。 */
/* 320px幅の古い端末×文字拡大の組み合わせで、input自身が3pxだけ
   コンテナの外へはみ出す事故があった（実測）。min-width を少し上げて
   安全側に倒す。 */
.views-search{flex:1 1 40px;min-width:38px}
.views-seg{display:inline-flex;background:#fff;border:2.5px solid var(--dark);border-radius:24px;
  overflow:hidden;box-shadow:var(--shadow-sm)}
.views .v{border:0;background:none;color:var(--sub);min-width:56px;text-align:center;
  padding:8px 10px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
@media (max-width:759px){
  /* 標準・少し大きいでは検索欄に余裕があったので、タブ側を広げて
     検索欄を少し狭める（検索は虫眼鏡＋短い言葉が入れば十分なため）。 */
  .views .v{min-width:64px;padding:8px 12px;font-size:11.5px}
}
.views .v+.v{border-left:2px solid var(--dark)}
.views .v.on{color:#fff;background:var(--ai)}

/* 絞り込み：チップ型のプルダウン */
/* flex-wrap は文字を大きくしたときのため。横に収まらなくなったら折り返す。
   これが無いと、プルダウンが「地」1文字まで潰れて読めなくなる（実測）。 */
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;
  background:#efeae0
    radial-gradient(rgba(120,95,60,.10) 1px,transparent 1px)
    ,radial-gradient(rgba(37,99,235,.07) 1.4px,transparent 1.4px);
  background-size:4px 4px, 26px 26px;background-position:0 0, 13px 13px}
@media (max-width:759px){ .bar{padding:8px 8px} }
/* 並べ替え・地域・お気に入り・件数のかたまりを、行の右側へ寄せる。
   以前は左に寄って右側が余白のまま浮いていた（半端に見えるとの指摘）。
   #sort に margin-left:auto を付けると、その前に何も無い時（検索欄が
   この行に来ていない、標準・少し大きいの時）は行全体が右寄せになり、
   検索欄がこの行に来た時（大きい、の時）は検索欄だけ左・残りが右になる。 */
.bar #sort{margin-left:auto}
/* 「大きい」の時だけ検索欄がこの行に来る（app.js が入れ替える）。
   絞り込みの部品（高さ28px）と揃うよう、検索欄の高さもここでは詰める。 */
.bar .views-search{flex:1 1 120px;max-width:220px}
.bar .views-search input{height:28px;padding-top:0;padding-bottom:0}
/* 絞り込みバーの部品は高さを 28px に統一する。
   WebKit の select は menulist 表示のとき padding を無視するため、
   padding ではなく height で高さを決めないと隣のボタンと揃わない。 */
/* 潰れる下限を決めておく。7em あれば「地域順（北から南）」の頭が読める */
.bar select{min-width:6em;height:28px;border:2px solid var(--dark);border-radius:999px;
  padding:0 8px;font-size:11px;font-weight:700;background:#fff;color:var(--text)}
/* スマホは幅が厳しいので、プルダウン2つ・お気に入り・件数を1行に収めるために
   一段小さくする。PCはそのままの大きさを保つ。 */
@media (max-width:759px){
  .bar{gap:5px}
  /* 文字を大きくしたときは、見切れてよいのでプルダウンの幅そのものに
     上限を設ける。中身の文字が入りきらなければ、ブラウザ側で見切れて
     表示される（選ぶ操作自体はできるので実用上困らない）。 */
  /* vw基準だと、文字を大きくした時に基準となる幅の解釈がぶれて狙った値に
     ならなかった（実測）。固定pxで狙い撃ちする。文字を大きくするほど
     使える論理幅そのものが減っていく（大で288px相当）ため、かなり
     切り詰めないと1行に収まらない。見切れて良いとのことなので割り切る。 */
  .bar select{font-size:10.5px;padding:0 4px;min-width:0;max-width:78px}
  .fav-only{padding:0 5px;gap:2px;max-width:52px;overflow:hidden}
  .fav-only .fav-n{width:18px}
  .count{font-size:10px}
  .count .n{font-size:14px}
}
/* 件数。絞り込んだ手応えが出るよう、数字だけを大きく藍色にする */
/* 「153軒」→「0軒」と文字数が変わると、空いた分だけ左のプルダウンが
   広がってしまう。最大幅ぶんの場所を先に確保して、動かないようにする。 */
.count{white-space:nowrap;margin-left:auto;font-size:11px;color:var(--sub);
  display:inline-flex;align-items:baseline;justify-content:flex-end;gap:1px;
  min-width:46px;flex-shrink:0}
/* スマホは margin-left:auto で右端に押し出す動きをやめる。
   これがあると、少し余白が余っただけで「件数だけ次の行」になりやすい。
   自然な並びに任せたほうが1行に収まりやすい。 */
@media (max-width:759px){ .count{margin-left:0;min-width:0} }
.count .n{font-size:17px;font-weight:900;color:var(--ai);letter-spacing:-.5px;
  font-variant-numeric:tabular-nums}

/* カード表示 */
.view{padding:10px}
.hide{display:none}

/* カード＝スマホは縦型2列（KEN さん承認のA案）。
   PC は下の @media(min-width:760px) で横並びグリッドに作り替える。 */
/* align-items:start は「隣り合う2枚の高さを揃えない」ため。
   既定の stretch だと、片方にメモがあるだけで、メモの無いもう片方まで
   1行ぶん背が高くなり中に空白ができてしまう。start にすると各カードが
   中身ぶんの高さで止まり、余った場所がただの隙間になる。 */
#cardView{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-items:start}
/* ID セレクタは .hide（クラス1つ）より優先度が高く、display:grid が
   打ち消されない。一覧・地図に切り替えてもカードが消えずに下に残るので、
   ID を含めた形で必ず打ち消す。 */
#cardView.hide{display:none}
.card{display:flex;flex-direction:column;background:#fff;border-radius:0;
  border:1.5px solid var(--dark);overflow:hidden;
  margin-bottom:0;box-shadow:2px 2px 0 var(--dark);cursor:pointer;
  transition:transform .15s,box-shadow .15s}
.card:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--dark)}
@media (hover:hover){
  .card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--dark)}
}
/* YouTube のサムネ(hqdefault)は 480x360 の 4:3 で、上下に各45pxの黒帯が
   焼き込まれている。枠を 16:9 にして object-fit:cover で切ると、切り落とされる
   量が上下それぞれ 3/32（＝45/480）とちょうど一致し、黒帯が完全に消える。
   4:3 のままだと黒帯がそのまま残り、縦も無駄に長くなる。 */
.card .th{position:relative;width:100%;height:auto;aspect-ratio:16/9;flex:none;
  border-radius:0;overflow:hidden;background:#e5e0d5}
.card .th img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
/* サムネ上の帯（動画タイトル・地域名）はスマホでは出さない。狭い列に収まらないため */
.card .tape{display:none}
.card .vt{display:none}
.card .bd{flex:1;min-width:0;display:flex;flex-direction:column;padding:7px 8px 8px}
.nm{font-size:12.5px;font-weight:800;color:var(--dark);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:0}
/* 住所は必ず1行ぶんの高さを確保する。潰れて消えないよう min-height を持たせ、
   色も薄すぎない灰にして、宿名の次に読める情報として立たせる。 */
/* 住所。クラス名を "ad" にしてはいけない。iPhone の Safari で広告ブロッカーが
   「advertisement（広告）」と誤認し、display:none で消してしまう。
   実機で住所だけが消える不具合の原因がこれだった（2026-09-01 特定）。 */
.inn-loc{font-size:10px;color:#6b6559;margin-top:1px;line-height:1.4;min-height:1.4em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 住所の下の余白は、宿名と住所の間と同じ見た目にする。
   料金の文字自身が行の高さぶんの余白を持つので、padding は 0 でちょうど揃う。 */
.card .btm{margin-top:auto;padding-top:0}
/* 料金・距離・ルート／動画ボタンの並び。
   スマホ2列とPCで見せ方が逆（横並び⇄縦積み）なので、DOM順は「料金→区切り→距離」に
   固定したうえで、PC側だけ flex-direction:column-reverse で「距離が上・料金が下」の
   従来どおりの見た目に戻す。ラベルはスマホが「距離: 」、PCが「出発地から」で
   別の言葉を使うので、2つ用意して表示・非表示を入れ替える。 */
.card .info{display:flex;align-items:baseline;gap:5px;min-width:0}
.card .km-label{display:none}
.card .km-label-sp{display:inline}
.card .km{font-size:9.5px;color:var(--ai);font-weight:700;line-height:1.3;flex:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pref-km{font-size:9.5px;color:var(--ai);font-weight:700}
/* 料金は「9,000円（1泊夕食付き）」のように長いものがある。折り返すと2行になり、
   隣の距離が押し出されて潰れるので、あふれたら…で省略して必ず1行に収める。 */
.pr{font-size:12px;font-weight:900;color:var(--dark);
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 料金は「数字／円／条件」の3つに分かれている（app.js の priceHtml）。
   スマホでは今までどおり1つの塊に見せ、条件だけ一段小さく薄くする。
   見出し「1泊のめやす」はPCだけで出す（狭い2列では場所が足りない）。 */
.pr-wrap{display:flex;align-items:baseline;gap:4px;min-width:0;overflow:hidden}
.pr-k{display:none}
.pr-y{margin-left:1px}
.pr-c{font-size:9px;font-weight:700;color:var(--sub);white-space:nowrap;margin-left:3px}
.pr.na{font-size:9.5px;font-weight:600;color:#c9c2b4}
.acts{display:flex;gap:4px;margin-top:5px}
/* ボタンはカプセル型。TOPのCTAやヘッダーの「出発地点を設定」と形を揃える */
.acts a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35em;
  text-align:center;font-size:10px;font-weight:800;padding:5px 4px;border-radius:999px;
  text-decoration:none;white-space:nowrap;border:1.2px solid var(--dark);
  box-shadow:1.5px 1.5px 0 var(--dark)}
.acts a:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--dark)}
.a1{background:var(--yellow);color:var(--dark)} .a2{background:#fff;color:var(--dark);border-color:var(--dark)}
/* 左に添える線画アイコン（ルート・地図）。ボタンの文字色をそのまま使うので、
   ボタンごとに色を用意しなくても馴染む。
   大きさは固定pxではなく em（そのボタンの文字サイズ基準）。固定pxだと、
   文字10pxのカードでは線が潰れ、文字14pxの詳細では小さすぎる。 */
.bi{flex:none;width:1.35em;height:1.35em;stroke-width:2.2}
/* 「動画」だけは YouTube マークを小さく添える。以前はボタン全体を赤くしていたが
   目立ちすぎるとの指摘で、他の2つと同じ白ボタン＋小さい赤タグに戻した。
   タグの大きさは文字サイズに連動する em にして、カード（小）でも詳細（大）でも
   自動で釣り合う大きさになる。 */
.a-video{background:#fff;color:var(--dark);border-color:var(--dark)}
.a-video .bi-video{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.6em;height:1.15em;background:#e02020;border-radius:.32em}
.a-video .bi-video svg{width:.68em;height:.68em}

/* 一覧表示 */
#listView{padding:0}
/* 貼り付いている間、背景色が本体（#efeae0）とほぼ同じで見出しに見えなかった。
   一段濃い地色と下の細い影で、面として分離させる。 */
.gh{background:#e8e2d6;border-bottom:1px solid #d5cdbb;padding:10px 14px 10px 11px;font-size:13px;font-weight:800;color:var(--dark);
  position:sticky;top:calc(var(--hdH,46px) + var(--viewsH,48px) + 41px);z-index:5;cursor:pointer;
  transition:top .25s ease;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-left:4px solid var(--ai)}          /* 県名の左に藍の縦線でリズムを出す */
.gh.open{border-left-color:var(--kin)}       /* 開いている県は金にして、今どこを見ているか分かるように */
.gh .gname{display:inline-flex;align-items:center;gap:7px;min-width:0}
/* 軒数は丸バッジに。数字が主役になり、県名の羅列が単調に見えなくなる */
.gh .gnum{display:inline-flex;align-items:center;justify-content:center;
  min-width:21px;height:21px;padding:0 6px;border-radius:11px;
  background:var(--ai);color:#fff;font-size:11px;font-weight:900;
  font-variant-numeric:tabular-nums;line-height:1}
.gh.open .gnum{background:var(--kin);color:var(--dark)}
.gh .arrow{transition:transform .15s;font-size:10px;color:var(--sub)}
.gh.open .arrow{transform:rotate(90deg)}
.grp{display:none}
.grp.open{display:block}
/* flex-wrap は自分メモを「下の行」へ落とすため。無いと右端に4つ目の列として並ぶ */
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:9px 12px;background:#fff;
  border-bottom:1px solid #f0ede8;cursor:pointer;transition:transform .12s,background .12s}
.row:active{transform:scale(.98);background:#f7f4ee}
@media (hover:hover){.row:hover{background:#f7f4ee}}
.row .rt{width:64px;height:36px;border-radius:0;flex-shrink:0;object-fit:cover;background:#d8d4cd;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  border:2px solid var(--dark)}
.row .rb{flex:1;min-width:0}
.row .rn{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .ra{font-size:10.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 料金と距離を1行にまとめる */
.row .rmeta{display:flex;gap:8px;align-items:baseline;margin-top:2px;
  overflow:hidden;white-space:nowrap}
.row .rmeta .pr{font-size:11.5px;color:var(--dark);font-weight:800}
.row .rmeta .pr.na{font-size:10px}
.row .rkm{font-size:10px;color:var(--ai);font-weight:700}
/* ルート・動画ボタン */
.row .racts{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.row .racts a{display:inline-flex;align-items:center;justify-content:center;gap:.35em;
  text-align:center;font-size:10px;font-weight:800;padding:4px 12px;
  border-radius:999px;text-decoration:none;white-space:nowrap;border:1.2px solid var(--dark);
  box-shadow:1.5px 1.5px 0 var(--dark)}
.row .racts a:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--dark)}

/* 地図表示 */
#mapView{padding:0}
#map{width:100%;height:calc(100vh - var(--hdH,46px) - var(--viewsH,48px));min-height:320px}
/* 地図ページ：絞り込みと注記を隠し、ページ自体を固定してヘッダーがずれないようにする */
body.map-open .bar,
body.map-open .ft{display:none}
body.map-open{overflow:hidden;height:100vh}
/* 詳細を開いている間は裏のページを動かさない（app.js が sheet-open を付け外しする） */
body.sheet-open{overflow:hidden}
.leaflet-container{background:#dfe6e2;font:inherit}
.pin{background:var(--ai);width:14px;height:14px;border-radius:50%;
  border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pin.home{background:var(--pink);width:18px;height:18px}

/* 詳細シート */
.sheet{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end}
.sheet.hide{display:none}  /* .hide より後に書くルールに負けないよう明示 */
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
/* overscroll-behavior:contain は、詳細の中を端まで動かしたときに、
   その勢いが後ろのページへ伝わって一緒に動く（＝引っ張って再読み込み）のを防ぐ。 */
.sheet-body{position:relative;width:100%;max-height:88vh;overflow-y:auto;
  overscroll-behavior:contain;background:var(--paper);
  border-radius:16px 16px 0 0;padding:14px 16px calc(22px + env(safe-area-inset-bottom))}
.sheet-x{position:absolute;right:12px;top:14px;background:#f2efe9;color:var(--dark);
  border:0;border-radius:999px;font-weight:700;
  padding:5px 12px;font-size:11.5px;cursor:pointer;z-index:2}
/* 上の細い棒。下にすべらせて閉じられることを見た目で伝える */
.sheet-grab{width:40px;height:4px;background:#d8d2c6;border-radius:2px;margin:0 auto 10px}
.sheet-body h2{font-size:19px;font-weight:900;color:var(--dark);padding-right:70px;margin-bottom:4px}

/* 写真と、その右下に重ねるお気に入りボタン */
.sheet-photo{position:relative;width:100%;max-width:340px;margin:0 auto}
.sheet-photo .fav{position:absolute;right:10px;bottom:10px;margin:0;padding:0;
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:2px solid var(--dark);box-shadow:2px 2px 0 var(--dark);
  font-size:23px;line-height:1;display:flex;align-items:center;justify-content:center}
.sheet-photo .fav::before{inset:0}   /* 当たり判定を広げる指定は、ここでは不要 */
.sheet-photo .fav:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--dark)}

/* 料金・距離を大きな数字のカードで見せる */
.fig-row{display:flex;gap:8px;margin-top:12px;align-items:stretch}
/* 料金が「9,000円（1泊夕食付き）」のように長いと2行になり、狭い画面では
   隣のカードとの高さの差が目立つ。stretch で高さを揃え、中身は上寄せにする。 */
.fig{flex:1;min-width:0;background:#fff;border:2px solid var(--dark);
  box-shadow:2px 2px 0 var(--dark);padding:8px 10px;
  display:flex;flex-direction:column;justify-content:flex-start}
.fig-k{font-size:9.5px;color:var(--sub);font-weight:700;line-height:1.4}
.fig-v{font-size:18px;font-weight:900;letter-spacing:-.02em;line-height:1.3;
  color:var(--dark);word-break:break-all}
.fig-v.fig-km{color:var(--ai)}
.fig-v.none{color:#c9c2b4;font-size:14px}
/* 詳細のサムネは全画面まで大きくせず、カードより少し大きい程度に留める（通信量の節約） */
/* 角丸は 0（板もの＝カード・写真）／8px（入力欄）／999px（ボタン・タグ）の
   3種類だけに固定している。写真はカードと同じく角ばらせて板ものに揃える。 */
.sheet-th{display:block;width:100%;max-width:340px;aspect-ratio:16/9;object-fit:cover;
  border-radius:0;border:2px solid var(--dark);margin:0 auto}
/* ルート・動画・地図で開く を横1列に並べる */
.sheet-acts{display:flex;gap:6px;margin-top:12px}
.sheet-acts a{flex:1;padding:9px 6px;font-size:11.5px;box-shadow:2px 2px 0 var(--dark)}
/* スマホは指で押す場面なので、縦幅を今の1.5倍ほど（38px→約57px）にして
   お年寄りでも押しやすくする。PC はマウスなので変えない。 */
@media (max-width:759px){
  .sheet-acts a{padding:18px 6px}
}
.sheet-body .note{font-size:11.5px;color:var(--sub);margin:8px 0 12px}
/* 出発地ダイアログの補足（通信の説明）は一段小さく薄くして、
   主となる説明文と区別する */
.sheet-body .note-sub{font-size:10.5px;opacity:.8;margin-top:-6px}
.sheet-body .note-sub a{text-decoration:underline}
.dl{margin:12px 0;font-size:13px}
.dl div{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.dl dt{width:5.2em;flex-shrink:0;color:var(--sub);font-size:12px}
.dl dd{flex:1;min-width:0;word-break:break-word}
/* 詳細の中のリンク（公式サイトなど）。
   全体の a は色を継承し下線も消しているため、押せると分からなかった。
   ここだけ青＋下線に戻す。指で押しやすいよう上下に余白も持たせる。 */
.dl dd a{color:var(--ai);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px;
  word-break:break-all;padding:2px 0;display:inline-block}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tag{font-size:10.5px;background:#eaeff5;color:var(--ai);font-weight:700;padding:4px 10px;border-radius:999px}
#homeIn{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;
  font-size:16px;background:#fff}
.btn-main{width:100%;margin-top:10px;padding:13px;background:var(--ai);color:#fff;
  border:2.5px solid var(--dark);border-radius:999px;font-size:14px;font-weight:800;cursor:pointer;
  box-shadow:var(--shadow-sm)}
.btn-sub{width:100%;margin-top:8px;padding:9px;background:none;color:var(--sub);
  border:0;font-size:12px;text-decoration:underline;cursor:pointer}
.msg{font-size:12px;margin-top:9px;min-height:1.4em}
.msg.ng{color:#b0392b} .msg.ok{color:#2c6b4a}
.ft{padding:16px 14px 26px;font-size:10.5px;color:var(--sub);text-align:center;line-height:1.8}
/* 「該当する宿がありません」の箱。
   カード表示・一覧表示はグリッド（PC4列・スマホ2列）なので、そのままだと
   1列目のマスにはめ込まれ、画面の左寄りに出てしまう（実測：画面の中心が
   700pxなのに空表示の中心が257px）。全列ぶんを使うよう指定して中央に置く。 */
.empty{padding:52px 24px;text-align:center;grid-column:1 / -1}
.empty-mark{display:block;width:42px;height:42px;margin:0 auto 12px;color:#b9b1a2}
.empty-t{font-size:14.5px;font-weight:800;color:var(--dark)}
.empty-s{font-size:12px;color:var(--sub);margin-top:4px}
.empty-reset{margin-top:16px;font-size:12.5px;font-weight:800;color:var(--dark);
  background:#fff;border:2px solid var(--dark);border-radius:20px;padding:9px 20px;
  cursor:pointer;box-shadow:2px 2px 0 var(--dark);
  transition:transform .15s,box-shadow .15s}
.empty-reset:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--dark)}
/* キーボードで動かしたときだけ、金の枠を出す。
   指やマウスでは出ないので見た目は変わらない。既定の青い枠は世界観から浮くため。 */
:focus-visible{outline:2px solid var(--kin);outline-offset:2px}
/* サムネの枠内は overflow:hidden で枠が切れるので、内側に出す */
.card .th :focus-visible,.sheet-photo :focus-visible{outline-offset:-3px}
@media (hover:hover){
  .empty-reset:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--dark)}
}


/* ============================================================
   カードをカラフルに（順番に色を巡回。地味さの解消）
   ============================================================ */
/* スマホの横並びカードだけ色を巡回させる（PCの正方形カードは白地） */
/* スマホ：カード・一覧とも白地に統一（色の巡回は廃止） */
@media (max-width:759px){
  #cardView .card{background:#fff}
  #listView .row{background:#fff}
}

/* ============================================================
   PC（760px以上）：カードを格子に並べて横の空白をなくす
   スマホは今までどおり1列の横並びカードのまま
   ============================================================ */
@media (min-width:760px){
  .view{padding:16px;max-width:1200px;margin:0 auto}
  .views,.bar{padding-left:16px;padding-right:16px}
  .views-seg,.bar{max-width:1200px;margin:0 auto}
  .views{justify-content:center}

  /* カード＝グリッド（サムネ上・情報下） */
  #cardView{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
  #cardView.hide{display:none}   /* IDの優先度が .hide に勝つため明示して打ち消す */
  /* 角ばった正方形カード（宿名→住所→距離→料金の順。ボタンは右下） */
  /* 高さは中身に合わせる。以前は aspect-ratio:1/1 で正方形に固定していたが、
     列が4つになると幅＝高さが中身より15px足りず、overflow:hidden で
     ルート・動画ボタンが切り落とされていた（メモを入れるとさらに切れた）。
     align-items:start と組で、隣のカードに高さを引っぱられず、
     余った分はそのまま隙間になる（スマホの2列と同じ扱い）。 */
  .card{display:flex;flex-direction:column;gap:0;margin-bottom:0;padding:0;overflow:hidden;
    background:#fff;border:1.5px solid var(--dark);border-radius:0;
    box-shadow:3px 3px 0 rgba(20,20,20,.9);
    transition:transform .15s,box-shadow .15s}
  @media (hover:hover){
    .card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(20,20,20,.9)}
  }
  .card:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(20,20,20,.9)}
  .card .th{width:100%;height:auto;aspect-ratio:16/9;border-radius:0;border:0;flex:none}
  /* 写真の下にあった細い帯2本（動画タイトル10px灰・黒帯7.5px）は出さない。
     合わせて35px＝カード高の11%を、読めない大きさの文字が占めていた。
     動画タイトルは詳細画面で読めるので、カードでは宿名と料金を主役にする。 */
  .card .vt{display:none}
  .card .tape{display:none}
  .card .bd{padding:11px;flex:1;min-height:0;display:flex;flex-direction:column}
  .card .nm{font-size:15px;font-weight:900;line-height:1.3;margin-top:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .inn-loc{font-size:10.5px;margin-top:2px;line-height:1.45;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .fav{font-size:18px;margin-right:0}
  /* 料金・距離とボタンを同じ行に置く。ボタンを2/3幅で右へ寄せると左が空くので、
     そこに料金と距離を入れて1行ぶん減らす。線は引かない（表組みに見えるため）。 */
  .card .btm{margin-top:11px;padding-top:0;border-top:0;
    display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
  /* 左の柱：料金の下に距離。右のボタンと下端を揃える */
  .card .info{flex:1;min-width:0;display:flex;flex-direction:column;
    align-items:flex-start;justify-content:flex-end;gap:4px}
  /* 距離があるときは数字だけのチップにする（「距離:」は場所を食うだけ）。
     出発地が未設定のときだけ「距離: -」と出し、何の欄か分かるようにする。 */
  .card .km-label{display:none}
  .card .km-label-sp{display:none}
  .card .km.none .km-label-sp{display:inline}
  .card .km.none{font-size:10px}
  .card .km.none,.card .km.none .kmv{color:#9a9384}
  /* 距離はチップをやめ、藍の文字だけにする。囲みが2つ並ぶと表組みに見えるため。
     単位の km は一段小さくして、数字を読み取りやすくする。 */
  .card .km{flex:none;font-size:10.5px;font-weight:800;color:var(--ai);line-height:1;
    background:none;border-radius:0;padding:0;opacity:.8}
  .card .kmv{font-weight:800;color:var(--ai)}
  .card .kmu{font-size:9px}
  /* 料金は大きさで階層をつける。太字の黒を1つ置くだけだと値札・料金表に見える。
     数字を主役にし、「円」と条件は小さく添えて、金額を図版として見せる。 */
  .card .pr-wrap{display:block;min-width:0}
  .card .pr-k{display:none}   /* 見出しは省く。1行ぶんを詰めるため */
  .card .pr{display:flex;flex-wrap:wrap;align-items:baseline;font-size:inherit;
    white-space:nowrap;overflow:visible}
  /* 黒の太字だと値札のように主張しすぎるため、距離と同じ藍に落として
     落ち着かせる（40〜60代の見やすさは大きさ21pxのまま保つ）。 */
  .card .pr-n{font-size:21px;font-weight:900;letter-spacing:-.03em;line-height:1;
    color:var(--ai)}
  .card .pr-y{font-size:10px;font-weight:700;color:var(--ai);opacity:.75;margin-left:2px}
  /* 条件（1泊夕食付き など）は数字の下の行へ落とす。横に並べると
     幅が足りず、数字か条件のどちらかが …で切れてしまう */
  .card .pr-c{flex-basis:100%;font-size:9px;font-weight:700;color:var(--sub);
    white-space:nowrap;margin:2px 0 0}
  .card .pr.na{font-size:12px;font-weight:600;color:#b3ac9f;display:block}
  /* ボタンは幅を約2/3にして右へ寄せる（左の空きに料金と距離が入る） */
  .card .acts{gap:6px;flex:none;width:64%;margin-top:0}
  /* 高さ24px は指でもマウスでも押しにくかった。上下の余白を増やして約36pxにする */
  .card .acts a{font-size:11.5px;font-weight:800;padding:9px 2px;border-radius:999px;
    border:1.5px solid var(--dark);letter-spacing:.03em;line-height:1.4;
    box-shadow:2px 2px 0 var(--dark)}
  .card .a1{background:var(--yellow);color:var(--dark)}
  .card .a2{background:#fff;color:var(--dark);border-color:var(--dark)}

  /* 一覧＝サムネ小さめの横長行を2列。カードより多くの宿をひと目で見渡せる形 */
  #listView{max-width:1200px;margin:0 auto;display:grid;
    grid-template-columns:repeat(2,1fr);gap:10px 16px;padding:0 16px 10px}
  #listView.hide{display:none}   /* IDの優先度が .hide に勝つため明示して打ち消す */
  .grp{display:none;grid-column:1 / -1}
  .grp.open{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;gap:10px 16px}
  .gh{grid-column:1 / -1;border-radius:8px;margin-top:6px;font-size:15px;padding:12px 16px}
  .row{border:2.5px solid var(--dark);border-radius:8px;
    box-shadow:3px 3px 0 var(--dark);padding:8px 10px;margin-bottom:0;
    transition:transform .15s,box-shadow .15s}
  @media (hover:hover){
    .row:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dark)}
  }
  .row:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--dark)}
  .row{background:#fff}
  .row .rt{width:84px;height:48px}
  .row .rn{font-size:14.5px}
  .row .racts a{font-size:10.5px;padding:5px 12px}
}
@media (min-width:1100px){
  #cardView{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1320px){
  #cardView{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:760px){
  /* PCでは詳細を全幅に広げず、画面中央のパネルとして出す */
  .sheet{align-items:center;justify-content:center}
  .sheet-body{max-width:560px;max-height:82vh;border-radius:14px;
    border:2.5px solid var(--dark);box-shadow:6px 6px 0 var(--dark)}
}

/* ハンバーガーの記号（≡ ⇄ ×）を、切り替わるときに軽く回す */
.navbtn{transition:transform .22s ease}
.navbtn[aria-expanded="true"]{transform:rotate(90deg)}

/* 「動きを減らす」設定の方には動きを出さない */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;
    transition-duration:.001s !important}
}

/* ---------- 画面右端の上下ジャンプ（「く」の字） ----------
   主にスマホで使う。カードや一覧の右端の見た目を邪魔しないよう、
   色は付けず白っぽい半透明にとどめ、普段は薄く置いておく。
   地図表示のときは不要なので隠す。

   タップして何度もジャンプすると位置がずれる不具合の原因: iOS Safari は
   スクロール中にアドレスバーが出没し、そのたびに「レイアウトの高さ」が
   変わる。top:50% はその高さに対する割合なので、出没のたびに数字が動く。
   svh（small viewport height＝アドレスバーが出ている最小の高さ）を使うと
   出没に関係なく常に同じ値になる。対応ブラウザでは svh を、
   古いブラウザでは通常の % のまま使う（無効な値は無視されるだけで安全）。 */
/* 位置は画面のちょうど真ん中（50%）だと、実機では画面下のバーのぶん
   「上寄り」に見える。指の届きやすさも考えて 62% まで下げている。 */
.jump{position:fixed;right:4px;top:62%;top:62svh;transform:translateY(-50%);
  z-index:1050;display:flex;flex-direction:column;gap:9px;pointer-events:none}
body.map-open .jump{display:none}
.jbtn{pointer-events:auto;position:relative;width:30px;height:30px;padding:0;
  border:1px solid rgba(255,255,255,.6);border-radius:50%;
  background:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:.38;cursor:pointer;transition:opacity .15s ease,background .15s ease}
/* 「く」の字＝正方形の2辺だけを残して回す（画像を使わない） */
.jbtn::before{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-left:2px solid rgba(55,50,42,.72);border-top:2px solid rgba(55,50,42,.72)}
#jumpUp::before{transform:translate(-50%,-25%) rotate(45deg)}
#jumpDn::before{transform:translate(-50%,-75%) rotate(225deg)}
.jbtn:active{opacity:1;background:rgba(255,255,255,.75)}
@media (hover:hover){ .jbtn:hover{opacity:.92;background:rgba(255,255,255,.7)} }
/* PC は画面が広く、端に寄せても押しやすいので少しだけ大きくする */
@media (min-width:760px){ .jbtn{width:36px;height:36px} }

/* ---------- 表示の切り替えアニメーション ----------
   カード／一覧に切り替えた瞬間、パッと出るのではなく
   軽く下から立ち上がって見えるようにする。
   表示のたびに JS が .anim を付け直して再生させる（0.26秒）。 */
@keyframes viewIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
#cardView.anim, #listView.anim{animation:viewIn .26s cubic-bezier(.2,.7,.3,1) both}
/* 中身のカード・行も少しずつ遅らせて出す（速すぎず、待たされない範囲で） */
@keyframes itemIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
#cardView.anim .card, #listView.anim .gh{
  animation:itemIn .3s cubic-bezier(.2,.7,.3,1) both}
#cardView.anim .card:nth-child(1),#listView.anim .gh:nth-child(1){animation-delay:.02s}
#cardView.anim .card:nth-child(2),#listView.anim .gh:nth-child(2){animation-delay:.05s}
#cardView.anim .card:nth-child(3),#listView.anim .gh:nth-child(3){animation-delay:.08s}
#cardView.anim .card:nth-child(4),#listView.anim .gh:nth-child(4){animation-delay:.11s}
#cardView.anim .card:nth-child(5),#listView.anim .gh:nth-child(5){animation-delay:.14s}
#cardView.anim .card:nth-child(6),#listView.anim .gh:nth-child(6){animation-delay:.17s}
#cardView.anim .card:nth-child(n+7),#listView.anim .gh:nth-child(n+7){animation-delay:.2s}

/* ---------- 宿の詳細（シート）の出かた ----------
   背景がすっと暗くなり、本体は下からせり上がる。
   PC は中央のパネルなので、少し小さい状態から等倍に戻す。 */
@keyframes sheetBgIn{ from{opacity:0} to{opacity:1} }
@keyframes sheetUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}
/* 開く動きは「開いた瞬間だけ」に限定する（.opening は JS が 0.32 秒で外す）。
   以前は .sheet:not(.hide) に付けていたため、指を離して dragging を外した
   瞬間にアニメーションが再生され直し、画面がチカッと光っていた
   （実測：不透明度が 1 → 0.23 に落ちてから戻る）。
   また fill-mode:both で終了状態を保ち続けると、アニメーションは style 指定より
   強いため、指でずらす transform が無視されてしまう（実測で移動量0px）。 */
.sheet.opening .sheet-bg{animation:sheetBgIn .22s ease both}
.sheet.opening .sheet-body{animation:sheetUp .3s cubic-bezier(.2,.7,.3,1) both}
.sheet.dragging .sheet-body,
.sheet.closing .sheet-body{animation:none}
/* 閉じるときは背景も一緒に薄くする。本体が落ちきるのに合わせて 0.3 秒。
   opacity は JS が1フレーム遅らせて 0 にする。ここで一緒に指定すると、
   アニメーション解除と同時の変更になって、動かず一瞬で消えてしまう。 */
.sheet.closing .sheet-bg{animation:none;transition:opacity .3s ease}
@media (min-width:760px){
  @keyframes sheetPop{
    from{opacity:0;transform:translateY(12px) scale(.97)}
    to{opacity:1;transform:none}
  }
  .sheet.opening .sheet-body{animation:sheetPop .28s cubic-bezier(.2,.7,.3,1) both}
}

/* 「動きを減らす」設定の方には動かさない */
@media (prefers-reduced-motion:reduce){
  #cardView.anim,#listView.anim,
  #cardView.anim .card,#listView.anim .gh,
  .sheet:not(.hide) .sheet-bg,.sheet:not(.hide) .sheet-body{animation:none !important}
}

/* フッターは2行だけ。1行目＝利用者向け、2行目＝出典（規約上の表示義務）。 */
.ft-main{font-weight:700}
.ft-src{margin-top:6px;font-size:9.5px;opacity:.75}
.ft-sep{margin:0 7px;opacity:.5}

/* 地図上の「出発地」の吹き出し。地図の邪魔をしないよう小さく控えめに */
.leaflet-tooltip.home-tip{background:var(--dark);color:#fff;border:0;
  font-size:10px;font-weight:800;padding:3px 7px;border-radius:10px;box-shadow:none}
.leaflet-tooltip.home-tip::before{border-top-color:var(--dark)}

/* ---------- サムネの拡大ズーム（カード・一覧） ----------
   触れた瞬間、画像だけがふわっと拡大する。カード自体のホバー演出
   （浮き上がる動き）と重ねて、写真に命が入るようにする。 */
@media (hover:hover){
  .card:hover .th img{transform:scale(1.08)}
  .row:hover .rt{transform:scale(1.08)}
}
.card:active .th img,.row:active .rt{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .card .th img,.row .rt{transition:none}
}

/* ---------- 休業・閉業バッジ ---------- */
/* カード：サムネイルの右上に重ねる小さな角丸ボックス。
   .th は overflow:hidden（サムネの縁を揃えるため）なので、枠からはみ出させず
   内側に収める。目立たせすぎないよう控えめなピンクにする。 */
.closed-badge{position:absolute;top:4px;right:4px;z-index:2;
  background:rgba(20,20,20,.78);color:#fff;border:0;
  border-radius:999px;padding:2px 7px;font-size:9px;font-weight:800;
  line-height:1.4;white-space:nowrap;pointer-events:none}
/* 一覧・詳細：文字だけの小さなタグとして、距離のすぐ下に置く */
.closed-tag{display:inline-block;margin-top:4px;
  background:rgba(20,20,20,.78);color:#fff;border:0;
  border-radius:999px;padding:2px 8px;font-size:10px;font-weight:800;
  line-height:1.4;white-space:nowrap}
@media (min-width:760px){
  .closed-badge{top:6px;right:6px;font-size:10px;padding:3px 9px}
}

/* ---------- 自分メモ ----------
   保存先は localStorage の shinya.memo だけ。サーバーへは送らない。
   カード・一覧では、メモがあるときだけ1行ぶんの横長ボックスを足す。 */
.memo-line{width:100%;background:#fff8e6;border-top:1.5px solid var(--dark);
  padding:5px 8px;font-size:10px;font-weight:700;color:#6b5320;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memo-line::before{content:'メモ ';font-weight:800;color:var(--kin)}
.row .memo-line{border-top:1px solid var(--kin);margin:2px -12px -9px;padding:5px 12px;
  font-size:10.5px}
@media (min-width:760px){
  .memo-line{font-size:11px;padding:6px 10px}
  .row .memo-line{margin:2px 0 0;border-radius:0 0 8px 8px}
}

/* 詳細画面のメモ欄。メモの有無にかかわらず常に出す（処理を単純にするため） */
.memo-row dd{display:flex;align-items:center;gap:8px}
/* font-size は 16px から下げないこと。iOS Safari は 16px 未満の入力欄を
   タップすると画面を勝手に拡大する（小さくて読めないだろうという親切機能）。
   viewport に maximum-scale=1 を足せば止められるが、それだと利用者が
   自分でピンチして拡大することもできなくなるため、この方法は採らない。 */
.memo-in{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:8px;
  background:#fff8e6;padding:7px 9px;font-size:16px;color:var(--text);
  font-family:inherit}
.memo-in::placeholder{color:#b3a98f;font-weight:400}
.memo-in:focus{outline:none;border-color:var(--ai);background:#fff}
.memo-count{flex-shrink:0;font-size:10px;color:var(--sub);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ---------- お気に入り ----------
   保存先は localStorage の shinya.fav だけ。サーバーへは送らない。
   ★は絵文字ではなく記号（U+2605 / U+2606）を使うので、端末ごとの絵柄差が出ない。 */
.nm-row{display:flex;align-items:flex-start;gap:6px;min-width:0}
.nm-row>.nm,.nm-row>.rn,.nm-row>h2{flex:1;min-width:0}
/* 画面右端に固定されたジャンプボタン（.jbtn）と重なると★が押せなくなる。
   カードが2列になり★の位置が内側へ寄ったため、余白を 26px から 6px に詰めた。
   320/360/390/430px の4通りで 2px まで試し、320px の 2px でだけ1個が
   覆われたため、余裕をみて 6px を採用（4通りとも覆われた星0個）。 */
.fav{flex-shrink:0;border:0;background:none;cursor:pointer;padding:0 2px;
  margin-right:6px;
  font-size:17px;line-height:1.15;color:#c4bdae;
  transition:color .15s,transform .15s}
.fav.on{color:var(--kin)}
.fav:active{transform:scale(1.25)}
@media (hover:hover){.fav:hover{color:var(--kin)}}
/* 指で押せる大きさを確保する（見た目は変えず、当たり判定だけ広げる） */
.fav::before{content:'';position:absolute;inset:-9px;}
.fav{position:relative}

/* 絞り込みバーのトグル。押されている間は藍で塗る */
.fav-only{flex-shrink:0;height:28px;border:2px solid var(--dark);border-radius:999px;
  background:#fff;color:var(--sub);font-size:11.5px;font-weight:800;
  padding:0 10px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;transition:.15s}
/* スマホは横幅が厳しいので「お気に入り」の文字を隠し、★と数字だけにする。
   件数まで含めてプルダウン2つと1行に収めるための処置。PCは文字を残す。 */
@media (max-width:759px){ .fav-only-t{display:none} }
.fav-only.on{background:var(--ai);color:#fff;border-color:var(--ai)}
/* 件数のバッジ。0〜153 のどの桁数でも同じ幅にして、ボタンが伸び縮みしないようにする */
.fav-only .fav-n{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:17px;padding:0;border-radius:9px;
  background:var(--line);color:var(--dark);font-size:10px;font-weight:900;
  font-variant-numeric:tabular-nums}
.fav-only.on .fav-n{background:var(--kin);color:var(--dark)}

/* 詳細シートの宿名の横に置く★は一回り大きく。シートは前面なので逃がす必要はない */
.sheet .nm-row .fav{font-size:22px;margin-right:0}
/* PCは画面が広く、ジャンプボタンが本文にかからないので余白を戻す */
@media (min-width:760px){ .fav{margin-right:4px} }

/* ---------- 文字の大きさを変えるボタン（全ページ共通・nav.js が差し込む） ----------
   目の悪い方向け。押すたびに 小 → 中 → 大 と順ぐりに変わり、大の次は小へ戻る。
   「A 標準」のような2段表示はボタンが大きくなって逆に分かりにくいとの指摘で、
   枠なし・漢字1文字だけのシンプルな見た目にした。 */
.zoombtn{flex-shrink:0;background:transparent;border:0;color:var(--yellow);
  padding:4px 6px;cursor:pointer;line-height:1;font-family:inherit;
  font-size:15px;font-weight:900}
.zoombtn:active{transform:translateY(1px)}
@media (hover:hover){ .zoombtn:hover{opacity:.8} }

/* ---------- ヘッダーのロゴ（家のアイコン＋文字） ----------
   ヘッダーが狭いと「SHINYA MAP」が…で切れて、押してもどこへ行くのか
   分からなくなる。家の絵を添えて、文字が切れてもホームへ戻ると分かるようにする。
   絵文字は使わず、自前のSVGで描いている（端末ごとの絵柄差が出ないため）。 */
.hd-logo,.topbar-logo{display:inline-flex;align-items:center;gap:6px;min-width:0}
.logo-home{width:1.25em;height:1.25em;flex:none}
/* 文字が入りきらないときは、家の絵だけ残して文字側を…で切る */
.logo-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* 地図ライブラリを取り寄せている間の案内（遅延読み込みのため） */
.map-msg{padding:32px 16px;text-align:center;color:var(--muted);font-size:14px;line-height:1.7}

/* ---------- 直前にルート/動画ボタンを押した宿の枠 ----------
   ブラウザバックで戻って来た時に、どの宿を押していたか一目で分かるようにする。
   常に1件だけに付く（別の宿を押すとそちらへ移る）。
   サイトの基本色（藍・金・錆色）とは別の緑を使う。「今ここ」という一時的な
   状態を示す印なので、地色に近い藍・金だと目立たず判別が付きにくいため。
   カードは元々「黒枠＋黒い立体影」のデザインなので、border を上書きせず
   box-shadow で緑の輪を1本足す形にした（既存の見た目を壊さない）。 */
.card.last-tap{box-shadow:0 0 0 3px #7fae4f,2px 2px 0 var(--dark)}
.row.last-tap{box-shadow:inset 0 0 0 3px #7fae4f;border-radius:8px}