@charset "utf-8";
/* CSS Document */

* {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
color:#666666;
font-size:100%;
}
a {
overflow:hidden;
text-decoration:underline;
}
img {
border:medium none;
vertical-align:top;
}
li {
list-style-type:none;
}
hr {
clear:both;
display:none;
}
br.clear {
clear:both;
}
html {
color:#000000;
}
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif,"Osaka‐等幅";
font-size:12px;
line-height:1.6em;
width:100%;
background:#FFF;
}
a {
color:#000000;
text-decoration:underline;
}
a:link {
color:#000000;
text-decoration:underline;
}
a:visited {
color:#999999;
text-decoration:underline;
}
a:hover {
color:#333333;
text-decoration:none;
}
a:active {
color:#333333;
text-decoration:none;
}
h1 a, h1 a:link, h1 a:visited {
color:#000000;
text-decoration:none;
}
h1 a:hover, h1 a:active {
color:#999999;
text-decoration:none;
}
#side a {
color:#000000;
text-decoration:underline;
}
#side a:link {
color:#000000;
text-decoration:underline;
}
#side a:visited {
color:#999999;
text-decoration:underline;
}
#side a:hover {
color:#333333;
text-decoration:none;
}
#side a:active {
color:#333333;
text-decoration:none;
}
.cell a, .call a:link, .call a:visited {
color:#000000;
font-weight:bolder;
text-decoration:underline;
}
.cell a:hover, .call a:active {
color:#999999;
text-decoration:none;
}

/** index **/
#index .wrapper{
	width:1024px;
	background:url(../img/index/index_bg.jpg);
	height:700px;
	margin:0 auto;}
	
#index h1{
	text-indent:-9999px;}
#index ul{
	display:block;
	margin-left:50px;
	width: 200px;
	margin-top: 40px;
}	
#index ul li{
	text-indent:-9999px;
	display:block;
	width:200px;
	height:35px;
}

#index ul li a{
	display:block;
	width:200px;
	height:35px;
}
#index ul li.story a:hover{
	display:block;
	width:200px;
	height:35px;
	background:url(../img/index/navi_story_on.jpg) no-repeat 0 0;
}

#index ul li.news a:hover{
	display:block;
		width:200px;
	height:35px;
	background:url(../img/index/navi_news_on.jpg) no-repeat 0 0;

}
#index ul li.work a:hover{
	display:block;
		width:200px;
	height:35px;
	background:url(../img/index/navi_work_on.jpg) no-repeat 0 0;

}
#index ul li.order a:hover{
	display:block;
		width:200px;
	height:35px;
	background:url(../img/index/navi_order_on.jpg) no-repeat 0 0;

}



#index ul li.blog a:hover{
	display:block;
		width:200px;
	height:35px;
	background:url(../img/index/navi_blog_on.jpg) no-repeat 0 0;

}
#index ul li.access a:hover{
	display:block;
		width:200px;
	height:35px;
	background:url(../img/index/navi_access_on.jpg) no-repeat 0 0;

}
#index ul li.profile a:hover{
	display:block;
		width:200px;
	height:35px;
	background:url(../img/index/navi_profile_on.jpg) no-repeat 0 0;

}

/** navi **/	
.second .wrapper .navi {
	text-indent: -9999px;
	float: left;
	background:url(../img/common/navi.jpg) no-repeat;
	height:38px;
	display:block;
	width:781px;
	margin:0 0 0 20px;
}
.second .wrapper .navi ul li{
	display:inline;
}

.second .wrapper .navi ul .story a{
	float: left;
	display:block;
	width:156px;
	height:38px;
	
}
.second .wrapper .navi ul .news a{
	float: left;
	display:block;
	width:126px;
	height:38px;
	
}

.second .wrapper .navi ul .work a{
	float: left;
	display:block;
	width:64px;
	height:38px;
	
}
.second .wrapper .navi ul .order a{
	float: left;
	display:block;
	width:72px;
	height:38px;
	
}
.second .wrapper .navi ul .access a{
	float: left;
	display:block;
	width:69px;
	height:38px;
	
}

.second .wrapper .navi ul .blog a{
	float: left;
	display:block;
	width:122px;
	height:38px;
	
}

.second .wrapper .navi ul .links {
	float: left;
	display:block;
	width:83px;
	height:38px;
	
}

.second .wrapper .navi ul .profile a{
	float: left;
	display:block;
	width:89px;
	height:38px;
	
}
.second .wrapper .navi ul .story a:hover{
	background:url(../img/common/navi.jpg) no-repeat -0px -38px;}
.second .wrapper .navi ul .news a:hover{
	background:url(../img/common/navi.jpg) no-repeat -156px -38px;}
.second .wrapper .navi ul .work a:hover{
	background:url(../img/common/navi.jpg) no-repeat -282px -38px;}
.second .wrapper .navi ul .order a:hover{
	background:url(../img/common/navi.jpg) no-repeat -346px -38px;}

.second .wrapper .navi ul .access a:hover{
	background:url(../img/common/navi.jpg) no-repeat -418px -38px;}
.second .wrapper .navi ul .blog a:hover{
	background:url(../img/common/navi.jpg) no-repeat -487px -38px;}
.second .wrapper .navi ul .profile a:hover{
	background:url(../img/common/navi.jpg) no-repeat -692px -38px;}


/** story **/
#story .wrapper{
	width:1024px;
	background:url(../img/story/bg.jpg) no-repeat bottom;
	height:750px;
	margin:0 auto;
	position:relative;
}
	
#story h1{
	text-indent:-9999px;}
	
#story .wrapper #textbox {
	text-indent: -9999px;
	position: absolute;
	height: 568px;
	width: 274px;
	top: 76px;
	left: 650px;
}

#story  .wrapper #backlink {
	text-indent: -9999px;
	position: absolute;
	height: 65px;
	width: 145px;
	top: 667px;
	left: 874px;
}


/** access **/
#access .wrapper{
	width:1024px;
	background:url(../img/access/accessbg.jpg) no-repeat bottom;
	height:750px;
	margin:0 auto;
	position:relative;
}
	
#access h1{
	text-indent:-9999px;}
	
#access .wrapper #textbox {
	text-indent: -9999px;
	position: absolute;
	height: 261px;
	width: 274px;
	top: 155px;
	left: 89px;
}
#access .wrapper #pdflink {
	text-indent: -9999px;
	position: absolute;
	height: 24px;
	width: 120px;
	top: 540px;
	left: 830px;
}
#access .wrapper #maplink {
	text-indent: -9999px;
	position: absolute;
	height: 23px;
	width: 122px;
	top: 568px;
	left: 828px;
}
#access .wrapper #backlink {
	text-indent: -9999px;
	position: absolute;
	height: 65px;
	width: 145px;
	top: 667px;
	left: 874px;
}
/** profle **/
#profile .wrapper{
	width:1024px;
	background:url(../img/profile/bg.jpg) no-repeat bottom;
	height:750px;
	margin:0 auto;
	position:relative;
}
	
#profile h1{
	text-indent:-9999px;}
	
#profile .wrapper #textbox {
	text-indent: -9999px;
	position: absolute;
	height: 168px;
	width: 453px;
	top: 192px;
	left: 290px;
}

#profile .wrapper #backlink {
	text-indent: -9999px;
	position: absolute;
	height: 65px;
	width: 145px;
	top: 667px;
	left: 874px;
}
#profile .wrapper #aoiheyalink {
	text-indent: -9999px;
	position: absolute;
	height: 18px;
	width: 74px;
	top: 362px;
	left: 554px;
}
#profile .wrapper #kuramotolink {
	text-indent: -9999px;
	position: absolute;
	height: 18px;
	width: 76px;
	top: 415px;
	left: 561px;
}
#profile .wrapper #hanasakilink {
	text-indent: -9999px;
	position: absolute;
	height: 18px;
	width: 118px;
	top: 469px;
	left: 377px;
}
#profile .wrapper #shirokumalink {
	text-indent: -9999px;
	position: absolute;
	height: 18px;
	width: 105px;
	top: 496px;
	left: 377px;
}
/** order **/
#order .wrapper{
	width:1024px;
	background:url(../img/order/bg.jpg) no-repeat bottom;
	height:750px;
	margin:0 auto;
	position:relative;
}
	
#order h1{
	text-indent:-9999px;}
	
#order .wrapper #textbox {
	text-indent: -9999px;
	position: absolute;
	height: 568px;
	width: 274px;
	top: 75px;
	left: 273px;
}

#order  .wrapper #backlink {
	text-indent: -9999px;
	position: absolute;
	height: 65px;
	width: 145px;
	top: 667px;
	left: 874px;
}
#order .wrapper .box1 {
	height: auto;
	width: auto;
	position: absolute;
	left: 157px;
	top: 107px;
}
#order .wrapper .box2 {
	height: auto;
	width: 369px;
	position: absolute;
	left: 156px;
	top: 267px;
}
#order .wrapper .box3 {
	height: auto;
	width: auto;
	position: absolute;
	left: 156px;
	top: 377px;
}
#order .wrapper h2 {
	text-indent: -9999px;
}
#order .wrapper .ph01 {
	position: absolute;
	left: 573px;
	top: 153px;
}
#order .wrapper .ph02 {
	position: absolute;
	left: 780px;
	top: 153px;
}
#order .wrapper .ph03 {
	position: absolute;
	left: 573px;
	top: 322px;
}
#order .wrapper .ph04 {
	position: absolute;
	left: 780px;
	top: 322px;
}
/** works **/
#works .wrapper{
	width:1024px;
	background:url(../img/works/bg.jpg) no-repeat bottom;
	height:750px;
	margin:0 auto;
	position:relative;
}
	
#works h1{
	text-indent:-9999px;}
	
#works .wrapper #textbox {
	text-indent: -9999px;
	position: absolute;
	height: 568px;
	width: 274px;
	top: 75px;
	left: 273px;
}

#works  .wrapper #backlink {
	text-indent: -9999px;
	position: absolute;
	height: 65px;
	width: 145px;
	top: 667px;
	left: 874px;
}
#works .wrapper .box1 {
	height: auto;
	width: auto;
	position: absolute;
	left: 157px;
	top: 107px;
}
#works .wrapper .box2 {
	height: auto;
	width: 369px;
	position: absolute;
	left: 156px;
	top: 235px;
}
#works .wrapper .box3 {
	height: auto;
	width: auto;
	position: absolute;
	left: 156px;
	top: 345px;
}
#works .wrapper h2 {
	text-indent: -9999px;
}
#works .wrapper .ph01 {
	position: absolute;
	left: 174px;
	top: 104px;
}
#works .wrapper .ph02 {
	position: absolute;
	left: 380px;
	top: 104px;
}
#works .wrapper .ph03 {
	position: absolute;
	left: 641px;
	top: 404px;
}
#works .wrapper .ph04 {
	position: absolute;
	left: 785px;
	top: 404px;
}
#works .wrapper #line1 {
	margin-top: 100px;
	margin-left: 180px;
}
#works .wrapper #line1 li {
	display: inline;
	margin-right: 15px;
}
#works .wrapper #line2 {
	margin-top: 30px;
	margin-left: 180px;
}
#works .wrapper #line2 li {
	display: inline;
	margin-right: 15px;
}
#works .wrapper #line3 {
	margin-top: 30px;
	margin-left: 180px;
}
#works .wrapper #line3 li {
	display: inline;
	margin-right: 15px;
}