.flower {
    width:100%;
    height:10px;
    position:relative;
}
.flower span {
    background-image: url("../img/flower.png");
    background-size:contain;
    position:absolute;
    -webkit-transform:scale(0, 0);
}

.flower span:nth-child(1) {
    width:11em;
    height:11em;
    left:-5%;
    bottom:200%;
    -webkit-animation: translate1 1.5s 300ms ease normal forwards;
}
.flower span:nth-child(2) {
    width:11em;
    height:11em;
    right:-5%;
    bottom:200%;
    -webkit-animation: translate1 1.5s 300ms ease normal forwards;
}
.flower span:nth-child(3) {
    width:5.5em;
    height:5.5em;
    left:0%;
    bottom:0%;
    -webkit-animation: translate1 1.5s 500ms ease normal forwards;
}
.flower span:nth-child(4) {
    width:5.5em;
    height:5.5em;
    right:0%;
    bottom:0%;
    -webkit-animation: translate1 1.5s 500ms ease normal forwards;
}
.flower span:nth-child(5) {
    width:7.2em;
    height:7.2em;
    left:5%;
    bottom:-200%;
    -webkit-animation: translate1 1s 700ms ease normal forwards;
}
.flower span:nth-child(6) {
    width:7.2em;
    height:7.2em;
    right:5%;
    bottom:-200%;
    -webkit-animation: translate1 1s 700ms ease normal forwards;
}
.flower span:nth-child(7) {
    width:4.4em;
    height:4.4em;
    left:10%;
    bottom:-100%;
    -webkit-animation: translate1 1s 800ms ease normal forwards;
}
.flower span:nth-child(8) {
    width:4.4em;
    height:4.4em;
    right:10%;
    bottom:-100%;
    -webkit-animation: translate1 1s 800ms ease normal forwards;
    
}



@-webkit-keyframes translate1{/* キーフレームの設定*/
    0% {-webkit-transform: translate(0px, 0px) scale(0, 0); opacity:0.8;}
    100% {-webkit-transform: translate(0px, 0px)  scale(1, 1); opacity:1;} 
}

/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:960px) {
    
}

/* 480px〜599px：SP横
------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) {
}

/* 〜479px：スマートフォン縦
------------------------------ */
@media screen and (max-width:479px) {
    .flower span:nth-child(1) {
        width:6em;
        height:6em;
        bottom:100%;
        left:-10%;
    }
    .flower span:nth-child(2) {
        width:6em;
        height:6em;
        bottom:100%;
        right:-10%;
    }
    .flower span:nth-child(3) {
        width:3em;
        height:3em;
        left:0%;
    }
    .flower span:nth-child(4) {
        width:3em;
        height:3em;
        right:0%;
    }
    .flower span:nth-child(5) {
        width:4em;
        height:4em;
        left:10%;
        bottom:-100%;
    }
    .flower span:nth-child(6) {
        width:4em;
        height:4em;
        right:10%;
        bottom:-100%;
    }
    .flower span:nth-child(7) {
        width:2em;
        height:2em;
        left:20%;
        bottom:0%;
    }
    .flower span:nth-child(8) {
        width:2em;
        height:2em;
        right:20%;
        bottom:0%;
    }
    
}