@charset "utf-8";


/*----------------------------------------
基本
-------------------------------------------*/
* {
    margin:0;
	padding:0;
	}
	
html{
	background-color:#f3f3f3;
	}

body {
    color:#555;
    font-size:14px;
	letter-spacing:0.05em;
	font-family: Osaka,"ヒラギノ角ゴ StdN","MS PGothic",Sans-Serif;
	}
body#home{
	background:url(../images/back_home.jpg) repeat-x #FFF;
	z-index:0;}
body#product,body#howtouse,body#examples,body#inquire,body#privacy{
	background:url(../images/back_contents.jpg) repeat-x #FFF center top;}

	
a {text-decoration: none; outline:0;}
a:link {color: #3ea2db; outline:0;}
a:visited {color: #3ea2db; outline:0;}
a:active {color: #3ea2db; outline:0;}
/*a:active {color: #007aaf; outline:0;}*/
a:hover {
	color: #FF9C00;
	text-decoration:underline;
	outline:0;
}

br{letter-spacing:0;}

a img{border:none;}

* html img, * html div, * html input,* html p,* html h1,* html h2,* html h3,* html h4,* html span,* html li{
	behavior:url(/iepngfix.htc);
}


#container{
	width:950px;
	margin:0 auto 0 auto;
	text-align:left;
	}
/*----------------------------------------
Common
-------------------------------------------*/	
body#product h2,body#howtouse h2,body#examples h2,body#inquire h2,body#privacy h2{
	height:72px;
	text-indent:-9999px;}

body#product #main,body#howtouse #main,body#examples #main,body#inquire #main{
	padding:0;}

body #main .bnr{
	clear:both;
	padding:10px 0 30px 0;
	text-align:center;}
/*----------------------------------------
Common Parts
-------------------------------------------*/
img.right{
	float:right;
	margin:0 0 10px 10px;}
img.left{
	float:left;
	margin:0 10px 10px 0;}
#main p{
	line-height:1.8;}
p.caution{
	font-size:80%;
	margin:0.5em 0 0 0;
	color:#666666;}
span.caution{
	font-size:80%;
	margin:0 0 0 0.5em;
	color:#666666;}
span.small{
	font-size:80%;}
	
.big{
	padding:2px 0 2px 18px;
	background:url(../images/icon_big.gif) no-repeat center left;}
.pdf{
	padding:2px 0 2px 18px;
	background:url(../images/icon_pdf.gif) no-repeat center left;}

	
a[target="_blank"] {
	padding-right: 15px;
	margin-right:2px;
	background: transparent url(../images/icn_external.gif) no-repeat center right;
	}
a[href^="mailto:"] {
	padding-left: 20px;
	background: transparent url(../images/icn_email.gif) no-repeat center left;
	}
	
/*----------------------------------------
Header
-------------------------------------------*/
#header h1{
	text-indent:-9999px;
	background:url(../images/logo_cbl.png) no-repeat;
	_background:url(../images/logo_cbl.gif) no-repeat;
	width:154px;
	height:62px;
	position:absolute;
	top:25px;
	left:0;
	}
#header h1 a{
	display:block;
	width:154px;
	height:62px;
	}
#header h1 a:hover{
	background:url(../images/logo_cbl-on.png) no-repeat;
	_background:url(../images/logo_cbl-on.gif) no-repeat;}
#header{
	height:97px;
	position:relative;}
#header ul#nav{
	position:absolute;
	top20px;
	left:180px;
	bottom: 0px;
}
#header ul#nav li{
	display:block;
	float:left;
	text-indent:-9999px;
	width:125px;
	height:58px;
	margin-right:8px;
	}
#header ul#nav li a{
	display:block;
	width:125px;
	height:58px;}

	
#header ul#nav li#nav_product{
	background:url(../images/nav_product.jpg) no-repeat;}
#header ul#nav li#nav_howtouse{
	background:url(../images/nav_howtouse.jpg) no-repeat;}
#header ul#nav li#nav_examples{
	background:url(../images/nav_examples.jpg) no-repeat;}
#header ul#nav li#nav_inquire{
	background:url(../images/nav_inquire.jpg) no-repeat;}

#header ul#nav li#nav_product a:hover,
#header ul#nav li#nav_product.select{
	background:url(../images/nav_product-on.jpg) no-repeat;}
#header ul#nav li#nav_howtouse a:hover,
#header ul#nav li#nav_howtouse.select{
	background:url(../images/nav_howtouse-on.jpg) no-repeat;}
#header ul#nav li#nav_examples a:hover,
#header ul#nav li#nav_examples.select{
	background:url(../images/nav_examples-on.jpg) no-repeat;}
#header ul#nav li#nav_inquire a:hover,
#header ul#nav li#nav_inquire.select{
	background:url(../images/nav_inquire-on.jpg) no-repeat;}



#header #head_telnumber{
	text-indent:-9999px;
	background:url(../images/head_telnumber.png) no-repeat;
	position:absolute;
	top:0;
	right:0;
	width:222px;
	height:80px;
	}
	

	
/*----------------------------------------
Home
-------------------------------------------*/
#home #main{
	}

#home #main h2{
	text-indent:-9999px;
	background:url(../images/home_main.jpg) no-repeat;
	height:322px;}
	

#home #home_contents{
	background:url(../images/home_shadow.png) no-repeat left bottom;
	z-index:10;
	min-height:240px;
	}
	
#home #home_contents .left{
	float:left;
	width:375px;
	padding:30px 0 20px 30px;
	}
#home #home_contents .right{
	float:left;
	width:525px;
	padding:40px 0px 30px 10px;
	}
#home #home_contents .left h3{
	text-indent:-9999px;
	background:url(../images/home_h3_catch.png) no-repeat;
	height:51px;
	margin-bottom:10px;
	}
#home #home_contents .right h3{
	text-indent:-9999px;
	background:url(../images/home_h3_feature.gif) no-repeat;
	height:36px;
	}
	
#home #home_contents .left p{
	font-size:15px;
	line-height:1.8;
	margin:0 0 0 35px;
	}
#home #home_contents .right ul{
	list-style:none;
	margin:0 15px 0 5px;
	}
#home #home_contents .right ul li{
	padding-left:45px;
	font-size:15px;
	line-height:39px;
	height:39px;}
#home #home_contents .right ul li img{
	vertical-align:top;
	*vertical-align:middle;
	margin-left:10px;}
#home #home_contents .right ul li.ftr1{
	background:url(../images/home_ftr1.gif) no-repeat center left;}
#home #home_contents .right ul li.ftr2{
	background:url(../images/home_ftr2.gif) no-repeat center left;}
#home #home_contents .right ul li.ftr3{
	background:url(../images/home_ftr3.gif) no-repeat center left;}
	
/*----------------------------------------
Product
-------------------------------------------*/
body#product h2{
	background:url(../images/h2_product.jpg) no-repeat;}

body#product h3.ftr,
body#product h3.intro{
	text-indent:-9999px;
	height:29px;
	border-left:solid 6px #ff9c00;
	margin:35px 0;}
body#product h3.ftr{
	background:url(../images/pro_h3_ftr.gif) no-repeat 10px 0;}
body#product h3.intro{
	background:url(../images/pro_h3_intro.gif) no-repeat 10px 0;}
	
body#product h4{
	margin:25px 0;}

body#product .box{
	margin-bottom:30px;}
	
body#product .box .intro_left{
	float:left;
	width:475px;}
body#product .box .intro_right{
	float:left;
	width:455px;
	padding-left:20px;}
body#product .box .intro_left{
	float:left;
	width:405px;
	padding-left:70px;}	


body#product .box ul.ftr{
	margin:0 0 0 30px;
	line-height:1.6;}
body#product .box ul.ftr li{
	margin-bottom:5px;}
body#product .box ul.intro{
	margin:0 0 0 20px;
	}
	
body#product .box .intro_left p{
	margin:10px 0;
	line-height:1.5;}
body#product .box .intro_left img,
body#product .box .intro_right img{
	padding:3px;
	border:solid 1px #CCC;}

body#product .box .intro_right ul.intro{
	margin:10px 20px;
	line-height:1.5;}
body#product .box .intro_right ul.intro ul{
	margin:5px 20px;
	line-height:1.5;}
	
	
	
/*----------------------------------------
Howtouse
-------------------------------------------*/
body#howtouse h2{
	background:url(../images/h2_howtouse.jpg) no-repeat;}

body#howtouse .box.step{
	margin:40px 0 50px 0;}
body#howtouse .box.step p{
	text-align:center;
	margin:15px 0;
}
body#howtouse .box.step p.image img{
	padding:3px;
	border:solid 1px #CCC;
	margin:0 5px;
	}
	
body#howtouse .box.case{
	clear:both;
	margin:10px 80px 0 80px;
	padding-top:20px;
	border-top:dotted 1px #CCC;}
body#howtouse .box.case img{
	padding:3px;
	border:solid 1px #CCC;
}
body#howtouse .box.case h3{
	font-size:18px;
	color: #4890B1;
	margin-bottom: 10px;
}	


/*----------------------------------------
Examples
-------------------------------------------*/
body#examples h2{
	background:url(../images/h2_examples.jpg) no-repeat;}
	
body#examples #main h3{
	font-size:18px;
	margin:1.5em 0 1em 0;
	color: #006290;
	border-top:dotted 1px #a1c5d6;
	border-bottom:dotted 1px #a1c5d6;
	padding:10px;
	clear:both;}
body#examples #main h3 span{
	font-size:12px;
	background-color:#0D3046;
	color:#FFF;
	margin-left:1em;
	padding:3px 10px;
	*padding:5px 20px 3px 10px;
	_padding:5px 20px 3px 10px;
	line-height:1;
}

body#examples #main .box{
	clear:both;
	padding-bottom:20px;
	margin-bottom:20px;
	/*border-bottom:dotted 1px #CCC;*/}

body#examples #main .box .inner{
	float:left;
	margin:0 20px;
	_margin:0 16px;
	}
body#examples #main .box .inner img{
	padding:3px;
	border:solid 1px #CCC;
	margin-bottom:10px;}
body#examples #main .box .inner p{
	line-height:1.5;}

body#examples #main .box .inner p strong{
	color:#FF9C00;
	font-size:15px;
}

	
	
/*----------------------------------------
inquire
-------------------------------------------*/
body#inquire h2{
	background:url(../images/h2_inquire.jpg) no-repeat;}

body#inquire #main p.lead{
	margin:15px 0;}
	
body#inquire #main h3{
	font-size:18px;
	margin:1.5em 0 1em 0;
	color: #006290;
	border-top:dotted 1px #a1c5d6;
	border-bottom:dotted 1px #a1c5d6;
	padding:10px;
	clear:both;
}

body#inquire #main ul.tel{
	margin:0 40px;
	}
body#inquire #main ul.tel li{
	margin-bottom:10px;
	line-height:1;}
body#inquire #main ul.tel li strong{
	font-size:18px;
	color:#FF9C00;
}

body#inquire #main label{
	display:block;
	font-weight:bold;
	width:220px;
	float:left;
	clear:both;
	margin:5px 0 5px 30px;
	line-height:2;
}
body#inquire #main label em{
	font-style:normal;
	color:#990000;
	}
body#inquire #main label span{
	font-weight:normal;
	font-size:10px;
	margin:0 0.5em;
	}
	
body#inquire #main #web_form{
	margin:20px;
	padding:20px 0;
	border:solid 1px #DDD;
	background:url(../images/back_form.jpg) repeat-y;}

body#inquire #main form p{
	float:left;
	width:600px;
	margin:5px 0;}

body#inquire #main input,
body#inquire #main textarea{
	font-size:14px;
	padding:4px 2px;
	border:solid 1px #CCC;
	}
body#inquire #main div.btn{
	clear:both;
	text-align:center;
	padding:20px 0 0 0;}
body#inquire #main div.btn input{
	padding:5px 50px;
	border:solid 2px #CCC;
	background-color:#FFA00A;
	color:#FFF;
	font-size:16px;
}
	
	
body#inquire #main p.thanks{
	text-align:center;
	font-weight:bold;
	line-height:1.8;
	font-size:15px;
	color:#990000;
	}
body#inquire #main p.thanks span{
	font-size:18px;
	margin-bottom:0.8em;
	display:block;
	}
body#inquire #main.thanks p.link{
	text-align:center;
	margin-top:20px;
	}	
body#inquire #main.thanks{
	margin:100px 0;}


/*----------------------------------------
Privacy
-------------------------------------------*/
body#privacy h2{
	background:url(../images/h2_privacy.jpg) no-repeat;}
	
body#privacy h3{
	margin:1em 0;
	font-size:18px;
	color: #FF9C00;
	}
body#privacy h4{
	margin:1em 0;
	font-size:16px;
	color: #006391;
	}
body#privacy #main p{
	line-height:1.8;
	margin:1.5em 0 1.5em 2em;}
	
/*----------------------------------------
Footer
-------------------------------------------*/
#footer{
	clear: both;
	/*min-height: 130px;*/
	background-color:#f3f3f3;
	border-top:solid 3px #e6e6e6;
	}

#footer .inner {
	width:950px;
	margin:0 auto;
	padding:20px 0 20px 0;
	font-size:80%;
	position:relative;
	}
#footer .inner p{
	line-height:1.6;}
	
#footer h1{
	font-size:11px;
	margin-bottom:0.5em;}

#footer a {
	color:#555;}

#footer #foot_right{
	position:absolute;
	top:20px;
	right:0;
	text-align:right;
	}

#footer #foot_right ul{
	margin-bottom:8px;}
#footer #foot_right ul li {
	display:inline;
	margin-left:10px;
	padding-left:10px;
	border-right:solid 1px #FFF;
	}


/*----------------------------------------
clearfix
-------------------------------------------*/

.clearfix:after{
	content:"";
	display:block;
	visibility:hidden;
	clear:both;
	height:0.1px;
	font-size:0.1em;
	line-height:0;
	}
	
* html .clearfix {
	display:inline-block;
	}

/* IE7 */ 		
*:first-child+html .clearfix {
	display:inline-block;
	}