@charset "UTF-8";

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*
左から右へ
----------------------------*/
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
	display: -ms-grid;
	overflow: hidden;
}
/*----------------------------*/


.d-demo {
	/* max-width: 1240px; */
	margin: 0 auto;
  border-bottom: 4px solid #e1e1e1;
  border-top: 4px solid #e1e1e1;
}
.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
  animation :infinity-scroll-left 95s infinite linear 0.5s both;
}
.d-demo__list--right{
  animation :infinity-scroll-right 95s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 4);
}
.d-demo__item > img{
  width: 100%;
}

/*
マウスオーバーで一時停止させたい場合は以下
----------------------------*/

/* .d-demo__wrap:hover .d-demo__list--left {
  animation-play-state: paused;
} */

@media only screen and (max-width: 767px) {	
  .d-demo {
    margin: 0 auto;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
  }
  .d-demo__item {
    width: calc(100vw / 2.1);
  }
}