@charset "utf-8";

/* ==================== circle graph */

.graph_circle {
	width: 460px;
	height: 460px;
	background: url("/-/Media/Ricoh/Sites/jp_ricoh/company/ataglance/img/graph/img-people-bg.png") no-repeat center center;
	background-size: 65%;
	display: inline-block;
	position: relative;
	margin-right: 60px;
}

.graph_circle_ico {
	position: absolute;
	left: 50%;
}

.graph_circle_ico img {
	max-width: 100%;
}

.graph_circle_view {
	width: 460px;
	height: 460px;
	padding: 10px;
}

@media (max-width: 640px) {
	.graph_circle {
		width: 260px;
		height: 260px;
		margin-right: 0;
	}

	.graph_circle_view {
		width: 260px;
		height: 260px;
		margin-right: 0;
		padding: 10px;
		text-align: center;
	}
}


.graph_circle text {
	stroke: none;
	fill: #111;
}

.graph_circle_ico {
	text-anchor: middle;
}

.graph_circle_num {
	font-size: 60px;
	text-anchor: middle;
}

.graph_circle_num .unit {
	font-size: 30px;
}

.graph_circle_label {
	font-size: 16px;
	font-weight: bold;
	text-anchor: middle;
}

.circle_pie {
	width: 460px;
	height: 460px;
	overflow: hidden;
	/*transform: translate(30px, 30px)*/
}

.circle_pie .arc path {
	stroke: #FFF;
	stroke-width: 2px;
}

.circle_pie .arc path:hover {
}

.circle_pie .arc_dummy path {
	fill: transparent;
}
.circle_pie .arc_dummy path:hover {
	stroke: #111;
	stroke-width: 4px;
}

.pie0,
.circle0 {
	fill: #002E77;
	stroke: none;
}
.pie1,
.circle1 {
	fill: #74BDE7;
	stroke: none;
}
.pie2,
.circle2 {
	fill: #4E92AB;
	stroke: none;
}
.pie3,
.circle3 {
	fill: #0D63DC;
	stroke: none;
}