@charset "UTF-8";

/* ------------------------------------------
	NAV
--------------------------------------------- */
.navigation{
	position:relative;
	height:80px;
	background:rgba(0,0,0,0.4);
}

#brand{
	position:absolute;
	top:20px;
	left:24px;
	/* transform:translateX(-50%); */
}

#brand img{
	width:100px;
}

#brand a:link,
#brand a:visited,
#brand a:hover,
#brand a:active{
	color:#444;
	text-decoration:none;
}

.nav-container{
	width:100%;
	margin:0 auto;
}

nav ul{
	padding:0;
	margin:0;
}

nav > ul{
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-end;
	width:100%;
	padding: 0 12px;
}

nav > ul li{
	list-style:none;
	margin:0;
}

nav > ul > li{
	position:relative;
	text-align:center;
	/* width:15vw; */
}

@media(max-width:959px){
	nav > ul > li:nth-child(3){
		margin-right:0;
	}
}
/**/

nav > ul > li a{
	display:block;
	font-size:1.0em;
	padding:0 20px;
	line-height:80px;
	transition:0.4s;
}

nav > ul > li a:link,
nav > ul > li a:visited{
	color:#FFF;
	text-decoration:none;
}

nav > ul > li a:hover,
nav > ul > li a:active{
	color:#ff8c00;
	text-decoration:none;
	background:linear-gradient(to bottom,transparent 96%,#ff8c00 96%);
}

nav > ul > li a:not(:only-child)::after{
	padding-left:4px;
	content:' ▾';
}

nav > ul > li > ul li{
	width:auto;
	min-width:15vw;
}

nav > ul > li > ul li a{
	padding:16px;
	line-height:20px;
}

.nav-dropdown{
	position:absolute;
	display:none;
	background-color:rgba(0,0,0,0.4);
	z-index:100;
	box-shadow:0 4px 12px rgba(0, 0, 0, 0.12);
	transition:0.4s;
}

/* Mobile navigation */

.nav-mobile{
	display:none;
	position:absolute;
	top:0;
	right:0;
	height:80px;
	width:80px;
}

@media(max-width:959px){
	.nav-mobile{
		display:block;
	}

	nav{
		width:100%;
		padding:0;
	}

	nav > ul{
		display:none;
		background-color:rgba(0,0,0,0.8);
		height:100vh;
		padding-top:100px;
	}

	nav > ul > li{
		text-align:center;
		width:100%;
		margin:0 auto;
	}

	nav > ul > li a{
		padding:16px;
		line-height:20px;
	}

	nav > ul > li ul li a{
		padding-left:32px;
	}

	.nav-dropdown{
		position:static;
	}
}

@media(min-width:960px){
	.nav-list{
		display:flex !important;
	}
}

/* 開閉ボタン */

#nav-toggle{
	position:absolute;
	left:22px;
	top:28px;
	cursor:pointer;
	padding:10px 36px 16px 0px;
	z-index:9999;
}

#nav-toggle span,
#nav-toggle span::before,
#nav-toggle span::after{
	cursor:pointer;
	border-radius:1px;
	height:2px;
	width:36px;
	background:#FFF;
	position:absolute;
	display:block;
	content:'';
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
}

#nav-toggle span::before{
	top:-10px;
}

#nav-toggle span::after{
	bottom:-10px;
}

#nav-toggle.active span{
	width:0;
}

#nav-toggle.active span::before{
	top:0;
}

#nav-toggle.active span::after{
	bottom:0;
}

#nav-toggle.active span::before{
	transform:rotate(135deg);
}

#nav-toggle.active span::after{
	transform:rotate(-135deg);
}