@charset "UTF-8";

/* Mobile navigation */

.nav-mobile{
	display:none;
	position:absolute;
	top:0;
	right:0;
	background:rgba(255, 255, 255, 0);
	height:80px;
	width:80px;
}

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

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

	nav > ul{
		display:none;
		padding: 30px 0 10px;
		background-color: rgba(255, 255, 255);
	}

	nav > ul > li{
		width:100%;
	}
	
	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:1270px){
	.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:#444;
	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);
}

/* dropdown nav */
.navigation{
	position:relative;
	height:80px;
	background:#FFF;
}

#brand{
	position:absolute;
	top:24px;
	left:24px;
}

#brand img{
	width:160px;
}

#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 li{
	list-style:none;
	margin:0;
}

nav > ul > li{
	position:relative;
	width:auto;
}

nav > ul > li > ul li{
	width:auto;
	min-width:200px;
}

nav > ul > li > ul li a{
	padding:16px;
	line-height:20px;
}
.nav-dropdown{
	position:absolute;
	z-index:100;
	visibility: hidden;
	opacity: 0;
	transition:0.4s;
	background-color: #FFF;
	box-shadow:0 15px 10px -5px rgba(0, 0, 0, 0.12);
}

/*2階層目を持つliの矢印の設定*/

  nav > ul > li a:not(:only-child)::after{
	content:' ▾';
	position: relative;
	padding-left: 4px;
}
 
nav li:hover > ul,
nav li ul li:hover > ul,
nav li:active > ul,
nav li ul li:active > ul{
  visibility: visible;
  opacity: 1;
}