@charset "utf-8";
/* 横に流れ続けるスライドショー：https://pengi-n.co.jp/blog/horizontal-slideshow/ */


/* ================================================
　基本設定
=================================================== */

/* スライドレールの枠 */
.wrap {
  width: 100%;
  background-color: #EFEFF0;
  overflow: hidden;/* はみ出た部分を隠す */
  padding: 20px 0px;
  margin-bottom: 100px;
}

/* スライド画像*/
.content {margin-right: 20px;}



/* スライド画像：ホバー時に動きを止める
.slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
*/

/* スライド画像：ホバー時の装飾 
.content-hover {
  transition: all 0.2s;
}
.content-hover:hover {
  transform: translateY(-20px);
  border-radius: 0 10%;
  opacity: 0.8;
  cursor: pointer;
}
*/


/* ================================================
　動作設定
=================================================== */
/* スライド設定 */
.slideshow {
  display: flex;/* スライド画像を横に並べる */
  animation-name: loop-slide;/* アニメーション名 */
  animation-duration: 40s;/* 開始から終了までの所要時間 */
  animation-iteration-count: infinite;/* アニメーションのループ回数:infinite=無限に繰り返す */
  animation-timing-function: linear;/* 動きの加減速 */
  animation-delay: 1s;/* アニメーションが開始するまでの遅延時間 */
  animation-fill-mode: both;/* アニメーション開始前・終了後の挙動 */
  }

@-webkit-keyframes loop-slide {
  from {transform: translateX(0);}
  to {transform: translateX(-110%);}
}
@keyframes loop-slide {
  from {transform: translateX(0);}
  to {transform: translateX(-110%);}
}








/* ============================================================================================================================================================

	▼レスポンシブ設定

============================================================================================================================================================ */

@media screen and (min-width:320px) and ( max-width:759px)  {
/*スマホ：320pxから759pxまでの幅の場合に適応される */

  /* スライド設定 */
.slideshow {animation-duration: 50s;/* 開始から終了までの所要時間 */}
  
@-webkit-keyframes loop-slide {
  from {transform: translateX(0);}
  to {transform: translateX(-850%);}
}
@keyframes loop-slide {
  from {transform: translateX(0);}
  to {transform: translateX(-850%);}
}


}



@media screen and (min-width:760px) and ( max-width:979px)  {
/*タブレット：760pxから979pxまでの幅の場合に適応される */
}



@media screen and (min-width: 980px) and ( max-width:1700px)   {
/*ノートパソコン：980pxから1349pxまでの幅の場合に適応される */
}



@media screen and (min-width: 1700px) and ( max-width:1900px)   {
/*ノートパソコン：980pxから1900pxまでの幅の場合に適応される */
}



@media screen and (min-width: 1350px)  {
}