@import "/css/common.css";

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

/* knowledge css  (class=knowledge)*/

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

/* reset */
.knowledge *{margin:0;padding:0;}
#contents {
	margin-bottom:20px;
	padding:0;
}

/* タイトル */
.knowledge h1{
	margin-bottom:0.8em;
	padding:0;
	text-align:center;
}

/*-------------------------------------------------------*/
/* guide-menu (共通サブメニュー)*/
/*-------------------------------------------------------*/
#knowledge-menu{
	width:630px;
	margin:0 auto 1.5em;
	padding:0.5em 0 0;
	background:#e3f4fd;
	border:#a6d0e7 1px solid;
}

#knowledge-menu ul{
	padding-left:25px;
	list-style:none;
}
/* clear hack */
#knowledge-menu ul{zoom:1;}
#knowledge-menu ul:after{content:" ";clear:both;height:0;display:block;visibility:hidden;}


#knowledge-menu li{
	float:left;
	padding:0 2em 0.5em 0;
}

#knowledge-menu a{
	padding-left:0.8em;
	background:url('../image/knowledge_submenu_arw.gif') no-repeat 0 center;
}

/*-------------------------------------------------------*/
/* explanation (説明枠)*/
/*-------------------------------------------------------*/
.knowledge .explanation{
	width:600px;
	margin:0 auto 8px;
	padding:12px 16px 12px 12px;
	background:url('../image/back_explanation.gif') repeat 0 0;
	border:#bfbfbf 1px solid;
}
/* clear hack */
.knowledge .explanation{zoom:1;}
.knowledge .explanation:after{content:" ";clear:both;height:0;display:block;visibility:hidden;}

.knowledge .explanation dl{
	width:590px;
}

.knowledge .explanation dl.left{
	float:left;
	width:375px;
}

.knowledge .explanation dl.left-l{
	float:left;
	width:275px;
}

.knowledge .explanation dt{
	margin-bottom:8px;
}

.knowledge .explanation dd{
	padding-left:8px;
}

.knowledge .explanation dd table{
	width:565px;
}

.knowledge .explanation dd th{
	width:80px;
	padding:3px;
	background:#ddd;
	color:#666;
	text-align:right;
	vertical-align:top;
}

.knowledge .explanation dd td{
	width:505px;
	padding:3px;
	background:#f3f3f3;
	text-align:left;
}

.knowledge .explanation .right{
	float:right;
}

/*-------------------------------------------------------*/
/* comparison (比較)*/
/*-------------------------------------------------------*/
.knowledge .mark-intro{
	width:628px;
	margin:0 auto 5px;
	text-align:right;
}

.knowledge table#comparison{
	width:628px;
	margin:0 auto;
}

.knowledge table#comparison,
.knowledge table#comparison th,
.knowledge table#comparison td{
	border:#999 1px solid;
	border-collapse:collapse;
}

.knowledge table#comparison th,
.knowledge table#comparison td{
	padding:10px 5px;
	vertical-align:top;
}

.knowledge table#comparison th{
	background:#f5f5f5;
}

.knowledge table#comparison th span{
	font-size:0.65em;
}

.knowledge table#comparison th.purpose{
	width:120px;
	background:#eee;
	text-align:left;
	border-left:#999 3px solid;
	color:#444;
}

.knowledge table#comparison th.arumi{
	width:235px;
	background:#3b93c5 url('../image/back_hikaku_arumi.gif') repeat-x 0 0;
	color:#fff;
	font-size:1.5em;
}

.knowledge table#comparison th.sten{
	width:235px;
	background:#91b52c url('../image/back_hikaku_sten.gif') repeat-x 0 0;
	color:#fff;
	font-size:1.5em;
}

.knowledge table#comparison td.good{
	background:url('../image/mark_good.gif') no-repeat;
}

.knowledge table#comparison td.bad{
	background:url('../image/mark_bad.gif') no-repeat;
}

.knowledge table#comparison td.even{
	background:url('../image/mark_even.gif') no-repeat;
}

.knowledge table#comparison td.good,
.knowledge table#comparison td.bad,
.knowledge table#comparison td.even{
	padding-left:32px;
	background-position:8px 10px;
}

/*-------------------------------------------------------*/
/* kakou-area (板曲げ加工各種)*/
/*-------------------------------------------------------*/
.knowledge .kakou-area{
	width:632px;
	margin:0 auto 40px;
	*margin:0 auto 20px;
}

.knowledge .kakou-area h2{
	margin-bottom:8px;
}

.knowledge .kakou-area div{
	width:616px;
	margin:0 auto;
}

/* clear hack */
.knowledge .kakou-area div{zoom:1;}
.knowledge .kakou-area div:after{content:" ";clear:both;height:0;display:block;visibility:hidden;}

.knowledge .kakou-area div img{
	float:right;
	margin-left:2em;
}

.knowledge .kakou-area div p{
	margin-bottom:1.2em;
}

/*-------------------------------------------------------*/
/* hyomen-area (表面処理について)*/
/*-------------------------------------------------------*/
.knowledge #yousetsu-area{
	width:632px;
	margin:0 auto 40px;
}

.knowledge #yousetsu-area .read{
	width:616px;
	margin:0 auto 15px;
}

.knowledge #yousetsu-area .yousetsu{
	margin:0 10px 20px 0;
}
/* clear hack */
.knowledge #yousetsu-area .yousetsu{zoom:1;}
.knowledge #yousetsu-area .yousetsu:after{content:" ";clear:both;height:0;display:block;visibility:hidden;}

.knowledge #yousetsu-area .yousetsu .left{
	float:left;
	width:410px;
}

.knowledge #yousetsu-area .yousetsu .left h2{
	margin-bottom:10px;
}

.knowledge #yousetsu-area .yousetsu .left p{
	margin-left:5px;
}

.knowledge #yousetsu-area .yousetsu .right{
	float:right;
}

/*-------------------------------------------------------*/
/* hyomen-area (表面処理について)*/
/*-------------------------------------------------------*/
.knowledge #hyomen-area{
	width:632px;
	margin:0 auto 40px;
}

.knowledge #hyomen-area h2{
	margin-bottom:8px;
}

.knowledge #hyomen-area .read{
	width:616px;
	margin:0 auto 15px;
}

.knowledge #hyomen-area #tousha{
	width:596px;
	margin:0 auto 30px;
	padding:10px;
	background:url('../image/back_explanation.gif') repeat 0 0;
	border:#bfbfbf 1px solid;
}

.knowledge #hyomen-area #tousha img{
	margin-bottom:8px;
}

.knowledge #hyomen-area #tousha p{
	margin-left:5px;
}


/*-------------------------------------------------------*/
/* case-area (曲げ加工例)*/
/*-------------------------------------------------------*/

p.read{
	width:600px;
	margin:0 auto 2.2em;
}

.case-area{
	width:630px;
	margin:0 auto;
	padding-top:0.5em;
	background:url('../image/dotline.gif') repeat-y 50% 0;
}

/* clear hack */
.case-area{zoom:1;}
.case-area:after{content:" ";clear:both;height:0;display:block;visibility:hidden;}

.case-area h2{
	margin-bottom:0.3em;
}

.case-area .left{
	float:left;
	width:290px;
}

.case-area .right{
	float:right;
	width:290px;
}

.case-area dl{
	margin-bottom:2em;
}

.case-area dt{
	margin-bottom:8px;
}

.case-area dd{
	margin-left:5px;
	padding-left:10px;
	background:url('../image/eyecatch.gif') repeat-y 0 0;
}