@charset "utf-8";
/*------------------------------------
ドロワーメニュー
------------------------------------*/

/*------------------------------------
 トップページslide
------------------------------------*/
.top-page .swiper {
  width: 100%; /* スライドの最大幅 */
  overflow: visible;
}
.top-page .swiper-wrapper {
  height: auto;
}
.top-page .swiper-slide img {
  width: 100%;
  height: auto;
}
.top-page .swiper-container {
    position: relative;
}
.top-page .swiper-pagination {
    bottom: -44px !important;
}
.top-page  .swiper-pagination-bullet {
    width: 18px;
    height:  18px;
}
.top-page .swiper-pagination-bullet {
  /*ドットの間隔を変更*/
  margin: 0 12px !important;
}
.top-page .swiper-pagination-bullet {
  /*透過度を変更*/
    opacity: 0.7;
    background-color: #323232 
}

.top-page .swiper-pagination-bullet-active {
  /*アクティブなドットの透過度を1にする*/
    opacity: 1;
    background-color: #323232 
}


/*------------------------------------
  pie chart
------------------------------------*/


.sp-chart{display: block;}
.pc-chart{display: none;}
.pie-chart {
  position: relative;
}

.pie-chart .percent {
  position: relative;
  width: 260px;
  height: 260px;
  margin: auto;
}

.pie-chart .percent svg {
  position: relative;
  width: 260px;
  height: 260px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.pie-chart .percent svg circle {
  position: relative;
  fill: none;/*塗りつぶし*/
  stroke-width: 42;/*	線の太さ*/
  stroke: #e7f9ca;/*	線の色*/
  stroke-dasharray: 553;/*線の間隔*/
  stroke-dashoffset: 0; /*線が始まる位置*/
}
.pie-chart .percent .number {
  position: absolute;
  top: -3%;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #111;
}
.pie-chart .percent .number .label {
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
  color:#9ee62a;
  text-align: center;
  font-weight:bold;
}
.pie-chart .percent .number span {
  display: block;
}
.pie-chart .percent .number span:last-child  {
   font-size: 44px;
   color: #323232;
}

.pie-chart.is-active .percent .line {
  -webkit-animation: circleAnim 1s forwards;
          animation: circleAnim 1s forwards;
}
.pie-chart .percent .line {
  stroke-dashoffset: 73;
  stroke: #9ee62a;
}
.pie-chart.pie01 .percent .line {
  stroke-dashoffset: 72;
}
.pie-chart.pie08 .percent .line,
.pie-chart.pie07 .percent .line,
.pie-chart.pie02 .percent .line {
  stroke-dashoffset: 0;
}
.pie-chart.pie06 .percent .line,
.pie-chart.pie03 .percent .line {
  stroke-dashoffset: 94;
}
.pie-chart.pie04 .percent .line {
  stroke-dashoffset: 122;
}
.pie-chart.pie05 .percent .line {
  stroke-dashoffset: 50;
}

@-webkit-keyframes circleAnim {
  0% {
    stroke-dasharray: 0 553;
  }
  99.9%, to {
    stroke-dasharray: 553 553;
  }
}

@keyframes circleAnim {
  0% {
    stroke-dasharray: 0 553;
  }
  99.9%, to {
    stroke-dasharray: 553 553;
  }
}

@media screen and (min-width: 1280px) {
  .sp-chart{display: none;}
  .pc-chart{display: block;}

  .pie-chart .percent {
    width: 520px;
    height: 520px;
  }

  .pie-chart .percent svg {
    width: 520px;
    height: 520px;
      -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  }

  .pie-chart .percent svg.pc-chart circle {
    stroke-width:85;
    stroke-dasharray: 1100;
    stroke-dashoffset: 0;
  }
  .pie-chart .percent .number .label {
    font-size: 24px;
  }
  .pie-chart .percent .number span:last-child  {
    font-size: 44px;
  }
  
  .pie-chart .percent .line {
    stroke-dashoffset: 144;
    stroke: #9ee62a;
  }

  .pie-chart.pie01 .percent .line {
    stroke-dashoffset: 144;
  }
  .pie-chart.pie08 .percent .line,
  .pie-chart.pie07 .percent .line,
  .pie-chart.pie02 .percent .line {
    stroke-dashoffset: 0;
  }
  .pie-chart.pie06 .percent .line,
  .pie-chart.pie03 .percent .line {
    stroke-dashoffset: 189;
  }
  .pie-chart.pie04 .percent .line {
    stroke-dashoffset: 244;
  }
  .pie-chart.pie05 .percent .line {
    stroke-dashoffset: 100;
  }
  @-webkit-keyframes circleAnim {
  0% {
    stroke-dasharray: 0 1100;
  }
  99.9%, to {
    stroke-dasharray: 1100 1100;
  }
}

@keyframes circleAnim {
  0% {
    stroke-dasharray: 0 1100;
  }
  99.9%, to {
    stroke-dasharray: 1100 1100;
  }
}