/* ご当地データ 地図 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 #c9b6e6; background:#f6f1fc; border-radius:8px; cursor:pointer; color:#6b21a8; font-weight:700; } /* ★ v3.6.20 見た目は右の欄「近い順」の＋順路（gtdm-nearadd）と同じ薄紫（本人の指示 「地図上のカードの順路ボタンの見た目を近い順のボタンの見た目に合わせたい」）。 同じ働きのボタンは同じ見た目にする */ .gtd-map button.gtdm-add:not(:disabled):not(.is-on):hover{ background:#efe6fa; } .gtd-map button.gtdm-add.is-on{ background:#6b21a8; color:#fff; border-color:#6b21a8; } /* ★ 順路が9件に達したときの「順路に追加」（2026-09-30 ご主人様のご指示）。 押せないことを【押す前に】見せる。押せる見た目のまま何も起きないのがいちばん悪い。 ★ すでに入っているものは disabled にしない——外すのはいつでもできる */ .gtd-map button.gtdm-add:disabled{ background:#f2f4f6; color:#8a94a0; border-color:#e2e6ea; cursor:not-allowed; } /* ---- 順路 ---- */ .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; } /* ★ 距離は青（#1d4ed8）。記事の地図も全画面もそろえる （2026-10-01 ご主人様のご指示「記事の地図の順路の距離も青に揃えて欲しい」）。 */ .gtd-map .gtdm-rt-d{ flex:0 0 auto; font-size:.78em; color:#1d4ed8; font-weight:600; 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; } /* ★ 見ている画面の幅で、要るほうだけ出す（2026-09-30 ご主人様のご指示）。 パソコンの人にスマホの話は要らないし、その逆も要らない。 ★ 端末を見分けるのは【CSSのここ1か所だけ】。JS は両方を書いて渡す。 ★ 768px は「スマホか否か」の目安。細い窓のパソコンには厳しい側（3件まで）が出る。 */ .gtd-map p.gtdm-routelim .gtdm-lim-sp{ display:none; } @media (max-width:767px){ .gtd-map p.gtdm-routelim .gtdm-lim-pc{ display:none; } .gtd-map p.gtdm-routelim .gtdm-lim-sp{ display:inline; } } /* 渡しきれないところだけ赤くする。注意書き全体を赤くすると、 ふつうの状態でも壊れて見える */ .gtd-map p.gtdm-routelim b.is-over{ 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-start; 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)); } /* ★ v3.6.18 ▽（逆三角）にした。△よりピンらしい（本人の指定）。色は border-top-color をJS側から指定する */ .gtd-map .gtdm-p1.is-tri > b{ display:block; width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-top:19px solid #be185d; } .gtd-map .gtdm-p1.is-tri.is-done > b{ border-top-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-start; 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-top: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; } /* v3.6.2〜 訪問記録オフのとき、タイルの「0 / 1」と進み具合の帯は出さない（記録できないのに0件と見えるため） */ .gtd-map .gtdm-pgev.is-norec .gtdm-num, .gtd-map .gtdm-pgev.is-norec .gtdm-den, .gtd-map .gtdm-pgev.is-norec .gtdm-bar{ display:none; } /* ---- 期間限定の一覧（地図の下） ---- */ .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; } /* v3.6.11 ご当地イベントの行は名城などと同じ p.gtdm-meta / b.gtdm-lb を使う（ここで字の形を変えない） */ .gtd-map section.gtdm-ev1 > p.gtdm-evi:last-of-type{ margin-bottom:6px; } /* v3.6.8 全画面の下のカード（ご当地イベント・簡易）。経路案内の小さい字 */ .gtd-map .gtdm-evzli .gtdm-zlgo small{ display:block; font-size:.7em; font-weight:400; opacity:.85; } /* v3.6.13 一覧のご当地イベント：記録できない間はチェックの場所を空けておく（ボタンの位置をそろえる） */ .gtd-map .gtdm-zlck.is-blank{ visibility:hidden; pointer-events:none; } .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; } /* v3.6.2 訪問記録オフのとき：押せない行（見せるだけ） */ .gtd-map div.gtdm-evrow.is-view{ display:flex; align-items:center; gap:10px; font-size:.92em; padding:8px 10px; margin:0 0 4px; background:#fff; border:1px solid #eddbe4; border-radius:8px; color:#1f2430; } .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; /* ★ 一回り小さくして、数字を【中心】に置いた（2026-09-30 ご主人様のご指示）。 28x21 → 24x18（面積で73%）。形（上辺20%の台形）は変えていない。 ★ 前のコメントに「3桁のNoが上辺で切れないよう広く・低くする」とあったが、 これは【誤り】だった。実測して分かったこと： ・ピンに出るのは街道の通しNoではなく【街道内のNo】（noOf は s.kn を返す） ・街道内のNoは最大95。537件すべてが1桁か2桁で、3桁は【1件も無い】 つまり3桁ぶんの幅を空けておく必要は最初から無かった。 3桁が出るのは名城（No200まで）だが、あちらは城の形のピンで別もの。 ★ 実測：24x18・中心で「95」は台形の幅16.5px に対して12.9px（余り3.6px）。 */ width:24px; height:18px; align-items:center; padding-bottom:0; 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{ /* ★ 本体を一回り小さくしたので、印つきも同じ割合で小さくする（2026-09-30）。 33x26 → 29x23。外側に足す輪の太さ（5px）は変えていない。 幅を 28（24×33/28）ではなく29にしたのは、内側が inset:5px で狭まるため。 実測して、2桁が窮屈にならない値を選んでいる。 ★ 下寄せをやめたので padding-bottom も外す（中身は中心に置く） */ width:29px; height:23px; padding-bottom:0; 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; } } /* ========================================================================= v1.58.0 全画面の地図ページ（ショートコードに zenmen="1" と書いた記事だけ） ★ ここから下は【すべて .gtd-map.is-zen の中だけ】に効きます。 zenmen を書かない記事には1つも当たりません（既存の見た目は不変）。 ★ 新しく作った部品は「近い順の一覧」と「下のタブ」の2つだけ。 現在地・順路・足跡カード・記録の控えは、いまあるものをそのまま使います。 ========================================================================= */ /* ---- 画面いっぱいの入れ物 ---- */ .gtd-map.is-zen{ /* ★ 右の欄（近い順・順路）の幅。つまみの位置もこの値を見る。 画面の広さで3通りに変わるが、決めるのはこの変数1つだけ。 */ --gtdm-nearw: min(234px,50%); /* ★ z-index は 9000 → 99990（2026-09-29）。 実機（kakedashi.site）を読んで分かったこと： テーマの #main が position:relative; z-index:0 で 【重なりの入れ物】を作っており、地図の z-index はその中でしか効いていなかった。 外から見ると地図は「#main（z-index 0）の一部」で、 #admin-panel（980）やサイドバー・フッターの部品に負けていた。 ★ だから数字を上げるだけでは直らない。【地図を body の直下へ移す】ほうが本体で、 それは JS 側（initZen）でやっている。ここはその上での順番。 ★ 99990 にしたのは、WordPress の管理バー（#wpadminbar は 99999）より 【下】に留めるため。上に出すと、管理バーの垂れ下がりメニューを覆ってしまう。 */ /* ★ inset:0 だけにしない（2026-09-29）。inset は新しい書き方で、古い端末の ブラウザでは効かない。効かないと position:fixed だけが残り、 地図が記事の中の位置に浮いたままになる（上下に記事が見える形）。 4辺を書いておけば、どちらのブラウザでも画面いっぱいになる。 */ position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:99990; display:flex; flex-direction:column; margin:0; padding:0; background:#fff; } /* WordPressの管理バーが出ているとき（書き手がログイン中）だけ下げる */ .admin-bar .gtd-map.is-zen{ top:32px; } @media screen and (max-width:782px){ .admin-bar .gtd-map.is-zen{ top:46px; } } /* ★ ただし 600px 以下では下げない（2026-09-29 ご主人様のご報告で分かった）。 WordPress 本体の決まりで、600px 以下では #wpadminbar が position:absolute になる ＝【スクロールすると上へ流れて消える】。それなのに 46px 空けたままだと、 バーが流れたあとも隙間が残り、そこから記事の中身が見えてしまう。 ★ 601〜782px ではバーは貼り付いたままなので、46px を残す。 ★ ログアウトしている読者には .admin-bar が付かないので、元々この隙間は出ない。 つまりこれは【書き手が見たときだけの直し】。 */ @media screen and (max-width:600px){ .admin-bar .gtd-map.is-zen{ top:0; } } /* 上のバー＝いまの道具をそのまま横一列に。狭いと横スクロールする */ .gtd-map.is-zen .gtdm-tools{ flex:0 0 auto; margin:0; padding:6px 8px; display:flex; gap:6px; align-items:center; /* ★ 元の .gtdm-tools は flex-wrap:wrap（地図の上で折り返す作り）。 全画面では1行に並べて横に流すので、ここで打ち消す */ flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; background:#fbfaf7; border-bottom:1px solid #d6dbe0; } .gtd-map.is-zen .gtdm-tools::-webkit-scrollbar{ height:4px; } /* ★ 横一列にするので、1つ1つが縮まないようにする。 これが無いと390px幅で3行に折れる（実測） */ .gtd-map.is-zen .gtdm-tools > *{ flex:0 0 auto; } .gtd-map.is-zen .gtdm-wrap{ flex:1 1 auto; position:relative; margin:0; min-height:0; } .gtd-map.is-zen .gtdm-canvas{ height:100%!important; min-height:0!important; border:0; border-radius:0; } /* ★ 地図の暗さは【地図の種類で選ぶ】ようにした（2026-09-30 ご主人様のご指示）。 ・淡色地図 … 素のまま（暗くしない） ・淡色地図（ダーク） … ここで暗くする。全画面の既定 タイルの層にだけ掛けるので、ピン・円・現在地の印は暗くならない。 ★ 濃さを変えるときは、この1行の数字だけ。 前の「弱め」は brightness(.88) saturate(.85) だった。 ご指示は「今よりさらに暗く」なので、そこから一段落とした値にしてある。 */ .gtd-map.is-zen.is-tiledark .leaflet-tile-pane{ filter:brightness(.72) saturate(.60); } /* 出典は地図のすぐ下に細い帯で。規約で表示が要るので消さない。 ★ position:absolute にすると入れ物（画面全体）の下端に貼り付き、 広告やタブと重なる（実測）。並びの一員として置くほうが確実 */ .gtd-map.is-zen .gtdm-credit{ flex:0 0 auto; margin:0; padding:3px 8px; font-size:10px; line-height:1.5; /* ★★ 2026-10-10 下地を暗くした（ご主人様のご決定）。色の決め方は CSS の末尾を見ること。 */ color:rgba(255,255,255,.88); background:#474f55; border-top:1px solid rgba(255,255,255,.14); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ★ リンクの色。222行の .gtd-map p.gtdm-credit a（クラス2＋要素2）に、 こちら（クラス3）が詳細度で勝つ。 */ .gtd-map.is-zen .gtdm-credit a{ color:rgba(255,255,255,.88); } /* 地図の下に積んでいたものは、全画面ではタブで出し分ける */ .gtd-map.is-zen .gtdm-prog, .gtd-map.is-zen .gtdm-gest, .gtd-map.is-zen .gtdm-help{ display:none; } /* ---- 近い順の一覧（新規） ---- */ /* ★ はじめ縦書き（writing-mode）にしたが、4文字のうち2文字しか出なかった（実測）。 縦書きは折り返しの当たり方が端末で変わる。横書き2行のほうが確実で、指にも当てやすい */ .gtd-map.is-zen .gtdm-nearpull{ position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:620; /* ★ 開いているときと同じ【縦1列】にそろえた（2026-09-30）。 閉じているときだけ横に広いと、押したあとに形が変わって別のものに見える。 */ width:1.9em; padding:12px 3px; text-align:center; background:#1f2830; color:#fff; border:0; border-radius:8px 0 0 8px; font-size:11px; line-height:1.35; cursor:pointer; box-shadow:-1px 0 4px rgba(0,0,0,.25); } /* ★ 開いている間も出す（2026-09-30 ご主人様のご指摘「閉じ方が×だけで煩わしい」）。 欄の左隣へ移し、文字は「閉じる」に替える（文字はJSが替える）。 ★ 幅の指定は欄と同じ式にする。片方だけ直すと必ずずれる。 */ .gtd-map.is-zen.is-nearon .gtdm-nearpull{ right:var(--gtdm-nearw); /* ★ 欄（z-index:630）より上に出す。そうしないと欄の下に潜って押せない （実測で踏んだ：クリックが欄に遮られた）。 */ z-index:645; } .gtd-map.is-zen .gtdm-near{ /* ★ 幅は【画面の5割まで】（2026-09-29・ご主人様のご指示）。 390px の端末なら195px。地図が必ず半分は見える */ /* ★ 幅は【変数1つ】で持つ（2026-09-30 ご主人様のご指摘「閉じるボタンの場所がおかしい」）。 欄の幅は画面の広さで3通り（min(234px,50%)／250px／540px）に変わる。 つまみの位置をそれとは別に書いていたので、広い画面でだけ つまみが欄の内側（画面の真ん中あたり）に出ていた。私の書き落としです。 ★ 幅を変えるときは、この変数1つだけを変える。 */ position:absolute; top:0; bottom:0; right:0; width:var(--gtdm-nearw); z-index:630; background:#fff; border-left:2px solid #1f2830; box-shadow:-3px 0 10px rgba(0,0,0,.14); display:flex; flex-direction:column; } /* ★ display:flex を書くと、hidden 属性（＝display:none）が打ち消される。 閉じているのに画面に残り、その裏のつまみが押せなくなる（実測で踏んだ）。 hidden のときは必ず消す */ .gtd-map.is-zen .gtdm-near[hidden]{ display:none; } /* ★ 欄が画面の5割までになったので、見出しは【縦に2段】にする。 横並びのままだと「近い／順」と折り返して読めなくなる（実測） */ .gtd-map.is-zen .gtdm-nearhead{ flex:0 0 auto; display:block; position:relative; margin:0; padding:7px 26px 6px 8px; border-bottom:1px solid #e3e7ea; font-size:13px; line-height:1.35; } .gtd-map.is-zen .gtdm-nearsrc{ display:block; font-size:10px; color:#5a6673; font-weight:400; } .gtd-map.is-zen .gtdm-nearclose{ position:absolute; right:3px; top:3px; margin:0; border:0; background:transparent; font-size:17px; line-height:1; color:#5a6673; cursor:pointer; padding:0 3px; } .gtd-map.is-zen .gtdm-nearlist{ flex:1 1 auto; overflow-y:auto; margin:0; padding:2px 0 8px; list-style:none; -webkit-overflow-scrolling:touch; } .gtd-map.is-zen .gtdm-nearit{ /* ★ baseline をやめて center にした（2026-09-30 ご主人様のご指摘）。 バッジを2行にしたとき、baseline は【バッジの1行目（街道名・9px）】の 文字の下端に揃う。バッジは2行ぶんの高さがあるので、 隣の宿名・距離・チェックだけが上へ持ち上がって見えていた。 高さのそろえ方は「文字の下端」ではなく「箱の中央」が正しい。 */ display:flex; align-items:center; gap:6px; padding:7px 8px; border-bottom:1px dotted #e0e4e8; font-size:12px; cursor:pointer; } .gtd-map.is-zen .gtdm-nearit:hover{ background:#f4f7f9; } .gtd-map.is-zen .gtdm-nearit b{ font-weight:700; } /* ★ 距離は【右端】にそろえる（2026-09-29・ご主人様のご指示）。 間が空きすぎたのは距離の位置ではなく【パネルが広すぎた】ため。 そちらを細くして詰める（下の width）。名前が長いときは名前のほうを省略する */ .gtd-map.is-zen .gtdm-nearit b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gtd-map.is-zen .gtdm-nearkm{ margin-left:auto; padding-left:.5em; color:#5a6673; font-size:11px; white-space:nowrap; } .gtd-map.is-zen .gtdm-neardot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:#7b8794; } .gtd-map.is-zen .gtdm-c-castle{ background:#1f4e9c; } .gtd-map.is-zen .gtdm-c-battle{ background:#b4451f; } .gtd-map.is-zen .gtdm-c-onsen { background:#1f9e7a; } .gtd-map.is-zen .gtdm-c-kaido { background:#7b4bd6; } .gtd-map.is-zen .gtdm-nearnone{ padding:10px; color:#5a6673; font-size:12px; } /* 広い画面では一覧を出したまま、地図を左に寄せる（重ねない） */ @media screen and (min-width:901px){ .gtd-map.is-zen.is-nearon .gtdm-canvas{ width:calc(100% - 250px)!important; } .gtd-map.is-zen{ --gtdm-nearw:250px; } } /* ★ ここに広告の枠の指定が古いまま残っていた（min-height:60px）。 あとから書いた「いちばん上に56px」の指定を、min-height が上回って打ち消し、 実測で60pxになっていた。読み手が二度書きを追わずに済むよう、古いほうを消す。 広告の枠の指定は【下の1か所だけ】にする。 */ /* ---- いちばん下のタブ ---- */ /* ★ 広告とタブの間に余白を入れる。隣り合わせだと、タブを押すつもりで 広告を踏む事故が起きる（誤タップ） */ .gtd-map.is-zen .gtdm-tabs2{ flex:0 0 auto; display:flex; height:56px; border-top:10px solid #f3f1ec; background:#fbfaf7; box-shadow:0 -1px 0 #d6dbe0 inset; } .gtd-map.is-zen .gtdm-tab2{ flex:1; border:0; border-right:1px solid #eceff2; background:transparent; font-size:11px; color:#5a6673; cursor:pointer; padding:0; } .gtd-map.is-zen .gtdm-tab2:last-child{ border-right:0; } /* ★ 選んでいるタブは【濃い灰色の地に白の太字】（2026-09-30 ご主人様のご指示）。 それまでは白地に細い下線だけで、どれを選んでいるか分かりにくかった。 ★ 白字と #2b333c の明暗比は 12.4:1（本文の目安4.5:1を大きく超える）。 ★ 地の色で示すので、下線（box-shadow）は外す。2つで示すと、 上に置いたとき（パソコン）に線の向きまで面倒を見ることになる。 */ .gtd-map.is-zen .gtdm-tab2.is-on{ color:#fff; font-weight:700; background:#2b333c; box-shadow:none; } /* ★ 広い画面ではタブを【上】に置く（2026-09-30 ご主人様のご指示）。 パソコンは横に広く縦が短い。下に置くと、地図の下端＝いちばん見たいところの すぐ隣に操作の帯が来る。上は元々空いているので、そちらへ回す。 ★ やり方は order:-1 だけ。骨組み（HTML）は動かさない—— HTMLを組み替えると、読み上げの順番と Tab キーの順番まで変わる。 order は見た目の順番だけを変え、読み上げ順は元のままにする。 ★ 下にあった帯の線・影・選んでいる印は、上下がひっくり返るので付け替える。 */ @media screen and (min-width:1180px){ .gtd-map.is-zen .gtdm-tabs2{ order:-1; border-top:0; border-bottom:1px solid #d6dbe0; box-shadow:0 1px 0 #d6dbe0 inset; } /* ★ 線は使わない（地の色で示すようにしたので、上下の向きを気にしなくてよくなった） */ } /* ---- タブごとの出し分け ---- */ /* 地図のタブ：地図だけ。ほかのパネルは畳む */ .gtd-map.is-zen.is-pane-map .gtdm-stack, .gtd-map.is-zen.is-pane-map .gtdm-legend{ display:none; } /* 足跡カード・設定：地図を小さくして、下にパネルを出す。 ★ 順路は【右の欄の下段】へ移したので、ここでは扱わない。 以前ここに .gtdm-routehost の display:none を書いていて、 右へ移した順路がまるごと消えていた（実測で踏んだ） */ .gtd-map.is-zen.is-pane-card .gtdm-wrap, .gtd-map.is-zen.is-pane-set .gtdm-wrap{ flex:0 0 34vh; } .gtd-map.is-zen.is-pane-card .gtdm-stack, .gtd-map.is-zen.is-pane-set .gtdm-stack, .gtd-map.is-zen.is-pane-set .gtdm-legend{ flex:1 1 auto; overflow-y:auto; margin:0; padding:8px 10px; -webkit-overflow-scrolling:touch; } .gtd-map.is-zen.is-pane-card .gtdm-legend{ display:none; } /* ---- 拡大縮小の段階（全画面のときだけ・2026-09-29 ご主人様の指定） ---- ∧ ／ 全国 ／ 地方 ／ 広域 ／ 標準 ／ 詳細 ／ ∨ を縦に1本。 Leaflet の既定の＋−は JS 側で外している（2か所あると迷うため） */ .gtd-map.is-zen .gtdm-zoomx{ background:#fff; border-radius:8px; overflow:hidden; } .gtd-map.is-zen a.gtdm-zx{ /* ★ 左右を細くした（2026-09-29 ご主人様のご指示）。 min-width 56px → 40px、左右の余白 8px → 5px。 字は「全国」など2文字＝22pxなので、40pxでも切れない（実測で確かめた）。 上下（7px）は指で押す高さなので【変えない】。 */ display:block; width:auto; min-width:40px; height:auto; padding:7px 5px; font-size:11px; line-height:1.2; text-align:center; color:#1f2830; background:#fff; border-bottom:1px solid #dfe4e8; text-decoration:none; white-space:nowrap; } .gtd-map.is-zen a.gtdm-zx:last-child{ border-bottom:0; } .gtd-map.is-zen a.gtdm-zx:hover{ background:#eef3f6; } /* ∧と∨は大きめに。指で押す回数が多い （2026-09-29 ＋／− から記号を変えた。理由は JS 側の注記のとおり） */ .gtd-map.is-zen a.gtdm-zx-up, .gtd-map.is-zen a.gtdm-zx-dn{ font-size:17px; padding:3px 5px; font-weight:700; } /* いまいる段階を光らせる */ .gtd-map.is-zen a.gtdm-zx-step.is-on{ background:#1f2830; color:#fff; font-weight:700; } /* ★ 現在地（◎）の幅を、上の柱とそろえる（2026-09-29 ご主人様のご指示）。 ◎は「−」の下に並ぶので、幅が違うと段差になる。44px は上の柱と同じ数字。 高さは 30px → 34px（横に広げた分、正方形に近い形を保つ）。 ★ 全画面のときだけ。zenmen を書かない記事の◎は 30×30px のまま（実測で確かめた）。 */ .gtd-map.is-zen a.gtdm-loc{ width:44px; height:34px; line-height:34px; border-radius:8px; } /* ---- 右の欄を上下2段に（2026-09-29 ご主人様のご指示） ---- 上＝近い順（8件）／下＝順路。どちらも中でスクロールする */ .gtd-map.is-zen .gtdm-nearsec{ flex:0 0 auto; display:flex; flex-direction:column; min-height:0; max-height:52%; border-bottom:8px solid #f3f1ec; } .gtd-map.is-zen .gtdm-routesec{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow:hidden; } .gtd-map.is-zen .gtdm-routeslot{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* 順路のパネルは地図の上に浮く作りだったので、欄の中では素直に流す */ .gtd-map.is-zen .gtdm-routeslot .gtdm-routehost, .gtd-map.is-zen .gtdm-routeslot .gtdm-routebox{ position:static; margin:0; width:auto; max-width:none; box-shadow:none; border:0; } .gtd-map.is-zen .gtdm-routeslot .gtdm-routebox{ padding:6px 8px; } /* 見出しは2段とも同じ形 */ .gtd-map.is-zen .gtdm-routesec .gtdm-nearhead{ border-bottom:1px solid #e3e7ea; } /* ---- 近い順から順路へ入れる（2026-09-29 ご主人様のご指示） ---- */ /* ★ 「＋」1文字から【字の入ったボタン】にした（2026-10-01 ご主人様のご指示）。 ・押せる物だと見た目で分かるよう、枠と下地を付ける ・幅は中身まかせ（width は決め打ちにしない）。「＋順路」「外す」「満」で 字数が違うため、決め打ちにするとどれかがはみ出す ・★ テーマの button の指定に負けないよう、大きさも余白もここで書き切る */ .gtd-map.is-zen button.gtdm-nearadd{ flex:0 0 auto; margin:0 0 0 5px; padding:3px 5px; width:auto; min-width:0; border:1px solid #c9b6e6; border-radius:6px; background:#f6f1fc; color:#6b21a8; font-size:11px; font-weight:700; line-height:1.2; white-space:nowrap; cursor:pointer; -webkit-appearance:none; appearance:none; } .gtd-map.is-zen button.gtdm-nearadd:hover{ background:#efe6fa; } /* 入っているものは「外す」。色でも入切が分かるようにする */ .gtd-map.is-zen button.gtdm-nearadd.is-on{ border-color:#6b21a8; background:#6b21a8; color:#fff; } /* 上限で入らないものは押せない形に。ただし読めなくはしない */ .gtd-map.is-zen button.gtdm-nearadd[disabled]{ border-color:#e2c6c9; background:#fbf2f3; color:#b9202e; cursor:default; } .gtd-map.is-zen .gtdm-nearit.is-inroute{ background:#eef6f2; } .gtd-map.is-zen .gtdm-nearit.is-inroute b{ color:#1f6b4d; } /* ★ 順路が9件に達したら、入っていない行は【入れられない】と分かる形にする。 ただし灰色にして読めなくはしない——順路に入れられなくても、 近い順の一覧そのものは「どこが近いか」を見る道具として使えるため。 ★ 押しても地図は動かさない。動くと「入った」と読み違えるため */ /* 右の欄では「閉じる」は要らない（常に出したままなので） */ .gtd-map.is-zen .gtdm-routeslot .gtdm-routeclose{ display:none; } /* 右の欄は234pxしかない。順路の行はそのままだと窮屈なので、この欄でだけ詰める */ .gtd-map.is-zen .gtdm-routeslot .gtdm-routebox{ padding:4px 6px; font-size:11px; } .gtd-map.is-zen .gtdm-routeslot .gtdm-routelist{ font-size:11px; } .gtd-map.is-zen .gtdm-routeslot .gtdm-routelist li{ padding:5px 2px; } .gtd-map.is-zen .gtdm-routeslot button.gtdm-btn, .gtd-map.is-zen .gtdm-routeslot .gtdm-routelist button{ min-height:0; padding:3px 6px; font-size:11px; border-radius:6px; } /* ★ 案内のボタンは、順路が何件あっても【いつも見える】ようにする。 下までスクロールしないと押せないのでは「最後に案内を押す」流れにならない */ .gtd-map.is-zen .gtdm-routeslot .gtdm-act{ position:sticky; bottom:0; z-index:2; display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 0; padding:6px 0 2px; background:#fff; box-shadow:0 -7px 8px -7px rgba(0,0,0,.18); } .gtd-map.is-zen .gtdm-routeslot .gtdm-act > *{ flex:1 1 auto; text-align:center; } /* 案内のボタンは目立たせる。この欄のいちばん下の行き先 */ .gtd-map.is-zen .gtdm-routeslot a.gtdm-gomap{ flex:1 1 100%; background:#1f6b4d; color:#fff; border-color:#1f6b4d; font-weight:700; padding:7px 6px; } /* 注意書きは小さく（幅が狭いので3行にもなる） */ .gtd-map.is-zen .gtdm-routeslot .gtdm-routewarn, .gtd-map.is-zen .gtdm-routeslot .gtdm-routenote{ font-size:10px; line-height:1.5; } /* ---- 広告はいちばん上に細く1本（2026-09-29 ご主人様の決定） ---- */ /* ★ 広告の帯は【いちばん下・下タブのさらに下】（2026-09-30 ご主人様のご指示）。 スポーツナビの野球の画面と同じ形。常に出ているが、操作の邪魔はしない。 ★ 高さは中身に任せる（貼る広告ユニットの大きさで決まる）。 ただし100pxを超えたら切る——地図がそれ以上狭くなると、道具として弱くなる。 ★ 置かなければ is-empty が付いて枠ごと消える（そのぶん地図が広がる）。 */ .gtd-map.is-zen .gtdm-zad{ flex:0 0 auto; max-height:100px; overflow:hidden; display:flex; align-items:center; justify-content:center; /* ★★ 2026-10-10 下地を暗くした（ご主人様のご決定）。色の決め方は CSS の末尾を見ること。 ★ color は【広告が入らなかったときに見える予備の文字色】。地が暗くなるので合わせる。 */ border-top:1px solid rgba(255,255,255,.14); background:#474f55; font-size:11px; color:rgba(255,255,255,.55); } /* 広い画面では出さない（あちらは右の欄の下に置く。1画面に2つは要らない） */ @media screen and (min-width:1180px){ .gtd-map.is-zen .gtdm-zad{ display:none; } } /* ---- ピンを押したときの詳細は画面の下に（2026-09-29 ご主人様の決定） ---- ★ 吹き出しの代わり。出る場所を1つに決めたので、ピンが端にあっても見切れず、 開いても地図が動かない。高さは画面の45%まで。 */ .gtd-map.is-zen .gtdm-sheet{ /* ★ 下のタブ（56px＋上の余白10px）＋【出典の行（22px）】の上に出す。計88px。 bottom:0 にするとタブが隠れて、足跡カードや設定へ行けなくなる（実測で踏んだ）。 ★ 66px だと出典の行に12px かぶさっていた（実測）。地理院タイルの決まりで 「測量成果が表示されている間は常に見えるように出典を明示する」ことになっているので、 カードで隠してはいけない。22px は幅320〜1280pxのどこでも変わらないことを確かめた */ /* ★ 下端の基準は【タブ56＋余白10＋出典22＝88px】に、広告の帯の高さを足したもの。 広告は貼るユニットで高さが変わるので、JS が測って --gtdm-adh に入れる（既定0）。 */ position:absolute; left:0; right:0; bottom:calc(88px + var(--gtdm-adh, 0px)); z-index:640; max-height:45%; display:flex; flex-direction:column; background:#fff; border-top:2px solid #1f2830; border-radius:12px 12px 0 0; box-shadow:0 -4px 14px rgba(0,0,0,.16); /* ★ 下のタブをやめたので、その分（56＋余白10＝66px）を引く（2026-10-01）。 タブを上の帯へ移したのに、ここは下タブがある前提の88pxのままで、 カードが66px浮いていた。私の直し忘れです。 残すのは出典の行の22px——地理院タイルの決まりで、 測量成果が出ている間は出典が見えていなければならないため。 */ bottom:calc(22px + var(--gtdm-adh, 0px)); } .gtd-map.is-zen .gtdm-sheet[hidden]{ display:none; } .gtd-map.is-zen .gtdm-sheet.gtdm-rs-pop{ border-top-color:#c0392b; } .gtd-map.is-zen .gtdm-sheetclose{ position:absolute; right:6px; top:4px; z-index:2; border:0; background:transparent; font-size:20px; line-height:1; color:#5a6673; cursor:pointer; padding:2px 6px; } .gtd-map.is-zen .gtdm-sheetbody{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 12px 12px; } /* 吹き出しの中身をそのまま入れているので、吹き出し用の幅の決めごとを打ち消す */ .gtd-map.is-zen .gtdm-sheetbody .gtdm-pop{ max-width:none; width:auto; } .gtd-map.is-zen .gtdm-sheetbody .gtdm-pi{ font-size:.95em; } /* 右の欄が出ているときは、その左側に収める（重ならない） */ .gtd-map.is-zen.is-nearon .gtdm-sheet{ right:min(234px,50%); } /* ★ パソコンではカードを【地図の右下に浮かせる】（2026-09-29 ご主人様のご決定・案A）。 スマホと同じ「画面いっぱいの帯」のままだと、横1280pxの画面では カードが下を占領して地図がほとんど見えなくなる（ご指摘のとおり実測で踏んだ）。 ★ スマホ（900px以下）は今までどおり【下の帯】。狭い画面で右下に寄せると、 かえって字が詰まって読めなくなるため、ここは分ける。 */ @media screen and (min-width:901px){ .gtd-map.is-zen .gtdm-sheet{ /* 右の欄（250px）の左どなり・下のタブの上。左端は空けて地図を見せる */ left:auto; right:8px; width:400px; bottom:calc(88px + var(--gtdm-adh, 0px)); max-height:56%; border:2px solid #1f2830; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.20); } .gtd-map.is-zen.is-nearon .gtdm-sheet{ right:258px; } } /* ---- 「経路案内（Googleマップ）」をボタンの形に（2026-09-29 ご主人様のご指示） ---- ★ 全画面の下のカードの中だけ。いまの地図記事の吹き出しは1バイトも変えない。 ★ 大きさは「訪問」「順路に追加」とそろえ、色だけ変えて役割の違いを示す。 ★ Google のロゴ画像は使わない（勝手に使えないため）。文字だけで示す。 */ .gtd-map.is-zen .gtdm-sheetbody .gtdm-act a.gtdm-go{ /* ★ 大きさ（font-size／padding／min-height）はここに書かない。 「訪問」「順路に追加」と同じ大きさにするのが目的なので、 すでにある .gtdm-pi:not(.is-short) の行（font-size:.98em／min-height:40px／padding:8px 16px） に任せる。ここで数字を書くと、それを打ち消して小さくなる（実測 36px 対 43px）。 font:inherit も書かない。a は元から受け継ぐので要らず、書くと上の .98em を 打ち消して字だけ大きくなる（実測 15.2px 対 14.9px）。 */ display:inline-flex; align-items:center; justify-content:center; border:1px solid #1f6b4d; background:#1f6b4d; color:#fff; border-radius:8px; text-decoration:none; cursor:pointer; /* ★ 2行にする（2026-09-29 ご主人様のご指示）。 上＝経路案内／下＝Googleマップ（小さく）。横幅が縮み、同じ行に並ぶ。 */ flex-direction:column; justify-content:center; gap:0; line-height:1.18; padding-top:4px; padding-bottom:4px; /* ★ 縦幅は「訪問」にそろえる。数字は書かず、同じ行の高さいっぱいに伸ばす。 こうすると「訪問」の高さが変わっても勝手についてくる（実測で一致を確かめている） */ align-self:stretch; } .gtd-map.is-zen .gtdm-sheetbody .gtdm-act a.gtdm-go .gtdm-gomain{ font-weight:700; } .gtd-map.is-zen .gtdm-sheetbody .gtdm-act a.gtdm-go .gtdm-gosub{ font-size:.74em; font-weight:400; letter-spacing:.01em; opacity:.92; } .gtd-map.is-zen .gtdm-sheetbody .gtdm-act a.gtdm-go:hover{ background:#185a40; border-color:#185a40; } /* 「記事を読む」はリンクのままでよい（押す頻度が違うので同じ形にしない） */ .gtd-map.is-zen .gtdm-sheetbody .gtdm-act a:not(.gtdm-go){ font-size:.86em; color:#8b3a3a; } /* ---- 道具バーのボタンを2行に（2026-09-29 ご主人様のご指示・全画面のときだけ） ---- 上に短い言葉、下に小さく補いの言葉。実測で 831px → 604px（27%減）。 ★ 文字の入れ替えは JS が全画面のときだけ行う。PHP の文字は触っていないので、 いまの地図記事のボタンは1バイトも変わらない。 ★ 高さ（padding 4px＋行間1.15）は指で押せる大きさを保つために決めた。 */ .gtd-map.is-zen .gtdm-tools .gtdm-btn.is-2l, .gtd-map.is-zen .gtdm-tools .gtdm-rd-btn.is-2l{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15; padding-top:4px; padding-bottom:4px; gap:0; } .gtd-map.is-zen .gtdm-tools .gtdm-2ls{ font-size:.74em; font-weight:400; opacity:.85; } /* ---- 種類のチップは【地図の上】に重ねる（2026-09-29 ご主人様のご決定） ---- ★ 道具バーとは分ける。バーに入れると4つで214px使い、スマホでは他を押し出す（実測）。 ★ 左は 62px 空ける。拡大縮小の柱（左10px・幅44px）と重ならないようにするため。 ★ z-index は下のカード（640）より下、地図の部品より上。 */ .gtd-map.is-zen .gtdm-zcat{ position:absolute; top:8px; left:62px; right:8px; z-index:620; /* ★ 2行にした（2026-09-30 ご主人様のご指示）。 1行目＝地図の種類と、訪問での絞り／2行目＝種類のチップ。 選び箱とチップは押し方が違う（選ぶ・押して入切）ので、行を分ける。 */ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:1px 0; } /* 1行ぶん。中身が多いときは【その行の中だけ】横に流す */ .gtd-map.is-zen .gtdm-zcrow{ display:flex; gap:6px; align-items:center; max-width:100%; overflow-x:auto; overflow-y:hidden; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .gtd-map.is-zen .gtdm-zcrow::-webkit-scrollbar{ display:none; } .gtd-map.is-zen .gtdm-zcat::-webkit-scrollbar{ display:none; } /* 右の欄を出しているときは、その左までにとどめる（チップが欄の下に潜らない） */ .gtd-map.is-zen.is-nearon .gtdm-zcat{ right:min(240px,52%); } @media screen and (min-width:901px){ .gtd-map.is-zen.is-nearon .gtdm-zcat{ right:258px; } } /* ★ 地色はピンと同じ色・字は白（2026-09-29 ご主人様のご指示）。 色の値は JS が塗る（ピンの色と1か所で持つため、CSSに書き写さない）。 ここは形と大きさだけを決める。 */ .gtd-map.is-zen .gtdm-zc{ flex:0 0 auto; font:inherit; font-size:12px; line-height:1; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:7px 13px; min-height:32px; border-radius:999px; border:1px solid transparent; background:#5f6570; color:#fff; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.26); } /* 隠している種類。色だけに頼らず【取り消し線】でも示す（進捗タイルと同じ決まり） */ .gtd-map.is-zen .gtdm-zc.is-off{ text-decoration:line-through; font-weight:400; } .gtd-map.is-zen .gtdm-zc:hover{ filter:brightness(1.12); } /* ---- 地図の種類を、この列の【先頭】に置く（2026-09-30 ご主人様のご指示） ---- 道具バーから