@charset "UTF-8";
/*************************
塗装について知っておきたい基礎知識
 *************************/

p,dl,ol,ul{
	margin:0;
	padding:0;
}

.main{
	margin-bottom:60px;	
}

.main h2 img{
	width:100%;
	height:auto;	
}

.main h2{
	margin-bottom:50px;	
}

.main nav:after{
	content:"";
	display:block;
	clear:both;
}

.main nav dl{
	float:left;
	width:30%;
	margin-right:5%;
	text-align:center;
}

.main nav dl:last-child{
	margin-right:0;	
}

.main nav dl a{
	display:block;
	padding:20px;
	border:1px solid #ccc;
}

.main nav dl a:hover{
	border:1px solid #7bac2f;
	color:#333;
}

.main nav dl dt{
	font-size:18px;
	padding-top:40px;
	margin-bottom:10px;
	letter-spacing:0.1em;
}

.main nav dl a:hover dt{
	color:#7bac2f;
}


.main nav dl .wall{
	background:url(../../../../img/page/knowledge/icon01.gif) center top no-repeat;	
}

.main nav dl .roof{
	background:url(../../../../img/page/knowledge/icon02.gif) center top no-repeat;	
}

.main nav dl .wood{
	background:url(../../../../img/page/knowledge/icon03.gif) center top no-repeat;	
}

.main nav dl a:hover .wall{
	background:url(../../../../img/page/knowledge/icon01-1.gif) center top no-repeat;	
}

.main nav dl a:hover .roof{
	background:url(../../../../img/page/knowledge/icon02-1.gif) center top no-repeat;	
}

.main nav dl a:hover .wood{
	background:url(../../../../img/page/knowledge/icon03-1.gif) center top no-repeat;	
}

.main nav dl dd span{
	display:block;
	text-align:center;
	margin-top:20px;	
}

.main nav dl a:hover dd span{
	color:#7bac2f;	
}

.body_contents{
	margin-bottom:80px;	
}

.paint{
	padding:30px;
	background:#f0efe8;
}

.paint .paint_box{
	padding:30px;
	background:#fff;
}

.paint .paint_box:first-child{
	margin-bottom:20px;
}

.paint .paint_box h3{
	text-align:center;
	font-size:22px;
	font-weight:bold;
	margin-bottom:20px;
}

.text01{
	line-height:1.5;
	margin-bottom:50px;	
}

.contents_box{
	margin-bottom:50px;	
}

.what_box img{
	margin-bottom:10px;
}

.checkpoint{
	margin-bottom:50px;
}

.type{
	padding:50px 30px 30px;
	background:#f0efe8;
}

.type .type_inner{
	margin-bottom:60px;
}

.type .type_box{
	position:relative;
	padding:30px;
	background:#fff;	
}

.type .type_box .ossm:before{
	background:url(../../../../img/page/knowledge/osusume.png)	center center no-repeat;
}

.type .type_box .otgr:before{
	background:url(../../../../img/page/knowledge/otegaru.png)	center center no-repeat;
}

.type .type_box .ank:before{
	background:url(../../../../img/page/knowledge/anka.png)	center center no-repeat;
}

.type .type_box dt{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	margin-bottom:15px;
}

.ttl_check{
	margin-bottom:50px;	
}

.illust01{
	text-align:center;
	margin-bottom:50px;
}

.check_box{
	padding-bottom:60px;
	margin-bottom:50px;
	border-bottom:1px solid #ccc;	
}

.check_box .float{
	margin-bottom:30px;	
}

.check_box .float:last-child{
	margin-bottom:0;	
}

.check_box .half dt{
	background:#9fc564;
	color:#fff;
	font-size:18px;
	text-align:center;
	padding:10px;
	margin-bottom:15px;
}

.check_box .half dd li{
	margin-bottom:10px;
	padding-left:2em;
	text-indent:-1em;
}

.check_box .half dd li:last-child{
	margin-bottom:0;	
}

.check_box .half dd li i{
	color:#9fc564;
	margin-right:1em;
}

.ossm_paint{
	padding:30px;
	background:#f7faf2;	
}

.ossm_paint h5{
	text-align:center;
	font-weight:bold;
	font-size:18px;
	color:#9fc564;
	margin-bottom:15px;
}

.lead01{
	line-height:1.8;
	font-size:16px;
	text-align:center;
	margin-bottom:45px;
}

.contents_paint{
	padding:40px 30px 30px;
	background:#f0efe8;
}

.paint_inner{
	padding:40px 30px 30px;
	margin-bottom:30px;
	background:#fff;	
}

.contents_paint .paint_inner:last-child{
	margin-bottom:0;	
}

.lead02{
	text-align:center;
	margin-bottom:45px;
}

.feature .float{
	margin-bottom:50px;
}

.feature .float dt{
	font-size:16px;
	text-align:center;
	font-weight:bold;
	color:#7bac2f;
	margin-bottom:10px;
}

.feature .float:last-child{
	margin-bottom:80px;	
}

.order{
	margin-bottom:30px;	
}

.price{
	margin-bottom:20px;
}

.price h6{
	font-size:16px;
	font-weight:bold;
	margin-bottom:15px;
}

.price table{
	width:100%;
	border-collapse:separate;
	border-spacing:0 5px;
}

.price table tr:last-children{
	margin-bottom:0;	
}


.price table th,
.price table td{
	padding:10px 15px;
}

.price table th span{
	font-weight:bold;
	font-size:16px;
}

.price table tr td:nth-child(n+1) span{
	font-weight:bold;
	font-size:16px;
}

.price table tr td:last-child span{
	font-weight:bold;
	font-size:16px;
	color:#fb7d7d;
}

.s-table{
	padding:15px;
	border:1px solid #ccc;
}

.s-table table{
	width:100%;
	margin-bottom:5px;
}

.s-table table th{
	width:55%;
}

.s-table table td{
	width:45%;
	text-align:right;
}

.table_text{
	color:#7bac2f;
	font-size:13px;	
}

.other dl{
	margin-bottom:30px;	
}

.other dl:last-child{
	margin-bottom:0;
}

.other dl dt{
	font-size:18px;
	color:#7bac2f;
	margin-bottom:10px;
}

.d-text{
	margin-bottom:30px;	
}

.order .detail h5{
	font-size:18px;
	color:#7bac2f;
	font-weight:bold;
	line-height:1.3;
	margin-bottom:25px;
}

.other .attention{
	border:1px solid #ccc;
	text-align:center;
	line-height:1.5;
	padding:20px;
}

.price_box .unit_price span{
	font-size:24px;
	font-weight:bold;
	color:#fb7d7d;	
}

.price_box .name{
	font-weight:bold;
}


@media screen and (min-width:641px){

#wall,
#roof,
#wood{
	margin-top:-75px;
	padding-top:75px;
}

.float:after{
	content:"";
	display:block;
	clear:both;
}

.float figure{
	float:left;
	width:30%;
	margin-right:5%;	
}

.float .detail{
	float:left;
	width:65%;	
}

.float .feature_detail{
	float:right;
	width:60%;	
}

.float-r figure{
	float:right;
	width:30%;
	margin-right:0;	
}

.float-r .detail{
	float:right;
	width:65%;
	margin-right:5%;
}

.float .half{
	float:left;
	width:48%;
	margin-right:4%;	
}

.float .half:last-child{
	margin-right:0;	
}

.float .tripartition{
	float:left;
	width:30%;
	margin-right:5%;	
}

.float .tripartition:last-child{
	margin-right:0;
}

.paint_box h3{
	padding-bottom:10px;
	background:url(../../../../img/page/knowledge/border.gif) center bottom no-repeat;
}

.type .type_box dt:before{
	position:absolute;
	content:"";
	width:60px;
	height:60px;
	top:-30px;
	left:0;
}

.type .type_box{
	min-height:180px;
	height:auto !important;
	height:180px;
}

.paint_inner .feature_detail ol{
	list-style:none;
	border-left:2px solid #333;
}

.paint_inner .feature_detail ol li{
	position:relative;
	padding:7px 0 7px 30px;
	margin-bottom:20px;
}

.paint_inner .feature_detail ol li:before{
	position:absolute;
	content:"";
	display:block;
	width:40px;
	height:40px;
	top:0px;
	left:-20px;
}

.paint_inner .feature_detail ol .no01:before{
	background:url(../../../../img/page/knowledge/circle1.png) center center no-repeat;	
}

.paint_inner .feature_detail ol .no02:before{
	background:url(../../../../img/page/knowledge/circle2.png) center center no-repeat;	
}

.paint_inner .feature_detail ol .no03:before{
	background:url(../../../../img/page/knowledge/circle3.png) center center no-repeat;	
}

.paint_inner .feature_detail ol .no04:before{
	background:url(../../../../img/page/knowledge/circle4.png) center center no-repeat;	
}

.price table th{
	width:40%;
	background:#f1f0ec;
}

.price table tr td:nth-child(n+1){
	width:25%;
	background:#ebf0ee;	
}

.price table tr td:last-child{
	width:35%;
	background:#f0edef;
	text-align:right;
}

.wood_detail{
	position:relative;	
}

.price_box{
	vertical-align:bottom;	
}

.price_box .name{
	float:left;
	font-size:18px;
	padding-top:8px;
	margin-right:30px;
}

.price_box .unit_price{
	float:right;	
}

.wood_detail .price_box{
	position:absolute;
	top:140px;
	left:-15px;
}


}

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


.body_contents figure{
	text-align:center;
}

.float figure{
	margin-bottom:20px;	
}

.main nav dl{
	float:left;
	width:48%;
	margin-right:4%;
	text-align:center;
}

.main nav dl:first-child,
.main nav dl:nth-child(2){
	margin-bottom:15px;	
}

.main nav dl:nth-child(2),
.main nav dl:last-child{
	margin-right:0;	
}

.main nav dl dd br{
	display:none;
}

.main nav dl dd span{
	margin-top:10px;	
}

.paint .paint_box h3{
	font-size:18px;
	line-height:1.3;	
}

.text01{
	margin-bottom:30px;	
}

.lead01{
	font-size:14px;
	line-height:1.6;
}

.what{
	width:80%;
	margin:0 auto;	
}

.what .what_box{
	margin-bottom:30px;	
}

.what .what_box:last-child{
	margin-bottom:0;	
}

.what .what_box img{
	margin-bottom:10px;
}

.what .what_box figcaption{
	text-align:left;
}

.type{
	padding:10px;	
}
.type .type_inner{
	margin-bottom:40px;
}

.type .type_box{
	margin-bottom:40px;	
}

.type .type_box:last-child{
	margin-bottom:0;	
}

.type .type_box dt:before{
	position:absolute;
	content:"";
	width:50px;
	height:50px;
	top:-25px;
	left:10px;
}

.type .type_box .ossm:before,
.type .type_box .otgr:before,
.type .type_box .ank:before{
	background-size:50px auto;
}


.check_box{
	padding-bottom:0;
	margin-bottom:30px;
}

.check_box .float{
	margin-bottom:0;	
}

.check_box .float .half{
	margin-bottom:30px;	
}

.check_box .half dt{
	font-size:16px;	
}

.ossm_paint{
	padding:20px;
}

.ossm_paint h5{
	font-size:16px;	
}

.contents_paint{
	padding:10px;	
}

.paint{
	padding:10px;
}


.paint_inner{
	padding: 20px;	
}

.lead02{
	margin-bottom:50px;	
}

.feature .float{
	margin-bottom:30px;	
}

.feature .float:last-child{
	margin-bottom:60px;	
}

.feature .float .half{
	margin-bottom:30px;
}

.feature .float .half:last-child{
	margin-bottom:;0	
}

.feature_detail ol{
	margin-left:20px;
	margin-bottom:50px;	
}

.feature_detail ol li{
	margin-bottom:20px;	
}

.feature_detail ol li:last-child{
	margin-bottom:0;	
}

.order{
	margin-bottom:50px;	
}

.price h6{
	text-align:center;	
}

.price table tr{
	display:block;
	margin-bottom:20px;
}

.price table tr:last-child{
	margin-bottom:0;
}

.price table th{
	display:block;
	width:100%;
	padding:10px;
	background:#f0efe8;
	margin-bottom:20px;
}

.price table th span{
	font-weight:bold;
	font-size:14px;
}

.price table td{
	padding:10px;
	vertical-align:bottom;	
}

.price table tr td:nth-child(n+1){
	display:block;
	padding:0;
	text-align:right;
	margin-bottom:10px;
}

.price table tr td:nth-child(n+1) span{
	font-weight:bold;
	font-size:16px;
}

.price table tr td:last-child{
	display:block;
	text-align:right;
	padding:0;
}

.price table tr td:last-child span{
	font-weight:bold;
	font-size:16px;
	color:#fb7d7d;
}

.s-table{
	margin-bottom:20px;	
}

.s-table table{
	margin-bottom:20px;	
}

.other dl dt{
	font-size:16px;	
}

.order{
	margin-bottom:0;	
}

.order .detail h5{
	font-size:16px;
	margin-bottom:20px;
}

.wood_detail ol{
	margin-bottom:30px;	
}

.price_box{
	padding:20px;
	border:1px solid #ccc;	
}

.price_box .name{
	font-weight:bold;
	font-size:16px;
}

.price_box .unit_price{
	text-align:right;
}

.price_box .unit_price span{
	font-size:20px;	
}

}