.slider {
    width: 700px;
    height: 350px;
    overflow: hidden;
    margin: 0 auto;
}
.slider-item {
  width: 700px;	/* HPの写真の横幅700pxに合わせて設定しています。*/
  float: left;
}
img{
  width:100%;
}
.slider-inner {
  width: 300%;
  animation: slider 15s infinite ease;	/* 移動時間は2つ目のパラメタをいじること。*/
}

/* スライドの移動距離を示している。*/
@keyframes slider {
	0% {
	transform: translateX(0);
	}
	25% {
	transform: translateX(-700px);
	}
	50% {
	transform: translateX(-1400px);
	}
	100% {
	transform: translateX(0);
	}
}