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

 file name  :jubako > ability.css
 style info :ジュウバコ住宅性能ページ

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

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

	overwrite

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



/* =================================== */
#main .img-list li{
	float: left;
}
#main .img-list li:nth-child(1){ width: 32.9090909090%;}
#main .img-list li:nth-child(2){ width: 30.3636363636%; margin: 3.8% 2.72727272727% 0 2.27272727273%;}
#main .img-list li:nth-child(3){ width: 31.4545454545%;}
#main .img-list li img{
	width: 100%;
	height: auto;
}

#main h3{
	margin: 0 0 36px;
	padding: 0 0 12px;
	border-bottom: solid 1px #f19aaa;
}
#main .img-list02{
	padding: 0 0 0 2%;
}
#main .img-list02 li{
	float: left;
	width: 50.1818181818%;
}
#main .img-list02 li + li{
	width: 43.4545454545%;
	margin: 0 0 0 -0.9%;
}
#main .img-list02 li img{
	width: 100%;
	height: auto;
}
#main .point{
	margin: 24px 0 20px;
	padding: 10px 0;
	background: #f19aaa;
	text-align: center;
}


/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 640px){
	/* =============================
	
		overwrite
	
	=============================== */
	
	
	/* =================================== */
	#main .img-list{
		padding: 5% 0 0;
	}
	#main .img-list li{
		float: none;
		width: 100% !important;
		margin: 0 0 10% !important;
	}
	#main .img-list li img{
		width: 100%;
		height: auto;
	}
	
	#main h3{
		margin: 0 0 20px;
		padding: 0 10px 10px;
	}
	#main .img-list02{
		padding: 0 15px;
	}
	#main .img-list02 li{
		float: none;
		width: 100%;
	}
	#main .img-list02 li + li{
		width: 100%;
		margin: 10% 0 0;
	}
	#main .point{
		padding: 8px 20px;
	}
	#main .note{
		font-size: 10px;
	}
	
	
}