/* CSS Document */

:root{
	--g_marker01: #249eca;
	--g_marker02: #339e72;
	--g_marker03: #d6931f;
	--g_marker04: #81a50d;
	--g_marker05: #8da6ab;
	--g_marker06: #da7dab;
}

/*p-map_graph_area*/
.p-map_graph_area{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	aspect-ratio: 5/3;
	position: relative;
}

.p-jp_map{
	text-align: center;
	position: relative;
}
.p-jp_map h4.p-jp_map__heading{
	font-size: 1.5rem;
	line-height: 1.5;
	text-align: left;
	color: #10642E;
	white-space: nowrap;
	position: absolute;
	top: -3%;
	left: 12.6%;
	z-index: 2;
}
.p-jp_map img{
	display: block;
	position: absolute;
	top:-2.8%;
	left: 31%;
	width: 115%;
}
@media (max-width: 960px) {
	.p-jp_map h4.p-jp_map__heading{
		font-size: 1.3125rem;
	}
}
@media (max-width: 780px) {
	.p-jp_map h4.p-jp_map__heading{
		top:30%;
		left: min(8.7vw, 68px);
	}
	.p-jp_map img{
		position: static;
		margin: 0 auto -5%;
		width: 100%;
		max-width: 540px;
		transform: translateY(20px);
	}
}
@media (max-width: 600px) {
	.p-jp_map h4.p-jp_map__heading{
		left: 0px;
	}
}
@media (max-width: 480px) {
	.p-jp_map h4.p-jp_map__heading{
		font-size: 1.1875rem;
	}
}

/**/
.p-graph_area{
	/*width:75%;*/
	width: min(24vw, 330px);
	margin: auto;
	position: relative;
}

/*@media (max-width: 960px) {
	.p-graph_area{
		width:80%;
	}
}*/
@media (max-width: 780px) {
	.p-map_graph_area{
		grid-template-columns: 1fr;
		grid-row-gap: 10px;
		margin-top: -30px;
		aspect-ratio: inherit;
	}
	.p-graph_area{
		width: 320px;
	}
}
@media (max-width: 480px) {
	.p-map_graph_area{
		margin-top: 0;
	}
	.p-graph_area{
		width: 260px;
	}
}

.graph-unit{
	width: 100%;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	
	transform: translateY(40px);
	transition: transform 0.6s 0.2s;
}
.graph-unit.is-appear{
	transform: translateY(0px);
}

.graph-wrap {
	position: relative;
	width: 130%;
	margin: -15%;
	aspect-ratio: 1/1;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	clip-path: circle(35% at 50% 50%);
}
.circle {
	transform: rotate(-90deg);
	width: 100%;
	aspect-ratio: 1/1;
	margin: auto;
	position: relative;
}
.circle circle {
	fill: none;
	stroke-width: 12;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	opacity: 0;
	position: relative;
	transition: opacity 0.3s 0.2s;
}
.graph-unit.is-appear .circle circle{
	opacity: 1;
}

/*gap*/
.gap-area {
	position: absolute;
	top: 50%;
	left: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	margin-top: -50%;
	clip-path: circle(35% at 50% 50%);
	opacity: 0;
	transition: opacity 0.6s 1.2s;
}
.graph-unit.is-appear .gap-area {
	opacity: 1;
}
.gap-area .gap {
  background: linear-gradient(to bottom,#fff 0%, #fff 50%, transparent 50%);
  height: 100%;
  width: 2px;
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  margin: auto;
}
.sp .gap-area .gap {
	width: 4px;
	left: calc(50% - 2px);
}

/*graph-mask*/
.graph-mask{
	position: absolute;
	width: 70%;
	height: 70%;
	top: 50%;
	left: 50%;
	border: #fff 4px solid;
	border-radius: 50%;
	translate: -50% -50%;
}
.graph-mask::before{
	content: "";
	display: block;
	position: absolute;
	width: 43%;
	height: 43%;
	top: 50%;
	left: 50%;
	border: #fff 4px solid;
	border-radius: 50%;
	translate: -50% -50%;
}

/*graph-center_title*/
.graph-center_title{
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	font-size: min(1.625rem, 2.2vw);
	line-height: 1.2;
	font-weight: 600;
	color: #10642E;
	text-align: center;
	translate: -50% -40%;
	margin-top: -0.1em;
	opacity: 0;
	transition: opacity 0.4s 0.8s, translate 0.4s 0.8s;
}
.graph-unit.is-appear .graph-center_title{
	opacity: 1;
	translate: -50% -55%;
}

/*g-labels*/
.g-label-area{
	position: absolute;
	top: 18%;
	left: 18%;
	margin: auto;
	width: 64%;
	height: 64%;
	border-radius: 50%;
	opacity: 0;
	transition:opacity 0.4s 1.2s;
}
.p-graph_area.is-appear .g-label-area{
	opacity: 1;
}
.g-label-area .g-label{
	position: absolute;
	width: auto;
	color: #fff;
	font-weight: 500;
	line-height: 1;
	font-size: min(1rem, 1.15vw);
	text-align: center;
	white-space: nowrap;
	translate: -50% -50%;
}
@media (max-width: 780px) {
	.g-label-area .g-label{
		font-size: 1rem;
	}
	.graph-center_title{
		font-size: 1.25rem;
	}
}
@media (max-width: 480px) {
	.g-label-area .g-label{
		font-size: 0.75rem;
	}
	.graph-center_title{
		font-size: 1rem;
	}
}

.g-label-area .g-label .c-small_txt{
	display: inline-block;
	margin-bottom: 0.25em;
	line-height: 1.3;
	font-weight: 500;
}
.g-label-area .g-label.right,
.g-label-area .g-label.left{
	color: #212121;
	translate: 0 -25%;
}
.g-label-area .g-label.right{
	text-align: left;
	left: 125%;
}
.g-label-area .g-label.left{
	text-align: right;
	right: 125%;
}
.g-label-area .g-label.right::before,
.g-label-area .g-label.left::before{
	content: "";
	display: block;
	position: absolute;
	border-top: #212121 1px solid;
	top: 0.5em;
	width: 25%;
}
.g-label-area .g-label.right::before{
	right: 105%;
}
.g-label-area .g-label.left::before{
	left: 105%;
}

/*graph___order*/
#graph01{
	order: 2;
}
#graph02{
	order: 4;
}
#graph03{
	order: 3;
}
@media (max-width: 780px) {
#graph02{
		order: 3;
	}
	#graph03{
		order: 4;
	}
}

/*posotion*/
#graph01{
	position: absolute;
	top: -2.5%;
	right: 4.5%;
}
#graph02{
	position: absolute;
	bottom: 2%;
	left: 46%;
}
#graph03{
	position: absolute;
	top: 11%;
	left: 4.5%;
}
@media (max-width: 780px) {
#graph01,#graph02,#graph03{
		position: relative;
		top:0px;
		left: 0px;
	}
}

/*==================
#graph01
===================*/
/*#graph01 .circle*/

#graph01 .graph-unit.is-appear .circle circle:nth-last-child(1) {
	animation: anime_01-01 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker04);
}
#graph01 .graph-unit.is-appear .circle circle:nth-last-child(2) {
	animation: anime_01-02 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker04);
}
#graph01 .graph-unit.is-appear .circle circle:nth-last-child(3) {
	animation: anime_01-03 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker05);
}
#graph01 .graph-unit.is-appear .circle circle:nth-last-child(4) {
	animation: anime_01-04 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker03);
}
#graph01 .graph-unit.is-appear .circle circle:nth-last-child(5) {
	animation: anime_01-05 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker06);
}

@keyframes anime_01-01 {
  to {
    stroke-dashoffset: 88;
  }
}
@keyframes anime_01-02 {
  to {
    stroke-dashoffset: 84;
  }
}
@keyframes anime_01-03 {
  to{
    stroke-dashoffset: 80;
  }
}
@keyframes anime_01-04 {
  to {
    stroke-dashoffset: 61;
  }
}
@keyframes anime_01-05 {
  to {
    stroke-dashoffset: 0;
  }
}

/*#graph01 .gap*/
#graph01 .gap-area .gap:nth-child(2) {
  transform: rotate(calc(12/100*360deg));
}
#graph01 .gap-area .gap:nth-child(3) {
  transform: rotate(calc(16/100*360deg));
}
#graph01 .gap-area .gap:nth-child(4) {
	transform: rotate(calc(20/100*360deg));
}
#graph01 .gap-area .gap:nth-child(5) {
	transform: rotate(calc(39/100*360deg));
}

/*#graph01 .g-label*/
#graph01 .g-label-area .g-label:nth-child(1){
	left: calc(50%*sin(calc(6/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(6/100*360deg)));
}
#graph01 .g-label-area .g-label:nth-child(2){
	top: calc(50% - 50%*cos(calc(8/100*360deg)));
}
#graph01 .g-label-area .g-label:nth-child(2)::before{
	width: min(3.91vw, 54px);
}
#graph01 .g-label-area .g-label:nth-child(3){
	top: calc(50% - 50%*cos(calc(18/100*360deg)));
}
#graph01 .g-label-area .g-label:nth-child(3)::before{
	width: min(2.61vw, 36px);
}
#graph01 .g-label-area .g-label:nth-child(4){
	left: calc(50%*sin(calc(28/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(28/100*360deg)));
}
#graph01 .g-label-area .g-label:nth-child(5){
	left: calc(50%*sin(calc(69/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(69/100*360deg)));
}
@media (max-width: 780px) {
	#graph01 .g-label-area .g-label:nth-child(2)::before{
		width: 52px;
	}
	#graph01 .g-label-area .g-label:nth-child(3)::before{
		width: 32px;
	}
}
@media (max-width: 480px) {
	#graph01 .g-label-area .g-label:nth-child(2)::before{
		width: 44px;
	}
}

/*==================
#graph02
===================*/
/*#graph02 .circle*/

#graph02 .graph-unit.is-appear .circle circle:nth-last-child(1) {
	animation: anime_02-01 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker02);
}
#graph02 .graph-unit.is-appear .circle circle:nth-last-child(2) {
	animation: anime_02-02 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker01);
}
#graph02 .graph-unit.is-appear .circle circle:nth-last-child(3) {
	animation: anime_02-03 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker04);
}
#graph02 .graph-unit.is-appear .circle circle:nth-last-child(4) {
	animation: anime_02-04 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker05);
}
#graph02 .graph-unit.is-appear .circle circle:nth-last-child(5) {
	animation: anime_02-05 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker06);
}

@keyframes anime_02-01 {
  to {
    stroke-dashoffset: 69;
  }
}
@keyframes anime_02-02 {
  to {
    stroke-dashoffset: 62;
  }
}
@keyframes anime_02-03 {
  to{
    stroke-dashoffset: 48;
  }
}
@keyframes anime_02-04 {
  to {
    stroke-dashoffset: 46;
  }
}
@keyframes anime_02-05 {
  to {
    stroke-dashoffset: 0;
  }
}

/*#graph02 .gap*/
#graph02 .gap-area .gap:nth-child(2) {
  transform: rotate(calc(31/100*360deg));
}
#graph02 .gap-area .gap:nth-child(3) {
  transform: rotate(calc(38/100*360deg));
}
#graph02 .gap-area .gap:nth-child(4) {
	transform: rotate(calc(52/100*360deg));
}
#graph02 .gap-area .gap:nth-child(5) {
	transform: rotate(calc(54/100*360deg));
}

/*#graph02 .g-label*/
#graph02 .g-label-area .g-label:nth-child(1){
	left: calc(50%*sin(calc(15/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(15/100*360deg)));
}
#graph02 .g-label-area .g-label:nth-child(2){
	left: calc(50%*sin(calc(34.5/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(34.5/100*360deg)));
}
#graph02 .g-label-area .g-label:nth-child(3){
	left: calc(50%*sin(calc(45/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(45/100*360deg)));
}
#graph02 .g-label-area .g-label:nth-child(4){
	/*left: calc(50%*sin(calc(53/100*360deg)) + 50%);*/
	top: calc(50% - 50%*cos(calc(53/100*360deg)));
}
#graph02 .g-label-area .g-label:nth-child(4)::before{
	width: min(10vw, 138px);
}
#graph02 .g-label-area .g-label:nth-child(5){
	left: calc(50%*sin(calc(77/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(77/100*360deg)));
}

@media (max-width: 780px) {
	#graph02 .g-label-area .g-label:nth-child(4)::before{
		width: 134px;
	}
}
@media (max-width: 480px) {
	#graph02 .g-label-area .g-label:nth-child(4)::before{
		width: 109px;
	}
}

/*==================
#graph03
===================*/
/*#graph03 .circle*/

#graph03 .graph-unit.is-appear .circle circle:nth-last-child(1) {
	animation: anime_03-01 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker02);
}
#graph03 .graph-unit.is-appear .circle circle:nth-last-child(2) {
	animation: anime_03-02 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker01);
}
#graph03 .graph-unit.is-appear .circle circle:nth-last-child(3) {
	animation: anime_03-03 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker05);
}
#graph03 .graph-unit.is-appear .circle circle:nth-last-child(4) {
	animation: anime_03-04 1.2s 0.2s ease-in-out forwards;
	stroke: var(--g_marker06);
}

@keyframes anime_03-01 {
  to {
    stroke-dashoffset: 84;
  }
}
@keyframes anime_03-02 {
  to {
    stroke-dashoffset: 81;
  }
}
@keyframes anime_03-03 {
  to{
    stroke-dashoffset: 73;
  }
}
@keyframes anime_03-04 {
  to {
    stroke-dashoffset: 0;
  }
}

/*#graph03 .gap*/
#graph03 .gap-area .gap:nth-child(2) {
  transform: rotate(calc(16/100*360deg));
}
#graph03 .gap-area .gap:nth-child(3) {
  transform: rotate(calc(19/100*360deg));
}
#graph03 .gap-area .gap:nth-child(4) {
	transform: rotate(calc(27/100*360deg));
}

/*#graph03 .g-label*/
#graph03 .g-label-area .g-label:nth-child(1){
	left: calc(50%*sin(calc(8/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(8/100*360deg)));
}
#graph03 .g-label-area .g-label:nth-child(2){
	/*left: calc(50%*sin(calc(18/100*360deg)) + 50%);*/
	top: calc(50% - 50%*cos(calc(18/100*360deg)));
	margin-top: -1.2em;
}
#graph03 .g-label-area .g-label:nth-child(2)::before{
	width: min(2.54vw, 35px);
}
#graph03 .g-label-area .g-label:nth-child(3){
	/*left: calc(50%*sin(calc(23/100*360deg)) + 50%);*/
	top: calc(50% - 50%*cos(calc(23/100*360deg)));
}
#graph03 .g-label-area .g-label:nth-child(3)::before{
	width: min(1.88vw, 26px);
}
#graph03 .g-label-area .g-label:nth-child(4){
	left: calc(50%*sin(calc(64/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(64/100*360deg)));
}

@media (max-width: 780px) {
	#graph03 .g-label-area .g-label:nth-child(2)::before{
		width: 34px;
	}
	#graph03 .g-label-area .g-label:nth-child(3)::before{
		width: 22px;
	}
}
@media (max-width: 480px) {
	#graph03 .g-label-area .g-label:nth-child(2)::before{
		width: 30px;
	}
	#graph03 .g-label-area .g-label:nth-child(3)::before{
		width: 20px;
	}
}