@charset "utf-8";

.img-box{
  width: 100%;
  height: 46vw;
  overflow: hidden;
  position: relative;
}
.img-box>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 46vw;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  animation-name: fade;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    z-index: 0;
  }
}
/* 1枚目のスライド */
.img-box>div:first-of-type{
  background-image: url(../img/main_img1.webp);
}

/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
  background-image: url(../img/main_img2.webp);
  /* 追記 */
  animation-delay: 5s;
}

/* 3枚目のスライド */
.img-box>div:last-of-type{
  background-image: url(../img/main_img3.webp);
  /* 追記 */
  animation-delay: 10s;
}