.slideshow {
  position: relative;
  width: 100%;
  max-width: 670px;
  height: 300px;
  margin: 0px 0px 10px 0px;
  overflow: hidden;
  border: 0px solid #fff;
  box-sizing: border-box;

  /* 両方の影を一括管理 */
  box-shadow:
    0 0 7px rgba(0, 0, 0, 0.4),        /* 外側影を少し強く */
    inset 0 0 20px rgba(255, 255, 255, 10);  /* 内側影も少し強めに */
}


.slide {
  position: absolute;
  width: 670px;
  height: 300px;
  margin: 0px;
  overflow: hidden;
  opacity: 0;
  animation: fadeAnimation 192s infinite;
  border: none;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 16枚分のanimation-delayを12秒刻みで設定 */
.slide:nth-child(1)  { animation-delay: 0s; }
.slide:nth-child(2)  { animation-delay: 12s; }
.slide:nth-child(3)  { animation-delay: 24s; }
.slide:nth-child(4)  { animation-delay: 36s; }
.slide:nth-child(5)  { animation-delay: 48s; }
.slide:nth-child(6)  { animation-delay: 60s; }
.slide:nth-child(7)  { animation-delay: 72s; }
.slide:nth-child(8)  { animation-delay: 84s; }
.slide:nth-child(9)  { animation-delay: 96s; }
.slide:nth-child(10) { animation-delay: 108s; }
.slide:nth-child(11) { animation-delay: 120s; }
.slide:nth-child(12) { animation-delay: 132s; }
.slide:nth-child(13) { animation-delay: 144s; }
.slide:nth-child(14) { animation-delay: 156s; }
.slide:nth-child(15) { animation-delay: 168s; }
.slide:nth-child(16) { animation-delay: 180s; }

@keyframes fadeAnimation {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}