@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*1枚目*/
@keyframes slide1 {
    0% {opacity: 0;}
    5% {opacity: 1;}
   20% {opacity: 1;}
   25% {opacity: 0;}
  100% {opacity: 0;}
}
/*2枚目*/
@keyframes slide2 {
    0% {opacity: 0;}
   15% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   45% {opacity: 0;}
  100% {opacity: 0;}
}
/*3枚目*/
@keyframes slide3 {
    0% {opacity: 0;}
   35% {opacity: 0;}
   40% {opacity: 1;}
   60% {opacity: 1;}
   65% {opacity: 0;}
  100% {opacity: 0;}
}
/*4枚目*/
@keyframes slide4 {
    0% {opacity: 0;}
   55% {opacity: 0;}
   60% {opacity: 1;}
   80% {opacity: 1;}
   85% {opacity: 0;}
  100% {opacity: 0;}
}
/*5枚目*/
@keyframes slide5 {
    0% {opacity: 0;}
   75% {opacity: 0;}
   80% {opacity: 1;}
   95% {opacity: 1;}
  100% {opacity: 0;}
}

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	clear: left;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
/*画像の共通設定*/
#slide1,#slide2,#slide3,#slide4,#slide5 {
	animation-duration: 50s;
	animation-iteration-count:infinite;
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
	animation-fill-mode: both;
	animation-delay: 1s;
}
/*土台画像*/
#slide0 {
  position: relative;width: 100%;height: auto;
}
#slide1 {
  animation-name: slide1;
}
#slide2 {
  animation-name: slide2;
}
#slide3 {
  animation-name: slide3;
}
#slide4 {
  animation-name: slide4;
}
#slide5 {
  animation-name: slide5;
}