/*=========================================*/
/* WORKS */
/*=========================================*/

.number_contents_area{
	max-width: 1280px;
    margin: 0px auto 0px auto;
    position: relative;
}

.number_contents_flame{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.number_contents{
	width: 50%;
	padding: 10px 10px 10px 10px;
	display: flex;
	box-sizing: border-box;
}

.number_item{
	width: 100%;
	padding: 35px 35px 35px 35px;
	margin: 0 auto;
	text-align: center;
	background: rgba(255,255,255,1.00);
	border: 2px solid rgba(40,120,60,1.00);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.number_title{
	max-width: 300px;
	width: 100%;
	margin: 0px auto 35px auto;
	padding: 10px 50px 10px 50px;
	font-size: 150%;
	line-height: 150%;
	color: rgba(40,120,60,1.00);
	background: rgba(244, 254, 242, 1.00);
	border-radius: 50px;
	display: inline-block;
	box-sizing: border-box;
}

.number_box{
	height: 100%;
	display: flex;
	align-items: center;
}

.number_box .number_frame{
	margin: 0 auto;
	position: relative;
}

.number_box .img_area{
	width: 80%;
	margin: 0px auto 35px auto;
}

.number_box .img_area img{
	max-width: 100%;
	height: auto;
}

.number_box .graph_img_area{
	width: 93%;
}

.number_box .number_area{
	letter-spacing: -0.05em;
    font-family: "Overpass", sans-serif;
}

.number_box .number_area.kaisetsu{
	padding-bottom: 50px;
}

.number_box .number_area.top{
	margin: 0px 0px 35px 0px;
}

.number_box .number_area .number{
	font-size: 500%;
	font-weight: 600;
}

.number_box .number_area .text{
	font-size: 150%;
}

.number_box .number_area .sub_text{
	padding: 20px 0px 0px 0px;
	font-size: 110%;
	line-height: 150%;
	display: block;
}

.number_box .number_frame.number_graph_frame{
	display: flex;
	align-items: center;
}

.number_box .number_frame.number_graph_frame .img_area{
	width: 50%;
	margin: 0px 0px 0px 0px;
}

.number_box .number_frame.number_graph_frame .img_area img{
	max-width: 80%;
}

.number_box .number_frame.number_graph_frame .list_area{
	width: 50%;
	padding: 0px 0px 0px 30px;
	box-sizing: border-box;
}

.number_box .number_frame.number_graph_frame .list_area li{
	padding: 0px 0px 0px 30px;
	margin: 0px 0px 15px 0px;
	display: flex;
    align-items: end;
	justify-content: flex-start;
	position: relative;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_20::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	background: rgba(227,181,175,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_30::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	background: rgba(163,195,210,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_40::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	background: rgba(210,213,153,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_50::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	background: rgba(233,181,198,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_60::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	background: rgba(195,169,194,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li .text_area{
	padding: 0px 10px 0px 0px;
	font-size: 150%;
}

.number_box .number_frame.number_graph_frame .list_area li .number_area .number{
	font-size: 230%;
}

.number_box .number_area .number_man{
	position: absolute;
	left: 7px;
	bottom: 20px;
}

.number_box .number_area .number_woman{
	position: absolute;
	right: -15px;
	bottom: 20px;
}

.number_box.graph_box .img_area{
	margin: 0px auto 0px auto;
}

.number_box.graph_box .number_area.graph_number{
	position: absolute;
    top: 27%;
    left: 0;
    right: 0;
}


@media screen and (max-width:1280px){

.number_item{
	padding: 30px 30px 30px 30px;
	border-radius: 10px;
}

.number_title{
	margin: 0px auto 30px auto;
	padding: 10px 40px 10px 40px;
	font-size: 140%;
	line-height: 150%;
}

.number_box .img_area{
	margin: 0px auto 30px auto;
}
	
.number_box .graph_img_area{
	width: 90%;
}
	
.number_box .number_area.kaisetsu{
	padding-bottom: 50px;
}
	
.number_box .number_area.top{
	margin: 0px 0px 30px 0px;
}

.number_box .number_area .number{
	font-size: 400%;
}

.number_box .number_area .text{
	font-size: 140%;
}
	

.number_box .number_area .sub_text{
	padding: 15px 0px 0px 0px;
	font-size: 95%;
	display: block;
}

.number_box .number_frame.number_graph_frame{
	display: flex;
	align-items: center;
}

.number_box .number_frame.number_graph_frame .img_area{
	width: 50%;
	margin: 0px 0px 0px 0px;
}
	
.number_box .number_frame.number_graph_frame .img_area img{
	max-width: 75%;
}

.number_box .number_frame.number_graph_frame .list_area{
	width: 50%;
	padding: 0px 0px 0px 20px;
	box-sizing: border-box;
}

.number_box .number_frame.number_graph_frame .list_area li{
	padding: 0px 0px 0px 25px;
	margin: 0px 0px 10px 0px;
	display: flex;
    align-items: end;
	justify-content: flex-start;
	position: relative;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_20::before{
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	background: rgba(227,181,175,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_30::before{
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	background: rgba(163,195,210,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_40::before{
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	background: rgba(210,213,153,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_50::before{
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	background: rgba(233,181,198,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_60::before{
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	background: rgba(195,169,194,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li .text_area{
	padding: 0px 10px 0px 0px;
	font-size: 140%;
}

.number_box .number_frame.number_graph_frame .list_area li .number_area .number{
	font-size: 210%;
}

.number_box .number_area .number_man{
	position: absolute;
	left: 21px;
	bottom: 25px;
}

.number_box .number_area .number_woman{
	position: absolute;
	right: 1px;
	bottom: 25px;
}

.number_box.graph_box .img_area{
	margin: 0px auto 0px auto;
}

.number_box.graph_box .number_area.graph_number{
	position: absolute;
    top: 32%;
    left: 0;
    right: 0;
}

}

@media screen and (max-width:960px){

.number_contents{
	width: 50%;
}
	
.number_item{
	padding: 20px 20px 20px 20px;
	border-radius: 10px;
}

.number_title{
	margin: 0px auto 20px auto;
	padding: 10px 30px 10px 30px;
	font-size: 130%;
	line-height: 150%;
}

.number_box .img_area{
	margin: 0px auto 20px auto;
}
	
.number_box .graph_img_area{
	width: 85%;
}
	
.number_box .number_area.kaisetsu{
	padding-bottom: 45px;
}
	
.number_box .number_area.top{
	margin: 0px 0px 20px 0px;
}

.number_box .number_area .number{
	font-size: 300%;
}

.number_box .number_area .text{
	font-size: 130%;
}
	
.number_box .number_area .sub_text{
	padding: 13px 0px 0px 0px;
	font-size: 90%;
	display: block;
}

.number_box .number_frame.number_graph_frame{
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.number_box .number_frame.number_graph_frame .img_area{
	width: 50%;
	margin: 0px 0px 0px 0px;
}

.number_box .number_frame.number_graph_frame .list_area{
	width: 100%;
	padding: 20px 0px 0px 0px;
	box-sizing: border-box;
}

.number_box .number_frame.number_graph_frame .list_area li{
	padding: 0px 0px 0px 20px;
	margin: 0px 0px 10px 0px;
	display: flex;
    align-items: end;
	justify-content: flex-start;
	position: relative;
	box-sizing: border-box;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_20::before{
	position: absolute;
	content: "";
	width: 13px;
	height: 13px;
	background: rgba(227,181,175,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_30::before{
	position: absolute;
	content: "";
	width: 13px;
	height: 13px;
	background: rgba(163,195,210,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_40::before{
	position: absolute;
	content: "";
	width: 13px;
	height: 13px;
	background: rgba(210,213,153,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_50::before{
	position: absolute;
	content: "";
	width: 13px;
	height: 13px;
	background: rgba(233,181,198,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_60::before{
	position: absolute;
	content: "";
	width: 13px;
	height: 13px;
	background: rgba(195,169,194,1.00);
	left: 0;
	bottom: 2px;
}

.number_box .number_frame.number_graph_frame .list_area li .text_area{
	padding: 0px 10px 0px 0px;
	font-size: 130%;
}

.number_box .number_frame.number_graph_frame .list_area li .number_area .number{
	font-size: 190%;
}

.number_box .number_area .number_man{
	position: absolute;
	left: 33px;
	bottom: 20px;
}

.number_box .number_area .number_woman{
	position: absolute;
	right: 14px;
	bottom: 20px;
}

.number_box.graph_box .img_area{
	margin: 0px auto 0px auto;
}

.number_box.graph_box .number_area.graph_number{
	position: absolute;
    top: 35%;
    left: 0;
    right: 0;
}
	
}

@media screen and (max-width:640px){

.number_contents{
	width: 100%;
}
	
.number_item{
	padding: 20px 25px 20px 25px;
	border-radius: 10px;
}

.number_title{
	margin: 0px auto 20px auto;
	padding: 5px 30px 5px 30px;
	font-size: 120%;
	line-height: 150%;
}

.number_box .img_area{
	width: 70%;
	margin: 0px auto 20px auto;
}
	
.number_box .graph_img_area{
	width: 80%;
}
	
.number_box .number_area.kaisetsu{
	padding-bottom: 0px;
}
	
.number_box .number_area.top{
	margin: 0px 0px 20px 0px;
}

.number_box .number_area .number{
	font-size: 250%;
}

.number_box .number_area .text{
	font-size: 120%;
}
	
.number_box .number_area .sub_text{
	padding: 10px 0px 0px 0px;
	font-size: 85%;
	display: block;
}

.number_box .number_frame.number_graph_frame{
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.number_box .number_frame.number_graph_frame .img_area{
	width: 50%;
	margin: 0px 0px 0px 0px;
}
	
.number_box .number_frame.number_graph_frame .img_area img{
	max-width: 70%;
}

.number_box .number_frame.number_graph_frame .list_area{
	width: 100%;
	padding: 15px 0px 0px 0px;
	box-sizing: border-box;
}

.number_box .number_frame.number_graph_frame .list_area li{
	padding: 0px 0px 0px 15px;
	margin: 0px 0px 15px 0px;
	display: flex;
    align-items: end;
	justify-content: flex-start;
	position: relative;
	box-sizing: border-box;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_20::before{
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	background: rgba(227,181,175,1.00);
	left: 0;
	bottom: 6px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_30::before{
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	background: rgba(163,195,210,1.00);
	left: 0;
	bottom: 6px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_40::before{
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	background: rgba(210,213,153,1.00);
	left: 0;
	bottom: 6px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_50::before{
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	background: rgba(233,181,198,1.00);
	left: 0;
	bottom: 6px;
}

.number_box .number_frame.number_graph_frame .list_area li.graph_60::before{
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	background: rgba(195,169,194,1.00);
	left: 0;
	bottom: 6px;
}

.number_box .number_frame.number_graph_frame .list_area li .text_area{
	padding: 0px 10px 3px 0px;
	font-size: 130%;
}

.number_box .number_frame.number_graph_frame .list_area li .number_area .number{
	font-size: 190%;
}

.number_box .number_area .number_man{
	position: absolute;
	left: 53px;
	bottom: 30px;
}

.number_box .number_area .number_woman{
	position: absolute;
	right: 34px;
	bottom: 30px;
}

.number_box.graph_box .img_area{
	margin: 0px auto 0px auto;
}

.number_box.graph_box .number_area.graph_number{
	position: absolute;
    top: 37%;
    left: 0;
    right: 0;
}

}

@media screen and (max-width:430px){
	
.number_box .number_area .number_man{
	position: absolute;
	left: 33px;
	bottom: 30px;
}

.number_box .number_area .number_woman{
	position: absolute;
	right: 16px;
	bottom: 30px;
}
	
}