.three_a .wrap {
  position: relative;
  padding: 50% 0 0;
  border: 1px solid var(--color-mu07);
  overflow: hidden;
  cursor: grab;
}
.three_a .canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page35 .svg {
  max-width: 100%;
}
.page35 .svg-wrap {
  font-size: 0;
}
.page35 .svg-wrap02 {
  font-size: 0;
  background: var(--color-mu11);
}
.page35 .svg-circle-wrap {
  max-width: 400px;
  margin: 0 auto;
}
.page35 .css-circle-area {
  background: var(--color-mu11);
  padding: 40px 0;
}
.page35 .css-circle-wrap {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
.page35 .css-circle {
  width: 74%;
  padding: 74% 0 0;
  margin: auto;
  border-radius: 55% 45% 74% 26%/66% 32% 68% 34%;
  background-image: radial-gradient(var(--color-mu06) 0%, var(--color-mu08) 100%);
  animation-name: corners, rotate;
  animation-duration: 20s, 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.page35 .css-circle02 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation-name: corners, rotate02;
}
.page35 .css-circle03 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation-name: corners, rotate03;
}
.page35 .use-circle01 {
  fill: var(--color-mu06);
  mix-blend-mode: multiply;
}
.page35 .css-circle-b {
  width: 74%;
  padding: 74% 0 0;
  margin: auto;
  border-radius: 55% 45% 74% 26%/66% 32% 68% 34%;
  background: var(--color-mu06);
  mix-blend-mode: multiply;
  animation-name: corners, rotate;
  animation-duration: 20s, 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.page35 .css-circle-b02 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation-name: corners, rotate02;
}
.page35 .css-circle-b03 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation-name: corners, rotate03;
}

@keyframes corners {
  0% {
    border-radius: 55% 45% 74% 26%/66% 32% 68% 34%;
  }
  25% {
    border-radius: 33% 67% 44% 56%/28% 56% 44% 72%;
  }
  50% {
    border-radius: 29% 71% 37% 63%/55% 40% 60% 45%;
  }
  75% {
    border-radius: 53% 47% 53% 47%/49% 63% 37% 51%;
  }
  100% {
    border-radius: 55% 45% 74% 26%/66% 32% 68% 34%;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate02 {
  0% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(-300deg);
  }
}
@keyframes rotate03 {
  0% {
    transform: rotate(-60deg);
  }
  100% {
    transform: rotate(300deg);
  }
}