@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-table;zoom:1;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

html, body {
	width: 100%;
	height: 100%;
    margin: 0;
    padding: 0;
}

body {
	background-color: #333;
	_height: 600px;
}

#wrapper {
	height: 600px;
	width: 7000px;
	background: url(../images/bg.jpg) no-repeat;
	position: absolute;
	top: 50%;
	left: 0;
	margin: -300px auto 0;
}

#concept {
	width: 828px;
	height: 600px;
	background: url(../images/bg_sprite.png) no-repeat;
	background-position: -720px 0;
	position: absolute;
	top: 0;
	left: -500px;
	z-index: 1;
}

#concept dl {
	color: #FFF;
	font-size: 0.8em;
	line-height: 1.3;
}

#concept dt{
	font-size: 1em;
	font-weight:bold;
	margin-bottom:10px;
}

#concept dd {
	font-size: 1em;
	margin-bottom:15px;
}

#concept a,#company a {
	color: #48b5dc;
	outline: none;
}

#content {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

/* スクロールバー ↓↓↓↓*************************************/

#scroll_concept {
	width: 260px;
	height: 230px;
	position: absolute;
	top: 75px;
	left: 170px;
	overflow: auto;
	padding: 5px;
}

.scrollgeneric {
	line-height: 1px;
	font-size: 1px;
	position: absolute;
	top: 0; left: 0;
}

.vscrollerbase {
	width: 10px;
	background: url(../images/gray_bk.png) repeat;
}
.vscrollerbar {
	width: 10px;
	background: url(../images/gray_bk2.png) repeat;
}
/*
.hscrollerbase {
	height: 10px;
	background-color: white;
}
.hscrollerbar {
	height: 10px;
	background-color: black;
}

.scrollerjogbox {
	width: 10px;
	height: 10px;
	top: auto; left: auto;
	bottom: 0px; right: 0px;
	background-color: gray;
}
*/
/* スクロールバー ↑↑↑↑*************************************/

h1 {
	width: 720px;
	height: 300px;
	background: url(../images/bg_sprite.png) no-repeat;
	background-position: 0 -300px; /* どの場所の画像を出すのか、x軸、y軸の順に指定 */
	position: absolute;
	top: 300px;
	text-indent: -1000em;
	overflow: hidden;
}

#nav_content {
	width: 608px;
	position: fixed;
	z-index: 3;
	_display:none;
}

#nav {
	width: 608px;
	list-style: none;
	position: absolute;
	left: -1000px;
}

#nav li{
	float: left;
	text-align: center;
	margin-right: 2px; 
	font-size: 16px;
	font-weight: bold;
}

#nav li a{
	display: block;
	width: 150px;
	height: 35px;
	background: #333;
	filter: alpha(opacity=90,style=0);
	-moz-opacity: 0.9;
	opacity: 0.9;
	line-height: 35px;
	text-decoration: none;
	color: #48b5dc;
	outline: none;
}

#nav li a:hover {
	background: #333 url(../images/stripe.gif) repeat;
}

#nav2, #nav3, #nav4 {
	display: none;
}

.nav {
	width: 608px;
	list-style: none;
	position: absolute;
	left:30px;
	z-index:10;
	display:none;
	_display:block;
}

.nav li{
	float: left;
	text-align: center;
	margin-right: 2px; 
	font-size: 16px;
	font-weight: bold;
}

.nav li a{
	display: block;
	width: 150px;
	height: 35px;
	background: #333;
	filter: alpha(opacity=90,style=0);
	-moz-opacity: 0.9;
	opacity: 0.9;
	line-height: 35px;
	text-decoration: none;
	color: #48b5dc;
	outline: none;
}

.nav li a:hover {
	background: #333 url(../images/stripe.gif) repeat;
}

.button01{
	display:block;
}

#section1 {
	width: 170px;
	height: 300px;
	background: url(../images/bg_sprite.png) no-repeat;
	background-position: 0 0; /* どの場所の画像を出すのか、x軸、y軸の順に指定 */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#section2 {
	position: absolute;
	top: 0;
	left: 1400px;
}

#company {
	width: 480px;
	height: 450px;
	padding:20px;
	position: absolute;
	left: 2300px;
	top: 60px;
	overflow: auto;
	background: url(../images/gray_bk.png) repeat;
	color: #FFF;
	z-index: 2;
	font-size: 0.8em;
}


#company h2 {
	margin-bottom: 10px;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	text-indent: 3px;
	border-left: #48b5dc solid 6px;
}

#company dt {
	padding:5px 0; 
	clear:both;
	float:left;
	font-weight:bold;
}

#com01 {
	margin-bottom: 15px;
}

#com01 dd {
	margin-left:100px;
	line-height:15px;
	padding: 5px;
}

#com02 dd {
	margin-left:180px;
	line-height:15px;
	padding:5px;
}

#section3 {
	position: absolute;
	top: 0;
	left: 3400px;
}

#works_list{
	list-style:none;
}

#works01{
	width: 179px;
	height: 149px;
	background: url(../images/bg_sprite.png) no-repeat;
	background-position: -1550px 0;
	position: absolute;
	left: 320px;
	top: 80px;
}

#works01 a{
	width:179px;
	height:149px;
	display:block;
	text-indent: -1000em;
	overflow:hidden;
	outline: none;
}

#works02{
	width: 179px;
	height: 192px;
	background: url(../images/bg_sprite.png) no-repeat;
	background-position: -1550px -149px;
	position: absolute;
	left: 200px;
	top: 280px;
}

#works02 a{
	width:179px;
	height:184px;
	display:block;
	text-indent: -1000em;
	overflow:hidden;
	outline: none;
}

#works03{
	width: 179px;
	height: 159px;
	background: url(../images/bg_sprite.png) no-repeat;
	background-position: -1550px -341px;
	position: absolute;
	left: 480px;
	top: 320px;
}

#works03 a{
	width:179px;
	height:159px;
	display:block;
	text-indent: -1000em;
	overflow:hidden;
	outline: none;
}

#works04{
	width: 214px;
	height: 196px;
	background: url(../images/bg_sprite.png) no-repeat;
	background-position: -1729px 0;
	position: absolute;
	left: 570px;
	top: 50px;
}

#works04 a{
	width:214px;
	height:196px;
	display:block;
	text-indent: -1000em;
	overflow:hidden;
	outline: none;
}

/*#works05{
	width: 214px;
	height: 304px;
	background: url(../images/bg_sprite.png) no-repeat;
	background-position: -1729px -197px;
	position: absolute;
	left: 550px;
	top: 260px;
}*/

/*#works05 a{
	width:214px;
	height:304px;
	display:block;
	text-indent: -1000em;
	overflow:hidden;
	outline: none;
}
*/

#section4 {
	position: absolute;
	top: 0;
	left: 5000px;
}

#contact_bg{
	width:780px;
	height:600px;
	background: url(../images/contact.png) no-repeat;
	margin-left:30px;
}

#contact_name{
	position:absolute;
	left:210px;
	top:164px;
}

#contact_adress{
	position:absolute;
	left:210px;
	top:223px;
}

#contact_text{
	position:absolute;
	left:211px;
	top:294px;
}

#contact_button{
position:absolute;
	left:610px;
	top:440px;
}

.leightbox {
	color: #333;
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 1em;
	border: 1em solid #B8B8B8;
	background-color: white;
	text-align: left;
	z-index:1001;
	overflow: auto;	
}

#overlay{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
	background-color:#333;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}

#copyright{
	position:fixed;
	_position:static;
	font-size: 0.8em;
	color:#FFFFFF;
	margin:610px 0 0 10px;
	z-index:20;
}

INPUT {
	background-color:transparent;
	border:none;
}

TEXTAREA {
	background-color:transparent;
	border:none;
}

/* ローディング用******************************** */

#fade {
    position:fixed !important;
    position:absolute; /* ie6 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 url("../images/loading_bk.gif") center center no-repeat;
	z-index: 4;
}

/* ********************************************** */