@charset "utf-8";


#hmenu_icon,
#hmenu_icon span {
	position: absolute;
	font-size: 0;
	box-sizing: border-box;
	display: inline-block;
	transition: all 0.4s;							/* アニメーションスピード */
	z-index: 20;
}
#hmenu_icon {
	right: 20px;									/* 右端からの位置 */
	width: 30px;
	height: 30px;
	font-size: 0;
	opacity: 1;
	top: 50%;
	transform: translateY(-50%);
}
#hmenu_icon span {
	left: 0px;
	width: 100%;
	height: 2px;									/* ハンバーガーメニューアイコンの線の太さ */
	background-color: #fff;							/* ハンバーガーメニューアイコンの色 */
	border-radius: 0px;
}
#hmenu_icon span:nth-of-type(1) {
	top: 5px;
}
#hmenu_icon span:nth-of-type(2) {
	top: 50%;
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}
#hmenu_icon span:nth-of-type(3) {
	bottom: 5px;
}
#hmenu_icon.active span:nth-of-type(1) {
	-webkit-transform: translateY(9px) rotate(-225deg);				/* 線の太さが2なら9、3なら8  */
	transform: translateY(9px) rotate(-225deg);						/* 線の太さが2なら9、3なら8  */
}
#hmenu_icon.active span:nth-of-type(2) {
	opacity: 0;
}
#hmenu_icon.active span:nth-of-type(3) {
	-webkit-transform: translateY(-9px) rotate(225deg);				/* 線の太さが2なら-9、3なら-8  */
	transform: translateY(-9px) rotate(225deg);						/* 線の太さが2なら-9、3なら-8  */
}