/* カルーセルの外枠 */
.carousel {
   width: 320px;
   height: 120px;
   display: flex; /* 子要素を横に並べる */
   overflow: hidden; /* はみ出た部分は表示しない */
   margin: 0 auto; /* 水平方向中央寄せ */
}

/* カルーセル内の画像 */
.carousel img {
   margin: 0;
   padding: 0;
   display: block; /* imgタグの改行のすき間を消すため */
}

/* スクロールアニメーションのキーフレーム */
@keyframes scroll {
   0% { margin-left: 0; }
   20% { margin-left: -100%; }
   40% { margin-left: -200%; }
   60% { margin-left: -300%; }
   80% { margin-left: -400%; }
   100% { margin-left: -400%; }
}

/* カルーセルの子要素にスクロールアニメーションを設定 */
.carousel > :first-child {
   animation: scroll 10s linear infinite;