@charset "UTF-8";

/* CSS Document */

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

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

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

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

    50% {
        transform: rotate(-45deg);
    }

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

@keyframes left_rotation_02 {
    0% {
        transform: rotate(45deg);
    }

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

    100% {
        transform: rotate(45deg);
    }
}

@keyframes right_rotation_02 {
    0% {
        transform: rotate(45deg);
    }

    50% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(45deg);
    }
}

@keyframes fuwafuwa {
    0% {
        transform: translate(0, 0);
    }

    35% {
        transform: translate(-50px, -20px);
    }

    65% {
        transform: translate(20px, 50px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes fuwafuwa_02 {
    0% {
        transform: translate(0, 0);
    }

    35% {
        transform: translate(-3.47vw, -1.38vw);
    }

    65% {
        transform: translate(1.38vw, 3.47vw);
    }

    100% {
        transform: translate(0, 0);
    }
}

.blue_box,
.blue_circle,
.blue_box_border,
.green_box,
.green_circle,
.green_box_border,
.yellow_box,
.yellow_circle,
.blue_arrow_border,
.green_arrow,
.yellow_arrow_border,
.yellow_arrow {
    z-index: -1;
    position: absolute;
    mix-blend-mode: multiply;
}

.blue_box,
.blue_circle {
    background: linear-gradient(#0070C3, #5DCBDA);
}

.blue_box_border {
    border: 6px solid;
    border-image: linear-gradient(#0070C3, #5DCBDA) 1;
}

@media screen and (max-width:767px) {
    .blue_box_border {
        border: 5px solid;
        border-image: linear-gradient(#0070C3, #5DCBDA) 1;
    }
}

.green_box,
.green_circle {
    background: linear-gradient(#21B527, #9CDD69);
}

.green_box_border {
    border: 6px solid;
    border-image: linear-gradient(#21B527, #9CDD69) 1;
}

.yellow_box,
.yellow_circle {
    background: linear-gradient(#FFD600, #FFA040);
}

.blue_circle,
.green_circle,
.yellow_circle {
    border-radius: 100%;
}

.blue_arrow_border {
    background-image: url(../img/blue_arrow_border.svg);
    background-size: cover;
}

.green_arrow {
    background-image: url(../img/green_arrow.svg);
    background-size: cover;
}

.yellow_arrow_border {
    background-image: url(../img/yellow_arrow_border.svg);
    background-size: cover;
}

.yellow_arrow {
    background-image: url(../img/yellow_arrow.svg);
    background-size: cover;
}

/* mv */
.koukoku_section .blue_circle {
    width: 376px;
    height: 376px;
    top: -16px;
    right: -18px;
    animation: 15s fuwafuwa infinite;
}

.koukoku_section .green_box_border {
    width: 32px;
    height: 32px;
    top: 158px;
    right: 334px;
    animation: 20s linear infinite left_rotation;
}

.koukoku_section .blue_box {
    width: 58px;
    height: 145px;
    top: 203px;
    left: 68px;
    animation: 20s linear infinite left_rotation;
}

.koukoku_section .yellow_circle {
    width: 418px;
    height: 418px;
    top: 251px;
    left: -112px;
    animation: 15s fuwafuwa infinite;
}

.koukoku_section .blue_arrow_border {
    width: 75px;
    height: 75px;
    top: 610px;
    left: 68px;
    animation: 20s linear infinite right_rotation;
}

.koukoku_section .yellow_box {
    width: 86px;
    height: 86px;
    bottom: 0;
    left: 824px;
    animation: 20s linear infinite left_rotation;
}

.koukoku_section .green_arrow {
    width: 124px;
    height: 124px;
    bottom: -24px;
    left: 892px;
    animation: 20s linear infinite right_rotation;
}

@media screen and (max-width:1440px) {
    .koukoku_section .blue_circle {
        width: 26.11vw;
        height: 26.11vw;
        top: -1.11px;
        right: -1.25px;
    }

    .koukoku_section .green_box_border {
        width: 2.22vw;
        height: 2.22vw;
        top: 10.97vw;
        right: 23.19vw;
    }

    .koukoku_section .blue_box {
        width: 4.02vw;
        height: 10.06vw;
        top: 14.09vw;
        left: 4.72vw;
    }

    .koukoku_section .yellow_circle {
        width: 29.02vw;
        height: 29.02vw;
        top: 17.43vw;
        left: -7.77vw;
    }

    .koukoku_section .blue_arrow_border {
        width: 5.2vw;
        height: 5.2vw;
        top: 42.36vw;
        left: 4.72vw;
    }

    .koukoku_section .yellow_box {
        width: 5.97vw;
        height: 5.97vw;
        bottom: 0;
        left: 57.22vw;
    }

    .koukoku_section .green_arrow {
        width: 8.61vw;
        height: 8.61vw;
        bottom: -1.66vw;
        left: 61.94vw;
    }
}

@media screen and (max-width:767px) {

    .koukoku_section .blue_circle {
        width: 120px;
        height: 120px;
    }

    .koukoku_section .green_box_border {
        width: 20px;
        height: 20px;
    }

    .koukoku_section .blue_box {
        width: 30px;
        height: 70px;
    }

    .koukoku_section .yellow_circle {
        width: 130px;
        height: 130px;
    }

    .koukoku_section .blue_arrow_border {
        width: 40px;
        height: 40px;
    }

    .koukoku_section .yellow_box {
        width: 30px;
        height: 30px;
    }

    .koukoku_section .green_arrow {
        width: 50px;
        height: 50px;
    }
}