@charset "UTF-8";/* CSS Document */
/*すいか*/
.slidebotton1{
animation-name:slidebotton1;	
animation-duration:1.2s;
animation-timing-function:ease-out-in;
visibility:visible !important;}
@keyframes slidebotton1 {
0% {transform:rotate(100deg);transform-origin:-50 0;}
40% {transform:translate(0px,0px) ;}
60% {transform:translate(0px,-100px) ;}
75% {transform:translate(0px,0px) ;}
85% {transform:translate(0px,-40px) ;}
92% {transform:translate(0px,0px) ;}
96% {transform:translate(0px,-20px) ;}
100% {transform:translate(0px,0px) rotate(0deg);}}

/*たまねぎ*/
.slidebottyan{
animation-name:slidebottyan;	
animation-duration:3s;
animation-timing-function:ease-out-in;
visibility:visible !important;}
@keyframes slidebottyan {
0% {transform:translate(0px,-500px) ;opacity:0;}
65% {transform:translate(0px,-500px) ;opacity:0;}
72% {transform:translate(0px,0px) ;opacity:1;}
76% {transform:translate(0px,-100px) ;}
82% {transform:translate(0px,0px) ;}
87% {transform:translate(0px,-40px) ;}
92% {transform:translate(0px,0px) ;}
96% {transform:translate(0px,-20px) ;}
100% {transform:translate(0px,0px);}}

/*メロン*/
.slidemeron{
animation-name:slidemeron;	
animation-duration:1.4s;
animation-timing-function:ease;
visibility:visible !important;}
@keyframes slidemeron {
0% {transform:translate(-1000px,200px) rotate(-400deg) ;}
100% {transform:translate(0px,0px) rotate(0deg);}}

/*かぶ*/
.slidekabu{
animation-name:slidekabu;	
animation-duration:1.8s;
animation-timing-function:ease-in-out;	
visibility:visible !important;}
@keyframes slidekabu {
0% {transform:translateX(150%);opacity:0;}
55% {transform:translateX(150%);opacity:1;}
60%{transform:translateX(-8%);}
72%{transform:translateX(4%);}
80%{transform:translateX(-4%);}
95%{transform:translateX(2%);}
100% {transform:translateX(0%);}}