diff --git a/map4.js b/map4.js
index ca81a1c..89f0b89 100644
--- a/map4.js
+++ b/map4.js
@@ -31,32 +31,29 @@
   const p = new URLSearchParams(location.search);
   currentGroup = p.get("group");
   currentUser = p.get("user");
-
   document.getElementById("groupName").textContent = currentGroup;
   document.getElementById("userName").textContent = currentUser;
 }
 
-// ==================================================
-// 安定するラベル付きピン
-// ==================================================
+// ===================================
+// ピンデザインを統一（かわいい青ピン）
+// ===================================
 function createLabeledMarker(lat, lng, name, isSelf) {
+  const pinColor = isSelf ? "#4ba3ff" : "#58c16b";
+
   const iconHtml = `
-    <div style="transform: translate(-20px, -55px); position: relative;">
-      <img src="${
-        isSelf
-          ? "https://maps.gstatic.com/mapfiles/kml/paddle/blu-stars.png"
-          : "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png"
-      }" style="width:40px;">
-      <div class="marker-label">${name}</div>
+    <div class="pin-wrapper">
+      <div class="pin-dot" style="background:${pinColor};"></div>
+      <div class="pin-label">${name}</div>
     </div>
   `;
 
   return L.marker([lat, lng], {
     icon: L.divIcon({
-      className: "",
+      className: "custom-pin",
       html: iconHtml,
-      iconSize: [40, 55],
-      iconAnchor: [20, 55],
+      iconSize: [1, 1],
+      iconAnchor: [0, 0]
     })
   });
 }
@@ -79,12 +76,18 @@
   L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
     maxZoom: 19,
   }).addTo(map);
+
+  // ズームごとにピン縮小（自然な大きさ）
+  map.on("zoom", () => {
+    const zoom = map.getZoom();
+    const scale = zoom / 16; // 基準は16
+    document.documentElement.style.setProperty("--pin-scale", scale);
+  });
 }
 
 // ===================================
 async function saveMyLocation(lat, lng) {
-  await supa
-    .from("locations")
+  await supa.from("locations")
     .delete()
     .eq("group_name", currentGroup)
     .eq("device_id", deviceId);
@@ -101,7 +104,6 @@
 // ===================================
 function renderSelfMarker() {
   if (selfMarker) map.removeLayer(selfMarker);
-
   selfMarker = createLabeledMarker(lastLat, lastLng, currentUser, true);
   selfMarker.addTo(map);
 
@@ -118,35 +120,30 @@
   Object.values(latestByDevice).forEach(row => {
     const li = document.createElement("li");
 
-    // オンライン判定
-    const updated = new Date(row.updated_at);
-    const diff = (Date.now() - updated) / 1000;
+    const diff = (Date.now() - new Date(row.updated_at)) / 1000;
     const isOnline = diff < 30;
 
     li.classList.add(isOnline ? "online" : "offline");
 
-    // 丸アイコン
     const icon = document.createElement("div");
     icon.className = "member-icon";
 
-    // 名前
     const name = document.createElement("span");
     name.textContent = row.user_name;
 
-    // オンライン/オフライン文字
     const status = document.createElement("span");
     status.className = "status-text";
     status.textContent = isOnline ? "🟢オンライン" : "🔴オフライン";
 
     li.append(icon, name, status);
 
-    // ピンへ移動
     li.onclick = () => {
-      if (row.device_id === deviceId) {
-        selfMarker.fire("click");
-      } else {
-        const mk = otherMarkers.find(m => m._deviceId === row.device_id);
-        if (mk) mk.fire("click");
+      const marker = (row.device_id === deviceId)
+        ? selfMarker
+        : otherMarkers.find(m => m._deviceId === row.device_id);
+
+      if (marker) {
+        map.panTo(marker.getLatLng(), { animate: true, duration: 0.5 });
       }
     };
 
@@ -156,8 +153,7 @@
 
 // ===================================
 async function showOtherUsers() {
-  const { data } = await supa
-    .from("locations")
+  const { data } = await supa.from("locations")
     .select("*")
     .eq("group_name", currentGroup)
     .order("updated_at", { ascending: false });
@@ -211,27 +207,22 @@
 
   await showOtherUsers();
 
-  // 位置更新
   setInterval(async () => {
     try {
       const pos = await getPosition();
       lastLat = pos.latitude;
       lastLng = pos.longitude;
-
       renderSelfMarker();
       await saveMyLocation(lastLat, lastLng);
     } catch {}
   }, 8000);
 
-  // 他ユーザー更新
   setInterval(showOtherUsers, 2000);
 
-  // 退出
   document.getElementById("exitBtn").onclick =
     () => (location.href = "index.html");
 
-  // 中央ズレ対策
-  setTimeout(() => map.invalidateSize(), 400);
+  setTimeout(() => map.invalidateSize(), 300);
 }
 
 window.addEventListener("DOMContentLoaded", main);