<style>
    /* --- CSS: デザイン設定 --- */

    body {
        font-family: sans-serif;
        margin: 0;
        padding: 20px;
    }

    /* サムネイル画像のスタイル（スマホ対応） */
    .thumbnail {
        width: 100%;         /* 親要素の幅いっぱいに広げる */
        max-width: 300px;    /* ただし、最大でも300pxまで（PCで巨大化しないように） */
        height: auto;        /* 比率を保つ */
        cursor: pointer;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: 0.3s;
    }
    .thumbnail:hover {
        opacity: 0.8;
    }

    /* モーダル（背景の黒い部分） */
    .modal {
        display: none;       /* 初期状態は非表示 */
        position: fixed;
        z-index: 1000;       /* 最前面 */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.9); /* 背景を濃い黒に */
        
        /* 【改良点】画像を画面のど真ん中に配置する設定 */
        align-items: center; 
        justify-content: center;
    }

    /* 拡大画像のスタイル */
    .modal-content {
        max-width: 90%;      /* スマホ：画面幅の90%まで使う */
        max-height: 90vh;    /* スマホ：画面高さの90%まで使う */
        object-fit: contain; /* アスペクト比を崩さない */
        border: 2px solid #fff;
        border-radius: 4px;
        
        /* ふわっと表示するアニメーション */
        animation: zoomIn 0.3s ease;
    }

    /* PC画面向けの上書き設定（画面幅が768px以上の場合） */
    @media screen and (min-width: 768px) {
        .modal-content {
            max-width: 700px; /* PCでは最大幅を制限して見やすくする */
        }
    }

    /* 閉じるボタン（×） */
    .close-btn {
        position: absolute;
        top: 15px;
        right: 20px;
        color: #f1f1f1;
        font-size: 40px;     /* 指で押しやすい大きさ */
        font-weight: bold;
        line-height: 1;
        cursor: pointer;
        padding: 10px;       /* タップ判定エリアを広げる */
        background: rgba(0,0,0,0.3); /* ボタンの背景を少し黒くして視認性アップ */
        border-radius: 50%;
        z-index: 1001;       /* 画像より手前に */
    }

    @keyframes zoomIn {
        from {transform: scale(0.8); opacity: 0;}
        to {transform: scale(1); opacity: 1;}
    }
</style>