@charset "utf-8";

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

/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
  background-image: url("../_img/top/main_img02.jpg");
  animation-delay: 4s;
}

/* 3枚目のスライド */
.img-box>div:nth-of-type(3){
  background-image: url("../_img/top/main_img03.jpg");
  animation-delay: 8s;
}
/* 4枚目のスライド */
.img-box>div:nth-of-type(4){
  background-image: url("../_img/top/main_img04.jpg");
  animation-delay: 12s;
}
/* 5枚目のスライド */
.img-box>div:nth-of-type(5){
  background-image: url("../_img/top/main_img05.jpg");
  animation-delay: 16s;
}
/* 6枚目のスライド */
.img-box>div:last-of-type{
  background-image: url("../_img/top/main_img06.jpg");
  animation-delay: 20s;
}