@charset "utf-8";
/**********************************
　　　　　　　基本
**********************************/

*{ margin: 0; padding: 0;}


li{ list-style-position:inside;}

hr{
	clear: left;
	visibility: hidden;
	height: 0;
	margin: 0;
	line-height: 0;
	border: none;
}
body{
	background: url(img/bk_bottom.jpg)  center bottom;
	/*
	font-family: "ＭＳ Ｐゴシック", Georgia, "Times New Roman", Times, serif, arial, Osaka, Times New Roman;
	*/
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 75%;
	line-height: 1.7;
	letter-spacing: 0.1em;
	color: #2b2b2b;
}

.center{
		text-align: center;
}
.right{
	float: right;
}

.red-bold{
		color: #C00;
		font-weight: bold;
}

.textright{
	text-align: right;
}

img{
	border: none;
}

#body{
	background: url(img/bk.jpg) no-repeat center top;
	width: 100%;
	margin: 0px auto;
}

/**********************************
　　　　  header & nav
**********************************/

#header{
	width: 890px;
	margin: 0px auto;
}

h1{
	width: 280px;
	margin: 15px 0px 0px 0px;
	float: left;
}
* html 
h1 img,
h2 img,
h3 img,
h4 img-tel{ /* IE-expression (fix png alpha) */
behavior: expression(
this.style.filter = this.src.match(/\.png$/) ? "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')" : this.style.filter,
this.src = this.src.match(/\.png$/) ? this.src.slice(0, this.src.lastIndexOf("/")+1) + "ie6png.gif" : this.src,
this.style.behavior = "none"
);
}

/*
#top-p{
	float: left;
	width: 317px;
	margin-top: 38px;
	margin-left: 10px;
}

h2{
	width: 270px;
	float: right;
	margin-bottom: 10px;
}
*/

h2{
	float: left;
	width: 317px;
	margin-top: 38px;
	margin-left: 280px;
	margin-bottom: 26px;
}

ul#nav{
	width: 850px;
	height: 88px;
	margin: 0px auto 0px;
	clear: both;
}


ul#nav li{
	list-style:none;
	text-indent: -8467px;
	float: left;
	height: 88px;
	display: block;
}

ul#nav li a{
	background: url(img/nav.jpg) no-repeat;
	margin: 0;
	padding: 0;
	display: block;
	height: 88px;
}
ul#nav li a{
	overflow:hidden;
	outline:none;
}

ul#nav li#nav01 {	width:  104px;}
ul#nav li#nav02 {	width:  106px;}
ul#nav li#nav03 {	width:  106px;}
ul#nav li#nav04 {	width:  106px;}
ul#nav li#nav05 {	width:  106px;}
ul#nav li#nav06 {	width:  106px;}
ul#nav li#nav07 {	width:  106px;}
ul#nav li#nav08 {	width:  110px;}

ul#nav li#nav01 a{	background-position:     0px 0px;}
ul#nav li#nav02 a{	background-position:  -104px 0px;}
ul#nav li#nav03 a{	background-position:  -210px 0px;}
ul#nav li#nav04 a{	background-position:  -316px 0px;}
ul#nav li#nav05 a{	background-position:  -422px 0px;}
ul#nav li#nav06 a{	background-position:  -528px 0px;}
ul#nav li#nav07 a{	background-position:  -634px 0px;}
ul#nav li#nav08 a{	background-position:  -740px 0px;}

ul#nav li#nav01 a:hover{	background: url(img/nav_h.jpg)     0px 0px;}
ul#nav li#nav02 a:hover{	background: url(img/nav_h.jpg)  -104px 0px;}
ul#nav li#nav03 a:hover{	background: url(img/nav_h.jpg)  -210px 0px;}
ul#nav li#nav04 a:hover{	background: url(img/nav_h.jpg)  -316px 0px;}
ul#nav li#nav05 a:hover{	background: url(img/nav_h.jpg)  -422px 0px;}
ul#nav li#nav06 a:hover{	background: url(img/nav_h.jpg)  -528px 0px;}
ul#nav li#nav07 a:hover{	background: url(img/nav_h.jpg)  -634px 0px;}
ul#nav li#nav08 a:hover{	background: url(img/nav_h.jpg)  -740px 0px;}

ul#nav li#nav01.current{	background: url(img/nav_cu.jpg)     0px 0px;}
ul#nav li#nav02.current{	background: url(img/nav_cu.jpg)  -104px 0px;}
ul#nav li#nav03.current{	background: url(img/nav_cu.jpg)  -210px 0px;}
ul#nav li#nav04.current{	background: url(img/nav_cu.jpg)  -316px 0px;}
ul#nav li#nav05.current{	background: url(img/nav_cu.jpg)  -422px 0px;}
ul#nav li#nav06.current{	background: url(img/nav_cu.jpg)  -528px 0px;}
ul#nav li#nav07.current{	background: url(img/nav_cu.jpg)  -634px 0px;}
ul#nav li#nav08.current{	background: url(img/nav_cu.jpg)  -740px 0px;}




/**********************************
　　　　　　body(top)
**********************************/

#contents{
	background:url(img/contents_bk.jpg) no-repeat center top;
	width: 840px;
	padding: 5px;
	margin: 0px auto;
}

#topleft{
	float: left;
}

#topright{
	float: right;
	width: 360px;
}

p#footnav {
	padding: 30px 0 10px 0;
	text-align: center;
}

#kodawari{
	background: url(img/kodawari.gif) no-repeat center top;
	width: 458px;
	height: 246px;
	margin-left: 10px;
}
#kodawari p{
	text-align: center;
	margin: 10px 0px 0px;
}

#works{
	width: 474px;
	margin-top: 10px;
}

#works_contents{
	background: url(img/works_bk_middle.gif) repeat-y center;
	width: 474px;
	padding: 0px;
}
#works_contents h4{
		background: url(img/works-h4.gif) no-repeat;
		width: 428px;
		height: 25px;
		color: #FFF;
		margin-left: 15px;
		padding-left: 20px;
		padding-top: 5px;
		font-size: 11pt;
}
table#work-table{
	width: 434px;
	margin-left: 15px;
}

table#work-table p{
	margin-left: 10px;
	color: #383c3c;
}

table#work-table img{
	float: right;
	margin: 0px 10px;
}

#works_bottom{
	width: 474px;
	height: 22px;
	background: url(img/works_bk_bottom.gif) no-repeat center bottom;
	clear: both;
}

#info_top,
#blog_top{
	margin-bottom: 30px;
}

#info_top ul li{
	list-style: none;
	background: url(img/info_list.gif) no-repeat left 4px;
	padding-left: 20px;
	margin-left: 20px;
	margin-bottom: 10px;
/*	font-family: "MS ･ゴシック",arial, Osaka, Times New Roman;*/
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,"ＭＳ Ｐゴシック",sans-serif;
	}
#blog_top ul li{
	list-style: none;
	background: url(img/info_list2.gif) no-repeat left 4px;
	padding-left: 20px;
	margin-left: 20px;
	margin-bottom: 10px;
/*	font-family: "MS ･ゴシック",arial, Osaka, Times New Roman;*/
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,"ＭＳ Ｐゴシック",sans-serif;
	}
#blog_top ul li a:link{
	color: #000;
	text-decoration: none;
	border-bottom: 1px #666 solid;
}
#blog_top ul li a:visited{
	color: #666;
	text-decoration: none;
	border-bottom: 1px #666 dotted;
}
#blog_top ul li a:hover{
	color: #000;
	text-decoration: none;
	border: none;
	background: #FF9;
}

.date{
	color:#666;
	font-size: 90%;
}

.more{
	text-align: right;
	margin-right: 10px;
	margin-bottom: 5px;
}
#voice-top{
	margin-left: 5px;
}

h3#h3-center{
	text-align: center;
}

/***** flow ******/

h3#flow_h3{
	margin: 10px 30px;
}

.flow{
	background: #ffffff url(flow/img/flow_top.jpg) no-repeat center top;
	border-left: 1px #331608 solid;
	border-right: 1px #331608 solid;
	width: 710px;
	margin-left: 60px;
}

.flow h4{
	padding: 10px 0px 0px 10px;
}

.flow p,
.flow h5{
	margin-left: 95px;
	padding-bottom: 10px;
}

.flow_bottom{
	background: url(flow/img/flow_bottom.jpg) no-repeat center bottom;
	height: 27px;
	width: 712px;
	margin-left: 60px;
}

.ya{
	background: url(flow/img/ya.gif) no-repeat center center;
	width: 55px;
	height: 60px;
	margin: 10px auto;
}

img#flow-step{
	margin: 20px 0px 40px 30px;
}


/***** works ******/

.works_list{
		border: 1px #999 solid;
		background: #fff;
		width: 250px;
		margin: 10px 0px 5px 20px;
		float: left;
}

.works_list h4{
		background: url(works/img/works-li_h4.jpg) no-repeat center center;
		width: 238px;
		height: 25px;
		padding-top: 5px;
		padding-left: 10px;
		margin: 5px auto;
		color: #f60;
		font-weight: normal;
		font-size: 11pt;
}
.works_list p.images{
		margin: 5px;
		text-align:center;
		min-height:179px;
		height:auto !important;
		height:179px;
}

.works_list p{
		color: #595857;
		line-height: 1.7;
		margin: 5px;
}

.works_list p.to-detail{
		text-align: right;
}

h4#detail_ti{
		background: url(works/img/works-detail_ti.jpg) no-repeat;
		width: 737px;
		height: 57px;
		padding-top: 20px;
		padding-left: 50px;
		margin: 0px auto 0px;
		color: #fff;
		font-size: 12pt;
	}
h4#detail_ti .date{
		color: #fff;
		margin-left: 580px;
}

#detail_contents{
		border-left: 1px #a0a0a0 solid;
		border-right: 1px #a0a0a0 solid;
		width: 785px;
		background: #fff;
		margin: 10px auto 0px;
}

#detail_contents .data1{
		width: 747px;
		margin: 0px auto 10px;
		padding-bottom: 30px;
		padding-top: 10px;
		background: url(works/img/works_border.jpg) no-repeat center bottom;
}

#detail_contents .data1 img{
		float: left;
		margin-right: 10px;
}

#detail_contents .data1 p{
		margin: 0px 10px;
		color: #595857;
		line-height: 1.7;
}

#return{
		text-align: center;
		margin-top: 30px;
}

#detail_bottom{
	background: url(works/img/works-detail_bottom.jpg) no-repeat;
	width: 787px;
	height: 16px;
	margin: 0px auto 20px;
}

/***** concept ******/

#concept-contents{
	width: 650px;
	margin: 10px auto;
}

#concept-contents h3{
	margin-bottom: 20px;
}

#concept-contents h4{
	margin-bottom: 20px;
}

.item{
	width: 720px;
	margin: 10px auto;
	border: 1px #ff6364 solid;
	padding: 10px;
	background: #FFF;
	overflow: hidden;
}

.item h6{
	background: url(concept/img/item-name.gif) no-repeat;
	width: 683px;
	height: 28px;
	padding-left: 30px;
	padding-top: 3px;
	color: #FFF;
	font-size: 130%;
}

.item-img{
	float: left;
	margin: 10px;
	padding: 5px;
	border: 1px #CCC solid;
}

.concept-detail {
	width: 360px;
	padding-left: 8px;
	float: left;
}

.item p.comment{
	margin: 10px 0px;
}

p.p-link{
	background: url(concept/img/item-link.gif) no-repeat bottom left;
	padding-left: 20px;
	padding-top: 20px;
	margin-left: 25px;
	margin-right: 25px;
	margin-top: 30px;
	line-height: 1;
	border-top: 1px #CCC dotted;
}

p.p-link-name a{
	color: #33C;
	text-decoration: none;
	border-bottom: 1px #33C dotted;
	margin-left: 55px;
	margin-top: 10px;
}

p.p-detail{
	padding-top: 5px;
	text-align: right;
}

.item p.comment-detail{
	margin: 10px 0px;
	padding-left: 10px;
	clear: left;
}

p.p-link-detail{
	background: url(concept/img/item-link.gif) no-repeat bottom left;
	padding-left: 20px;
	padding-top: 20px;
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 30px;
	line-height: 1;
	border-top: 1px #CCC dotted;
}

p.p-link-name-detail a{
	color: #33C;
	text-decoration: none;
	border-bottom: 1px #33C dotted;
	margin-left: 80px;
	margin-top: 10px;
}
.item-details {
	margin-bottom: 10px;
	padding-bottom: 20px;
	background: url(concept/img/works_border.jpg) no-repeat center bottom;
}

/***** voice ******/

h3#h3-center.h3-voice img{ /* IE-expression (fix png alpha) */
behavior: expression(
this.style.filter = this.src.match(/\.png$/) ? "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')" : this.style.filter,
this.src = this.src.match(/\.png$/) ? this.src.slice(0, this.src.lastIndexOf("/")+1) + "ie6png.gif" : this.src,
this.style.behavior = "none"
);
}

#voice-contents{
		border-left: 1px #a0a0a0 solid;
		border-right: 1px #a0a0a0 solid;
		width: 785px;
		background: #fff url(voice/img/voice-title_02.gif) no-repeat center top;
		margin: 0px auto;
		padding: 5px 0px;
}

table.voice-box{
		width: 747px;
		margin: 0px auto 10px auto;
		border: 1px #000 solid;
		background: #fefbd6;
		padding: 0 2px;
}
table.voice-box td p{
		padding-top: 10px;
}

table.voice-box td.eximages img{
		margin: 10px 10px 10px 5px;
}

table.voice-box p{
		color: #595857;
		line-height: 1.7;
		padding: 0 5px;
}

h4.h4-voice{
		background: url(voice/img/voice-name.jpg) no-repeat center bottom;
		height: 22px;
		width: 202px;
		margin: 0px 0px 0px 400px;
		padding-left: 150px;
		padding-top: 25px;
		color: #fff;
		font-size: 11pt;
}

.from_customers{
		margin: 20px 0px 0px 0px;
}
.voice-todetail{
		margin-left: 130px;
}

.from_us{
		background: #e0ebaf;
		/*border: 1px #b8d200 solid;*/
		border: 1px #fff dashed;
		padding: 10px 5px;
		margin: 20px 5px;
		color: #455765;
}

img.from_us_img{
	clear: both;
}

/***** staff ******/
h3.staff_h3{
		clear: both;
		margin-bottom: 5px;
}
h3.staff_h3_l{
		width:170px;
		float:left;
}
p.staff_h3_left{
		width:600px;
		float:left;
		padding-top:7px;
}

.staff-box{
		background: #fff;
		width: 819px;
		border: 1px #999 solid;
		margin: 5px auto 20px;
		padding: 5px;
		overflow: hidden;
}

.staff-box h4{
		margin: 5px 0px 15px 5px;
		padding-left: 10px;
		font-size: 140%;
		background: url(staff/img/staff-box_h4.gif) no-repeat center left;
}

.staff-box img{
		float: left;
		padding: 10px;
}

.staff-box p{
		margin: 0px 5px 5px 5px;
		color: #455765;
}
.staff_list{
		border: 1px #999 solid;
		background: #fff;
		width: 268px;
		margin: 0px 10px 20px 0px;
		float: left;
}

.staff_list h4{
		background: url(staff/img/staff-name-bk.gif) no-repeat center center;
		font-weight: normal;
		padding-left: 10px;
		margin: 10px 0px;
}

.staff_list img{
		margin: 5px 0px 5px 13px;
}

.staff_list p{
		margin: 5px 10px;
		line-height: 1.4;
		color: #455765;
}

/***** aboutus ******/

#about-contents{
	width: 600px;
	margin: 0px auto;
}

#about{
	background: url(aboutus/img/about.gif) no-repeat;
	width: 695px;
	height: 322px;
	padding: 10px 30px 0px;
	margin: 10px auto 0;
}

table#table-about{
	width: 550px;
}

table#table-about td{
	border-bottom: 1px #999 dashed;
	padding: 5px 20px;
}

#about2{
	background: url(aboutus/img/about.gif) no-repeat;
	width: 695px;
	height: 322px;
	padding: 20px 30px;
	margin: 0 auto;
}

table#table-about2{
	width: 550px;
}

table#table-about2 td{
	border-bottom: 1px #999 dashed;
	padding: 5px 20px;
}


#mapframe{
	margin: 10px auto;
	padding: 10px;
	border: 1px #999 solid;
	width: 700px;
	background: #fff;
}

.kanren{
	margin: 10px auto 5px;
	background: #fff;
	border: 1px #999 solid;
	padding: 0px 10px;
	overflow: hidden;
}

.kanren img{
	float: right;
	margin: 10px 15px 10px 10px;
}
.kanren p.comment img{
	float: none;
	margin:0;
}
.kanren p.comment a{
	text-decoration: none;
	border:none;
	background:none;
	padding:0;
}
.kanren p.comment a:visited{
	text-decoration: none;
	border:none;
	background:none;
	padding:0;
}

.kanren p.comment a:hover{
	text-decoration: none;
	border:none;
	background:none;
	padding:0;
}
.kanren h4{
	background: url(aboutus/img/kanren_h4.gif) no-repeat center center;
	padding: 3px 10px;
	margin: 5px 0px;
	font-weight: normal;
	font-size: 120%;
	color: #333;
}

.kanren p{
	margin: 10px 0px;
}

.kanren p a{
	color: #060;
	text-decoration: none;
	border-bottom: 1px #060 dashed;
	background: url(aboutus/img/kanren_p.gif) no-repeat center left;
	padding-left: 15px;
}
.kanren p a:visited{
	color: #060;
	text-decoration: none;
	border-bottom: 1px #060 dotted;
	background: url(aboutus/img/kanren_p.gif) no-repeat center left;
	padding-left: 15px;
}

.kanren p a:hover{
	color: #060;
	text-decoration: none;
	border: none;
	background: url(aboutus/img/kanren_p.gif) no-repeat center left;
	padding-left: 15px;
}

.kanren-comment {
	clear: both;
	background: #FFF8AC;
	border: 1px #FBD372 dashed;
	padding: 0 10px;
	margin: 20px 5px;
	color: #455765;
}

.kanren-comment img{
	float: right;
	margin: 10px 0;
}


/***** info ******/

.infobox{
	width: 600px;
	margin: 20px auto 10px;
	padding-bottom: 20px;
	overflow: hidden;
}

.infobox img{
	float: right;
	margin: 0px 10px;
	padding: 10px;
	border: 1px #CCC solid;
	background: #fff;
}

.infobox .title{
	background: url(info/img/info-h4.gif) no-repeat center center;
	color: #ffffff;
	width: 562px;
	height: 25px;
	margin: 0px auto 10px;
	padding-top: 8px;
	padding-left: 30px;
	font-weight: normal;
}

.infobox .title h4{
	font-weight: normal;
	float: left;
	font-size: 12px;
}

.infobox .title p{
	float: right;
	margin-right: 10px;
	}


#mail-form{
	background: url(mail/img/mail-formbk.gif) no-repeat;
	width: 700px;
	height: 520px;
	margin: 0px auto;
	padding-top: 20px;
}

#mail-form p{
	margin-left: 180px;
}

#mail-form p.p-center{
	margin: 0;
	text-align: center;
}

p#sent{
	margin-left: 280px;
	margin-top: 10px;
}
p#thanks{
	text-align: center;
	margin-top: 50px;
	margin-left: 0px;
}


/**********************************
　　　　　　footer
**********************************/

#footer{
	width: 850px;
	height: 100px;
	padding-top: 50px;
	text-align: center;
	color: #FFF;
	background: url(img/footer.gif) no-repeat center center;
	margin: 0 auto 20px;
	clear: both;
}

#footer address{
	float:left;
	font-style: normal;
	width: 333px;
	padding-left:200px;
}

#footer-p{
	float: left;
	width: 287px;
	margin-top: -25px;
	padding-right:30px;
}
#footer2{
	width: 1000px;
	height: 170px;
	padding-top: 40px;
	text-align: left;
	color: #FFF;
	background: url(img/footer.gif) no-repeat center center;
	margin: 0 auto 20px;
	clear: both;
}

#footer2 p.address1{
	float:left;
	font-style: normal;
	width: 380px;
	padding:20px 0 0 280px;
	line-height:1.4;
}
#footer2 p.address2{
	float:left;
	font-style: normal;
	width: 390px;
	padding:17px 0 0 10px;
}

#footer2-p{
	float: left;
	width: 208px;
	padding:15px 0 0 0;
}


#links{
	width: 850px;
	text-align: center;
	border: 1px #FCC solid;
	padding: 10px 0px 10px;
	margin: 0px auto;
	color: #999;
}

#links a:link{
	color: #ffa5a5;
	text-decoration: none;
}

#links a:hover{
	color: #FFF;
	background: #ffa5a5;
}

#links a:visited{
	color: #fdbaba;
	text-decoration: none;
}
#links div.banner {
	width: 810px;
	margin:15px auto 0;
	padding-top:10px;
	border-top:1px solid #FFCCCC;
}
#links div.banner table {
	margin:0 auto;
}
#links div.banner table th{
	padding:0 0 2px 0;
	color:#666;
}
#links div.banner table td{
	padding:0 5px;
}
#links div.banner2 {
	width: 810px;
	margin:15px auto 0;
	padding-top:10px;
	border-top:1px solid #FFCCCC;
}
#links div.banner2 table {
	margin:0 auto;
}
#links div.banner2 table th{
	padding:0 0 2px 0;
	color:#666;
}
#links div.banner2 table td{
	padding:0 5px;
}


#copylight{
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
	margin-bottom: 30px;
	margin-top: 20px;
	clear: both;
}
.mgn-btm5{
	margin-bottom:5px;
}
#mail-form span.attention{
	color:#F00;
}

/* CLEARFIX
---------------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}


.emergency{
	background-color:#FFF;
	padding:5px;
	margin-bottom:10px;
}
.emergency .bold{
	font-weight:bold;
}
.emergency .text-right{
	text-align:right;
}