html,body {
    overflow-x: hidden;
}

.hana {
    position: absolute;
    height: 50px;
    width: 60px;
/*    background:url(../img/top/f_01.png) ;
    background-repeat:no-repeat;
    background-position: :  top left;
    background-size:contain;*/
/*     border: 10px solid pink;
    border-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0; */
}

/* .hana::after {
    content: "";
    display: block;
    position: absolute;
    top: -7px;
    left: -7px;
    height: 0;
    width: 0;
    border: 10px solid pink;
    border-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
} */

.t1 {
    background-image:url(../img/top/f_01.png);
    background-repeat:no-repeat;
    background-position: :  top left;
    background-size:contain;
}

.t2 {
    background-image:url(../img/top/f_02.png);
    background-repeat:no-repeat;
    background-position: :  top left;
    background-size:contain;
}

.t3 {
    background-image:url(../img/top/f_03.png);
    background-repeat:no-repeat;
    background-position: :  top left;
    background-size:contain;
}

.t4 {
    background-image:url(../img/top/f_04.png);
    background-repeat:no-repeat;
    background-position: :  top left;
    background-size:contain;
}

.t5 {
    background-image:url(../img/top/f_05.png);
    background-repeat:no-repeat;
    background-position: :  top left;
    background-size:contain;
}

.t6 {
    background-image:url(../img/top/f_06.png);
    background-repeat:no-repeat;
    background-position: :  top left;
    background-size:contain;
}

.t1::after {
    border-color: #fff3f5;
}

.t2::after {
    border-color: #ffe2e7;
}

.t3::after {
    border-color: #ffd1d9;
}

.t4::after {
    border-color: #ffc0cb;
}

.t5::after {
    border-color: #ffafbd;
}

.t6::after {
    border-color: #ffafbd;
}

.y1 {
    -webkit-animation: v1 10s infinite ease-in-out;
    animation: v1 10s infinite ease-in-out;
}

.y2 {
    -webkit-animation: v2 10s infinite ease-in-out;
    animation: v2 10s infinite ease-in-out;
}

.y3 {
    -webkit-animation: v3 9s infinite ease-in-out;
    animation: v3 9s infinite ease-in-out;
}

.y4 {
    -webkit-animation: v4 9s infinite ease-in-out;
    animation: v4 9s infinite ease-in-out;
}

.y5 {
    -webkit-animation: v5 8s infinite ease-in-out;
    animation: v5 8s infinite ease-in-out;
}

.y6 {
    -webkit-animation: v6 8s infinite ease-in-out;
    animation: v6 8s infinite ease-in-out;
}

@-webkit-keyframes v1 {
    from {
        -webkit-transform: rotate(0deg) scale(1);
    }

    50% {
        -webkit-transform: rotate(270deg) scale(1);
    }

    to {
        -webkit-transform: rotate(1deg) scale(1);
    }
}

@-webkit-keyframes v2 {
    from {
        -webkit-transform: rotate(-90deg) scale(.9);
    }

    50% {
        -webkit-transform: rotate(-360deg) scale(.9);
    }

    to {
        -webkit-transform: rotate(-89deg) scale(.9);
    }
}

@-webkit-keyframes v3 {
    from {
        -webkit-transform: rotate(30deg) scale(.8);
    }

    50% {
        -webkit-transform: rotate(300deg) scale(.8);
    }

    to {
        -webkit-transform: rotate(29deg) scale(.8);
    }
}

@-webkit-keyframes v4 {
    from {
        -webkit-transform: rotate(-120deg) scale(.7);
    }

    50% {
        -webkit-transform: rotate(-390deg) scale(.7);
    }

    to {
        -webkit-transform: rotate(-119deg) scale(.7);
    }
}

@-webkit-keyframes v5 {
    from {
        -webkit-transform: rotate(60deg) scale(.6);
    }

    50% {
        -webkit-transform: rotate(330deg) scale(.6);
    }

    to {
        -webkit-transform: rotate(59deg) scale(.6);
    }
}

@-webkit-keyframes v6 {
    from {
        -webkit-transform: rotate(-150deg) scale(.5);
    }

    50% {
        -webkit-transform: rotate(-420deg) scale(.5);
    }

    to {
        -webkit-transform: rotate(-149deg) scale(.5);
    }
}

@keyframes v1 {
    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(270deg) scale(1);
    }

    to {
        transform: rotate(1deg) scale(1);
    }
}

@keyframes v2 {
    from {
        transform: rotate(-90deg) scale(.9);
    }

    50% {
        transform: rotate(-360deg) scale(.9);
    }

    to {
        transform: rotate(-89deg) scale(.9);
    }
}

@keyframes v3 {
    from {
        transform: rotate(30deg) scale(.8);
    }

    50% {
        transform: rotate(300deg) scale(.8);
    }

    to {
        transform: rotate(29deg) scale(.8);
    }
}

@keyframes v4 {
    from {
        transform: rotate(-120deg) scale(.7);
    }

    50% {
        transform: rotate(-390deg) scale(.7);
    }

    to {
        transform: rotate(-119deg) scale(.7);
    }
}

@keyframes v5 {
    from {
        transform: rotate(60deg) scale(.6);
    }

    50% {
        transform: rotate(330deg) scale(.6);
    }

    to {
        transform: rotate(59deg) scale(.6);
    }
}

@keyframes v6 {
    from {
        transform: rotate(-150deg) scale(.5);
    }

    50% {
        transform: rotate(-420deg) scale(.5);
    }

    to {
        transform: rotate(-149deg) scale(.5);
    }
}