.disabled{
    background-color: #ccc !important;
    cursor: initial !important;
    pointer-events: none !important;
}
.perfect {
    display: block;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100vw;
    height: 120vh;
    overflow: hidden;
    pointer-events: none;
}

.perfect__inner {
    position: relative;
    width: inherit;
    height: inherit;
}

.Pout {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}
.Pin {
    animation: fadeIn 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

/* 紙吹雪を飛ばす */
canvas {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    transition: all 1s ease-out;
}

/* 風船を飛ばす */

.balloons {
    position: absolute;
    z-index: 1;
    width: 100vw;
    max-width: 100vw;
    max-height: 150vh;
    top: 100%;
}


.balloons div {
    position: absolute;
    left: 0;
    bottom: 70px;
    width: 80px;
    height: 100px;
    background: #ffa07a;
    border-radius: 50%;
    box-shadow: -6px -6px 0 rgba(0, 0, 0, 0.15) inset;
}

.balloons div:before {
    content: '';
    position: absolute;
    left: 38px;
    bottom: -70px;
    width: 2px;
    height: 70px;
    background: #a0a0a0;
    transform: rotate(5deg);
}

.balloons div:nth-of-type(1) {
    left: -5%;
    background: #9400d3;
    animation-fill-mode: fo;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 13s ease-in-out forwards;
}

.balloons div:nth-of-type(2) {
    left: 12%;
    background: #ffc0cb;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 7s ease-in-out forwards;
}

.balloons div:nth-of-type(3) {
    left: 18%;
    background: #ffa07a;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 10s ease-in-out forwards;
}

.balloons div:nth-of-type(4) {
    left: 22%;
    background: #f0f8ff;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 9s ease-in-out forwards;
}

.balloons div:nth-of-type(5) {
    left: 36%;
    background: #ffa07a;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 7s ease-in-out forwards;
}

.balloons div:nth-of-type(6) {
    left: 50%;
    background: #00fa9a;
    animation: wobbling_x 0.9s ease-in-out infinite alternate,
        wobbling_y 1.2s ease-in-out infinite alternate,
        fly_high 12s ease-in-out forwards;
}

.balloons div:nth-of-type(7) {
    left: 62%;
    background: #ffc0cb;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 6s ease-in-out forwards;
}

.balloons div:nth-of-type(8) {
    left: 68%;
    background: #9400d3;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 7s ease-in-out forwards;
}

.balloons div:nth-of-type(9) {
    left: 78%;
    background: #ffa07a;
    animation: wobbling_x 0.9s ease-in-out infinite alternate,
        wobbling_y 1.2s ease-in-out infinite alternate,
        fly_high 9s ease-in-out forwards;
}

.balloons div:nth-of-type(10) {
    left: 90%;
    background: #ff0000;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 11s ease-in-out forwards;
}

.balloons div:nth-of-type(11) {
    left: 0%;
    background: #f0f8ff;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 9s ease-in-out forwards 4s;
}

.balloons div:nth-of-type(12) {
    left: 3%;
    background: #ffa07a;
    animation: wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate,
        fly_high 7s ease-in-out 2s forwards;
}

.sp-part {
    display: none;
}

@keyframes wobbling_x {
    0% {
        margin-left: 8px;
    }

    100% {
        margin-left: 0px;
    }
}

@keyframes wobbling_y {
    0% {
        margin-bottom: 0px;
    }

    100% {
        margin-bottom: 8px;
    }
}

@keyframes fly_high {
    100% {
        transform: translateY(-1000px);
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    @keyframes fly_high {
        100% {
            transform: translateY(-1500px);
            display: none;
        }
    }
}