/* ==========================
  スクロールアニメーション
========================== */

/*  スクロールアニメーションさせる前の状態  */
.js-animation-fadeIn {
  overflow: hidden;
  opacity: 0;
  transition: .8s!important;
  transition-delay: 1500ms;
  transition-timing-function: cubic-bezier(.42,.09,.13,1.56);
  transition-duration: 600ms;
  transition-property: opacity;
  transform: translateY(100px) scale(1);
}
/*  スクロールアニメーションの動きとその後  */
.js-animation-fadeIn.isAnimate {
  opacity: 1;
  transition: .8s;
  transition-timing-function: cubic-bezier(.42,.09,.13,1.56);
  transition-duration: 1000ms;
  transform: translate(0, 0) scale(1);
}

/*  スクロールアニメーションさせる前の状態  */
.cp_next .js-animation-fadeIn {
  transition-delay: 100ms;
  transition-property: transform opacity;
  transform: translateY(130px) scale(1);
}

/*  スクロールアニメーションの動きとその後  */
.cp_next .js-animation-fadeIn.isAnimate {
  transform: translateY(0px) scale(1);
}

/*  スクロールアニメーション右から  */
.js-animation-fadeIn-left {
  transition-delay: 100ms;
  transition-property: transform;
  transform: translateX(120%);
}

/*  スクロールアニメーション左から  */
.js-animation-fadeIn-right {
  transition-delay: 100ms;
  transition-property: transform;
  transform: translateX(-120%);
}

.js-animation-fadeIn-scale {
  transition: .6s ease-in-out!important;
  transition-delay: 100ms;
  transition-property: transform;
  transform: scale(.5);
}

.js-animation-fadeIn-delay500 {
  transition-delay: 500ms!important;
  transition-property: opacity transition;
}

.js-animation-fadeIn-delay1000 {
  transition-delay: 1000ms!important;
  transition-property: opacity transition;
}

.js-animation-fadeIn-delay1500 {
  transition-delay: 1500ms!important;
  transition-property: opacity transition;
}

.js-animation-fadeIn-delay2000 {
  transition-delay: 2000ms!important;
  transition-property: opacity transition;
}


.js-animation-fadeIn-delay200 {
  transition-delay: 200ms!important;
  transition-property: opacity transition;
}

.js-animation-fadeIn-delay400 {
  transition-delay: 400ms!important;
  transition-property: opacity transition;
}

.js-animation-fadeIn-delay600 {
  transition-delay: 600ms!important;
  transition-property: opacity transition;
}

.js-animation-fadeIn-delay800 {
  transition-delay: 800ms!important;
  transition-property: opacity transition;
}

.anime-duration {
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}




.main-visual-heading {
  transition: .4s;
  transition-delay: 2s;
  transition-timing-function: cubic-bezier(.47, .85, .78, 1.26);
  transform: scale(0) translateX(-50%);
  transform-origin: left;
  -webkit-animation-timing-function: cubic-bezier(.42,.09,.13,1.56);
          animation-timing-function: cubic-bezier(.42,.09,.13,1.56);
}

.main-visual-heading.main-visual-heading-active {
  transform: scale(1) translateX(-50%);
}


.kiran {
  position: relative;
  overflow: hidden;
  opacity: 1;
  cursor: pointer;
}
.kiran::before {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 1000;
  display: block;
  width: 30px;
  height: 100%;
  background-color: #fff;
  content: "";
  opacity: 0;
  transition: cubic-bezier(.32, 0, .67, 0);
}
.isAnimate.kiran::before {
  -webkit-animation: kiran .4s linear 1;
          animation: kiran .4s linear 1;
  -webkit-animation-delay: .8s;
          animation-delay: .8s;
}

@-webkit-keyframes kiran {
  0% {
    opacity: 0;
    transform: scale(2) rotate(45deg);
  }
  20% {
    opacity: .6;
    transform: scale(20) rotate(45deg);
  }
  40% {
    opacity: .4;
    transform: scale(30) rotate(45deg);
  }
  80% {
    opacity: .2;
    transform: scale(45) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(50) rotate(45deg);
  }
}

@keyframes kiran {
  0% {
    opacity: 0;
    transform: scale(2) rotate(45deg);
  }
  20% {
    opacity: .6;
    transform: scale(20) rotate(45deg);
  }
  40% {
    opacity: .4;
    transform: scale(30) rotate(45deg);
  }
  80% {
    opacity: .2;
    transform: scale(45) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(50) rotate(45deg);
  }
}



@import url("https://fonts.googleapis.com/css?family=Merienda");

svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  width: 100%;
  opacity: .6;
}

path {
  transform: scale(4, .15);
}
.svgWrap {
  position: relative;
  margin-bottom: 30px;
  height: 120px;
}

.babble {
  position: absolute;
  bottom: 0;
  z-index: 9999;
  opacity: .5;
  -webkit-filter: contrast(250%);
          filter: contrast(250%);
  /*   -webkit-animation: "babbleFloat" 3s linear 0s infinite;
          animation: "babbleFloat" 3s linear 0s infinite; */
  -webkit-animation: "babbleFloat" 6s linear 0s infinite;
          animation: "babbleFloat" 6s linear 0s infinite;
}
@-webkit-keyframes babbleFloat {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(inherit) scale(1.04);
  }
  20% {
    transform: translate(inherit, 50px);
  }

  100% {
    transform: translateY(-50vh);
  }
}
@keyframes babbleFloat {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-5vh) scale(1.04);
  }
  19% {
    transform: translate(0px, -9.5vh);
  }
  20% {
    transform: translate(2px, -10vh);
  }
  30% {
    opacity: .3;
  }
  40% {
    opacity: .5;
    transform: translate(-1px, -20vh);
  }


  70% {
    opacity: .4;
    transform: translate(1px, -35vh);
  }
  100% {
    opacity: 0;
    transform: translateY(-50vh);
  }
}
@media(min-width: 751px) {
  path {
    transform: scale(3, .09);
  }
  .svgWrap {
    margin-bottom: 180px;
  }
}