@charset "utf-8";


/* == for 4-13.js  == */

/* 読み込み時にフェードイン */
.fade_In{
  animation-name:fadeInOnlyAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  @keyframes fadeInOnlyAnime{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

/* TOP(landing) Page 用 (0.5sec) */
.fadeIn_05s{
  animation-name:fadeInAnime;
  animation-duration: 0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  @keyframes fadeInAnime{
    from {
      transition: 0.75s;
      transform: scale(0.8);
          opacity: 0;
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .fadeInNext_05s{
    animation-name:fadeInAnime2;
    animation-duration: 0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    @keyframes fadeInAnime2{
      from {
            opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  
  .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);
      }
    }

    /* Top表示後のFade-Out */
    .Fade_Out{
      animation-name: fadeOutAnime;
      animation-duration: 5s;
      animation-fill-mode: forwards;
          opacity: 1;
      }
      @keyframes fadeOutAnime{
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      } 
       
  
/* TOP2 表示用 */
.Delay_1s{
  animation-delay: 1s; 
}
.Delay_2s{
  animation-delay: 2s; 
}
.Delay_3s{
  animation-delay: 3s; 
}
.Delay_4s{
  animation-delay: 4s; 
}
.Delay_5s{
  animation-delay: 5s; 
}
.Delay_8s{
  animation-delay: 8s; 
}
.Delay_10s{
  animation-delay: 10s; 
}
.Delay_12s{
  animation-delay: 12s; 
}
.Delay_13s{
  animation-delay: 13s; 
}











/* == for  izumi.js == */

  /* 表示されたらフェードイン */
.scroll_fade {
  transition: opacity 1.5s;
  opacity: 0;
  }
  .scroll_fade.on {
    opacity: 1.0;
  }

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

.zoom_in {
  transition: 0.5s;
  transform: scale(0.9);
  opacity: 0;
  }
  .zoom_in.on {
    transform: scale(1);
    opacity: 1.0;
  }