/* CSS Document */

:root{
	--g_marker01: #647cbe;
	--g_marker02: #8eb242;
	--g_marker03: #f89e3e;
	--g_marker04: #f07a8c;
	--g_marker05: #2aa0c0;
	--g_marker06: #36a678;
}

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

@media screen and ( max-width:959px) {
	.graph-unit{
		margin-top: 0;
	}
}

.graph-wrap {
	position: relative;
	width: 130%;
	margin: -15%;
	aspect-ratio: 1/1;
	background-color: #fff;
	
	/*margin: auto;*/
	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: 10;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	opacity: 0;
	position: relative;
	transition: opacity 0.3s 0.6s;
}
.graph-unit.is-appear .circle circle{
	opacity: 1;
}
.circle circle:nth-last-child(1) {
	stroke: var(--g_marker01);
}
.circle circle:nth-last-child(2) {
	stroke: var(--g_marker02);
}
.circle circle:nth-last-child(3) {
	stroke: var(--g_marker03);
}
.circle circle:nth-last-child(4) {
	stroke: var(--g_marker04);
}
.circle circle:nth-last-child(5) {
	stroke: var(--g_marker05);
}
.circle circle:nth-last-child(6) {
	stroke: var(--g_marker06);
}

/*#graph01*/

.graph-unit.is-appear #graph01 .circle circle:nth-last-child(1) {
	animation: anime_01-01 1.2s 0.6s ease-in-out forwards;
}
.graph-unit.is-appear #graph01 .circle circle:nth-last-child(2) {
	animation: anime_01-02 1.2s 0.6s ease-in-out forwards;
}
.graph-unit.is-appear #graph01 .circle circle:nth-last-child(3) {
	animation: anime_01-03 1.2s 0.6s ease-in-out forwards;
}
.graph-unit.is-appear #graph01 .circle circle:nth-last-child(4) {
	animation: anime_01-04 1.2s 0.6s ease-in-out forwards;
}
.graph-unit.is-appear #graph01 .circle circle:nth-last-child(5) {
	animation: anime_01-05 1.2s 0.6s ease-in-out forwards;
}
.graph-unit.is-appear #graph01 .circle circle:nth-last-child(6) {
	animation: anime_01-06 1.2s 0.6s ease-in-out forwards;
}

@keyframes anime_01-01 {
  to {
    stroke-dashoffset: 83;
  }
}
@keyframes anime_01-02 {
  to {
    stroke-dashoffset: 53;
  }
}
@keyframes anime_01-03 {
  to{
    stroke-dashoffset: 32;
  }
}
@keyframes anime_01-04 {
  to {
    stroke-dashoffset: 13;
  }
}
@keyframes anime_01-05 {
  to {
    stroke-dashoffset: 2;
  }
}
@keyframes anime_01-06 {
 to {
    stroke-dashoffset: 0;
  }
}

/*#graph02*/

.graph-unit.is-appear #graph02 .circle circle:nth-last-child(1) {
	animation: anime_02-01 1.2s 0.6s ease-in-out forwards;
}
.graph-unit.is-appear #graph02 .circle circle:nth-last-child(2) {
	animation: anime_02-02 1.2s 0.6s ease-in-out forwards;
}
.graph-unit.is-appear #graph02 .circle circle:nth-last-child(3) {
	animation: anime_02-03 1.2s 0.6s ease-in-out forwards;
}

@keyframes anime_02-01 {
  to {
    stroke-dashoffset: 27;
  }
}
@keyframes anime_02-02 {
  to {
    stroke-dashoffset: 4;
  }
}
@keyframes anime_02-03 {
  to {
    stroke-dashoffset: 0;
  }
}

/*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.8s;
}
.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);
}

/*#graph01*/
#graph01 .gap-area .gap:nth-child(2) {
  transform: rotate(calc(17/100*360deg));
}
#graph01 .gap-area .gap:nth-child(3) {
  transform: rotate(calc(47/100*360deg));
}
#graph01 .gap-area .gap:nth-child(4) {
  /*transform: rotate(calc(62/100*360deg));*/
	transform: rotate(calc(-32/100*360deg));
}
#graph01 .gap-area .gap:nth-child(5) {
  /*transform: rotate(calc(81/100*360deg));*/
	transform: rotate(calc(-13/100*360deg));
}
#graph01 .gap-area .gap:nth-child(6) {
  /*transform: rotate(calc(98/100*360deg));*/
	transform: rotate(calc(-2/100*360deg));
}

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

/*graph-mask*/
.graph-mask{
	position: absolute;
	width: 66%;
	height: 66%;
	top: 50%;
	left: 50%;
	border: #fff 4px solid;
	border-radius: 50%;
	translate: -50% -50%;
}
.graph-mask::before{
	content: "";
	display: block;
	position: absolute;
	width: 51.5%;
	height: 51.5%;
	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.875rem, 5vw);
	line-height: 1.3;
	font-weight: 600;
	translate: -50% -40%;
	margin-top: -0.1em;
	opacity: 0;
	transition: opacity 0.4s 1.2s, translate 0.4s 1.2s;
}
.graph-unit.is-appear .graph-center_title{
	opacity: 1;
	translate: -50% -50%;
}

/*g-labels*/
.g-label-area{
	position: absolute;
  top: 50%;
  left: 25%;
  margin: auto;
  width: 50%;
  height: 50%;
	margin-top: -25%;
	border-radius: 50%;
	opacity: 0;
	transition:opacity 0.4s 1.8s;
}
.graph-unit.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(1.125rem, 3.5vw);
	white-space: nowrap;
	translate: -50% -50%;
}

/*#graph01*/
#graph01 .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)));
}
#graph01 .g-label-area .g-label:nth-child(2){
	left: calc(50%*sin(calc(32/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(32/100*360deg)));
}
#graph01 .g-label-area .g-label:nth-child(3){
	left: calc(50%*sin(calc(58/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(58/100*360deg)));
}
#graph01 .g-label-area .g-label:nth-child(4){
	left: calc(50%*sin(calc(78/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(78/100*360deg)));
}
#graph01 .g-label-area .g-label:nth-child(5){
	left: calc(50%*sin(calc(93/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(93/100*360deg)));
}
#graph01 .g-label-area .g-label:nth-child(6){
	left: calc(50%*sin(calc(99/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(99/100*360deg)));
	text-align: center;
	margin-top: -0.5em;
	/*translate: 1em calc(-50% - 0.8em);*/
}

/*#graph02*/
#graph02 .g-label-area .g-label:nth-child(1){
	left: calc(50%*sin(calc(37/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(37/100*360deg)));
}
#graph02 .g-label-area .g-label:nth-child(2){
	left: calc(50%*sin(calc(85/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(85/100*360deg)));
}
#graph02 .g-label-area .g-label:nth-child(3){
	left: calc(50%*sin(calc(98/100*360deg)) + 50%);
	top: calc(50% - 50%*cos(calc(98/100*360deg)));
}


/*hanrei-area*/

.p-hanrei_area{
	font-size: 0.875rem;
	line-height: 1.5;
	display: flex;
	justify-content: center;
	margin-bottom: 3rem;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.4s 1.2s, transform 0.4s 1.2s;
}
.graph-unit.is-appear .p-hanrei_area{
	opacity: 1;
	transform: translateY(0px);
}

.p-hanrei_area ul{
	margin: 0;
	padding-right: 0.875rem;
}
.p-hanrei_area li{
	display: flex;
	justify-content: flex-start;
	padding-bottom: 0.43375rem;
}
.p-hanrei_area li::before{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #999;
	margin: 0.125rem 0.375rem 0 0;
}

.p-hanrei_area li:nth-of-type(1)::before {
	background-color: var(--g_marker01);
}
.p-hanrei_area li:nth-of-type(2)::before {
	background-color: var(--g_marker02);
}
.p-hanrei_area li:nth-of-type(3)::before {
	background-color: var(--g_marker03);
}
.p-hanrei_area li:nth-of-type(4)::before {
	background-color: var(--g_marker04);
}
.p-hanrei_area li:nth-of-type(5)::before {
	background-color: var(--g_marker05);
}
.p-hanrei_area li:nth-of-type(6)::before {
	background-color: var(--g_marker06);
}