/* 全体の基本スタイル */
body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}

header, footer {
    text-align: center;
    padding: 20px;
    background-color: #fff;
}

main {
    padding: 20px;
}

/* ギャラリーのスタイル */
.gallery {
    display: flex;
    flex-wrap: wrap; /* アイテムを折り返す */
    gap: 30px; /* アイテム間の隙間 */
    justify-content: center; /* 中央揃え */
}

/* ギャラリーアイテム（リンク）のスタイル */
.gallery-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-decoration: none;
    color: inherit;
    width: 300px; /* アイテムの幅を固定 */
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
}

.gallery-item:hover {
    transform: scale(1.05); /* マウスを乗せると少し拡大 */
}

.gallery-item img {
    width: 100%;
    /* 高さを固定して、サムネイルのサイズを統一します */
    height: 180px; 
    /* 画像の比率を保ったまま、領域を埋め尽くすように表示します */
    object-fit: cover; 
    /* 画像の中央部分が表示されるようにします */
    object-position: center;
    display: block;
}

.gallery-item h3 {
    /* パディングを item-info に移し、下方向の余白だけ設定 */
    margin: 0 0 0.5rem 0; 
    font-size: 1.2rem;
}

/* ▼▼▼ 以下を追記してください ▼▼▼ */

.gallery-item .item-info {
    padding: 1rem; /* 内側の余白 */
    text-align: center; /* 元のh3のスタイルを引き継ぎ、テキストを中央揃え */
}

.gallery-item .date {
    display: inline-block;
    font-size: 0.8rem;
    color: #4A5568; /* 落ち着いたテキスト色 */
    background-color: #E2E8F0; /* 明るいグレーの背景 */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* 角を丸くしてカプセル型に */
    margin: 0;
    font-weight: 500;
}
/* ▲▲▲ ここまで追記 ▲▲▲ */

.subtitle {
    color: #666;
    font-size: 1.1em;
}

.site-description {
    background-color: #e0f7fa; /* 薄い水色の背景 */
    padding: 20px;
    margin: 20px auto; /* 上下20px、左右自動で中央寄せ */
    max-width: 800px; /* 最大幅を設定 */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    line-height: 1.6;
    color: #333;
}

.site-description p {
    margin-bottom: 10px;
}

.site-description p:last-child {
    margin-bottom: 0;
}

.sub-info {
    font-size: 0.9em; /* 少し小さく */
    color: #777; /* 落ち着いた色 */
    margin-top: -5px; /* 上の要素との間隔を詰める */
    margin-bottom: 5px;
}