/***** スマホ用ハンバーガーメニュー用CSS *****/

/* ヘッダー */
.sp-navi-header {
	background-color: #277925;
	width: 100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
.sp-navi-header li { list-style:none; }

.sp-navi-header_inner {
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: inherit;
	position: relative;
}


/* ヘッダーのロゴ部分 */
.sp-navi-header_title { width: 20%; }

.sp-navi-nav-header_title img {
	display: block;
	width: 100%;
	height: auto;
}

/* ヘッダーのナビ部分 */
.sp-navi-header_nav {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	transform: translateX(100%);
	background-color: #277925;
	transition: ease .4s;
}
.sp-navi-header_nav ul li { border-bottom:1px #fff solid; margin:0px auto; padding:0px; }

.sp-navi-nav-items {
	position: absolute;
	width:100%;
	top: 22%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
}

/* ナビのリンク */
.sp-navi-nav-items_item a {
	color: #fff;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 120%;
	line-height:2.7em;	
}

.sp-navi-nav-items_item:last-child a { margin-bottom: 0; }


/* ハンバーガーメニュー */
.sp-navi-nav-header_hamburger { width: 48px; height: 100%; }

.sp-navi-nav-hamburger {
	background-color: transparent;
	border-color: transparent;
	z-index: 9999;
}


/* ハンバーガーメニューの線 */
.sp-navi-nav-hamburger span {
	width: 100%;
	height: 1px;
	background-color: #fff;
	position: relative;
	transition: ease .4s;
	display: block;
}

.sp-navi-nav-hamburger span:nth-child(1) { top: 0; }

.sp-navi-nav-hamburger span:nth-child(2) { margin: 8px 0; }

.sp-navi-nav-hamburger span:nth-child(3) { top: 0; }


/* ハンバーガーメニュークリック後のスタイル */
.sp-navi-header_nav.active { transform: translateX(0); }

.sp-navi-nav-hamburger.active span:nth-child(1) { top: 5px; transform: rotate(45deg); }

.sp-navi-nav-hamburger.active span:nth-child(2) { opacity: 0; }

.sp-navi-nav-hamburger.active span:nth-child(3) { top: -13px; transform: rotate(-45deg); }