/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * nv_menu_box.css
 */



/*//////////////////////////////////////////////////////////////////////////////////////////////////
//
//		Navigation Menu
//
//////////////////////////////////////////////////////////////////////////////////////////////////*/  


/* :::::: pull down menu button :::::: */

#nv_menu_box {
	position: absolute;
	z-index: 91;
	top: 0px;                 /*配置位置の設定*/
	left: 3px;                  /*配置位置の設定*/
	width: 95%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
}

@media screen and (min-width: 1350px) {
	#nv_menu_box {
		position:absolute;
		padding-left:13%;
		width: 82%;
	}
}

.nv_menu {
	list-style:none;
	margin:0;
	padding:0;
}


.nv_menu li {
    position:relative;
	float:left;
	text-align: center;
	vertical-align: middle;
	margin:0;
	width: 18%;
	max-width:160px;
	//height:40px;  /*　メニュー親ボタンの本来のサイズ。設定するとプルダウン不可 */
}

/* opacity: 0.9; //全体透明化
 * background-color: rgba(51,51,51,0.6);
 * border-color: rgba(51,51,51,0.6);
 * color: rgba(51,51,51,0.6);
 */
/*  *background: #202020;         IE7 以下 【失敗】 */
/*  background-color: #202020\9;  IE8 以下 【失敗】 */

.nv_menu li:first-child > a {
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.nv_menu li:last-child > a {
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}
.nv_menu li a {
	display: block;
	cursor: pointer;
	padding: 6px 5%; /* 上下 左右 */
	transition: background-color .3s;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	text-shadow: 1px 1px 1px #000;
	font-weight: bold;

	//border-radius: 30px;
	border: thin solid #FFF;
	
	//background-image: url(../img/bar_black.jpg); /* rgbaとの併用では透過しない */
	background-color: rgba(16,16,16,0.6); /* #222タブの黒色(rgbaはIE8で不可) */
	white-space: nowrap;
	overflow: hidden;  /*　縮小時にはみでる文字削除 */
	line-height: 16px;	
	/* background-color: #222; 安定動作*/
	/* opacity: 0.9;  　　　　 安定動作*/
}


.nv_menu li a:hover {
	//background-color: #B6D4ED; /* タブの水色 */
	background-color: #303030; /* タブの明黒色 */
	text-shadow: 1px 1px 1px #000;
	box-shadow: 0 0 20px 5px rgba(255,255,255,.3) inset;
}
.nv_menu li a:active {
	background-color: #FFFFFF; /* タブの白色 */
	text-shadow: 1px 1px 1px #000;
}

.nv_menu li ul {
	list-style:none;
    padding: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1px; /*　サブメニューの一段目との間隔 */
}


.nv_menu li ul li {
	float: none;
	margin: 0;
	padding:0;
	width: 100%;
	max-width:150px;
	min-width:120px;

	/* height: 30px; */
	height: 0px;      /*　サブメニューの初期値（隠す） */
	overflow:hidden;  /*　サブメニューの初期値（隠す） */
}


.nv_menu li ul li a {
	padding: 4px 10%; /* 上下 左右 */
	//background-color: #335; /* タブの青色 */
	background-color: #224; /* タブの黒青色 */

	font-size:14px;
    text-align: left;
	border-radius: 30px;
}
.nv_menu li ul li a:hover {
	background-color: #BDF; /* タブの水色 */
}
.nv_menu li ul li a:active {
	background-color: #FFF; /* タブの白色 */
}

/* サイト外リンク */
.nv_menu li ul li a#global {
	background-color: #958; /* タブの赤色 */
}
.nv_menu li ul li a#global:hover {
	background-color: #BDF; /* タブの水色 */
}
.nv_menu li ul li a#global:active {
	background-color: #FFF; /* タブの白色 */
}

/* サイト内リンクエイリアス */
.nv_menu li ul li a#shortcut {
	background-color: #88a; /* タブの灰色 */
}
.nv_menu li ul li a#shortcut:hover {
	background-color: #BDF; /* タブの水色 */
}
.nv_menu li ul li a#shortcut:active {
	background-color: #FFF; /* タブの白色 */
}

/* 縮小時の右端リスト特殊処理: ul liをabosoluteで表示できないと不可 */
/*.nv_menu li:last-child ul {
}
*/

/* プルダウンメニュー（マウスオーバで実行） */
#_menu_box li:hover ul li {
	overflow:visible;
	height:27px;
}
.nv_menu * {
	-moz-transition: .3s;
	-webkit-transition: .3s;
	-o-transition: .3s;
	-ms-transition: .3s;
	transition: .3s;
}

@media screen and (min-width: 769px) {  /* PC */
	#nv_menu_box li ul {
	  perspective: 400px;
	}
	#nv_menu_box li:hover ul{
	}
	#nv_menu_box li ul li {
	  transform: rotateY(90deg);
	  transform-origin: 50% 0;
	  transition: .3s;
	}
	#nv_menu_box li:hover li{
	  transform: rotateY(0);
	}
	#nv_menu_box ul li:nth-child(2) {
	  transition-delay: .1s;
	}
	#nv_menu_box ul li:nth-child(3) {
	  transition-delay: .2s;
	}
	#nv_menu_box ul li:nth-child(4) {
	  transition-delay: .3s;
	}
	#nv_menu_box ul li:nth-child(5) {
	  transition-delay: .4s;
	}
}



/*//////////////////////////////////////////////////////////////////////////////////////////////////
//		Multi Screen 
//
//////////////////////////////////////////////////////////////////////////////////////////////////*/


/* :::::: media screen type :::::: */
@media screen and (min-width: 641px) and (max-width: 768px) {  /* タブレット */ 
	.nv_menu li a {
		font-size: 11px;
		background-color: #222;
	}
}
@media screen and (max-width: 640px) {  /* 携帯電話 */
	.nv_menu, .nv_menu li, .nv_menu li ul li {
		display: block;
		float: none;
		opacity: 1;
		white-space: normal;
		overflow:visible;
		max-width:380px;
		width:90%;
	}
	.nv_menu li > a {
	    height: 38px;
		background-color:#000;
	    vertical-align: middle;
	}
	.nv_menu li ul li,
	#_menu_box li:hover ul li {
		height: 38px;
		margin-left:15%;
		width:85%;
	}
	.nv_menu li a,
	.nv_menu li ul li a,
	.nv_menu li:first-child a,
	.nv_menu li:last-child a {
		border-radius: 0px;
	}
	.nv_menu li ul li a {
		height: 26px;
		padding: 5px 10%; /* 上下 左右 */
	}
	#nv_menu_box {
		position:relative;
		top: 60px;
		margin-bottom:160px;
	}
}