@charset "utf-8";

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

#g-nav{
  max-width:1320px;
  margin:auto;
  z-index:10;
}

/* navがある場合・ul直下の場合どちらも対応 */
#g-nav nav,
#g-nav{
  width:100%;
  text-align:center;
}

#g-nav nav > ul,
#g-nav > ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-around;
}

#g-nav nav > ul > li,
#g-nav > ul > li{
  position:relative;
  flex:1;
  height:100%;
}

/* 親メニュー */
#g-nav nav > ul > li > a,
#g-nav > ul > li > a{
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#222;
  margin:0;
  padding:0 10px;
  line-height:1.5;
  height:60px;
  transition:all .3s;
  font-family:"Noto Serif JP",serif !important;
}

#g-nav nav > ul > li > a::after,
#g-nav > ul > li > a::after{
  content:"";
  position:absolute;
  top:15px;
  right:0;
  height:30px;
  width:1px;
  background:#222;
}

#g-nav nav > ul > li:last-child > a::after,
#g-nav > ul > li:last-child > a::after{
  display:none;
}

/* 下層メニュー */
#g-nav li.has-child > ul{
  position:absolute;
  top:60px;
  left:0;
  z-index:99;
  background-color:rgba(255,255,255,0.82);
  min-width:220px;
  width:max-content;
  max-width:520px;
  margin:0;
  padding:0;
  list-style:none;
  visibility:hidden;
  opacity:0;
  transition:all .3s;
  display:block;
}

#g-nav li.has-child > ul li.has-child > ul{
  position:absolute;
  top:0;
  left:100%;
  z-index:99;
  background-color:rgba(255,255,255,0.82);
  min-width:220px;
  width:max-content;
  max-width:520px;
  margin:0;
  padding:0;
  list-style:none;
  visibility:hidden;
  opacity:0;
  transition:all .3s;
  display:block;
}

#g-nav li.has-child:hover > ul,
#g-nav li.has-child:active > ul{
  visibility:visible;
  opacity:1;
}

#g-nav li.has-child > ul li.has-child:hover > ul,
#g-nav li.has-child > ul li.has-child:active > ul{
  visibility:visible;
  opacity:1;
}

#g-nav li.has-child ul li{
  width:auto;
  height:auto;
  position:relative;
}

#g-nav li.has-child ul li a{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#222;
  text-decoration:none;
  padding:15px 22px;
  min-height:52px;
  height:auto;
  line-height:1.6;
  border-bottom:1px solid rgba(34,34,34,0.2);
  white-space:nowrap;
  font-family:"Noto Serif JP",serif !important;
}

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

#g-nav li.has-child ul li a::after{
  display:none;
}

/* 矢印 */
#g-nav > ul > li.has-child::before,
#g-nav nav > ul > li.has-child::before{
  content:"";
  position:absolute;
  left:18px;
  top:25px;
  width:9px;
  height:9px;
  border-top:1px solid #222;
  border-right:1px solid #222;
  transform:rotate(135deg);
  z-index:2;
}

#g-nav > ul > li.has-child > ul > li.has-child::before,
#g-nav nav > ul > li.has-child > ul > li.has-child::before{
  content:"";
  position:absolute;
  left:calc(100% - 30px);
  top:25px;
  width:9px;
  height:9px;
  border-top:1px solid #222;
  border-right:1px solid #222;
  transform:rotate(45deg);
  z-index:2;
}

@media screen and (min-width:1201px){
  #g-nav .click-none{
    pointer-events:none;
  }
}

/* タブレット・スマホ */
@media screen and (max-width:1200px){

  #g-nav{
    position:absolute;
    top:0;
    right:-120%;
    padding:80px 20px 120px;
    height:100vh;
    transition:all .6s;
    background-color:rgba(255,255,255,0.85);
    width:250px;
    z-index:999 !important;
    overflow-y:auto;
  }

  #g-nav.panelactive{
    right:0;
  }

  #g-nav nav > ul,
  #g-nav > ul{
    display:block;
    border-top:1px solid rgba(34,34,34,0);
  }

  #g-nav nav > ul > li,
  #g-nav > ul > li{
    width:100%;
  }

  #g-nav nav > ul > li > a,
  #g-nav > ul > li > a{
    height:auto;
    min-height:56px;
    border-bottom:1px solid rgba(34,34,34,0.4);
  }

  #g-nav nav > ul > li > a::after,
  #g-nav > ul > li > a::after{
    display:none;
  }

  #g-nav li.has-child > ul{
    position:relative;
    top:0;
    left:0;
    width:100%;
    max-width:none;
    min-width:0;
    visibility:visible;
    opacity:1;
    display:none;
    transition:none;
  }

	#g-nav li.has-child > ul li.has-child > ul{
    position:relative;
	  top:0;
	  left:0;
    width:100%;
    max-width:none;
    min-width:0;
    visibility:visible;
    opacity:1;
    display:none;
    transition:none;
  border-bottom:1px solid rgba(34,34,34,0.3);
	}

  #g-nav li.has-child ul li a{
    white-space:normal;
  }
	
#g-nav > ul > li.has-child > ul > li.has-child::before,
#g-nav nav > ul > li.has-child > ul > li.has-child::before{
  content:"";
  position:absolute;
  left:18px;
  top:25px;
  width:9px;
  height:9px;
  border-top:1px solid #222;
  border-right:1px solid #222;
  transform:rotate(135deg);
  z-index:2;
}
}

@media screen and (max-width:575px){
  #g-nav{
    padding:60px 20px 120px;
  }
}

/* ヘッダーナビ周辺 */
.h_navw{
  display:flex;
  align-items:center;
  justify-content:space-around;
  margin:6px auto 0;
  width:100%;
}

@media screen and (max-width:1200px){
  .h_navw{
    flex-direction:column;
    align-items:center;
    padding:0;
  }
}