/* slideの枠 */
.cp_cssslider01 {
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin: 1em auto;
  border: 10px solid #ffffff;
  box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
}
/* 画像のグループ */
.cp_slidewrapper01 {
  width: 300%;/* slideの枚数×100% */
  position: relative;
  display: flex;
  animation: cp_slider01 20s infinite linear;
}
/* 画像単体の設定 */
.cp_slide01_item {
  width: 300px;
  height: 200px;
}
@keyframes cp_slider01 {
  /* 100%を枚数で割った%に割り振る */
  from { transform: translateX(-66%); }
  to { transform: translateX(0); }
}






.slide-container {
  width: 300px;
  height: 200px;
  margin: 50px auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 5px solid #ffffff;
  box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 20s infinite linear 1s both reverse;
}
.slide{
  width: 300px;
  object-fit:cover;;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}