@charset "utf-8";
 body { font-family: sans-serif; background-color: #f4f4f4; text-align: center; }
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; padding: 20px; }
  .gallery img { width: 100%; height: 150px; object-fit: cover; cursor: pointer; transition: transform 0.3s; border-radius: 5px; }
  .gallery img:hover { transform: scale(1.05); }

  /* モーダル（拡大表示）のスタイル */
  .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 1000; }
  .modal-content { max-width: 90%; max-height: 80%; border: 3px solid white; }
  .close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; }
  .prev, .next { position: absolute; top: 50%; font-size: 40px; color: white; cursor: pointer; padding: 10px; user-select: none; }
  .prev { left: 20px; }
  .next { right: 20px; }