diff --git a/map.js b/map.js
index c87fe68..4b0111c 100644
--- a/map.js
+++ b/map.js
@@ -257,20 +257,39 @@
       iconAnchor: [16, 32],
       popupAnchor: [0, -32]
     });
+    
+function openModal(imageSrc) {
+  const modal = document.getElementById('image-modal');
+  const modalImage = document.getElementById('modal-image');
+  modalImage.src = imageSrc;
+  modal.style.display = 'block';
+}
 
-    const marker = L.marker([snack.lat, snack.lng], { icon: markerIcon }).addTo(map);
-    const popupContent = `
-      <div class="popup-content">
-        <h3>${snack.name}</h3>
-        <p>${snack.description1}</p>
-        <p>${snack.description2}</p>
-        <p>${snack.description3}</p>
-        <p>${snack.mama}</p> 
-        <img src=${snack.img1} width="96" height="65">
-        <img src=${snack.img2} width="96" height="65">
-        <button onclick="addToFavorites('${snack.name}')">気になるお店リストに追加</button>
-      </div>
-    `;
+function closeModal() {
+  const modal = document.getElementById('image-modal');
+  modal.style.display = 'none';
+}
+
+window.onclick = function(event) {
+  const modal = document.getElementById('image-modal');
+  if (event.target === modal) {
+    modal.style.display = 'none';
+  }
+};
+
+const marker = L.marker([snack.lat, snack.lng], { icon: markerIcon }).addTo(map);
+   const popupContent = `
+  <div class="popup-content">
+    <h3>${snack.name}</h3>
+    <p>${snack.description1 || ''}</p>
+    <p>${snack.description2 || ''}</p>
+    <p>${snack.description3 || ''}</p>
+    <p>${snack.mama || ''}</p>
+    <img src="${snack.img1}" width="96" height="65" onclick="openModal('${snack.img1}')" style="cursor: pointer;" />
+    <img src="${snack.img2}" width="96" height="65" onclick="openModal('${snack.img2}')" style="cursor: pointer;" />
+    <button onclick="addToFavorites('${snack.name}')">気になるお店リストに追加</button>
+  </div>
+`;
     marker.bindPopup(popupContent);
     markers.push({ marker, name: snack.name });
   });