/*----------------------------------------
** mcframe Day 2019
** mcframeday.com
** navi
----------------------------------------*/
nav {
	font-size: 0.93rem;
	font-weight: 700;
	padding: 0;
	margin: 0 auto 0 20px;
	display: flex;
	align-items: center;
	transition: 0.5s all;
}


@media screen and (max-width:768px) {}

/*------------------------------*/
nav a {
	padding: 10px 1rem;
	position: relative;
}
nav a,nav a:visited,nav a:active {
	color: #fff;
	text-decoration: none;
}
nav a:hover {
	color: #fff;
	text-decoration: none;
}
nav div a:after {
	content: '';
	background: #fff;
	width: 0%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	opacity: 0;
	transition: 0.3s all;
}
nav div a:hover:after {
	content: '';
	background: #fff;
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	opacity: 1;
	bottom: 0;
}
nav div:last-child {
	width: 140px;
}
nav div:last-child a {
	display: flex;
	padding: 10px 0;
}
@media screen and (max-width: 768px) {
	nav.__open {
		top: 60px;
		left: 0;
	}
	nav {
		background: rgba(77, 77, 77, 0.9);
		padding: 30px;
		margin: 0;
		font-size: 1.2rem;
		display: block;
		position: fixed;
		top: 60px;
		left: -100%;
		width: 100%;
		height: 100vh;
		transition: 0.3s all;
		overflow-y: auto;
		z-index: 800;
	}
	nav a {
		padding: 0.5em 0;
		position: relative;
		display: block;
	}
	nav div:last-child {
		width: 50%;
	}
}

/*------------------------------
** humbuger menu
------------------------------*/
@media screen and (max-width: 768px) {
	.menu-trigger {
		display: block;
		cursor: pointer;
		position: fixed;
		width: 30px;
		height: 27px;
		top: 15px;
		left: 15px;
		z-index: 900;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #A0B4BE;
		/*border-radius: 4px;*/
		border-bottom: 1px solid #fff;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 12px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger.active {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	.menu-trigger.active span {
		background-color: #A0B4BE;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(12px) rotate(-45deg);
		transform: translateY(12px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		-webkit-transform: translateY(0) rotate(45deg);
		transform: translateY(0) rotate(45deg);
	}
	.menu-trigger.active span:nth-of-type(3) {
		opacity: 0;
	}
}


/*------------------------------
** navi for SP
------------------------------*/

@media screen and (max-width: 768px) {

}