@charset "utf-8";
/*CSS slide
---------------------------------------------------------------------------*/
@keyframes slide1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide3 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide4 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*mainimg
---------------------------------------------------------------------------*/
/*main images*/
#mainimg {
  clear: left;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
/*co,,om setting*/
.slide1, .slide2, .slide3, .slide4 {
  width: 100%;
  animation-duration: 16s; /*active seconds。*/
  animation-iteration-count: infinite; /*active repetition*/
  position: absolute;
  left: 0px;
  top: 0px;
  animation-fill-mode: both;
  animation-delay: 1.5s;
}
/*土台画像*/
.slide0 {
  position: relative;
  width: 100%;
  height: auto;
}
/*１枚目*/
.slide1 {
  animation-name: slide1; /*the name of keyframes*/
}
/*２枚目*/
.slide2 {
  animation-name: slide2;
}
/*３枚目*/
.slide3 {
  animation-name: slide3;
}
/*３枚目*/
.slide4 {
  animation-name: slide4;
}
/*the frame of the slide*/
.frame-name {
  position: absolute;
  left: 0px;
  bottom: 0px;
}