/* ご当地データ 地図 v1.0 表づくりの決めごと準拠：文字はテーマ本文と同じ大きさ／詳細度の罠対策でセレクタに要素名を付ける */ .gtd.gtd-map{ margin:1.4em 0; font-size:1rem; line-height:1.5; } /* ★★ 土台：leaflet.css の .leaflet-popup-content p{ margin:1.3em 0 } を、 吹き出しの中では止める。行ごとの余白はこのファイルで1行ずつ決める。 ★ 【必ずこの位置（ファイルの先頭側）に置くこと】。 強さ（詳細度）は .gtd-map p.〜 と同じ (0,2,1) なので、あとに書いたほうが勝つ。 この行を下のほうに置くと、上で決めた行の余白を全部0にしてしまう （2026-09-05 に一度そうなり、行き方の行の 5px が消えた）。 ★ これを入れる前は、吹き出しの中の p のうち「.gtd-map p.〜」で書いていない行が すべて leaflet の 1.3em（実測18〜20px）をもらっていた。 */ .gtd-map .leaflet-popup-content p{ margin:0; } /* ---- 進捗タイル（名城 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{ /* ★ .68em ＝ 実測10.9px。老眼の読者に「表示中／非表示」を色だけで読ませていた */ position:absolute; top:7px; right:9px; font-size:.78em; font-weight:600; color:#57606a; letter-spacing:.02em; } /* ★ 非表示の合図は【色・取り消し線】の2つで出す。凡例（.gtdm-legend span.is-off）と 同じ合図にそろえる。色だけだと、色覚特性のある読者に伝わらない */ .gtd-map .gtdm-pg.is-off .gtdm-pgs{ color:#646b74; text-decoration:line-through; } /* 右上の「表示中／非表示」の下に名前が潜り込まないよう余白を確保する */ .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:#646b74; text-decoration:line-through; } .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:#646b74; } .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; } /* ★ .45 では取り消し線があっても字が読めない。老眼の読者には合図が2つとも要る */ .gtd-map .gtdm-legend span.is-off{ opacity:.66; 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; } /* 城の見本。凡例の i は style="background:色" で色が入るので、要素そのものをマスクで切る。 白フチと影はマスクで消えるが、凡例は白地なので輪郭は出る（実物と同じ形にはなっている）。 ★ 実物は28pxで、ほかのピン（22px）より一回り大きい。見本も同じ比で18pxにしてある */ .gtd-map .gtdm-l1.is-cs{ width:18px; height:18px; border:0; box-shadow:none; border-radius:0; -webkit-mask:url(castle.svg) no-repeat center/contain; mask:url(castle.svg) no-repeat center/contain; } .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%); } /* ★ 範囲の円の見本。地図に描く色と必ずそろえること（gotouchi-map.js の TAPCOL / colOf）。 以前は2つとも名城の赤だったので、凡例を見ても2つの円を区別できなかった */ .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-lc.is-tap{ border-color:#1f2430; background:rgba(31,36,48,.08); } /* 武将出現＝種類の色。見本は代表として名城の赤のまま（名湯は緑で出る） */ .gtd-map .gtdm-lc.is-bu{ border-color:#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-lrs{ display:inline-flex; align-items:flex-start; gap:5px; } /* 見出しは折り返さない。「色の付いた／向き」と割れると意味が読めない */ .gtd-map .gtdm-lrs > b{ white-space:nowrap; font-weight:400; } .gtd-map .gtdm-lrs > i{ flex:0 0 auto; margin-top:2px; } .gtd-map .gtdm-lrs small{ font-size:.92em; color:#8a929b; margin-left:4px; } /* ---- 地図 ---- */ .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; } /* 地図が出せなかったときの逃げ道のボタン。文の下に1行あける */ .gtd-map .gtdm-failgo-w{ display:block; margin-top:12px; } .gtd-map button.gtdm-failgo{ font:inherit; font-size:.92em; padding:8px 14px; min-height:40px; border:1px solid #d8dce3; background:#fff; border-radius:8px; cursor:pointer; color:#333; } /* 記録モードの並び順のところに出す一言。title はスマホで読めないので文字で出す */ .gtd-map p.gtdm-recsortnote{ display:block; margin:6px 0 0; font-size:.84em; color:#1c4e80; line-height:1.6; } .gtd-map p.gtdm-recsortnote[hidden]{ display:none; } /* 控えを促すバー。モーダルにしないので操作を止めない。 色は警告(赤)ではなく注意(琥珀)。事故ではなく「備えましょう」なので */ /* 地図の上に重ねる。流れに差し込むと出た瞬間に地図が下へずれ、 遠征中の連打で次のタップが別のピンに当たる */ .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; } /* ★ 押したあとの結果を、同じ帯にそのまま出す。 黄色（お願い）から青（済んだ）に変わることで、 「何か起きた」が色でも分かる。赤(is-bad)＝読者が手で何とかする必要がある。 ★ 結果を別の場所に出さないこと。押した場所と結果が離れると、 画面が動いたようにしか見えない——それが直したかった不具合そのもの */ .gtd-map p.gtdm-backup.is-res{ color:#1c4e80; background:#eef5fc; border-color:#b9d3ec; border-left-color:#2f74b5; } .gtd-map p.gtdm-backup.is-res button{ color:#1c4e80; border-color:#b9d3ec; } .gtd-map p.gtdm-backup.is-res.is-bad{ color:#8a2620; background:#fdefee; border-color:#e7b5b0; border-left-color:#c0392b; } .gtd-map p.gtdm-backup.is-res.is-bad button{ color:#8a2620; border-color:#e7b5b0; } @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; } /* ★★ 名城＝城の形（v1.57.0／2026-09-05）。 ご主人様のご指摘――「形を変えると覚え直しが要るが、そもそも城の形をしていれば 覚え直す必要が無い」。四角(is-sq)からの入れ替えで、赤で目立たせる役目も下ろした。 ・絵は castle.svg（窓を埋めたシルエット）。窓のある castle-detail.svg は 中央に穴が空いて番号が読めないので、ピンには使わない（拡大表示用に置いてある）。 ・SVGはマスクとして使う。background で塗ると絵ごと四角く塗りつぶしてしまうため、 色は JS が --gc で渡し、::before が受け取る。 ・白フチは border では作れない（マスクで切った形に border は付かない）。 ★★ 白フチを drop-shadow で作ってはいけない（2026-09-05・ご主人様のご指摘で発覚）。 ピン1つにフィルタが9本かかり、137個ならべて地図を動かすと 【1コマ337ms】になった（フィルタ無しなら16.7ms）。実測は work/map-perf.js。 いまの作り方：白い城を少しだけ太らせた絵（castle-edge.svg）を下に1枚敷き、 その上に紺の城（castle.svg）を重ねる。フィルタは0本。 ・太らせた量は 0.5px（28pxのピンで）。castle-edge.svg の viewBox は その分だけ外に広げてあるので、::after を inset:-0.5px にすると 中の城が castle.svg とぴったり重なる。作り直しは work/castle-edge-svg.py。 ★★ filter は【マスクを掛ける前】に効く。mask と filter を同じ要素に書くと、 作った影をマスクが切り落とす（同日に画像で発覚）。この決まりは残しておくこと。 ・大きさ28px：城の塗りは箱の59.8%しかなく、22pxの四角と面積が釣り合うのが28.4px。 ・数字は中心。ただし城は下ほど色が広いので、+1.5px 下げる（ご主人様の決定）。 */ .gtd-map .gtdm-p1.is-cs{ position:relative; width:28px; height:28px; border:0; box-shadow:none; background:none; overflow:visible; } /* 下：白フチ（少しだけ太らせた城）。 ★ 太さ1px。inset の値と castle-edge.svg の太らせ量は【必ずそろえる】こと。 ずらすと城の位置が動く。作り直しは python3 work/castle-edge-svg.py 1.0 <出力先>。 ★ 一度0.5px（ほかのピンの1/4）にしたが「減らし過ぎた」（2026-09-05・ご主人様）。 太くするほど屋根のくぼみが埋まる。1pxで埋まるのは塗りの0.75%で、形は保てる。 */ .gtd-map .gtdm-p1.is-cs::after{ content:''; position:absolute; inset:-1px; background:#fff; z-index:0; -webkit-mask:url(castle-edge.svg) no-repeat center/contain; mask:url(castle-edge.svg) no-repeat center/contain; } /* 上：城の本体 */ .gtd-map .gtdm-p1.is-cs::before{ content:''; position:absolute; inset:0; background:var(--gc, #16305e); z-index:1; -webkit-mask:url(castle.svg) no-repeat center/contain; mask:url(castle.svg) no-repeat center/contain; } /* 数字は城の上に。padding-right は字間のマイナスぶんの戻し（左右をそろえる） */ .gtd-map .gtdm-p1.is-cs > i{ position:relative; z-index:2; transform:translateY(1.5px); padding-right:.3px; text-shadow:0 1px 2px rgba(0,0,0,.6); } /* 3桁（名城は100番台まである）だけ小さくし、字間を詰めて胴（16.8px）に収める。 ★ 8px では思いのほか小さかったので 9px に（2026-09-05・ご主人様のご指摘）。 あわせて3桁のときだけ、下げ幅を +1.5px → +2.5px にする。2桁は変えない。 */ .gtd-map .gtdm-p1.is-cs.is-len3 > i{ font-size:9px; letter-spacing:-.8px; padding-right:.8px; transform:translateY(2.5px); } /* 訪問済み。is-done の background は !important なので、ここでも !important で打ち消す （打ち消さないと、マスクの外側に灰色の四角が出る） */ .gtd-map .gtdm-p1.is-cs.is-done{ background:none !important; } .gtd-map .gtdm-p1.is-cs.is-done::before{ background:#c8ccd0; } /* 八角形は 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 .gtdm-pn.is-rs{ width:34px; height:34px; padding:4px; } /* 白い八角を輪に差し替える。外の濃い八角が黒縁の役をする */ .gtd-map .gtdm-pn.is-rs > b{ background:var(--rs, #fff); } /* ★ 路線の印が付く駅の吹き出し。ピンの赤と対応させる。 ★ 向きでは塗り分けない——カードは地図の方角と関係がないため。 ★ 三角のしっぽも赤くする。ここだけ白いと、枠が途中で切れて見える */ .gtd-map .gtdm-rs-pop .leaflet-popup-content-wrapper{ border:3px solid #e60012; } .gtd-map .gtdm-rs-pop .leaflet-popup-tip{ background:#e60012; } /* ★ 乗り換えの補足。カードの赤い枠が「なぜ赤いのか」に答える一行。 ★ 字は黒のまま。赤い字にすると警告に見えるが、中身は 「ほとんどの列車が直通」のような【安心する話】のことが多い。 赤は左の細い帯だけにして、枠との対応を付ける。 ★ 短い形にも詳しい形にも同じ見た目で出す（同じ話なので） */ .gtd-map p.gtdm-rsnote{ margin:6px 0 0; padding:5px 8px; font-size:.86em; line-height:1.5; color:#24292f; background:#fdf0f1; border-left:3px solid #e60012; border-radius:0 4px 4px 0; } /* 印の付かない駅に書かれた補足。文は出すが、赤は使わない（上のコメント参照） */ .gtd-map p.gtdm-rsnote.is-plain{ background:#f2f4f7; border-left-color:#9aa3ad; } /* ★ v1.57 可能性有の区間の補足。地図の橙の印と同じ色にそろえる */ .gtd-map p.gtdm-rsnote.is-may{ background:#fff8e6; border-left-color:#ffb300; } /* ★ どの区間の話かの見出し。行の頭に置き、文と地続きに読ませる（別行にすると縦に伸びる）。 ★ v1.57.1 で、補足を「行き先の行のすぐ下」に置くようにしたので、地図の吹き出しでは この見出しを出さなくなった（すぐ上の行がもう行き先を言っている）。 一覧表（手順④）では上に行が無いので、そちらでは要る。だから消さずに残す。 */ .gtd-map .gtdm-rsseg{ font-weight:700; margin-right:.25em; } /* ★★ v1.57.1 街道の吹き出し「◯◯宿（◯◯駅）へ：行き方」（ご主人様の指定）。 ：の前が行き先、：の後が行き方。補足がある区間は、この行のすぐ下に補足が付く。 */ .gtd-map p.gtdm-rsgo{ margin:5px 0 0; font-size:.92em; line-height:1.55; } .gtd-map p.gtdm-rsgo > b{ font-weight:700; } .gtd-map p.gtdm-rsgo.is-must{ color:#8a2620; } .gtd-map p.gtdm-rsgo.is-may{ color:#8a6100; } /* 補足を行の直下に置くときは、上の余白を詰める（行と補足を一組に見せる） */ .gtd-map p.gtdm-rsnote.is-tight{ margin-top:3px; } /* 路線名を出したときだけ出る時点の一行。読み物ではないので小さく、色も落とす */ .gtd-map p.gtdm-rswhen{ margin:4px 0 0; font-size:.8em; color:#8b949e; } /* 見出しの中の最寄り駅。太字にしない――主役は宿の名前のほう */ .gtd-map .gtdm-tst{ font-weight:400; font-size:.8em; color:#57606a; white-space:nowrap; } /* ★ 詳細の行の見出しの語（住所／スポット／最寄）。 語のあとの「：」はCSSで足す。文の側に書くと、語だけ差し替えたいときに探しにくい。 ★ 幅をそろえない――「スポット」と「最寄」で字数が違うが、そろえると 狭い画面でむだな余白ができる。太字と色で列に見えるようにする */ .gtd-map .gtdm-lb{ font-weight:700; color:#4b535e; } .gtd-map .gtdm-lb::after{ content:'：'; font-weight:400; color:#8b949e; } /* ★ 場所の話と、前後の宿への行き方のあいだに区切りの空きを入れる（ご主人様の指定）。 詳細では「その場所の話 → 行き方」の順なので、ここが話の変わり目。 ★ :first-of-type は見出しの

を指してしまい効かない。行き方の一群を箱で包んで、 その箱に空きを付ける（一度 :first-of-type で書いて効かず、画像で気づいた） */ .gtd-map .gtdm-pi:not(.is-short) .gtdm-rsblk{ margin-top:12px; } /* 見出しの語を付けた行は傾けない。住所・スポットと1つの組に見せるため */ .gtd-map p.gtdm-memo.is-lab{ font-style:normal; } /* ---- ポップアップ ---- */ .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; } /* ★★ 同じ場所に2つ以上あるときの切り替えタブ（2026-09-07・ご主人様のご指示）。 縦に全部並べると吹き出しが地図より高くなり、上も下も切れていた （実測：地図558px に対して吹き出し879px）。タブなら常に1件ぶんの高さで収まる。 ★ 4つ並ぶ場所がある（日本橋＝日光・中山道・甲州・東海道）ので折り返す。 横スクロールにはしない——指で押すものが横に隠れると、あることに気づけない。 ★★ 選んでいるものと選んでいないものの差は【はっきり付ける】（2026-09-07・2回目のご指示）。 ・選んでいない … 沈んだ灰色の面、字も薄く、チップも薄く（押せるけど、いま見ていない） ・選んでいる … 白い面、下に太い線、少し持ち上がる、字は濃く太く、チップはそのままの色 持ち上げは 2px。紙のタブが手前に出ている形にそろえる */ .gtd-map .gtdm-tabs{ display:flex; flex-wrap:wrap; gap:4px; align-items:flex-end; margin:0 0 10px; padding:0; border-bottom:2px solid #c7ccd3; } .gtd-map button.gtdm-tab{ position:relative; display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:5px 10px 6px; margin-bottom:-2px; border:1px solid #cfd5dc; border-bottom:0; border-radius:7px 7px 0 0; background:#e3e7ec; color:#7c858f; font:inherit; font-size:.86em; line-height:1.3; cursor:pointer; -webkit-appearance:none; appearance:none; } /* 選んでいないタブは、チップも一段沈める（色の違いは残るので訪問済みは分かる） */ .gtd-map button.gtdm-tab .gtdm-k{ opacity:.5; } .gtd-map button.gtdm-tab .gtdm-tabnm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:9em; } .gtd-map button.gtdm-tab:hover{ background:#eef1f4; color:#3c4550; } .gtd-map button.gtdm-tab.is-on{ padding-top:7px; padding-bottom:8px; /* 少し背を高くして手前に見せる */ background:#fff; border-color:#c7ccd3; color:#1f2830; font-weight:700; box-shadow:0 -2px 0 0 #1f2830 inset, 0 2px 0 0 #fff; /* 上に太線／下の境界を白で消す */ z-index:1; } .gtd-map button.gtdm-tab.is-on .gtdm-k{ opacity:1; } .gtd-map button.gtdm-tab:focus-visible{ outline:2px solid #1d4ed8; outline-offset:1px; } /* タブがあるときは、その下の1件から上の区切り線を外す（線が二重になる） */ .gtd-map .gtdm-tabs + .gtdm-pi{ border-top:0; padding-top:0; } .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; } /* ★ 押した結果を出す場所。ボタンの文字は2.2秒で戻ってしまうので、 「何が起きたか」と「次に何をすればよいか」はここに残す。 青系＝処理は進んだ（送れなかったがコピーはできた）。 赤系(is-bad)＝読者が手で何とかする必要がある。色で作業の要否を分ける。 ★ hidden で開け閉てするので、[hidden]{display:none} を必ず対で書くこと （display を書いた要素は hidden より display のほうが勝つ） */ .gtd-map p.gtdm-sharemsg{ display:block; margin:0 0 8px; padding:9px 11px; font-size:.92em; line-height:1.7; color:#1c4e80; background:#eef5fc; border:1px solid #b9d3ec; border-left:4px solid #2f74b5; border-radius:0 6px 6px 0; } .gtd-map p.gtdm-sharemsg b{ color:#123a61; font-weight:700; } .gtd-map p.gtdm-sharemsg.is-bad{ color:#8a2620; background:#fdefee; border-color:#e7b5b0; border-left-color:#c0392b; } .gtd-map p.gtdm-sharemsg.is-bad b{ color:#7a1f1a; } .gtd-map p.gtdm-sharemsg[hidden]{ display:none; } /* ボタンより下＝「押したあとに読めばよいこと」。上に間を空けて、ひと区切り付ける */ .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; text-align:left; } .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); } /* ★★ 起点の行は【行ぜんぶが1つのボタン】。 見た目は行のままにする——枠を付けると、下に並ぶスポットの行と別物に見えて 「順路の1行目」だと読めなくなる。押せることは指の下の反応（:active）と 右端の予告の文字で伝える。 ★ li 側の padding は殺してボタンに移す。行の端まで押せるようにするため （枠の外側に押せない帯が残ると、そこを押した人には「効かない」に見える） */ .gtd-map ol.gtdm-routelist li.gtdm-rt-here{ padding:0; } .gtd-map button.gtdm-rt-htog{ display:flex; align-items:center; gap:8px; width:100%; font:inherit; text-align:left; padding:9px 4px; min-height:44px; border:0; background:transparent; color:inherit; cursor:pointer; border-radius:6px; } .gtd-map button.gtdm-rt-htog:hover{ background:#f2f5f9; } .gtd-map button.gtdm-rt-htog:active{ background:#e6ecf4; } .gtd-map button.gtdm-rt-htog:disabled{ opacity:.45; cursor:not-allowed; background:transparent; } /* 右端は「押すと何が起きるか」の予告。ボタンには見せない（押せるものは行そのもの1つだけ） */ .gtd-map .gtdm-rt-hact{ flex:0 0 auto; font-size:.8em; font-weight:600; color:#2f6fb5; white-space:nowrap; text-decoration:underline; text-underline-offset:2px; } .gtd-map button.gtdm-rt-htog:disabled .gtdm-rt-hact{ color:#6a7280; text-decoration:none; } .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 4px; border:1px solid #e6e9ee; border-radius:6px; cursor:zoom-in; } .gtd-map canvas.gtdm-cardcv:focus-visible{ outline:2px solid #1d4ed8; outline-offset:2px; } /* ★ プレビューは 1200px の絵を 340px ほどに縮めた「見取り図」でしかない。 そこに何が書いてあるかは原寸で見ないと読めないので、道しるべを必ず添える */ .gtd-map .gtdm-cardzoomtip{ margin:0 0 10px; text-align:center; font-size:.86em; color:#57606a; } /* ---- 足跡カードの原寸表示 ---- */ .gtdm-cardzoom{ position:fixed; inset:0; z-index:10000; background:rgba(20,22,26,.88); display:flex; align-items:center; justify-content:center; padding:12px; overflow:auto; -webkit-overflow-scrolling:touch; } .gtdm-cardzoom-in{ max-width:100%; } /* ★ 原寸で出す。画面より大きければ、そのまま指で拡げて読める状態にしておく （縮めて「全部見える」ようにすると、大きく見たいという当の目的が消える） */ .gtdm-cardzoom-img{ display:block; width:1200px; max-width:none; height:auto; border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.4); background:#fff; } .gtdm-cardzoom-act{ margin:12px 0 0; text-align:center; position:sticky; left:0; } .gtdm-cardzoom-x{ font-size:16px; padding:10px 22px; border-radius:6px; border:1px solid #fff; background:#fff; color:#1f2430; font-weight:700; cursor:pointer; } .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; } /* ★★ 街道駅：路線が変わる向きの印。 ふだんの台形は【外が白・内が街道の色】の2枚。 印が付くと【黒1px → 輪4px → 本体】の3枚になる。 ★ 輪は1枚。左（印の無い側）が白、右（印のある側）が赤で、1本の輪が塗り分かれる。 赤と白を別々の輪にすると、赤を「向きだけ塗って残りは透明」にすることになり、 透明な側から下の黒が透けて黒が2pxに太る（実測で確認）。 ★ 輪の中身（conic-gradient）は JS が --rs で渡す。方位はデータごとに違うため。 ★ 中身（街道の色と番号）の大きさは変えない。外側に足すだけ。 ★ 一回り大きいのも印のうち。色覚特性でも屋外でも、大きさは弱くならない。 */ .gtd-map .gtdm-p1.is-tz.is-rs{ width:33px; height:26px; padding-bottom:4px; background:#111; } /* 輪（左が白・右が赤） */ .gtd-map .gtdm-p1.is-tz.is-rs::after{ content:''; position:absolute; inset:1px; background:var(--rs, #fff); clip-path:polygon(20% 0,80% 0,100% 100%,0 100%); } /* 本体（街道の色）。輪の内側に重ねる */ .gtd-map .gtdm-p1.is-tz.is-rs::before{ inset:5px; left:5px; right:5px; top:5px; bottom:5px; z-index:1; } .gtd-map .gtdm-p1.is-tz.is-rs > i{ z-index:2; } /* 訪問済みでも印は消さない。行ったかどうかと、乗り換えが要るかは別の話 */ .gtd-map .gtdm-p1.is-tz.is-rs.is-done::before{ background:#c8ccd0; } /* 凡例の見本。実物と同じ3枚構成にする——見本と実物で違うなら見本の意味がない */ .gtd-map .gtdm-legend i.gtdm-l1.is-rs{ position:relative; width:19px; height:16px; border:0; box-shadow:none; clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); background:#111; } .gtd-map .gtdm-legend i.gtdm-l1.is-rs::after{ content:''; position:absolute; inset:1px; background:linear-gradient(to right,#fff 50%,#e60012 50%); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); } .gtd-map .gtdm-legend i.gtdm-l1.is-rs::before{ content:''; position:absolute; inset:4px; background:#1b5ebb; z-index:1; clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); } /* ★ v1.57 の見本3つ。全周＝ぜんぶ赤、可能性有＝右半分が橙、灰帯＝吹き出しの帯そのもの。 実物と同じ色・同じ形にする（見本と実物が違うなら見本の意味がない）。 ★ 2026-09-05 まで橙を破線にしていたが、実物を実線に戻したので見本も実線にする */ .gtd-map .gtdm-legend i.gtdm-l1.is-rs.is-full::after{ background:#e60012; } .gtd-map .gtdm-legend i.gtdm-l1.is-rs.is-may::after{ background:linear-gradient(to right,#fff 50%,#ffb300 50%); } /* 灰色の帯の見本。ピンではないので台形にしない（帯は吹き出しの中のもの）。 ★ 地の色（#f2f4f7）だけでは白い凡例の上でほとんど消える。実測して細い枠を足した */ .gtd-map .gtdm-legend i.gtdm-l1.is-rsband{ width:19px; height:14px; box-shadow:none; background:#f2f4f7; border:1px solid #d8dce3; border-left:3px solid #9aa3ad; border-radius:0 2px 2px 0; } .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; } /* ★ 吹き出しの目印。所在地の下、メモの上 */ /* ★★ 頭に .gtd-map p を付けること（2026-09-05・ご主人様のご指摘で発覚）。 leaflet.css に .leaflet-popup-content p{ margin:1.3em 0 } があり、 クラス1つだけの .gtdm-mark{ margin:4px 0 0 } はそれに負ける。 実測：上下とも 20.29px（＝1.3em）になり、この行だけ行間が開いていた。 隣の .gtdm-meta / .gtdm-memo は最初から .gtd-map p 付きだったので気づけなかった。 */ .gtd-map p.gtdm-mark{ /* 住所・スポット・最寄は1つの組。3行の間を同じ2pxにそろえる */ margin:2px 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; } /* ★★ 開いているときは【幅いっぱいの1行】として置く。 閉じているときは inline-block のまま＝ほかのボタンと同じ列に並ぶ。 これを明示しないと盤が潰れる: 中の .gtdm-rd-panel に container-type を付けた瞬間、 その要素の幅は【中身から決まらなくなる】（inline-size の封じ込め）。 すると shrink-to-fit のこの details は中身の広さを知りようがなく、 見出しのボタンぶん（実測135px）まで縮んだ。 ★ コンテナクエリを使う要素の外側は、幅が中身以外から決まっている必要がある */ .gtd-map details.gtdm-rd[open]{ display:block; flex:1 1 100%; width:100%; order:99; } /* ★ ボタンの見た目は 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; } /* ---- 絞り込みの盤（地方＋街道） ---- */ /* ★ 節の見出し。2つの軸が並ぶので、どこからどこまでが何なのかを必ず書く */ .gtd-map p.gtdm-rd-h{ margin:10px 0 4px; font-size:.82em; font-weight:700; color:#1f2430; border-bottom:1px solid #e6e9ee; padding-bottom:3px; } .gtd-map p.gtdm-rd-h:first-of-type{ margin-top:0; } /* 両方の軸で絞っているときだけ出す注意書き */ .gtd-map .gtdm-rd-and{ display:block; margin-top:3px; color:#a05a00; } /* ★ 2つの節を左右に割る器。スマホは縦積みのまま（既定＝ブロック）。 ★ 判定は画面幅ではなく【この盤自身の幅】で行う。 画面幅で決めると、テーマが本文を細くしている記事で 「パソコンだから」という理由だけで狭い盤を2列に割ってしまう。 ★ コンテナクエリに対応していないブラウザは、この段落ごと読み飛ばして縦積みのまま。 ——つまり今までどおりで、壊れない。これが使える理由 */ .gtd-map .gtdm-rd-panel{ container-type:inline-size; } /* 縦積みのときは、節と節の間を空ける（見出しの margin-top は下で0にしているため） */ .gtd-map .gtdm-rd-sec ~ .gtdm-rd-sec{ margin-top:12px; } .gtd-map .gtdm-rd-sec p.gtdm-rd-h{ margin-top:0; } /* ★ 560px で切り替える理由。左右に割って【縦が縮む】のは、 街道が2列のままでいられる幅があるときだけ。 縦積み … 地方9行 ＋ 街道11行（2列）＝ 20行ぶん 横並び … max(地方9行, 街道11行) ＝ 11行ぶん ← これが狙い 街道が1列に落ちる幅で割ると 21行ぶんになり、【縦積みより悪くなる】。 だから街道の最小列幅（120px）から逆算して、2列が保てる下限をここに置いた。 ——「広いから2列」ではなく「2列にして得があるから2列」 */ @container (min-width:560px){ /* 地方は開閉のつまみぶん、街道は2列ぶんの幅が要るので、街道をやや広く取る */ .gtd-map .gtdm-rd-cols{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.25fr); gap:0 20px; align-items:start; } .gtd-map .gtdm-rd-sec ~ .gtdm-rd-sec{ margin-top:0; } /* ★ 街道は【きっかり2列】に固定する。auto-fill のままだと、 広い画面で3列・5列と増えて1列が細くなり、 いちばん長い「豊前薩摩街道」だけが2行に折り返した（実測1280pxで発生）。 列を増やしても縦は 11行より短くならない（地方が9行あるので）ので、増やす得が無い */ .gtd-map .gtdm-rd-sec-rd .gtdm-rd-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* 左右に割ると縦は半分で済むので、各列はもう少し高く伸ばしてよい */ .gtd-map .gtdm-rd-cols .gtdm-rd-list{ max-height:56vh; } /* ★ 広い画面で名前と件数が離れすぎないよう、地方の列に上限をかける。 1行が横に間延びすると、どの数字がどの地方のものか目で追えなくなる */ .gtd-map .gtdm-rd-sec-rg{ max-width:30em; } } /* ★ 地方は1列。2列にすると開閉のつまみが入りきらず、 名前・件数・つまみが3行に折り返して盤が読めなくなる（実測）。 9行しかないので、1列でも縦は伸びない */ .gtd-map .gtdm-rg-list{ max-height:none; grid-template-columns:1fr; } /* 地方の1件＝チェック＋開閉のつまみ＋（開いたら）県の並び */ .gtd-map .gtdm-rg-grp{ display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; } .gtd-map label.gtdm-rg-one{ flex:1 1 auto; min-width:0; } /* ★ 都道府県の開閉つまみ。以前は「県」という枠付きの箱ボタンで、 ・何が起きるか書いていない（押すと何が出るのか分からない） ・隣のチェックボックスと同じ重みに見えて、押すものだと分からない の2つが同時に起きていた。文字を「▼開く／▶閉じる」にして、箱をやめる。 ★ 箱は外すが、当たり判定は指の幅を保つ（padding は減らさない）。 見た目を軽くするために押しにくくしては、直した意味がない */ .gtd-map button.gtdm-rg-more{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; font-size:.78em; line-height:1; padding:6px 6px; cursor:pointer; border:0; border-radius:5px; background:transparent; color:#2f6fb5; text-decoration:underline; text-underline-offset:2px; } .gtd-map button.gtdm-rg-more:hover{ background:#eef3f9; } .gtd-map .gtdm-rg-ar{ font-size:.9em; line-height:1; text-decoration:none; } .gtd-map button.gtdm-rg-more[aria-expanded="true"]{ color:#1f2430; } .gtd-map .gtdm-rg-pf{ flex:1 1 100%; margin:2px 0 6px 24px; padding:6px 8px; border-left:3px solid #e6e9ee; background:#fafbfc; border-radius:0 6px 6px 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:0 8px; } /* ★★ display を指定した要素は、hidden 属性より display のほうが勝つ。 これが無いと、閉じているはずの県の箱が【空の灰色の帯】として9本並ぶ。 JSで hidden を切り替える要素に display を書いたら、必ずこの1行を対にする */ .gtd-map .gtdm-rg-pf[hidden]{ display:none; } .gtd-map .gtdm-rg-pf label.gtdm-pf-one{ font-size:.82em; padding:3px 2px; } .gtd-map p.gtdm-rg-none{ margin:0; font-size:.8em; color:#6a7280; } .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; } }