.container{
  width: 100%;
  height:700px;
}


.image {
  position: absolute;
  top: 70px;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 700px;
  opacity: 0;
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
  animation: image-switch-animation 25s infinite;
  animation-timing-function: ease-in-out; /* ← 追加 */
  z-index:-9999;
}

.src1 {
  background-image: url(../images/top1.jpg);
}
.src2 {
  background-image: url(../images/top2.jpg);
}
.src3 {
  background-image: url(../images/top3.jpg);
}
.src4 {
   background-image: url(../images/top4.jpg);
}
.src5 {
   background-image: url(../images/top5.jpg);
}
.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}


@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

@media only screen and (max-width:767px){

.container{
  width: 100%;
  height: 580px;
  position: relative;
  margin-left: auto; 
}
.image {
  position: absolute;
  top: 60px;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 580px;
  opacity: 0;
  background-size: contain;
  background-position: top center;
  animation: image-switch-animation 25s infinite;
  animation-timing-function: ease-in-out; /* ← 追加 */
}

.src1 {
  background-image: url(../images/top1_.jpg);
}
.src2 {
  background-image: url(../images/top2_.jpg);
}
.src3 {
  background-image: url(../images/top3_.jpg);
}
.src4 {
  background-image: url(../images/top4_.jpg);
}
.src5 {
  background-image: url(../images/top5_.jpg);
}



}