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

/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}hr,h1,h2,h3,h4,h5,h6{font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

/* RESET HTML5 */
hr,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}
img {vertical-align: middle;}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

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

/* FLOAT CLEAR */
.clear {clear:both;}

/* GENERAL */
body {
	color: #630;
	font: 13px/2 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	background: #fff9df;}

a {
	-webkit-transition:0.6s ease;
	-webkit-transition-property:opacity,border,color,background,img,li;

	-moz-transition:0.6s ease;
	-moz-transition-property:opacity,border,color,background,img,li;

	-o-transition:0.6s ease;
	-o-transition-property:opacity,border,color,background,img,li;
	
	transition:0.6s ease;
	transition-property:opacity,border,color,background,img,li;
	text-decoration: none;
	
	display: block;
	}

a:link, a:visited {
	color: #630;
	}

a:hover,
a:focus {
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	color: #87a858;
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.80;
	 }
	 
.page-bg {
	background: #eee;
	}
			
/* ************************************************ 
 *  共通
 * ************************************************ */
#wrapper {
	width: 950px;
	margin: 0 auto;
	padding: 30px 0 ;
	overflow: hidden;
	zoom: 1;
	}
	
#contents-wrap {
	margin-top: 80px;
	padding: 0px;
	background: #fff;
	}
	
#contents {
	padding: 20px;
	}
	
#page-top {
	float: right;
	text-align: right;
	width: 100px;
	margin: 30px 0;
	overflow: hidden;
	zoom: 1;
	}
	
	#page-top a {
		float: left;
		border-bottom: 1px dotted #87a858;
		}
	
	#page-top .icon {
		margin: 0 0 3px 3px;
		}
		
.wrap {
	width: 100%;
	overflow: hidden;
	zoom:1;
	}
	
	.wrap .left {
		width: 50%;
		float: left;
		padding: 20px;
	}
	
	.wrap .right {
		width: 50%;
		float: right;
		padding: 20px;
		text-align: center;
	}
	
section {
	margin-top: 100px;
	padding:50px;
	width: 950px;
	background: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px; 
	border-radius: 10px;
	overflow: hidden;
	zoom: 1;
	}
	
.border-top {
	border-top: 2px dashed #578e50;
}

.border-bottom {
	border-bottom: 2px dashed #578e50;
}
		
h1,h2,h3 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}
	
h2 {
	width: 225px;
	height: 200px;
	text-align: center;
	margin: 0 auto;
	}
	
h3 {
	width: 850px;
	height: 64px;
	margin-bottom: 20px;
	}
	
.sub-title {
	width: 100%;
	height: 36px;
	}
	
.text {
	margin: 20px 0;
	}
	
.center {
	text-align: center;
	margin-bottom: 30px;
	}
	
.red,
.error {
	color: red;
	}
	
input {
	width: 350px;
	margin-bottom: 3px;
	}
	
textarea {
	width: 350px;
	}
	
.mt70 {
	margin-top: 70px;
	}
		
/* ************************************************ 
 *  ヘッダー
 * ************************************************ */
#header-nav {
	margin: 0 auto;
	}
	
header {
	width: 950px;
	height: 98px;
	background: #fff;
	margin: 0 auto;
	-moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-radius-bottomleft: 10px;  
    border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-radius-bottomright: 10px;  
    border-bottom-right-radius: 10px;
	}
	
header h1 {
	float: left;
	margin: 40px 0 30px 30px;
	width: 260px;
	height: 25px;
	background: url(../img/logo.png);
	}
	
	header h1 a {
		height: 100%;
	}
	
#right-nav {
	float: right;
	width: 630px;
	}
	
	#right-nav li {
		width: 156px;
		height: 98px;
		float: left;
		background: url(../img/header-nav.png);
		}
		
		#right-nav li.top {
			background-position: 0 0;
			}
			
			#right-nav li.top:hover {
			background-position: 0 -98px;
			}
	
		#right-nav li.project {
			background-position: -156px 0;
			}
			
			#right-nav li.project:hover {
			background-position: -156px -98px;
			}
		
		#right-nav li.about {
			background-position: -312px 0;
			}
			
			#right-nav li.about:hover {
			background-position: -312px -98px;
			}	
			
		#right-nav li.contact {
			width: 162px;
			background-position: -468px 0;
			}
			
			#right-nav li.contact:hover {
			background-position: -468px -98px;
			}
			
	#right-nav li a {
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		height: 100%;
		}
		
/* ************************************************ 
 *  トップ
 * ************************************************ */
#bg-wrap {
	height: 100%;
	position: relative;
	}
	
	img.bg {
	max-width: 100%;
	}

#main-nav ul {
	background: #fff;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px; 
    border-radius: 10px;
	overflow: hidden;
	zoom: 1;
	}
	
	#main-nav ul li a:hover {
		border: 4px solid #7b9f48;
		}
		
		#main-nav ul li.project a {
			width:500px;
			height: 400px;
			float: left;
			background: url(../img/main-nav-project.png);
			-moz-border-radius-topleft: 10px;
			-webkit-border-top-left-radius: 10px;
			-khtml-border-radius-topleft: 10px;  
			border-top-left-radius: 10px;
			-moz-border-radius-bottomleft: 10px;
			-webkit-border-bottom-left-radius: 10px;
			-khtml-border-radius-bottomleft: 10px;  
			border-bottom-left-radius: 10px;
			}

		
		#main-nav ul li.about a {
			width: 450px;
			height: 200px;
			float: left;
			background: url(../img/main-nav-about.png);
			-moz-border-radius-topright: 10px;
			-webkit-border-top-right-radius: 10px;
			-khtml-border-radius-topright: 10px;  
			border-top-right-radius: 10px;
			}
			
		#main-nav ul li.contact a {
			width: 225px;
			height: 200px;
			float: left;
			background: url(../img/main-nav-contact.png);
			}
			
		#main-nav ul li.top a {
			width: 225px;
			height: 200px;
			float: left;
			background: url(../img/main-nav-top.png);
			-moz-border-radius-bottomright: 10px;
			-webkit-border-bottomright-right-radius: 10px;
			-khtml-border-radius-bottomright: 10px;  
			border-bottom-right-radius: 10px;
			}
			
/* ************************************************ 
 *  事業案内
 * ************************************************ */
#project {
	font-size: 15px;
	}
	
#project h2 {
	 background: url(../img/header-project.png);
	 }
	 
#project h3 {
	 background: url(../img/h3-project.jpg);
	 }

#project ol li {
	width: 100%;
	background: #f6f5f3;
	margin: 0 0 30px 0;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px; 
    border-radius: 10px;
	overflow: hidden;
	zoom: 1;
	}	

#project ol li .left {
	width: 320px;
	padding: 20px 0 20px 20px;
	float: left;
	}

#project ol li .right {
	width: 530px;
	padding: 20px;
	float: left;
	}
	
#project ol li dl {
	overflow: hidden;
	zoom: 1;
	}
	
#project ol li dl dt {
	width: 30%;
	float: left;
	margin-bottom: 10px;
	text-align: center;
	}

#project ol li dl dd {
	width: 70%;
	float: left;
	margin-bottom: 10px;
	}
	
#project ol li h4 {
	font-size: 15px;
	border-bottom: 1px dashed #87a858;
	margin-bottom: 20px;
	}
	
#project .btn a {
	background: #7b9f48;
	width: 300px;
	padding: 10px;
	font-size: 15px;
	border: none;
	color: #fff;
	text-align: center;
	margin-left: 60px;
	}
			
/* ************************************************ 
 *  会社概要
 * ************************************************ */
#about {
	font-size: 14px;
	}
	
#about h2 {
	 background: url(../img/header-about.png);
	 }
	 
#about h3 {
	 background: url(../img/h3-about.jpg);
	 }
	 
#about .comment {
	margin: 0 auto;
	font-size: 16px;
	padding: 20px 30px 60px 30px;
	}
	
#about .comment div.name {
	text-align: right;
	padding-right: 50px;
	}
	
#about .comment p.name {
	display: inline;
	padding-left: 100px;
	}
	
#about .comment span.name {
	font-size: 35px;
	padding-left: 40px;
	}
	
dl.data {
    margin:2px 0 0 0;
    width: 100%;
	overflow: hidden;
	zoom: 1;
	border-bottom:#87a858 1px dashed;
	}

dl.data dt {
	text-align: right;
    border-top:#87a858 1px dashed;
    display:inline;
    float:left;
    text-indent:1px;
    padding: 20px 80px 10px 0;
    width: 40%;
    clear:both;
	font-weight: bold;
	}

dl.data dd {
    border-top:#87a858 1px dashed;
    padding: 20px 0 10px 0;
    margin-bottom:6px;
    width: 60%;
    float:left;
	}

	*+html dl.data > dd {
		float:none;
		}

/* ************************************************ 
 *  お問い合わせ
 * ************************************************ */
#contact {
	font-size: 14px;
	}
	
#contact h2 {
	 background: url(../img/header-contact.png);
	 }
	 
#contact input#name,
#contact input#company,
#contact input#email,
#contact input#tel,
#contact textarea {
	background-color: #fff;
	border: 1px solid #ccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border linear .2s, box-shadow linear .2s;
	-moz-transition: border linear .2s, box-shadow linear .2s;
	-o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s;
	display: inline-block;
	padding: 4px 6px;
	margin-bottom: 9px;
	font-size: 14px;
	line-height: 20px;
	color: #555;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}

#contact input#name:focus,
#contact input#company:focus,
#contact input#email:focus,
#contact input#tel:focus,
#contact textarea:focus {	
	border-color: #87a858;
	outline: 0;
	outline: thin dotted \9;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #fff9df;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255,249,223,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #fff9df;
	}

#contact div.submit {
	margin: 0 auto;
	text-align: center;
	padding: 30px;
	}
	
input.submit {
	background: #7b9f48;
	width: 200px;
	padding: 10px;
	font-size: 17px;
	border: none;
	color: #fff;
	}
	 
/* ************************************************ 
 *  フッター
 * ************************************************ */
footer {
	background: #7b9f48;
	width: 950px;
	margin: 0 auto;
	padding-top: 20px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-khtml-border-radius-topleft: 10px;  
	border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	-khtml-border-radius-topright: 10px;  
	border-top-right-radius: 10px;
	overflow: hidden;
	zoom: 1;
	}
	
	#footer-wrap {
		margin: 0 auto;
		width: 800px;
		padding: 20px 0;
		}
		
		#footer-logo {
			float: left;
			margin-right: 80px;
			}
		
		#footer-wrap ul {
			overflow: hidden;
			zoom: 1;
			}
		
		#footer-wrap ul li {
			float: left;
			margin: 0 30px 30px 0;
			}
			
			#footer-wrap ul li a img.icon {
				margin: 0 5px 3px 0;
				}
			
			#footer-wrap ul li a {
				color: #fff9df;
				}
		
		#footer-wrap .copy {
			font-size: 11px;
			color: #fff9df;
		}