@charset "UTF-8";
/* CSS Document */


/* anime */


/* canvas */

#cvs{
	display: block;
	position:  fixed;
	top:0;
	left: 0;
	z-index: 0
}


/* fadeIn */

.fadeIn{
animation-name: fadeInAnime;
animation-duration:1.2s;
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.moveLogo{
animation-name: moveLogoAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
}

@keyframes moveLogoAnime{
  from {

  }

  to {
    top: 650px;
  }
}


.visOpc{
animation-name: visOpcAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
}

@keyframes visOpcAnime{
  from {
    opacity: 0.01;
  }

  to {
    opacity: 1;
  }
}

.visTrigger{
	opacity: 0.01
}


.fadeOut{
animation-name: fadeOutAnime;
animation-duration:2s;
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
}

@keyframes fadeOutAnime{
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.body_base{
	width: 100vw;
  height: 100vh;
	position: fixed;
	background-color: #fafafa;
	top:0;
	left: 0;
	z-index: 2;
	opacity: 1;
}


.fadeInTrigger{
    opacity: 0;
}

/* fadeUp */

/* fadeUp */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


.fadeUpTrigger,{
    opacity: 0;
}