@charset "UTF-8";

/* ----- 丸いののアニメーション ----- */

.animation {
    position: absolute;
    z-index: 0;
}

@keyframes floating-y1 {
    0% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(5%);
    }
}

@keyframes floating-y2 {
    0% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(20%);
    }
}

@keyframes floating-x1 {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}

@keyframes floating-x2 {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(50%);
    }
}

/* ----- 位置調整 ----------------------------------------------- */

/* ----- index.html ----- */
.circle1,.circle2,.circle3,.circle4,.circle5,.circle6,.circle7,.circle8,
.circle1-other,.circle2-other,.circle3-other,.circle4-other,.circle5-other,
.circle6-other,.circle7-other,.circle8-other,.circle9-other{
    pointer-events: none;
}

.circle1{
    top: -95px;
    right: 20vw;
    z-index: 850;
}

.circle2{
    bottom: -10rem;
    right: 22vw;
}

.circle3{
    left: 5rem;
    top: 10vh;
}

.circle4{
    right: 20px;
    bottom: 2rem;
}

.circle5{
    left: 87vw;
    top: 100px;
}

.circle6{
    right: 92vw;
    bottom: 0;
    z-index: 100;
}

.circle7{
    left: 90%;
    bottom: -200px;
}

.circle8{
    right: 90vw;
    bottom: 20px;
}

.pace01 {
    animation: floating-y1 1.8s ease-in-out infinite alternate-reverse;
}

.pace02 {
    animation: floating-y2 3.5s ease-in-out infinite alternate-reverse;
}

.pace03 {
    animation: floating-x1 2s ease-in-out infinite alternate-reverse;
}

.pace04 {
    animation: floating-x2 2.4s ease-in-out infinite alternate-reverse;
}


/* ----- index.html　ここまで ----- */

/* ----- 他ページ ----- */

.circle1-other{
    right: 0;
    top: 3rem;
}

.circle2-other{
    right: 90vw;
    top: 6rem;
}

.circle3-other{
    top: 100vh;
    right: 80px;
}

.circle4-other{
    top: 150vh;
    left: 50px;
}

.circle5-other{
    top: 43%;
    left: 90vw;
}

.circle6-other{
    top: 60%;
    right: 90vw;
}

.circle7-other{
    top: 70%;
    left: 90vw;
}

.circle8-other{
    bottom: 500px;
    left: -20px;
}

.circle9-other{
    bottom: -10px;
    left: 87vw;
}


/* ----- レスポンシブ ------------------------------------------------ */

/* ----- index.html ----- */

@media(max-width: 1200px){
    .circle1,
    .circle2{
        display: none;
    }
}

@media(max-width: 800px){
    .smoller-200{
        width: 200px;
    }

    .smoller-130{
        width: 130px;
    }

    .smoller-100{
        width: 100px;
    }

    .circle3{
        left: 9vw;
    }

    .circle4{
        right: 10px;
        bottom: -1rem;
    }

    .circle5{
        left: 78vw;
        top: 80px;
    }

    .circle6{
        right: 90vw;
        bottom: -7rem;
        z-index: 100;
    }

    .circle7{
        right: -55px;
        bottom: -145px;
    }

    .circle8{
        right: 90vw;
        bottom: -20px;
    }
}


/* ----- 他ページ ----- */

@media(max-width: 800px){
    .circle1-other{
        right: 0;
        top: 80px;
    }
    
    .circle2-other{
        left: -40px;
        top: 5rem;
    }

    .circle3-other{
        top: 800px;
        right: 15px;
    }

    .circle4-other{
        top: 1000px;
        left: -10px;
    }

    .circle5-other{
        top: 43%;
        right: -100px;
    }

    .circle6-other{
        top: 60%;
    }

    .circle7-other{
        bottom: 25%;
        right: -80px;
    }

    .circle8-other{
        bottom: 500px;
    }

    .circle9-other{
        right: -60px;
    }
}