@charset "UTF-8";
/*==================================
      レスポンシブ設定 マップ型変数breakpointsを定義
      =================================*/
body {
  position: relative;
  z-index: 2;
}

body .circle1 img {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  position: absolute;
  z-index: 0;
  top: -20px;
  left: 20%;
  width: 8%;
  -webkit-animation: fluffy-rotate 14s linear infinite;
          animation: fluffy-rotate 14s linear infinite;
}

@media screen and (max-width: 767px) {
  body .circle1 img {
    width: 15%;
  }
}

body .circle2 img {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  position: absolute;
  z-index: 0;
  top: 580px;
  left: 35%;
  width: 10%;
  -webkit-animation: fluffy-rotate 10s linear infinite;
          animation: fluffy-rotate 10s linear infinite;
}

@media screen and (max-width: 767px) {
  body .circle2 img {
    width: 20%;
    left: 15%;
    top: 420px;
  }
}

body .circle3 img {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  position: absolute;
  z-index: 0;
  top: 1780px;
  left: -2%;
  width: 10%;
  -webkit-animation: fluffy-rotate 10s linear infinite;
          animation: fluffy-rotate 10s linear infinite;
}

@media screen and (max-width: 767px) {
  body .circle3 img {
    width: 20%;
  }
}

body .circle4 img {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  position: absolute;
  z-index: 0;
  top: 3080px;
  left: 10%;
  width: 13%;
  -webkit-animation: fluffy-rotate 10s linear infinite;
          animation: fluffy-rotate 10s linear infinite;
}

@media screen and (max-width: 767px) {
  body .circle4 img {
    width: 20%;
  }
}

main {
  position: relative;
  z-index: 1;
}

@-webkit-keyframes fluffy-rotate {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 42% 39% 67% 53%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 41% 34% 50% 50%/35% 31% 39% 65%;
  }
}

@keyframes fluffy-rotate {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 42% 39% 67% 53%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 41% 34% 50% 50%/35% 31% 39% 65%;
  }
}

@-webkit-keyframes fluffy-rotate2 {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 54% 46% 38% 62%/49% 70% 40% 51%;
  }
  28% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  42% {
    border-radius: 40% 60% 54% 46%/49% 60% 70% 51%;
  }
  56% {
    border-radius: 50% 50% 34% 66%/56% 68% 88% 44%;
  }
  70% {
    border-radius: 61% 69% 67% 33%/70% 50% 50% 30%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 11% 65%;
  }
}

@keyframes fluffy-rotate2 {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 54% 46% 38% 62%/49% 70% 40% 51%;
  }
  28% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  42% {
    border-radius: 40% 60% 54% 46%/49% 60% 70% 51%;
  }
  56% {
    border-radius: 50% 50% 34% 66%/56% 68% 88% 44%;
  }
  70% {
    border-radius: 61% 69% 67% 33%/70% 50% 50% 30%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 11% 65%;
  }
}

.min1 {
  position: absolute;
  top: 150px;
  left: 50%;
  max-width: 30px;
  opacity: .4;
  -webkit-animation: wobbling_x 2.5s ease-in-out infinite alternate, wobbling_y 3.1s ease-in-out infinite alternate;
          animation: wobbling_x 2.5s ease-in-out infinite alternate, wobbling_y 3.1s ease-in-out infinite alternate;
}

@media screen and (max-width: 767px) {
  .min1 {
    max-width: 60px;
  }
}

.min1 img {
  border-radius: 50%;
}

.min2 {
  position: absolute;
  top: 1300px;
  left: 5%;
  max-width: 40px;
  opacity: .4;
  -webkit-animation: wobbling_x 2.5s ease-in-out infinite alternate, wobbling_y 3.1s ease-in-out infinite alternate;
          animation: wobbling_x 2.5s ease-in-out infinite alternate, wobbling_y 3.1s ease-in-out infinite alternate;
}

.min2 img {
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .min2 {
    max-width: 80px;
  }
}

.color1 {
  position: absolute;
  top: 400px;
  left: 0%;
  width: 30%;
  -webkit-animation: ripples_anim 2s linear infinite;
          animation: ripples_anim 2s linear infinite;
}

@media screen and (max-width: 767px) {
  .color1 {
    top: 200px;
    width: 60%;
  }
}

.color2 {
  position: absolute;
  top: 500px;
  left: 5%;
  width: 40%;
  -webkit-animation: ripples_anim 2.5s linear infinite;
          animation: ripples_anim 2.5s linear infinite;
}

@media screen and (max-width: 767px) {
  .color2 {
    top: 300px;
    width: 100%;
    left: 0;
  }
}

.color3 {
  position: absolute;
  top: 600px;
  left: -5%;
  width: 45%;
  -webkit-animation: ripples_anim 3s linear infinite;
          animation: ripples_anim 3s linear infinite;
}

@media screen and (max-width: 767px) {
  .color3 {
    width: 90%;
    top: 200px;
  }
}

.color1-pri {
  position: absolute;
  top: -200px;
  right: 0%;
  width: 80%;
  -webkit-animation: ripples_anim 2s linear infinite;
          animation: ripples_anim 2s linear infinite;
}

@media screen and (max-width: 767px) {
  .color1-pri {
    top: -10%;
    width: 60%;
  }
}

.color2-pri {
  position: absolute;
  top: 800px;
  right: 5%;
  width: 70%;
  -webkit-animation: ripples_anim 2.5s linear infinite;
          animation: ripples_anim 2.5s linear infinite;
}

@media screen and (max-width: 767px) {
  .color2-pri {
    top: 660px;
    width: 100%;
    right: 0;
  }
}

.color3-pri {
  position: absolute;
  top: 1200px;
  right: -5%;
  width: 75%;
  -webkit-animation: ripples_anim 3s linear infinite;
          animation: ripples_anim 3s linear infinite;
}

@media screen and (max-width: 767px) {
  .color3-pri {
    width: 90%;
    top: 400px;
  }
}

.color4 {
  position: absolute;
  top: 1600px;
  left: 65%;
  width: 60%;
  -webkit-animation: ripples_anim 2s linear infinite;
          animation: ripples_anim 2s linear infinite;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .color4 {
    width: 90%;
  }
}

.color5 {
  position: absolute;
  top: 1700px;
  left: 40%;
  width: 60%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: ripples_anim 2.5s linear infinite;
          animation: ripples_anim 2.5s linear infinite;
}

@media screen and (max-width: 767px) {
  .color5 {
    width: 90%;
  }
}

.color6 {
  position: absolute;
  top: 1600px;
  left: 50%;
  width: 65%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: ripples_anim 3s linear infinite;
          animation: ripples_anim 3s linear infinite;
}

@media screen and (max-width: 767px) {
  .color6 {
    width: 90%;
  }
}

.color7 {
  position: absolute;
  top: 2700px;
  right: 3%;
  width: 60%;
  -webkit-animation: ripples_anim 2s linear infinite;
          animation: ripples_anim 2s linear infinite;
}

@media screen and (max-width: 767px) {
  .color7 {
    width: 90%;
  }
}

.color8 {
  position: absolute;
  top: 2800px;
  right: -5%;
  width: 50%;
  -webkit-animation: ripples_anim 2.5s linear infinite;
          animation: ripples_anim 2.5s linear infinite;
}

@media screen and (max-width: 767px) {
  .color8 {
    width: 90%;
  }
}

.color9 {
  position: absolute;
  top: 2900px;
  right: 0%;
  width: 65%;
  -webkit-animation: ripples_anim 3s linear infinite;
          animation: ripples_anim 3s linear infinite;
}

@media screen and (max-width: 767px) {
  .color9 {
    width: 90%;
  }
}

.color10 {
  position: absolute;
  top: 5000px;
  left: 15%;
  width: 70%;
  -webkit-animation: ripples_anim 2s linear infinite;
          animation: ripples_anim 2s linear infinite;
}

@media screen and (max-width: 767px) {
  .color10 {
    width: 90%;
  }
}

.color11 {
  position: absolute;
  top: 5100px;
  left: 10%;
  width: 60%;
  -webkit-animation: ripples_anim 2.5s linear infinite;
          animation: ripples_anim 2.5s linear infinite;
}

@media screen and (max-width: 767px) {
  .color11 {
    width: 90%;
  }
}

.color12 {
  position: absolute;
  top: 4900px;
  left: 5%;
  width: 55%;
  -webkit-animation: ripples_anim 3s linear infinite;
          animation: ripples_anim 3s linear infinite;
}

@media screen and (max-width: 767px) {
  .color12 {
    width: 90%;
  }
}

@-webkit-keyframes ripples_anim {
  0% {
    opacity: 1;
  }
  80% {
    -webkit-transform: scale(1.5) scale(180deg);
            transform: scale(1.5) scale(180deg);
    opacity: .2;
  }
}

@keyframes ripples_anim {
  0% {
    opacity: 1;
  }
  80% {
    -webkit-transform: scale(1.5) scale(180deg);
            transform: scale(1.5) scale(180deg);
    opacity: .2;
  }
}

@-webkit-keyframes min1 {
  100% {
    -webkit-transform: translate3d(0, 0, 1px) rotate(360deg);
            transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

@keyframes min1 {
  100% {
    -webkit-transform: translate3d(0, 0, 1px) rotate(360deg);
            transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

@-webkit-keyframes wobbling_x {
  0% {
    margin-left: 80px;
  }
  100% {
    margin-left: 0px;
  }
}

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

@-webkit-keyframes wobbling_y {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: 120px;
  }
}

@keyframes wobbling_y {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: 120px;
  }
}