.menu {

	position: fixed;

	width: 300px;

	top: 3em;

	bottom: 3em;

	left: 0;

	z-index: 100;

	overflow: hidden;

	-webkit-transform: translate3d(-150px, 0, 0);

	transform: translate3d(-150px, 0, 0);

	-webkit-transition: -webkit-transform 0.6s;

	transition: transform 0.6s;

}



.menu.menu--open {

	-webkit-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);
}



.main {

	-webkit-transition: opacity 0.6s;

	transition: opacity 0.6s;

}



.menu.menu--open + .main{

	opacity: 0.3;

	pointer-events: none;

}



.menu__inner {

	width: calc(100% + 25px);

	padding: 0 140px 2em 0;

	overflow-y: auto;

	height: 100%;

	position: relative;

	z-index: 100;

}



.menu ul {

	list-style: none;

	padding: 0;

	margin: 0;

}



.menu ul li {

	margin: 0 0 2em 0;
	-webkit-transform: translate3d(-150px, 0, 0);

	transform: translate3d(-150px, 0, 0);

	-webkit-transition: -webkit-transform 0.6s;

	transition: transform 0.6s;

}



.menu.menu--anim ul li {

	-webkit-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

}



.menu ul li:first-child {

	-webkit-transition-delay: 0.3s;

	transition-delay: 0.3s;

}



.menu ul li:nth-child(2) {

	-webkit-transition-delay: 0.2s;

	transition-delay: 0.2s;

}



.menu ul li:nth-child(3) {

	-webkit-transition-delay: 0.1s;

	transition-delay: 0.1s;

}



.menu ul li a {

	display: block;

	outline: none;

}




.menu ul li span {
	font-weight: bold;
	font-size: 0.9em;

	line-height: 1;
	font-family: Century Gothic, Meiryo,sans-serif;
}



.menu__handle {

	background: none;

	border: none;

	width: 30px;

	height: 24px;

	padding: 0;

	outline: none;

	position: absolute;
	top: 3px;
	right: 70px;

	z-index: 2000;

}



.menu__handle::before,
.menu__handle::after,
.menu__handle span {

	background: #5f656f;
}



.menu__handle::before,
.menu__handle::after {

	content: '';

	position: absolute;

	height: 2px;

	width: 100%;

	left: 0;

	top: 50%;

	-webkit-transform-origin: 50% 50%;

	transform-origin: 50% 50%;

	-webkit-transition: -webkit-transform 0.25s;

	transition: transform 0.25s;

}



.menu__handle span {

	position: absolute;

	width: 100%;

	height: 2px;

	left: 0;

	overflow: hidden;

	text-indent: 200%;

	-webkit-transition: opacity 0.25s;

	transition: opacity 0.25s;

}



.menu__handle::before {

	-webkit-transform: translate3d(0, -10px, 0);

	transform: translate3d(0, -10px, 0);

}



.menu__handle::after {

	-webkit-transform: translate3d(0, 10px, 0);

	transform: translate3d(0, 10px, 0);

}



.menu--open .menu__handle span {

	opacity: 0;

}



.menu--open .menu__handle::before {
	
	-webkit-transform: rotate3d(0, 0, 1, 45deg);

	transform: rotate3d(0, 0, 1, 45deg);

}



.menu--open .menu__handle::after {

	-webkit-transform: rotate3d(0, 0, 1, -45deg);

	transform: rotate3d(0, 0, 1, -45deg);

}



.morph-shape {

	position: absolute;

	width: 240px;

	height: 100%;

	top: 0;

	right: 0;

}



.morph-shape svg path {

	stroke: #5f656f;

	stroke-width: 5px;

}



@media screen and (max-width: 63em) {

	.main {
	
		padding: 0 2em;

		-webkit-transition: opacity 0.6s;

		transition: opacity 0.6s;

	}


	.menu {

		-webkit-transform: translate3d(-170px, 0, 0);

		transform: translate3d(-170px, 0, 0);
	}


	.menu.menu--open + .main {

		opacity: 0.05;
	}
}