@charset "utf-8";
/* CSS Document */
#areHead{
	height:472px;
	background:url(/products/infra-total/img/area/area_head.png) no-repeat left top;
	position:relative;
	z-index:1;
}
#button{
	background:url(/products/infra-total/img/area/button.png) no-repeat left top;
	width:450px;
	height:85px;
	position:absolute;
	z-index:10;
	bottom:40px;
	left:40px;
}
#button:hover{
	background:url(/products/infra-total/img/area/button_on.png) no-repeat left top;
}
#jisseki{
	height:389px;
	background:url(/products/infra-total/img/area/jisseki_01.png) no-repeat left top;
}
#point{
	height:433px;
	background:url(/products/infra-total/img/area/point_01.png) no-repeat left top;
}
#merit h2, #disaster h2, #security h2{
	line-height: 0;
}
#merit ol, #disaster ol, #security ol{
	height:554px;
	background:url(/products/infra-total/img/area/merit_bg.png) no-repeat left top;
	padding:60px 0 0 100px;
	font-size:16px;
}
#merit ol li, #disaster ol li, #security ol li{
	padding:100px 0 50px 110px;
}
#merit ol li#merit_1{
	background:url(/products/infra-total/img/area/merit_01.png) no-repeat left top;
	padding-right: 100px;
	box-sizing: border-box;
}
#merit ol li#merit_2{
	background:url(/products/infra-total/img/area/merit_02.png) no-repeat left top;
	padding-right: 100px;
	box-sizing: border-box;
}
#disaster ol li#disaster_1{
	background:url(/products/infra-total/img/area/disaster_01.png) no-repeat left top;
	padding-right: 100px;
	box-sizing: border-box;
}
#disaster ol li#disaster_2{
	background:url(/products/infra-total/img/area/disaster_02.png) no-repeat left top;
	padding-right: 100px;
	box-sizing: border-box;
}
#security ol li#security_1{
	background:url(/products/infra-total/img/area/security_01.png) no-repeat left top;
	padding-right: 100px;
	box-sizing: border-box;
}
#security ol li#security_2{
	background:url(/products/infra-total/img/area/security_02.png) no-repeat left top;
	padding-right: 100px;
	box-sizing: border-box;
}

#merit02{
	background:url(/products/infra-total/img/area/check_bg.png) left top;
}
#disaster02{
	background:url(/products/infra-total/img/area/check_bg.png) left top;
	padding-bottom:20px;
}
#security02{
	background:url(/products/infra-total/img/area/check_bg.png) left top;
}
#merit02 h3, #disaster02 h3, #security02 h3{
	padding:10px;
}
.areaR{
	margin:20px 40px 0 0;
	margin-top:20px;
	float:right;
	width:400px;
}
.areaR p{
	font-size:17px;
	margin-bottom:20px;
}
.area_small{
	font-size:12px !important;
}
.areaR2{
	margin:0 50px 0 0;
	padding-top:60px;
	margin-top:20px;
	float:right;
	width:330px;
}
.areaR2 p{
	font-size:15px;
	margin-bottom:20px;
}
#security02 p{
	margin:20px 40px;
	text-align:center;
}
#security02 ul{
	width:850px;
	margin:0 auto;
}
#security02 ul li{
	float:left;
	text-align:center;
	margin:20px;
}
.area-inquiry{
	width:900px;
	height:188px;
	background:url(/products/infra-total/img/area/inquiry_bg.png) no-repeat left top;
	clear:both;
	margin:30px auto;
}
.area-inquiry dl{
	float:left;
	padding:50px 10px 0 20px;
}
.area-inquiry dl dt{
	font-size:16px;
	font-weight:bold;
}

/* SP */
@media only screen and (max-width: 767px) {
#areHead{
	height:150px;
	background-size: 100%;
}
#button{
	width: 50%;
	height: 40px;
	bottom: 8px;
	left:40px;
	background-size: 100%;

}
#jisseki{
	height:140px;
	background-size: 100%;
}
#point{
	height:145px;
	background-size: 100%;
}

#merit h2 img, #disaster h2 img, #security h2 img {
	width: 100%;
}

#merit ol, #disaster ol, #security ol{
	height: auto;
	background:url('');
	width: 100%;
	padding: 30px;
	box-sizing: border-box;
}
#merit ol li, #disaster ol li, #security ol li{
	padding: 40px 0 20px 0;
	font-size: 12px;
}
#merit ol li#merit_1{
	padding-right: 0;
	background-size: 100%;
}
#merit ol li#merit_2{
	padding-right: 0;
	background-size: 100%;
}
#disaster ol li#disaster_1{
	padding-right: 0;
	background-size: 100%;
}
#disaster ol li#disaster_2{
	padding-right: 0;
	background-size: 100%;
}
#security ol li#security_1{
	padding-right: 0;
	background-size: 100%;
}
#security ol li#security_2{
	background-size: 100%;
	padding-right: 0;
}

#merit02{
	background-size: 100%;
}

#merit02 h3 img, #disaster02 h3 img ,#security02 h3 img {
	width: 100%;
}

#disaster02{
	background-size: 100%;
}
#security02{
	background-size: 100%;
}

.areaR {
	margin: 0;
	float: none;
	width: 100%;
	text-align: center;
}

.areaR img {
	width:90%;
}
.areaR p{
	width: 90%;
	margin: 0 auto;
	margin-bottom:10px;
	text-align: left !important;
	font-size: 16px;
}
.areaR2{
	width: 90%;
	margin: 0 auto;
	margin-top:10px;
	padding: 0;
	float: none;
}
.areaR2 p{
	margin-bottom: 0;
}
#security02 ul{
	width:100%;
}
#security02 ul li{
	float: none;
}
#security02 ul li img {
	width: 90%;
}

.area-inquiry{
	display: none;
}
	
}