.drawer-nav {
	position:fixed;
	z-index:2;
	top:0;
	overflow:hidden;
	width:70%;/********************開いた時の幅********************/
	height:100%;
}
.drawer-brand {
	font-size:1.5rem;
	font-weight:700;
	line-height:3.75rem;
	display:block;
padding-right:.75rem;
padding-left:.75rem;
	text-decoration:none;
	color:#fff
}
.drawer-menu {
	list-style:none
}
.drawer-menu-item {
	font-size:1rem;
	display:block;
padding:.75rem;
	text-decoration:none;
	color:#222
}
.drawer-menu-item:hover {
	text-decoration:underline;
	color:#555;
	background-color:transparent
}
.drawer-overlay {
	position:fixed;
	z-index:1;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, .8)/* 開いたときの背景 */
}
.drawer-open .drawer-overlay {
	display:block
}
.drawer--top .drawer-nav {
	top:-100%;
	left:0;
	width:100%;
	height:auto;
	max-height:100%;
-webkit-transition:top .6s cubic-bezier(.19, 1, .22, 1);
transition:top .6s cubic-bezier(.19, 1, .22, 1)
}
.drawer--top.drawer-open .drawer-nav {
	top:0
}
.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
	right:0
}

.drawer--right .drawer-nav {
	right:-80%;/********************幅********************/
-webkit-transition:right .6s cubic-bezier(.19, 1, .22, 1);
transition:right .6s cubic-bezier(.19, 1, .22, 1)
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-nav,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
	right:0
}
.drawer--right.drawer-open .drawer-hamburger {
	right:2%/********************幅********************/
}
.drawer-hamburger {
	z-index:4;
	top:0;
	display:block;
	box-sizing:content-box;
	width:3rem;/* ハンバーガーアイコンの幅 */
	padding:0;
padding:18px .75rem 30px;
-webkit-transition:all .6s cubic-bezier(.19, 1, .22, 1);
transition:all .6s cubic-bezier(.19, 1, .22, 1);
	-webkit-transform:translateZ(0);
	transform:translateZ(0);
	border:0;
	outline:0;
	background-color:transparent;
	margin-left:-20%;/* ハンバーガーの右マージン */

}
.drawer-hamburger:hover {
	cursor:pointer;
	background-color:transparent
}
.drawer-hamburger-icon {
	position:relative;
	display:block;
	margin-top:5px;/* ハンバーガーの上マージン */
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
	width:100%;
	height:6px;/* ハンバーガーの太さ */
	-webkit-transition:all .6s cubic-bezier(.19, 1, .22, 1);
	transition:all .6s cubic-bezier(.19, 1, .22, 1);
	background-color:#Fff/* ハンバーガーの色 */
}
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
	position:absolute;
	top:-16px;/* ハンバーガーの間隔調整 */
	left:0;
	content:' '
}
.drawer-hamburger-icon:after {
	top:16px/* ハンバーガーの間隔調整 */
}
.drawer-open .drawer-hamburger-icon {
	background-color:transparent
}
.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before {
	top:0
}
.drawer-open .drawer-hamburger-icon:before {
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg)
}
.drawer-open .drawer-hamburger-icon:after {
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg)
}

/* ここからカスタム */
.drawer-menu li{
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	background-color:#eb519a;
	font-size:1em;
}
.drawer-menu li a{
	color:#fff;
	display: block;
	padding-left: 1em;
}