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

.slide_left {opacity: 0;}
.slide_right {opacity: 0;}
.slide_up {opacity: 0;}
.slide_down {opacity: 0;}

.slide_left.activeL {animation: 2s slideL ease-in-out forwards;}
@keyframes slideL {0% {opacity: 0;transform: translateX(-50px);}100%{opacity: 1;transform: translateX(0);}}
.slide_right.activeR {animation: 2s slideR ease-in-out forwards;}
@keyframes slideR {0% {opacity: 0;transform: translateX(50px);}100%{opacity: 1;transform: translateX(0);}}
.slide_up.activeU {animation: 2s slideU ease-in-out forwards;}
@keyframes slideU {0% {opacity: 0;transform: translateY(50px);}100%{opacity: 1;transform: translateY(0);}}
.slide_down.activeD {animation: 2s slideD ease-in-out forwards;}
@keyframes slideD {0% {opacity: 0;transform: translateY(-50px);}100%{opacity: 1;transform: translateY(0);}}
	
.purun {animation: purun 0.8s linear 0s 1;}
@keyframes purun {0%{transform:scale(1,1) translate(0%,0%)}15%{transform:scale(.9,.9) translate(0%,5%)}30%{transform:scale(1.3,.8) translate(0%,10%)}50%{transform:scale(.8,1.3) translate(0%,-10%)}70%{transform:scale(1.1,.9) translate(0%,5%)}100%{transform:scale(1,1) translate(0%,0%)}}

a:hover .purunhover {animation: purunhover 0.8s linear 0s 1;}
@keyframes purunhover {0%{transform:scale(1,1) translate(0%,0%)}15%{transform:scale(.9,.9) translate(0%,5%)}30%{transform:scale(1.3,.8) translate(0%,10%)}50%{transform:scale(.8,1.3) translate(0%,-10%)}70%{transform:scale(1.1,.9) translate(0%,5%)}100%{transform:scale(1,1) translate(0%,0%)}}

.poyon {animation: poyon 1.1s linear 0s 1;}
@keyframes poyon {0%{transform:scale(.8,1.4) translate(0%,-100%)}10%{transform:scale(.8,1.4) translate(0%,-15%)}20%{transform:scale(1.4,.6) translate(0%,30%)}30%{transform:scale(.9,1.1) translate(0%,-10%)}40%{transform:scale(.95,1.2) translate(0%,-30%)}50%{transform:scale(.95,1.2) translate(0%,-10%)}60%{transform:scale(1.1,.9) translate(0%,5%)}70%{transform:scale(1,1) translate(0%,0%)}100%{transform:scale(1,1) translate(0%,0%)}}

a:hover .poyonhover {animation: poyon 1.1s linear 0s 1;}
@keyframes poyon {0%{transform:scale(.8,1.4) translate(0%,-100%)}10%{transform:scale(.8,1.4) translate(0%,-15%)}20%{transform:scale(1.4,.6) translate(0%,30%)}30%{transform:scale(.9,1.1) translate(0%,-10%)}40%{transform:scale(.95,1.2) translate(0%,-30%)}50%{transform:scale(.95,1.2) translate(0%,-10%)}60%{transform:scale(1.1,.9) translate(0%,5%)}70%{transform:scale(1,1) translate(0%,0%)}100%{transform:scale(1,1) translate(0%,0%)}}

.korokoro {animation: korokoro 2.5s linear 0s 1;}
@keyframes korokoro {0%{transform:translate(0%,0%)}5%{transform:translate(10%,0%) rotate(10deg)}25%{transform:translate(20%,0%) rotate(20deg)}30%{transform:translate(-10%,0%) rotate(-10deg)}35%{transform:translate(-15%,0%) rotate(-15deg)}45%{transform:translate(10%,0%) rotate(10deg)}50%{transform:translate(15%,0%) rotate(15deg)}60%{transform:translate(-5%,0%) rotate(-5deg)}65%{transform:translate(-7%,0%) rotate(-7deg)}75%{transform:translate(0%,0%) rotate(0deg)}100%{transform:translate(0%,0%) rotate(0deg)}}

.purupuru {animation: purupuru 0.8s linear 0s 1;}
@keyframes purupuru {0%{transform:scale(1,1) translate(0%,0%)}20%{transform:scale(1,1.06) translate(-5%,-4%) skew(6deg,0deg)}50%{transform:scale(1,.94) translate(5%,4%) skew(-6deg,0deg)}65%{transform:scale(1,1.03) translate(2%,-2%) skew(-3deg,0deg)}80%{transform:scale(1,.97) translate(-2%,2%) skew(3deg,0deg)}100%{transform:scale(1,1) translate(0%,0%)}}

a:hover .purupuruhover {animation: purupuru 0.8s linear 0s 1;}
@keyframes purupuru {0%{transform:scale(1,1) translate(0%,0%)}20%{transform:scale(1,1.06) translate(-5%,-4%) skew(6deg,0deg)}50%{transform:scale(1,.94) translate(5%,4%) skew(-6deg,0deg)}65%{transform:scale(1,1.03) translate(2%,-2%) skew(-3deg,0deg)}80%{transform:scale(1,.97) translate(-2%,2%) skew(3deg,0deg)}100%{transform:scale(1,1) translate(0%,0%)}}

.poyooon {animation: poyooon 0.9s linear 0s 1;}
@keyframes poyooon {0%{transform:scale(1,1) translate(0%,0%)}10%{transform:scale(1.1,.9) translate(0%,5%)}40%{transform:scale(1.2,.8) translate(0%,15%)}50%{transform:scale(1,1) translate(0%,0%)}60%{transform:scale(.9,1.2) translate(0%,-100%)}75%{transform:scale(.9,1.2) translate(0%,-20%)}85%{transform:scale(1.2,.8) translate(0%,15%)}100%{transform:scale(1,1) translate(0%,0%)}}

.puyon {animation: puyon 1.0s linear 0s 1;}
@keyframes puyon {0%{transform:scale(1,1) translate(0%,0%)}40%{transform:scale(.95,1.2) translate(0%,-10%)}50%{transform:scale(1.1,.9) translate(0%,5%)}60%{transform:scale(.95,1.05) translate(0%,-3%)}70%{transform:scale(1.05,.95) translate(0%,3%)}80%{transform:scale(1,1) translate(0%,0%)}100%{transform:scale(1,1) translate(0%,0%)}}

.pururun {animation: pururun 1.2s linear 0.2s 1;}
@keyframes pururun {0%{transform:scale(1,1) translate(0%,0%)}10%{transform:scale(1,1) translate(10%,0%) skew(-10deg,0deg)}60%{transform:scale(1,1) translate(20%,0%) skew(-20deg,0deg)}70%{transform:scale(1,1) translate(-15%,0%) skew(15deg,0deg)}80%{transform:scale(1,1) translate(15%,0%) skew(-15deg,0deg)}80%{transform:scale(1,1) translate(5%,0%) skew(-5deg,0deg)}90%{transform:scale(1,1) translate(-5%,0%) skew(5deg,0deg)}100%{transform:scale(1,1) translate(0%,0%)}}

.slideB12s {animation: slideInB12 1.2s linear;}
@keyframes slideInB12 {from {transform: translateY(100%);opacity: 0;}to{transform: translateY(0%);opacity: 1; }}

.slideB14s {animation: slideInB14 1.4s linear;}
@keyframes slideInB14 {from {transform: translateY(100%);opacity: 0;}to{transform: translateY(0%);opacity: 1; }}

.fadeIn4s {opacity: 0; animation: fadeIn 2s; animation-fill-mode: forwards;}
@keyframes fadeIn {from{opacity: 0;}to{opacity: 1;}}