/*
Theme Name: 4ever
Theme URI: http://www.fourever.co.jp/
Author: Yutaka Tsuchiya
Author URI: http://www.fourever.co.jp/
Version: 1.0
License:
License URI:
*/
/*--------------------------------------------------
　reset
--------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-weight:normal;/* Yutaka added */
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Yutaka added */
table, tr, th, td, caption{
	vertical-align: middle;
	text-align:left;
}
/*--------------------------------------------------
　body
--------------------------------------------------*/
body {
	height:4800px;
	color : #111111;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size : 12px;
	line-height : 1.0em;
	background:#FFFFFF url("images/bg_01.gif") center top;
}
a {
	color: #446600;
	text-decoration:none;
}
a:hover {
	color : #779900;
}
.clear {
	clear:both;
}
#wrap{
	position:relative;
}
/*--------------------------------------------------
　header
--------------------------------------------------*/
#header {
	width:100%;
	height:136px;
	background:url("images/header_navi_bg.png") center 0 repeat-x;
	position:relative;
	z-index:1;
}
	#header .inner{
		margin:0 auto;
		padding:0 20px;
		width :940px;
		height :136px;
	}
		#headerLogo{
			width:180px;
			height:111px;
			float:left;
		}
			#headerLogo a{
				display: block;
				width:180px;
				height:111px;
				background: url("images/header_logo.png") left top no-repeat;
				text-indent:-9999px;
			}
		#header .navi{
			width:720px;
			height:136px;
			float:left;
		}
			#header .navi li{
				margin:50px 0 0 0;
				padding:0 24px 0 16px;
				height:12px;
				float:right;
				background:url("images/header_navi_border.png") right center no-repeat;
				overflow:hidden;
			}
				#header .navi li#naviHome{
					padding:0 24px 0 0;
					width:41px;
				}
				#header .navi li#naviNews{
					width:43px;
				}
				#header .navi li#naviService{
					width:62px;
				}
				#header .navi li#naviAbout{
					width:51px;
				}
				#header .navi li#naviRecruit{
					width:63px;
				}
				#header .navi li#naviContact{
					padding:0 0 0 16px;
					width:68px;
					background:none;
				}
				
				#header .navi li a{
					display:block;
					height:12px;
				}
					#header .navi li#navilHome a{
						width:41px;
						background-position:0 0;
					}
					#header .navi li#naviNews a{
						width:43px;
						background-position:-41px 0;
					}
					#header .navi li#naviService a{
						width:62px;
						background-position:-84px 0;
					}
					#header .navi li#naviAbout a{
						width:51px;
						background-position:-146px 0;
					}
					#header .navi li#naviRecruit a{
						width:63px;
						background-position:-197px 0;
					}
					#header .navi li#naviContact a{
						width:68px;
						background-position:-260px 0;
					}
						/*#headerNavi li.navilHome a:hover{
							background-position:0 -12px;
						}

						#headerNavi li.naviNews a:hover{
							background-position:-41px -12px;
						}					

						#headerNavi li.naviService a:hover{
							background-position:-84px -12px;
						}

						#headerNavi li.naviAbout a:hover{
							background-position:-146px -12px;
						}

						#headerNavi li.naviRecruit a:hover{
							background-position:-197px -12px;
						}
						#headerNavi li.naviContact a:hover{
							background-position:-260px -12px;
						}*/

			#topImage .image{
				width :100%;
				height : 600px;
			}
				#topImage .image{
					width :100%;
					height : 600px;
					position:fixed;
					top:0;
					z-index:-1;
				}
					#topImage .image p{
						width :100%;
						height : 600px;
						background:#111111 url("images/top_image.jpg") center 0 no-repeat;
						text-indent:-9999px;
					}
				#topImage .catch{
					margin:-36px 0 0 0;
					width :100%;
					height : 500px;
					background: url("images/top_image_catch.png") center 0 no-repeat;
				}

/*--------------------------------------------------
　works
--------------------------------------------------*/
#works{
	margin:-30px 0 0 0;
	width:100%;
	background:url("images/works_bg.gif") 0 30px repeat-x;
	position: relative;
	z-index:2;
}

	#works .inner{
		margin:0 auto;
		padding:0 20px;
		width:940px;
		height:460px;
	}
		#works .work01{
			width:940px;
			height:450px;
		}
	
			#works .work01 .workText{
				margin:80px 0 0 0;
				width:440px;
				float:left;
			}
				#works .work01 .workText .title{
					padding:0 60px 10px 0;
					width:380px;
					height:34px;
					border-bottom:#a6cec1 solid 1px;
				}
					#works .work01 .workText .title h4{
						margin:4px 70px 2px 0;
						width:170px;
						height:28px;
						background:url("images/work01_title.png") 0 0 no-repeat;
						text-indent:-9999px;
						float:left;
					}		
					#works .visit{
						width:140px;
						height:34px;
						background:url("images/works_visit_btn.gif") 0 -34px no-repeat;
						text-indent:-9999px;
						float:left;
					}
						#works .visit a{
							display:block;
							width:140px;
							height:34px;
							background:url("images/works_visit_btn.gif") 0 0 no-repeat;
						}
				#works .work01 .workText .text{
					padding:10px 0 0 0;
					width:380px;
					font-size:12px;
					line-height:17px;
				}
			#works .work01 .workImage{
				float:left;
			}
	
		#works .work02{
			margin:0 0 0 0;
			width:940px;
			height:450px;
			position: absolute;
			top:90px;
		}
	
			#works .work02 .workText{
				margin:200px 0 0 0;
				width:440px;
				float:right;
			}
				#works .work02 .workText .title{
					padding:0 0 10px 60px;
					width:380px;
					height:34px;
					border-bottom:#a6cec1 solid 1px;
				}
					#works .work02 .workText .title h4{
						margin:4px 172px 2px 0;
						width:68px;
						height:28px;
						background:url("images/work02_title.png") 0 0 no-repeat;
						text-indent:-9999px;
						float:left;
					}		
				#works .work02 .workText .text{
					padding:10px 0 0 60px;
					width:380px;
					font-size:12px;
					line-height:17px;
				}
			#works .work02 .workImage{
				float:right;
			}

/*--------------------------------------------------
　news
--------------------------------------------------*/

#news{
	margin:-10px 0 0 0;
	padding:80px 0 100px 0;
	width:100%;
	height:400px;
	background:url("images/news_bg.gif") center 0;
	position:relative;
	z-index:1;
}
	#news .inner{
		margin:0 auto;
		padding:0 20px;
		width:940px;
	}
		#news .inner .title{
			margin:0 40px 0 0;
			width:280px;
			height:400px;
			float:left;
			position:relative;
		}
			#news .inner .title h3{
				margin:-140px 0 0 0;
				width:280px;
				height:280px;
				text-indent:-9999px;
				background:url("images/news_title.png") 0 0 no-repeat;
				position:absolute;
				top:50%;
			}
		#news .inner .text{
			margin:0 0 0 0;
			width:620px;
			height:400px;
			color:#ffffff;
			float:left;
			font-size:13px;
			line-height:18px;
			overflow:hidden;
		}
			#news .inner .text dt{
				padding:0 0 8px 0;
				font-family:"Arial Black";
				font-size:16px;
			}
			#news .inner .text dd{
				padding:0 20px 30px 0;
				font-weight:bold;
			}
/*--------------------------------------------------
　service
--------------------------------------------------*/

#service{
	margin:-75px 0 60px 0;
	width:100%;
	position:relative;
	z-index:3;
}

	#service .title{
		width:100%;
		height:150px;
	}
		#service .title h3{
			margin:0 auto;
			width:980px;
			height:150px;
			background:url("images/service_title.png") center 0 no-repeat;
			text-indent:-9999px;
		}
	#service .main{
		margin:0 0 0 0;
		width:100%;
		background:#ffffff;
	}
		#service .inner{
			margin:60px auto 0;
			padding:0 20px;
			width:940px;
			line-height:17px;
			background:#ffffff;
		}
			#service .inner span{
				color:#bbbbbb;
			}
			#service .inner p{
				margin:10px 0 10px 0;
			}
			#service .inner .design{
				width:280px;
				float:left;
			}
				#service .inner .design .image{
					margin:-20px 0 0 0;
					width:280px;
					height:174px;
					text-align:center;
				}
				#service .inner .design .text{
					margin:30px 0 0 0;
					width:280px;
				}
					#service .inner .design .text h4{
						width:280px;
						height:21px;
						background:url("images/servise_title_02.png") 0 0 no-repeat;
						text-indent:-9999px;
					}
			#service .inner .system{
				margin:0 19px;
				padding:0 20px;
				width:300px;
				border-left:#a6cec1 solid 1px;
				border-right:#a6cec1 solid 1px;
				float:left;
			}
				#service .inner .system .image{
					margin:-20px 0 0 0;
					padding:24px 0 0 0;
					width:300px;
					height:150px;
					text-align:center;
				}
				#service .inner .system .text{
					margin:30px 0 0 0;
					width:300px;
				}
					#service .inner .system .text h4{
						width:300px;
						height:21px;
						background:url("images/servise_title_03.png") 0 0 no-repeat;
						text-indent:-9999px;
					}
			#service .inner .adv{
				width:280px;
				float:left;
			}
				#service .inner .adv .image{
					margin:-20px 0 0 0;
					padding:20px 0 0 0;
					width:280px;
					height:154px;
					text-align:center;
				}
				#service .inner .adv .text{
					margin:30px 0 0 0;
					width:280px;
				}
					#service .inner .adv .text h4{
						width:280px;
						height:21px;
						background:url("images/servise_title_04.png") 0 0 no-repeat;
						text-indent:-9999px;
					}

      #service .inner .banner{
				margin: 50px 0 0 0;
			}
        #service .inner .banner a.image{
          display: block;
          text-align: center;
          transition: opacity 0.3s ease-out;
        }
          #service .inner .banner a.image:hover{
            opacity: 0.7;
          }

/*--------------------------------------------------
　about
--------------------------------------------------*/
#about{
	width:100%;
	position:relative;
}
	#about .title{
		margin:0 auto;
		width:140px;
		height:140px;
	}
		#about .title h3{
			width:140px;
			height:140px;
			background:url("images/about_title.png") 0 0 no-repeat;
			text-indent:-9999px;
			position:relative;
			z-index:2;
		}
		#about #map_canvas{
			margin:-70px 0 0 0;
			width:100%;
			height:800px;
		}
			#about #company{
				width:50%;
				height:800px;
				float:left;
				color:#ffffff;
				background:url("images/about_bg.png") 0 0;
				position:absolute;
				top:70px;
			}
				#about #company .inner{
					padding:100px 30px 0 0;
					width:440px;
					float:right;
				}
					#about #company .inner h4{
						margin:0 0 40px 0;
						width:440px;
						height:78px;
						text-indent:-9999px;
						background:url("images/about_catch.png") 0 0 no-repeat;
					}
					#about #company .inner h5{
						margin:0 0 15px 0;
						padding:0 0 10px 0;
						width:440px;
						height:22px;
						background:url("images/about_company_info.png") 0 0 no-repeat;
						font-family:"Arial Black";
						font-size:20px;
						text-indent:-9999px;
						border-bottom:#ffffff solid 1px;
					}
					#about #company .inner dt{
						padding:12px 0;
						width:100px;
						font-weight:bold;
						font-size:13px;
						float:left;
					}
					#about #company .inner dd{
						padding:12px 0 12px 10px;
						width:329px;
						font-size:13px;
						border-left:#ffffff solid 1px;
						float:left;
					}
						#about #company .inner dd li{
							padding:0 0 8px 0;
							line-height:16px;
						}
/*--------------------------------------------------
　recruit
--------------------------------------------------*/
#recruit{
	margin:-70px auto 40px;
	padding:0 20px;
	width:940px;
	line-height:16px;
}
	#recruit .title{
		margin:0 auto;
		width:940px;
		height:140px;
		position:relative;
		z-index:3;
	}
		#recruit .title h3{
			margin:0 auto;
			width:140px;
			height:140px;
			background:url("images/recruit_title.png") 0 0 no-repeat;
			text-indent:-9999px;
		}
		#recruit h4{
			margin:40px auto 50px;
			width:560px;
			height:70px;
			background:url("images/recruit_title_02.png") 0 0 no-repeat;
			text-indent:-9999px;
		}
		#recruit .innerL{
			margin:0 60px 0 0;
			width:440px;
			float:left;
		}
			#recruit .innerL h5{
				margin:0 0 20px 0;
				padding:0 0 10px 0;
				width:440px;
				height:24px;
				background:url("images/recruit_title_03.png") 0 0 no-repeat;
				border-bottom:#bbbbbb solid 1px;
				text-indent:-9999px;
			}
				#recruit .innerL dt{
					padding:12px 0;
					width:80px;
					font-weight:bold;
					font-size:13px;
					float:left;
				}
				#recruit .innerL dd{
					padding:12px 0 12px 10px;
					width:349px;
					font-size:13px;
					border-left:#bbbbbb solid 1px;
					float:left;
				}
					#recruit .innerL dd ul{
						margin:10px 0 0 0;
					}
		#recruit .innerR{
			margin:0 0 0 0;
			width:440px;
			float:left;
		}
			#recruit .innerR h5{
				margin:0 0 20px 0;
				padding:0 0 10px 0;
				width:440px;
				height:24px;
				background:url("images/recruit_title_04.png") 0 0 no-repeat;
				border-bottom:#bbbbbb solid 1px;
				text-indent:-9999px;
			}
				#recruit .innerR dt{
					padding:12px 0;
					width:80px;
					font-weight:bold;
					font-size:13px;
					float:left;
				}
				#recruit .innerR dd{
					padding:12px 0 12px 10px;
					width:349px;
					font-size:13px;
					border-left:#bbbbbb solid 1px;
					float:left;
				}
/*--------------------------------------------------
　contact
--------------------------------------------------*/
#contact {
	width:100%;
}
	#contact .title{
		margin:0 auto;
		width:980px;
		height:140px;
		position:relative;
		z-index:3;
	}
		#contact .title h3{
			margin:0 auto;
			width:140px;
			height:140px;
			background:url("images/contact_title.png") 0 0 no-repeat;
			text-indent:-9999px;
		}
		#contact .inner{
			margin:-70px 0 0 0;
			padding:100px 0 120px;
			width:100%;
			background:url("images/contact_bg.jpg") center 0;
		}
			#contact .inner02{
				margin:0 auto;
				padding:0 20px;
				width:940px;
			}
				#contact .left{
					margin:0 60px 0 0;
					width:440px;
					float:left;
				}
					#contact .left h4{
						margin:0 0 20px 0;
						width:440px;
						height:26px;
						background:url("images/contact_info_title.png") 0 0 no-repeat;
						text-indent:-9999px;
					}
					#contact .left p{
						width:440px;
						line-height:18px;
						color:#ffffff;
						font-size:13px;
					}
					#contact .left .add{
						margin:30px 0 0 0;
						width:440px;
						height:150px;
						background:url("images/contact_info_parts.png") 0 0 no-repeat;
						text-indent:-9999px;
					}
				#contact .right{
					margin:0 0 0 0;
					width:440px;
					float:left;
				}
					#contact .right .contactForm{
						padding:30px 40px 26px;
						width:360px;
						background:url("images/contact_form_bg.png") 0 0 ;
					}
						#contact .right table{
							margin:0 0 20px 0;
							width:360px;
						}
							#contact .right table th{
								padding:10px 0 6px 0;
								height:15px;
								text-indent:-9999px;
							}
								#contact .right table th.formName{
									padding:0 0 6px 0;
									background:url("images/contact_form_name.png") 0 0 no-repeat;
								}
								#contact .right table th.formEmail{
									background:url("images/contact_form_mail.png") 0 10px no-repeat;
								}
								#contact .right table th.formPhone{
									background:url("images/contact_form_phone.png") 0 10px no-repeat;
								}
								#contact .right table th.formComments{
									background:url("images/contact_form_comments.png") 0 10px no-repeat;
								}
							#contact .right table td{
							}
								#contact .right table input{
									padding:0 4px;
									width:350px;
									height:24px;
									border:#77aa99 solid 1px;
									font-size:14px;
									background:url("images/contact_form_bg02.png") 0 0 ;
								}
								#contact .right table textarea{
									padding:4px;
									width:350px;
									height:160px;
									border:#77aa99 solid 1px;
									font-size:14px;
									background:url("images/contact_form_bg02.png") 0 0 ;
									resize:none;
								}
								#contact .right .formBtn{
									margin:0 auto;
									width:240px;
									height:40px;
									background:url("images/contact_form_btn.gif") 0 -40px no-repeat;
								}
									#contact .right .formBtn input{
										padding:40px 0 0 0;
										width:240px;
										height:40px;
										border:none;
										background:url("images/contact_form_btn.gif") 0 0 no-repeat;
										overflow:hidden;
										cursor:pointer;
									}
/*--------------------------------------------------
　footer
--------------------------------------------------*/
#footer{
	margin:-60px 0 0 0;
	padding:20px 0 0 0;
	width : 100%;
	height:40px;
	background:url("images/footer_bg.png") center 0;
}
	#footer h4{
		margin:0 auto;
		width : 980px;
		color:#ffffff;
		text-align:center;
	}
/*--------------------------------------------------
　backTop
--------------------------------------------------*/
#backTop {
	margin:0 0 -40px 0;
	width: 80px;
	height: 40px;
    position: fixed;
    bottom: 0px;
	right:40px;
}
	#backTop a{
		width: 80px;
		height: 40px;
		display: block;
		background:url("images/backtop_bg01.png") left top no-repeat;
		text-indent:-9999px;
	}
		#backTop a:hover{
			background:url("images/backtop_bg01.png") 0 -40px;
		}
/*--------------------------------------------------
　globalNavi
--------------------------------------------------*/
#globalNavi {
	margin:-60px 0 0 0;
	width:100%;
	height:60px;
	background:#FFFFFF url("images/global_navi_bg.png") 0 0;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
	z-index:100;
}
	#globalNavi .inner {
		margin:0 auto;
		padding:0 0 0 20px;
		width:960px;
		height:60px;
	}
		#globalNavi .logo{
			margin:0;
			width:180px;
			height:60px;
			float:left;
		}
			#globalNavi .logo a{
				display:block;
				width:180px;
				height:60px;
				background:url("images/global_navi_logo.png") 0 0 no-repeat;
				text-indent:-9999px;
			}
		#globalNavi .navi{
			margin:2px 0 2px 212px;
			width:568px;
			height:56px;
			float:left;
		}
			#globalNavi li{
				padding:22px 20px 22px 20px;
				height:12px;
				text-indent:-9999px;
				float:left;
			}

				#globalNavi li.spnav_state_current{
					padding:22px 20px 21px 20px;
					border-bottom:#009b77 solid 3px;
				}
				#globalNavi li#globalHome{
					width:41px;
				}
				#globalNavi li#globalNews{
					width:43px;
				}
				#globalNavi li#globalService{
					width:62px;
				}
				#globalNavi li#globalAbout{
					width:51px;
				}
				#globalNavi li#globalRecruit{
					width:63px;
				}
				#globalNavi li#globalContact{
					width:68px;
					background:none;
				}
				#globalNavi li a{
					display:block;
					height:12px;
				}
						#globalNavi li a#globalHome{
							width:41px;
							background:url("images/global_navi_home.png") 0 0 no-repeat;
						}
							#globalNavi li.spnav_state_current a#globalHome {
								background-position:0 -12px;
							}
						#globalNavi li a#globalNews{
							width:43px;
							background:url("images/global_navi_news.png") 0 0 no-repeat;
						}
							#globalNavi li.spnav_state_current a#globalNews{
								background-position:0 -12px;
							}
						#globalNavi li a#globalService{
							width:62px;
							background:url("images/global_navi_service.png") 0 0 no-repeat;
						}
							#globalNavi li.spnav_state_current a#globalService{
								background-position:0 -12px;
							}
						#globalNavi li a#globalAbout{
							width:51px;
							background:url("images/global_navi_about.png") 0 0 no-repeat;
						}
							#globalNavi li.spnav_state_current a#globalAbout{
								background-position:0 -12px;
							}
						#globalNavi li a#globalRecruit{
							width:63px;
							background:url("images/global_navi_recruit.png") 0 0 no-repeat;
						}
							#globalNavi li.spnav_state_current a#globalRecruit{
								background-position:0 -12px;
							}
						#globalNavi li a#globalContact{
							width:68px;
							background:url("images/global_navi_contact.png") 0 0 no-repeat;
						}
							#globalNavi li.spnav_state_current a#globalContact{
								background-position:0 -12px;
							}