.container {
    padding: 0px;     /* 左右に少し余白を作って、文字が画面端に張り付くのを防ぐ */
}

/* --- 全体のレイアウト --- */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: center; /* 中央寄せ */
}

.header-logo img {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin-bottom: -20px;
    margin-top: -20px;
}

.message {
    text-align: center;
    font-size: 0.8em;
    color: #F4F1EA;
    width: 90%;          
    max-width: 500px;     
    margin: 0px auto;
    padding: 3px; /* 内側の余白 */
    border: 0px solid #444;    /* 枠線の太さと色 */
    border-radius: 8px;       /* 角を丸くします */
    background-color: #242424; /* 背景を少しだけ明るいグレーにして枠を際立たせます */
}

/* --- ポラロイドの基本設定 --- */
.photo-item {
    width: 220px; /* パソコンでの幅 */
    background: #fff;
    padding: 1dvh;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* --- ランダムな傾きの設定 --- */
.photo-item:nth-child(1) { transform: rotate(-4deg); }
.photo-item:nth-child(2) { transform: rotate(6deg); }
.photo-item:nth-child(3) { transform: rotate(-2deg); }
.photo-item:nth-child(4) { transform: rotate(5deg); }
.photo-item:nth-child(5) { transform: rotate(-5deg); }
.photo-item:nth-child(6) { transform: rotate(3deg); }

/* これ以降も写真が増える場合は、7番目以降も同じように追加できます */
.photo-item:nth-child(7) { transform: rotate(-6deg); }
.photo-item:nth-child(8) { transform: rotate(5deg); }

/* 9枚目以降の傾きを1〜8枚目のパターンに合わせて繰り返す */
.photo-item:nth-child(8n+1) { transform: rotate(10deg); }
.photo-item:nth-child(8n+2) { transform: rotate(-5deg); }
.photo-item:nth-child(8n+3) { transform: rotate(5deg); }
.photo-item:nth-child(8n+4) { transform: rotate(-3deg); }
.photo-item:nth-child(8n+5) { transform: rotate(3deg); }
.photo-item:nth-child(8n+6) { transform: rotate(-6deg); }
.photo-item:nth-child(8n+7) { transform: rotate(3deg); }
.photo-item:nth-child(8n+8) { transform: rotate(-10deg); }

/* ホバー時に傾きを戻す */
.photo-item:hover { transform: rotate(0deg) scale(1.05); }

/* --- 写真のセピア/カラー切り替え --- */
.photo-item img {
    width: 100%;
    display: block;
    filter: sepia(100%);
    transition: all 0.4s ease;
    cursor: pointer;
    border: 1px solid #ddd;
}

.photo-item img:hover,
.photo-item img:active {
    filter: sepia(0%);
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* --- 写真の影を維持する設定 --- */
.photo-item {
    background: #F4F1EA;
    padding: 5px 5px 0px 5px;/* 背景が黒でも影がはっきり出るよう、少しぼかしを強めました */
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6); 
    transition: transform 0.3s;
}

/* --- 文字の設定 --- */
.photo-date {
    font-size: 0.8em;
    color: #2B2B2B;
    margin: 10px 0 0 0;
    text-align: center;
    margin-top: 0px;    /* 写真との距離を確保 */
    margin-bottom: 0px;  /* 日付とコメントの距離を詰める */
}

.photo-comment {
    font-size: 0.95em;
    color: #2B2B2B;
    font-weight: bold;
    margin: 5px 0 0 0;
    text-align: center;
    line-height: 1.3;
    margin-top: 0px;       /* コメントの上の余白を消す */
    margin-bottom: 5px; /* コメントと次の写真との間の余白 */
}

@media screen and (max-width: 600px) {
    .photo-item {
        width: 48%;    /* 46%から少し広げました */
        padding: 5px;  /* 枠の余白をさらに狭めて、その分写真を大きく */
    }
    .gallery-container {
        gap: 5px;      /* 写真同士の隙間も狭めて、横幅を確保 */
    }
}

/* 拡大表示用のスタイル */
.lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    cursor: pointer;
}

/* 額縁（茶色いフレームと外側の影） */
.lightbox .img-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    padding: 10px; /* 額の太さ    ここを10pxにしたら...下も４か所変更する */
    background-color: #8f7d4f;
    /* ↓ 外側の影(50px)と、フレーム内側の影(8px)をカンマで区切って指定 */
    box-shadow: 0px 0px 50px rgb(0, 0, 0), inset 0px 0px 15px rgb(0, 0, 0);
    display: inline-flex;
}

/* 画像本体 */
.lightbox .img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* 写真の上に重ねる「内側の影」レイヤー */
.lightbox .img-wrapper::after {
    content: "";
    position: absolute;
    /* 15pxの額を避けて、写真の上にだけ影を落とす設定 */
    top: 10px; left: 10px; right: 10px; bottom: 10px;/* 額の太さ   ここと */
    box-shadow: inset 0px 0px 30px rgb(0, 0, 0); /* 内側の影 */
    pointer-events: none;
}

/* ヒストリーアーカイブのデザイン */
.history-message {
    text-align: center;
    color: #b0b0b0;
    margin: 40px 20px;
    padding: 10px; /* 内側の余白 */
    border: 2px solid #444;    /* 枠線の太さと色 */
    border-radius: 8px;       /* 角を丸くします */
    background-color: #1f1f1f; /* 背景を少しだけ明るいグレーにして枠を際立たせます */
}

.history-message h3 {
    color: #F4F1EA;
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.history-message p {
    color: #F4F1EA;
    line-height: 1.8;
    font-size: 0.9em;
    margin-bottom: 0;
}

    /* 1. 枠（茶色いフレーム）のサイズ制限を解除し、画像にピタッと張り付くようにする */
@media (max-width: 768px) {
    .lightbox .img-wrapper {
        max-width: none;
        max-height: none;
        width: auto;
        height: auto;
        padding: 10px; /* 額の太さ   ここと */
        display: block; /* 縮む原因になっていた設定をリセット */
    }
    
    /* 2. 画像「本体」の方に、画面いっぱいに広がる命令を直接かける */
    .lightbox .img-wrapper img {
        width: auto;
        height: auto;
        max-width: calc(96vw - 20px);  /* ② ここが重要！ 額の太さの「合計」を引きます（左右10px＋10px＝20px） */
        max-height: calc(90vh - 20px);
    }
    
    /* 3. 影の位置合わせ（変更なし） */
    .lightbox .img-wrapper::after {
    top: 10px; left: 10px; right: 10px; bottom: 10px; /* 額の太さ   ① ここ */
    }
}