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

/*
0.共通
1.ヘッダー #header
1.1　グローバルナビ #nav
2.男を磨く #summary
3.コンセプト #concept
4.メニュー #menu
5.フッター #footer
*/

/* 0.共通
********************************** */
html,body{
	position:relative;
}
#wrapper{
	width:940px;
	margin:0 auto;	
}
.inner h2{
	position:relative;
	padding:10px 0 10px 10px;
}
.inner h2:after{
	content:'';
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 12px 12px 0 0;
	border-color: #002f7b transparent transparent transparent;	
	position:absolute;
	top:0;
	left:0;
}


/* 1.ヘッダー #header
********************************** */
#header{
	position:relative;
	background-color:#221814;	
	background-image:url(../images/bg_header.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	width:100%;
	height:626px;
}
	#header .inner{
		width:940px;
		height:100%;
		margin:0 auto;	
		position:relative;
	}
		#header .inner h1{
			color: #fff;
			text-align:right;
			padding-top:5px;
		}
		#header .inner #logobox{
			position:absolute;
			top:10px;
			left:0;
		}
			#header .inner #logobox p{
				width:347px;
				height:268px;
				position:absolute;
				top:0;
				left:0;
				z-index:2;
			}
			#header .inner #logobox p+p{
				width:219px;
				height:219px;
				position:absolute;
				top:40px;
				left:200px;
				z-index:1;
			}
			#header .inner .info{
				width:450px;
				float:right;
				color:#fff;
				overflow:hidden;
				font-size:14px;
				padding:15px 0;
			}
				#header .inner .info p:first-child{
					float:left;	
					margin:10px 0 0 0;	
					padding-left:0;
					border-left:none;
				}
				#header .inner .info p{
					margin-left:140px;	
					padding-left:20px;
					border-left:1px solid #FFF;
				}
				#header .inner .info p.tel{
					padding-bottom:5px;	
				}
			#header .inner .info+p{
				clear:both;
				text-align:right;	
				color: #d4bf89;
				letter-spacing:-0.10em;
				font-size:95%;
			}

	/* 1.1　グローバルナビ #nav ********* */
	#nav{
		width:500px;
		height:30px;
		position:absolute;
		bottom:-40px;
		left:50%;
		margin-left:-300px;
		z-index:5;
	}
	#nav ul{
		position:relative;
		overflow:hidden;
	}
	#nav ul:after{
		content:'';
		width:1px;
		height:20px;
		background-color:#221814;
		position:absolute;
		left:0;
		top:5px;
	}
	#nav li{
		float:left;
		width:33.33%;	
		text-align:center;
		position:relative;
	}
	#nav li:after{
		content:'';
		width:1px;
		height:20px;
		background-color:#221814;
		position:absolute;
		right:0;
		top:5px;	
	}
	#nav li a{
		width:100%;
		height:30px;
		display:block;
		background-color:#FFF;
		background-color:rgba(255,255,255,0.6);
	}
	#nav li a:hover{
		background-color:#d4bf89;
		background-color:rgba(212,191,137,0.8);
	}
	#nav li a img{
		padding:8px 0 0 0;	
	}

/* 2.男を磨く #summary
********************************** */
#summary{
}
	#summary h1{
		position:relative;
		padding:15px 0 0 0;
		float:left;
	}
	#summary h1:after{
		content:'';
		width:124px;
		height:124px;
		background:url(../images/square_mh.png) center top no-repeat;
		position:absolute;
		top:0;
		left:-62px;
		z-index:-1;
	}
	#summary .inner{
		width:500px;
		float:left;
		margin:62px 0 0 0;
	}
	#summary .inner p{
		letter-spacing:-0.08em;	
	}
	#summary .inner .to_concept{
		margin:5px 0 0 0;
		text-align:right;
		font-size:16px;
	}
	#summary .inner .to_concept a:before{
		content:'>> ';
	}
	#summary .inner .accessinfo{
		background-color:#d4bf89;
		padding:12px;
		margin:30px 0 0 0;
		line-height:180%;
		letter-spacing:-0.06em;
	}
		#summary #information{
			float:right;
			width:210px;
			margin:15px 0 0 0;
		}
			#summary #information h2{
				background-color:#d4bf89;
				padding:5px;
				text-align:center;
				font-size:14px;
			}
			.infobox{
				margin:10px 0 0 0;
				padding:10px;
				border:1px solid #d4bf89;	
				position:relative;
			}
			.infobox:after{
				content:'';
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 12px 12px 0 0;
				border-color: #d4bf89 transparent transparent transparent;	
				position:absolute;
				top:0;
				left:0;
			}
			.infobox h3{
				font-size:18px;	
				color:#002f7b;
				margin:5px 0 0 0;
			}
			.infobox p{
				margin:10px 0 0 0;	
			}
			.infobox.no01 h3+p+p{
				font-size:30px;
				font-weight:bold;	
			}
			
	
/* 3.コンセプト #concept
********************************** */
#concept{
	position:relative;
}
#concept:after{
	content:'';
	position:absolute;
	top:61px;
	left:-124px;
	z-index:-2;
	width:283px;
	height:761px;
	background:url(../images/bg_concept.jpg) top left no-repeat;	
}
#concept section{
	overflow:hidden;
	zoom:1;	
}
	#concept h1{
		width:124px;
		height:124px;
		background:url(../images/square_m.png);
		position:absolute;
		top:;
		left:111px;
		z-index:3;
	}
	#concept h1 img{
		padding:54px 0 0 15px;	
	}
	#concept h1+p{
		position:absolute;
		left:172px;
		top:94px;
		z-index:15;
	}
	#concept .inner{
		float:left;
		width:395px;
		margin:60px 0 0 278px;
	}
		#concept .inner .messe{
			margin:0 0 45px 0;
		}
		#concept .inner .messe p{
			font-size:16px;
			line-height:156%;
			font-weight:bold;
		}
	#concept .photobox{
		width:210px;
		float:right;
		margin:60px 0 0 0;
	}
		#concept .photobox .photo{
			float:right;
			margin:0 0 85px 0;
			position:relative;
		}
		#concept .photobox .photo img{
			padding-bottom:3px;	
		}
		#concept .photobox .photo.no01{
			background-color:#d4bf89;
			padding:10px;
		}
		#concept .photobox .photo .title{
			width:100px;
			height:100px;
			position:absolute;
			left:-50px;
			top:-73px;
			z-index:-1;
			background:url(../images/square_s.png) top left no-repeat;
		}
		#concept .photobox .photo.no01 p+p{
			font-size:16px;	
		}
		#concept .photobox .photo.no02 .title img{
			padding:42px 0 0 13px;
		}
		#concept .photobox .photo.no03 .title img{
			padding:37px 0 0 13px;
		}

/* 4.メニュー #menu
********************************** */
#menu{
	position:relative;
	padding-bottom:260px;
}
#menu:before{
	content:'';
	position:absolute;
	top:61px;
	right:-47px;
	z-index:-2;
	width:283px;
	height:1526px;
	background:url(../images/bg_menu.jpg) top left no-repeat;	
}
	#menu h1{
		width:124px;
		height:124px;
		background:url(../images/square_m.png);
		position:absolute;
		top:0;
		left:0;
		z-index:-1;
	}
	#menu h1 img{
		padding:54px 0 0 15px;	
	}
	#menu h1+p{
		float:left;
		padding:94px 0 0 61px;	
	}
	#menu .inner{
		float:left;
		width:500px;
		margin:60px 0 0 0;
	}
	.menubox{
		margin:0 0 30px 0;	
	}
	.menubox dl{
		overflow:hidden;
		border-top:1px solid #c9c9ca;
	}
	.menubox dt{
		overflow:hidden;
		clear:both;
		float:left;
		padding:8px;
		font-size:18px;
	}
	.menubox dd{
		text-align:right;
		border-bottom:1px solid #c9c9ca;
		font-size:22px;
		font-weight:bold;
		padding:8px;	
	}
	.menubox dl+p{
			text-align:right;
			margin:5px 0 0 0;
		}
	.menubox.box10 dt{
		font-size:16px;	
	}
	.menubox.box10 dd{
		text-align:right;
		border-bottom:1px solid #c9c9ca;
		font-weight:bold;
		padding:45px 8px 8px 8px;	
	}
	.menubox.box11 dd{
		text-align:right;
		border-bottom:1px solid #c9c9ca;
		font-weight:bold;
		padding:8px 8px 28px 8px;	
	}
	.menubox.box11 dt p{
		font-size:16px;	
	}
	
/* 5.フッター #footer
********************************** */
#footer{
	position:fixed;
	bottom:0;
	z-index:30;
	background-color:#221814;
	width:100%;
	padding:0 0 15px 0;
	border-top:5px solid #002f7b;
}
@media print{
	#footer{
		position:absolute;
	}
}
#footer:after{
	content:'';
	width:100%;
	height:20px;
	background:#fff;
	display:block;
	position:absolute;
	bottom:-20px;	
	z-index:-1;
}
	#footer .inner{
		width:660px;
		padding:0 0 0 280px;
		margin:0 auto;	
		position:relative;
	}
		#footer .inner h1{
			font-size:18px;
			font-weight:bold;
			color:#fff;	
			padding:15px 0 0 0;
		}
		#footer .inner .info{
			color:#fff;
			overflow:hidden;
			font-size:14px;
			padding:0 20px 5px 0;
			float:left;
		}
			#footer .inner .info p{
				padding:3px;	
			}
		#footer .inner .info+p{
			clear:both;
			color: #d4bf89;
		}
	#footer .inner #gaikan{
		position:absolute;
		top:-80px;
		left:-40px;
	}
	#gototop{
		position:fixed;
		right:0;
		bottom:50px;	
	}