/* styles.css */

/* styles.css */

/* ギャラリーのスタイル */
.gallery {
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 自動でカラムを作成 */
    gap: 10px; /* 画像間の隙間 */
    padding: 10px; /* ギャラリーの内側のパディング */
}

/* ギャラリー内の画像のスタイル */
.gallery-item {
    width: 100%; /* ギャラリーアイテムはグリッドアイテムとしてサイズ調整 */
    height: 150px; /* 正方形のサイズ */
    display: flex; /* フレックスボックスで中央に配置 */
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    overflow: hidden; /* コンテナからはみ出した部分は隠す */
    cursor: pointer; /* クリックできることを示す */
    object-fit: contain;
}

/* モーダル全体のスタイル */
.modal {
    display: none; /* 初回読み込み時は非表示 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    flex-direction: column; /* 縦方向にアイテムを配置 */
}

/* モーダル内のコンテンツ（画像）のスタイル */
.modal-content {
    max-width: 95%;
    max-height: 90%;
    border:15px solid #eee;
}

/* キャプションのスタイル */
#caption {
    margin-top: 10px; /* 画像との間にスペースを追加 */
    color: #eee; /* キャプションの文字色 */
    text-align: center; /* キャプションを中央揃え */
    font-size: 16px; /* フォントサイズの調整 */
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #eee;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #888;
    text-decoration: none;
    cursor: pointer;
}

/* メディアクエリで画面サイズに応じたレイアウトを設定 */

/* スマートフォン（600px以下）の場合 */
@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 1カラム幅を小さくする */
    }

    .gallery-item {
        height: 100px; /* アイテムの高さを小さくする */
    }
}

/* タブレット（600px〜900px）の場合 */
@media (min-width: 601px) and (max-width: 900px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 中程度のカラム幅 */
    }

    .gallery-item {
        height: 150px; /* アイテムの高さを中程度にする */
    }
}

/* デスクトップ（900px以上）の場合 */
@media (min-width: 901px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 幅の広いカラム */
    }

    .gallery-item {
        height: 200px; /* アイテムの高さを大きくする */
    }
}