@charset "UTF-8";
/* CSS Document */

.scroll-line {
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  position: fixed;
  top: 50vh;
}

.magic-section {
	margin: 0 auto !important;
	display: block;
	text-align: center;
}

#js-magic {
	text-align: center;
	height: 460px;
}
.chart {
	display:inline-block;
	vertical-align:middle;
}
.chart1 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.chart .ct-series-a .ct-slice-donut {
  stroke: #12ae69;
}
.chart .ct-series-b .ct-slice-donut {
  stroke: #5cb531;
}
.chart .ct-series-c .ct-slice-donut {
  stroke: #fff;
}

.chart2 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.chart3 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.chart4 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.chart5 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.chart5 .ct-series-b .ct-slice-donut {
  stroke: #fff;
}


.base {
  width: 350px;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.base path {
  width: 350px;
  height: 350px;
}

.start {
  font-size: 20px;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transition: all .3s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  letter-spacing: 0em;
  cursor: pointer;
}
.start:hover {
  letter-spacing: 0.2em;
}


/*---------------------------------------------------------------------------
	TAB
---------------------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {
#js-magic {
	text-align: center;
	height: 700px;
}
}



/*---------------------------------------------------------------------------
	SP
---------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
.scroll-line {
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  position: fixed;
  top: 50vh;
}

.magic-section {
	margin: 0 auto !important;
	display: block;
	text-align: center;
}

#js-magic {
	text-align: center;
	height: auto;
}
.chart {
	vertical-align:middle;
}
.chart1 {
  width: 145px;
  height: 145px;
}

.chart2 {
  width: 145px;
  height: 145px;
}

.chart3 {
  width: 145px;
  height: 145px;
}

.chart4 {
  width: 145px;
  height: 145px;
}

.chart5 {
  width: 145px;
  height: 145px;
}

.base {
  width: 350px;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.base path {
  width: 350px;
  height: 350px;
}

.start {
  font-size: 20px;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transition: all .3s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  letter-spacing: 0em;
  cursor: pointer;
}
.start:hover {
  letter-spacing: 0.2em;
}

}

/*---------------------------------------------------------------------------
	IE用グラフ
---------------------------------------------------------------------------*/
.ie-chart1 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.ie-chart2 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.ie-chart3 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.ie-chart4 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.ie-chart5 {
  width: 235px;
  height: 235px;
  margin: 0 auto;
}
.ie-chart5 .ct-series-b .ct-slice-donut {
  stroke: #fff;
}

/*---------------------------------------------------------------------------
	SP
---------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
.ie-chart1 {
  width: 145px;
  height: 145px;
}
.ie-chart2 {
  width: 145px;
  height: 145px;
}
.ie-chart3 {
  width: 145px;
  height: 145px;
}
.ie-chart4 {
  width: 145px;
  height: 145px;
}
.ie-chart5 {
  width: 145px;
  height: 145px;
}
}