@charset "UTF-8";

/*-------------------------------------------------------------
 ------------------- グローバルナビゲーション -------------------
-------------------------------------------------------------*/
/*--------------------- li要素のドットを無効 ---------------------*/
#gn_menu ul li,
.dropdown_menu li,
#gn_xs_menu li{
  list-style:none;
}

/*--------------------- PC版メニュー ---------------------*/
#gn_menu{
  width:100%;
  margin: 0;padding:0;
  z-index:1000;
}
#gn_menu > ul{
  display:flex;
  justify-content: space-between;
  margin: 0;padding:0;
}
#gn_menu > ul > li{
  padding:0 10px;
  text-align:center;
  display: flex;
  flex-flow: wrap;
  align-items: center;
}

/*--------------------- スマホメニュー開閉アイコン(その他アイコンとして表示する場合はPCで表示) ---------------------*/
#gn_menu > ul > li#gn_icon{
  display:none;
}
#gn_icon{
  max-width:40px;
  min-height:60px;
}
#gn_icon img{
  margin-bottom:2px;
}

/*--------------------- ドロップダウンメニュー ---------------------*/
/*--- ドロップダウンメニューの親要素 ---*/
.dropdown_parent{
  height:45px;
  position:relative;
  background:url("../img/gn/dropdown_icon.png")no-repeat center left;
}

/*--- ドロップダウンメニュー ---*/
.dropdown_menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,0);
  background:#fff;
  overflow: hidden;
}

.dropdown_menu li{
  border-bottom:1px solid #ddd;
}

/*--------------------- スマホ兼その他メニュー ---------------------*/
/*--- 限られたメニュー以外は非表示 ---*/
#gn_xs_menu li{
  display:none;
}
#gn_xs_menu li a{
  width:100%;
  height:100%;
}

#gn_menu > ul > li.gn_xs{
  display:none;
}
#gn_xs_menu li.gn_xs{
  display:block;
}

#gn_xs_menu li{
  padding: 0;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
}
#gn_xs_menu li a{
  padding: 10px 20px;
  display: block;
}
/*--------------------- スマホ兼その他メニュー ---------------------*/
/*--- ドロップダウンの扱い ---*/
#gn_xs_menu .dropdown_parent{
  height:auto;
}
#gn_xs_menu li .dropdown_menu{
  margin-left: 0;
  position: static;
  white-space: nowrap;
  transform: none;
}
#gn_xs_menu li .dropdown_menu li{
  background:#696969;
}
#gn_xs_menu li .dropdown_menu li a{
  color:#fff;
}

/*--- PC ---*/
@media screen and (min-width: 64em){
  #gn_xs_menu{
    display: block;
    position: fixed;
    top: 60px;
    right: 0;
    background: #fff;
  }
}

  /*--- PCメニュー項目を一部非表示、スマホメニュー項目を一部表示 ---*/
  /*--- この部分を増やすと画面幅で調整可能 ---*/
  #gn_menu > ul > li.gn_medium{
    display:none;
  }
  #gn_xs_menu li.gn_medium{
    display:block;
  }

@media screen and (min-width: 40em) and (max-width: 64em) {
  #gn_menu > ul > li#gn_icon{
    padding-top:20px;
  }
}

/*--- スマホ ---*/
@media screen and (max-width: 63.99875em) {
  #gn_menu{
    z-index: 10000;
  }
  #gn_menu > ul > li{
    display:none;
  }
  #gn_menu > ul > li#gn_icon{
    display:block;
  }
  /*--- スマホメニューは右寄り ---*/
  #gn_xs_menu{
    height: 100vh;
    position: fixed;
    top: 0;
    right: -100%;
    border-left:1px solid #ddd;
    background:#fff;
    z-index:1000;
    padding-top:20px;
    overflow-y:scroll;
  }
  #gn_xs_menu li{
    display: block;
  }
  #gn_xs_menu li#gn_icon{
    display: none;
  }
}
/*--- sumaho(min-width: 39.99875em) ---*/