@charset "UTF-8";
@import 'css/reset.css';
@import url(http://fonts.googleapis.com/css?family=Puritan:700,400);


/*
Theme Name: チャズ インターナショナル
Description: チャズ インターナショナル オリジナルテーマ2
Author: CIDER inc.
Version: 0.1
*/




/* base */

.p{
	font-family: 'Puritan', sans-serif;
	font-weight: 400;
	line-height: 1.3em;
}

.pb{
	font-family: 'Puritan', sans-serif;
	font-weight: 800;
	line-height: 1.3em;
}

body{
	background: url(images/bg.gif) no-repeat fixed center 0 #000;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

#wrapper{
	width: 100%;
	color: #eee;
	min-width: 980px;
}

.wrap{
	width: 960px;
	padding: 0 10px;
	margin-left: auto;
	margin-right: auto;
}

.line{
	line-height: 1.3em;
}

a{
	color: #fff;
}

#contents{
	padding-top: 56px;
}

#main-contents{
	width: 760px;
	float: right;
	padding-top: 32px;
}

.page{
	padding: 55px 0 10px;
	width: 764px;
	margin-left: -2px;
}

.page-top{
	margin-top: 30px;
}

	.page-top a{
		width: 55px;
		height: 13px;
		position: relative;
		float: right;
		overflow: hidden;
		display: block;
	}
	
	.page-top a:hover img{
		top: -13px;
	}
	
		.page-top a img{
			position: absolute;
			left: 0;
			top: 0;
		}
		
.highlight{
	background: #7cb21d;
	padding: 0 3px;
}


/* header */

#head-bar{
	width: 100%;
	height: 36px;
	background: url(images/search-bg.png) repeat-x;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
}

	#head-bar label{
		display: none;
	}
	
#searchsubmit{
	display: none;
}

#search-body{
	background: url(images/search.png) no-repeat 794px 5px;
}

#s{
	width: 162px;
	height: 21px;
	margin-top: 5px;
	border: none;
	color: #fff;
	padding: 0 7px;
	float: right;
	line-height: 21px;
	background: none;
	font-size: 12px;
	background: url(images/megane.png) no-repeat 150px center;
}

#s.focus{
	background: none;
}


/* side */

#side{
	width: 170px;
	position: fixed;
	padding-bottom: 100px;
	float: left;
}

	#side ol{
		line-height: 30px;
		margin-top: 15px;
	}
	
#menus{
	margin-top: 20px;
	height: 161px;
	background: url(images/side/menu-bg2.png) no-repeat 0 0;
	padding: 16px 0 0 7px;
}

	#menus div{
		width: 155px;
		height: 33px;
	}
	
		#menus div a{
			position: relative;
			width: 100%;
			height: 33px;
			display: block;
			overflow: hidden;
		}
		
			#menus div a:hover img,
			#menus div a.current img{
				left: 0;
			}
		
		#menus div img{
			position: absolute;
			left: -155px;
		}
		
#about-us img{
	top: 0;
}
		
#company img{
	top: -33px;
}

#contact img{
	top: -66px;
}

#chaz-haba img{
	top: -99px;
}

#lithium-house img{
	top: -132px;
}

#products{
	width: 178px;
	margin-left: -4px;
	height: 47px;
}

	#products a{
		width: 100%;
		height: 100%;
		position: relative;
		display: block;
		overflow: hidden;
	}
	
		#products a:hover img,
		#products a.current img{
			top: -50px;
		}
	
	#products img{
		position: absolute;
		left: 0;
		top: 0;
	}

#logo{
	text-align: center;
	display: block;
}

#copy{
	font-size: 11px;
}

#icel{
	position: absolute;
	left: 0;
	bottom: 0;
}


/* home */

#home{
	background: url(images/home/home-text.png) no-repeat 0 0;
	padding: 117px 0 30px;
}

#home-frame{
	position: relative;
	width: 761px;
	height: 503px;
	overflow: hidden;
}	

#slides{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}


/* about */

#about-us-page{
	background: url(images/about/bar.png) no-repeat 0 0;
}

	#about-us-page h3{
		font-size: 13px;
		line-height: 1.4em;
		margin-bottom: 17px;
		color: #ddd;
	}
	
		#about-us-page h3 span{
			display: block;
		}

#about-body{
	background: url(images/about/about.png) no-repeat center 0;
	padding-top: 520px;
}

#to-contact{
	width: 142px;
	height: 27px;
	position: relative;
	float: right;
	overflow: hidden;
	display: block;
}

#to-contact:hover img{
	top: 0;
}

	#to-contact img{
		position: absolute;
		left: 0;
		top: -27px;
	}


/* company */

#company-page{
	background: url(images/company/bar.png) no-repeat 0 0;
}

	#company-page li{
		margin-top: 10px;
		font-size: 13px;
		line-height: 1.5em;
	}

	#company-page .col{
		width: 130px;
		float: left;
	}
	
	#company-page .val{
		float: left;
		width: 630px;
	}
	
		#company-page .val .small{
			font-size: .9em;
			display: block;
			margin-top: 5px;
		}
	
	#company-page a{
		color: #aaff00;
	}
	
	
/* contact */

#contact-page{
	background: url(images/contact/bar.png) no-repeat 0 0;
}

	#contact-page span.red{
		color: red;
		margin-left: 3px;
		font-size: .9em;
	}

#contact-head h3{
	float: left;
	margin-right: 40px;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
}

#contact-head p{
	float: left;
	font-size: 12px;
	height: 20px;
	line-height: 20px;
}

form .form-block{
	margin-top: 20px;
}

form label{
	width: 150px;
	float: left;
	font-size: 13px;
	height: 30px;
	line-height: 30px;
}

form .text{
	width: 240px;
	height: 30px;
	padding: 0 5px;
	float: left;
	background: url(images/contact/input.png) no-repeat 0 0;
	border: none;
	color: #fff;
	font-size: 14px;
}

form textarea{
	width: 549px;
	height: 102px;
	background: url(images/contact/textarea.png) no-repeat 0 0;
	font-size: 14px;
	color: #fff;
	border: none;
	padding: 5px;
}

#submit-wrap{
	width: 88px;
	height: 27px;
	margin: 20px auto 0;
	overflow: hidden;
	position: relative;
}

#form-submit{
	width: 88px;
	height: 54px;
	border: none;
	background: url(images/contact/send.png) no-repeat 0 0;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;
}


/* chaz */

#chaz-haba-page{
	background: url(images/chaz/bar.png) no-repeat 0 0;
}

	#chaz-haba-page h3{
		font-size: 15px;
		margin-bottom: 3px;
	}
	
	#chaz-haba-page h2{
		font-size: 26px;
		margin-bottom: 10px;
	}

#chaz-haba-body{
	font-size: 13px;
	line-height: 1.7em;
}

	#chaz-haba-body img{
		float: left;
		margin: 0 10px 10px 0;
	}
	
	
/* lithium house */

#lithium-house-page{
	background: url(images/lithium/bar.png) no-repeat 0 0;
}

#lithium-body{
	padding-top: 1020px;
	background: url(images/lithium/lithium.png) no-repeat 0 0;
}


/* products */

#products-page{
	padding: 95px 0 10px;
	width: 760px;
}

#products-head h1{
	float: left;
	font-size: 17px;
	width: 170px;
}

#products-head div{
	width: 470px;
	float: left;
	line-height: 1.8em;
	font-size: 12px;
	margin-top: -3px;
}

#products-content{
	margin-top: 20px;
	background: #fafafa;
	color: #444;
}

#products-line{
	border-top: solid 1px #1a1a1a;
}

	#products-line ul{
		position: relative;
		z-index: 1;
	}

	#products-line li{
		width: 60px;
		float: left;
		height: 30px;
		line-height: 30px;
		font-weight: bold;
		padding-left: 20px;
		margin: 0 0 5px 10px;
	}
	
	#products-line a{
		color: #333;
	}
	
	#products-line a:hover{
		color: #7cb21d;
		text-decoration: none;
	}
	
#select-v{
	position: relative;
}
	
#select{
	position: absolute;
	left: 10px;
	top: 0;
}

.products-side{
	width: 180px;
	float: left;
}

#pl{
	/*
	border-left: solid 4px #1a1a1a;
	*/
	height: 45px;
	font-size: 11px;
	line-height: 15px;
	padding: 15px 0 0 8px;
	width: 165px;
	font-weight: bold;
}

#type{
	background: url(images/type.jpg) no-repeat 0 0;
	height: 216px;
	margin-top: 10px;
	padding: 10px 0 0 15px;
	width: 165px;
	font-size: 10px;
	color: #444;
}

	#type p{
		border-bottom: dashed 1px #666;
		padding-left: 80px;
		width: 70px;
		height: 50px;
		line-height: 50px;
	}

#t1{
	background: url(images/type/t1.jpg) no-repeat 0 center;
	margin-top: 40px;
}

#t2{
	background: url(images/type/t2.jpg) no-repeat 0 center;
}

#t3{
	background: url(images/type/t3.jpg) no-repeat 0 center;
	border: none !important;
}

#pros{
	width: 560px;
	margin: 15px 0 20px 20px;
	float: left;
	background: url(images/loading.gif) no-repeat center 50px;
}

table{
	width: 100%;
	border: none;
    border-spacing: 0;
    padding: 0;
    text-align: center;
    background: #F5F5F5;
    color: #444;
}

	table th{
		font-size: 11px;
		height: 40px;
		vertical-align: middle;
		background: #fafafa;
	}
	
		table th span{
			display: block;
			border-bottom: solid 1px #333;
			padding-bottom: 2px;
			margin-bottom: 2px;
		}
		
	table tbody{
		font-size: 11px;
		font-weight: bold;
	}
		
		table tbody tr{
			background: url(images/dot-line.jpg) no-repeat 0 bottom;
		}
		
		table tbody tr.tr-first td{
			 background: url(images/white-line.jpg) no-repeat right 20px;
		}
		
	table td{
		height: 70px;
		vertical-align: middle !important;
		background: url(images/white-line.jpg) no-repeat right 0;
	}
	
	*+html table td{
		border-bottom: dashed 1px #ccc;
	}
	
	table td.td-last{
		background: none !important;
	}
	
	table .type-img{
		width: 40px;
		display: block;
		margin: 0 auto 5px;
	}
	
	table .shape-img{
		max-width: 40px;
	}