@charset "utf-8";
/* ===================================================================

 file name  :security.css
 style info :ホームセキュリティ

=================================================================== */

/* =============================

	overwrite

=============================== */



/* =================================== */
#main img{
	width:100%;
	height:auto;
}


#main .lead{
	position:relative;
	margin-bottom:100px;
}
#main .lead h2{
	font-size:200%;
	margin-bottom:0.7em;
	line-height:1.2;
}
#main .lead .txt{
	font-size:117%;
	line-height:1.8;
}
#main .lead .img{
	position:absolute;
	top:-12px;
	right:155px;
	width:127px;
}

#main .system{
	position:relative;
	margin-bottom:70px;
}
#main .system ul{
}
#main .system ul li{
	width:497px;
	margin-bottom:32px;
}
#main .system ul li:nth-of-type(2){
	width:368px;
	position:absolute;
	top:-42px;
	left:560px;
}
#main .system .cap{
	font-size:109%;
	line-height:1.8;
}


#main .detail{
	overflow:hidden;
	height:auto;
}
#main .detail .plan{
	width:318px;
	float:left;
}
#main .detail .plan li{
	margin-bottom:6px;
}



#main .detail .list{
	width:682px;
	float:right;
}
#main .detail .list li{
	width:170px;
	float:left;
	margin:30px 0 0 44px;
}
#main .detail .list li:nth-of-type(4){
	clear:both;
}
#main .detail .list li:nth-of-type(6){
	margin-left:7px;
	width:207px;
}
#main .detail .list li .img{
	width:112px;
	margin:0 auto 5px;
}
#main .detail .list li:nth-of-type(1) .img{
	width:132px;
}
#main .detail .list li:nth-of-type(6) .img{
	width:100%;
}
#main .detail .list li h3{
	border-bottom:1px solid #bdbdbd;
	position:relative;
	font-size:109%;
	padding:0.6em 0 0.5em;
	margin-bottom:0.3em;
	line-height:1.3;
}
#main .detail .list li h3:before{
	content:'';
	display:inline-block;
	background:url(../images/security/icon.png) no-repeat 0 0;
	position:absolute;
	top:50%;
	left:0;
}
#main .detail .list li .txt{
}
#main .detail .list li.list01 h3{ padding-left:65px;}
#main .detail .list li.list01 h3:before{ 
	background-position:0 0;
	width:56px;
	height:17px;
	margin-top:-8px;
}
#main .detail .list li.list02 h3{ padding-left:30px;}
#main .detail .list li.list02 h3:before{ 
	background-position:0 -17px;
	width:22px;
	height:23px;
	margin-top:-11px;
}
#main .detail .list li.list03 h3{ padding-left:67px;}
#main .detail .list li.list03 h3:before{ 
	background-position:0 -40px;
	width:55px;
	height:28px;
	margin-top:-15px;
}
#main .detail .list li.list04 h3{ padding-left:45px;}
#main .detail .list li.list04 h3:before{ 
	background-position:0 -70px;
	width:43px;
	height:22px;
	margin-top:-11px;
}
#main .detail .list li.list05 h3{ padding:1.2em 0 1.1em 58px;}
#main .detail .list li.list05 h3:before{ 
	background-position:0 -99px;
	width:51px;
	height:20px;
	margin-top:-10px;
}


/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 768px){

	/* =============================
	
		overwrite
	
	=============================== */
	
	
	
	/* =================================== */

	
	#main .lead{
		margin-bottom:3%;
	}
	#main .lead h2{
		font-size:117%;
		margin-bottom:0.8em;
	}
	#main .lead .txt{
		font-size:11px;
	}
	#main .lead .img{
		position:static;
		width:27.58%;
		margin:1.5em auto;
	}

	#main .system{
		margin-bottom:3%;
	}
	#main .system ul li{
		width:100%;
		margin-bottom:2.5%;
	}
	#main .system ul li:nth-of-type(2){
		width:85.5%;
		position:static;
		margin:0 auto 2.5%;
	}
	#main .system .cap{
		font-size:10px;
		line-height:1.5;
	}


	#main .detail{
	}
	#main .detail .plan{
		width:73.8%;
		float:none;
		margin:0 auto;
	}



	#main .detail .list{
		width:100%;
		float:none;
	}
	#main .detail .list li{
		width:46.55%;
		margin:1.5em 0 0 0;
	}
	#main .detail .list li:nth-of-type(odd){
		clear:both;
	}
	#main .detail .list li:nth-of-type(even){
		float:right;
	}
	#main .detail .list li:nth-of-type(4){
		clear:none;
	}
	#main .detail .list li:nth-of-type(6){
		margin-left:0;
		width:51%;
	}
	#main .detail .list li .img{
		width:65%;
	}
	#main .detail .list li:nth-of-type(1) .img{
		width:80%;
	}
	#main .detail .list li h3{
		font-size:92%;
	}
	#main .detail .list li h3:before{
		background-size:200px;
		background-position:0 0;
	}
	#main .detail .list li.list01 h3{ padding-left:50px;}
	#main .detail .list li.list01 h3:before{ 
		background-position:-33px 0;
		width:45px;
		height:14px;
		margin-top:-7px;
	}
	#main .detail .list li.list02 h3{ padding-left:23px;}
	#main .detail .list li.list02 h3:before{ 
		background-position:-33px -15px;
		width:18px;
		height:19px;
		margin-top:-10px;
	}
	#main .detail .list li.list03 h3{ padding:1.2em 0 1.2em 50px;}
	#main .detail .list li.list03 h3:before{ 
		background-position:-33px -34px;
		width:44px;
		height:23px;
		margin-top:-14px;
	}
	#main .detail .list li.list04 h3{ padding-left:38px;}
	#main .detail .list li.list04 h3:before{ 
		background-position:-33px -59px;
		width:35px;
		height:18px;
		margin-top:-10px;
	}
	#main .detail .list li.list05 h3{ padding:0.6em 0 0.5em 44px;}
	#main .detail .list li.list05 h3:before{ 
		background-position:-33px -82px;
		width:41px;
		height:16px;
		margin-top:-8px;
	}
	#main .detail .list li .txt{
		font-size:10px;
	}
	






}