/* シャボン玉1 */
.soap1 {
    position: absolute;
    left: calc(50% - 100px);
    /*お好みで*/
    top: calc(50% - 250px);
    /*お好みで*/
    width: 50px;
    /*お好みで*/
    height: 50px;
    /*お好みで*/
    border-radius: 50% 46% 48% 44%;
    overflow: hidden;
    background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253, 0.3) 70%, transparent 100%) 50% 50% no-repeat;
    animation: soap 10s 0s ease-in-out infinite;
    z-index: 1;
}

.soap1::before {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -10%;
    width: 60%;
    height: 60%;
    border-radius: 60% 0;
    background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
    transform-origin: 0 0;
    animation: soap_rotate 15s 0s ease-in-out infinite;
    filter: blur(15px);
}

.soap1::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -10%;
    width: 60%;
    height: 60%;
    border-radius: 20% 0;
    background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
    transform-origin: 100% 100%;
    animation: soap_rotate 6s 0s ease-in-out infinite;
    filter: blur(15px);
}

/* シャボン玉2 */
.soap2 {
    position: absolute;
    left: calc(50% - 150px);
    /*お好みで*/
    top: calc(50% - 380px);
    /*お好みで*/
    width: 80px;
    /*お好みで*/
    height: 80px;
    /*お好みで*/
    border-radius: 50% 46% 48% 44%;
    overflow: hidden;
    background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253, 0.3) 70%, transparent 100%) 50% 50% no-repeat;
    animation: soap 10s 0s ease-in-out infinite;
    z-index: 1;
}

.soap2::before {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -10%;
    width: 60%;
    height: 60%;
    border-radius: 60% 0;
    background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
    transform-origin: 0 0;
    animation: soap_rotate 15s 0s ease-in-out infinite;
    filter: blur(15px);
}

.soap2::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -10%;
    width: 60%;
    height: 60%;
    border-radius: 20% 0;
    background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
    transform-origin: 100% 100%;
    animation: soap_rotate 6s 0s ease-in-out infinite;
    filter: blur(15px);
}

/* シャボン玉3 */
.soap3 {
    position: absolute;
    left: calc(50% + 50px);
    /*お好みで*/
    top: calc(50%);
    /*お好みで*/
    width: 70px;
    /*お好みで*/
    height: 70px;
    /*お好みで*/
    border-radius: 50% 46% 48% 44%;
    overflow: hidden;
    background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253, 0.3) 70%, transparent 100%) 50% 50% no-repeat;
    animation: soap 10s 0s ease-in-out infinite;
    z-index: 1;
}

.soap3::before {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -10%;
    width: 60%;
    height: 60%;
    border-radius: 60% 0;
    background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
    transform-origin: 0 0;
    animation: soap_rotate 15s 0s ease-in-out infinite;
    filter: blur(15px);
}

.soap3::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -10%;
    width: 60%;
    height: 60%;
    border-radius: 20% 0;
    background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
    transform-origin: 100% 100%;
    animation: soap_rotate 6s 0s ease-in-out infinite;
    filter: blur(15px);
}

@media screen and (max-width: 415px) {
    .soap1 {
        position: absolute;
        left: calc(50% - 100px);
        /*お好みで*/
        top: calc(50% - 200px);
        /*お好みで*/
        width: 50px;
        /*お好みで*/
        height: 50px;
        /*お好みで*/
        border-radius: 50% 46% 48% 44%;
        overflow: hidden;
        background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253, 0.3) 70%, transparent 100%) 50% 50% no-repeat;
        animation: soap 10s 0s ease-in-out infinite;
        z-index: 1;
    }
    
    .soap1::before {
        content: "";
        position: absolute;
        right: -10%;
        bottom: -10%;
        width: 60%;
        height: 60%;
        border-radius: 60% 0;
        background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
        transform-origin: 0 0;
        animation: soap_rotate 15s 0s ease-in-out infinite;
        filter: blur(15px);
    }
    
    .soap1::after {
        content: "";
        position: absolute;
        left: -10%;
        top: -10%;
        width: 60%;
        height: 60%;
        border-radius: 20% 0;
        background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
        transform-origin: 100% 100%;
        animation: soap_rotate 6s 0s ease-in-out infinite;
        filter: blur(15px);
    }
    
    /* シャボン玉2 */
    .soap2 {
        position: absolute;
        left: calc(50% - 150px);
        /*お好みで*/
        top: calc(50% - 280px);
        /*お好みで*/
        width: 80px;
        /*お好みで*/
        height: 80px;
        /*お好みで*/
        border-radius: 50% 46% 48% 44%;
        overflow: hidden;
        background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253, 0.3) 70%, transparent 100%) 50% 50% no-repeat;
        animation: soap 10s 0s ease-in-out infinite;
        z-index: 1;
    }
    
    .soap2::before {
        content: "";
        position: absolute;
        right: -10%;
        bottom: -10%;
        width: 60%;
        height: 60%;
        border-radius: 60% 0;
        background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
        transform-origin: 0 0;
        animation: soap_rotate 15s 0s ease-in-out infinite;
        filter: blur(15px);
    }
    
    .soap2::after {
        content: "";
        position: absolute;
        left: -10%;
        top: -10%;
        width: 60%;
        height: 60%;
        border-radius: 20% 0;
        background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
        transform-origin: 100% 100%;
        animation: soap_rotate 6s 0s ease-in-out infinite;
        filter: blur(15px);
    }
    
    /* シャボン玉3 */
    .soap3 {
        position: absolute;
        left: calc(50% + 50px);
        /*お好みで*/
        top: calc(50%);
        /*お好みで*/
        width: 70px;
        /*お好みで*/
        height: 70px;
        /*お好みで*/
        border-radius: 50% 46% 48% 44%;
        overflow: hidden;
        background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253, 0.3) 70%, transparent 100%) 50% 50% no-repeat;
        animation: soap 10s 0s ease-in-out infinite;
        z-index: 1;
    }
    
    .soap3::before {
        content: "";
        position: absolute;
        right: -10%;
        bottom: -10%;
        width: 60%;
        height: 60%;
        border-radius: 60% 0;
        background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
        transform-origin: 0 0;
        animation: soap_rotate 15s 0s ease-in-out infinite;
        filter: blur(15px);
    }
    
    .soap3::after {
        content: "";
        position: absolute;
        left: -10%;
        top: -10%;
        width: 60%;
        height: 60%;
        border-radius: 20% 0;
        background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
        transform-origin: 100% 100%;
        animation: soap_rotate 6s 0s ease-in-out infinite;
        filter: blur(15px);
    }
}

@keyframes soap_rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(160deg);
    }
}

/*上下に移動 お好みで*/
@keyframes soap {
    0% {
        transform: translateY(0);
    }

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