@charset "utf-8";

/******************************************************************
*
*　浜田浄化センター様　メニュー用スタイルシート
*
*　2016/05/25
*
******************************************************************/

#menu{
	list-style-type: none;
	/*width: 870px;*/
	min-width: 90%; /* メインメニューの幅 90% */ 
	height: 50px;                  /* メインメニューの高さ */
	/*height: 48px;*/
	margin: 0px auto;
	display: flex;                 /* メインメニュー全体のセンター表示 */
	justify-content: center;       /* メインメニュー全体のセンター表示 displayとセット */
	padding: 0;
	background: #0192E5;           /* メインメニューの背景色 #FFBF00 */
	border-top: 3px solid #8CC6FF;    /* バーの上端線指定 #F90 */
	border-bottom: 3px solid #8CC6FF; /* バーの下端線指定 */

	cursor: pointer;

	/*border-top: 3px solid #808080;*/    /* バーの上端線 */
	/*border-bottom: 3px solid #808080;*/ /* バーの下端線 */
	/*border-top: 1px solid #F90;*/   /* バーの上端線 */
	/*border-bottom: 1px solid #F90;*//* バーの下端線 */
	/*border-radius: 10px 10px 0px 0px;*/
}

#menu li{
	position: relative;
	/*width: 16.666666666%;*/ /* メインメニューの幅を指定 */
	width: 15%; 	            /* メインメニューの幅を指定 */
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
	border-left: 1px solid #8CC6FF; /* メニュー左横の縦線 #F90 */
	border-right: 1px solid #8CC6FF; /* メニュー左横の縦線 #F90 */
	/*border-right:1px solid #8CC6FF;*/ /* メニュー右横の縦線 #F90 */
	/*border: 1px solid #F90;*/
}

/* メニュー一番左の縦線を消す */
/*
#menu li:first-child{
	border: none; /* 親要素から見て一番目のli要素のボーダーを無しに
}
*/

/* メニュー一番右の縦線を表示 */
/*#menu li:last-child{
	border: 1px solid #8CC6FF;; /* 親要素から見て最後のli要素のボーダーを有りに
}
*/

/* メインメニュー文字の装飾 */
#menu li p{
	display: block;
	margin: 0;
	/* padding: 12px 0 12px;*/ /* メインメニューの文字位置調整 */
	padding: 5px 0 12px;       /* メインメニューの文字位置調整 */
	/*color: #000000;*/            /* メニューの文字色 #ffffff; */
	color: #FFFFFF;            /* メニューの文字色 #ffffff; */
	/*font-size: 15px;*/
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0,0,0,.2);

	-webkit-text-shadow: 1px 1px 0 rgba(0,0,0,.2);

	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* サブメニュー文字の装飾 */
#menu li a{
	display: block;
	margin: 0;
	/* padding: 12px 0 12px;*/ /* メインメニューの文字位置調整 */
	padding: 5px 0 12px;       /* メインメニューの文字位置調整 */
	/*color: #000000;*/            /* メニューの文字色 #ffffff; */
	color: #FFFFFF;            /* メニューの文字色 #ffffff; */
	/*font-size: 15px;*/
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0,0,0,.2);
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	/*font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;*/
	/*font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;*/
	/*font-family: "YuGothic", "游ゴシック体", "Yu Gothic", "游ゴシック";*/
}

/*
li + li {
	border-left:1px solid #F90;
}
*/

#menu li:hover > a{
	/*background: #696969;*/ /* マウスオーバーした際の背景色の指定 */
	background: #0192E5; /* マウスオーバーした際の背景色の指定 #F90 */
	/*color: #ffffff;*/
	color: #FFFFFF;   /* マウスオーバーした際の文字の色指定 #000000 */
	height: 34px;     /* マウスオーバーした際の高さ指定 */
	cursor: pointer;

	-webkit-background: #0192E5;
	-webkit-background: #0192E5;
	-webkit-color: #FFFFFF;
	-webkit-height: 34px;

}

/*
#menu > li:hover > a{
  border-radius: 10px 10px 0px 0px;
}
*/

#menu li ul{
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	/*border-radius: 10px 10px 0px 0px;*/
}

#menu li ul li{
	overflow: hidden;
	width: 100%;
	/*height: 0;*/
	height: 0;
	color: #CCC; /* #fff */
}

#menu li ul li a{
	padding: 8px 15px; /* サブメニューの文字位置 13px 15px */
	/*background: #000000;*/
	/*background: #F90;*/
	/*background: #8CC6FF;*/ /* サブメニューの背景色 #FFBF00 */
	background: #FFFFFF; /* サブメニューの背景色 #FFBF00 */
	text-align: left;
	/*font-size: 15px;*/
	font-size: 90%;
	font-weight: normal;
	color: #000000; /* サブメニューの文字色 */
}

#menu li:hover ul li{
	/*z-index:2;*/
	z-index:1;
	overflow: hidden;
	/* height: 34px; */
	height: 34px;
	/*border-bottom: 1px solid #ffffff;*/ /* サブメニューの下線色 */
	border-bottom: 1px solid #0192E5; /* サブメニューの下線色 #F90 */
	width: 143%; /* サブメニューの表示幅調整 200% */
	cursor: pointer;

	-webkit-z-index:1;
	-webkit-overflow: hidden;
}


/*
#menu li:hover ul li:last-child a{
  border-radius: 0px 0px 20px 20px;
}
*/

/* メインメニューの△表示 */
.triangle{
	position:absolute;
	top: 12px;
	margin-left: .3em;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top: 6px solid #FFF; /* #000 */
}

/* 矢印の違うバージョン */
/*
.triangle{
	position:absolute;
	top: 12px;
	margin-left: .5em;
	width: 6px;
	height: 6px;
	border-top: solid 2px #000;
	border-right: solid 2px #000;
	-webkit-transform: rotate(135deg);
					transform: rotate(135deg);
}
*/

#menu li font{
	vertical-align:top;
}

/* --- 1023px以下の記述(PC用) --- */
@media screen and (max-width:1023px){
	#menu li:hover ul li{
	    width: 250%; /* サブメニューの表示幅調整 200% */
	}
}

/* --- 767px以下の記述(タブレット／スマートフォン用) --- */
@media screen and (max-width:767px){
	#menu{
		min-width: 100%; /* メインメニューの幅 90% */
		font-size: 80%;
		cursor: pointer;
	}

	#menu li{
		width:16.44444%;
		height:100%;
	}

	/* メインメニューの△表示 */
	.triangle{
		position:absolute;
		top: 40px;
		left:4em;
	}
	
	#menu li:hover ul li{
		height: 28px; /* 33px */
		width: 200%; /* サブメニューの表示幅調整 200% */
		/*font-size: 80%;*/
		cursor: pointer;

		-webkit-height: 28px;
		-webkit-width: 200%;
		-webkit-cursor: pointer;
	}
}

/* --- 479px以下の記述(スマートフォン用) --- */
/*@media screen and (max-width:767px){*/
@media screen and (max-width:479px){
	#menu{
		min-width: 100%; /* メインメニューの幅 90% */
		font-size: 60%;
		cursor: pointer;
	}

	#menu li{
		width:16.666666666%;
	}

	/* メインメニューの△表示 */
	.triangle{
		position:absolute;
		top: 40px;
		left:2em;
	}
	
	#menu li:hover ul li{
		height: 28px; /* 33px */
		width: 300%; /* サブメニューの表示幅調整 200% */
		/*font-size: 80%;*/
		cursor: pointer;

		-webkit-height: 28px;
		-webkit-width: 300%;
		-webkit-cursor: pointer;

	}
}