@charset "utf-8";

.boxCsnkSliderScroll01 {
  --slideOneW: 360px;
  --slideSpeed: 100s;
  --slideWait: -50s;
  position: relative;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  /*padding: 1.5em 0;*/
}
@media all and (max-width: 750px){
  .boxCsnkSliderScroll01 {
    padding: 0;
  }
}

.boxCsnkSliderScroll01 .slideLine {
  margin: 0;/* Reset */
  padding: 0;/* Reset */
  list-style-type: none;/* Reset */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.boxCsnkSliderScroll01 .slideLine:first-child {
  animation: loop var(--slideSpeed) var(--slideWait) linear infinite;
}
.boxCsnkSliderScroll01.typeReverse .slideLine:first-child {
  animation: loop_reverse var(--slideSpeed) var(--slideWait) linear infinite;
}

.boxCsnkSliderScroll01 .slideLine:last-child {
  animation: loop2 var(--slideSpeed) linear infinite;
}
.boxCsnkSliderScroll01.typeReverse .slideLine:last-child {
  animation: loop2_reverse var(--slideSpeed) linear infinite;
}

.boxCsnkSliderScroll01:hover .slideLine {
  animation-play-state: paused;
}

.boxCsnkSliderScroll01 .slideLine .slideOne {
  margin: 0;/* Reset */
  padding: 0;/* Reset */
  width: 360px;/* Caution: 1Pic x SlideNum < Window Max Width --- There will be a blank space. */
}
@media all and (max-width: 750px){
  .boxCsnkSliderScroll01 .slideLine .slideOne {
    width: 50vw;
  }
}

/*
body.pageXYZ .boxCsnkSliderScroll01 .slideLine .slideOne {
  width: 2000px;
}
@media all and (max-width: 750px){
  body.pageXYZ .boxCsnkSliderScroll01 .slideLine .slideOne {
    width: 200vw;
  }
}
*/

.boxCsnkSliderScroll01 .slideLine .slideOne img {
  margin: 0;/* Reset */
  padding: 0;/* Reset */
  vertical-align: middle;/* Reset */
  max-width: 100%;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop_reverse {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes loop2_reverse {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0);
  }
}