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

 CSS information

 File Name  : base.css
 Author	 : Hiroshi Honjo
 Author URI : https://www.shashin-kagaku.co.jp/skm/
 Style Info : base & commmon

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

/* ------ ------ ------ ------ ------ ------ ------ ------
 body & basic
 ----- ------ ------ ------ ------ ------ ------ ------ */
body {
	display: none;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
color: #222;
}
*{-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: #005BAC; text-decoration: none;}
a:visited	{ text-decoration: none;}
a:hover		 { color: #005BAC; text-decoration: none;}
a:active	 { text-decoration: none;}

/*
-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{
	width: 100%;
	height: 70px;
	background: #000;
	position: fixed;
	top: 0px;
	-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;
	z-index: 2000;
}
#header .inner{
	width: 1000px;
	height: 70px;
	margin: 0 auto;
	position: relative;
}
#header h1{
	position: absolute;
	left: 24px; top: 23px;
	-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 h1 a{
	display: block;
	width: 157px;
	height: 25px;
	background: url(../img/logo_w.png) no-repeat;
	overflow: hidden; text-indent: 100%; white-space: nowrap;
	-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 h1 a:hover{
	opacity: 0.5;
}


/* #gNav
------ ------ ------ ------ ------ ------ */
#gNav{
	width: 600px;
	position: absolute;
	right: 0;
	top: 28px;
	-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;
}
#gNav ul{
	display: flex;
	display: -webkit-flex; /* Safari */
	justify-content: space-around;
	-webkit-justify-content: space-around; /* Safari */
}
#gNav li{
	padding: 0 12px;
	text-align: center;
	flex: auto;
	-webkit-flex: auto;
}
#gNav a{
	font-size: 14px;
	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;
}
#gNav a:hover{
	opacity: 0.5;
}
#gNav li:last-child a{
	border: 1px solid #FFF;
	padding: 6px 10px;
}



/* 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: #FFF;
	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 (max-width: 800px){

		#header,
		#header .inner{
			width: 100%;
			padding: 0;
			position: static;
			height: 56px;
		}
		#header{
			top: 0;
			position: fixed;
			margin-top: 0;
			/*background: rgba(255,255,255,.8);*/
		}
		#header h1{
			position: static;
			left: auto; top: auto;
			-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;
		}
		/* 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;
			background-position: center center;
		}
		#gNav,
		#header.fixed #gNav{
			position: absolute;
			/* 開いてないときは画面外に配置 */
			top: -500px;
			/*background: #333;*/
			background: #666;
			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;
			display: block;
		}
		#gNav ul li{
			float: none;
			position: static;
			border-bottom: 1px solid #FFF;
		}
		#gNav ul li:first-child{
			border-top: 1px solid #FFF;
		}
		#gNav ul li:last-child a{
			border: none;
			padding: 0;
		}
		#header #gNav ul li a,
		#header.fixed #gNav ul li a{
			width: 100%;
			display: block;
			color: #fff;
			padding: 18px 0;
		}
		#nav-toggle{
			display: block;
		}
		/* #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 */









/* #footer
------ ------ ------ ------ ------ ------ */
#footer{
	width: 100%;
	height: 70px;
	background: #000;
	position: fixed;
	bottom: 0px;
	-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;
	z-index: 1500;
}
#footer .inner{
	width: 1000px;
	height: 70px;
	margin: 0 auto;
	position: relative;
}
#footer small{
	line-height: 70px;
	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;
}
#footer .skLink{
	position: absolute;
	right: 0; top: 14px;
}
#footer .skLink a{
	display: block;
	width: 217px;
	height: 43px;
	background: url(../img/logo_sk.png) no-repeat;
	overflow: hidden; text-indent: 100%; white-space: nowrap;
	-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 .skLink a:hover{
	opacity: 0.5;
}
	@media screen and (max-width: 800px){
		#footer{
			height: auto;
			position: static;
			padding-bottom: 16px;
		}
		#footer .inner{
			width: 100%;
			height: auto;
			position: static;
			text-align: center;
		}
		#footer small{
			display: block;
			line-height: 1;
			padding: 16px 0;
		}
		#footer .skLink{
			position: static;
			right: 0; top: 0;
		}
		#footer .skLink a{
			margin: 0 auto;
		}
	}/* @media */











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