@charset "UTF-8";
/* CSS Document */
.scroll_event{
	overflow: hidden;
}
.scroll_event .in_ct{
	transition: 2s;
}

.f_up_list{
	opacity: 0;
	transform: translate(0,50px); 
	-webkit-transform: translate(0,50px); 
}
.f_up{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.f_in_list{
	opacity: 0;
}
.f_in{
	opacity: 1.0;
}

.f_list_left{
	opacity: 0;
	transform: translate(-50px,0); 
	-webkit-transform: translate(-50px,0); 
}
.f_left{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.f_list_right{
	opacity: 0;
	transform: translate(50px,0); 
	-webkit-transform: translate(50px,0); 
}
.f_right{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.tori_l_move{
	animation: tori_l 4s linear; transform-origin: 50% 50%;animation-iteration-count:3; }
@keyframes tori_l {
	0% { transform: translateY(0) rotate(0deg)}
  33.33333% { transform: translateY(-6px) translateX(-10px)}
  66.66667% { transform: translateY(0) rotate(10deg)}
   76.66667% { transform: translateY(0) rotate(5deg)}
    86.66667% { transform: translateY(0) rotate(10deg)}
  100% { transform: translateY(0) }
	 }
.tori_r_move{
	animation: tori_r 4s linear; transform-origin: 50% 50%;animation-iteration-count:3; }
	@keyframes tori_r {
	0% { transform: translateY(0) rotate(0deg)}
  23.33333% { transform: translateY(6px)}
  56.66667% { transform: translateY(0) translateX(-6px) rotate(-10deg)}
   66.66667% { transform: translateY(0) translateX(-6px) rotate(-5deg)}
    76.66667% { transform: translateY(0) translateX(-6px) rotate(-10deg)}
  100% { transform: translateY(0) }
	 }	 
.cyocyo_move{
	animation: cyocyo 4s linear; transform-origin: 50% 50%;animation-iteration-count:3; }
	@keyframes cyocyo {
	0% { transform: translateY(0) rotate(0deg)}
 20% { transform: translateY(10px)  rotate(10deg)}
 40% { transform: translateY(0) translateX(-5px)}
 60% { transform: translateY(-5px) rotate(-5deg)}
 80% { transform: translateY(10px) rotate(-10deg)}
 85% { transform: translateY(6px) rotate(-5deg)}
 90% { transform: translateY(10px) rotate(-10deg)}
  100% { transform: translateY(0) }
	 }	
.info_cyocyo_move{
	animation:info_cyocyo 4s linear; transform-origin: 50% 50%;animation-iteration-count:3; }
	@keyframes info_cyocyo {
 0% { transform:translateY(0) rotate(0deg)}
 25% { transform:translateY(2px) translateX(2px) rotate(5deg)}
 50% { transform:translateY(4px) translateX(4px) rotate(10deg)}
 75% { transform:translateY(2px) translateX(2px) rotate(5deg)}
 100% { transform:translateY(0) rotate(0deg)}
	 }