@charset "utf-8";
.sub_cont .cnt_box, .img_cont, .cnt_box{
	width:100%;
}
.pg_tbl.com th{
	color:var(--sub-point-color)
}

.cnt_tit_box{
	flex-direction: column;
	align-items:flex-start !important;
}
.cnt_1 .img_cont{
	display:inline-block;
	text-align: center;
}
.cnt_1  .img_cont2{
	margin-top:-80px;
}
.circle{
	width:320px;
	height:320px;
	border-radius:100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	mix-blend-mode:multiply;
	font-size:2.2rem;
	font-weight: 600;
}
.circle1{
	background-color: var(--Secondary-1);
}
.circle2{
	background-color: var(--main-color2);
	margin-right:-50px;
	color:#fff;
}
.circle3{
	background-color: var(--main-color);
	color:#fff;
}
.cnt_1 .info_p_box{
	padding:20px 40px;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap:1rem;
	font-size: 1.8rem;
	font-weight: 500;
}
.cnt_1 .info_p_box span{
	color:#BF0A0B;
}
.cnt_1 tr:nth-child(4).tr_color{
	background-color:#8CA9D9;
}
.cnt_1 tr:nth-child(5).tr_color{
	background-color:#4F79BE;
}
.cnt_1 tr:nth-child(4) td, .cnt_1 tr:nth-child(5) td{
	color:#fff;
}

.cnt_2 .tr_color{
	background-color: #4F79BE;
	color:#fff;
	font-weight: 500;
}

.img_box .img_cont > div{
	text-align: center;
}

.cnt_box_4, .cnt_box_4 > div{
	gap:2rem !important;
}
.cnt_box_4.p_4 .info_box.info_box3{
	background-color:#FFF6ED;
	padding: 30px 20px;
}
.cnt_box_4.p_4 .info_box.info_box3 .txt_tit .tit{
	color:var(--sub-point-color) !important;
}


.graph_lgd ul{
	display:flex;
	gap:1rem;
}
.graph_lgd li span{
	display:flex;
	align-items:center;
	gap:0.4rem;
}
.graph_lgd li span:after{
	content: '';
    width: 20px;
    height: 4px;
    background: #ddd;
    display: inline-block;
}
.graph_lgd li:nth-child(1) span:after{
	background:var(--sub-point-color)
}
.graph_lgd li:nth-child(2) span:after{
	background:var(--main-color2)
}
.graph_lgd li:nth-child(3) span:after{
	background:#ED7A7A
}
.cnt_box_1{
	margin-top:2rem;
	display:flex;
	flex-direction:column;
	gap:2rem;
}
.cnt_box_1 .line1{
	display:flex;
	flex-direction:column;
	gap:2rem;
}
.cnt_box_1 > div{
	display:flex;
	justify-content:space-between;
	width:100%;
}
p.graph_label{
	font-size:1.4rem;
	color:#666;
}
.info_box{
	display: flex;
    padding: var(--padding-padding-XL-2) var(--padding-padding-XL-1);
    gap: var(--padding-padding-XL-1);
    border: 1px solid var(--line-color-line_color);
    background: #ddd;
    box-sizing: border-box;
}

.cnt_box_1 .info_box{
	display: flex;
    align-items: center;
    flex-direction: row-reverse;
    background: #F3F6F8;
}
.cnt_box_1 .info_box .txt{
	    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    max-height: 156px;
}
.cnt_box_1 .info_box .txt_tit{
	display:flex;
	align-items:center;
}
.cnt_box_1 .info_box .txt_tit .tit, .cnt_box_1 .info_box .txt_tit .tit_2{
	color:var(--sub-point-color)
}
.txt .tit_2{
	font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -0.1rem;
}
.graph{
	display:flex;
	justify-content: space-between;
	width:100%;
	gap: 4rem;
}

.graph img{
	width:calc((100% - 8rem) / 3);
}
.cnt_box_1 > p{
	text-align: center;
}

@media(min-width:1200px){
	.cnt_3 .cnt_box .line1:nth-child(2){
		display:none;
	}
	.cnt_box_4.p_4 .info_box.info_box3{
		min-width: calc((100% - 4rem) / 3) !important;
		width: calc((100% - 4rem) / 3)!important;
		max-width: calc((100% - 4rem) / 3) !important;
	}
}

@media(max-width:1200px){
	.cnt_3 .cnt_box .line1:nth-child(2) {
        display: inherit;
    }
	.cnt_3 .cnt_box .line1:first-child > div:last-child, .cnt_box.cnt_3 .line1:last-child > div:first-child {
        display: none;
    }
	.info_box .txt .subtxt{text-align:left !important}
	.txt .tit_2{padding-left:0.5rem}
	
}

@media all and (max-width:767px) {
	.cnt_1 .img_cont2{
		margin-top:-6rem;
	}
	.circle{
		width:240px;
		height: 240px;
		font-size: 1.6rem;
	}
	.circle2{
		margin-right:-4rem;
	}

	.cnt_box_1 > div, .cnt_box_1 .info_box, .cnt_box_1 .info_box .txt_tit, .graph{
		flex-direction: column;
	}
	.cnt_box_1 .info_box .txt{
		width: 100%;
	}
	.graph img{
		width:100%
	}
}


@media all and (max-width:575px) {
	.info_box2 .txt .tit{font-size:1.8rem}
	.cnt_1 .img_cont2{
		margin-top:-4rem;
	}
	.circle{
		width:160px;
		height: 160px;
		font-size: 1.4rem;
	}
	.circle2{
		margin-right:-2.4rem;
	}
	.txt .tit_2{font-size:2rem}
	.cnt_box_4.p_4 .info_box.info_box3{justify-content:center;}
	.cnt_box_4.p_4 .info_box.info_box3 .txt_tit .tit{font-size:1.8rem}
	
}