@charset "utf-8";

/* # =================================================================
   # 
   # ================================================================= */
/* =================================================================== */




/* # =================================================================
   # Navigation drop-down Design
   # ================================================================= */
/* Navi general setup*/
nav {
	background: #333;		/*BKカラー指定　初期値　#333 */
	color: #fff;			/*テキスト配色　初期値　#fff */
	text-align: center;
}
/* Navilist setup 1st layer */
nav ul {
	list-style: none;
	display: flex;
	justify-content: center;
}
/* Navilist setup 2nd layer */
nav ul ul {
	display: block;
}

nav ul li{
	position: relative;
}

/* Navigation link setup */
nav ul li a {
	display: block;
	text-decoration: none;
	color: #999;		/* Link text color 初期値：#999 */ 
	padding: 20px 35px;
	transition:all .3s;
}

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

nav ul li a:hover{
	color: #fff;	/* hover 1st layer text color 初期値：#fff */ 
}

/* Mark setup*/
/* Mark Go to 2nd layer items */
nav ul li.has-child::before {
	content:'';
	position: absolute;
	left: 15px;
	top: 25px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #999;
    border-right: 2px solid #999;
    transform: rotate(135deg);
}

/* Mark Go to 3rd layer items3 */
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);
}

/* 2nd & 3rd layer menu common Design */
/* ul design */
nav li.has-child ul {
	position: absolute;
	left: 0;
	top: 62px;
	z-index: 4;
	background: #28BFE7;
	width: 180px;
	visibility: hidden;
	opacity: 0;
	transition: all .3s;
}

/* hover Design */
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/* a tag design */
nav li.has-child ul li a {
	color: #000;	/* 2nd & 3rd menu text color 初期値　#fff */
	border-bottom: solid 1px rgba(255,255,255,0.6);
}

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

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
	background-color: darkcyan;		/* hover　2nd layer背景　初期値　#3577CA　*/
}


/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul {
	top: 0;
	left: 182px;
	background: #66ADF5;	/*　3rd layer bk color 初期値：#66ADF5 */
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
	background-color: darkgreen;	/* 初期値：#448ED3　*/
}


/* small size( under 768px) Design */
@media screen and (max-width:768px) {
	nav {
		padding: 0;
	}
	
	nav ul{
		display: block;
	}
	
	nav li.has-child ul,
	nav li.has-child ul ul{
  	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	visibility: visible;
	opacity: 1;
	display: none;
	transition: none;
}
	
	nav ul li a{
	border-bottom: 1px solid #ccc;
	}

  /* Mark position and direction */
	nav ul li.has-child::before {
	left: 20px;	
	}
	
	nav ul ul li.has-child::before {
    transform: rotate(135deg);
	left: 20px;
	}
	
	nav ul li.has-child.active::before {
    transform: rotate(-45deg);
	}
}
/* =================================================================== */