@charset "UTF-8";

/* ------------------------------------------
	NAV
--------------------------------------------- */
.navigation{
	position:relative;
	height:80px;
	background:var(--contrast_l_color);
}

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

#brand img{
	width:160px;
}

#brand a:link,
#brand a:visited,
#brand a:hover,
#brand a:active{
	color:var(--blue01);
	text-decoration:none;
}

@media(max-width:840px){
	.navigation{
		height:60px;
	}

	#brand img{
		width:128px;
	}
}

.nav-container{
	position: relative;
	width: 100%;
	max-width:1024px;
	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:left;
	/* width:15vw; */
}

/**/

nav > ul > li a{
	display:block;
	font-size:min(1.68vw,18px);
	padding:0 20px;
	line-height:80px;
	transition:0.4s;
}

nav > ul > li a:link,
nav > ul > li a:visited{
	color:var(--blue01);
	text-decoration:none;
}

nav > ul > li a:hover,
nav > ul > li a:active{
	color:var(--blue02);
	text-decoration:none;
}

/* 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:12px;
	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;
	right:0; /* 右端調整 */
}

/* Mobile navigation */

.nav-mobile{
	/* display:none; */
	position:absolute;
	top:22px;
	right:8px;
	height:36px;
	width:60px;
	background-color: #eaeef1;
	border-radius: 4px;
	transition: background-color 0.4s ease;

}

.nav-mobile.is-active {
	background-color: var(--blue01);
}

@media(max-width:840px){
	.nav-mobile{
		top:12px;
		right:8px;
		height:36px;
		width:60px;
	}
}




	.nav-mobile{
		display:block;
	}

	nav{
		width:60%;
		margin: 0 0 0 auto;
		padding:0;
	}

	nav > ul{
		display:none;
		position: relative;
		top: 80px;
		background-color:#b2b8bf;
		padding: 8px;
		border-radius: 4px;
	}

	nav > ul > li{
		text-align:left;
		width:100%;
		margin:0 auto;
	}
	
	nav > ul > li a{
		padding:12px;
		line-height:1.2;
	}

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

	.nav-dropdown{
		position:static;
	}

@media(max-width:840px){
	nav > ul{
		top: 60px;
		height: calc(100vh - 60px);
	}

	nav > ul > li a{
		font-size:max(1.0rem,3.6vw);
	}

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



/* 開閉ボタン */

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

#nav-toggle span,
#nav-toggle span::before,
#nav-toggle span::after{
	cursor:pointer;
	border-radius:1px;
	height:2px;
	width:24px;
	background:var(--blue01);
	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:-8px;
}

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

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

#nav-toggle.active span::before,
#nav-toggle.active span::after{
	background:var(--contrast_l_color);
}

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

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



/* ------------------------------------------
	ADD
--------------------------------------------- */
nav > ul > li{
	background-color: #FFF;
	width: 100%;
	padding: 48px 12px;
	border-radius: 4px;
}

@media(max-width:840px){
	nav > ul > li{
		padding: 48px 12px 100px;
	}

	nav > ul > li.nav-contents{
		height: calc(100vh - 76px);
	}
}

nav > ul > li > img{
	position: absolute;
	top: 24px;
	left: 24px;
	bottom: auto;
	width: 32%;
}

@media(max-width:840px){
	nav > ul > li img{
		top: auto;
		bottom: 24px;
		left: 50%;
		transform: translateX(-50%);
	}
}

nav > ul > li > .nav_div{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	font-size: 0.72rem;
}

nav > ul > li > .nav_div > div{
	width: 50%;
	margin: 0 auto;
}

nav > ul > li > .nav_div > div > a:nth-child(1),
nav > ul > li > .nav_div > div > a:nth-child(2)
{
	font-weight: 700;
}

@media(max-width:840px){
	nav > ul > li > .nav_div{
		flex-direction: column;
	}

	nav > ul > li > .nav_div > div{
		width: 64%;
		min-width: 264px;
	}
}

nav > ul > li > .nav_div > div.contact{
	display: none;
	padding: 24px 0;
}

@media(max-width:840px){
	nav > ul > li > .nav_div > div.contact{
		display: block;
	}
}

nav > ul > li > .nav_div > div.contact a{
	display: block;
	text-decoration: none;
	text-align: center;
	line-height: 1.0;
	padding: 12px 48px;
	border-radius: 4px;
	width: 64%;
	min-width: 240px;
	margin: 0 auto;
}

nav > ul > li > .nav_div > div.contact a:link,
nav > ul > li > .nav_div > div.contact a:visited
{
	color: var(--contrast_l_color);
	background-color: var(--blue01);
	border: 1px solid var(--blue01);
}

nav > ul > li > .nav_div > div.contact a:hover,
nav > ul > li > .nav_div > div.contact a:active
{
	color: var(--blue01);
	background-color: var(--contrast_l_color);
	border: 1px solid var(--blue01);
}



/* ==============================
	 メニュー内 クローズボタン（SPのみ）
============================== */

/* デフォルト（PCでは非表示） */
.nav-close {
	display: none;
}

/* SPのみ表示 */
@media (max-width: 768px) {
	.nav-close {
		display: block;
	}
}

.nav-close-wrap {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ul を基準にする */
nav > ul {
	position: relative;
}

.nav-close {
	position: absolute;
	top: 0px;
	right: 12px;
	font-size: 80px;
	line-height: 1.0;
	background: none;
	border: none;
	color: var(--blue04);
	cursor: pointer;
	z-index: 10000;
}

.nav-close:hover {
	color: var(--blue02);
}