<div class="cp_sidebar">
	<header>Menu</header>
	<nav class="cp_sidebar_nav">
		<ul>
		<li><a href="#"><i class="fa fa-home fa-fw"></i><span>Menu1</span></a>
			<ul class="cp_sidebar_2ndnav">
			<li><a href="#"><i class="fa fa-calendar fa-fw"></i>Menu1 2nd Menu1</a></li>
			<li><a href="#"><i class="fa fa-calendar-minus-o fa-fw"></i>Menu1 2nd Menu2</a></li>
			<li><a href="#"><i class="fa fa-calendar-times-o fa-fw"></i>Menu1 2nd Menu3</a></li>
			<li><a href="#"><i class="fa fa-calendar-plus-o fa-fw"></i>Menu1 2nd Menu4</a></li>
			</ul>
		</li>
		<li><a href="#"><i class="fa fa-file-text fa-fw"></i><span class="">Menu2</span></a>
			<ul class="cp_sidebar_2ndnav">
			<li><a href="#"><i class="fa fa-file-image-o fa-fw"></i>Menu2 2nd Menu1</a></li>
			<li><a href="#"><i class="fa fa-file-video-o fa-fw"></i>Menu2 2nd Menu2</a></li>
			<li><a href="#"><i class="fa fa-file-audio-o fa-fw"></i>Menu2 2nd Menu3</a></li>
			</ul>
		</li>
		<li>
		<a href="#"><i class="fa fa-comment fa-fw"></i><span class="">Menu3</span></a>
			<ul class="cp_sidebar_2ndnav">
			<li><a href="#"><i class="fa fa-commenting fa-fw"></i>Menu3 2nd Menu1</a></li>
			<li><a href="#"><i class="fa fa-comments fa-fw"></i>Menu3 2nd Menu2</a></li>
			</ul>
		</li>
		<li>
		<a href="#"><i class="fa fa-share-alt fa-fw"></i><span class="">Menu4</span></a>
			<ul class="cp_sidebar_2ndnav">
			<li><a href="#"><i class="fa fa-facebook fa-fw"></i>Menu4 2nd Menu1</a></li>
			<li><a href="#"><i class="fa fa-twitter fa-fw"></i>Menu4 2nd Menu2</a></li>
			<li><a href="#"><i class="fa fa-google-plus fa-fw"></i>Menu4 2nd Menu3</a></li>
			</ul>
		</li>
		<li class="control"><a href="#"><i class="fa fa-cog fa-fw"></i><span class="">Menu5</span></a></li>
		</ul>
	</nav>
</div>

.cp_sidebar a {
	-webkit-transition: all 0.6s ease;
					transition: all 0.6s ease;
	text-decoration: none;
}
.cp_sidebar a:hover {
	-webkit-transition: all 0.6s ease;
					transition: all 0.6s ease;
}
.cp_sidebar * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_sidebar {
	position: absolute;
	top: 0;
	visibility: visible;
	overflow: hidden;
	width: 270px;
	height: 100%;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	background-color: #37474F;
}
.cp_sidebar header {
	display: block;
	width: 100%;
	padding: 0.75em	1em;
	background-color: #00BCD4;
}
.cp_sidebar_nav {
	font-size: 1.2em;
	position: fixed;
	z-index: 9;
	overflow: hidden;
	/* overflow: auto; メニューをスクロールさせる場合*/
	height: 100%;
	padding-bottom: 6em;
	background-color: #263238;
	-webkit-overflow-scrolling: touch;
}
.cp_sidebar_nav ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 270px;
}
.cp_sidebar_nav ul li {
	display: inline-block;
	width: 100%;
	margin-left: 0;
	padding-left: 0;
}
.cp_sidebar_nav ul li.control {
	background-color: #006064;
}
.cp_sidebar_nav ul li a {
	font-size: 0.75em;
	position: relative;
	display: block;
	padding: 1.05em	1em;
	color: rgba(255, 255, 255, 0.9);
}
.cp_sidebar_nav ul li a:hover {
	-webkit-transition: all 0.6s ease;
					transition: all 0.6s ease;
	background-color: rgba(0,172,193 ,0.9);
}
.cp_sidebar_nav ul li i {
	font-size: 1.5em;
	display: inline-block;
	padding-right: 0.5em;
	vertical-align: middle;
}
.cp_sidebar_nav ul li > ul li a {
	font-size: 0.6em;
}
.cp_sidebar_nav > ul > li > a:after {
	font-family: FontAwesome;
	font-size: 1.5em;
	position: absolute;
	top: 50%;
	right: 0.5em;
	width: auto;
	content: '\f0a9';
	-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
	color: #ffffff;
}
.cp_sidebar_nav .cp_sidebar_2ndnav {
	position: absolute;
	z-index: 9;
	top: 0;
	left: 2.2em;
	height: 100vh;
	-webkit-transition: all 0.5s ease;
					transition: all 0.5s ease;
	-webkit-transform: translateX(100%);
					transform: translateX(100%);
	background-color: #455a64;
}
.cp_sidebar_nav .cp_sidebar_2ndnav a:hover {
	background-color: rgba(0,172,193 ,0.7);
}
.cp_sidebar_nav ul > li:hover .cp_sidebar_2ndnav {
	-webkit-transition: all 0.5s ease;
					transition: all 0.5s ease;
	-webkit-transform: translateX(0);
					transform: translateX(0);
}