/* -----------------------
  cs
----------------------- */
.cs {
  background: url(../img/cs_bg.png) no-repeat center top / cover;
}

.cs .graph-area .graph-circle {
  grid-area: 1 / 1 / 4;
  position: relative;
}

.cs .graph-area .balloon-box-01 {
  grid-area: 1 / 1 / 2;
}
.cs .graph-area .balloon-box-02 {
  grid-area: 3 / 1 / 4;
}
.cs .balloon-box .balloon {
  grid-area: 1 / 1;
}

.cs .balloon-box .balloon-01,
.cs .balloon-box .balloon-03 {
  transition-delay: 0s;
}

.cs .graph-area .graph-circle .percentage .graph-circle_wrapper {
  position: absolute;
  top: 0;
  left: min(10.52vw, 101px);
  width: min(78.85vw, 757px);
  height: min(78.85vw, 757px);
}

.cs .graph-area .graph-circle .percentage .graph-circle_wrapper .graph-circle_circle {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.cs .graph-area .graph-circle .percentage .graph-circle_wrapper .graph-circle_circle .circle {
  display: inline-block;
  transform: rotate(-90deg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cs .graph-area .graph-circle .percentage .graph-circle_wrapper .graph-circle_circle .circle .type {
  fill: transparent;
  stroke-width: 55;
}

.cs .graph-area .graph-circle .percentage .graph-circle_wrapper .graph-circle_circle .circle .type1 {
  stroke: #EA2F6D;
}



.cs .graph-area .graph-circle .percentage .graph-circle_circle .type.typeA1 {
  animation: circleB 1s forwards;
}

.cs .graph-area .graph-circle.move .percentage .graph-circle_circle .type.typeA1 {
  animation: circleA1 1s forwards;
}

@keyframes circleA1 {
  0% {
    stroke-dasharray: 0 2378;
    opacity: 1;
  }

  99.9%,
  to {
    stroke-dasharray: 2200 2378;
    opacity: 1;
  }
}

@keyframes circleB {
  0% {
    stroke-dasharray: 2200 2378;
    opacity: 1;
  }

  99.9%,
  to {
    stroke-dasharray: 0 2378;
    opacity: 1;
  }
}