@charset "utf-8";
/* CSS Document */

/*ループアニメ*/
.loop_wrap,.loop_wrap2 {
  display: flex;
  width:100%;
  height:calc(96vh/4);
  margin: 10px 0;
  overflow: hidden;
}

.loop_wrap img,.loop_wrap2 img {
  width: auto;
  height:100%;
}
@keyframes loop {
  0% {
     -webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
	transform: translateX(100%);
  }
  to {
     -webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
	transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
	-moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
	transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
	-moz-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    -o-transform: translateX(-200%);
	transform: translateX(-200%);
  }
}
@keyframes loop3 {
  0% {
     -webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
	transform: translateX(-100%);
  }
  to {
     -webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
	transform: translateX(100%);
  }
}

@keyframes loop4 {
  0% {
    -webkit-transform: translateX(-200%);
	-moz-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    -o-transform: translateX(-200%);
	transform: translateX(-200%);
  }
  to {
   -webkit-transform: translateX(0);
	-moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
	transform: translateX(0);
  }
}

.loop_wrap img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
  -moz-animation: loop 50s -25s linear infinite;
  -ms-animation: loop 50s -25s linear infinite;
  -o-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
}

.loop_wrap img:last-child {
-webkit-animation: loop2 50s linear infinite;
-moz-animation: loop2 50s linear infinite;
-ms-animation: loop2 50s linear infinite;
-o-animation: loop2 50s linear infinite;
  animation: loop2 50s linear infinite;
}
.loop_wrap2 img:first-child {
-webkit-animation: loop3 50s -25s linear infinite;
-moz-animation: loop3 50s -25s linear infinite;
-ms-animation: loop3 50s -25s linear infinite;
-o-animation: loop3 50s -25s linear infinite;
  animation: loop3 50s -25s linear infinite;
}

.loop_wrap2 img:last-child {
-webkit-animation: loop4 50s linear infinite;
-moz-animation: loop4 50s linear infinite;
-ms-animation: loop4 50s linear infinite;
-o-animation: loop4 50s linear infinite;
  animation: loop4 50s linear infinite;
}