@charset "utf-8";
.container{
    width:1000px;
    height: 625px;
    position: relative;
    overflow: hidden;
}

.stripe_wrap {
  position: absolute;
  width: 1500px;
  height: 2880px;
  top: -114%;
  left: 47%;
  transform: translateX(0) rotate(-60deg);
  animation: wrapSlide 20s linear infinite;
  z-index: 1;
}

@keyframes wrapSlide {
  0%   { transform: translateX(0) rotate(-60deg); }
  100% { transform: translateX(-370px) rotate(-60deg); }
}

.stripe {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 60px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.stripe.white {
  background-color: white;
}

.stripe.green {
  background-color: #53c1ae;
  color: white;
}

.stripe.green .text {
  width:500px;
  height:100px;
  position: absolute;
  left: 86%;
  white-space: nowrap;
  animation: slideLeft 20s linear infinite;
  top: 25px;
}
.stripe.green .text img{
    width: 300px;
}

.stripe_wrap > .stripe:nth-child(4) .text {
  margin-left: -500px;
}
.stripe_wrap > .stripe:nth-child(12) .text {
  margin-left: -500px;
}
.stripe_wrap > .stripe:nth-child(14) .text {
  margin-left: -100px;
}

.stripe_wrap > .stripe:nth-child(10) .text,
.stripe_wrap > .stripe:nth-child(16) .text,
.stripe_wrap > .stripe:nth-child(22) .text {
animation-delay: 2.5s;
}
.stripe_wrap > .stripe:nth-child(6) .text,
.stripe_wrap > .stripe:nth-child(18) .text,
.stripe_wrap > .stripe:nth-child(24) .text {
animation-delay: 5s;
}

@keyframes slideLeft {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}

.onegirl{
    position: absolute;
    left: 0; top: 0; 
    z-index: 2;
}

@media (max-width: 1000px)  {
    .container{
        width: 100%;
        height: 100%;
    }
    .stripe {
        height: 30px;
    }
    .stripe.green .text {
      display: none;
    }
    
    @keyframes wrapSlide {
      0%   { transform: translateX(0) rotate(-60deg); }
      100% { transform: translateX(-278px) rotate(-60deg); }
    }

    
    .stripe_wrap {
      height: 1880px;
      top: -93%;
      left: -30%;
      animation: wrapSlide 18s linear infinite;
    }
    
    .onegirl{
        left: 50%;
        transform: translateX(-50%);
    }
    
    .slideshow-pager{
        position: relative;
        top: 70px;
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    .slideshow-pager > span{
        text-indent: -9999px;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background-color: #ccc;
    }
    .slideshow-pager > span.cycle-pager-active{
        background-color: rgba(255,241,0,1);
    }
    
    #mySlideshowSp > ul > li{
        overflow: hidden;
    }
}