/*---------- ↓ hamburger ↓ ----------*/
/* 
hamburger(ハンバーガーアイコン)
=================================== */
.hamburger {
	position: absolute;
	right: 40px;
	top: 30px;
	width: 35px;
	height: 47px;
	cursor: pointer;
	z-index: 300;
}
.hamburger__line {
	position: absolute;
	width: 35px;
	height: 2px;
	right: 0;
	background-color: #000;
	transition: all 0.5s;
}
.hamburger__line--1 {
	top: 15px;
}
.hamburger__line--2 {
	top: 30px;
}
.hamburger__line--3 {
	top: 45px;
}

/*ハンバーガーがクリックされたら*/
.open .hamburger__line--1 {
	transform: rotate(-45deg);
	top: 30px;
}
.open .hamburger__line--2 {
	opacity: 0;
}
.open .hamburger__line--3 {
	transform: rotate(45deg);
	top: 30px;
}
.sp-nav ul{
	display: block;
	margin-top: 100px;
	margin-left: 15px;
}
.sp-nav ul li{
	margin-bottom: 10px;
}
/* sp-nav(ナビ)=================================== */
.sp-nav {
	position: fixed;
	right: -100%; /*ハンバーガーがクリックされる前はWindow右側に隠す*/
	top: 0;
	width: 220px; /* 出てくるスライドメニューの幅 */
	height: 100vh;
	background-color: #f8f4e6;
	transition: all 0.5s;
	z-index: 200;
	overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
/*ハンバーガーがクリックされたら右からスライド*/
.open .sp-nav {
	right: 0;
}
/* black-bg(ハンバーガーメニュー解除用bg)=================================== */
.black-bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 5;
	background-color: #000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s;
	cursor: pointer;
	z-index: 100;
}
/*ハンバーガーメニューが開いたら表示*/
.open .black-bg {
	opacity: 0.3;
	visibility: visible;
}