@charset "utf-8";




/* blob
-------------------------------------------------------------- */
.blob_1,
.blob_2,
.blob_3 {
    position: relative;
}
.blob_1::before {
    display: block;
    position: absolute;
    top: -90px;
    left: -120px;
    z-index: 10;
    content: '';
    background-image: url(../img/blob.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
}
.blob_1::after {
    display: block;
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
    right: -100px;
    z-index: 10;
    content: '';
    background-image: url(../img/blob-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}

.blob_2::before {
    display: block;
    position: absolute;
    top: 6%;
    transform: translateY(-6%);
    left: -120px;
    z-index: 10;
    content: '';
    background-image: url(../img/blob.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 240px;
    height: 240px;
}
.blob_2::after {
    display: block;
    position: absolute;
    top: 100%;
    transform: translateY(-100%);
    right: -100px;
    z-index: 10;
    content: '';
    background-image: url(../img/blob-4.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}

.blob_3::before {
    display: block;
    position: absolute;
    top: 33%;
    transform: translateY(-33%);
    left: -120px;
    z-index: 10;
    content: '';
    background-image: url(../img/blob.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 180px;
    height: 180px;
}
.blob_3::after {
    display: block;
    position: absolute;
    top: 66%;
    transform: translateY(-66%);
    right: -300px;
    z-index: 10;
    content: "";
    background-image: url(../img/blob-3.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 600px;
    height: 600px;
}

@media only screen and (min-width:768px){
    .blob_1::before {
        top: -140px;
        left: -220px;
        width: 500px;
        height: 500px;
    }
    .blob_1::after {
        top: 140%;
        transform: translateY(-140%);
    }

    .blob_2::before {
        top: 110%;
        transform: translateY(-110%);
        left: -160px;
    }
    .blob_2::after {
        top: 140%;
        transform: translateY(-140%);
        right: -30px;
        width: 100px;
        height: 100px;
    }
}


@media only screen and (min-width:1200px){
    .blob_1::before {
    }
    .blob_2::before {
        top: 142%;
    }
    .blob_2::after {
        top: 420%;
        transform: translateY(-140%);
        right: -598px;
        width: 700px;
        height: 700px;
    }
    .blob_3::before {
        top: 66%;
        transform: translateY(-66%);
        left: -220px;
        background-image: url(../img/blob.png);
        width: 220px;
        height: 220px;
    }
    .blob_3::after {
        display: none;
    }
}