@charset "utf-8";



nav li img{ width:100%; max-width:90px; margin:-36px 15px 0 0;  display:inline-block; vertical-align:middle;   /*中央揃え*/}

nav{
	position:relative;
	z-index:999;
}


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

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

nav ul{
  list-style: none;
  text-align: center;
  

   display: flex;
  justify-content:flex-start; /**** 頭揃えで横一列****/
  flex-wrap: nowrap;/**** 横一列 ****/


background:;
  background-color:rgba(255,255,255,1);/*白色指定*/

padding-top:39px;/******* 全体の上部余白ここで調整 ********/

}


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

font-size:14px;/******* わたしが追加 目次文字サイズ ********/
  
  
}

/*ナビゲーションのリンク設定*/
nav ul li a{
  display: block;
  text-decoration: none;
  color: #000;
  padding:13px 30px 15px 15px ;/*ここで目次文字の位置調整、aboutとcontactと高さが合わないので*/
  transition:all .3s;
  
   font-family:"Oswald" , sans-serif;/******* わたしが追加 *******/
   letter-spacing:0.05em;
  }

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

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
  content:'';
  position: absolute;
  right:18px;/*当初30px*/
  top:20px;/*当初20px*/
  width:6px;
  height:6px;
  border-top: 2px solid #6e6193;
    border-right:2px solid #6e6193;
    transform: rotate(45deg);
}

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




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

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  top:15px;
  z-index:4;
    /*形状を指定*/
  backgrou:#28BFE7;
  background-color:rgba(110,97,147,1);/*紫色指定*/
  width:620px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
 
  /***************** わたしが設定 *************/
  display:flex;
  
  justify-content:space-between;
  
   flex-wrap:wrap;/**** 横一列 ****/
  
  font-family:"Oswald" , sans-serif;
  
  letter-spacing:0.05em;
   padding-top:0px;
   margin-top:30px;  
   
  }
	 
	 


/*ナビゲーションタグの形状*/
nav li.has-child ul li {
	width:33.3%;
	 border-right:1px solid #fff;
}

/*hoverしたら表示*/
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タグの形状*/
nav li.has-child ul li a{
  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:#3577CA;
}

/*==3階層目*/

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

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
  background:#448ED3;
}

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

@media screen and (max-width:4768px){
	
	nav li img{ width:100%; max-width:80px; margin:0 auto;  display:block;}
	
	
  nav{
    background:#333;
    color: #ccc;
}



 nav ul{
    display:block;/******** わたしが追加********/
	background-color:rgba(12,22,55,1);/*紺色指定*/
	
	padding-top:0px;/******* 全体の上部余白ここで調整 ********/
	
	
}



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

font-size:1em;/******* わたしが追加 目次文字サイズ ********/
  
  
}

  
  nav li.has-child ul,
  nav li.has-child ul ul{
    position: relative;
  left:0;
  top:0;
  width:100%;
  visibility:visible;/*JSで制御するため一旦表示*/
  opacity:1;/*JSで制御するため一旦表示*/
  display: none;/*JSのslidetoggleで表示させるため非表示に*/
  transition:none;/*JSで制御するためCSSのアニメーションを切る*/
  
  
    padding-top:0px;
   margin-top:0px; 
   
   background:#28BFE7;

  
  
  
}



/*ナビゲーションタグの形状*/
nav li.has-child ul li {
	width:100%;
	 border-right:1px solid #fff;
}


nav ul li a{
  border-bottom:1px solid #ccc;
  color: #fff;
}

/*矢印の向き*/
nav ul li.has-child::before,
nav ul ul li.has-child::before{
    transform: rotate(135deg);
  left:20px;
  
  
   border-top: 2px solid #fff;/*わたしが追加*/
    border-right:2px solid #fff;
}
    
nav ul li.has-child.active::before{
    transform: rotate(-45deg);
}
  
}