@charset "UTF-8";
/*!
Theme Name: yoshida-sgo
Version: 1.0.0
*/


/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/

/* chart */
:root {
 --r: 100px;
}

.chart {
	position: relative;
	width: calc(var(--r) * 3);
	height: calc(var(--r) * 3);
	border-radius: 50%;
	background-image: conic-gradient(
	  #749dd1 0% 20%,
	  #ee663a 20% 38%,
	  #198754 38% 56%,
	  #f7b54c 56% 100%
	);
  }

.label {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: calc(var(--r) * 0.24);
	color:#fff;
}

  .label-1 {
	--start: 0;
	--end: 0.2;
	--percentage: calc((var(--start) + var(--end)) / 2);
	--angle: calc(var(--percentage) * 360deg);
	--deg: calc(-90deg + var(--angle));
	translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  }

  .label-2 {
	--start: 0.2;
	--end: 0.38;
	--percentage: calc((var(--start) + var(--end)) / 2);
	--angle: calc(var(--percentage) * 360deg);
	--deg: calc(-90deg + var(--angle));
	translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  }

  .label-3 {
	--start: 0.38;
	--end: 0.56;
	--percentage: calc((var(--start) + var(--end)) / 2);
	--angle: calc(var(--percentage) * 360deg);
	--deg: calc(-90deg + var(--angle));
	translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
	color: white;
  }
  .label-4 {
	--start: 0.56;
	--end: 1;
	--percentage: calc((var(--start) + var(--end)) / 2);
	--angle: calc(var(--percentage) * 360deg);
	--deg: calc(-90deg + var(--angle));
	translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
	color: white;
  }

.marketing-chart-list li{
	margin-bottom: 1em;
}

.label-txt-1:before{color: #749dd1;}
.label-txt-2:before{color: #ee663a;}
.label-txt-3:before{color: #198754;}
.label-txt-4:before{color: #f7b54c;}

@media screen and (max-width: 768px) {
	.content {
		width: 94%;
	}
}