@charset "utf-8";
/*version:20190707*/

/*--------------以下サークルのcss-------------*/
.chart-two {  width: 200px;  height: 200px;  margin: 0;  position: relative;}
@media screen and (min-width: 320px) and (max-width: 768px) {
.chart-two {  width: 120px;  height: 120px; }
}
.chart-two.animate svg .circle-foreground {
  -webkit-animation: offset 4s ease-in-out infinite;
          animation: offset 4s ease-in-out infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.chart-two.animate figcaption:after {
  -webkit-animation: chart-two-label 4s steps(50) infinite;
          animation: chart-two-label 4s steps(50) infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.chart-two svg {
  width: 100%;
  height: 100%;
}
.chart-two svg .circle-background, .chart-two svg .circle-foreground {  r: 92.5px;  cx: 50%;  cy: 50%;  fill: none;  stroke: #e2e2e2;  stroke-width: 15px;}
@media screen and (min-width: 320px) and (max-width: 768px) {
.chart-two svg .circle-background, .chart-two svg .circle-foreground {  r: 50px; stroke-width: 8px;}
}


/*円グラフを変更　１％＝5.8px
  stroke-dasharray:の最初
  stroke-dashoffset:の最初を変更する*/
.chart-two svg .circle-foreground {
  stroke: #f1799b;
  stroke-dasharray: 522px 580.9px;
  stroke-dashoffset: 522px;
  stroke-linecap: round;  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;  -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
@media screen and (min-width: 320px) and (max-width: 768px) {
.chart-two svg .circle-foreground {
/*円グラフを変更　１％＝3.17px*/
	  stroke-dasharray: 285.3px 380px;   stroke-dashoffset:285.3px;}
}

.chart-two figcaption {  display: inline-block;  width: 100%;  height: 2.3rem;  overflow: hidden;  text-align: center;  color: #f1799b;  position: absolute;  top: calc(50% - 1.25rem);  left: 0;  font-size: 0;}
.chart-two figcaption:after {
  display: inline-block;
  content: "0%\a 1%\a 2%\a 3%\a 4%\a 5%\a 6%\a 7%\a 8%\a 9%\a 10%\a 11%\a 12%\a 13%\a 14%\a 15%\a 16%\a 17%\a 18%\a 19%\a 20%\a 21%\a 22%\a 23%\a 24%\a 25%\a 26%\a 27%\a 28%\a 29%\a 30%\a 31%\a 32%\a 33%\a 34%\a 35%\a 36%\a 37%\a 38%\a 39%\a 40%\a 41%\a 42%\a 43%\a 44%\a 45%\a 46%\a 47%\a 48%\a 49%\a 50%\a 51%\a 52%\a 53%\a 54%\a 55%\a 56%\a 57%\a 58%\a 59%\a 60%\a 61%\a 62%\a 63%\a 64%\a 65%\a 66%\a 67%\a 68%\a 69%\a 70%\a 71%\a 72%\a 73%\a 74%\a 75%\a 76%\a 77%\a 78%\a 79%\a 80%\a 81%\a 82%\a 83%\a 84%\a 85%\a 86%\a 87%\a 88%\a 89%\a 90%\a 91%\a 92%\a 93%\a 94%\a 95%\a 96%\a 97%\a 98%\a 99%\a 100%\a";
  white-space: pre;  font-size: 2.3rem;  line-height: 2.3rem;}






/*％の数字を変更　１％＝2.3*/
@-webkit-keyframes chart-two-label {
	  70% {
    -webkit-transform: translateY(-207.0rem);
	-ms-transform: translateY(-207.0rem);
            transform: translateY(-207.0rem);
  }
  100% {
    -webkit-transform: translateY(-207.0rem);
	-ms-transform: translateY-(207.0rem);
            transform: translateY(-207.0rem);
			
  }
}
/*％の数字を変更　１％＝2.5　95％＝200.0*/
@keyframes chart-two-label {
	 70% {
    -webkit-transform: translateY(-207.0rem);
	-ms-transform: translateY(-207.0rem);
            transform: translateY(-207.0rem);
  }
  100% {
    -webkit-transform: translateY(-207.0rem);
	-ms-transform: translateY(-207.0rem);
            transform: translateY(-207.0rem);
  }
}





@-webkit-keyframes offset {
	  70% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}