/* 全体のリセット */
body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: #f9f9f9;
}

/* ページ全体の幅制限 */
.container {
    max-width: 800px;
    margin: 0 auto; /* 中央寄せ */
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* タイトル部分 */
header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}

/* 写真ギャラリーのレイアウト（フレックスボックス） */
.gallery {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 20px; /* 写真同士の隙間 */
}

/* 各写真の枠（3枚並びにするための計算） */
.photo-item {
    width: calc((100% - 40px) / 3); /* (全体 - 隙間2つ分) ÷ 3 */
    box-sizing: border-box;
    text-align: center;
}

/* 写真そのものの設定 */
.photo-item img {
    width: 100%;
    height: 200px; /* 高さを揃える場合。不要なら削除してください */
    object-fit: cover; /* 写真の比率を保ったまま枠を埋める */
    border-radius: 8px;
}

/* 花の名前のテキスト */
.flower-name {
    margin-top: 10px;
    font-weight: bold;
    color: #333;
}

/* スマホ対応：画面が狭いときは1枚にする */
@media (max-width: 600px) {
    .photo-item {
        width: 100%;
    }
}