@charset "UTF-8";

/* ========== ナビゲーション ========== */
/* ヘッダー */
#header{
	width: 900px;
	margin: 0 auto;
	text-align: justify;
}

#header:after{
	content: "";
	width: 100%;
	height: 0;
	display: inline-block;
}

#header h1,#header a{
	display: inline-block;
	vertical-align: bottom;
}

#header h1{text-indent: -9999px;}

.inner{
	width: 900px;
	margin: 0 auto;
	/*position: absolute;*/
	left: 0;
	right: 0;
	z-index: 10;
}

/* ナビゲーション内部 */
#g-nav{
	text-align: right;
	border-right: 1px solid #ccc;
}

#g-nav li{
	display: inline-block;
	list-style-type: none;
}

#g-nav a{
	width: 117px;
	height: 17px;
	display: block;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	background: url("../images/gNavi.gif") no-repeat;
}

#g-nav .g_nav01 a{background-position: 0 0;}
#g-nav .g_nav02 a{background-position: -117px 0;}
#g-nav .g_nav03 a{background-position: -378px 0;}
#g-nav .g_nav04 a{background-position: -495px 0;}
#g-nav .g_nav05 a{background-position: -612px 0; width: 169px;}
#g-nav .g_nav06 a{background-position: -234px 0; width: 144px;}

/*hover*/
#g-nav .g_nav01 a:hover{background-position: 0 -17px;}
#g-nav .g_nav02 a:hover{background-position: -117px -17px;}
#g-nav .g_nav03 a:hover{background-position: -378px -17px;}
#g-nav .g_nav04 a:hover{background-position: -495px -17px;}
#g-nav .g_nav05 a:hover{background-position: -612px -17px;}
#g-nav .g_nav06 a:hover{background-position: -234px -17px;}

/*マウスオーバー*/
#g-nav .g_nav01_ov a{background-position: 0 -17px;}
#g-nav .g_nav02_ov a{background-position: -117px -17px;}
#g-nav .g_nav03_ov a{background-position: -378px -17px;}
#g-nav .g_nav04_ov a{background-position: -495px -17px;}
#g-nav .g_nav05_ov a{background-position: -612px -17px;}
#g-nav .g_nav06_ov a{background-position: -234px -17px; width: 144px;}

#g-nav ul{
	font-size: 0;
}

#g-nav ul li.pc-none{display: none;}

#g-nav ul li a{
	color: #fff;
	font-size: 14px;
	text-align: center;
	letter-spacing: 0.03em;
	border-right: 1px solid #fff;
}

/* ハンバーガーメニュー */
#hamburger{display: none;}


/** スマートフォン
===================================*/
@media screen and (max-width: 559px){
/* ヘッダー */
#header{
	width: 90%;
	height: auto;
	display: inline-block;
	text-align: left;
}

#header:after{content: none;}

#header h1,
#header a{
	vertical-align: middle;
}

#header img{
	width: 95%;
	max-width: 370px;
	height: auto;
}

.inner{
	width: 93.5%;
	margin: 0 auto;
	padding: 2.3% 3.5%;
	font-size: 0;
	background: #fff;
	border-top: 3px solid #eb6b3a;
	box-shadow: 0 2px 2px rgba(0,0,0,0.3);
	position: fixed;
	left: 0;
	right: 0;
}

/* ハンバーガー */
#nav-box{
	height: auto;
	position: absolute;
	top: 33%;
	right: 3.5%;
}

#nav-toggle{
	display: inline-block;
	vertical-align: top;
	position: static;	
	cursor: pointer;
}

#nav-toggle > div{
	width: 27px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

#nav-toggle span{
	width: 100%;
	height: 3px;
	display: block;
	background: #eb6b3a;
	left: 0;
	position: absolute;
	transition: top .5s ease, -webkit-transform .6s ease-in-out;
	transition: transform .6s ease-in-out, top .5s ease;
	transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}

#nav-toggle span:nth-child(1){top: 0;}
#nav-toggle span:nth-child(2){top: 9px;}
#nav-toggle span:nth-child(3){top: 18px;}

/* オープン時 ハンバーガー */
.open #nav-toggle{
	position: absolute;
	top: 19%;
	right: 3%;
}

.open #nav-toggle span{background: #fff;}

.open #nav-toggle span:nth-child(1){
	top: 15px;
	-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2){
	width: 0;
	left: 50%;
	top: 15px;
}

.open #nav-toggle span:nth-child(3){
	top: 15px;
	-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
}

/* 重なり順 */
#nav-toggle{z-index: 1000;}
#container{z-index: 900;}

/* ナビゲーション内部 */
#g-nav{
	padding: 5% 0 0;
	display: flex;
	text-align: center;
	background: rgba(188, 76, 33, 0.9);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	visibility: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity .6s ease, visibility .6s ease;
}

#g-nav ul li a{
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 20px 0;
	display: block;
	font-size: 17px;
	text-indent: 0;
	border: none;
	background: none;
	transition: color .6s ease;
}

#g-nav ul li{
	padding: 7px 10px;
	display: block;
	border-top: 1px solid #fff;
	opacity: 0;
	-webkit-transform: translateX(200px);
		transform: translateX(200px);
	transition: opacity .2s ease, -webkit-transform .6s ease;
	transition: transform .6s ease, opacity .2s ease;
	transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
}

#g-nav ul li.pc-none{display: block;}

#g-nav ul li:last-child{border-bottom: 1px solid #fff;}

#g-nav ul li:nth-child(2){transition-delay: .15s;}
#g-nav ul li:nth-child(3){transition-delay: .3s;}
#g-nav ul li:nth-child(4){transition-delay: .45s;}
#g-nav ul li:nth-child(5){transition-delay: .6s;}
#g-nav ul li:nth-child(6){transition-delay: .75s;}

/* ナビ オープン時 */
.open{overflow: hidden;}

.open #nav-box{top: 23%;}

.open #g-nav{
	margin-top: 0;
	visibility: visible;
	opacity: 1;
}

.open #g-nav li{
	opacity: 1;
	-webkit-transform: translateX(0);
		transform: translateX(0);
	transition: opacity .9s ease, -webkit-transform 1s ease;
	transition: transform 1s ease, opacity .9s ease;
	transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}
}