@charset "UTF-8";
/*ーーーーーーーーーー
.header
ーーーーーーーーーーー*/
#menu {
	position: sticky;
	top: 0;
	z-index: 999;
}

#global-nav ul {
	display: flex;
	justify-content: center;
	background: #ab9969;
}

#global-nav ul li:last-child {
	border-right: none;
}

#menu .pcmenu {
	width: 1000px;
	margin: auto;
}

/* ---------- SPスタイル ---------- */
@media (max-width: 768px) {
	#menu {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 999;
	}

	#global-nav ul {
		display: block;
		margin: 0;
	}

	.pc { display: none !important; }
	.sp { display: block !important; }

	#mobile-head {
		position: relative;
		width: 50px;
		height: 50px;
		z-index: 1002;
		background: #ab9969;
	}

	#nav-toggle {
		appearance: none;
		border: 0;
		background: transparent;
		width: 44px;
		height: 23px;
		position: absolute;
		top: 13px;
		right: 3px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		z-index: 1003;
	}
	#nav-toggle span {
		display: block;
		width: 26px; height: 2px;
		background: #fff;
		position: relative;
		transition: transform .25s ease, opacity .25s ease;
	}
	#nav-toggle span:nth-child(2) {
		margin: 6px 0;
	}

	.open #nav-toggle span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
	.open #nav-toggle span:nth-child(2) { opacity: 0; }
	.open #nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	#global-nav {
		position: fixed;
		top: 0; right: 0;
		height: 100vh;
		width: 78vw;
		max-width: 360px;
		background: #ab9969;
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 1001;
		padding-top: 56px;
		box-shadow: -8px 0 16px rgba(0,0,0,.15);
	}
	.open #global-nav { transform: translateX(0); }

	.spmenu { padding: 0 0 24px; }
	.spmenu-list { list-style: none; margin: 0; padding: 0; }
	.spmenu-list > li {
		border-bottom: 1px solid #fff;
		margin: 0 10px;
	}
	.spmenu-list > li:last-child {
		border-bottom: none;
	}
	.spmenu-list > li a {
		display: block;
		width: 150px;
		text-decoration: none;
		padding: 16px 0;
		font-size: 16px;
		line-height: 1.4;
		text-align: left;
	}
	.spmenu-list > li a:active { opacity: .8; }

	#menu-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease;
		z-index: 1000;
	}
	.open #menu-overlay { opacity: 1; visibility: visible; }
}

#menu.fixed {
	margin-top: 0;
	top: 0;
	position: fixed;
	height: 100px;
	transition: top 0.65s ease-in;
	-webkit-transition: top 0.65s ease-in;
	-moz-transition: top 0.65s ease-in;
	z-index: 9999;
}
