.container{
  width: 840px;
  height: 520px;
  position: relative;
  margin-left: auto; 
}

.image {
  position: absolute;
  top: 0px;
  bottom: 0;
  right: 0;
  width: 840px;
  height: 520px;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  animation: image-switch-animation 25s infinite;
  animation-timing-function: ease-in-out; /* ← 追加 */
  border-radius: 20px 0 0 20px;
}

.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: 320px;
  height: 360px;
  position: relative;
  margin-left: auto; 
}

.image {
  position: absolute;
  top: 20px;
  bottom: 0;
  right: 0;
  width: 320px;
  height: 360px;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  animation: image-switch-animation 25s infinite;
  animation-timing-function: ease-in-out; /* ← 追加 */
  border-radius: 20px 0 0 20px;
}

}