@charset "utf-8";

/**
 * フェードイン
 */
.scrollAnim-fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
  
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}
  
/**
 * フェードイン 下から
 */
.scrollAnim-fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity:0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  
/**
 * フェードイン 上から
 */
.scrollAnim-fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  
/**
 * フェードイン 左から
 */
.scrollAnim-fadeLeft {
  animation-name:fadeLeftAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}
  
/**
 * フェードイン 右から
 */
.scrollAnim-fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.scrollAnim-fadeInTrigger,
.scrollAnim-fadeInTriggerFixed,
.scrollAnim-fadeUpTrigger,
.scrollAnim-fadeDownTrigger,
.scrollAnim-fadeLeftTrigger,
.scrollAnim-fadeLeftTriggerFixed,
.scrollAnim-fadeRightTrigger {
  opacity: 0;
}
  
/**
 * 拡大
 */
.scrollAnim-zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
  
/**
 *  縮小
 */
.scrollAnim-zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0;
  }

  to {
    transform:scale(1);
    opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.scrollAnim-zoomInTrigger,
.scrollAnim-zoomInTriggerFixed,
.scrollAnim-zoomOutTrigger {
    opacity: 0;
}


/**
 * テキストの回転
 */
.scrollAnim-textRoll.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;
}