.image-container {
  display: flex;
  gap: 12px; /* 画像の横間隔設定 */
  margin-bottom: 16px; /* 下の内容との間隔 */
  margin-left: 12px; /* 左側に4pxの余白を追加 */
  justify-content: center; /* 画像が1枚の際、PCでは中央寄せ */
}

.image-container img {
  width: calc((100% - 24px) / 3); /* 3枚横並びで幅を均等化 */
  max-width: 100%; /* 親要素より大きくならないよう制限 */
  border-radius: 8px; /* 角を丸くする */
}

@media (max-width: 768px) { /* スマートフォン用 */
  .image-container {
    overflow-x: auto; /* 横スクロールを有効化 */
    flex-wrap: nowrap;
    justify-content: start; /* 横スクロール時は左寄せ */
  }

  .image-container img {
    flex: 0 0 calc(100% - 12px); /* 画像1枚を親要素いっぱいに表示 */
    width: auto; /* 幅の計算を無効化し、適応 */
    min-width: calc(100% - 12px); /* 親より小さくならないための設定 */
    max-width: 100%; /* 親より大きくならないように設定 */
  }
}

@media (min-width: 769px) {
  .image-container img:nth-child(1):only-child {
    margin: 0 auto; /* 画像が1枚だけの場合は中央寄せ */
    display: block; /* 段落要素のように中央寄せのため適用 */
  }
}