.main-slide {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


@media screen and (min-width: 981px){
.main-slide img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0%;
  opacity: 0;
  animation: slide-animation 18s linear infinite 0s;
}
}@media screen and (min-width: 681px) and (max-width: 980px){
.main-slide img {
	width: 120%;
    height: auto;
    position: absolute;
    top: 0;
    left: -10%;
    opacity: 0;
    animation: slide-animation 18s linear infinite 0s;
}
}@media screen and (min-width: 320px) and (max-width: 680px){
.main-slide img {
  width: 180%;
  height: auto;
  position: absolute;
  top: 0;
  left: -40%;
  opacity: 0;
  animation: slide-animation 18s linear infinite 0s;
}
}


.main-slide img {
  height: auto;
}

.main-slide img:nth-of-type(2){
  animation-delay: 8s;/*2枚目の開始時間*/
}

.main-slide img:nth-of-type(3){
  animation-delay: 16s;/*3枚目の開始時間*/
}

@keyframes slide-animation {
  0% {
    animation-timing-function: ease-in;/*ゆっくり表示される*/
    opacity: 0;
  }
  12% {
    animation-timing-function: ease-out;/*表示された*/
    opacity: 1;
  }
  30% {
    opacity: 1;/*＊表示期間*/
  }
  43% {
    opacity: 0;/*次の画像で消えている*/
  }
  100% {
    opacity: 0;/*表示されていない時間*/
  }
}


img {
 	max-width:1000%!important; 
}