@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');


/* =======================
screen transition
======================= */
/* loading */
#splash{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #333;
  z-index: 999999;
  text-align: center;
  color: #fff;
}

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

body{
  background-color: #333;
}

body.appear{
  background-color: #fff;
}

.splashbg1,
.splashbg2{
  display: none;
}

body.appear .splashbg1,
body.appear .splashbg2{
  display: block;
}

/* disappear on top */
body.appear .splashbg1{
  animation-name: PageAnime;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  bottom: 50%;
  left: 0;
  transform: scaleY(1);
  background-color: #333;
}

@keyframes PageAnime{
0% {
  transform-origin: top;
    transform: scaleY(1);
  }
  100%{
    transform-origin: top;
    transform: scaleY(0);  
  }
}

/* disappear below */
body.appear .splashbg2{
  animation-name: PageAnime2;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 50%;
  left: 0;
  transform: scaleY(1);
  background-color: #333;
}

@keyframes PageAnime2{
  0% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  100%{
    transform-origin: bottom;
    transform: scaleY(0);  
  }
}

/* after screen transition */
#page{
  opacity: 0;
}

body.appear #page{
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

/* ========================
header moving
======================== */

/* header UpMove */
#header.UpMove{
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from{
    opacity: 1;
    transform: translateY(0);
  }
  to{
    opacity: 0;
    transform: translateY(-110px);
  }
}

/* header DownMove */
#header.DownMove{
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
  from{
    opacity: 0;
    transform: translateY(-110px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==================
/* service bgUD */
/* ================== */
#service-item[data-id]::before{
  position: absolute;
  top: 0;
  width: -5%;
  z-index: -1;
  content: '';
  width: 110%;
  height: 180%;
  transform-origin: left bottom;
  transform: skewY(-10deg) scale(1, 0);
  transition: transform 2s;
}

#service-item[data-id]:hover::before{
  transform-origin: left top;
  transform: skewY(-10deg) scale(1, 1);
}

/* ==============
top message side slide anmation
============== */

.animate {
	font-size: 50px;
}

.animate span {
	display: inline-block;
  font-family: 'Alfa Slab One', cursive;
}
.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}
.animate span:nth-of-type(13) {
	animation-delay: .6s;
}
.animate span:nth-of-type(14) {
	animation-delay: .65s;
}
.animate span:nth-of-type(15) {
	animation-delay: .7s;
}
.animate span:nth-of-type(16) {
	animation-delay: .75s;
}
.animate span:nth-of-type(17) {
	animation-delay: .8s;
}
.animate span:nth-of-type(18) {
	animation-delay: .85s;
}
.animate span:nth-of-type(19) {
	animation-delay: .9s;
}
.animate span:nth-of-type(20) {
	animation-delay: .95s;
}

/* Animation Three */

.topAnime span {
	color: white;
	opacity: 1;
	transform: translate(-300px, 0) scale(0);
	animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
	60% {
		transform: translate(20px, 0) scale(1);
		color: white;
	}

	80% {
		transform: translate(20px, 0) scale(1);
		color: white;
	}

	99% {
		transform: translate(0) scale(1.2);
		color: #00f0ff;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
		color: white;
	}
}

/* .topAnimeTrigger{
  opacity: 0;
} */


/*==================================================
basic move
===================================*/
.fadeIn{
  animation-name: fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeInAnime{
  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);
  }
}

.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;
  }
}
/*========= 流れるテキスト ===============*/

/*全共通*/

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

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

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02{
  animation-delay: 0.2s;
}

.delay-time04{
  animation-delay: 0.4s;
}

.delay-time05{
  animation-delay: 0.5s;
}

.delay-time06{
  animation-delay: 0.6s;
}

.delay-time08{
  animation-delay: 0.8s;
}

.delay-time10{
  animation-delay: 1s;
}

.delay-time12{
  animation-delay: 1.2s;
}

.delay-time14{
  animation-delay: 1.4s;
}

.delay-time16{
  animation-delay: 1.6s;
}

.delay-time18{
  animation-delay: 1.8s;
}

.delay-time20{
  animation-delay: 2s;
}

.delay-time22{
  animation-delay: 2.2s;
}

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

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


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

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}
/* slowly */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

.blurTrigger{
  opacity: 0;
}


/* background extend */
.bgextend{
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
}

@keyframes bgextendAnimeBase{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.bgappear{
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.bgLRextend::before{
  animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: darkblue;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  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);
	}
}


.bgRLextend::before{
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: purple;
}

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

.TextTyping span {
	display: none;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
  content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}

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