/* navi-opener
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
.navi-opener{ display: none; }
}
@media screen and (max-width: 769px) {
.navi-opener{
	position			: fixed;
	top					: 10px;
	right				: 2.5vw;
	z-index				: 100;
	cursor				: pointer;
	width				: 45px;
	height				: 45px;
	padding				: 0 2rem 0 0;
	text-align			: left;
}
.navi-opener .opener:after{
	content				: "MENU";
	position			: absolute;
	bottom				: 3px;
	width				: 45px;
	display				: block;
	width				: 100%;
	text-align			: center;
	font-family			: var(--font-en);
	font-weight			: bold;
	font-size			: 1rem;
	line-height			: 1;
	color				: #FFF;
}

.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			: #FFF;
}

.navi-opener .bar{
	top					: 13px;
	right				: 13px;
	background			: #e0ede0;
}
.navi-opener .bar::before,
.navi-opener .bar::after{
	content				: " ";
	right				: 0;
	opacity				: 0.8;
}
.navi-opener .bar::before	{ margin-top: -8px; }
.navi-opener .bar::after	{ margin-top: 4px; }

/* open */
}
.navi-opener.open .opener:after{
	content: "CLOSE";
}
.navi-opener.open .bar			{ background: transparent; }
.navi-opener.open .bar::before,
.navi-opener.open .bar::after	{ margin-top: 0; }
.navi-opener.open .bar::before	{ transform: rotate(-45deg); }
.navi-opener.open .bar::after	{ transform: rotate(-135deg); }
}