.image-container {
  display: grid;
  /* PCでは、400pxの列を2つ作成 */
  grid-template-columns: repeat(2, 400px); 
  gap: 20px; /* 画像と画像の間の隙間 */
  justify-content: center; /* グリッド全体を中央揃え */
}

.image-item img {
  width: 100%; /* 親要素(image-item)の幅に合わせる */
  height: auto;
  display: block;
}

.image-item {
  /* ...（既存の指定）... */

  /* 透明度の変化を0.3秒かけて行う */
  transition: opacity 0.3s ease; 
}

/* マウスが乗ったら、透明度を 70% にする */
.image-item:hover {
  opacity: 0.7;
}

/* --- ブレークポイント --- */
/* 画面幅が 820px + 隙間20px = 840px 以下になったら */
@media (max-width: 840px) {
  .image-container {
    /* 1列に変更 */
    grid-template-columns: 1fr; 
    /* スマホ用にコンテナの最大幅を指定（400px）し、左右に余白をとる */
    max-width: 400px;
    width: 90%; /* 画面幅の90% */
    margin: 0 auto; /* 中央揃え */
  }
}