@charset "utf-8";
@import url('font.css');
html, body { overflow: hidden; }
.chart-wrap { width:1000px; padding:0 0 50px;}
.chart-wrap .chart-title { font-size:34px; font-weight:bold; color:#000; text-align:center; margin:50px 0 30px; }
.chart-wrap .chart-box { position:relative; }
.chart-wrap .chart-box .chart-label { display:none; margin-left:20px; font-size:16px; color:#000; }
.chart-wrap .chart-box .chart-info { position:absolute; right:50px; top:0px; background-color:#fff; width:250px; box-sizing:border-box; padding:50px 25px 40px; border-radius: 20px; box-shadow: 0 0 40px rgba(68, 68, 68, 0.2); }
.chart-wrap .chart-info .info-title { text-align:center; padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #ddd; }
.chart-wrap .chart-info .info-title p { font-size:18px; color:#000; }
.chart-wrap .chart-info .info-title p + p { font-size:14px; color:#777; margin:10px 0 0; }
.chart-wrap .chart-info .info-result {}
.chart-wrap .chart-info .info-result ul {}
.chart-wrap .chart-info .info-result li:after { content:''; display:block; clear:both; }
.chart-wrap .chart-info .info-result li { margin:10px 0; }
.chart-wrap .chart-info .info-result li .num { width:50px; height:50px; background-color:#ffd2bf; border-radius: 50%; text-align:center; line-height:50px; font-size:16px; color:#fff; font-weight:bold; display:inline-block;}
.chart-wrap .chart-info .info-result li:first-child .num { background-color:#f89164; } 
.chart-wrap .chart-info .info-result li .text { display:inline-block; font-size:18px; color:#000; margin-left:15px; letter-spacing: -0.04em; }

@media screen and (max-width: 767px) {
	.chart-wrap { width:100%; padding:0; }
	.chart-wrap .chart-title { font-size:20px; margin:30px 0 30px; }
	.chart-wrap .product-name { font-size:16px; }
	.chart-wrap .chart-box { }
	.chart-wrap .chart-box canvas { box-sizing:border-box; padding-right:3%; }
	.chart-wrap .chart-box .chart-label { display:none; }
	.chart-wrap .chart-box .chart-info { position:static; width:calc(100% - 20px); margin:30px 10px; padding:20px 20px 20px; box-shadow: 0 0 30px rgba(68, 68, 68, 0.2); }
	.chart-wrap .chart-box .chart-info:after { content:''; display:block; clear: both; }
	.chart-wrap .chart-info .info-title { width:45%; height:160px; float:left; padding:0; margin:0; border-bottom:0; display:flex; flex-direction:column; justify-content: center; align-content: center; }
	.chart-wrap .chart-info .info-title p { font-size:18px; color:#000; }
	.chart-wrap .chart-info .info-title p + p { font-size:12px; color:#777; margin:5px 0 0; }
	.chart-wrap .chart-info .info-result { width:45%; float:right; }
	.chart-wrap .chart-info .info-result ul {}
	.chart-wrap .chart-info .info-result li:after { content:''; display:block; clear:both; }
	.chart-wrap .chart-info .info-result li { margin:10px 0; }
	.chart-wrap .chart-info .info-result li .num { width:40px; height:40px; line-height:40px; font-size:12px; color:#fff; font-weight:normal; }
	.chart-wrap .chart-info .info-result li:first-child .num { } 
	.chart-wrap .chart-info .info-result li .text { display:inline-block; font-size:14px; color:#000; margin-left:5px; letter-spacing: -0.04em; }
}