/* ===== 十勝岳大正泥流 100年 特設サイト（固有スタイル） ===== */
/* 共通CSS（reset/common.css）を尊重し、上書きは最小限に */


/* ---------------------------------------
   基本画像ルール（画像ズレ防止の必須設定）
--------------------------------------- */
.slideshow-container img {
  max-width: 100%;
  height: auto;
  display: block; /* inline 画像の下余白を除去 */
}

/* ---------------------------------------
   レイアウト・ヒーローセクション
--------------------------------------- */
.slideshow-container{
  width: 100%;
  height: 500px;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  
}

.slide {
  opacity:0;
  position: absolute;
  width: 100%;
  height: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  animation: slide 18s infinite;
}

.slide img {
  width:1000px;
  height:100%;
}


.slide:nth-child(1) { animation: slide1 18s infinite; } /* 20秒で一周するスライドショー */
.slide:nth-child(2) { animation: slide2 18s infinite; }
.slide:nth-child(3) { animation: slide3 18s infinite; }
.slide:nth-child(4) { animation: slide4 18s infinite; }
.slide:nth-child(5) { animation: slide5 18s infinite; }
.slide:nth-child(6) { animation: slide6 18s infinite; }

@keyframes slide1 {                                     /*ここで、スライドショーの始まりをずらしている*/
  0% { opacity: 0; }
  5%,20% { opacity: 1; }
  40%  { opacity: 0; }
}

@keyframes slide2 {
  0%,20% { opacity: 0; }
  30%,55%  { opacity: 1; }
  70%  { opacity: 0; }
}

@keyframes slide3 {
  0%,30% { opacity: 0; }
  40%,50%  { opacity: 1; }
  60%  { opacity: 0; }
}

@keyframes slide4 {
  0%,45% { opacity: 0; }
  55%,65%  { opacity: 1; }
  75%  { opacity: 0; }
}

@keyframes slide5 {
  0%,55% { opacity: 0; }
  65%,80%  { opacity: 1; }
  90% { opacity: 0; }
}

@keyframes slide6 {
  0%,70% { opacity: 0; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}