/* ------------------------------------------------------------ */
/* グラフ指定 */
/* ------------------------------------------------------------ */

/*--- 円グラフ ---*/
.c-graph-block {
	display: flex;
	justify-content: center;
	margin: 50px 0 70px;
}
.c-graph-block li {
	width: 23%;
	margin-left: 2%;
	font-size: 0.875em;
	line-height: 150%; 
	text-align: center;
}
.c-graph-block li span.t-year {
	display: block;
	margin-bottom: 10px;
	font-size: 1.125em;
}
.c-graph-block .circle {
	position: relative;
	width: 170px;
	height: 170px;
	margin: 0 auto 20px;
}
.circle svg {
	position: relative;
	width: 170px;
	height: 170px;
			transform: rotate(-90deg);
}
svg circle {
	position: relative;
	fill: none;
	stroke-width: 20;
	stroke: #cccccc;
	stroke-dasharray: 470;
	stroke-dashoffset: 0;
}
.c-graph-block .circle p {
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 30px);
	width: 100%;
	height: 100%;
	display: flex;
	color: #333;
	font-size: 1.5em;
}
.c-graph-block li.co2 .circle p {
	position: absolute;
	top: calc(50% - 15px);
	left: calc(50% - 45px);
	width: 100%;
	height: 100%;
	display: flex;
	color: #333;
	font-size: 1.25em;
}
.c-graph-block li.co2 .circle p.re {
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	width: 100%;
	height: 100%;
	display: flex;
	color: #333;
	font-size: 1.25em;
}
/*リサイクル率…使用無し*/
.c-graph-block li:nth-child(1) svg circle.line {
	stroke-dashoffset: 334.17;/*calc(470 - (470 * パーセント) / 100)*/
	stroke: #00215d;
}
.c-graph-block li:nth-child(2) svg circle.line {
	stroke-dashoffset: 407.02;
	stroke: #005a9d;
}
.c-graph-block li:nth-child(3) svg circle.line {
	stroke-dashoffset: 376.94;
	stroke: #0086c8;
}
.c-graph-block li:nth-child(4) svg circle.line {
	stroke-dashoffset: 344.51;
	stroke: #69b0f2;
}
/*2019年度比削減率*/
.c-graph-block li.co2:nth-child(1) svg circle {
	stroke: #00215d;
}
.c-graph-block li.co2:nth-child(2) svg circle {
	stroke: #005a9d;
}
.c-graph-block li.co2:nth-child(3) svg circle {
	stroke: #0086c8;
}
.c-graph-block li.co2:nth-child(4) svg circle {
	stroke: #69b0f2;
}
/* 円周470で計算／=（470 - (数値*4.7)) */
.c-graph-block li.co2:nth-child(1) svg circle.line {
	stroke-dashoffset: 365.19;
	stroke: #ccc;
}
.c-graph-block li.co2:nth-child(2) svg circle.line {
	stroke-dashoffset: 311.61;
	stroke: #ccc;
}
.c-graph-block li.co2:nth-child(3) svg circle.line {
	stroke-dashoffset: 258.5;
	stroke: #ccc;
}
.c-graph-block li.co2:nth-child(4) svg circle.line {
	stroke-dashoffset: 194.11;
	stroke: #ccc;
}
aside.co2 {
	width: 92%;
	margin: -20px 4% 50px;
	padding: 15px 20px 10px;
	font-size: 0.875em;
	box-sizing: border-box;
	background: #eee;
	border-radius: 3px;
}
aside.co2 ul li {
	margin-bottom: 8px;
}


/*--- 棒グラフ ---*/
.graph-block {
	display: flex;
	justify-content: center;
	margin: 20px 0 70px;
}
.graph-block li {
	width: 48%;
}
.graph-box {
	position: relative;
	max-width: 87%;
	height: 250px;
	margin: 0 auto;
	border: 1px solid #969697;
	border-radius: 2px;
	overflow: hidden;
  }
  .graph-box .graph {
	width: 68px;
	padding: 10px;
 	position: absolute;
	top: auto;
	bottom: 0;
	border-radius: 4px 4px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
  	flex-direction: column-reverse;
	animation: graphA 3s forwards;
}

.graph-box .graph span {
	font-size: 14px;
	color: #ffffff;
  }
  .graph-box .graph span.long {
	font-size: 12px;
	line-height: 120%;
  }
  .graph-box .graph span span {
	display: block;
	margin-top: 5px;
	margin-left: -2px;
	padding-top: 5px;
	line-height: 120%;
	border-top: 2px dotted;
  }
  
.under-year {
	max-width: 80%;
	margin: 5px auto 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}
.under-year li {
	width: 25%;
	margin-left: 0;
	text-align: center;
}


  /*廃棄物処理業者への処理委託（上280で計算／=数値÷280）…使用無し*/
  .graph-box .graph.a-1 {
	height: calc(65.54% - 30px);
	left: 5%;
	background: #00215d;
  }
  .graph-box .graph.a-2 {
	height: calc(69% - 30px);
	left: calc(10% + 90px);
	background: #005a9d;
  }
  .graph-box .graph.a-3 {
	height: calc(70.75% - 30px);
	left: calc(15% + 180px);
	background: #0086c8;
  }
  .graph-box .graph.a-4 {
	height: calc(89.32% - 30px);
  	left: calc(20% + 270px);
	background: #69b0f2;
}

  /*リサイクル業者への委託・搬出（上75で計算／=数値÷75）…使用無し*/
  .graph-box .graph.b-1 {
	height: calc(60.27% - 30px);
	left: calc(20% + 270px);
	background: #00215d;
  }
  .graph-box .graph.b-2 {
	height: calc(93.87% - 30px);
	left: calc(15% + 180px);
 	background: #005a9d;
  }
  .graph-box .graph.b-3 {
	height: calc(29.2% - 30px);
	left: 5%;
	background: #0086c8;
 }
  .graph-box .graph.b-4 {
	height: calc(29.6% - 30px);
	left: calc(10% + 90px);
	background: #69b0f2;
  }

  /*廃棄物処理業者への処理委託／リサイクル業者への委託・搬出＝リサイクル率（上300で計算／=（数値①+数値②）÷300）*/
  .graph-box .graph.ab-1 {
	height: calc(76.2% - 30px);
	left: 6%;
	background: #00215d;
	background: linear-gradient(180deg, #6586c4 0, #6586c4 80%, #00215d 20%, #00215d 100%);
  }
  .graph-box .graph.ab-2 {
	height: calc(87.9% - 30px);
	left: calc(11.9% + 90px);
	background: linear-gradient(180deg, #529ad2 0, #529ad2 73%, #005a9d 27%, #005a9d 100%);
  }
  .graph-box .graph.ab-3 {
	height: calc(73.3% - 30px);
	left: calc(18% + 180px);
	background: linear-gradient(180deg, #48aada 0, #48aada 90%, #0086c8 10%, #0086c8 100%);
  }
  .graph-box .graph.ab-4 {
	height: calc(90.8% - 30px);
	left: calc(24% + 270px);
	background: linear-gradient(180deg, #99c7f1 0, #99c7f1 92%, #69b0f2 8%, #69b0f2 100%);
  }
  .under-year.graph-ab li:first-child {
	margin-left: -4px;
	margin-right: 4px;
  }
  .under-year.graph-ab li:nth-child(2) {
	margin-left: -3px;
	margin-right: 3px;
  }
  .under-year.graph-ab li:nth-child(3) {
	margin-left: -2px;
	margin-right: 2px;
  }

  /*第一種指定化学物質移動量（上5で計算／=数値÷5）*/
  .graph-box .graph.c-1 {
	height: calc(52% - 40px);
	left: 6%;
	background: #00215d;
  }
  .graph-box .graph.c-2 {
	height: calc(78% - 40px);
	left: calc(11.9% + 90px);
	background: #005a9d;
  }
  .graph-box .graph.c-3 {
	height: calc(78% - 40px);
	left: calc(18% + 180px);
	background: #0086c8;
  }
  .graph-box .graph.c-4 {
	height: calc(88% - 40px);
	left: calc(24.2% + 270px);
	background: #69b0f2;
  }

  /*水道水（上5500で計算／=数値÷5500）*/
  .graph-box .graph.d-1 {
	height: calc(98.82% - 50px);
	left: 5.8%;
	background: #00215d;
  }
  .graph-box .graph.d-2 {
	height: calc(84.73% - 50px);
	left: calc(11.6% + 90px);
	background: #005a9d;
  }
  .graph-box .graph.d-3 {
	height: calc(68.98% - 50px);
	left: calc(17.5% + 180px);
	background: #0086c8;
  }
  .graph-box .graph.d-4 {
	height: calc(73.73% - 50px);
	left: calc(23.2% + 270px);
	background: #69b0f2;
  }
  .under-year.graph-d li:first-child {
	margin-left: -3px;
	margin-right: 3px;
  }
  .under-year.graph-d li:nth-child(3) {
	margin-left: 4px;
	margin-right: -4px;
  }
  .under-year.graph-d li:nth-child(4) {
	margin-left: 6px;
	margin-right: -6px;
  }

  /*電力購入量（上3500で計算／=数値÷3500）*/
  .graph-box .graph.e-1 {
	height: calc(87.66% - 30px);
	left: 5.8%;
	background: #00215d;
  }
  .graph-box .graph.e-2 {
	height: calc(68.03% - 30px);
	left: calc(11.6% + 90px);
	background: #005a9d;
  }
  .graph-box .graph.e-3 {
	height: calc(51.89% - 30px);
	left: calc(17.5% + 180px);
	background: #0086c8;
  }
  .graph-box .graph.e-4 {
	height: calc(54.09% - 30px);
	left: calc(23.2% + 270px);
	background: #69b0f2;
  }
  .under-year.graph-e li:first-child {
	margin-left: -3px;
	margin-right: 3px;
  }
  .under-year.graph-e li:nth-child(3) {
	margin-left: 4px;
	margin-right: -4px;
  }
  .under-year.graph-e li:nth-child(4) {
	margin-left: 6px;
	margin-right: -6px;
  }

  /*再生可能エネルギー量（上●で計算）…使用無し*/
  .graph-box .graph.f-1 {
	height: /*calc(0% - 10px)*/ 0px;
	left: 5%;
	background: #00215d;
  }
  .graph-box .graph.f-2 {
	height: /*calc(0% - 10px)*/ 0px;
	left: calc(10% + 90px);
	background: #005a9d;
  }
  .graph-box .graph.f-3 {
	height: /*calc(0% - 10px)*/ 0px;
	left: calc(15% + 180px);
	background: #0086c8;
  }
  .graph-box .graph.f-4 {
	height: /*calc(0% - 10px)*/ 0px;
	left: calc(20% + 270px);
	background: #69b0f2;
  }

  /*石油系燃料（上40で計算／=数値÷40）*/
  .graph-box .graph.g-1 {
	height: calc(25.5% - 40px);
	left: 5%;
	background: #00215d;
  }
  .graph-box .graph.g-2 {
	height: calc(96.75% - 40px);
	left: calc(11.1% + 90px);
	background: #005a9d;
  }
  .graph-box .graph.g-3 {
	height: calc(20.5% - 40px);
	left: calc(17.3% + 180px);
	background: #0086c8;
  }
  .graph-box .graph.g-4 {
	height: calc(19.5% - 40px);
	left: calc(23.3% + 270px);
	background: #69b0f2;
  }
  .under-year.graph-g li:first-child {
	margin-left: -6px;
	margin-right: 6px;
  }
  .under-year.graph-g li:nth-child(2) {
	margin-left: -2px;
	margin-right: 2px;
  }
  .under-year.graph-g li:nth-child(3) {
	margin-left: 4px;
	margin-right: -4px;
  }
  .under-year.graph-g li:nth-child(4) {
	margin-left: 7px;
	margin-right: -7px;
  }

  /*LPガス（上1200で計算／=数値÷1200）*/
  .graph-box .graph.h-1 {
	height: calc(94.5% - 30px);
	left: 5.7%;
	background: #00215d;
  }
  .graph-box .graph.h-2 {
	height: calc(88.92% - 30px);
	left: calc(11.7% + 90px);
	background: #005a9d;
  }
  .graph-box .graph.h-3 {
	height: calc(74.58% - 30px);
	left: calc(17.8% + 180px);
	background: #0086c8;
  }
  .graph-box .graph.h-4 {
	height: calc(78.33% - 30px);
	left: calc(23.4% + 270px);
	background: #69b0f2;
  }
  .under-year.graph-h li:first-child {
	margin-left: -4px;
	margin-right: 4px;
  }
  .under-year.graph-h li:nth-child(2) {
	margin-left: 2px;
	margin-right: -2px;
  }
  .under-year.graph-h li:nth-child(3) {
	margin-left: 4px;
	margin-right: -4x;
  }
  .under-year.graph-h li:nth-child(4) {
	margin-left: 9px;
	margin-right: -9px;
  }

  /*Scope 1+2（上1700で計算）…使用無し*/
  .graph-box .graph.i-1 {
	height: calc(96.18% - 30px);
	left: 5%;
	background: #00215d;
  }
  .graph-box .graph.i-2 {
	height: calc(64.76% - 30px);
	left: calc(10% + 90px);
	background: #005a9d;
  }
  .graph-box .graph.i-3 {
	height: calc(74.76% - 30px);
	left: calc(15% + 180px);
	background: #0086c8;
  }
  .graph-box .graph.i-4 {
	height: calc(63.76% - 30px);
	left: calc(20% + 270px);
	background: #69b0f2;
  }

  @keyframes graphA {
	0% {
	  transform: translateY(100%);
	}
	100% {
	  transform: translateY(0);
	}
  }