/* CSS Document */

/*ナビゲーション全体の設定*/


.fs-p-headerNavBar nav {
	background: #1C3362;
	color: #fff;
	text-align: center;
}

/*ナビゲーションを横並びに*/
.fs-p-headerNavBar nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
	padding:0;
	margin:0;
}

/*2階層以降は横並びにしない*/
.fs-p-headerNavBar nav ul ul {
	display: block;
}


/*下の階層のulや矢印の起点にするためliにrelativeを指定*/
.fs-p-headerNavBar nav ul li{
	position: relative;
	padding: 0.5em;
}

/*ナビゲーションのリンク設定*/
.fs-p-headerNavBar nav ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 10px 1.5rem;/*20->10*/
	transition: .3s;
}

.fs-p-headerNavBar nav ul li li a {
	padding: 10px 1.5rem;/*35*/
}
.fs-p-headerNavBar nav ul li a:hover{
	color: #686868;
}


.fs-p-headerNavBar nav ul li li a:hover{
	color: #686868;
	background: #D8E1FF;
}

/*矢印の設定　*/

/*２階層めを持つliの矢印の設定*/
/*.fs-p-headerNavBar nav ul li.has-child::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 25px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #999;
	border-right: 2ps solid #999;
	transform: rotate(135dg);
}*/

/*3階層めを持つli矢印の設定*/

.fs-p-headerNavBar nav ul ul 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);
}



/*2・３階層めの共通設定*/

/*下の階層を持っているulの指定*/

.fs-p-headerNavBar nav li.has-child ul {
	/*絶対配置で位置を指定*/
	position: absolute;
	left: 0;
	top: 50px;/*62->50*/
	z-index: 4;
	/*形状を指定*/
	background: #efefef;;
	width: 180px;
	/*初めは非表示*/
	visibility: hidden;
	opacity: 0;
	/*アニメーション設定*/
	transition: all .3s;
}

/*hoverしたら表示*/
.fs-p-headerNavBar nav li.has-child:hover > ul,
.fs-p-headerNavBar nav li.has-child hl li:hover > ul,
.fs-p-headerNavBar nav li.has-child:active > ul,
.fs-p-headerNavBar nav li.has-child ul li:active > ul {
	visibility: visible;
	opacity: 1;
}

/*ナビゲーションタグの形状*/
.fs-p-headerNavBar nav li.has-child ul li a {
	color: #545252;
	border-bottom:solid 1px rgba(255,255,255,0.6);
	
}

.fs-p-headerNavBar nav li.has-child ul li a:hover,
.fs-p-headerNavBar nav li.has-child ul li a:active {
	background: #3577ca;
}

/*3階層目*/

/*3階層目の位置*/
.fs-p-headerNavBar nav li.has-child ul ul {
	top: 0;
	left: 182px;
	background: #66adf5;
}

.fs-p-headerNavBar nav li.has-child ul ul li a:hover,
.fs-p-headerNavBar nav li.has-child ul ul li a:active {
	background: #448ed3;
}

/*768px以下の形状*/
@media screen and (max-width:768px) {
	
	.fs-p-headerNavBar nav {
		padding: 0;
	}
	.fs-p-headerNavBar nav ul {
		display: block;
	}
	
	.fs-p-headerNavBar nav li.has-child ul,
	.fs-p-headerNavBar nav li.has-child ul ul {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		/*javascriptで制御するため一旦表示*/
		visibility: visible;
		opacity: 1;
		/*javascriptのslidetoggleで表示されるために非表示に*/
		display: none;
		/*havascriptで制御するためCSSアニメーションを切る*/
		transition: none;
			
	}
	.fs-p-headerNavBar nav li li a {
		border-bottom: 1px solid #ccc;
	}
	/*矢印の位置と向き*/
	.fs-p-headerNavBar nav ul li.has-child::before {
		left: 20px;
	}
	.fs-p-headerNavBar nav ul li.has-child::before {
		transform: rotate(135deg);
		left: 20px;
	}
	.fs-p-headerNavBar nav ul li.has-child.active::before{
		transform: rotate(-45deg;)
	}
	
}