@charset "UTF-8";

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

/*下の階層を持っているulの指定*/
.headB li.menu-item-has-children ul{
  /*絶対配置で位置を指定*/
position: absolute;
left: 0;
top: 51px;
z-index: 4;
  /*形状を指定*/
width:180px;
  /*はじめは非表示*/
visibility: hidden;
opacity: 0;
  /*アニメーション設定*/
transition: all .3s;
}

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


.headB li.menu-item-has-children ul li:last-child a{
border-bottom:none;
}



/*==3階層目*/

/*3階層目の位置*/
.headB li.menu-item-has-children ul ul{
top:0;
left:182px;
}



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

@media (max-width:767px){
  .headB{
  padding: 0;
}

.headB ul{
  display: block;
}

.headB li.menu-item-has-children ul,
.headB li.menu-item-has-children ul ul{
  position: relative;
left:0;
top:0;
width:100%;
visibility:visible;/*JSで制御するため一旦表示*/
opacity:1;/*JSで制御するため一旦表示*/
display: none;/*JSのslidetoggleで表示させるため非表示に*/
transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}


#site-navigation{
  /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
  position:fixed;
z-index: -1;
opacity: 0;/*はじめは透過0*/
  /*ナビの位置と形状*/
top:0;
width:100%;
background:rgba(255,255,255,0.3);/*背景を少し透過させる*/
  /*動き*/
transition: all 0.3s;
pointer-events: none;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#site-navigation.panelactive{
opacity: 1;
z-index:999;
}

/*ナビゲーションの縦スクロール*/
#site-navigation.panelactive{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

/*ナビゲーション*/
#site-navigation ul {
  display: none;/*はじめは非表示*/
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top:0;
  left:0;
}
#site-navigation.panelactive>ul{
  /*ナビの数が増えた場合縦スクロール*/
  display: block;
  overflow-y: auto;
  margin-top: 15vh;
}

/*リストのレイアウト設定*/

#site-navigation li{
  list-style: none;
  text-align: center;
  width: 100vw;
  display: block;
}

#site-navigation li a{
text-decoration: none;
font-size: 1rem;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}
#site-navigation li.menu-item-has-children > ul{
  display: none;
  position: static;
  transform: translate(0);
}

.headB .menu-item-has-children > a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  margin-left: 5px;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  }
.headB .menu-item-has-children.active > a::after {
    content: "\f106";
    }
.headB .sub-menu li{
  background-color: #264e23;
}

}