@charset "utf-8";

/* 各スライドのアニメーション */
@keyframes slide0 {
  0% { opacity: 1; }
  33.33% { opacity: 1; }
  33.34% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes slide1 {
  0% { opacity: 0; }
  33.33% { opacity: 0; }
  33.34% { opacity: 1; }
  66.66% { opacity: 1; }
  66.67% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes slide2 {
  0% { opacity: 0; }
  66.66% { opacity: 0; }
  66.67% { opacity: 1; }
  100% { opacity: 1; }
}

/* スライド全体 */
#mainimg {
  width: 100%;
  background: linear-gradient(#8cd9c2, #c1e1d8);
  overflow: hidden;
  text-align: center;
}

/* スライドエリア：高さは画像に追従（auto） */
#mainimg aside {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  line-height: 0;
}

/* slide0 だけ通常配置 → 高さがこれに合わせられる */
#slide0 {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  animation: slide0 15s infinite linear;
  position: relative;  /* staticでもOK */
  z-index: 3;
}

/* 他のスライドは上に重ねて表示切替（absolute配置） */
#slide1, #slide2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

#slide1 {
  animation-name: slide1;
  z-index: 2;
}
#slide2 {
  animation-name: slide2;
  z-index: 1;
}