.top-banner {
  display: flex;
  flex-wrap: wrap;
  list-style: none;  /* ← 黒い点を消す */
  margin: 0;         /* ← ブラウザのデフォルト余白をリセット */
  padding: 0;
}

.top-banner li {
  width: calc(100%/4); /* 画像を横に4つ並べる */
  padding: 0 5px;      /* 画像の左右に5pxの余白 */
  box-sizing: border-box;
}

.top-banner li img {
  max-width: 100%;   /* 画像のはみ出し防止 */
  height: auto;      /* 縦横比を維持 */
  border: solid 1px #ccc; /* 画像の枠線 */
}

.top-banner {
  /* Desktop: 4 images in a row */
  display: flex;
  flex-wrap: nowrap; /* Prevents wrapping on desktop */
  justify-content: space-between;
  list-style: none; /* Removes bullet points */
  padding: 0;
  margin: 0;
}

.top-banner li {
  width: 24%; /* Approximately 1/4 of the container width */
  margin: 0.5%;
}

.top-banner li img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Mobile: 2 images in a row --- */
@media screen and (max-width: 768px) {
  .top-banner {
    flex-wrap: wrap; /* Allows images to wrap to the next line */
  }

  .top-banner li {
    width: 48%; /* Approximately 1/2 of the container width */
    margin: 1%; /* Adjust margin for spacing */
  }
}