@charset "utf-8";
/* global
-----------------*/
body{
	background:url("../img/body-back.png") center top #000;
	overflow:hidden;
	color:#fff;
	font-size:80%;
	line-height: 1.5;
	font-family:'Helvetica','Verdana','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	}
a {
	outline:0;
	border:0;
	color:#FFF;
}
p{
	margin-bottom: 1em;
}

#wrapper {
	background:url("../img/gradation-back.png") center bottom no-repeat;
	position:relative;
	font-size:1em;
}
#head{
	width:950px;
	height:104px;
	position:absolute;
	left:50%;
	bottom:0;
	margin-top:-100px;
	margin-left:-475px;
	z-index:100;
}
footer,#footer{
	background-color: rgba(0,0,0,0.2);
	height:25px;
	position:fixed;
	bottom:0;
	width:100%;
	text-align:center;
	padding-top:15px;
}
.cent{
	position:absolute;
	left:50%;
	bottom:50%;
	margin-top:-100px;
	margin-left:-475px;
	z-index:100;
}
h1{
	position:absolute;
	top:31px;
	left:0px;
	opacity: 0;
}
div.box h2{
	margin-bottom:30px;
}
article.first,div.first{
	width:454px;
	float:left;
}
article.second,div.second{
	width:454px;
	float:right;
}

/* nav
-----------------*/
nav,#nav{
	position:absolute;
	top:-5px;
	left:-15px;
}

nav li,
#nav li{
	opacity:0;
}
nav ul li,
#nav ul li{
	position:absolute;
	top:47px;
	width:100px;
	height:100px;
	text-align: center;
}
nav ul li span,
#nav ul li span{
	display:block;
	width:64px;
	height:15px;
	overflow:hidden;
	position:relative;
}
nav ul li span img,
#nav ul li span img{
	position:absolute;
	left:0;
	top:0;

}
nav ul li img,
#nav ul li img{
	display: block;
	margin: 0 auto;
	margin-bottom:0px;
}
nav ul li#nav-about,#nav ul li#nav-about{left:180px;}
nav ul li#nav-works,#nav ul li#nav-works{left:316px;}
nav ul li#nav-service,#nav ul li#nav-service{left:453px;}
nav ul li#nav-company,#nav ul li#nav-company{left:591px;}
nav ul li#nav-contact,#nav ul li#nav-contact{left:728px;}
nav ul li#nav-blog,#nav ul li#nav-blog{left:866px;}
nav ul li#nav-about span,#nav ul li#nav-about span{margin-left:27px;}
nav ul li#nav-works span,#nav ul li#nav-works span{margin-left:25px;}
nav ul li#nav-service span,#nav ul li#nav-service span{margin-left:21px;}
nav ul li#nav-company span,#nav ul li#nav-company span{margin-left:18px;}
nav ul li#nav-contact span,#nav ul li#nav-contact span{margin-left:19px;}
nav ul li#nav-blog span,#nav ul li#nav-blog span{margin-left:32px;}

nav ul li a,#nav ul li a{position:relative;z-index:110;width:100px;height:100px;display:block;}
nav ul li canvas,#nav ul li canvas{position:absolute;top:-73px;left:-56px;z-index:100;}
nav .add,#nav .add{
	position:absolute;
	left:26px;
	top:15px;
	z-index:100;
	opacity:0;
}
nav li div,#nav li div{
	position:absolute;
	left:18px;
	top:0px;
	z-index:150;
}
/* about
-----------------*/
div#about{
	width:100%;
	display:none;
	position:absolute;
	left:50%;
	top:0px;
	z-index:200;
	margin-left: -950px;
	padding-top:30px;
	padding-left:475px;
	overflow-x:visible;
	overflow-y:scroll;
}
div#about .box{
	width:950px;
}
/* works
-----------------*/
div#works{
	width:100%;
	display:none;
	position:absolute;
	left:50%;
	top:0px;
	z-index:200;
	margin-left: -950px;
	padding-top:30px;
	padding-left:475px;
	overflow-x:hidden;
	overflow-y:scroll;
}
div#works .box{
	width:950px;
}
div#works article,
div#works div{
	width:950px;
}
div#works article .workContainer,
div#works div .workContainer{
	background:#000;
	float:left;
	margin-right:25px;
	margin-bottom: 25px;
	cursor: pointer;
	width:300px;
	height:300px;
	overflow: hidden;
	position: relative;
}
div#works article .workContainer img,
div#works div .workContainer img{
	opacity:0.5;
}
div#works article .workContainer:nth-child(3n),
div#works div .workContainer:nth-child(3n){
	margin-right: 0;
}
div#works article .workContainer:last-child,
div#works div .workContainer:last-child{
	margin-bottom:100px;
}
div#works .workContainer div.scroll{
	color:#FFF;
	position:absolute;
	left:0;
	top:300px;
	width:270px;
	height:270px;
	padding:15px;
	background-color:rgba(000,000,000,0.8);
}
div#works .workContainer div.overlay{
	position:absolute;
	left:0;
	top:0;
	width:300px;
	height:300px;
}
div#works .workContainer h3 {
	color:#FFF;
	font-weight:bold;
	margin-bottom:1em;
}
div#works .workContainer div.scroll a{
	color:#000;
	background:#fffb00;
	text-decoration:none;
}
div#works .workContainer div.overlay a{
	display:block;
	width:300px;
	height:300px;
}
div#works .workContainer div.overlay a:hover{
	background:none;
}
div#works .workContainer div p {
	color:#999;
}
div#works .worksBox{
	width:950px;
	height:360px;
	background: #fff;
	z-index:200;
	display: none;
}
div#works p#iconExp{
	position:absolute;
	left:475px;
	top:130px;
}
/* service
-----------------*/
div#service{
	width:100%;
	display:none;
	position:absolute;
	left:50%;
	top:0px;
	z-index:200;
	margin-left: -950px;
	padding-top:30px;
	padding-left:475px;
	overflow-x:hidden;
	overflow-y:scroll;
}
div#service .box{
	width:950px;
}
div#service article#serviceTable th,
div#service div#serviceTable th{
	text-align: left;
	vertical-align: top;
	width:35%;
}
div#service article#serviceTable td,
div#service div#serviceTable td{
	width: 65%;
	padding-bottom: 90px;
}
/* company
-----------------*/
div#company{
	width:100%;
	display:none;
	position:absolute;
	left:50%;
	top:0px;
	z-index:200;
	margin-left: -950px;
	padding-top:30px;
	padding-left:475px;
	overflow-x:hidden;
	overflow-y:scroll;
}
div#company .box{
	width:950px;
}
div#company table{
	width: 100%;
}
div#company th{
	font-weight: normal;
	text-align: left;
	width:30%;
	vertical-align: top;
	padding:10px;
}
div#company td{
	width:70%;
	padding:10px;
}
/* contact
-----------------*/
div#contact{
	width:100%;
	display:none;
	position:absolute;
	left:50%;
	top:0px;
	z-index:1;
	margin-left: -950px;
	padding-top:30px;
	padding-left:475px;
	overflow-x:hidden;
	overflow-y:scroll;
}
div#contact .box{
	width:950px;
}
div#contact article.first,
div#contact div.first{
	width:100%;
	float:left;
}
div#contact article.second,
div#contact div.second{
	display:none;
}
div#contact #companyName{
	display:none;
}

div#contact #form table{
	display:none;
}
div#contact input#back,
div#contact input#confirm,
div#contact input.btnConfirm,
div#contact input#submitBtn,
div#contact #btnBox{
	display: none;
}
div#contact dt,div#contact dd{
	padding:10px 0px;
}
div#contact dt{
	float:left;
	font-weight:bold;
	color:#666;
}
div#contact dd{
	margin-left:180px;
}
div#contact input,div#contact textarea{
	padding:5px;
	font-size:1em;
}
div#contact input{
	width:30em;
}
div#contact textarea{
	width:30em;
	height:15em;
}
div#contact #formWhich input{
	width:auto;
}
div#contact #sendBtn{
	width:14em;
	padding:8px 12px;
	background:#000;
	background: -moz-linear-gradient(top, #333, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000));
	border:1px solid #000;
	border-radius: 6px;
	-webkit-border-radius: 6px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 6px;   /* Firefox用 */  
	color:#FFF;
	margin-left:180px;
}
div#contact #sendBtn:hover {
	cursor:pointer;
}
div#contact p.confirm-mes {
	margin:0px;
	padding:0px;
	padding-left:180px;
}
#confirm {
	padding:0px 20px;
}
#confirm a:hover {
	color:#000;
	background:#fffb00;
	text-decoration:none;
}

/* hr
-----------------*/
hr{
	margin-bottom: 30px;
	height:1px;
	border-color:#000;;
}
div#works hr{
	margin-bottom:60px;
}
#confirm input#topBack {
	margin:20px 0px;
	width:14em;
	padding:8px 12px;
	background:#000;
	background: -moz-linear-gradient(top, #333, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000));
	border:1px solid #000;
	border-radius: 6px;
	-webkit-border-radius: 6px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 6px;   /* Firefox用 */  
	color:#FFF;
}
/* bg
-----------------*/
div#bg{
	position:absolute;
	top:0;
	left:0;
	display: none;
	
	background-color: rgba(255,255,255,0.1);
	background-image: url("../img/headLine.png");
	background-position:center bottom;
	background-repeat: repeat-x;
	border-bottom: 1px solid #3d3d3d;
}
div#bg img{
	position:absolute;
	left:50%;
	bottom:0;
	margin-left:-14px;
	display:none;
	cursor:pointer;
	z-index:10000;
}
div#socialBox{
	position:absolute;
	left:50%;
	top:0;
	width:950px;
	text-align:right;
	margin-left:-475px;
	z-index:5000;
}
div#socialBox p{
	float:right;
	margin-left:5px;
}