@use "global/common" as global;

/* ------------------------------
 ナビゲーション
------------------------------- */
.acms-navbar {
	z-index: global.zIndex(acms-navbar);
	clear: both;
	width: 100%;
	margin: 0 0 20px 0;
	list-style: none outside none;
	background-color: #333333;
	border-top: solid 1px #333333;
	border-bottom: solid 1px #333333;

	// リスト全体
	ul {
		display: block;
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}

	// リンク
	a:link,
	a:visited,
	a:hover,
	a:active,
	#viewing {
		display: block;
		_display: inline-block;
		padding: 0 30px;
		color: #FFFFFF;
		font-size: 14px;
		line-height: 4.5;
		letter-spacing: 0 !important;
		text-decoration: none;
	}
	a:hover,
	#viewing {
		text-decoration: none;
		background: #808080;
	}
	.stay a,
	a:active {
		background: #666666;
	}
	#viewing {
		background: #EEEEEE;
	}
	/* リストの1段目 */
	li {
		position: relative;
			top: 0;
		font-weight: bold;
		white-space: nowrap;
		border-left: solid 1px #CCC;
		 &:last-child{
			border-right: solid 1px #CCC;
		}
	}
	/* 2段目以降 */
	ul ul {
		position: absolute;
			top: 60px;
			left: 0;
		z-index: global.zIndex(acms-navbar-deep);
		display: none;
		width: auto;
		padding: 0;
		li {
			position: relative;
			clear: left;
			width: 100%;
			height: 40px;
			font-size: 13px;
			border-right: none;
			border-left: none;
		}
		a{
			*width: 240px;
			height: 40px !important;
			padding: 0 20px;
			*overflow: visible;
			font-size: 13px;
			line-height: 3.0 !important;
			background: #333333;
			border-top: solid 1px #333333;
			border-bottom: solid 1px #999999;
			 &:hover {
				background-color: #808080;
			}
		}
	}
	ul li.stay ul a{
		background-color: #333333;
		box-shadow: 0 0 0 rgba(0,0,0,0.5);
		 &:hover{
			background-color: #808080;
		}
	}
	/* 3段目以降 */
	ul ul ul {
		position: absolute;
			top: 0;
			left: 100%;
		width: 100%;
		a {
			background: #222222;
			border-top: solid 1px #333333;
			border-bottom: solid 1px #999999;
		}
	}
}
// 3段目を表示
.acms-navbar ul li:hover > ul {
	display: block;
}
*+html .acms-navbar ul li ul a { /*IE用*/
	width: 200px; /*（94-10-10-1-1）パディングとボーダーの分を引いた値*/
	white-space: normal; /*幅に応じて改行*/
}

@media (min-width : global.$breakpoint-md-min) {
	.acms-navbar {
		height: 60px;
		ul {
			display: block;
			width: 940px;
			margin: 0 auto;
			padding: 0;
			list-style: none;
		}
		li {
			float: left;
		}
		a:link,
		a:visited,
		a:hover,
		a:active,
		#viewing {
			height: 60px;
		}
		/* 2段目以降 */
		ul ul {
			position: absolute;
				top: 60px;
				left: 0;
			li {
				position: relative;
				width: 100%;
				height: 40px;
			}
			a{
				*width: 240px;
				height: 40px !important;
				padding: 0 20px;
			}
		}
	}
}
