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

 CSS information

 File Name  : base.css
 Author	 : Hiroshi Honjo
 Author URI : http://www.pronest.jp/
 Style Info : base & commmon

------ ------ ------ ------ ------ */

/* ------ ------ ------ ------ ------ ------ ------ ------
 body & basic
 ----- ------ ------ ------ ------ ------ ------ ------ */
html{
	overflow-y: scroll;
}
body{
	/* 明朝： font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;*/
	/* ゴシック： */ font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 14px;
}
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}


h1,h2,h3,h4,h5,h6{ font-weight: normal; font-size: 100%;}
img{ vertical-align: top;}
a,
a:link	  { color: #0d409b; text-decoration: none;} 
a:visited	{ text-decoration: none;}
a:hover		{ color: #5479BA; text-decoration: none;}
a:active	{ text-decoration: none;}

/* web font */
.Cinzel{ font-family: 'Cinzel', serif; font-size: 100%;}

/*@import url(https://fonts.googleapis.com/css?family=Marcellus);*/
/*.Marcellus{ font-family: 'Marcellus', serif; font-size: 100%;}*/

/*@import url(https://fonts.googleapis.com/css?family=Quicksand);*/
/*.Quicksand{ font-family: 'Quicksand', serif; font-size: 100%;}*/


/*
-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
*/
/* ------ ------ ------ ------ ------ ------ ------ ------
 layout common
 ----- ------ ------ ------ ------ ------ ------ ------ */
/* #header
----- ----- ----- ----- ----- ----- */
/* header */
#header{
	top: -100px;
	position: absolute;
	width: 100%;
	margin: 100px auto 0;
	padding: 30px 0 0;
	line-height: 1;
	z-index: 999;
}
#header a,
#header{
	color: #262626;
	text-decoration: none;
}
#header .inner{
	position: relative;
}
#header .logo{
	float: left;
	font-size: 36px;
}
#gNav ul{
	list-style: none;
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 14px;
}
#gNav ul li{
	float: left;
}
#gNav ul li a{
	padding: 0 30px;
	font-family: 'Cinzel', serif;
	font-size: 100%;
}
#gNav ul li.n08,
#gNav ul li.n09{
	display: none;
}

/* Fixed */
#header.fixed{
	margin-top: 0;
	top: 0;
	position: fixed;
	padding-top: 10px;
	height: 55px;
	background: #fff;
	background: rgba(255,255,255,.7);
	transition: top 0.65s ease-in;
	-webkit-transition: top 0.65s ease-in;
	-moz-transition: top 0.65s ease-in;
	z-index: 10000;
}
#header.fixed .logo{
	font-size: 24px;
	color: #333;
}
#header.fixed #gNav ul li a{
	color: #333;
	padding: 0 20px;
}

/* Toggle Button */
#nav-toggle{
	display: none;
	position: absolute;
	right: 12px;
	top: 14px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 101;
}
#nav-toggle div{
	position: relative;
}
#nav-toggle span{
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #666;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1){
	top: 0;
}
#nav-toggle span:nth-child(2){
	top: 11px;
}
#nav-toggle span:nth-child(3){
	top: 22px;
}

	@media screen and (min-width: 801px){
		#header{
			height: 138px;
			padding: 0 0 0 0;
			border-bottom: 1px solid #e4e4e4;
			background: rgba(255,255,255,100);
		}
		#header .inner{
			width: 980px;
			height: 138px;
			margin: 0 auto;
			position: relative;
		}
		#header.fixed .inner{
			height: auto;
		}
		.inner:after{
			content: "";
			clear: both;
			display: block;
		}
		#header .logo{
			position: absolute;
			width: 120px;
			left: 50%;
			margin-left: -60px;
			top: 26px;
		}
		#header .logo img{
			width: 120px;
		}
		#gNav ul{
			right: auto;
			bottom: auto;
			left: 0;
			top: 0;
		}
		#gNav ul li{
			text-align: center;
			position: absolute;
			top: 56px;
			height: 28px;
			line-height: 28px;
		}
		#gNav ul li a{
			padding: 0 0 0 0;
			font-size: 1.2em;
		}
		#gNav ul li.n01{ width: 81px; left: 42px;}
		#gNav ul li.n02{ width: 75px; left: 174px;}
		#gNav ul li.n03{ width: 78px; left: 300px;}
		#gNav ul li.n04{ width: 58px; left: 602px;}
		#gNav ul li.n05{ width: 64px; left: 720px;}
		#gNav ul li.n06{ width: 92px; left: 825px;}
		#gNav ul li.n07{ display: none;}
		#header a{ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
		#header a:hover{ opacity: 0.6;}




		#header.fixed{
			padding-top: 0px;
			height: 81px;
			background: rgba(255,255,255,.8);
			transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in;
		}
		#header.fixed .logo{
			position: absolute;
			width: 72px;
			left: 50%;
			margin-left: -36px;
			top: 12px;
		}
		#header.fixed .logo img{
			width: 72px;
		}
		#header.fixed #gNav ul li a{
			color: #333;
			padding: 0 0px;
		}
		.fixed #gNav ul li{
			top: 28px;
		}

	} /*@media */

	@media screen and (max-width: 800px){
		#header,
		.inner{
			width: 100%;
			padding: 0;
		}
		#header{
			top: 0;
			position: fixed;
			margin-top: 0;
			background: rgba(255,255,255,.8);
		}
		/* Fixed reset */
		#header.fixed{
			padding-top: 0;
			background: transparent;
			background: rgba(255,255,255,.8);
			transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in;
		}
		#mobile-head{
			/*background: #fff;*/
			width: 100%;
			height: 56px;
			z-index: 999;
			position: relative;
		}
		#header.fixed .logo,
		#header .logo{
			margin: 0 auto;
			width: 100%;
			height: 100%;
			/*position: absolute;*/
			/*left: 13px;*/
			/*top: 13px;*/
			color: #333;
			font-size: 26px;
			text-align: center;
		}
		#header .logo a{
			display: inline-block;
			height: 100%;
			padding: 4px 0;
		}
		#header .logo img{
			height: 100%;
		}
		#gNav{
			position: absolute;
			/* 開いてないときは画面外に配置 */
			top: -500px;
			background: #333;
			width: 100%;
			text-align: center;
			/*padding: 10px 0;*/
			-webkit-transition: .5s ease-in-out;
			-moz-transition: .5s ease-in-out;
			transition: .5s ease-in-out;
		}
		#gNav ul{
			list-style: none;
			position: static;
			right: 0;
			bottom: 0;
			font-size: 14px;
		}
		#gNav ul li{
			float: none;
			position: static;
			border-bottom: 1px solid #FFF;
		}
		#gNav ul li:first-child{
			border-top: 1px solid #FFF;
		}
		#header #gNav ul li a,
		#header.fixed #gNav ul li a{
			width: 100%;
			display: block;
			color: #fff;
			padding: 18px 0;
		}
		#nav-toggle{
			display: block;
		}


		#gNav ul li.n08{
			display: block;
			/*background: #FFF;*/
			/*border-bottom: 1px solid #333;*/
			padding: 12px 0;
		}
		#gNav ul li.n08 a{
			display: inline-block !important;
			width: auto !important;
			padding: 3px !important;
		}



		/* #nav-toggle 切り替えアニメーション */
		.open #nav-toggle span:nth-child(1){
			top: 11px;
			-webkit-transform: rotate(315deg);
			-moz-transform: rotate(315deg);
			transform: rotate(315deg);
		}
		.open #nav-toggle span:nth-child(2){
			width: 0;
			left: 50%;
		}
		.open #nav-toggle span:nth-child(3){
			top: 11px;
			-webkit-transform: rotate(-315deg);
			-moz-transform: rotate(-315deg);
			transform: rotate(-315deg);
		}
		/* #gNav スライドアニメーション */
		.open #gNav{
			/* #gNav top + #mobile-head height */
			-moz-transform: translateY(556px);
			-webkit-transform: translateY(556px);
			transform: translateY(556px);
		}
	}/* @media */

/* #breadCrumb
------ ------ ------ ------ ------ ------ */
@media screen and (min-width: 801px){
	#breadCrumb{
		margin-top: 138px;
		width: 100%;
		/*background: #F3F3F3;*/
		font-size: 14px;
	}
	#breadCrumb ol{
		width: 960px;
		margin: 0 auto;
		overflow: hidden;
		height: 3.6em;
	}
	#breadCrumb li{
		float: left;
		line-height: 3.6em;
		padding-left: 1em;
		position: relative;
	}
	#breadCrumb li:after{
		content: ">";
		position: absolute;
		line-height: 3.6em;
		top: 0; right: 0;
		color: #888;
	}
	#breadCrumb li:last-child:after{
		content: "";
	}
	#breadCrumb li a{
		display: block;
		padding: 0 15px 0 0;
		color: #888;
		-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
	}
	#breadCrumb li a:hover{
		color: #222;
	}
	#breadCrumb li:last-child a{
		background: none;
		cursor: default;
	}
	#breadCrumb li:last-child a:hover{
		color: #888;
	}
} /*@media */
@media screen and (max-width: 800px){
	#breadCrumb{
		display: none;
	}
}



/* #footer
------ ------ ------ ------ ------ ------ */
#pagetop {
	display: none;
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 9999;
	}
	@media screen and (max-width: 800px){
		#pagetop {
			display: none !important;
		}
	}
	#pagetop a {
		-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
	}
	#pagetop a:hover {
		text-decoration: none;
		opacity: 0.7;
	}

.prevBtn{
	display: none;
	}
	@media screen and (max-width: 800px){
		.prevBtn{
			display: block;
			width: 100%;
			padding-left: 10px;
			background: #F3F3F3;
			border-top: 1px solid #DEDEDE;
			border-bottom: 1px solid #DEDEDE;
			font-size: 12px;
			height: 40px;
			line-height: 40px;
		}
		.prevBtn a{
		}
	}



#footer{
	height: 100px;
	background: #221613 url(../img/logo_f.gif) center center no-repeat;
	position: relative;
}
#footer #fNav{
	width: 960px;
	margin: 0 auto;
	padding-top: 1.6em;
	}
	#footer #fNav ul{
		padding-left: 1em;
	}
	#footer #fNav li{
		list-style-type: circle;
		list-style-position: outside;
		color: #FFF;
		margin-bottom: 0.4em;
	}
	#footer #fNav a{
		color: #FFF;
		-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
	}
	#footer #fNav a:hover{
		opacity: 0.6;
	}
#footer small{
	width: 960px;
	margin: 0 auto;
	text-align: right;
	position: absolute;
	left: 50%; bottom: 10px;
	margin-left: -480px;
	color: #FFF;
	font-family:Verdana, Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 11px;
}


	@media screen and (max-width: 800px){
		#footer{
			height: auto;
			min-height: 100px;
			background: #221613;
			padding-bottom: 32px;
		}
		#footer #fNav{
			width: 100%;
			padding-bottom: 80px;
			text-align: center;
			background: url(../img/logo_f.gif) center bottom no-repeat;
			}
			#footer #fNav ul{
				display: inline-block;
				padding-left: 1em;
				text-align: left;
			}
			#footer #fNav li{
				list-style-type: circle;
				list-style-position: outside;
				color: #FFF;
				margin-bottom: 0.4em;
			}
			#footer #fNav a{
				color: #FFF;
			}
		#footer small{
			width: 100%;
			margin-left: 0px;
			position: absolute;
			bottom: 10px;
			right: 0;
			left: auto;
			text-align: center;
		}
	}











/* ------ ------ ------ ------ ------ ------ ------ ------
 print
 ----- ------ ------ ------ ------ ------ ------ ------ */
 @media print{
	#breadCrumb{display: none !important;}
	#header{display: none !important;}
	#footer{display: none !important;}
	*{float: none !important;}
}















/* ------ ------ ------ ------ ------ ------ ------ ------
 clear
 ----- ------ ------ ------ ------ ------ ------ ------ */
.clear{ clear: both;}
/* CSS -micro clearfix */
.cf:before,.cf:after{content: "";display: table;}
.cf:after{clear:both;}
.cf{zoom: 1;}