@charset "utf-8";

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

	Powered by funa2 system.
  Auth: Nice Guy

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

/* ------------------------------------
	アニメーションスタイル
------------------------------------*/

/* bound */
@keyframes bound-anim {
	0%,100% {top: 0;transform: scale(1);}
	30% {top: -25%;}
	50% {transform: scale(1);}
	90% {top: 0;transform: scale(1.2,0.8);}
}

@keyframes bound-right {
	0% {transform: translateX(0px);}
	100% {transform: translateX(-1%);}
}

/* slide */
@keyframes slide-up{
	0% { transform:translateY(30px); }
	100% { transform:translateY(0); }
}
@keyframes slide-up-2{
	0% { transform:translateY(50px); }
	100% { transform:translateY(0); }
}
@keyframes slide-down{
	0% { transform:translateY(-30px); }
	100% { transform:translateY(0); }
}
@keyframes slide-down-2{
	0% { transform:translateY(-50px); }
	100% { transform:translateY(0); }
}
@keyframes slide-right{
	0% { transform:translateX(-50px); }
	100% { transform:translateX(0); }
}
@keyframes slide-right-2{
	0% { transform:translate(-50px,50px); }
	100% { transform:translate(0); }
}
@keyframes slide-left{
	0% { transform:translateX(50px); }
	100% { transform:translateX(0); }
}
@keyframes slide-left-2{
	0% { transform:translate(50px,50px); }
	100% { transform:translate(0);}
}
@keyframes role-up {
  0%{
    transform: rotateY(0) translateY(40px);
    opacity: 0;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}
@keyframes vertical {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

/* scroll */
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}



.slide_up_1{
	animation: slide-up 0.8s ease-out 0.01s forwards;
}
.slide_up_2{
	animation: slide-up-2 0.8s ease-out 0.01s forwards;
}
.slide_down_1{
	animation: slide-up 0.8s ease-out 0.01s forwards;
}
.slide_down_2{
	animation: slide-up-2 0.8s ease-out 0.01s forwards;
}
.slide_right_1{
	animation: slide-right 0.8s ease-out 0.01s forwards;
}
.slide_left_1{
	animation: slide-left 0.8s ease-out 0.01s forwards;
}
.slide_right_2{
	animation: slide-right-2 0.8s ease-out 0.01s forwards;
}
.slide_left_2{
	animation: slide-left-2 0.8s ease-out 0.01s forwards;
}