.slideshow {
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fadeSlide 81s infinite; /*27枚×3秒=81秒 */
}

/* 各スライドの表示タイミングをずらす */

.slide:nth-child(1){ animation-delay: 0s; }
.slide:nth-child(2){ animation-delay: 7s; }
.slide:nth-child(3){ animation-delay: 14s; }
.slide:nth-child(4){ animation-delay: 21s; }
.slide:nth-child(5){ animation-delay: 28s; }
.slide:nth-child(6){ animation-delay: 35s; }
.slide:nth-child(7){ animation-delay: 42s; }
.slide:nth-child(8){ animation-delay: 49s; }
.slide:nth-child(9){ animation-delay: 56s; }
.slide:nth-child(10){ animation-delay: 63s; }
.slide:nth-child(11){ animation-delay: 70s; }
.slide:nth-child(12){ animation-delay: 77s; }
.slide:nth-child(13){ animation-delay: 84s; }
.slide:nth-child(14){ animation-delay: 91s; }
.slide:nth-child(15){ animation-delay: 98s; }
.slide:nth-child(16){ animation-delay: 105s; }
.slide:nth-child(17){ animation-delay: 112s; }
.slide:nth-child(18){ animation-delay: 119s; }
.slide:nth-child(19){ animation-delay: 126s; }
.slide:nth-child(20){ animation-delay: 133s; }
.slide:nth-child(21){ animation-delay: 140s; }
.slide:nth-child(22){ animation-delay: 147s; }
.slide:nth-child(23){ animation-delay: 154s; }
.slide:nth-child(24){ animation-delay: 161s; }
.slide:nth-child(25){ animation-delay: 168s; }
.slide:nth-child(26){ animation-delay: 175s; }
.slide:nth-child(27){ animation-delay: 182s; }

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

/* ファイル名（キャプション）のスタイル */
.filename {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

/* フェードアニメーション 
CSSの
0% { opacity: 0; }は、@keyframesアニメーションの開始時点（0%）で、対象要素の不透明度（opacity）を0（完全に透明）にする指示です。通常、100%でopacity: 1（不透明）と組み合わせ、要素をフェードインさせるアニメーションによく使われます。 
*/

@keyframes fadeSlide {
  0% { opacity: 0; }
  5% { opacity: 1; }
  33% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}