.chart {
            display: table;
			margin:0 auto 40px auto;
            color: white;
            padding: 0;
            border-radius: 10px;
            font-weight: bold;
            position: relative;
			width:100%;
			max-width:300px;
			position:relative;
        }

        .representative {
            display: table;
			margin:0 auto 40px auto;
            background-color: #ea5414;
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
			width:100%;
			max-width:220px;
            font-weight: bold;
			text-align:center;
			position:relative;

        }
		.representative:before {position:absolute; bottom:-60px; left:50%; width:2px; height:60px; background:#c9c9c9; content:'';}
        .sub-charts {
            display: flex;
            justify-content: space-around;
            margin-top: 120px;
			position:relative;
        }
		.sub-charts:before {position:absolute; top:-60px; left:50%;transform:translate(-50%,0); width:75%; height:2px; background:#c9c9c9; content:'';}

        .sub-chart {
            padding: 0;
            border-radius: 10px;
            width: 200px;
            position: relative;
        }

        .sub-chart::before {
            content: '';
            width: 2px;
            height: 60px;
            background-color: #c9c9c9;
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
        }

		.sub-chart h2 {/*background:#8339a9;*/ background:var(--point-color); color:#fff; padding:10px; text-align:center; border-radius:10px 10px 0 0;}

        .sub-chart span {
            display: block;
            color: black;
            border-radius: 0 0 10px 10px;
            padding:10px;
			text-align:center;
			border:1px solid #ddd;
			border-top:0;
			margin-top:-2px;
        }

        .main-line {
            width: 2px;
            height: 40px;
            background-color: #4b8670;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
        }

        .sub-line {
            display: inline-block;
            border-top: 2px solid #4b8670;
            width: 80%;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
        }

		@media (max-width:1200px) {
			.chart {text-align:center; margin-bottom:20px;}
			.chart img {width:100%; max-width:220px; margin:0 auto;}
			.representative {max-width:160px; font-size:0.9rem;}
			.representative:before {bottom:-30px; height:30px;}
			.sub-charts:before {top:-30px; width:50%;}
			.sub-charts {margin:60px -2px 0 -2px; display:grid; grid-template-columns:1fr 1fr;}
			.sub-chart {width:auto; margin:0 2px 10px 2px;}
			.sub-chart:nth-of-type(3):before, .sub-chart:nth-of-type(4):before {display:none;}
			.sub-chart::before {top:-30px; height:30px;}
			.sub-chart h2 {padding:10px 5px; font-size:0.84rem;}
			.sub-chart span {font-size:0.8rem; line-height:1.5;}
		}