/* navi-opener
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
.navi-opener{ display: none; }
}
@media screen and (max-width: 768px) {
.navi-opener{
	position			: fixed;
	top					: 15px;
	right				: 17px;
	z-index				: 100;
	cursor				: pointer;
	width				: 20px;
	height				: 16px;
}
.navi-opener .opener{
	position			: absolute;
	top					: 23px;
	right				: -3px;
}
.navi-opener .opener:after{
	content				: "";
	display				: block;
	width				: 26px;
	height				: 8px;
	background			: url(../../../images/opener.png) left top /cover no-repeat;
}
.navi-opener .bar::before,
.navi-opener .bar::after,
.navi-opener .bar{
	transition			: all 0.2s ease 0s;
	display				: block;
	position			: absolute;
	top					: 50%;
	width				: 20px;
	height				: 3px;
	background			: #95bc00;
}

.navi-opener .bar{
	right				: 0;
	margin				: -1px 0 0 0px;
}
.navi-opener .bar::before,
.navi-opener .bar::after{
	content				: " ";
	right				: 0;
}
.navi-opener .bar::before	{ margin-top: -8px; }
.navi-opener .bar::after	{ margin-top: 4px; }

/* open */
.navi-opener.open .opener{ display: none; }
.navi-opener.open .bar { background: transparent; }
.navi-opener.open .bar::before,
.navi-opener.open .bar::after	{
	margin-top			: 0;
	background			: #FFF;
}
.navi-opener.open .bar::before	{ transform: rotate(-45deg); }
.navi-opener.open .bar::after	{ transform: rotate(-135deg); }
}

/*-----------------------------------------------------
 responsive-navi
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#navigation.responsive-navi{
	-webkit-overflow-scrolling: touch;
	overflow-scrolling	: touch;
	display				: none;
	position			: fixed;
	left				: 0px;
	top					: 0px;
	z-index				: 10;
	width				: 100%;
	padding				: 10.25rem 0 0 0;
	height				: 100%;
	background			: #95bc00;
	text-align			: center;
	color				: #fff;
}

#navigation.responsive-navi .container{
	background			: transparent;
	overflow			: visible;
	margin				: 0 auto;
	height				: auto;
	width				: 90vw;
}
#navigation.responsive-navi .navi{
	display				: flex;
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	margin				: 0 auto;
	flex-direction		: column;
}
#navigation.responsive-navi .navi li{ margin: 0 0 3.5rem 0; }
#navigation.responsive-navi .navi li a{
	display				: block;
	line-height			: 1;
	border				: none;
}
#navigation.responsive-navi .navi li a img{
	height: 25px;
}
}