@charset "utf-8";
/* CSS Document */

/*=====　引用先『動くWebデザインアイデア帳』
　【グローバルナビゲーション　-ドロップダウンメニュー（上）-】
https://coco-factory.jp/ugokuweb/move01/5-1-1/　=====*/


/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav{
	background:#333;
	color:#fff;
	text-align: center;
}
/*ナビゲーションを横並びに*/
nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
}

/*2階層目は横並びにしない*/
nav ul ul{
	display: block;
}

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

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

nav ul li li a{
	padding:10px 10px;
}

nav ul li a:hover{
	color:#fff;	
}

/*==矢印の設定*/

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



/*== 2階層目の共通設定 */

/*下の階層を持っているulの指定*/
#top-head.fixed #global-nav ul li.has-child ul,
#global-nav ul li.has-child ul,
#top-head.fixed #global-nav2 ul li.has-child ul,
#global-nav2 ul li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:50px;
	z-index: 4;
    /*形状を指定*/
	background:#595757;
	color:#fff;
	text-align: center;
	width:160px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}
#top-head.fixed #global-nav ul li.has-child ul li,
#global-nav ul li.has-child ul li,
#top-head.fixed #global-nav2 ul li.has-child ul li,
#global-nav2 ul li.has-child ul li{
	padding: 0px 0px;
	text-align: center;
	border-bottom: 1px solid #707070;
}

/*hoverしたら表示*/
#top-head.fixed #global-nav ul li.has-child:hover > ul,
#top-head.fixed #global-nav ul li.has-child ul li:hover > ul,
#global-nav ul li.has-child:hover > ul,
#global-nav ul li.has-child ul li:hover > ul,
#top-head.fixed #global-nav ul li.has-child:active > ul,
#top-head.fixed #global-nav ul li.has-child ul li:active > ul,
#global-nav ul li.has-child:active > ul,
#global-nav ul li.has-child ul li:active > ul,
#top-head.fixed #global-nav2 ul li.has-child:hover > ul,
#top-head.fixed #global-nav2 ul li.has-child ul li:hover > ul,
#global-nav2 ul li.has-child:hover > ul,
#global-nav2 ul li.has-child ul li:hover > ul,
#top-head.fixed #global-nav2 ul li.has-child:active > ul,
#top-head.fixed #global-nav2 ul li.has-child ul li:active > ul,
#global-nav2 ul li.has-child:active > ul,
#global-nav2 ul li.has-child ul li:active > ul{
	visibility: visible;
	opacity: 1;
}

/*ナビゲーションaタグの形状*/
#top-head.fixed #global-nav ul li.has-child ul li a,
#global-nav ul li.has-child ul li a,
#top-head.fixed #global-nav2 ul li.has-child ul li a,
#global-nav2 ul li.has-child ul li a{
	color: #fff;
	border-bottom:#707070;
	width:160px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	text-align: center;
	font-size: 60%;
	line-height: 1.1em;
	letter-spacing: 0.1em;
	font-weight: 500;
}


#global-nav ul li.has-child ul li:last-child a,
#global-nav2 ul li.has-child ul li:last-child a{
	border-bottom:none;
}

#global-nav ul li.has-child ul li a:hover,
#global-nav ul li.has-child ul li a:active,
#global-nav2 ul li.has-child ul li a:hover,
#global-nav2 ul li.has-child ul li a:active{
	background:#707070;
}





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

@media screen and (max-width:1260px){
	nav{
		padding: 0;
	}
	
#global-nav ul,
#global-nav2 ul{
  	display: block;
}

#global-nav ul li.has-child ul,
#top-head.fixed #global-nav ul li.has-child ul,
#global-nav2 ul li.has-child ul,
#top-head.fixed #global-nav2 ul li.has-child ul{
  	position: relative;
	left:0;
	top:0px;
	/*形状を指定*/
	width:100%;
	margin:0 auto;
	background:#595757;
	color:#fff;
	text-align: center;
	/*はじめは非表示*/
	/*visibility: hidden;
	opacity: 0;*/
    /*アニメーション設定*/
	/*transition: all .3s;*/
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	/*display: none;/*JSのslidetoggleで表示させるため非表示に*/
	/*transition:none;/*JSで制御するためCSSのアニメーションを切る*/  
}

#global-nav ul li.has-child ul li,
#top-head.fixed #global-nav ul li.has-child ul li,
#global-nav2 ul li.has-child ul li,
#top-head.fixed #global-nav2 ul li.has-child ul li{
	padding: 0px 0px;
	text-align: center;
	color: #fff;
	border-bottom: 1px solid #707070;
}
#top-head #global-nav ul li.has-child ul li a,
#top-head.fixed #global-nav ul li.has-child ul li a,
#top-head #global-nav2 ul li.has-child ul li a,
#top-head.fixed #global-nav2 ul li.has-child ul li a{
	width: 100%;
	display: block;
	color: #fff;
	font-size: 80%;
	line-height: 1.1em;
	letter-spacing: 0.1em;
	font-weight: 400;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}
	
/*hoverしたら表示*/
#top-head.fixed #global-nav ul li.has-child:hover > ul,
#top-head.fixed #global-nav ul li.has-child ul li:hover > ul,
#top-head #global-nav ul li.has-child:hover > ul,
#top-head #global-nav ul li.has-child ul li:hover > ul,
#top-head.fixed #global-nav ul li.has-child:active > ul,
#top-head.fixed #global-nav ul li.has-child ul li:active > ul,
#top-head #global-nav ul li.has-child:active > ul,
#top-head #global-nav ul li.has-child ul li:active > ul,
#top-head.fixed #global-nav2 ul li.has-child:hover > ul,
#top-head.fixed #global-nav2 ul li.has-child ul li:hover > ul,
#top-head #global-nav2 ul li.has-child:hover > ul,
#top-head #global-nav2 ul li.has-child ul li:hover > ul,
#top-head.fixed #global-nav2 ul li.has-child:active > ul,
#top-head.fixed #global-nav2 ul li.has-child ul li:active > ul,
#top-head #global-nav2 ul li.has-child:active > ul,
#top-head #global-nav2 ul li.has-child ul li:active > ul{
	visibility: visible;
	opacity: 1;
}
	

#global-nav ul li.has-child ul li:last-child a,
#global-nav2 ul li.has-child ul li:last-child a{
	border-bottom:none;
}

#global-nav ul li.has-child ul li a:hover,
#global-nav ul li.has-child ul li a:active,
#global-nav2 ul li.has-child ul li a:hover,
#global-nav2 ul li.has-child ul li a:active{
	background:#707070;
}



	
	

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

#global-nav ul li.has-child::before,
#global-nav2 ul li.has-child::before{
	left:50px;
	top:30px;
}

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

}