@charset "UTF-8";
/* CSS Document */
html{
	position:relative;
	overflow:hidden;
}
body{
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
	background-color:#282520;
	width:100%;
	word-break: break-all;
	word-wrap: break-all;
	color:#FFF;
}
a{
	color:white;
	text-decoration:none;
}
#fade{
	position:fixed;
	z-index:999;
	width:100%;
	height:100%;
	background-color:#282520;
}
#fade-inner{
	position:relative;
	top:50%;
	left:50%;
	margin-top:-20px;
	margin-left:-101px;
}
#circle{
	margin-right:10px;
}
#fade-under{
	opacity:0;
}
#wrapper{
	width:100%;
}
#wrapper-inner{
	position:relative;
	z-index:5;
	background-image:url(../img/left_shadow.png);
	background-repeat:repeat-y;
	overflow:hidden;
}
#balloon{
	position:fixed;
	top:0%;
	z-index:3;
}
.clouds{
	position:fixed;
	z-index:2;
	background-image:url(../img/cloud_line.png);
	background-repeat:repeat-y;
	background-position:110px;
	height:2000px;
	margin-top:-2000px;
}
.clouds img{
	position:relative;
	top:100%;
}
#MovieContents{
	height:180px;
	width:580px;
	overflow:hidden;
	position:fixed;
	z-index:4;
}
#top-image{
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(../img/star.png);
	background-repeat:repeat-x;
	width:100%;
}
/*-------------------------------------------------------------------------
Header
--------------------------------------------------------------------------*/
header{
	position:fixed;
	z-index:50;
	width:100%;
	background-image:url(../img/header.png);
	background-repeat:repeat-x;
	height:20px;
}
#logo{
	position:absolute;
	padding:39px 0 0 26px;
}
#recruit{
	position:absolute;
	right:4px;
	top:19px;
	opacity:1;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
#recruit:hover{
	opacity:0.7;
}
/*-------------------------------------------------------------------------
Footer
--------------------------------------------------------------------------*/
footer{
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:40;
	height:60px;
	background-color:#282520;
	width:100%;
}
footer #logomark{
	position:absolute;
	top:15px;
	left:23px;
}
footer p small{
	position:absolute;
	top:24px;
	left:145px;
	font-size:11px;
	color:#eeeeee;
	line-height:1em;
}
#privacy{
	position:absolute;
	top:16px;
	right:110px;
	width:148px;
	height:12px;
	padding:8px 8px 8px 0;
	border-right: 1px solid #5b5b5b;
}
#privacy a{
	display:block;
	height:12px;
	width:130px;
	background-image:url(../img/privacy_policy.gif);
	text-indent:-9999px;
}
#privacy a:hover{
	background-position:0 -12px;
}
#share{
	position:absolute;
	top:22px;
	right:27px;
}
#share a{
	display:block;
	float:left;
	padding-right:4px;
}
/*-------------------------------------------------------------------------
Globalmenu
--------------------------------------------------------------------------*/
#menu{
	position:fixed;
	z-index:9999;
	top:0px;
	left:0px;
	padding-top:300px;
	/*0 0 26px;*/
}
#menu ul{
	background-image:url(../img/menu_line.png);
	background-repeat:no-repeat;
	background-position:26px top;
	position:relative;
	width:275px;
	height:205px;
}
#menu ul li{
	position:absolute;
	padding:1px 0 1px 26px;
	background-image:url(../img/menu_over.gif);
	background-position:-280px;
	background-repeat:no-repeat;	
}
#menu-about{top:0px;}
#menu-portfolio{top:51px;}
#menu-outline{top:102px;}
#menu-access{top:153px;}

#menu ul li:hover{
	background-position:0px;
	z-index:99;
	
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
#menu ul li img{
	position:relative;
	left:0px;
}
#menu ul li:hover img{
	position:relative;
	left:-18px;
	
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
/*-------------------------------------------------------------------------
Pages
--------------------------------------------------------------------------*/
#pages{
	position:relative;
	margin-left:290px;
}
article.page{
	position:relative;
	padding-top:40px;
}
article.page .page-inner{
	padding-top:180px;
}
article.page .page-inner h1 img{
	position:absolute;
	top:40px;
	left:0px;
	z-index:99;
}
article.page .page-inner section{
	padding-left:60px;
}
.back-to-top a{
	margin:40px 0 0 70px;
	display:block;
	background-image:url(../img/back_to_top.png);
	width:95px;
	height:27px;
	text-indent:-999px;
}
.back-to-top a:hover{
	background-position:0 -27px;
}
/*-------------------------------------------------------------------------
about
--------------------------------------------------------------------------*/
#about div.page-inner section{
	position:relative;
	width:620px;
	z-index:99;
}
#about .page-inner section #about-text{
	float:left;
	font-size:13px;
	line-height:1.8em;
}
#about .page-inner section #about-text h2{
	margin-bottom:12px;
}
#about .page-inner section #about-text p{
	width:400px;
}
#about .page-inner section img#about-illust{
	float:right;
}
/*-------------------------------------------------------------------------
portfolio
--------------------------------------------------------------------------*/
#portfolio .page-inner section .column{
	background-image:url(../img/portfolio_back.png);
	background-repeat:no-repeat;
	padding-top:22px;
	margin-top:-8px;
	width:505px;
}
#portfolio .page-inner section .column-inner{
	background-image:url(../img/portfolio_line.png);
	background-repeat:repeat-y;
}
#portfolio .page-inner section ul{
	background-image:url(../img/portfolio_line.png);
	background-repeat:repeat-x;
	list-style:none;
	padding:5px 0 0 5px;
	position:relative;
	z-index:99;
}
#portfolio .page-inner section li{
	width:120px;
	height:120px;
	float:left;
	padding:5px 0 0 5px;
	position:relative;
	z-index:99;
}
#portfolio .page-inner section li:hover{
	z-index:999;
}

#portfolio .page-inner section li img{
	width:120px;
	height:120px;
	position:absolute;
	opacity:0.8;
}
#portfolio .page-inner section li:hover img{
	z-index:999;
	opacity:1;
	
	transform:scale(1.35);
	-webkit-transform:scale(1.35);
	
	-webkit-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
	transition: all 0.1s linear;
}
#portfolio .page-inner section li .caption{
	z-index:99;
	opacity:0;
	position:absolute;
	font-size:10px;
	word-wrap:normal;
	color:#282520;
	line-height:1.3em;
	width:130px;
	padding:146px 9px 5px 9px;
	margin-left:-14px;
	margin-top:-10px;
	background-color:#FFFFFF;
	
	pointer-events:none;
	
	border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
#portfolio .page-inner section li:hover .caption{
	pointer-events:auto;
	opacity:1;
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
	
	-webkit-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
	transition: all 0.1s linear;
	
	box-shadow: 0 0 8px #282520;
	-webkit-box-shadow: 0 0 8px #282520;
}
#portfolio .page-inner section li:hover .caption h3{
	color:#E4A704;
	font-size:8px;
}
#portfolio .page-inner section#graphic{
	margin-top:40px;
}

/*-------------------------------------------------------------------------
corporate outline
--------------------------------------------------------------------------*/
#outline .page-inner section{
	font-size:13px;
	line-height:2.1em;
	position:relative;
	z-index:99;
}
#outline .page-inner section dl.outline-list{
	overflow:hidden;
}
#outline .page-inner section dl.outline-list > dt, #outline .page-inner section dl.outline-list > dd{
	float:left;
	magin:0;
}
#outline .page-inner section dl.outline-list >dt{
	width:6em;
}
#outline .page-inner section dl.outline-list > dd{
	background-image:url(../img/portfolio_line.png);
	background-repeat:repeat-y;
	padding-left:1em;
}
#outline .page-inner section dl.staff-list{
	overflow:hidden;
}
#outline .page-inner section dl.staff-list dt{
	float:left;
	width:4.5em;
}
#outline .page-inner section dl.staff-list dd{
	float:left;
}
/*-------------------------------------------------------------------------
access map
--------------------------------------------------------------------------*/
#access{
	font-size:13px;
	line-height:1.3em;
}
#access section p{
	position:relative;
	z-index:99;
}
p#map{
	font-weight:bold;
	font-size:14px;
	color:#282520;
	width:270px;
	line-height:1.0em;
	color:#51211E;
	padding:5px;
}
p#map span{
	font-size:10px;
}
#map-box{
	margin-top:10px;
	padding:6px;
	width:460px;
	
	background-color:white;
	line-height:1.2em;
	
	border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	
	box-shadow: 0 0 8px #532220;
	-webkit-box-shadow: 0 0 8px #532220;
}
#map-canvas{
	width:460px;
	height:260px;
}
#map-box a{
	color:#282520;
	font-size:11px;
	text-decoration:none;
}
#map-box a:hover{
	color:#7F3630;
}
/*-------------------------------------------------------------------------
back
--------------------------------------------------------------------------*/
#back{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:3000px;
	background-image:url(../img/bg.jpg);
	background-repeat:repeat-x;
	z-index:-2;
	/*background-attachment:fixed;*/
}
#back-inner{
	position:relative;
	height:3000px;
	top:0px;
	background-image:url(../img/back_bottom.png);
	background-position:left bottom;
	background-repeat:repeat-x;
	/*background-attachment:fixed;*/
}
#back img{
	position:relative;
	left:554px;
	top:2272px;
	z-index:-1;
}