@charset "utf-8";

    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
    }

    /* --- 1. サムネイル画像（クリック対象） --- */
    .zoom-trigger {
      cursor: pointer;          
      transition: opacity 0.3s;
      object-fit: cover;
      border: 1px solid #ccc;
    }

    .zoom-trigger:hover {
      opacity: 0.7;
    }

    /* --- 2. モーダルウィンドウ --- */
    dialog {
      padding: 0;
      border: none;
      background: transparent;
      max-width: 100vw;
      max-height: 100vh;
      overflow: hidden;
      outline: none;
      /* 画面全体がクリック可能であることを示すカーソル */
      cursor: pointer;
    }

    /* アニメーション */
    dialog[open] {
      animation: fadeIn 0.25s ease-out;
    }

    /* 背景の暗幕 */
    dialog::backdrop {
      background: rgba(0, 0, 0, 0.65); /* 黒を少し濃くしました */
      animation: fadeIn 0.25s ease-out;
      cursor: pointer; /* 背景でもクリックできることを示す */
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* モーダル内部のレイアウト */
    .modal-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: 100vh;
      /* どこをクリックしても反応するようにパディングをなくす */
      padding: 20px; 
      box-sizing: border-box;
    }

    /* --- ★アスペクト比維持＆最大化 --- */
    #modal-img {
      display: block;
      width: auto;
      height: auto;
      
      /* ボタンが消えたので、画面いっぱいまで使えるように変更 */
      max-width: 95vw; 
      max-height: 95vh; 
      
      object-fit: contain;
      box-shadow: 0 0 25px rgba(0,0,0,0.8);
      user-select: none; /* 画像選択を防ぐ（クリックしやすくするため） */
    }