@charset "utf-8";



/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar {
	width:100%;
/*	overflow: hidden; */
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#fff 30%, #eee);	/*背景グラデーション*/
	border-bottom: 1px solid #cfcfcf;	/*下線の幅、線種、色*/
	border-top: 1px solid #cfcfcf;	/*下線の幅、線種、色*/
	margin-bottom: 40px;	/*下のコンテンツとの間に空けるスペース*/
}
/*メニュー１個あたりの設定*/
#menubar ul.main_menu	{
	max-width: 1200px;
	margin-top: 10px;
	margin: 0 auto;
/*	text-align: center; */
	list-style: none;
	display: flex;
	justify-content: center;
}
/*2階層目以降は横並びにしない*/
#menubar ul.main_menu ul{
	visibility: hidden;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
#menubar ul li{
	position: relative;
}

#menubar ul.main_menu li {
	display: block;
	width: 16.6%;
}

#menubar .main_menu li a {
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	display: block;
	text-align: center;
	padding: 10px 0;	/*上下、左右へのメニュー内の余白*/
	margin: 0px;	/*上下、左右へのメニューの外への余白*/
	border-radius: 5px;	/*角丸のサイズ*/
}
/*マウスオン時と、現在表示中(current)のメニューの設定*/
#menubar .main_menu li a:hover {
	background: #000096;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*3階層目を持つliの矢印の設定*/
#menubar ul.main_menu ul.sub_menu li.has-child::before{
	content:'';
	position: absolute;
	left:6px;
	top:17px;
	width:6px;
	height:6px;
    border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
}

#menubar ul.sub_menu	{
	width: 100%;
	/*width: 180px;*/
	position: absolute;
	margin: 0px 0px -5px 0px;
	background-color: #d5edff;
	z-index:4;
	font-size: 90%;
	border-radius: 5px;	/*角丸のサイズ*/
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}
/*hoverしたら表示*/
#menubar li.has-child:hover > ul,
#menubar ul.sub_menu li:hover > ul,
#menubar li.has-child:active > ul,
#menubar ul.sub_menu li:active > ul{
  visibility: visible;
  opacity: 1;
}

@supports (-ms-accelerator:true){
   #menubar ul.sub_menu {
	  width: 15%;
   }
}
#menubar ul.sub_menu li{
	width: 100%;
	order: 1;
}

/*ナビゲーションaタグの形状*/
#menubar ul.sub_menu li a{
	color: #333;
	border-bottom:solid 1px rgba(255,255,255,0.6);
}

#menubar ul.sub_menu li:last-child a{
	border-bottom:none;
}

#menubar ul.sub_menu li a:hover,
#menubar ul.sub_menu li a:active{
	background:#3577CA;
}
/*
#menubar .sub_menu li a	{
	padding: 5px 0;
	margin: 0px 0px -5px 0px;
	display: block;
	color: #333;
}
*/
/*==3階層目*/

/*3階層目の位置*/
#menubar ul.sub_menu ul{
	top:0;
	left:182px;
	background:#66ADF5;
}

#menubar ul.sub_menu ul li a:hover,
#menubar ul.sub_menu ul li a:active{
	background:#448ED3;
}

/*==900px以下の形状*/

@media screen and (max-width:900px){
	#menubar{
		padding: 0;
	}
	
	#menubar ul.main_menu{
		display: block;
		width:100%;
	}
	#menubar ul.main_menu li{
		width:100%;
	}
	#menubar ul.sub_menu,
	#menubar ul.main_menu ul{
  	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
	
#menubar ul li a{
	border-bottom:1px solid #ccc;
}

/*矢印の位置と向き*/

/*2階層目を持つliの矢印の設定*/
#menubar ul li.has-child::before{
	content:'';
	position: absolute;
	left:20px;
	top:25px;
	width:6px;
	height:6px;
	border-top: 2px solid #999;
    border-right:2px solid #999;
    transform: rotate(135deg);
}

#menubar ul ul li.has-child::before{
    transform: rotate(135deg);
	left:20px;
}
    
#menubar ul li.has-child.active::before{
    transform: rotate(-45deg);
}

}