@charset "UTF-8";


/* page
———————————–———————————–———————————–———————————– */
@keyframes pageFade {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
@-webkit-keyframes pageFade {
  0% { opacity: 0 }
  100% { opacity: 1 }
}


/* item
———————————–———————————–———————————–———————————– */
.buruburu {
    display: inline-block;
    animation: buruburu .1s infinite;
}

@keyframes buruburu {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@keyframes bound-bou {
  0% {top: -40%; transform: scale(1); opacity:1;}
  30% {top: -10%; transform: scale(0.96,1.04); opacity:1;}
  60% {transform: scale(1); opacity:1;}
  90% {top: 60px;transform: scale(1.15,0.9); opacity:1;}
  100% {top: 60px; transform: scale(1); opacity:1;}
}

@keyframes drop-bou {
  0% {top: 60px; opacity:.5;}
  90% {transform: scale(1.15,0.9);}
  100% {top: 100px; opacity:0;}
}

@keyframes bound-bou2 {
    0%,100% {transform: scale(1.0, 1.0) translate(0%, 0%); opacity:1;}
    15% {transform: scale(0.9, 0.9) translate(0%, 5%); opacity:1;}
    30% {transform: scale(1.3, 0.8) translate(0%, 10%); opacity:1;}
    50% {transform: scale(0.8, 1.3) translate(0%, -10%); opacity:1;}
    70% {transform: scale(1.1, 0.9) translate(0%, 5%); opacity:1;}
}

/*float*/
@keyframes float
{
    0%, 100%
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-20px);
    }
}

@-webkit-keyframes float
{
    0%, 100%
    {
        -webkit-transform: translateY(0);
    }
    50%
    {
        -webkit-transform: translateY(-20px);
    }
}



/*bounce-in*/
.bounce-in:hover + .popup
{
    -webkit-animation: bounce-in 1.2s;
            animation: bounce-in 1.2s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes bounce-in
{
    0%
    {
        transform: scale(.9);

        opacity: 0;
    }
    25%
    {
        transform: scale(1.2);
    }
    40%
    {
        transform: scale(.8);
    }
    50%
    {
        transform: scale(1.1);
    }
    60%
    {
        transform: scale(.9);
    }
    70%
    {
        transform: scale(1.05);

        opacity: 1;
    }
    80%
    {
        transform: scale(.95);
    }
    90%
    {
        transform: scale(1.01);
    }
    100%
    {
        transform: scale(1);
    }
}
@-webkit-keyframes bounce-in
{
    0%
    {
        -webkit-transform: scale(.9);

        opacity: 0;
    }
    25%
    {
        -webkit-transform: scale(1.2);
    }
    40%
    {
        -webkit-transform: scale(.8);
    }
    50%
    {
        -webkit-transform: scale(1.1);
    }
    60%
    {
        -webkit-transform: scale(.9);
    }
    70%
    {
        -webkit-transform: scale(1.05);

        opacity: 1;
    }
    80%
    {
        -webkit-transform: scale(.95);
    }
    90%
    {
        -webkit-transform: scale(1.01);
    }
    100%
    {
        -webkit-transform: scale(1);
    }
}