@charset "UTF-8";

/* ----------
スマホヘッダー
---------- */
#spheader {
	display:none;
}
#spheader .header {
	position: sticky; /* headerを追従にする */
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height:64px;
	background:rgba(255, 255, 255, 0.8);
	position:fixed;
	z-index: 1111111111111111111;
}
#spheader .header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem;
}

/* ヘッダーのロゴ */
#spheader .logo {
}

#spheader .logo img {
	width: 100%;
	max-width: 250px;
	height: auto;
	vertical-align:bottom;
}

#spheader .drawer__nav__inner .logo img {
	width: 100%;
	max-width: 210px;
	height: auto;
}

/* ハンバーガーボタンのデザイン */
#spheader .drawer__button {
	position: relative;
	width: 3rem;
	height: 3rem;
	background-color: transparent;
	border: none;
	cursor: pointer;
	z-index: 999; /* メニューを開いている時もクリックできるよう設定 */
}

/* ハンバーガーボタン内の線 */
#spheader .drawer__button > span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2px;
	background-color: black;
	transform: translateX(-50%);
}
#spheader .drawer__button > span:first-child {
	transform: translate(-50%, calc(-50% - 0.5rem));
	transition: transform 0.3s ease;
}
#spheader .drawer__button > span:nth-child(2) {
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
}
#spheader .drawer__button > span:last-child {
	transform: translate(-50%, calc(-50% + 0.5rem));
	transition: transform 0.3s ease;
}

/* 展開時のデザイン */
#spheader .drawer__button.active > span:first-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}
#spheader .drawer__button.active > span:nth-child(2) {
	opacity: 0;
}
#spheader .drawer__button.active > span:last-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

/* メニューのデザイン */
#spheader .drawer__nav {
	position: fixed; /* 追従ヘッダーなどでも表示できるよう設定しておく */
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s ease;
	opacity: 0;
	visibility: hidden;
}
#spheader .drawer__nav.active {
	opacity: 1;
	visibility: visible;
}
#spheader .drawer__nav__inner {
	position: relative;
	width: 80%;
	height: 100%;
	background-color: white;
	padding: 4rem 1.5rem 1rem;
	margin: 0 0 0 auto;
	overflow: scroll;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}
#spheader .drawer__nav.active .drawer__nav__inner {
	transform: translateX(0);
}
#spheader .drawer__nav__menu {
	list-style: none;
	padding-left: 0;
	padding: 30px 0px;
}
#spheader .drawer__nav__menu a{
	display:block;
	text-decoration:none;
	font-size: 18px;
	letter-spacing: 0.1em;
	text-align: left;
	color: #333;
	padding:10px;
	border-top:solid 1px #D5D5D5;
}

@media screen and (max-width: 1140px) {
	#spheader {
		display:block;
	}
}

@media screen and (max-width: 767px) {
}