/* ===============================
   共通ギャラリー設定
   年・月・日ページすべて対応
   =============================== */

/* ギャラリー全体の ul をフレックス表示 */
ul.year-gallery,
ul.month-gallery,
ul.gallery-container {
    display: flex;            
    flex-wrap: wrap;          
    gap: 15px;                
    list-style: none;         
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    justify-content: center;   /* 中央寄せ */
}

/* li 共通設定 */
ul.year-gallery li,
ul.month-gallery li,
ul.gallery-container li {
    flex: 0 1 150px;          
    text-align: center;       
    list-style: none;
    box-sizing: border-box;
}

/* 年ページのサムネイル */
ul.year-gallery li img {
    max-width: 220px;         
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    margin-bottom: 5px;
    transition: transform 0.2s;
}

ul.year-gallery li img:hover {
    transform: scale(1.05);
}

/* 月ページのサムネイル */
ul.month-gallery li img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    margin-bottom: 5px;
    transition: transform 0.2s;
}

ul.month-gallery li img:hover {
    transform: scale(1.05);
}

/* 日ページのサムネイル */
ul.gallery-container li img {
    max-width: 180px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    margin-bottom: 5px;
    transition: transform 0.2s;
}

ul.gallery-container li img:hover {
    transform: scale(1.05);
}

/* サムネイル下のテキスト（年・月・日名） */
li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: block;
    margin-top: 3px;
}

/* ホバーで文字色を少し変える */
li a:hover {
    color: #0077cc;
}

/* ページ全体の基本スタイル */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #fafafa;
    color: #333;
}

h1 {
    margin-bottom: 20px;
}

/* ===============================
   レスポンシブ対応
   =============================== */
@media (max-width: 1200px) {
    ul.year-gallery li,
    ul.month-gallery li,
    ul.gallery-container li {
        flex: 0 1 140px;
    }
}

@media (max-width: 900px) {
    ul.year-gallery li,
    ul.month-gallery li,
    ul.gallery-container li {
        flex: 0 1 120px;
    }
}

/* スマホ時：1列表示・画像大きめ */
@media (max-width: 600px) {
    ul.year-gallery li,
    ul.month-gallery li,
    ul.gallery-container li {
        flex: 1 1 90%; /* 1列表示＆幅90%で大きめ */
    }
    
    ul.year-gallery li img,
    ul.month-gallery li img,
    ul.gallery-container li img {
        max-width: 100%;
    }
}