/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }
  
  /*----------------------------
  scroll_left ｜左から出現
  ----------------------------*/
  .scroll_left {
      -webkit-transition: 0.8s ease-in-out;
      -moz-transition: 0.8s ease-in-out;
      -o-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
      transform: translateX(-30px);
      opacity: 0;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
  }
  .scroll_left.on {
      opacity: 1.0;
      filter: alpha(opacity=100);
      -moz-opacity: 1.0;
      transform: translateX(0);
  }
  
  /*----------------------------
  scroll_right ｜右から出現
  ----------------------------*/
  .scroll_right {
      -webkit-transition: 0.8s ease-in-out;
      -moz-transition: 0.8s ease-in-out;
      -o-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
      transform: translateX(30px);
      opacity: 0;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
  }
  .scroll_right.on {
      opacity: 1.0;
      filter: alpha(opacity=100);
      -moz-opacity: 1.0;
      transform: translateX(0);
  }

  /*----------------------------
  タイミング
  ----------------------------*/
    .timing02 {transition-delay: .2s;}
    .timing03 {transition-delay: .4s;}
    .timing04 {transition-delay: .6s;}
    .timing05 {transition-delay: .8s;}
    .timing06 {transition-delay: .10s;}
    .timing07 {transition-delay: .12s;}
    .timing08 {transition-delay: .14s;}
    .timing09 {transition-delay: .16s;}