@charset "UTF-8";

/* ANIMATION 
========================================= */
.fadeIn,.fadeInRight,.fadeInDown,.fadeInLeft,.fadeInUp{
  opacity:0;
}
.fadeIn.on{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInAnime{
  from { opacity: 0; }
  50%  { opacity:.0.5;}
  to   { opacity: 1; }
}

.fadeInRight.on{
  animation-name:fadeInRightAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInRightAnime{
  from { opacity: 0; transform: translateX(-20%) ;}
  50%  { opacity:.0.5; transform: translateX(0) ;}
  to   { opacity: 1; }
}

.fadeInDown.on{
  animation-name:fadeInDownAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInDownAnime{
  from { opacity: 0; transform: translateY(-5%) ;}
  50%  { opacity:.45; transform: translateY(0) ;}
  to   { opacity: 1; }
}

.fadeInLeft.on{
  animation-name:fadeInLeftAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInLeftAnime{
  from { opacity: 0; transform: translateX(10%) ;}
  50%  { opacity:.1; transform: translateX(0) ;}
  to   { opacity: 1; }
}

.fadeInUp.on{
  animation-name:fadeInUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInUpAnime{
  from { opacity: 0; transform: translateY(5%) ;}
  50%  { opacity:.1; transform: translateY(0) ;}
  to   { opacity: 1; }
}

/* 一文字ずつアニメーション */
.eachTextAnime{
  /* color: #fff; */
  display: block;
  overflow: hidden;
  line-height: inherit;
  height: 100%;
}
.eachTextAnime span{
  display: inline-block;
  /* transform: translateY(100%); */
  line-height: inherit;
  opacity: 0;
}
.eachTextAnime.on span{
    animation:text_anime_on .4s cubic-bezier(.74,.22,.58,.84) forwards;
}
@keyframes text_anime_on {
  /* 0% {transform: translateY(100%); opacity: 0;}
  70% {transform: translateY(-5%); opacity: .2;}
  100% {transform: translateY(0); opacity: 1;} */
  0% { opacity: 0;}
  70% { opacity: .4;}
  100% { opacity: 1;}
}

/* 一文字ずつアニメーション */

.delay01s{animation-delay: .1s;}
.delay02s{animation-delay: .2s;}
.delay025s{animation-delay: .25s;}
.delay03s{animation-delay: .3s;}
.delay04s{animation-delay: .4s;}
.delay05s{animation-delay: .5s;}
.delay06s{animation-delay: .6s;}
.delay075s{animation-delay: .75s;}
.delay1s{animation-delay: 1s;}
.delay15s{animation-delay: 1.5s;}
.delay2s{animation-delay: 2s;}