park-icons.ts: 公園アイコンを指定のものに差し替え、禁止マークを調整

- ブランコ・草地広場・野外卓を指定のアイコンに変更
- 水飲み・時計・トイレ・東屋をマップ/フキダシ/フィルターで統一
- 健康遊具のアイコンを追加
- ペット・ボール遊び禁止はアイコンに細い×を重ねる
- ボール可・試合形式のみ禁止は「試×」バッジで表示

2 files changed, 100 insertions, 27 deletions

diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro
index a0a26e6..1d72565 100644
--- a/src/components/ParkMap.astro
+++ b/src/components/ParkMap.astro
@@ -127,6 +127,7 @@
     margin-top: 0.1rem;
   }
   :global(.park-popup-ico) {
+    position: relative;
     flex: none;
     display: inline-flex;
     align-items: center;
@@ -163,9 +164,57 @@
     color: #29b6f6;
   }
   :global(.park-popup-ico-pet) {
-    border-color: #ffcc80;
-    background: #fff3e0;
-    color: #ef6c00;
+    border-color: #e0e0e0;
+    background: #fff;
+    color: #6d4c41;
+  }
+  :global(.park-popup-ico-clock) {
+    border-color: #ffe082;
+    background: #fff8e1;
+    color: #f9a825;
+  }
+  :global(.park-popup-ico-toilet) {
+    border-color: #263238;
+    background: #455a64;
+    color: #fff;
+    font-size: 8px;
+  }
+  /* ボール遊びは可で試合形式だけ禁止のときに「試」バッジを並べる */
+  :global(.park-popup-ico-ball) {
+    width: auto;
+    gap: 2px;
+    padding: 0 2px;
+  }
+  :global(.park-popup-mini) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 14px;
+    height: 14px;
+    padding: 0 2px;
+    border: 1px solid #ffcdd2;
+    border-radius: 3px;
+    background: #ffebee;
+    color: #c62828;
+    font-size: 8px;
+    font-weight: 700;
+    line-height: 1;
+  }
+  /* 禁止の項目はアイコンの上に赤い×を重ねる */
+  :global(.park-popup-ico.is-banned) {
+    overflow: hidden;
+  }
+  :global(.park-popup-ico.is-banned)::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background:
+      linear-gradient(45deg, transparent 47%, #d32f2f 47%, #d32f2f 53%, transparent 53%),
+      linear-gradient(-45deg, transparent 47%, #d32f2f 47%, #d32f2f 53%, transparent 53%);
+    pointer-events: none;
   }
   :global(.park-popup-meta) {
     margin-top: 0.1rem;
@@ -1050,9 +1099,6 @@
       value.replace(/[&<>"']/g, (ch) =>
         ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch] as string,
       );
-    // 水飲み場アイコン（線画の水滴。ほかの遊具アイコンと同じ線画スタイル）。
-    const WATER_DROP_ICON =
-      '<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.2 6 7.4 6 10.3a6 6 0 0 1-12 0c0-2.9 2.5-6.1 6-10.3z"/></svg>';
     const buildPopup = (ourName: string, osmName: string, owner = "", mapsQuery = "") => {
       // 市外の近隣公園は kodaira-parks.json にないので、近隣データの属性を使う。
       const rec = parkDataByName.get(ourName) || nearbyInfoByName.get(ourName);
@@ -1096,18 +1142,18 @@
       // 項目名は1文字の文字アイコンで示す（水・ベンチ・池は絵アイコン）。
       const rowIcons: Record<string, string> = {
         遊具: "遊",
-        トイレ: "便",
-        水飲み場: WATER_DROP_ICON,
+        トイレ: "WC",
+        水飲み場: PARK_ICONS.water.svg,
         "ベンチ・椅子": PARK_ICONS.bench.svg,
         野外卓: PARK_ICONS.picnic.svg,
-        "シェルター等": "屋",
-        草地広場: "草",
+        "シェルター等": PARK_ICONS.shelter.svg,
+        草地広場: PARK_ICONS.grass.svg,
         多目的広場: "広",
         築山: PARK_ICONS.mountain.svg,
         じゃぶじゃぶ池: PARK_ICONS.pond.svg,
         ボール遊び: PARK_ICONS.ball.svg,
         ペット: PARK_ICONS.dog.svg,
-        時計: "時",
+        時計: PARK_ICONS.clock.svg,
         防災用具: "災",
       };
       const rows = [
@@ -1126,20 +1172,27 @@
         ["時計", presence("時計", rec?.["時計"])],
         ["防災用具", disaster],
       ].filter(([, value]) => value && String(value).trim());
+      const ROW_MOD: Record<string, string> = {
+        "水飲み場": " park-popup-ico-water",
+        "ベンチ・椅子": " park-popup-ico-bench",
+        "じゃぶじゃぶ池": " park-popup-ico-pond",
+        "ペット": " park-popup-ico-pet",
+        "時計": " park-popup-ico-clock",
+        "トイレ": " park-popup-ico-toilet",
+      };
       const detailHtml = rows
         .map(([label, value]) => {
           const labelText = String(label);
-          const icoClass =
-            labelText === "水飲み場"
-              ? "park-popup-ico park-popup-ico-water"
-              : labelText === "ベンチ・椅子"
-                ? "park-popup-ico park-popup-ico-bench"
-                : labelText === "じゃぶじゃぶ池"
-                  ? "park-popup-ico park-popup-ico-pond"
-                  : labelText === "ペット"
-                    ? "park-popup-ico park-popup-ico-pet"
-                    : "park-popup-ico";
-          return `<div class="park-popup-row" title="${escapePopup(labelText)}"><span class="${icoClass}" role="img" aria-label="${escapePopup(labelText)}">${rowIcons[labelText] || ""}</span><span class="park-popup-val">${escapePopup(String(value))}</span></div>`;
+          const valueText = String(value);
+          const isBall = labelText === "ボール遊び";
+          // ボール遊び全体が禁止ならボールに×、試合形式だけ禁止なら「試」に×を付ける。
+          const banned = isBall ? /禁止/.test(ballText) : /禁止/.test(valueText);
+          let iconHtml = rowIcons[labelText] || "";
+          if (isBall && !banned && /禁止/.test(matchText)) {
+            iconHtml += '<span class="park-popup-mini" title="試合形式は禁止">試×</span>';
+          }
+          const icoClass = `park-popup-ico${ROW_MOD[labelText] || ""}${banned ? " is-banned" : ""}${isBall ? " park-popup-ico-ball" : ""}`;
+          return `<div class="park-popup-row" title="${escapePopup(labelText)}"><span class="${icoClass}" role="img" aria-label="${escapePopup(labelText)}">${iconHtml}</span><span class="park-popup-val">${escapePopup(valueText)}</span></div>`;
         })
         .join("");
       const query = mapsQuery || (ourName ? `小平市${ourName}` : "");
diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
index 88b78eb..a41b00b 100644
--- a/src/components/ParksFilters.astro
+++ b/src/components/ParksFilters.astro
@@ -55,8 +55,8 @@ const facilityTypes = [
   </label>
   <fieldset class="parks-facilities">
     <legend>設備・遊具で絞る</legend>
-    <label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label>
-    <label><input type="checkbox" data-fac-filter value="water" />水飲み</label>
+    <label><input type="checkbox" data-fac-filter value="toilet" /><span class="filter-wc" aria-hidden="true">WC</span>トイレ</label>
+    <label><input type="checkbox" data-fac-filter value="water" /><span class="filter-icon filter-icon-water" set:html={PARK_ICONS.water.svg} />水飲み</label>
     <label>
       <input type="checkbox" data-fac-filter value="picnic" />
       <span class="filter-icon filter-icon-grass" set:html={PARK_ICONS.grass.svg} />草地広場
@@ -65,7 +65,7 @@ const facilityTypes = [
       <input type="checkbox" data-fac-filter value="table" />
       <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />野外卓／縁台
     </label>
-    <label><input type="checkbox" data-fac-filter value="clock" />⏰時計</label>
+    <label><input type="checkbox" data-fac-filter value="clock" /><span class="filter-icon filter-icon-clock" set:html={PARK_ICONS.clock.svg} />時計</label>
     <label>
       <input type="checkbox" data-fac-filter value="sand" />
       <span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場
@@ -99,8 +99,8 @@ const facilityTypes = [
       <span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具
     </label>
     <label><input type="checkbox" data-fac-filter value="basket" />🏀バスケゴール</label>
-    <label><input type="checkbox" data-fac-filter value="shelter" />⛱東屋／シェルター</label>
-    <label><input type="checkbox" data-fac-filter value="health" />💪健康遊具</label>
+    <label><input type="checkbox" data-fac-filter value="shelter" /><span class="filter-icon" set:html={PARK_ICONS.shelter.svg} />東屋／シェルター</label>
+    <label><input type="checkbox" data-fac-filter value="health" /><span class="filter-icon" set:html={PARK_ICONS.health.svg} />健康遊具</label>
     <label><input type="checkbox" data-fac-filter value="special" /><span class="filter-icon" set:html={PARK_ICONS.special.svg} />特殊遊具</label>
   </fieldset>
   <label class="parks-fire-toggle" title="消火栓・防火水槽を地図に表示する">
@@ -196,6 +196,26 @@ const facilityTypes = [
   .filter-icon-grass {
     color: #2e7d32;
   }
+  .filter-icon-water {
+    color: #0277bd;
+  }
+  .filter-icon-clock {
+    color: #f9a825;
+  }
+  .filter-wc {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 14px;
+    flex: none;
+    border-radius: 3px;
+    background: #455a64;
+    color: #fff;
+    font-size: 8px;
+    font-weight: 700;
+    line-height: 1;
+  }
   .filter-icon :global(svg) {
     display: block;
     width: 100%;