/*動畫*/
.flower{ opacity: 0; position: absolute; display:block; top:50%; left: 50%; margin: -5em; width:10em; height: 10em;}
.flower:nth-child(1){ animation: move01 1.5s linear; background: url(../images/flower1.png) no-repeat center center/contain; }
@keyframes move01 {
    0%,10%{
        transform: translate(0,0);
        opacity: 0;
    }
    20%{
         opacity: 1;
    }
    50%{
        transform: translate(0,-350px);
        opacity: 1;
    }
    100%{
        transform: translate(0,-500px);
        opacity: 0;
    }
}
.flower:nth-child(2){ animation: move02 1.5s linear; background: url(../images/flower2.png) no-repeat center center/contain; }
@keyframes move02 {
    0%,10%{
        transform:rotate(45deg) translate(0,0);
        opacity: 0;
    }
    20%{
         opacity: 1;
    }
    50%{
        transform:rotate(45deg) translate(0,-350px);
        opacity: 1;
    }
    100%{
        transform:rotate(45deg) translate(0,-500px);
        opacity: 0;
    }
}
.flower:nth-child(3){ animation: move03 1.5s linear; background: url(../images/flower3.png) no-repeat center center/contain;}
@keyframes move03 {
    0%,10%{
        transform:rotate(90deg) translate(0,0);
        opacity: 0;
    }
    20%{
         opacity: 1;
    }
    50%{
        transform:rotate(90deg) translate(0,-350px);
        opacity: 1;
    }
    100%{
        transform:rotate(90deg) translate(0,-500px);
        opacity: 0;
    }
}
.flower:nth-child(4){ animation: move04 1.5s linear; background: url(../images/flower4.png) no-repeat center center/contain; }
@keyframes move04 {
    0%,10%{
        transform:rotate(135deg) translate(0,0);
        opacity: 0;
    }
    20%{
         opacity: 1;
    }
    50%{
        transform:rotate(135deg) translate(0,-350px);
        opacity: 1;
    }
    100%{
        transform:rotate(135deg) translate(0,-500px);
        opacity: 0;
    }
}
.flower:nth-child(5){ animation: move05 1.5s linear; background: url(../images/flower5.png) no-repeat center center/contain; }
@keyframes move05 {
    0%,10%{
        transform:rotate(180deg) translate(0,0);
        opacity: 0;
    }
    20%{
         opacity: 1;
    }
    50%{
        transform:rotate(180deg) translate(0,-350px);
        opacity: 1;
    }
    20%{
         opacity: 1;
    }
    100%{
        transform:rotate(180deg) translate(0,-500px);
        opacity: 0;
    }
}
.flower:nth-child(6){ animation: move06 1.5s linear; background: url(../images/flower6.png) no-repeat center center/contain;}
@keyframes move06 {
    0%,10%{
        transform:rotate(225deg) translate(0,0);
        opacity: 0;
    }
    20%{
         opacity: 1;
    }
    50%{
        transform:rotate(225deg) translate(0,-350px);
        opacity: 1;
    }
    100%{
        transform:rotate(225deg) translate(0,-500px);
        opacity: 0;
    }
}
.flower:nth-child(7){ animation: move07 1.5s linear; background: url(../images/flower7.png) no-repeat center center/contain;}
@keyframes move07 {
    0%,10%{
        transform:rotate(270deg) translate(0,0);
        opacity: 0;
    }
    20%{
         opacity: 1;
    }
    50%{
        transform:rotate(270deg) translate(0,-350px);
        opacity: 1;
    }
    100%{
        transform:rotate(270deg) translate(0,-500px);
        opacity: 0;
    }
}
.flower:nth-child(8){ animation: move08 1.5s linear; background: url(../images/flower8.png) no-repeat center center/contain;}
@keyframes move08 {
    0%,10%{
        transform:rotate(315deg) translate(0,0);
        opacity: 0;
    }
    20%{
         opacity: 1;
    }
    50%{
        transform:rotate(315deg) translate(0,-350px);
        opacity: 1;
    }
    100%{
        transform:rotate(315deg) translate(0,-500px);
        opacity: 0;
    }
}

@media screen and (max-width:780px) {
    .flower{ width:5em; height: 5em;}

}