/* ---------------------------
   共通アニメーション設定
--------------------------- */

/* 一文字ずつ出す */
.splitText .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}

.split.isActive .char {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.11, 0, 0.5, 0) calc(0.05s * var(--index)),
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) calc(0.05s * var(--index));
}

/* 全体ふわっと出す */
.fadeUp {
  transform: translateY(20px);
  opacity: 0;
  transition: 
    transform 1s cubic-bezier(.4,0,.2,1), 
    opacity 2s cubic-bezier(.4,0,.2,1);
  will-change: transform, opacity;
  backface-visibility: hidden;  
}

.fadeUp.isActive {
  opacity: 1;
  transform: translateY(0);
}

.fv .fadeUp {
  animation: fvFadeUp 2000ms cubic-bezier(.4,0,.2,1) 100ms both;
  animation-play-state: paused;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: none;
}

body.loaded .fv .fadeUp {
  animation-play-state: running;
}

@keyframes fvFadeUp {
  0%   { opacity: 0; transform: translate3d(0, 20px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}