.chartPieArea figure {
  /* background-color: #eee; */
  display: block;
  height: 90vw;
  margin: 0 auto;
  position: relative;
  font-size:16px;
  font-size:1vw;
  width: 90%;
  max-width: 400px;
  max-height:400px;
  /*padding-bottom: 340px;*/
}
.chartPieArea figcaption {
  font-size:1rem;
  text-align:center;
  color:#fff;
  width: 100%;
  position: absolute;
  /* left: 0; */
  /* top:40%; */
  z-index:2;
}
.chartPieArea svg {
  display: block;
  /*height: 100%;*/
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}
.chartPieArea circle {
  fill:rgba(0,0,0,0);
  stroke-width:31.8309886184;
  stroke-dasharray: 0,0,0,100;
  stroke-dashoffset: 25;
  -webkit-animation: pie1 3s 1.0 ease both;
  animation: pie1 3s 1.0 ease both;
}
.chartPieArea .pie1 {
  stroke:hsl(340, 95%, 48%, 0.68);
}
.chartPieArea .pie2 {
  stroke:hsl(334, 64%, 58%, 0.5);
  -webkit-animation-name: pie2;
  animation-name: pie2;
}
.chartPieArea .pie3 {
  stroke:hsl(0, 0%, 73%, 0.5);
  -webkit-animation-name: pie3;
  animation-name: pie3;
}
/*.pie4 {
  stroke:hsl(180,0%,70%);
  -webkit-animation-name: pie4;
  animation-name: pie4;
}*/
/*
 pie percentage made by stroke-dasharray.
 stroke-dasharray format is...

 keyframe 100% : 0 offset this-percentage rest

 I added keyframe 50% for infinite presentation.
*/

/* 1st pie is 40% */
@-webkit-keyframes pie1 {
  50%,100% {stroke-dasharray: 68, 32, 0, 0;}/*1番目自分、2番目100からひいた数字、3と4は0*/
}
@keyframes pie1 {
  50%,100% {stroke-dasharray: 68, 32, 0, 0;}
}
/* 2nd pie is 30% */
@-webkit-keyframes pie2 {
  50%,100% {stroke-dasharray: 0, 68, 20, 12;}/*1番目0　2番目に1番目のパイ　3番目に自分　4番目のこり*/
}
@keyframes pie2 {
  50%,100% {stroke-dasharray: 0, 68, 20, 12;}
}
/* 3rd pie is 30% */
@-webkit-keyframes pie3 {
  50%,100% {stroke-dasharray: 0, 88, 12, 0;}/*1番目0　2番目に1番+2番のパイ　3番目に自分　4番目0*/
}
@keyframes pie3 {
  50%,100% {stroke-dasharray: 0, 88, 12, 0;}
}
/* 4th pie is 10% 
@-webkit-keyframes pie4 {
  50%,100% {stroke-dasharray: 0,95,5,0;}
}
@keyframes pie4 {
  50%,100% {stroke-dasharray: 0,95,5,0;}
}*/





@keyframes scroll_animation{
  0%{
  }
  100%{
    opacity: 100 ;
  }
}
.chartPieArea .trigger_scroll_sample_button,
.chartPieArea .no_scroll_sample_button{
  opacity:0;
  color: #ffffff;
  font-weight: bold;
  position: relative;
  width: 100%;
  height: 100%;
}
.chartPieArea .start_animation_scroll,
.chartPieArea .no_scroll_sample_button{
  animation-name: scroll_animation;
  animation-duration: 6s;
  animation-fill-mode: both;
  animation-iteration-count: 1.0;
}


.chartPieArea .pie_chart_text_1{
  position: absolute;
  right: 16px;
  top: 170px;
  text-align: left;
}
.chartPieArea .pie_chart_number_1{
  position: absolute;
  left: 137px;
  top: 225px;
}
.chartPieArea .pie_chart_text_2{
  position: absolute;
  left: 12px;
  top: 110px;
}
.chartPieArea .pie_chart_number_2{
  position: absolute;
  left: 12px;
  top: 132px;
}