img {
    max-width: 100%;  /* 画面の横幅に画像を自動で合わせる（スマホ対応） */
    height: auto;     /* 画像の縦横比を崩さない */
    display: block;   /* 画像の隙間をゼロにしてピタッとくっつける */
    margin: 0 auto;   /* パソコンで見たときに中央に寄せる */
}

/* --- 通常の画像の設定 --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- ★横スクロール画像のための特別な設定 --- */

/* ① 画像を囲む枠の設定 */
.scroll-box {
    width: 100%;             /* 枠自体は画面幅いっぱいに収める */
    overflow-x: auto;        /* 横方向にはみ出た部分をスクロールさせる */
    overflow-y: hidden;      /* 縦方向の余計なスクロールをプロテクト */
    -webkit-overflow-scrolling: touch; /* スマホでのスクロールをなめらかにする */
}

/* ② スクロールさせる画像自体の設定 */
img.scroll-img {
    max-width: none;         /* 通常画像の「画面幅に収める」設定を解除する */
    width: 1050px;           /* 【重要】画像の元のサイズ（または読ませたい横幅）を指定 */
    height: auto;
}

/* --- ★既存のCSSの後に、以下のブロックを追加してください --- */

/* 画面幅が768px未満（一般的なスマホ・タブレットの範囲）の場合のみ適用される設定 */
@media screen and (max-width: 767px) {
    /* スクロールさせる画像自体の設定を上書き */
    img.scroll-img {
        width: 100%;           /* デスクトップの固定サイズを解除し、画面幅いっぱいに広げる */
        max-width: 100%;        /* これで画像は画面幅に収まるようになります */
        height: auto;
    }
}

/* 画面幅が767px以下（スマホ）のときだけ適用 */
@media screen and (max-width: 767px) {
    img.scroll-img {
        /* パソコン時のサイズ（1050pxなど）から、スマホ用に少し縮小する */
        width: 600px; 
        
        /* 横スクロールを滑らかにするためのお守り */
        max-width: none !important; 
    }
}