/* =================================================
   gnav link
================================================= */
#nav li a {
	color:#fff;
	display:inline-block;
	padding-left: 1rem;
	padding-right: 1rem;
	font-size:clamp(14px, 1vw, 16px);
}

@media (min-width:1120px){
#nav li a {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* =================================================
   nav 共通
================================================= */
#header nav#nav #menu-sp_nav {
	display:none;
}

#nav li a {
	display:block;
	position:relative;
}

#nav .menu-item-has-children > a::before,
#nav .menu-item-has-children > a::after {
	content:"";
	position:absolute;
	top:0;
	right:15px;
	bottom:0;
	margin:auto;
	width:10px;
	height:1px;
	background:#fff;
	transition:.2s;
}

#nav .menu-item-has-children > a::after {
	transform:rotate(90deg);
}

#nav .menu-item-has-children > a.open::before {
	transform:rotate(0);
}

#nav .menu-item-has-children > a.open::after {
	background:transparent;
}

#nav .menu-item-has-children .sub-menu {
	display:none;
}

/* =================================================
   SP（〜980px）
================================================= */
@media (max-width:980px){

	#header nav#nav #menu-global_nav {
		display:none;
	}

	#header nav#nav #menu-sp_nav {
		display:block;
	}

	.overlay {
		position:fixed;
		inset:0;
		z-index:11;
		background:rgba(0,0,0,.7);
		opacity:0;
		transition:opacity .5s;
		pointer-events:none;
	}

	.overlay.open {
		opacity:1;
		pointer-events:auto;
	}

	#main {
		transition:.5s;
	}

	#main.open {
		position:fixed;
		width:100%;
	}

	#menu_btn {
		position:fixed;
		top:0;
		right:0;
		z-index:9999;
		width:60px;
		height:60px;
		display:flex;
		align-items:center;
		justify-content:center;
		background:#472e0b;
		cursor:pointer;
		transition:.3s;
	}
	
	#menu_btn.active {
		background:#221504;
	}

	.menu-trigger {
		width:30px;
		height:16px;
		position:relative;
	}

	.menu-trigger span {
		position:absolute;
		left:0;
		width:100%;
		height:1px;
		background:#fff;
		transition:.5s;
	}

	.menu-trigger span:nth-of-type(1){ top:0; }
	.menu-trigger span:nth-of-type(2){ top:7px; width:70%; }
	.menu-trigger span:nth-of-type(3){ bottom:0; }

	#menu_btn.active span:nth-of-type(1){
		transform:translateY(8px) rotate(-45deg);
	}
	#menu_btn.active span:nth-of-type(2){
		opacity:0;
	}
	#menu_btn.active span:nth-of-type(3){
		transform:translateY(-7px) rotate(45deg);
	}

	#nav {
		position:fixed;
		top:0;
		right:0;
		z-index:12;
		width:280px;
		height:100%;
		padding:90px 0;
		background:#472e0b;
		transform:translateX(280px);
		transition:.5s;
		overflow:auto;
	}

	#nav.open {
		transform:translateX(0);
	}

	#nav li a {
		padding:15px 30px;
		color:#fff;
		letter-spacing:1px;
		font-size:16px;
	}

	#nav .menu-item-has-children > a {
		padding-right:2em;
	}

	#nav .menu-item-has-children .sub-menu {
		padding:10px 30px 20px;
	}

	#nav .menu-item-has-children .sub-menu li {
		margin-bottom:20px;
	}

	#nav .menu-item-has-children .sub-menu li:last-child {
		margin-bottom:0;
	}

	#nav .menu-item-has-children .sub-menu li a {
		font-size:.9em;
		line-height:1.6;
		padding-left:2rem;
		text-indent:-2rem;
	}

	#nav .menu-item-has-children .sub-menu li a::before {
		content:"・";
		margin-right:.5rem;
	}
}

/* =================================================
   PC（981px〜）
================================================= */
@media (min-width:981px){

	#menu_btn,
	.overlay {
		display:none;
	}

	#nav ul {
		display:flex;
		flex-wrap:wrap;
	}

	#nav li {
		position:relative;
		text-align:center;
	}

	#nav li a {
		font-weight:700;
	}

	#nav li a span {
		display:block;
		font-size:clamp(20px, 1.8vw, 26px);
		margin-bottom:.5rem;
		color:#111;
		font-weight:normal;
	}

	#nav .menu-item-has-children > a {
		padding-right:30px;
	}

	#nav .menu-item-has-children > a::before,
	#nav .menu-item-has-children > a::after {
		background:#444;
	}

	#nav li ul.sub-menu {
		position:absolute;
		top:67px;
		left:50%;
		transform:translateX(-50%);
		background:#fff;
		width:max-content;
		max-width:382px;
	}

	#nav li ul.sub-menu li a {
		position:relative;
		display:block;
		padding:10px 20px 10px 3rem;
		line-height:1.6;
		background:#17309b;
		color:#fff;
		border-bottom:1px solid #fff;
		font-size:clamp(14px, 1.2vw, 15px);
		text-align:left;
		text-indent:-1.3rem;
		overflow:hidden;
		z-index:0;
	}

	#nav li ul.sub-menu li:last-child a {
		border-bottom:none;
	}

	#nav li ul.sub-menu li a::before {
		content:"\f105";
		font-family:FontAwesome;
		margin-right:.5rem;
		font-size:.8em;
	}

	#nav li ul.sub-menu li a::after {
		content:"";
		position:absolute;
		inset:0;
		background:#fff100;
		opacity:0;
		transition:.4s;
		z-index:-1;
	}

	#nav li ul.sub-menu li a:hover {
		color:#111;
	}

	#nav li ul.sub-menu li a:hover::after {
		opacity:1;
	}
}