@charset "utf-8";

/*************************************************
 * Description: 【トップ】ecp_global_nav
 * Package: ecp_global_nav
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2017/11/
 * Notes: 
*************************************************/
#block_global_nav {
}
#block_global_nav .section_head {
}
#block_global_nav .section_body {
}
#block_global_nav .section_foot {
}

/* テキストリンクカラー */
#block_global_nav a:link,
#block_global_nav a:visited {
	color: inherit;
}
#block_global_nav a:hover {
}

/* ==============================================
 * グローバルナビ
=============================================== */
#block_global_nav .global_nav_area {
	width: 100%;
	background-color: #DAD2BE;
	background: linear-gradient(to right, #dad2be 49%,#dad2be 50%);
}
#block_global_nav .global_nav_area ul.parent {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	height: 60px;
	position: relative;
}
#block_global_nav .global_nav_area ul.parent:after {
	content: "";
	display: block;
	width: 1px;
	height: 22px;
	background-color: #B09D7C;
	position: absolute;
	top: 19px;
	right: 0;
}
#block_global_nav .global_nav_area ul.parent >li {
	flex: 0 0 auto;
	width: calc(100% / 5);
	box-sizing: border-box;
	transition: .3s;
	position: relative;
}
#block_global_nav .global_nav_area ul.parent >li:after {
	content: "";
	display: block;
	width: 1px;
	height: 22px;
	background-color: #B09D7C;
	position: absolute;
	top: 19px;
	left: 0;
	transition: .3s;
}

#block_global_nav .global_nav_area ul.parent >li >a {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 10px;/*念のため余白*/
	box-sizing: border-box;
	font-size: 14px;
	transition: .3s;
}
#block_global_nav .global_nav_area ul.parent >li:nth-child(-n+3) >a {
	background-color: #DAD2BE;
}
#block_global_nav .global_nav_area ul.parent >li:nth-child(4) >a {
	background-color: #DAD2BE;
}
#block_global_nav .global_nav_area ul.parent >li:nth-child(n+5) >a {
	background-color: #DAD2BE;
}

/* hover & is-active */
#block_global_nav .global_nav_area ul.parent >li:hover >a,
#block_global_nav .global_nav_area ul.parent >li.is-active >a {
	text-decoration: none;
	background-color: #B09D7C;
	color: #fff;
}
#block_global_nav .global_nav_area ul.parent >li:hover + li:after {/*hover時となりの区切り線を消す*/
	opacity: 0;
}

@media ( max-width: 979px ) {
	#block_global_nav {
		display: none;
	}
}


/* ==============================================
 * サブナビ
=============================================== */
/*親要素*/
#block_global_nav .global_nav_area ul.parent {
	position: relative;
}
/* サブナビ
----------------------------------------------- */
#block_global_nav .global_nav_area .nav_sub {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 99;
	background-color: rgba(0,0,0,0.8);
	padding: 10px;
	box-sizing: border-box;
	color: #fff;
}
/* 個別指定（各サブナビの表示左端位置と幅を指定）
 * 例： ボタン数が6の時で、2つめの位置から3個分の幅を確保するなら、
 * left: calc((100% / 6) * 2);
 * width: calc((100% / 6) * 3);
 */
#block_global_nav .nav_1 .nav_sub {}
#block_global_nav .nav_2 .nav_sub {}
#block_global_nav .nav_3 .nav_sub {}
#block_global_nav .nav_4 .nav_sub {}
#block_global_nav .nav_5 .nav_sub {}
#block_global_nav .nav_6 .nav_sub {}

/* サブナビ表示（マウスオーバー）
----------------------------------------------- */
#block_global_nav  .nav_sub {
	visibility: hidden;
	opacity: 0;
	transition: .3s;
	transform: translateY(-20px);/*上下アニメーション開始位置*/
	pointer-events: none;/*マウスイベント無効（サブナビが戻るとき他の親ボタン上に干渉するので無効）*/
}
#block_global_nav  ul.parent >li:hover >.nav_sub {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}