.gnav {
	overflow-y:auto; /* 縦方向のみスクロール */
	position: absolute;
	top:0;
	left:0;
	width: 30%;
	max-width:320px; /* 横に広がり過ぎないように */
	font-size: 1.6rem;
	text-align:left;
	z-index:9999;
	/* アニメーション */
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

.gnav ul li form{
	margin: 6px 3%;
}

.gnav ul li form select{
	margin: 0;
	border: none;
}

.gnav ul li a {
	display:block;
	padding: 6px 3%;
	color: #fff;
	font-weight:300;
	text-shadow:none;
	text-decoration:none;
}
.gnav ul li a:hover {
	color: #fff;
	background: #009900;
}

/* メニューON/OFF */
.menuOff {
	-webkit-transform:translate3d(-100%, 0, 0);
	-moz-transform:translate3d(-100%, 0, 0);
	transform:translate3d(-100%, 0, 0);
	z-index:9999; /* 最前面に来るように */
}
.menuOn {
	display: block !important;
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}
.ie .menuOff {
	left:-100%; /* IE向け */
} 
.ie .menuOn {
	left: 0; /* IE向け */
} 


/* ナビゲーション以外固定 */
.fixed {
	position:fixed;
	top:0;
	left:0;
	width:100%;
}

/* オーバーレイ */
.overlay {
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
	z-index:999;
}

/**********************************
	ナビゲーションアイコン
**********************************/
.navBtn {
	position:absolute;
	top: 43%;
	left: 0;
}
/* IE8以下はアイコン位置調整 */
#ie8 .navBtn,
#ie7 .navBtn,
#ie6 .navBtn {
	top: 40px;
}
.navBtn button {
	display: block;
	border: none;
	background: none;
	outline: 0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	−moz−tap-highlight-color:rgba(0,0,0,0);
	tap-highlight-color:rgba(0,0,0,0);
}
.navIcon {
	cursor: pointer;
}

/* アイコンレイヤー */
.iconLayer {
	position: relative;
	display: block;
	width: 26px;
	height: 4px;
	background: #fff;
	-webkit-animation-duration: 300ms;
	-moz-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}
.iconLayer:before, .iconLayer:after {
	content: '';
	position: absolute;
	left: 0;
	display: block;
	width: inherit;
	height: 4px;
	background: inherit;
	-webkit-animation-duration: 300ms;
	-moz-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}
.iconLayer:before {
	bottom: 170%;
}
.iconLayer:after {
	top: 170%;
}
 
/**********************************
	ナビアイコン：矢印
**********************************/
.arrow {
	-webkit-animation-name: navIconSlide;
	-moz-animation-name: navIconSlide;
	animation-name: navIconSlide;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes navIconSlide {
	0% {
	}
	100% {
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);
	}
}
@-moz-keyframes navIconSlide {
	0% {
	}
	100% {
					-moz-transform: rotate(180deg);
					transform: rotate(180deg);
	}
}
@keyframes navIconSlide {
	0% {
	}
	100% {
					transform: rotate(180deg);
	}
}

/* ナビアイコン：矢印:before */
.arrow:before {
	-webkit-animation-name: navIconSlideBefore;
	-moz-animation-name: navIconSlideBefore;
	animation-name: navIconSlideBefore;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes navIconSlideBefore {
	0% {
	}
	100% {
					margin: 0% 31%;
					width: 75%;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
	}
}
@-moz-keyframes navIconSlideBefore {
	0% {
	}
	100% {
					margin: 0% 31%;
					width: 75%;
					-moz-transform: rotate(45deg);
					transform: rotate(45deg);
	}
}
@keyframes navIconSlideBefore {
	0% {
	}
	100% {
					margin: 0% 31%;
					width: 75%;
					transform: rotate(45deg);
	}
}

/* ナビアイコン：矢印:after */
.arrow:after {
	-webkit-animation-name: navIconSlideAfter;
	-moz-animation-name: navIconSlideAfter;
	animation-name: navIconSlideAfter;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes navIconSlideAfter {
	0% {
	}
	100% {
					margin: 0% 31%;
					width: 75%;
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
	}
}
@-moz-keyframes navIconSlideAfter {
	0% {
	}
	100% {
					margin: 0% 31%;
					width: 75%;
					-moz-transform: rotate(-45deg);
					transform: rotate(-45deg);
	}
}
@keyframes navIconSlideAfter {
	0% {
	}
	100% {
					margin: 0% 31%;
					width: 75%;
					transform: rotate(-45deg);
	}
}

/**********************************
	ナビアイコン：ハンバーガー
**********************************/
.hamburger {
	-webkit-animation-name: navIconSlideFrom;
	-moz-animation-name: navIconSlideFrom;
	animation-name: navIconSlideFrom;
}
@-webkit-keyframes navIconSlideFrom {
	0% {
					-webkit-transform: rotate(-180deg);
					transform: rotate(-180deg);
	}
	100% {
	}
}
@-moz-keyframes navIconSlideFrom {
	0% {
					-moz-transform: rotate(-180deg);
					transform: rotate(-180deg);
	}
	100% {
	}
}
@keyframes navIconSlideFrom {
	0% {
					transform: rotate(-180deg);
	}
	100% {
	}
}

/* ナビアイコン：ハンバーガー:before */
.hamburger:before {
	-webkit-animation-name: navIconSlideBeforeFrom;
	-moz-animation-name: navIconSlideBeforeFrom;
	animation-name: navIconSlideBeforeFrom;
}
@-webkit-keyframes navIconSlideBeforeFrom {
	0% {
					margin: 3% 37%;
					width: 50%;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
	}
	100% {
	}
}
@-moz-keyframes navIconSlideBeforeFrom {
	0% {
					margin: 3% 37%;
					width: 50%;
					-moz-transform: rotate(45deg);
					transform: rotate(45deg);
	}
	100% {
	}
}
@keyframes navIconSlideBeforeFrom {
	0% {
					margin: 3% 37%;
					width: 75%;
					transform: rotate(45deg);
	}
	100% {
	}
}

/* ナビアイコン：ハンバーガー:after */
.hamburger:after {
	-webkit-animation-name: navIconSlideAfterFrom;
	-moz-animation-name: navIconSlideAfterFrom;
	animation-name: navIconSlideAfterFrom;
}
@-webkit-keyframes navIconSlideAfterFrom {
	0% {
					margin: 3% 37%;
					width: 75%;
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
	}
	100% {
	}
}
@-moz-keyframes navIconSlideAfterFrom {
	0% {
					margin: 3% 37%;
					width: 75%;
					-moz-transform: rotate(-45deg);
					transform: rotate(-45deg);
	}
	100% {
	}
}
@keyframes navIconSlideAfterFrom {
	0% {
					margin: 3% 37%;
					width: 75%;
					transform: rotate(-45deg);
	}
	100% {
	}
}

/**********************************
	レスポンシブ
**********************************/
@media screen and (max-width: 800px) {
#header .gnav {
	width:50%;
}
}

@media screen and (max-width: 480px) {
#header .navBtn {
	top: 43%;
	left:0;
}
#header .gnav {
	width: 69%;
}
}