.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; /* 画像の枠線 */
}