/* ご当地データ 地図 v1.0
   表づくりの決めごと準拠：文字はテーマ本文と同じ大きさ／詳細度の罠対策でセレクタに要素名を付ける */

.gtd.gtd-map{ margin:1.4em 0; font-size:1rem; line-height:1.5; }

/* ---- 進捗タイル（名城 42/199）＝種類の表示スイッチ ----
   押すとその種類を地図から消す。地色はピンの色の淡い版、
   非表示のときは訪問済みピンと同系統のグレーに落とす */
.gtd-map .gtdm-prog{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.gtd-map .gtdm-pg{
	/* ★ min-width:0 が無いと、中身（長いイベント名）より狭くならず、
	   そのタイルだけ1行を独占して列が1段増える＝地図がそのぶん下がる */
	position:relative; flex:1 1 140px; min-width:0; box-sizing:border-box; text-align:left; font:inherit;
	background:#f6f8fa; border:1px solid #d8dce3; border-left-width:4px;
	border-radius:8px; padding:8px 10px; color:#333;
}
/* 押せると気づかれないのが最大の失敗（表づくりの決めごと）。
   カーソル・浮き・状態の文字の3つで示す */
.gtd-map button.gtdm-pg{ cursor:pointer; transition:box-shadow .15s, transform .05s; }
.gtd-map button.gtdm-pg:hover{ box-shadow:0 1px 6px rgba(31,35,40,.16); }
.gtd-map button.gtdm-pg:active{ transform:translateY(1px); }
.gtd-map button.gtdm-pg:focus-visible{ outline:2px solid #1d4ed8; outline-offset:2px; }
.gtd-map .gtdm-pgs{
	position:absolute; top:7px; right:9px; font-size:.68em; font-weight:600;
	color:#57606a; letter-spacing:.02em;
}
.gtd-map .gtdm-pg.is-off .gtdm-pgs{ color:#a0a6ac; }
/* 右上の「表示中／非表示」の下に名前が潜り込まないよう余白を確保する */
.gtd-map .gtdm-pg b{ display:block; font-size:.78em; color:#57606a; font-weight:600; padding-right:4.2em; }
.gtd-map .gtdm-pg.is-off b{ color:#a0a6ac; }
.gtd-map .gtdm-num{ font-size:1.3em; font-weight:700; font-variant-numeric:tabular-nums; }
.gtd-map .gtdm-den{ font-style:normal; font-size:.85em; color:#57606a; }
.gtd-map .gtdm-pg.is-off .gtdm-den{ color:#a0a6ac; }
.gtd-map .gtdm-bar{
	display:block; height:4px; background:#d8dce3; border-radius:2px; margin-top:5px; overflow:hidden;
}
.gtd-map .gtdm-bar > i{ display:block; height:100%; background:#333; border-radius:2px; transition:width .2s; }

/* 表の絞り込みとタイルの両方を通した結果が0件のとき */
.gtd-map p.gtdm-none{
	position:absolute; inset:0; margin:0; display:none;
	align-items:center; justify-content:center; text-align:center; line-height:1.7;
	border-radius:10px; background:rgba(255,255,255,.82); color:#57606a;
	font-size:.92em; pointer-events:none; z-index:450;
}
.gtd-map p.gtdm-none.is-on{ display:flex; }

/* ---- 操作 ---- */
/* ★ 地図の上の帯は「地図を見ながら押すもの」だけ。横幅を詰めて、
   390pxでも折り返しを1回に収める（折り返すたびに地図が下がる） */
.gtd-map .gtdm-tools{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 8px; }
.gtd-map button.gtdm-btn, .gtd-map a.gtdm-btn, .gtd-map select.gtdm-tile{
	font:inherit; font-size:.85em; padding:7px 10px; min-height:38px;
	border:1px solid #d8dce3; background:#fff; border-radius:8px; cursor:pointer; color:#333;
}
.gtd-map .gtdm-tools select.gtdm-tile{ max-width:9.5em; }

/* ★ 地図の下は縦に積む。ボタンと、そのボタンで開く中身を隣り合わせにする。
   幅いっぱい・大きめの字にしているのは、ここに機能があると気づいてもらうため
   （実測で滞在23秒。横に並んだ小さなボタンは読まれないまま終わる） */
.gtd-map .gtdm-stack{ margin:10px 0 0; }
.gtd-map .gtdm-stack .gtdm-wide{
	display:block; width:100%; box-sizing:border-box; text-align:left;
	margin:0 0 8px; padding:13px 14px; min-height:48px;
	font-size:.98em; font-weight:700; color:#333;
	border:1px solid #ccd2da; border-radius:8px; background:#f9fafb; cursor:pointer;
}
.gtd-map .gtdm-stack .gtdm-wide::before{
	content:'▸'; display:inline-block; margin-right:8px; color:#8b3a3a; transition:transform .15s;
}
.gtd-map .gtdm-stack button.gtdm-wide.is-on::before{ transform:rotate(90deg); }
.gtd-map .gtdm-stack button.gtdm-wide.is-on{ background:#f1f3f6; border-color:#b9c0ca; color:#333; }
.gtd-map .gtdm-stack .gtdm-wide:hover{ background:#f1f3f6; }
/* 中身は、それを開いたボタンの真下。上の余白を詰めて1つの塊に見せる */
.gtd-map .gtdm-sharehost > .gtdm-sharebox,
.gtd-map .gtdm-cardhost  > .gtdm-cardbox{ margin:-2px 0 10px; }
.gtd-map .gtdm-routehost > .gtdm-routebox{ margin:0 0 8px; }
.gtd-map button.gtdm-btn:hover, .gtd-map a.gtdm-btn:hover{ background:#f5f7fa; }
.gtd-map button.gtdm-btn.is-on{ background:#333; color:#fff; border-color:#333; }
.gtd-map a.gtdm-btn{ display:inline-block; text-decoration:none; line-height:22px; }
/* この機能の価値は全部このボタンに乗っているので、最初から目立たせる */
.gtd-map button.gtdm-unv{ border-color:#333; font-weight:700; }

/* ---- 凡例 ---- */
.gtd-map .gtdm-legend{
	display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
	font-size:.8em; color:#57606a; margin:0 0 8px;
}
.gtd-map .gtdm-legend span{ display:flex; align-items:center; gap:5px; }
.gtd-map .gtdm-legend span.is-off{ opacity:.45; text-decoration:line-through; }
.gtd-map .gtdm-legend i{ display:inline-block; flex:0 0 auto; }
.gtd-map .gtdm-l1{ width:14px; height:14px; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.gtd-map .gtdm-l1.is-ci{ border-radius:50%; }
.gtd-map .gtdm-l1.is-sq{ border-radius:2px; }
.gtd-map .gtdm-l1.is-di{ width:11px; height:11px; border-radius:1px; transform:rotate(45deg); margin:0 2px; }
.gtd-map .gtdm-ln{
	width:16px; height:16px; background:#6b21a8;
	clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.gtd-map .gtdm-lc{ width:16px; height:16px; border-radius:50%; border:2.5px solid #c0392b; background:rgba(192,57,43,.10); }
/* 現在地。地図に出る青い点と同じ見た目にする */
.gtd-map .gtdm-lme{
	width:12px; height:12px; border-radius:50%; background:#1d4ed8; border:2.5px solid #fff;
	box-shadow:0 0 0 1px rgba(29,78,216,.6);
}
.gtd-map .gtdm-lhere small{ font-size:.92em; color:#8a929b; }

/* ---- 地図 ---- */
.gtd-map .gtdm-wrap{ position:relative; }
.gtd-map .gtdm-canvas{
	height:62vh; min-height:360px; border:1px solid #d8dce3; border-radius:10px; z-index:0;
}
/* ★ 全面を覆わない。地図ごと暗くすると、押そうとしていたピンやポップアップが
   見えなくなり、「押せない」と受け取られる。下端の小さな帯で十分伝わる。
   出る条件は JS 側（指が12px以上動いたとき・ピンやポップアップ以外から） */
.gtd-map p.gtdm-gest{
	position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
	margin:0; display:none; padding:7px 14px; border-radius:999px;
	background:rgba(31,35,40,.86); color:#fff; font-size:.84em; font-weight:700;
	white-space:nowrap; pointer-events:none; z-index:500;
	box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.gtd-map p.gtdm-gest.is-on{ display:block; }
/* 地図が出せなかったとき。黙って空の枠を残さない */
.gtd-map .gtdm-canvas.is-fail{
	display:flex; align-items:center; justify-content:center; background:#f6f8fa;
}
.gtd-map p.gtdm-fail{ margin:0; padding:20px; text-align:center; color:#57606a; font-size:.92em; line-height:1.7; }
/* 控えを促すバー。モーダルにしないので操作を止めない。
   色は警告(赤)ではなく注意(琥珀)。事故ではなく「備えましょう」なので */
/* 地図の上に重ねる。流れに差し込むと出た瞬間に地図が下へずれ、
   遠征中の連打で次のタップが別のピンに当たる */
.gtd-map p.gtdm-backup{
	/* 上に置くとLeafletのズーム(+/-)と現在地(◎)を覆ってしまうので下に置く。
	   出典表記(右下・14px)にもかからない位置。スマホでは親指にも近い */
	position:absolute; bottom:26px; left:8px; right:8px; z-index:600;
	display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between;
	margin:0; padding:10px 12px; font-size:.86em; line-height:1.6; color:#6b4a00;
	background:#fff8e6; border:1px solid #e0c37a; border-left:4px solid #d99a00; border-radius:8px;
	box-shadow:0 2px 10px rgba(31,35,40,.18);
}
.gtd-map .gtdm-backup-act{ display:flex; gap:6px; flex:0 0 auto; }
.gtd-map .gtdm-backup button{
	font:inherit; font-size:.94em; padding:0 12px; min-height:34px; white-space:nowrap;
	border:1px solid #d8c98f; background:#fff; border-radius:6px; cursor:pointer; color:#6b4a00;
}
.gtd-map .gtdm-backup button.gtdm-bk-send{ background:#6b4a00; border-color:#6b4a00; color:#fff; font-weight:700; }
.gtd-map .gtdm-backup button.gtdm-bk-later{ border-color:transparent; background:transparent; text-decoration:underline; }
@media (max-width:600px){
	.gtd-map .gtdm-backup{ justify-content:flex-start; }
	/* ★ 折り返せるようにしておくこと。ボタンは white-space:nowrap なので
	   flex:1 1 auto でも縮まず、横一列のままだと「あとで」が枠からはみ出す */
	.gtd-map .gtdm-backup-act{ width:100%; flex-wrap:wrap; }
	.gtd-map .gtdm-backup button{ flex:1 1 auto; }
	/* 主ボタンは名前が長いので1行を専有させ、残り2つで1行にする */
	.gtd-map .gtdm-backup button.gtdm-bk-send{ flex:1 1 100%; }
}

/* 引継ぎパネルの「送る」 */
.gtd-map .gtdm-sharebox button.gtdm-send{ background:#333; border-color:#333; color:#fff; font-weight:700; }
.gtd-map p.gtdm-sharenote small{ display:block; margin-top:6px; font-size:.86em; color:#6a7280; line-height:1.6; }

/* 保存できない端末への注意書き */
.gtd-map p.gtdm-warn{
	margin:0 0 8px; padding:9px 12px; font-size:.84em; color:#8b3a3a; line-height:1.6;
	background:#fff5f5; border-left:4px solid #d63638; border-radius:0 6px 6px 0;
}
.gtd-map p.gtdm-credit{ margin:6px 0 0; font-size:.72em; color:#57606a; }
.gtd-map p.gtdm-credit a{ color:#57606a; }

/* ---- ピン：名城＝四角／古戦場＝ひし形／名湯＝丸／複数＝八角形＋件数 ----
   数字だけだと「名城3」と「3件」が紛らわしいので形ごと変える。
   色だけで分けるとP型・D型色覚で判別できないので、形が主・色は補助 */
.gtd-map .gtdm-p1{
	display:flex; align-items:center; justify-content:center; color:#fff; box-sizing:border-box;
	width:22px; height:22px; border:2px solid #fff;
	box-shadow:0 1px 4px rgba(0,0,0,.45);
	font-size:10px; font-weight:700; letter-spacing:-.3px; font-variant-numeric:tabular-nums;
}
.gtd-map .gtdm-p1 > i{ font-style:normal; display:block; line-height:1; }
.gtd-map .gtdm-p1.is-ci{ border-radius:50%; }
.gtd-map .gtdm-p1.is-sq{ border-radius:3px; }
/* ひし形は箱ごと45度回し、中の数字だけ戻す。
   clip-path で切ると白フチと影まで消えるので、回転で作る */
.gtd-map .gtdm-p1.is-di{ width:21px; height:21px; border-radius:2px; transform:rotate(45deg); }
.gtd-map .gtdm-p1.is-di > i{ transform:rotate(-45deg); letter-spacing:-.6px; }
.gtd-map .gtdm-p1.is-done{ background:#c8ccd0 !important; color:#7a838c; opacity:.75; }

/* 八角形は clip-path で切るため枠線も影も消える。
   濃い八角→白い八角→色つき八角の三重で、二重リングを作り直している */
.gtd-map .gtdm-pn{
	display:block; box-sizing:border-box; width:30px; height:30px; padding:2px;
	background:rgba(31,35,40,.9);
	clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.gtd-map .gtdm-pn > b{
	display:block; box-sizing:border-box; width:100%; height:100%; padding:2.5px; background:#fff;
	clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.gtd-map .gtdm-pn > b > i{
	display:flex; align-items:center; justify-content:center; width:100%; height:100%;
	font-style:normal; color:#fff; font-size:13px; font-weight:800; line-height:1;
	clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.gtd-map .gtdm-pn.is-done{ background:rgba(160,166,172,.9); }
.gtd-map .gtdm-pn.is-done > b > i{ background:#c8ccd0 !important; color:#7a838c; }

/* ---- ポップアップ ---- */
.gtd-map .leaflet-popup-content{ margin:12px; font-size:.94em; line-height:1.55; min-width:220px; }
.gtd-map .gtdm-pi{ padding:8px 0; border-top:1px solid #e6e9ee; }
.gtd-map .gtdm-pi:first-child{ border-top:0; padding-top:0; }
.gtd-map p.gtdm-t{ margin:0; font-weight:700; font-size:1.05em; }
.gtd-map .gtdm-k{
	display:inline-block; font-size:.72em; font-weight:700; color:#fff; white-space:nowrap;
	border-radius:4px; padding:1px 6px; margin-right:6px; vertical-align:2px;
	font-variant-numeric:tabular-nums;
}
.gtd-map .gtdm-k.is-done{ color:#7a838c; }
/* 順路・記録一覧では行の中で単独に置くので、右の余白と持ち上げは要らない */
.gtd-map .gtdm-rt-no .gtdm-k,
.gtd-map .gtdm-rno .gtdm-k{ margin-right:0; vertical-align:baseline; font-size:.76em; }
.gtd-map p.gtdm-meta{ margin:2px 0 0; font-size:.86em; color:#57606a; }
.gtd-map p.gtdm-memo{ margin:2px 0 0; font-size:.86em; color:#57606a; font-style:italic; }
/* 吹き出しの武将（名前とアイキャッチ。どちらを押しても記事へ） */
.gtd-map p.gtdm-bu{ margin:6px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gtd-map p.gtdm-bu .gtdm-bul{
	flex:0 0 auto; font-size:.74em; font-weight:700; color:#fff; background:#5f6570;
	border-radius:4px; padding:2px 7px; letter-spacing:.04em;
}
.gtd-map p.gtdm-bu .gtdm-bua{ display:inline-flex; align-items:center; gap:8px; font-size:.92em; font-weight:700; }
.gtd-map p.gtdm-bu .gtdm-bua img{ width:92px; height:52px; object-fit:cover; border-radius:4px; display:block; }
.gtd-map p.gtdm-act{ margin:6px 0 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.gtd-map button.gtdm-v{
	font:inherit; font-size:.86em; padding:6px 14px; min-height:34px;
	border:1px solid #d8dce3; background:#fff; border-radius:8px; cursor:pointer; color:#333;
}
.gtd-map button.gtdm-v.is-on{ background:#333; color:#fff; border-color:#333; }
.gtd-map .gtdm-act a{ font-size:.86em; color:#8b3a3a; }

/* ---- まとめて記録する ---- */
.gtd-map .gtdm-recbox{ display:none; border:1px solid #d8dce3; border-radius:10px; overflow:hidden; }
.gtd-map .gtdm-recbox.is-on{ display:block; }
.gtd-map .gtdm-recbar{
	display:flex; gap:8px; flex-wrap:wrap; align-items:center;
	padding:10px; background:#f6f8fa; border-bottom:1px solid #d8dce3;
}
.gtd-map .gtdm-reccount{ font-size:.82em; color:#57606a; }
.gtd-map button.gtdm-recclose{ margin-left:auto; }
.gtd-map .gtdm-reclist{ max-height:62vh; overflow-y:auto; }
.gtd-map .gtdm-rrow{
	display:flex; align-items:center; gap:10px; padding:9px 12px;
	border-bottom:1px solid #e6e9ee; cursor:pointer;
}
.gtd-map .gtdm-rrow:hover{ background:#f6f8fa; }
.gtd-map .gtdm-rrow.is-on{ background:#eef6ee; }
.gtd-map .gtdm-rck{
	width:20px; height:20px; flex:0 0 auto; border:2px solid #d8dce3; border-radius:5px;
	display:flex; align-items:center; justify-content:center; font-size:.8em; color:transparent;
}
.gtd-map .gtdm-rrow.is-on .gtdm-rck{ background:#333; border-color:#333; color:#fff; }
.gtd-map .gtdm-rno{ width:76px; flex:0 0 auto; }
.gtd-map .gtdm-rnm{ flex:1 1 auto; min-width:0; }
.gtd-map .gtdm-rad{
	font-size:.78em; color:#57606a; max-width:38%;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- 引き継ぎリンク ---- */
.gtd-map .gtdm-sharebox{
	border:1px solid #ccd2da; border-radius:8px; padding:12px; margin:10px 0 0; background:#fff;
}
/* 「リンクを見る」で飛んできたときに、どれを見ればいいか分かるように一瞬光らせる。
   パネルは最初から開いているので、スクロールだけだと何が起きたか伝わらない */
.gtd-map .gtdm-sharebox.is-flash{ animation:gtdmFlash 1.4s ease-out 1; }
@keyframes gtdmFlash{
	0%   { background:#fff8e6; border-color:#d99a00; box-shadow:0 0 0 3px rgba(217,154,0,.25); }
	70%  { background:#fff8e6; border-color:#d99a00; box-shadow:0 0 0 3px rgba(217,154,0,.12); }
	100% { background:#fff;    border-color:#ccd2da; box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
	.gtd-map .gtdm-sharebox.is-flash{ animation:none; border-color:#d99a00; }
}
.gtd-map p.gtdm-sharenote{ margin:0 0 8px; font-size:.88em; color:#444; }
/* ★ 記録が消えうることの注意書き。このパネルで一番大事なので、
   ほかの文字（.88em）より一段大きくし、控えを促すバーと同じ黄色でくくる。
   赤にしないのは、故障ではなく「そういう作りです」という説明だから */
.gtd-map p.gtdm-sharewarn{
	margin:0 0 10px; padding:10px 12px;
	font-size:1em; line-height:1.75; color:#6b4a00;
	background:#fff8e6; border:1px solid #e0c37a; border-left:4px solid #d99a00;
	border-radius:0 6px 6px 0;
}
.gtd-map p.gtdm-sharewarn b{ color:#5a3f00; font-weight:700; }
/* ボタンより下＝「押したあとに読めばよいこと」。上に間を空けて、ひと区切り付ける */
.gtd-map p.gtdm-shareafter{ margin:12px 0 8px; padding-top:10px; border-top:1px solid #e6e9ee; }
.gtd-map p.gtdm-qract{ margin:0 0 8px; }
.gtd-map .gtdm-sharebox button.gtdm-qrbtn{ font-size:.82em; }
.gtd-map p.gtdm-qr{ margin:0 0 8px; text-align:center; min-height:8px; }
/* 作り直している間は薄くする（古いQRを読ませないため） */
.gtd-map p.gtdm-qr.is-stale{ opacity:.25; }
.gtd-map p.gtdm-sharecount{ margin:0 0 6px; font-size:.86em; color:#333; }
.gtd-map p.gtdm-sharecount b{ font-variant-numeric:tabular-nums; }
/* QRはパソコン→スマホ専用。スマホで開いているときは場所を食うだけなので出さない */
/* QRはパソコン→スマホ専用。スマホで開いているときはボタンごと出さない */
@media (max-width:600px){
	/* ★ 説明文（.gtdm-qrnote）も一緒に消すこと。
	   ボタンだけ消して説明が残ると、出てこないボタンの使い方を読ませることになる */
	.gtd-map p.gtdm-qr, .gtd-map p.gtdm-qract, .gtd-map p.gtdm-qrnote{ display:none; }
}
/* 街道まで持つ人のQRは348px。パネルより広くなることは無いはずだが、
   はみ出すよりは縮めたほうがまし（縮むと読み取りにくくなるので最後の手段） */
.gtd-map p.gtdm-qr img{ display:inline-block; margin:0; max-width:100%; height:auto; }
.gtd-map input.gtdm-link{
	width:100%; font:inherit; font-size:.75em; padding:8px;
	border:1px solid #d8dce3; border-radius:6px; background:#fff;
}
.gtd-map .gtdm-sharebox button{
	font:inherit; font-size:.86em; padding:6px 14px; min-height:36px;
	border:1px solid #d8dce3; background:#fff; border-radius:8px; cursor:pointer; color:#333;
}

/* ---- スマホ ---- */
@media (max-width:600px){
	.gtd-map .gtdm-canvas{ height:58vh; min-height:320px; }
	.gtd-map .gtdm-rno{ width:70px; }
	.gtd-map .gtdm-rad{ display:none; }   /* 狭い画面では所在地を落として名前を優先する */
	.gtd-map .gtdm-rrow{ min-height:44px; }
}

/* ---- 現在地（地図の隅のボタン） ---- */
.gtd-map a.gtdm-loc{
	width:30px; height:30px; line-height:30px; text-align:center;
	background:#fff; color:#1f2328; font-size:17px; font-weight:700; text-decoration:none;
}
.gtd-map a.gtdm-loc:hover{ background:#f5f7fa; }
.gtd-map a.gtdm-loc.is-on{ background:#1d4ed8; color:#fff; }
.gtd-map a.gtdm-loc.is-busy{ opacity:.5; }
/* 追従が途切れたまま古い位置を表示している状態。黙って古い距離を出さない */
.gtd-map a.gtdm-loc.is-stale{ background:#b45309; color:#fff; }
.gtd-map .gtdm-me{
	display:block; width:14px; height:14px; margin:2px; border-radius:50%;
	background:#1d4ed8; border:3px solid #fff; box-shadow:0 0 0 1px rgba(29,78,216,.6), 0 1px 4px rgba(0,0,0,.4);
}
.gtd-map p.gtdm-dist{ margin:4px 0 0; font-size:.86em; color:#1d4ed8; font-weight:600; }

/* ポップアップの「順路に追加」 */
.gtd-map button.gtdm-add{
	font:inherit; font-size:.86em; padding:6px 12px; min-height:34px;
	border:1px solid #d8dce3; background:#fff; border-radius:8px; cursor:pointer; color:#333;
}
.gtd-map button.gtdm-add.is-on{ background:#6b21a8; color:#fff; border-color:#6b21a8; }

/* ---- 順路 ---- */
.gtd-map .gtdm-routebox{
	display:none; border:1px solid #ccd2da; border-radius:8px; padding:12px; margin:10px 0 0; background:#fff;
}
.gtd-map .gtdm-routebox.is-on{ display:block; }
.gtd-map p.gtdm-routenote{ margin:0; font-size:.88em; color:#57606a; }
/* li を display:flex にすると連番のマーカーが出なくなるので、カウンタで作り直す。
   順路は「回る順番」が本体なので、番号が消えてはいけない */
.gtd-map ol.gtdm-routelist{ margin:0 0 8px; padding:0; list-style:none; counter-reset:gtdroute; }
.gtd-map ol.gtdm-routelist li{
	display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #e6e9ee;
}
.gtd-map ol.gtdm-routelist li::before{
	counter-increment:gtdroute; content:counter(gtdroute) ".";
	flex:0 0 auto; min-width:1.5em; text-align:right;
	font-size:.82em; color:#57606a; font-variant-numeric:tabular-nums;
}
.gtd-map ol.gtdm-routelist li:last-child{ border-bottom:0; }
.gtd-map .gtdm-rt-no{ flex:0 0 auto; }
/* 順路の起点の行。番号は振らない（1番目のスポットを「1.」のままにする）。
   ★ セレクタは ol.gtdm-routelist まで書くこと。li.gtdm-rt-here::before だけだと
      .gtd-map ol.gtdm-routelist li::before に詳細度で負けて番号が消えない */
.gtd-map ol.gtdm-routelist li.gtdm-rt-here::before{ counter-increment:none; content:''; }
.gtd-map .gtdm-rt-hi{
	flex:0 0 auto; width:12px; height:12px; border-radius:50%;
	background:#1d4ed8; border:2.5px solid #fff; box-shadow:0 0 0 1px rgba(29,78,216,.6);
}
.gtd-map .gtdm-rt-hn{ flex:1 1 auto; min-width:0; font-weight:600; }
.gtd-map .gtdm-rt-hn small{ font-weight:400; font-size:.82em; color:#57606a; margin-left:5px; }
.gtd-map li.gtdm-rt-here.is-off{ opacity:.55; }
.gtd-map li.gtdm-rt-here.is-off .gtdm-rt-hi{ background:#a0a6ac; box-shadow:0 0 0 1px rgba(160,166,172,.6); }
/* ★ .gtd-map .gtdm-rt-btns button に width:32px が当たっているので、
      同じ入れ子の深さまで書いて上書きする（詳細度が同じだと後勝ちで不安定） */
.gtd-map .gtdm-rt-btns button.gtdm-rt-htog{
	font:inherit; font-size:.78em; width:auto; padding:0 10px; min-height:32px; white-space:nowrap;
	border:1px solid #d8dce3; background:#fff; border-radius:6px; cursor:pointer; color:#333;
}
.gtd-map .gtdm-rt-btns button.gtdm-rt-htog:disabled{ opacity:.4; cursor:not-allowed; }
.gtd-map .gtdm-rt-nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gtd-map .gtdm-rt-d{ flex:0 0 auto; font-size:.78em; color:#57606a; font-variant-numeric:tabular-nums; }
.gtd-map .gtdm-rt-btns{ flex:0 0 auto; display:flex; gap:3px; }
.gtd-map .gtdm-rt-btns button{
	font:inherit; font-size:.8em; width:32px; min-height:32px; padding:0;
	border:1px solid #d8dce3; background:#fff; border-radius:6px; cursor:pointer; color:#333;
}
.gtd-map .gtdm-rt-btns button:disabled{ opacity:.3; cursor:not-allowed; }
.gtd-map p.gtdm-routesum{ margin:0 0 8px; font-size:.82em; color:#57606a; }
/* 経由地の上限の注記。★常に出す（件数が少なくても消さない）。
   ふだんは地味な灰色で、渡しきれないときだけ赤くする。
   最初から赤いと、正常な状態でも壊れているように見える */
.gtd-map p.gtdm-routelim{
	margin:0 0 8px; padding:8px 10px; font-size:.82em; line-height:1.6; color:#57606a;
	background:#f6f8fa; border-left:4px solid #c9ced6; border-radius:0 6px 6px 0;
}
.gtd-map p.gtdm-routelim b{ color:#333; font-weight:700; }
.gtd-map p.gtdm-routelim.is-over{
	color:#8b3a3a; background:#fff5f5; border-left-color:#d63638;
}
.gtd-map p.gtdm-routelim.is-over b{ color:#8b3a3a; }
.gtd-map a.gtdm-gomap{ background:#333; color:#fff; border-color:#333; font-weight:700; }
.gtd-map a.gtdm-gomap:hover{ background:#1f2328; color:#fff; }

/* ---- 一覧の並び順と距離 ---- */
.gtd-map select.gtdm-recsort{ font:inherit; font-size:.88em; }
.gtd-map select.gtdm-recsort:disabled{ opacity:.5; cursor:not-allowed; }
.gtd-map .gtdm-rdist{
	flex:0 0 auto; font-size:.82em; color:#1d4ed8; font-weight:600; font-variant-numeric:tabular-nums;
	min-width:4.5em; text-align:right;
}
@media (max-width:600px){
	.gtd-map .gtdm-rdist{ display:block; }   /* 距離は狭い画面でも残す（所在地より優先） */
	/* 狭い画面では順路の名前を2行目に落とす。
	   1行に押し込むと「小牧・長久手の戦い」が「小…」になり、順路として用をなさない */
	.gtd-map ol.gtdm-routelist li{ flex-wrap:wrap; row-gap:1px; padding:8px 0; }
	.gtd-map .gtdm-rt-d{ order:3; }
	.gtd-map .gtdm-rt-btns{ order:4; margin-left:auto; }
	.gtd-map .gtdm-rt-nm{
		order:5; flex:1 1 100%; white-space:normal; overflow:visible;
		padding-left:calc(1.5em + 8px); font-size:.96em;
	}
	.gtd-map li.gtdm-rt-here{ flex-wrap:nowrap; }
	.gtd-map .gtdm-rt-hn small{ display:block; margin-left:0; }
}

/* ---- 一覧表の訪問ボタン（地図が同じページにあるときだけ出る） ----
   列を増やすので、幅は最小限に抑える。押せると分かるよう見出しに「訪問」を出し、
   四角は空でも枠線で存在を示す */
/* 列が1つ増えるぶん、横スクロールの下限（700px）を割らないよう幅を詰める。
   width:1px + nowrap で「中身の幅ちょうど」に縮む */
.gtd .gtd-t th.gtd-c-vis, .gtd .gtd-t td.gtd-c-vis{ padding-left:2px; padding-right:2px; }
.gtd .gtd-t th.gtd-c-vis{ width:1px; text-align:center; white-space:nowrap; font-size:.74em; }
.gtd .gtd-t td.gtd-c-vis{ text-align:center; }
.gtd button.gtd-vis{
	width:22px; height:22px; padding:0; box-sizing:border-box; vertical-align:middle;
	border:2px solid #ccd2da; border-radius:6px; background:#fff; cursor:pointer;
	font:inherit; font-size:14px; line-height:1; color:transparent;
}
.gtd button.gtd-vis:hover{ border-color:#8a929b; }
.gtd button.gtd-vis:focus-visible{ outline:2px solid #1d4ed8; outline-offset:2px; }
.gtd button.gtd-vis.is-on{ background:#333; border-color:#333; color:#fff; }
.gtd button.gtd-vis.is-on::after{ content:'✓'; }
@media (max-width:600px){
	.gtd .gtd-t th.gtd-c-vis{ width:2.8em; }
	.gtd button.gtd-vis{ width:28px; height:28px; }   /* 指で押すので狭い画面では大きく */
}

/* ---- 進捗カード ---- */
.gtd-map .gtdm-cardbox{
	border:1px solid #ccd2da; border-radius:8px; padding:12px; margin:10px 0 0; background:#fff;
}
.gtd-map canvas.gtdm-cardcv{
	display:block; width:100%; height:auto; max-width:700px; margin:0 auto 10px;
	border:1px solid #e6e9ee; border-radius:6px;
}
.gtd-map p.gtdm-cardnote{ margin:0 0 8px; font-size:.86em; color:#57606a; line-height:1.7; }
/* 何が公開されるかの1行目だけは本文色で読ませる（灰色に沈めない） */
.gtd-map p.gtdm-cardnote b{ color:#333; }
.gtd-map p.gtdm-cardnote small{ display:block; margin-top:5px; font-size:.92em; color:#6a7280; }
/* 送れなかったときの案内。黙って何も起きないのを防ぐためだけの行 */
.gtd-map p.gtdm-cardfail{
	margin:0 0 8px; padding:8px 10px; font-size:.84em; line-height:1.6; color:#8b3a3a;
	background:#fff5f5; border-left:4px solid #d63638; border-radius:0 6px 6px 0;
}
.gtd-map textarea.gtdm-cardtext{
	width:100%; box-sizing:border-box; font:inherit; font-size:.9em; line-height:1.6;
	padding:8px; border:1px solid #d8dce3; border-radius:6px; background:#fff; resize:vertical;
}
.gtd-map .gtdm-cardbox button{
	font:inherit; font-size:.86em; padding:6px 14px; min-height:36px;
	border:1px solid #d8dce3; background:#fff; border-radius:8px; cursor:pointer; color:#333;
}
.gtd-map .gtdm-cardbox button.gtdm-cardsend{ background:#333; border-color:#333; color:#fff; font-weight:700; }

/* ---- 使い方（地図の直下・折りたたみ） ----
   閉じているときは1行ぶんの高さしか使わない。
   ★ summary に display:flex を当てないこと（三角が消える。gotouchi-data-plugin.md の踏んだ罠） */
.gtd-map details.gtdm-help{ margin:0; border:0; background:none; }
/* ★ summary に display:flex を当てないこと（三角が消える。踏んだ罠に記録あり）。
   幅いっぱいの見た目は .gtdm-wide 側で付ける */
.gtd-map summary.gtdm-help-btn{ list-style:none; }
.gtd-map summary.gtdm-help-btn::-webkit-details-marker{ display:none; }
.gtd-map details.gtdm-help[open] > summary.gtdm-help-btn::before{ transform:rotate(90deg); }
.gtd-map details.gtdm-help[open] > summary.gtdm-help-btn{ background:#f1f3f6; border-color:#b9c0ca; }
.gtd-map .gtdm-help-in{
	margin:-2px 0 10px; padding:0 14px 14px;
	border:1px solid #ccd2da; border-top:0; border-radius:0 0 8px 8px; background:#f9fafb;
}
.gtd-map .gtdm-help-in{ font-size:.92em; line-height:1.8; color:#333; }

.gtd-map ol.gtdm-help-steps{ margin:0 0 14px; padding:0 0 0 1.6em; }
.gtd-map ol.gtdm-help-steps li{ margin:0 0 10px; }
/* 見出しの b だけを block に。子孫セレクタにすると説明文中の b まで
   ブロックになり、文の途中で改行が入る */
.gtd-map ol.gtdm-help-steps > li > b{ display:block; }
.gtd-map ol.gtdm-help-steps span{ display:block; font-size:.94em; color:#57606a; }

.gtd-map p.gtdm-help-ttl{ margin:0 0 6px; font-weight:700; font-size:.94em; }
.gtd-map ul.gtdm-help-list{ margin:0 0 12px; padding:0 0 0 1.3em; }
.gtd-map ul.gtdm-help-list li{ margin:0 0 4px; font-size:.94em; color:#57606a; }
.gtd-map ul.gtdm-help-list b{ color:#333; }

.gtd-map p.gtdm-help-note{
	margin:0; padding:10px 12px; font-size:.88em; line-height:1.75; color:#57606a;
	background:#fff; border:1px solid #e6e9ee; border-radius:6px;
}

/* ---- ★印（完全制覇）----
   地方別一覧の県見出し・地方見出し・都道府県の絞り込みに付く。
   付けているのは地図のJSだが、印が出る先は表なので .gtd-map で囲わない。
   色ではなく記号そのもの（★）を印にしてある——色だけだと色覚で読めない */
.gtd .gtd-star{ color:#d9a300; margin:0 .18em 0 0; font-size:.95em; line-height:1; }
/* summary は display:flex; gap:8px なので、そのままだと ★ と県名が離れる。
   「★和歌山県」と1語に見えるよう、gapぶんを打ち消す */
.gtd-region summary.gtd-pref-sum .gtd-star{ margin-right:-6px; }
.gtd h3.gtd-rg-h .gtd-star{ margin-right:.22em; }
.gtd .gtd-pf-one .gtd-star{ margin:0 .1em 0 0; font-size:.9em; }

/* ---- まとめて訪問済みにする ---- */
.gtd-map .gtdm-recbulk{ margin:0 0 8px; }
.gtd-map .gtdm-recbulk:empty{ display:none; margin:0; }
.gtd-map .gtdm-recbulk.is-ask,
.gtd-map .gtdm-recbulk.is-done{
	padding:9px 11px; border:1px solid #d7dbe0; border-radius:6px; background:#f7f9fb;
}
.gtd-map .gtdm-recbulk.is-done{ background:#f3f8f4; border-color:#bed9c3; }
.gtd-map p.gtdm-bulk-msg{ margin:0 0 7px; font-size:.9em; line-height:1.6; }
.gtd-map p.gtdm-bulk-msg b{ font-weight:700; }
/* ★ .gtd-map .gtdm-rt-btns button のような幅指定に巻き込まれないよう、
   ここでも auto を明示しておく。320px でも折り返して収まるようにする */
.gtd-map p.gtdm-bulk-act{ margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.gtd-map .gtdm-recbulk button.gtdm-btn{ width:auto; white-space:nowrap; }
.gtd-map .gtdm-recbulk button.gtdm-bulk-yes{ border-color:#333; font-weight:700; }
.gtd-map .gtdm-recbulk button.gtdm-bulk-go{
	width:100%; white-space:normal; line-height:1.45; padding:9px 10px;
}

/* 「近い順に並べ直す」で並びが変わらなかったときなど、順路パネルの一言 */
.gtd-map p.gtdm-routemsg{
	margin:0 0 8px; padding:7px 10px; font-size:.84em; color:#31572c;
	background:#f2f8f1; border-left:4px solid #6a994e; border-radius:0 6px 6px 0;
}
.gtd-map .gtdm-qrfail{ display:block; font-size:.84em; color:#8b3a3a; line-height:1.6; }
/* まとめての帯は、記録モードの箱の内側に置く。左右を詰めると枠が二重線に見える */
.gtd-map .gtdm-recbulk{ margin:0 10px 8px; }
.gtd-map .gtdm-recbulk:empty{ display:none; margin:0; }


/* ---- 記録のリンクを開いたときの確認 ----
   ここだけは操作を止める。選び間違えると記録が消えるので、
   「地図の上のバー」では弱すぎる。控えを促すバー（無視できる）とは役割が違う */
.gtd-restore{
	position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
	padding:16px; background:rgba(20,24,28,.55);
}
.gtd-restore .gtd-restore-in{
	width:100%; max-width:460px; max-height:88vh; overflow:auto;
	background:#fff; border-radius:12px; padding:18px 18px 16px;
	box-shadow:0 12px 40px rgba(0,0,0,.3);
	font-family:inherit; color:#1f2430; line-height:1.7;
}
.gtd-restore p.gtd-restore-ttl{ margin:0 0 10px; font-size:1.02em; font-weight:700; }
.gtd-restore table.gtd-restore-n{
	width:100%; margin:0 0 14px; border-collapse:collapse; font-size:.92em;
	background:#f7f9fb; border-radius:8px; overflow:hidden;
}
.gtd-restore table.gtd-restore-n th{
	text-align:left; font-weight:400; color:#57606a; padding:7px 12px; white-space:nowrap;
}
.gtd-restore table.gtd-restore-n td{
	text-align:right; padding:7px 12px; font-weight:700; font-variant-numeric:tabular-nums;
}
.gtd-restore p.gtd-restore-act{ margin:0 0 12px; display:flex; flex-direction:column; gap:8px; }
.gtd-restore p.gtd-restore-act button{
	font:inherit; font-size:.94em; line-height:1.5; padding:11px 12px; min-height:44px;
	border:1px solid #d8dce3; background:#fff; border-radius:8px; cursor:pointer; color:#333;
	text-align:center; white-space:normal;
}
/* ★ 1つ上の .gtd-restore p.gtd-restore-act button に負けるので、
   セレクタは p.gtd-restore-act まで書くこと */
.gtd-restore p.gtd-restore-act button.is-main{ background:#333; border-color:#333; color:#fff; font-weight:700; }
.gtd-restore p.gtd-restore-act button.gtd-rs-none{
	border-color:transparent; background:transparent; text-decoration:underline; color:#57606a;
	min-height:38px; padding:6px 12px;
}
.gtd-restore p.gtd-restore-note{
	margin:0; padding:9px 11px; font-size:.85em; line-height:1.7; color:#57606a;
	background:#f7f9fb; border-radius:6px;
}

/* ---- 地図の下のツールバー ----
   地図と関係ない操作（控え・公開・地図の種類）はここ。
   上に置くとスマホでツールバーが4行に折れ、地図が画面の外へ出る */
.gtd-map .gtdm-tools2{ margin:2px 0 10px; }

/* ---- 県・地方の進み具合（★の一歩手前を見せる） ----
   0件のときはJS側で出さない。47行ぶんの「0/6」は壁にしか見えない */
.gtd .gtd-prog-n{
	flex:0 0 auto; margin:0 0 0 .5em; padding:1px 7px; border-radius:10px;
	font-size:.78em; font-weight:700; line-height:1.7; white-space:nowrap;
	font-variant-numeric:tabular-nums; color:#6b4a00; background:#fdf3dc;
}
.gtd .gtd-prog-n.is-done{ color:#fff; background:#d9a300; }
.gtd h3.gtd-rg-h .gtd-prog-n{ margin-left:.6em; vertical-align:middle; }

/* ================= 期間限定のご当地要素 =================
   通常の399件とは別物。★・進捗カード・県の進み具合には一切入らない。
   期間が終われば、タイルも一覧もピンも自動的に消える */

/* ---- 三角のピン ----
   四角・ひし形・丸・八角形が埋まっているので、形で見分けられる最後の空き。
   ★と紛らわしいので星形は使わない。
   三角は border で描くので、色は border-bottom-color をJS側から指定する */
.gtd-map .gtdm-p1.is-tri{
	background:none!important; border:0; box-shadow:none; border-radius:0;
	width:24px; height:22px; display:flex; align-items:flex-end; justify-content:center;
	filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.gtd-map .gtdm-p1.is-tri > b{
	display:block; width:0; height:0;
	border-left:11px solid transparent; border-right:11px solid transparent;
	border-bottom:19px solid #be185d;
}
.gtd-map .gtdm-p1.is-tri.is-done > b{ border-bottom-color:#c8ccd0; }
.gtd-map .gtdm-p1.is-tri.is-skip{ opacity:.45; }

/* 凡例の三角 */
.gtd-map .gtdm-legend i.gtdm-l1.is-tri{
	background:none; border:0; box-shadow:none; width:14px; height:13px;
	display:flex; align-items:flex-end; justify-content:center;
}
.gtd-map .gtdm-legend i.gtdm-l1.is-tri > b{
	display:block; width:0; height:0;
	border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:12px solid #be185d;
}

/* ---- 進捗タイル（期間限定） ---- */
/* 「限定」の札は名前と同じ行に置く。右上に浮かせると「表示中／非表示」と重なる */
/* ★ イベント名は1行に収まらない（390pxで使える幅は約95px）。
   1行にすると「夏の...」になって、どのイベントか分からなくなる。
   2行までは許して、そこで切る。伸びるのは1行ぶん（約17px）だけ */
.gtd-map .gtdm-pgev > b{ display:flex; align-items:flex-start; gap:5px; min-width:0; }
.gtd-map .gtdm-pgev > b > span{
	min-width:0; overflow:hidden;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2;
}
.gtd-map .gtdm-pgev em.gtdm-pgtag{
	flex:0 0 auto; font-style:normal; font-size:.9em; font-weight:700; line-height:1.5;
	color:#fff; background:#be185d; border-radius:999px; padding:0 7px;
}
.gtd-map .gtdm-pgev.is-off em.gtdm-pgtag{ background:#a0a6ac; }

/* ---- 期間限定の一覧（地図の下） ---- */
.gtd-map .gtdm-evbox{ margin:0 0 10px; }
.gtd-map section.gtdm-ev1{
	border:1px solid #f0cede; border-left:4px solid #be185d; border-radius:0 8px 8px 0;
	background:#fffafc; padding:10px 12px; margin:0 0 8px;
}
.gtd-map p.gtdm-ev-h{
	margin:0 0 2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	font-size:.98em; line-height:1.5;
}
.gtd-map p.gtdm-ev-h em{
	font-style:normal; font-size:.72em; font-weight:700; color:#fff; background:#be185d;
	border-radius:999px; padding:2px 8px; white-space:nowrap;
}
.gtd-map p.gtdm-ev-h b{ font-weight:700; }
.gtd-map span.gtdm-ev-n{
	padding:1px 8px; border-radius:999px; font-size:.82em; font-weight:700;
	font-variant-numeric:tabular-nums; color:#9d174d; background:#fce7f3;
}
.gtd-map span.gtdm-ev-n.is-done{ color:#fff; background:#be185d; }
.gtd-map p.gtdm-ev-d{ margin:0 0 8px; font-size:.8em; color:#57606a; }

.gtd-map .gtdm-evg{ margin:0 0 6px; }
.gtd-map p.gtdm-evg-h{
	margin:0 0 3px; font-size:.78em; font-weight:700; color:#9d174d;
}
.gtd-map .gtdm-evg.is-done p.gtdm-evg-h{ color:#6b7280; font-weight:400; }
.gtd-map button.gtdm-evrow{
	display:flex; align-items:center; gap:10px; width:100%; text-align:left;
	font:inherit; font-size:.92em; padding:8px 10px; margin:0 0 4px;
	background:#fff; border:1px solid #eddbe4; border-radius:8px; cursor:pointer; color:#1f2430;
}
.gtd-map button.gtdm-evrow:hover{ background:#fdf2f8; }
.gtd-map button.gtdm-evrow .gtdm-rck{
	flex:0 0 auto; width:22px; height:22px; border-radius:5px; border:1.5px solid #d8ccd3;
	background:#fff; color:transparent; font-size:.8em; line-height:19px; text-align:center;
}
.gtd-map button.gtdm-evrow.is-on{ background:#fdf2f8; }
.gtd-map button.gtdm-evrow.is-on .gtdm-rck{ background:#be185d; border-color:#be185d; color:#fff; }
.gtd-map button.gtdm-evrow.is-on .gtdm-evnm{ color:#6b7280; text-decoration:line-through; }
/* 同じグループの別の場所で達成したので、もう行かなくていいもの。
   消さずに薄くする——消すと「さっきあったのに」と壊れて見えるし、押し間違いを戻せない */
.gtd-map button.gtdm-evrow.is-skip{ opacity:.5; }
.gtd-map .gtdm-evnm{ flex:1 1 auto; }
.gtd-map .gtdm-evsub{ flex:0 0 auto; font-size:.82em; color:#57606a; }
.gtd-map .gtdm-k.gtdm-evk{ background:#be185d; }
.gtd-map .gtdm-k.gtdm-evk.is-skip{ background:#c3b3bb; }

/* ---- 街道のピン（上辺が短い台形）----
   ゲーム内アイコンが家の形なのに合わせつつ、家型の五角形は22pxだと屋根が潰れて
   三角（期間限定）と見分けがつかない。台形なら輪郭がどれとも違う。
   clip-path で切ると枠線と影が消えるので、八角形と同じく白い下地を敷いて縁を作る */
/* ★ clip-path で切るので枠線も影も消える。八角形と同じく、
   白い台形の上に色つきの台形を重ねて白フチを作り直す */
.gtd-map .gtdm-p1.is-tz{
	position:relative; clip-path:polygon(20% 0, 80% 0, 100% 100%, 0 100%);
	border-radius:0; border:0; box-shadow:none; background:#fff;
	/* 3桁のNo（街道は537件ある）が上辺で切れないよう、他より少し広く・低くする。
	   数字は下寄せ——台形は下ほど広いので、真ん中に置くと3桁がはみ出す */
	width:28px; height:21px; align-items:flex-end; padding-bottom:2px;
	filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.gtd-map .gtdm-p1.is-tz::before{
	content:''; position:absolute; left:2px; right:2px; top:2px; bottom:2px;
	background:var(--gc, #8a5a2b);
	clip-path:polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.gtd-map .gtdm-p1.is-tz > i{ position:relative; z-index:1; letter-spacing:-.5px; }
.gtd-map .gtdm-legend i.gtdm-l1.is-tz{
	clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%);
	border:0; box-shadow:none; width:15px; height:13px;
}

/* ☆ = 名城・古戦場・名湯を制覇 ／ ★ = 街道も含めて制覇。
   ☆は輪郭だけなので細く見える。太さを足して、★と同じ重みで目に入るようにする */
.gtd .gtd-star{ font-weight:700; }
.gtd .gtd-star.is-full{ text-shadow:0 0 1px currentColor; }
.gtd .gtd-prog-n.is-done{ color:#fff; background:#d9a300; }


/* ★ 吹き出しの目印。所在地の下、メモの上 */
.gtdm-mark{
	margin:4px 0 0;
	font-size:.9em;
	line-height:1.45;
	color:#2f4858;
	font-weight:600;
}

/* ---- 足跡カードの一言 ---- */
/* ★ 横に並べると、390px幅では入力欄が179pxしか残らず、
   打った字が見えないまま流れていく。見出しは上、入力欄は1行まるごと使う */
.gtd .gtdm-cardmemo-l{ display:block; margin:.8em 0 .2em; font-size:.92em; color:#3b4250; }
.gtd .gtdm-cardmemo-l label{ display:block; font-weight:700; margin-bottom:.3em; }
.gtd input.gtdm-cardmemo,
.gtd input.gtdm-cardname{
	display:block; width:100%; box-sizing:border-box;
	padding:.5em .6em; font-size:1em; font-weight:400;
	border:1px solid #c9ced6; border-radius:6px; background:#fff; color:#1f2430;
}
.gtd input.gtdm-cardmemo:focus,
.gtd input.gtdm-cardname:focus{ outline:2px solid #8b3a3a; outline-offset:1px; }
.gtd .gtdm-cardmemo-n{ display:block; text-align:right; font-size:.85em; color:#6a7280; font-variant-numeric:tabular-nums; }

/* ---- 街道で絞る（チェックボックスの盤） ----
   ★ 盤は浮かせない（position:absolute/fixed にすると、テーマ側の overflow:hidden や
   transform ひとつで画面外に飛ぶ。Androidで絞り込みが効かなくなった前例がある） */
.gtd-map details.gtdm-rd{ display:inline-block; }
/* ★ ボタンの見た目は button/a/select にしか当たっていなかった（summary は対象外）。
   同じ帯に並ぶものは同じ見た目にする。要素名で書いたセレクタは、要素が変わると効かない */
.gtd-map summary.gtdm-rd-btn{
	display:inline-block; list-style:none; white-space:nowrap; user-select:none;
	font:inherit; font-size:.85em; padding:7px 10px; min-height:38px; line-height:22px;
	box-sizing:border-box; border:1px solid #d8dce3; background:#fff; border-radius:8px;
	cursor:pointer; color:#333;
}
.gtd-map summary.gtdm-rd-btn:hover{ background:#f5f7fa; }
.gtd-map summary.gtdm-rd-btn::-webkit-details-marker{ display:none; }
.gtd-map summary.gtdm-rd-btn::after{ content:'▾'; margin-left:.4em; color:#57606a; }
.gtd-map details.gtdm-rd[open] > summary.gtdm-rd-btn{ background:#333; color:#fff; border-color:#333; }
.gtd-map details.gtdm-rd[open] > summary.gtdm-rd-btn::after{ content:'▴'; color:#fff; }
.gtd-map .gtdm-rd-btn b{ font-weight:700; }
.gtd-map .gtdm-rd-panel{
	flex:1 1 100%; order:99;           /* ツール帯の最後の行に、幅いっぱいで開く */
	margin:2px 0 0; padding:10px 12px;
	border:1px solid #ccd2da; border-radius:8px; background:#fff;
}
.gtd-map p.gtdm-rd-note{ margin:0 0 8px; font-size:.82em; color:#57606a; }
.gtd-map .gtdm-rd-list{
	display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0 10px;
	max-height:40vh; overflow:auto;
}
.gtd-map label.gtdm-rd-one{
	display:flex; align-items:center; gap:6px; padding:4px 2px; font-size:.86em; cursor:pointer;
}
.gtd-map label.gtdm-rd-one input{ flex:0 0 auto; width:18px; height:18px; }
.gtd-map .gtdm-rd-nm{ flex:1 1 auto; }
.gtd-map .gtdm-rd-n{
	flex:0 0 auto; font-size:.82em; color:#6a7280; font-variant-numeric:tabular-nums;
}
.gtd-map p.gtdm-rd-act{ display:flex; gap:8px; margin:10px 0 0; }
.gtd-map .gtdm-recroad-b{ white-space:nowrap; }

/* 縮尺のせいで円が出ていないときの一言（凡例の中） */
.gtd-map .gtdm-legend .gtdm-lzoom{ color:#8b3a3a; font-weight:600; }

/* ピンの右に出す名前の札（縮尺11以上・画面のピンが12個以下のときだけ） */
.gtd-map .leaflet-tooltip.gtdm-tip{
	background:rgba(255,255,255,.94); border:1px solid #b9c1cc; border-radius:4px;
	box-shadow:0 1px 3px rgba(0,0,0,.18);
	padding:2px 6px; font-size:12px; font-weight:700; color:#1f2430;
	white-space:nowrap; margin:0;
}
.gtd-map .leaflet-tooltip.gtdm-tip::before{ display:none; }   /* 三角の矢印は出さない */

/* 自動で開く短い吹き出し（名前・武将・ボタン3つだけ） */
.gtd-map .gtdm-pi.is-short p.gtdm-act{ margin-top:8px; }
.gtd-map p.gtdm-bu.is-short{ margin:6px 0 0; padding:0; }
.gtd-map p.gtdm-bu.is-short .gtdm-bunm{ font-weight:700; font-size:.95em; }
.gtd-map .gtdm-pi.is-short button.gtdm-more{
	font:inherit; font-size:.86em; padding:6px 14px; min-height:34px;
	border:1px solid #333; background:#333; color:#fff; border-radius:8px; cursor:pointer; font-weight:700;
}

/* ★ 「詳細」で開いた吹き出しは、字を大きくする。
   短い形は【これが何かを確かめる】ためのもので一目で読めればよいが、
   詳しい形は【現地で読む】もの。所在地・目印・最寄駅は、
   歩きながら・明るい屋外で・老眼で読まれる。ここを小さいままにしない。
   ・本文 .86em → 1em（テーマ本文と同じ大きさ）
   ・行間も広げる（詰まった小さい字がいちばん読みにくい）
   ・ボタンは高さ40pxに（指で押すものは大きく） */
.gtd-map .gtdm-pi:not(.is-short){ font-size:1.02em; line-height:1.65; }
.gtd-map .gtdm-pi:not(.is-short) p.gtdm-t{ font-size:1.12em; line-height:1.4; }
.gtd-map .gtdm-pi:not(.is-short) p.gtdm-meta{ font-size:1em; color:#4b535e; margin-top:4px; }
.gtd-map .gtdm-pi:not(.is-short) p.gtdm-mark{ font-size:1.02em; }
.gtd-map .gtdm-pi:not(.is-short) p.gtdm-memo{ font-size:.96em; }
.gtd-map .gtdm-pi:not(.is-short) p.gtdm-dist{ font-size:.96em; }
.gtd-map .gtdm-pi:not(.is-short) p.gtdm-bu .gtdm-bua{ font-size:1.02em; }
.gtd-map .gtdm-pi:not(.is-short) p.gtdm-act{ gap:10px; }
.gtd-map .gtdm-pi:not(.is-short) button.gtdm-v,
.gtd-map .gtdm-pi:not(.is-short) button.gtdm-add,
.gtd-map .gtdm-pi:not(.is-short) a.gtdm-go{ font-size:.98em; min-height:40px; padding:8px 16px; }

/* ★ パソコンでは吹き出しと札をひとまわり大きくする。
   同じ 1em でも、スマホでは画面いっぱいの吹き出しが、
   パソコンでは広い画面の隅の小さな箱になる。
   【同じ大きさ】ではなく【同じ読みやすさ】にそろえるほうが正しい。
   幅も広げる（JS 側の maxWidth と対で効かせている） */
@media (min-width:900px){
	/* ★ 大きさの基準は下の .leaflet-popup-content（px）で持つ。
	   ここで em を重ねると、基準×倍率×倍率で効きすぎる（実測19.4pxになった） */
	.gtd-map .gtdm-pi:not(.is-short){ line-height:1.7; }
	.gtd-map .gtdm-pi:not(.is-short) button.gtdm-v,
	.gtd-map .gtdm-pi:not(.is-short) button.gtdm-add,
	.gtd-map .gtdm-pi:not(.is-short) a.gtdm-go{ min-height:44px; }
	.gtd-map .leaflet-tooltip.gtdm-tip{ font-size:14px; padding:3px 8px; }
}

/* ★★ 吹き出しの字が小さかった本当の理由。
   Leaflet は地図の器（.leaflet-container）に font-size:12px を当てている。
   こちらの .86em や 1em は、テーマ本文（16px）ではなく【この12px】を基準に計算されていた。
   ＝ 実測11.3px。老眼で現地で読む文字ではない。
   だから吹き出しの中だけは、em ではなく【px で基準を置き直す】。 */
.gtd-map .leaflet-popup-content{ font-size:15px; line-height:1.6; }
@media (min-width:900px){
	/* パソコンは画面が広く、目からの距離も遠い。基準ごと1段上げる */
	.gtd-map .leaflet-popup-content{ font-size:16.5px; }
}