@charset "UTF-8";
/***********************************************************************
loop animation
**********************************************************************/
.loop-left {
  position: relative;
  width: 100%;
  height: 175px; /* 画像の高さに応じて調整 */
  overflow: hidden;
  white-space: nowrap;
}
.loop-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1000%; /* 画像を4つ並べる */
  height: 100%;
  background: url("../img/loop-left.png") repeat-x;
  background-size: auto 100%;
  -webkit-animation: loopLeft 70s linear infinite;
          animation: loopLeft 70s linear infinite;
}

.loop-right {
  position: relative;
  width: 100%;
  height: 205px; /* 画像の高さに応じて調整 */
  overflow: hidden;
  white-space: nowrap;
}
.loop-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1000%; /* 画像を4つ並べる */
  height: 100%;
  background: url("../img/loop-right.png") repeat-x;
  background-size: auto 100%;
  -webkit-animation: loopRight 80s linear infinite;
          animation: loopRight 80s linear infinite;
}

@-webkit-keyframes loopLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-25%);
            transform: translateX(-25%);
  }
}

@keyframes loopLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-25%);
            transform: translateX(-25%);
  }
}
@-webkit-keyframes loopRight {
  0% {
    -webkit-transform: translateX(-75%);
            transform: translateX(-75%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes loopRight {
  0% {
    -webkit-transform: translateX(-75%);
            transform: translateX(-75%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/* より確実なループのための代替案 */
.loop-left-alt {
  position: relative;
  width: 100%;
  height: 175px;
  overflow: hidden;
}
.loop-left-alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500%; /* 画像を5つ並べる */
  height: 100%;
  background: url("../img/loop-left.png") repeat-x;
  background-size: auto 100%;
  -webkit-animation: loopLeftAlt 40s linear infinite;
          animation: loopLeftAlt 40s linear infinite;
}

.loop-right-alt {
  position: relative;
  width: 100%;
  height: 205px;
  overflow: hidden;
}
.loop-right-alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500%; /* 画像を5つ並べる */
  height: 100%;
  background: url("../img/loop-right.png") repeat-x;
  background-size: auto 100%;
  -webkit-animation: loopRightAlt 40s linear infinite;
          animation: loopRightAlt 40s linear infinite;
}

@-webkit-keyframes loopLeftAlt {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
  }
}

@keyframes loopLeftAlt {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
  }
}
@-webkit-keyframes loopRightAlt {
  0% {
    -webkit-transform: translateX(-80%);
            transform: translateX(-80%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes loopRightAlt {
  0% {
    -webkit-transform: translateX(-80%);
            transform: translateX(-80%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/* レスポンシブ対応 */
@media only screen and (max-width: 750px) {
  .loop-left,
  .loop-right {
    height: 60px; /* スマホ用に高さを調整 */
  }
}