@charset "UTF-8";

/*========= ローディング画面のためのCSS ===============*/
/* #splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
} */

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
/* .splashbg{
    display: none;
} */

/*bodyにappearクラスがついたら出現*/
/* body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #004EA2;
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
} */

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
/* #container{
	opacity: 0;
} */

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*========= テキストを滑らかに出現させるためのCSS ===============*/
span.smoothText {
    overflow: hidden;
    display: block;
  }
  
  /* アニメーションで傾斜がついている文字列を水平に戻す*/
  span.smoothTextTrigger{
    transition: .8s ease-in-out;
    transform: translate3d(0,100%,0) skewY(12deg);
    transform-origin: left;
    display: block;
  }
  span.smoothTextTrigger.smoothTextAppear{
      transform: translate3d(0,0,0) skewY(0);
  }

  /*========= テキストを滑らかに出現させるためのCSS ===============*/
span.smoothText2 {
    overflow: hidden;
    display: block;
  }
  
  /* アニメーションで傾斜がついている文字列を水平に戻す*/
  span.smoothTextTrigger2{
    transition: 1.5s ease-in-out;
    transform: translate3d(0,100%,0) skewY(12deg);
    transform-origin: left;
    display: block;
  }
  span.smoothTextTrigger2.smoothTextAppear{
      transform: translate3d(0,0,0) skewY(0);
  }



  .fadeup,.fadeup2,.fadeup3,.fadeup4{

      transform:translateY(20%);
      opacity:0;
      }
      
      
      .fadeup_1,.fadeup_2,.fadeup_3,.fadeup_4{
      animation:huwa 0.8s ease-out forwards;
      }

      @keyframes huwa {
      
      to {
      
      transform:initial;
      opacity:1;
      }
      
      }
      @keyframes huwa2 {
      
        to {
        
        transform:initial;
        opacity:0.8;
        }
        
        }

        .fadeup5 {
          opacity: 0;
          visibility: hidden;
          transition: all 3s;
          transform:translateY(20%);
        }
        .fadeup5.is-show {
          opacity: 0.8;
          visibility: visible;
          transform: translateY(0);
        }
      
      .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);
          }
        }

        .slide-in {
            overflow: hidden;
            display: inline-block;
        }
        
        .slide-in_inner {
            display: inline-block;
        
        }
        
/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:2s;
  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:2s;
  animation-fill-mode:forwards;
    opacity: 0;
}


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

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


      
/*左右のアニメーション*/
.leftAnime2{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight2 {
  animation-name:slideTextX102;
  animation-duration:2s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX102 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft2 {
  animation-name:slideTextX-101;
  animation-duration:2s;
  animation-fill-mode:forwards;
    opacity: 0;
}


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

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}