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

/*==ナビゲーション全体の設定*/
.header__entry{
	background:#252525;
	color:#fff;
	text-align: center;
}
/*ナビゲーションを横並びに*/
.header__entry ul{
	list-style: none;
	display: flex;
	justify-content: center;
}
/*2階層目以降は横並びにしない*/
.header__entry ul ul{
	display: block;
}

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

/*ナビゲーションのリンク設定*/
.header__entry ul li a{
	display: block;
	text-decoration: none;
	color: #fff;
        font-weight: bold;

	/*transition:all .3s;*/
    padding: 43px 25px;
}

.header__entry ul li li a{
	padding:15px 35px;
}


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

/*下の階層を持っているulの指定*/
.header__entry li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	right:0;
	top:100px;
	z-index: 4;
    /*形状を指定*/
	width:180px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}
.header__entryMynavi a{
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    display: inline-block;
    position: relative;
    background: #2f855a;
    border: solid 3px #2f855a;
    transition: .3s;
    >span{
      display: inline-block;
      position: absolute;
      width: 100%;
      text-align: center;
      top:50%;
      transform: translateY(-50%);
    }
    &:hover{
      color: #2f855a;
      background: #fff;
      opacity: 1;
    }
  }

.header__entryRikunabi a{
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    display: inline-block;
    position: relative;
    background:#f4a261;
    border: solid 3px #f4a261;
    transition: .3s;
    >span{
      display: inline-block;
      position: absolute;
      width: 100%;
      text-align: center;
      top:50%;
      transform: translateY(-50%);
    }
    &:hover{
      color: #f4a261;
      background: #fff;
      opacity: 1;
    }
}

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

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

.header__entry li.has-child ul li:last-child > a{
 /*border-bottom:none;*/
 }
/*
.header__entryMynavi a:hover,
.header__entryMynavi a:active{
	background:#fff;
    opacity: 1;
    color: #2f855a;
    border: #2f855a 3px solid;


}

.header__entryRikunabi a:hover,
.header__entryRikunabi a:active{
    background:#fff;
    opacity: 1;
    color: #f4a261;
    border: #f4a261 3px solid;

}
*/

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

@media screen and (max-width:780px){
	.header__entry{
		padding: 0;
	}
	
	.header__entry ul{
		display: block;
	}
	
	.header__entry li.has-child ul,
	.header__entry 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のアニメーションを切る*/
}
	
.header__entry ul li a{
  padding: 23px 25px;
  }
  .header__entry ul li li a{
	padding:10px 0px;
}
.header__entryMynavi a{
  font-size: 10px;
}
.header__entryRikunabi a{
  font-size: 10px;
}
}

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

.header__entry ul li.has-child::before{
	left:20px;	
}

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