@charset "utf-8";

/* =========================================
   ナビゲーション
========================================= */

#g-nav{
  width:100%;
  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;
  text-decoration:none;
  color:#333;
  line-height:1.5;
  height:60px;
  transition:all 1s;
  font-size:14px;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:600;
}

#g-nav > ul > li > a{
	flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
	margin: 0 10px 0;
}
#g-nav li.has-child a{
	margin: 0 10px 0 0;
  padding:0 0 0 24px;
}


/* =========================================
   PC用 下層メニュー
========================================= */

#g-nav li.has-child > ul{
  position:absolute;
  top:60px;
  left:0;
  z-index:99;
  background-color:rgba(255,255,255,0.9);
  width:220px;
  margin:0;
  padding:0;
  list-style:none;
  visibility:hidden;
  opacity:0;
  transition:all 0.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.9);
  width:500px;
  margin:0;
  padding:0;
  list-style:none;
  visibility:hidden;
  opacity:0;
  transition:all 0.3s;
  display:block;
}

#g-nav li.has-child > ul li.has-child{
  padding:0;
}


/* PC：ホバーで表示 */

#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 0;
  min-height:52px;
  height:auto;
  line-height:1.6;
  font-size:14px;
  border-bottom:1px solid rgba(34,34,34,0.2);
  white-space:nowrap;
  font-family:"Noto Sans JP", sans-serif;
  width:100%;
}

#g-nav li.has-child > ul li.has-child > ul{
  display:flex;
  flex-wrap:wrap;
  background-color:rgba(244,244,244,0.90);
}

#g-nav li.has-child > ul li.has-child > ul li{
  width:50%;
  border-left:1px solid rgba(34,34,34,0.2);
}

#g-nav li.has-child > ul li.has-child > ul li a{
  display:block;
}

#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:10px;
  top:25px;
  width:8px;
  height:8px;
  border-top:1px solid #999;
  border-right:1px solid #999;
  transform:rotate(135deg);
  z-index:2;
  pointer-events:none;
}

#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:8px;
  height:8px;
  border-top:1px solid #999;
  border-right:1px solid #999;
  transform:rotate(45deg);
  z-index:2;
  pointer-events:none;
}


/* =========================================
   PC
========================================= */

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

}


/* =========================================
   タブレット・スマホ
========================================= */

@media screen and (max-width:1300px){

  /* ハンバーガーメニュー本体 */
  #g-nav{
    position:absolute;
    top:0;
    right:-120%;
    padding:80px 20px 120px;
    height:100vh;
    transition:right .6s ease;
    background-color:rgba(255,255,255,0.9);
    width:500px;
    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%;
    text-align:center;
  }


  /* 親リンク */
  #g-nav nav > ul > li > a,
  #g-nav > ul > li > a{
    height:auto;
    min-height:56px;
    width:100%;
    padding:0;
    border-bottom:1px solid rgba(34,34,34,0.4);
  }

  #g-nav li.has-child{
    padding:0;
  }

  #g-nav li.has-child a{
    width:100%;
    padding:0;
  transition:all 1s;
  }

  #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;
    margin:0;
    padding:0;
    list-style:none;
    display:block;
    visibility:visible;
    opacity:1;
    max-height:0;
    overflow:hidden;
    transition:1s ease;
  }


  /* active：開く */

  #g-nav li.has-child.active > ul{
    max-height:2500px;
    transition:2s ease;
  }


  /* =========================================
     孫メニュー
  ========================================= */

  #g-nav li.has-child > ul li.has-child > ul{
    position:relative;
    top:0;
    left:0;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    visibility:visible;
    opacity:1;
    max-height:0;
    overflow:hidden;
    background-color:rgba(244,244,244,0.90);
    border-bottom:1px solid rgba(34,34,34,0.3);
    transition:1s ease;
  }


  /* 孫メニュー active：開く */

  #g-nav li.has-child > ul li.has-child.active > ul{
    max-height:2500px;
    transition:1.5s ease;
  }


  /* =========================================
     下層リンク
  ========================================= */

  #g-nav li.has-child ul li a{
    white-space:normal;
  }


  /* 孫メニューを2列表示 */

  #g-nav li.has-child > ul li.has-child > ul li{
    width:50%;
    border-left:1px solid rgba(34,34,34,0.2);
  }


  /* =========================================
     SP用 矢印
  ========================================= */

  #g-nav > ul > li.has-child::before,
  #g-nav nav > ul > li.has-child::before{
    left:calc(100% - 20px);
    top:25px;
    width:8px;
    height:8px;
  }

  #g-nav > ul > li.has-child > ul > li.has-child::before,
  #g-nav nav > ul > li.has-child > ul > li.has-child::before{
    left:calc(100% - 20px);
    top:20px;
    width:9px;
    height:9px;
    transform:rotate(135deg);
  }

}


/* =========================================
   スマホ
========================================= */

@media screen and (max-width:575px){

  #g-nav{
    width:100%;
    padding:60px 20px 120px;
  }

}


/* =========================================
   ヘッダーナビ周辺
========================================= */

.h_navw{
  display:flex;
  justify-content:space-around;
  margin:0 20px 0 0;
}

@media screen and (max-width:1300px){

  .h_navw{
    flex-direction:column;
    align-items:center;
    padding:0;
    margin:0;
  }

}


/* =========================================
   科目メニュー
========================================= */

ul.sub-menu {
	width: 600px!important;
   	border-left: solid 1px #D9D9D9;
	border-right: solid 1px #D9D9D9;
	border-bottom: solid 1px #D9D9D9;
  }
ul.sub-menu li{
	float: left;
	width: calc(100% / 3)!important;
	border-right: solid 1px #D9D9D9;
}
ul.sub-menu li:nth-child(3n){
	border-right: none;
}

@media screen and (max-width:1300px){
ul.sub-menu {
	width: 100%!important;
  }
ul.sub-menu li{
	float: left;
	width: calc(100% / 2)!important;
	border-right: solid 1px #D9D9D9;
}
ul.sub-menu li:nth-child(2n){
	border-right: none;
}
ul.sub-menu li:nth-child(6n - 3){
	border-right: solid 1px #D9D9D9;
}
	
}