@charset "UTF-8";

.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

/*-----------------------*/

.poyoyon2{
  animation: poyoyon2 1.5s ease-in-out 1 forwards;
}
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    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);
  }
}


.fade_in{
	animation-name: fadeIn;
	animation-duration:4.0s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes fadeIn {
  0% {opacity: 0}
  50% {opacity: 1}
  100% {opacity: 0}
}


/*---------文字--------------*/

.ander-fadeup {
    animation-name: u_fadeup;
	animation-fill-mode:forwards;
/*
	animation-timing-function: ease-in-out;
*/
	animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
    animation-duration: 0.6s;
}
@keyframes u_fadeup {
	0% {
	    opacity: 0;
	    transform: translateY(20px);
	}
	40% {
	    transform: translateY(20px);
	}
	100% {
	    opacity: 1;
	    transform: translateY(0);
	}
}

.poyoyon3{
/*
  animation: poyoyon3 1.5s ease-in-out 1 forwards;
*/
    animation-name: poyoyon3;
	animation-fill-mode:forwards;
	animation-timing-function: ease-in-out;
    animation-duration: 0.6s;

}
@keyframes poyoyon3 {
  0%  {
    transform: translate(0, 20px);
    opacity: 0;
  }
  70% {
    transform: translate(0, -8px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*---------キラキラ--------------*/

.top_kira2_move{
	-webkit-animation: huerotator 5s infinite;
}

@-webkit-keyframes huerotator {
  0% {
	top:-100%;
	left:-100%;
	filter:alpha(opacity=0); 
	-moz-opacity: 0; 
	opacity: 0; 
  }
  40% {
	filter:alpha(opacity=50); 
	-moz-opacity: 0.5; 
	opacity: 0.5; 
  }
  100% {
	top:0;
	left:0;

	filter:alpha(opacity=0); 
	-moz-opacity: 0; 
	opacity: 0; 
  }
}


/*----------画像-------------*/

.top_zoomin{
	-webkit-animation: zoomin 6s ease-in-out 1 forwards;
}

@-webkit-keyframes zoomin {
  0% {
	transform: scale(1.2);
	opacity: 0; 
  }
  100% {
	transform: scale(1);
	opacity: 1; 
  }
}