/*人玉 動き*/
.updown1 {
    animation-name: updown1;
    /* アニメーション名の指定 */
    animation-delay: 0s;
    /* アニメーションの開始時間指定 */
    animation-duration: 4s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite;
}

@keyframes updown1 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-50px);
    }

    100% {
        transform: translateY(0);
    }
}

.updown2 {
    animation-name: updown2;
    /* アニメーション名の指定 */
    animation-delay: 0s;
    /* アニメーションの開始時間指定 */
    animation-duration: 4s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite;
}

@keyframes updown2 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(0);
    }
}

/*お化け 動き*/
.updown3 {
    animation-name: updown3;
    /* アニメーション名の指定 */
    animation-delay: 0s;
    /* アニメーションの開始時間指定 */
    animation-duration: 4s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite;
}

@keyframes updown3 {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(50px);
    }

    100% {
        transform: translateX(0);
    }
}

.updown4 {
    animation-name: updown4;
    /* アニメーション名の指定 */
    animation-delay: 0s;
    /* アニメーションの開始時間指定 */
    animation-duration: 4s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite;
}

@keyframes updown4 {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(0);
    }
}

/*ばけほ 動き*/
.updown5 {
    animation-name: updown5;
    /* アニメーション名の指定 */
    animation-delay: 0s;
    /* アニメーションの開始時間指定 */
    animation-duration: 4s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite;
}

@keyframes updown5 {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(60px);
    }

    100% {
        transform: translateX(0);
    }
}

/*時々震える*/
.furu {
    animation: furu 2.2s infinite;
}

@keyframes furu {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }

    2% {
        transform: translate(2px, 2px) rotateZ(2deg)
    }

    4% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }

    6% {
        transform: translate(2px, 0px) rotateZ(-2deg)
    }

    8% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }

    10% {
        transform: translate(2px, 2px) rotateZ(2deg)
    }

    12% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }

    14% {
        transform: translate(2px, 0px) rotateZ(-2deg)
    }

    16% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }

    18% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }

    100% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
}




/*ぽよよーん*/
.poyooon {
    text-align: center;
}

.poyooon.active {
    animation: poyooonIn .8s ease-in forwards;
}

@keyframes poyooonIn {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, .95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}