@charset "utf-8";

.lp_wrap .breakthrough .circle {
  position: absolute;
  top: 19%;
  left: 3.533%;
  width: 92.933%;
  animation: 20s breakthrough_circle linear infinite;
}
@keyframes breakthrough_circle {
  to {
    transform: rotateZ(-359deg);
  }
}
.lp_wrap .breakthrough .on {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
}
.lp_wrap .breakthrough .head {
  position: absolute;
  top: 40%;
  left: 30.467%;
  width: 39.067%;
}
.lp_wrap .breakthrough .head img {
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.58, 1);
  transform: scale(0);
  opacity: 0;
}
.lp_wrap .breakthrough .head.move img {
  transform: scale(1);
  opacity: 1;
}
.lp_wrap .breakthrough :is(.graph1, .graph2) {
  position: absolute;
  top: 61%;
  width: 40%;
  aspect-ratio: 1 / 1;
}
.lp_wrap .breakthrough .graph1 {
  left: 7%;
}
.lp_wrap .breakthrough .graph2 {
  right: 7%;
}
.lp_wrap .breakthrough :is(.graph1, .graph2) svg {
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.lp_wrap .breakthrough :is(.graph1, .graph2) svg circle {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 30;
  stroke-dasharray: 850 850;
  stroke-dashoffset: 850;
  transition: 0.8s 0.2s;
}
.lp_wrap .breakthrough .head.move ~ .graph1 svg circle {
  stroke-dashoffset: 0;
}
.lp_wrap .breakthrough .head.move ~ .graph2 svg circle {
  stroke-dashoffset: 40;
}
.lp_wrap .breakthrough .deco {
  position: absolute;
  top: 21%;
  left: 0%;
  width: 100%;
}