@charset "UTF-8";
/*====================================
アニメーション
===================================*/
.scroll-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s; }

.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px); }

._delay01 {
  transition-delay: 200ms; }

._delay02 {
  transition-delay: 400ms; }

._delay03 {
  transition-delay: 600ms; }

._delay04 {
  transition-delay: 800ms; }

._delay05 {
  transition-delay: 1000ms; }

._delay06 {
  transition-delay: 1200ms; }

._delay07 {
  transition-delay: 1400ms; }

._delay08 {
  transition-delay: 1600ms; }

/*このクラスが付与されると表示する*/
.active {
  opacity: 1;
  visibility: visible; }

.slide-in {
  overflow: hidden;
  display: inline-block; }

.slide-in_inner {
  display: inline-block; }

.fade-side {
  animation: fade-side 2s ease 1s 1 normal backwards; }

.fade-in {
  animation: fade-side 4s ease 1s 1 normal backwards; }

@keyframes fade-side {
  from {
    opacity: 0;
    transform: translateX(-20px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.fade-up {
  animation: fade-up 2s ease 1s 1 normal backwards; }

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(-20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/*縦文字のアニメーション*/
.douwnAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/ }

.slideAnimeupdown {
  animation-name: slideTextY100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextY100 {
  from {
    transform: translateY(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateY(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
.slideAnimedownup {
  animation-name: slideTextY-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextY-100 {
  from {
    transform: translateY(100%);
    /*要素を右の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateY(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
/*横文字のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/ }

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }