@charset "utf-8";

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

level2.css

======================================================================

	01.common elements
	02.concept
	03.outer wall / roof
	04.paints
	05.price
	06.results
	07.voice
	08.staff
	09.company
	10.contact
	11.site map


last update 09/07/10

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


/*--------------------------------------------------------------------
	01.common elements
--------------------------------------------------------------------*/

/*	1-1.html
----------------------------------------------------------------*/
html{background: #2d2d2d url(../img/bg_html.gif) repeat-x;}


/*	1-2.h2
----------------------------------------------------------------*/
#h2box{
	position: relative;
	width: 900px;
	height: 175px;
}
#h2box a img{
	z-index: 2;
	position: absolute;
	top: 20px;
	right: 1px;
}
#h2box h2 img{
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}
#h2box a:hover img{
	opacity: 0.8;
	filter: alpha(opacity=80);
}

/*	1-3.h4
----------------------------------------------------------------*/
.box h4{
	margin-top: 20px;
	margin-bottom: 5px;
	padding: 4px 0 2px 12px;
	background: #212121 url(../img/bg_h4.gif) no-repeat left center;
	border: solid 1px #424242;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 0.1em;
}
.box h4 span{
	font-size: 12px;
	color: #bebebe;
}

/*	1-4.dl dt dd
----------------------------------------------------------------*/
#contents dl{
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px;
	text-align: left;
}
#contents dt{
	border-bottom: solid 1px #212121;
	padding: 10px 5px 5px 5px;
	color: #f6b312;
	font-size: 13px;
	font-weight: bold;
}
#contents dd{padding: 10px;}

/*	1-5.contact
----------------------------------------------------------------*/
#contact{
	margin-top: 30px;
	background: url(../img/bg_contact.gif) repeat-y;
	width: 580px;
}
#container #contact h3{margin-top: 0;}
#contact p{
	text-align: left;
	padding: 10px 15px;
}
#contact div{
	position: relative;
	background: url(../img/bg_contact-info.gif) no-repeat;
	width: 580px;
	height: 100px;
}
#contact div img{
	position: absolute;
	top: 60px;
	left: 370px;
}

/*	1-6.table
----------------------------------------------------------------*/
#contents table{
	margin-top: 15px;
	border: solid 1px #424242;
	width: 580px;
}
#contents table th{
	padding: 5px 15px;
	background: #212121;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 25%;
	text-align: left;
}
#contents table td{
	padding: 5px 15px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	text-align: left;
}

/*	1-7.sidebar
----------------------------------------------------------------*/
#sidebar img.bnr{margin-top: 20px;}


/*--------------------------------------------------------------------
	02.concept
--------------------------------------------------------------------*/
#concept{
	margin-top: 15px;
	margin-bottom: 15px;
	background: url(../../concept/img/bg_concept.gif) no-repeat;
	width: 580px;
	height: 400px;
	overflow: hidden;
	text-indent: -9999px;
}
#concept dt{border-bottom: none;}
.box dl#articles dt{
	color: #ffffff;
	font-size: 13px;
	font-weight: bold;
}
.box dl#articles dt span{
	color: #f6b312;
	font-size: 13px;
	font-weight: bold;
}
.box dl#articles dd{padding: 10px 10px 10px 23px;}


/*--------------------------------------------------------------------
	03.outer wall / roof
--------------------------------------------------------------------*/
#outer_wall{
	margin-top: 15px;
	background: url(../../outer_wall/img/bg_outer_wall.gif) no-repeat;
	width: 580px;
	height: 230px;
	overflow: hidden;
	text-indent: -9999px;
}
#roof{
	margin-top: 15px;
	background: url(../../roof/img/bg_roof.gif) no-repeat;
	width: 580px;
	height: 230px;
	overflow: hidden;
	text-indent: -9999px;
}
#outer_wall dt,
#roof dt{border-bottom: none;}
.box2,
.box3{
	margin-top: 10px;
	width: 580px;
}
.box2:after,
.box3:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.box3 img{
	display: inline;
	float: left;
	border: solid 1px;
}
.box3 div{
	display: inline;
	float: left;
	margin-bottom: 10px;
	width: 190px;
}
.box3 div img{
	float: none;
	margin-top: 10px;
	margin-bottom: 0;
	border: none;
}
.box3 img.mg,
.box3 div.mg{
	margin-left: 2px;
	margin-right: 2px;
}
.box3 div p{
	padding: 10px 20px 10px 20px;
	font-size: 10px;
	text-align: left;
}
.box2 img.left{
	float: left;
	border: solid 1px;
}
.box2 img.right{
	float: right;
	border: solid 1px;
}

.message{
	margin-top: 10px;
	background: #bd1717;
	width: 580px;
}
.message p{
	padding: 3px 20px;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 0.1em;
}

.flow{
	margin-top: 15px;
	padding-bottom: 10px;
	background: url(../img/bg_flow.gif) no-repeat bottom;
	width: 580px;
	text-align: left;
}
.flow.nbg{background: none;}
.flow:after,
.flow.nbg:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.flow img.right{
	margin-top: 0;
	border: solid 1px #424242;
}
.flow div{
	float: left;
	width: 390px;
}
.flow div h4{
	margin-bottom: 5px;
	padding: 4px 0 2px 12px;
	background: #212121 url(../img/bg_h4.gif) no-repeat left center;
	border: solid 1px #424242;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 0.1em;
}
.flow div h4 span{
	color: #f6b312;
	font-size: 14px;
	font-weight: bold;
}
.flow div p{padding: 10px 5px;}


/*--------------------------------------------------------------------
	04.paints
--------------------------------------------------------------------*/
#contents .box table.paints{
	margin-top: 15px;
	border: solid 1px #424242;
	width: 580px;
}
#contents .box table.paints thead th,
#contents .box table.paints tbody th{
	padding: 5px;
	background: #212121;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 13%;
	text-align: left;
}
#contents .box table.paints thead td{
	padding: 5px;
	background: url(../img/bg_td.gif);
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 29%;
	color: #29a0c8;
	font-weight: bold;
	text-align: center;
}
#contents .box table.paints tbody td{
	padding: 5px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 29%;
	text-align: left;
}

/* gaina */
#g-intro{
	margin-top: 10px;
	background: url(../../paints/img/bg_g-intro.jpg) no-repeat;
	width: 580px;
	height: 200px;
	overflow: hidden;
	text-indent: -9999px;
}
#g-intro dt{border-bottom: none;}

/* before after */
.ba-box{
	margin-top: 15px;
	padding-top: 20px;
	padding-bottom: 20px;
	background: url(../../paints/img/bg_ba-box.gif) no-repeat center;
	width: 580px;
}
.ba-box:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.ba-box img.before{
	float: left;
	margin-left: 20px;
}
.ba-box img.after{
	float: right;
	margin-right: 20px;
}

/* effect */
#contents .box table.effect{
	margin-top: 15px;
	border: none;
	width: 580px;
}
#contents .box table.effect th{
	background: none;
	border: none;
	border-right: solid 1px #212121;
	padding: 10px;
	color: #f6b312;
	width: 15%;
	font-size: 13px;
	font-weight: bold;
}
#contents .box table.effect td{
	padding: 10px 10px 10px 20px;
	border: none;
}


/* photocatalyst */
#p-intro{
	margin-top: 15px;
	background: url(../../paints/img/bg_p-intro.jpg) no-repeat;
	width: 580px;
	height: 150px;
	overflow: hidden;
	text-indent: -9999px;
}
#p-intro dt{border-bottom: none;}


/*--------------------------------------------------------------------
	05.price
--------------------------------------------------------------------*/
#contents .box table.p-type01,
#contents .box table.p-type02,
#contents .box table.p-type03,
#contents .box table.p-type04{
	margin-top: 15px;
	border: solid 1px #424242;
	width: 580px;
	font-size: 90%;
}

/* price type01 */
#contents .box table.p-type01 thead th,
#contents .box table.p-type01 tbody th{
	padding: 3px 5px;
	background: #212121;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 15%;
	text-align: left;
}
#contents .box table.p-type01 thead td{
	padding: 3px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	background: url(../img/bg_td.gif);
	width: 17%;
	color: #29a0c8;
	text-align: left;
}
#contents .box table.p-type01 tbody td{
	padding: 3px 5px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 17%;
	text-align: right;
}


/* price type02 */
#contents .box table.p-type02 th{
	padding: 5px;
	background: #212121;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 25%;
	text-align: left;
	vertical-align: middle;
}
#contents .box table.p-type02 td{
	padding: 5px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	text-align: right;
}


/* price type03 */
#contents .box table.p-type03 thead th,
#contents .box table.p-type03 tbody th{
	padding: 3px 5px;
	background: #212121;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 15%;
	text-align: left;
}
#contents .box table.p-type03 thead td{
	padding: 3px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	background: url(../img/bg_td.gif);
	width: 16%;
	color: #29a0c8;
	text-align: left;
}
#contents .box table.p-type03 tbody td{
	padding: 3px 5px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 21%;
	text-align: right;
}

/* price type04 */
#contents .box table.p-type04 thead th,
#contents .box table.p-type04 tbody th{
	padding: 3px 5px;
	background: #212121;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 15%;
	text-align: left;
}
#contents .box table.p-type04 thead td{
	padding: 3px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	background: url(../img/bg_td.gif);
	width: 16%;
	color: #29a0c8;
	text-align: left;
}
#contents .box table.p-type04 thead td.spec{
	padding: 3px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	background: url(../img/bg_td.gif);
	width: 36%;
	color: #29a0c8;
	text-align: left;
}
#contents .box table.p-type04 tbody td{
	padding: 3px 5px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 16%;
	text-align: right;
}
#contents .box table.p-type04 tbody td.spec{
	padding: 3px 5px;
	border-right: solid 1px #424242;
	border-bottom: solid 1px #424242;
	width: 34%;
	text-align: left;
}
.total{
	background-image: url(../img/bg_td.gif);
	font-weight: bold;
	color: #f6b312;
}
.gt{
	background-image: url(../img/bg_td.gif);
	font-size: 120%;
	font-weight: bold;
	color: #bd1717;
}


/*--------------------------------------------------------------------
	06.results
--------------------------------------------------------------------*/
#results{width: 580px;}
#results:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#contents #results table{
	margin-top: 15px;
	border: solid 1px #424242;
	width: 580px;
}
#contents #results th{
	background: none;
	border: none;
	padding: 10px 0 10px 10px;
	width: 200px;
}
#contents #results td{
	padding: 10px 10px 10px 0;
	background: none;
	border: none;
}


/*--------------------------------------------------------------------
	07.voice
--------------------------------------------------------------------*/
#voice{width: 580px;}
#voice:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#contents #voice table{
	margin-top: 15px;
	border: solid 1px #424242;
	width: 580px;
}
#contents #voice th{
	background: none;
	border: none;
	padding: 10px 0 10px 10px;
	width: 200px;
}
#contents #voice td{
	padding: 10px 10px 10px 0;
	background: none;
	border: none;
}


/*--------------------------------------------------------------------
	08.staff
--------------------------------------------------------------------*/
#president{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 15px;
	background: url(../../staff/img/bg_president.gif);
	width: 580px;
}
#president img{
	margin-right: 15px;
	padding: 10px 15px 15px 15px;
	background-image: url(../../staff/img/bg_president.gif);
	float: left;
}
#president p{
	margin-left: 15px;
	margin-right: 15px;
	padding: 10px 10px 10px 5px;
	background: #131313;
	text-align: left;
}
.staff1,
.staff2,
.staff3{
	margin-top: 15px;
	width: 580px;
}
.staff1:after,
.staff2:after,
.staff3:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.staff1{background: url(../../staff/img/bg_staff1.gif) repeat-y;}
.staff2{background: url(../../staff/img/bg_staff2.gif) repeat-y;}
.staff3{background: url(../../staff/img/bg_staff3.gif) repeat-y;}
.staff1 div,
.staff2 div,
.staff3 div{
	display: inline;
	float: left;
	padding-bottom: 15px;
	padding-top: 15px;
	width: 190px;
}
.staff1 div.mg,
.staff2 div.mg,
.staff3 div.mg{
	margin-left: 5px;
	margin-right: 5px;
}

/* table */
#contents .staff1 table,
#contents .staff2 table,
#contents .staff3 table{
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 160px;
	border: solid 1px #424242;
	font-size: 90%;
}
#contents .staff1 th,
#contents .staff2 th,
#contents .staff3 th{
	padding: 2px;
	background: #131313;
	border-right: solid 1px #424242;
	border-top: solid 1px #424242;
	width: 50%;
	text-align: center;
}
#contents .staff1 td,
#contents .staff2 td,
#contents .staff3 td{
	padding: 2px;
	background: #212121;
	border-right: solid 1px #424242;
	border-top: solid 1px #424242;
	width: 50%;
	text-align: center;
}
#contents .staff1 th.comment,
#contents .staff2 th.comment,
#contents .staff3 th.comment,
#contents .staff1 td.comment,
#contents .staff2 td.comment,
#contents .staff3 td.comment{
	padding: 2px 5px;
	text-align: left;
	width: 100%;
}


/*--------------------------------------------------------------------
	09.company
--------------------------------------------------------------------*/
#contents table td ul{margin-left: 5px;}
#contents table td ul li{
	padding: 2px 0 2px 12px;
	background: url(../../company/img/bg_td-li.gif) no-repeat left top;
}
#contents table td ul#business{margin-left: 0;}
#contents table td ul#business li{
	padding-left: 0;
	background: none;
	color: #f6b312;
	font-weight: bold;
}
#contents table td ul#business li ul li{
	padding: 2px 0 2px 12px;
	background: url(../../company/img/bg_td-li.gif) no-repeat left top;
	color: #bebebe;
	font-weight: normal;
}
#contents table td dl{
	margin: 0;
	padding: 0;
}
#contents table td dl dt{
	margin: 0;
	padding: 2px 0 0 0;
	border-bottom: none;
	color: #f6b312;
	font-weight: bold;
}
#contents table td dl dd{
	margin: 0;
	padding: 0;
}

#access{
	margin-top: 15px;
	width: 580px;
	height: 370px;
	text-align: left;
}


/*--------------------------------------------------------------------
	10.contact
--------------------------------------------------------------------*/
#c-box{
	position: relative;
	margin-top: 15px;
	background: url(../../contact/img/bg_c-box.gif) no-repeat;
	width: 580px;
	height: 100px;
	overflow: hidden;
}
#c-box p{text-indent: -9999px;}
#c-box img{
	position: absolute;
	top: 43px;
	left: 352px;
}
.w19{
	width: 19px;
}
#contents table.nb,
#contents table.nb td{border: none;}
.submit_box{
	margin-top: 15px;
	padding-left: 15px;
	width: 570px;
	text-align: left;
}
.submit{
	text-align: left;
}


/*--------------------------------------------------------------------
	11.site map
--------------------------------------------------------------------*/
#contents #site{width: 580px;}
#contents #site ul{
	margin: 10px 15px 0 15px;
}
#contents #site ul li{margin: 0; border: solid 1px #131313;}
#contents #site ul li a{
	display: block;
	margin: 0;
	margin: 8px 0 0 0;
	padding: 4px 0 2px 12px;
	background: #212121 url(../img/bg_h4.gif) no-repeat left center;
	border: solid 1px #424242;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 0.1em;
	text-align: left;
}
#contents #site ul li ul{margin: 0;}
#contents #site ul li ul li{border-bottom: solid 1px #212121;}
#contents #site ul li ul li.nb{border-bottom: solid 1px #131313;}
#contents #site ul li ul li a,
#contents #site ul li ul li.nb a{
	background: url(../img/bg_h4.gif) no-repeat left center;
	margin: 5px 0 0 15px;
	padding: 2px 0 2px 15px;
	border: none;
	font-size: 12px;
}
#contents #site a:link,
#contents #site a:visited,
#contents #site a:hover,
#contents #site a:active{
	color: #ffffff;
	text-decoration: none;
}
#contents #site a:hover{color: #f6b312;}