/* top
================================================== */

.kv_01 {
  background-image: url(/img/bitwin/index_kv_sp.png);
  background-position: center;
  background-repeat: no-repeat;
  height: 179.46667vw;
  margin-bottom: 46.5px;
  position: relative;
}
@media all and (min-width: 600px) {
  .kv_01 {
    background-image: url(/img/bitwin/index_kv.png);
    height: 56.875vw;
    margin-bottom: 0;
  }
}

/* タイトル */
.kv__ttlWrap {
  display: flex;
  position: absolute;
  top: 22.4vw;
  left: 3.7333333vw;
  opacity: 0;
}
@media all and (min-width: 600px) {
  .kv__ttlWrap {
    top: 5vw;
    left: 6.0416666vw;
  }
}

.kv__ttlWrap.js-kv_fade {
  animation-name: kv_fade;
  animation-iteration-count: 1;
  animation-duration: 2s;
  animation-fill-mode:forwards;
}

.kv__ttl--shuffle {
  color: #333333;
  font-size: 20.2666666vw;
  font-weight: 600;
  line-height: 1;
  display: inline-block;
}
@media all and (min-width: 600px) {
  .kv__ttl--shuffle {
    font-size: 12.9166667vw;
  }
}

.kv__ttl--yellowGreen {
  color: #B8E56F;
}

/* テキスト */
.kv__txtWrap {
  display: flex;
  gap: 0 2.66667vw;
  position: absolute;
  top: 77.33334vw;
  left: 29.33334vw;
}
@media all and (min-width: 600px) {
  .kv__txtWrap {
    gap: 0 1.3020833vw;
    top: 16.5104166vw;
    left: 58.1770833vw;
  }
}

.kv__txtWrap p {
  color: #333333;
  font-size: 10.66667vw;
  font-weight: 600;
  line-height: 1.225;
}
@media all and (min-width: 600px) {
  .kv__txtWrap p {
    font-size: 5.625vw;
    line-height: 1.22222;
  }
}
/* 左側 */
.kv__txtWrap .txtWrap__l {
  display: flex;
  align-items: flex-end;
}
@media all and (min-width: 600px) {
  .kv__txtWrap .txtWrap__l {
    padding-bottom: .8333333vw;
  }
}
.kv__txtWrap .txtWrap__l p {
  color: #333333;
  font-size: 6.66667vw;
  font-weight: 500;
  /* opacity: 0; */
  /* transform: translateX(-100%); */
}
@media all and (min-width: 600px) {
  .kv__txtWrap .txtWrap__l p {
    font-size: 2.6041666vw;
  }
}

.kv__txtWrap .txtWrap__l.js-kv_fade .slideAnimeLeftRight {
  animation-name:slideTextX100;
  opacity: 0;
  animation-duration: .6s;
  animation-delay: 5.9s;
}

.kv__txtWrap .txtWrap__l.js-kv_fade .slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration: .6s;
  animation-delay: 5.9s;
}

/* 右側 */
.kv__txtWrap .txtWrap__r {
  display: flex;
  flex-direction: column;
  gap: 5.33334vw 0;
}
@media all and (min-width: 600px) {
  .kv__txtWrap .txtWrap__r {
    gap: 1.0416666vw 0;
  }
}

.kv__txtWrap .txtWrap__r .txt--yellowGreen {
  color: #B8E56F;
}

.kv__txtWrap .txtWrap__r p {
  opacity: 0;
}
.kv__txtWrap .txtWrap__r.js-kv_fade p {
  animation-name: kv_fade;
  animation-iteration-count: 1;
  animation-duration: 1.3s;
  animation-fill-mode:forwards;
}
.kv__txtWrap .txtWrap__r.js-kv_fade > p:nth-child(1){animation-delay: 2s;}
.kv__txtWrap .txtWrap__r.js-kv_fade > p:nth-child(2){animation-delay: 3.3s;}
.kv__txtWrap .txtWrap__r.js-kv_fade > p:nth-child(3){animation-delay: 4.6s;}
.kv__txtWrap .txtWrap__r.js-kv_fade > p:nth-child(4){animation-delay: 6.5s; animation-duration: 1s;}

@keyframes kv_fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes kv_fade_left {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



/*========= 流れるテキスト ===============*/

/*全共通*/
.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
    animation-name:slideTextX100;
    /* animation-duration:0.8s; */
    animation-fill-mode:forwards;
    opacity: 0;

    animation-duration: .6s;
    animation-delay: 6.9s;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
    animation-name:slideTextX-100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}