#content .carousel {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #000;
}

#content .carousel .item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  animation: fade 48s infinite;
}

#content .carousel .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes fade {
  0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  10% { opacity: 0; }
  100% { opacity: 0; }
}

/* 画像12枚分の表示タイミング */
#content .carousel .item:nth-child(1)  { animation-delay: 0s;  }
#content .carousel .item:nth-child(2)  { animation-delay: 4s;  }
#content .carousel .item:nth-child(3)  { animation-delay: 8s;  }
#content .carousel .item:nth-child(4)  { animation-delay: 12s; }
#content .carousel .item:nth-child(5)  { animation-delay: 16s; }
#content .carousel .item:nth-child(6)  { animation-delay: 20s; }
#content .carousel .item:nth-child(7)  { animation-delay: 24s; }
#content .carousel .item:nth-child(8)  { animation-delay: 28s; }
#content .carousel .item:nth-child(9)  { animation-delay: 32s; }
#content .carousel .item:nth-child(10) { animation-delay: 36s; }
#content .carousel .item:nth-child(11) { animation-delay: 40s; }
#content .carousel .item:nth-child(12) { animation-delay: 44s; }