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

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


                      sakura


-----------------------------------------------------------------*/
section .inner div.flakes {
    opacity: 0;
    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-animation-name:Drop;
        animation-name: Drop;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
#sakura .inner div.flakes {
    position: absolute;
    display: block;
}
 
#sakura .inner div.flake2,
#sakura .inner div.flake6,
#sakura .inner div.flake10,
#sakura .inner div.flake13,
#sakura .inner div.flake14 {
    background-size: 15px 17px !important;
}




#sakura .inner div.flake1{
    width: 300px;
    height:245px;
    background: url("../img/top/feather_3.png") no-repeat;

}

#sakura .inner div.flake15 {
    width: 138px;
    height:161px;
    background: url("../img/top/feather_5.png") no-repeat;

}


#sakura .inner div.flake2,
#sakura .inner div.flake4,
#sakura .inner div.flake6{
    width: 59px;
    height:116px;
    background: url("../img/top/feather_2.png") no-repeat;

}

#sakura .inner div.flake5
#sakura .inner div.flake8,
#sakura .inner div.flake10 {
    width: 80px;
    height:111px;
    background: url("../img/top/feather_1.png") no-repeat;

}

#sakura .inner div.flake14,
#sakura .inner div.flake16 {
    width: 122px;
    height:116px;
    background: url("../img/top/feather_4.png") no-repeat;

}

#sakura .inner div.flake12,
#sakura .inner div.flake13 {
    width: 164px;
    height:134px;
    background: url("../img/top/feather_2.png") no-repeat;

}









.flake1 {
    left: 20px;
    -webkit-animation-duration: 21.5s;
    animation-duration: 22.5s;
}
 
.flake2 {
    left: 40px;
    -webkit-animation-duration: 32.7s;
    animation-duration: 32.7s;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
.flake4 {
    left: 80px;
    -webkit-animation-duration: 26.4s;
    animation-duration: 26.4s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
 
.flake5 {
    left: 100px;
    -webkit-animation-duration: 13.4s;
    animation-duration: 13.4s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
 
.flake6 {
    left: 150px;
    -webkit-animation-duration: 16.2s;
    animation-duration: 16.2s;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
 
.flake8 {
    left: 200px;
    -webkit-animation-duration: 34s;
    animation-duration: 34s;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.flake9 {
    right: 21px;
    -webkit-animation-duration: 12.5s;
    animation-duration: 13.5s;
}
 
.flake10 {
    right: 40px;
    -webkit-animation-duration: 23.7s;
    animation-duration: 23.7s;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
 

 
.flake12 {
    right: 80px;
    -webkit-animation-duration: 26.4s;
    animation-duration: 26.4s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
 
.flake13 {
    right: 100px;
    -webkit-animation-duration: 13.4s;
    animation-duration: 13.4s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
 
.flake14 {
    right: 150px;
    -webkit-animation-duration: 16.2s;
    animation-duration: 16.2s;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
 
.flake15 {
    right: 20px;
    -webkit-animation-duration: 13.7s;
    animation-duration: 13.7s;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
 
.flake16 {
    right: 200px;
    -webkit-animation-duration: 34s;
    animation-duration: 34s;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}




@-webkit-keyframes Drop {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 0.3;
    }
 
    50% {
        -webkit-transform: translateY(1200px);
        transform: translateY(1200px);
        opacity: 1;
    }
 
    100% {
        -webkit-transform: translateY(2200px);
        transform: translateY(2200px);
        opacity: 0.3;
    }
}
 
@keyframes Drop {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 0.3;
    }
 
    50% {
        -webkit-transform: translateY(1200px);
        transform: translateY(1200px);
        opacity: 1;
    }
 
    100% {
        -webkit-transform: translateY(2200px);
        transform: translateY(2200px);
        opacity: 0.3;
    }
}