/*figureやめてchartjsにしたので使ってない
.chartPieArea figure {
  display: block;
  height: 90vw;
  margin: 0 auto;
  position: relative;
  font-size:16px;
  font-size:1vw;
  width: 90%;
  max-width: 400px;
  max-height:400px;
}
.chartPieArea figcaption {
  font-size:1rem;
  text-align:center;
  color:#fff;
  width: 100%;
  position: absolute;
  z-index:2;
}*/
/*svgやめてchartjsにしたので使ってない
.chartPieArea svg {
  display: block;
  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;
}*/
/*
 pie percentage made by stroke-dasharray.
 stroke-dasharray format is...

 keyframe 100% : 0 offset this-percentage rest

 I added keyframe 50% for infinite presentation.
*/

/*キーフレームやめてchartjsにしたので使ってない*/
/* 1st pie is 40% 
@-webkit-keyframes pie1 {
  50%,100% {stroke-dasharray: 68, 32, 0, 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;}
}
@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;}
}
@keyframes pie3 {
  50%,100% {stroke-dasharray: 0, 88, 12, 0;}
}*/





/*キーフレームやめてchartjsにしたので使ってない
@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: 10s;
  animation-fill-mode: both;
  animation-iteration-count: 1.0;
}*/


.pieCanvasArea01{
  position:relative; 
  height:90vw; 
  width:90vw; 
  margin-right:auto; 
  margin-left:auto;
}

.pieCanvasArea01 #pieCanvas{
  width:300px; 
  height: auto;
}
@media screen and (min-width: 900px) {
  .pieCanvasArea01{
    width:400px; 
    height: auto;
  }
  .pieCanvasArea01 #pieCanvas{
    width:400px; 
    height: auto;
  }
}
.pie_chart_text_1{
  position: absolute;
  font-weight: 900;
  right: 55px;
  top: 170px;
  text-align: left;
  z-index: 9990;
  font-size: 30px;
}
.pie_chart_number_1{
  position: absolute;
  font-weight: 900;
  right: 65px;
  top: 200px;
  z-index: 9991;
  font-size: 70px;
}
/*.pie_chart_text_2{
  position: absolute;
  font-weight: 900;
  left: 12px;
  top: 100px;
  z-index: 9992;
}
.pie_chart_number_2{
  position: absolute;
  font-weight: 900;
  left: 12px;
  top: 130px;
  z-index: 9993;
}*/