/* effect-fade
------------------------------- */

.effect-fade {
  opacity: 0;
  transition: all 1.7s;
}

.effect-fade.effect-scroll {
  opacity: 1;
}


/* fadeup
------------------------------- */
.fadeup.effect-scroll {
  animation-name: fadeupAnime;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
  transition: transform 1.2s, opacity 1.2s;
}


@keyframes fadeupAnime {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.delay-time02 {
  animation-delay: 0.2s;
}

.delay-time04 {
  animation-delay: 0.4s;
}



/* くるくるまわるテキスト
ーーーーーーーーーーーーーーーーーー */

.rollAnime.roll span {
  transition-property: opacity, transform;
  transform: rotateY(360deg);
  transition: all .8s cubic-bezier(.77, 0, .175, 1);
  transition-timing-function: cubic-bezier(.77, 0, .175, 1);
  display: inline-block;
}


/* 光りながらのテキスト
ーーーーーーーーーーーーーーーーーー */

.glowAnime span {
  opacity: 0;
}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span {
  animation: glow_anime_on 1s ease-out forwards;
}

@keyframes glow_anime_on {
  0% {
    opacity: 0;
    /* text-shadow: 0 0 0 #fff, 0 0 0 #fff; */
  }

  50% {
    opacity: 1;
    /* text-shadow: 0 0 10px #fff, 0 0 15px #fff; */
  }

  100% {
    opacity: 1;
    /* text-shadow: 0 0 0 #fff, 0 0 0 #fff; */
  }
}

/* 1文字ずつ出るテキスト
ーーーーーーーーーーーーーーーーーーー */

.eachTextAnime span {
  opacity: 0;
}

.eachTextAnime.appeartext span {
  animation: text_anime_on 2.7s ease-out forwards;
}

@keyframes text_anime_on {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/* タイピング風に出るテキスト
ーーーーーーーーーーーーーーーーーーー */
.TextTyping span {
  display: none;
}

.TextTyping::after {
  content: "|";
  animation: typinganime 2.8s ease infinite;
}

@keyframes typinganime {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* バラバラにに出るテキスト
ーーーーーーーーーーーーーーーーーーー */
.TextRandomAnime span {
  opacity: 0;
}

.TextRandomAnime.appearRandomtext span {
  animation: text_randomanime_on .5s ease-out forwards;
}

@keyframes text_randomanime_on {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.TextRandomAnime.appearRandomtext span:nth-child(2n) {
  animation-delay: .5s;
}

.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
  animation-delay: .15s;
}


/* じわっと出るテキスト
ーーーーーーーーーーーーーーーーーーー */

.blur {
  animation-name: blurAnime;
  animation-duration: 1.7s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }

  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

.blurTrigger {
  opacity: 0;
}


/* Accordion
-------------------------------- */

.jsAccordionTitle:hover {
  cursor: pointer;
}

.accordion-content {
  display: none;
}

.accordion-content.is-open {
  display: block;
}