/*
* @package WordPress
* @subpackage HGU by Santai
*/
header .globalMenuSp{
  width:100%;
  position: fixed;
  z-index: 14;
  transition: all 0s;
  bottom:100%;
  height:100%;
  transform: translateY(-100%);
  background-color: transparent;
}
header .globalMenuSp:after{display:none;}
header .globalMenuSp.active {height:0;top:45px;}
@media (min-width: 768px) {
  header .globalMenuSp.active {top:60px;}
}
@media (min-width:992px) {
  header .globalMenuSp.active {top:80px;}
}

/* menu
----------------------------------------------------------------------------------------------------*/

header > nav ul.navbar-nav{ overflow:scroll; margin:0; display:flex; list-style-type:none; padding:0; position: absolute; z-index:2; width:100%; max-height:85vh; flex-wrap:nowrap; position: static;-webkit-overflow-scrolling: touch;}
.dropdown-toggle::after{display:none;}
header div.tog{margin:0px 15px 0px auto;display:block;}
header > nav ul.navbar-nav > li{align-items:stretch !important;}
header > nav ul.navbar-nav > li > a{display:flex !important; align-items:center !important;font-size:0.9rem; padding:.5rem 3em .5rem .5rem !important; cursor:pointer; position: relative;background-color:#ffffff; color:#333333 !important; flex-shrink: 1;}
header > nav ul.navbar-nav > li > a:hover{text-decoration: none!important;}
header > nav ul.navbar-nav > li.dropdown > a:after{
  position: absolute;
  display:flex;align-items:center;
  margin:auto;
  color:#ffffff !important;
  content: '\f067';
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  right:2em;
  border:none;
  top:0;
  bottom:0;
}
header > nav ul.navbar-nav > li.dropdown > a[aria-expanded="true"]:after{content: '\f068';}

header > nav ul.navbar-nav > li.color01 > a{background-color:#e5243b; color:#ffffff !important;}
header > nav ul.navbar-nav > li.color02 > a{background-color:#dda63a; color:#ffffff !important;}
header > nav ul.navbar-nav > li.color03 > a{background-color:#4c9f38; color:#ffffff !important;}
header > nav ul.navbar-nav > li.color04 > a{background-color:#c5192d; color:#ffffff !important;}
header > nav ul.navbar-nav > li.color05 > a{background-color:#ff3a21; color:#ffffff !important;}
header > nav ul.navbar-nav > li.color06 > a{background-color:#26bde2; color:#ffffff !important;}
header > nav ul.navbar-nav > li.color07 > a{background-color:#fcc30b; color:#ffffff !important;}
header > nav ul.navbar-nav > li.color08 > a{background-color:#a21942; color:#ffffff !important;}
header > nav ul.navbar-nav > li.color01 > a:hover{background-color:#b01527;}
header > nav ul.navbar-nav > li.color02 > a:hover{background-color:#b4821f;}
header > nav ul.navbar-nav > li.color03 > a:hover{background-color:#346d26;}
header > nav ul.navbar-nav > li.color04 > a:hover{background-color:#981323;}
header > nav ul.navbar-nav > li.color05 > a:hover{background-color:#dc1900;}
header > nav ul.navbar-nav > li.color06 > a:hover{background-color:#15839e;}
header > nav ul.navbar-nav > li.color07 > a:hover{background-color:#c19402;}
header > nav ul.navbar-nav > li.color08 > a:hover{background-color:#67102a;}

header > nav ul.navbar-nav > li.color01 div.dropdown-menu{background-color:#e5243b;}
header > nav ul.navbar-nav > li.color02 div.dropdown-menu{background-color:#dda63a;}
header > nav ul.navbar-nav > li.color03 div.dropdown-menu{background-color:#4c9f38;}
header > nav ul.navbar-nav > li.color04 div.dropdown-menu{background-color:#c5192d;}
header > nav ul.navbar-nav > li.color05 div.dropdown-menu{background-color:#ff3a21;}
header > nav ul.navbar-nav > li.color06 div.dropdown-menu{background-color:#26bde2;}
header > nav ul.navbar-nav > li.color07 div.dropdown-menu{background-color:#fcc30b;}
header > nav ul.navbar-nav > li.color08 div.dropdown-menu{background-color:#a21942;}

header > nav ul.navbar-nav > li.dropdown .dropdown-menu a{color:#ffffff !important;}
header > nav ul.navbar-nav > li.color01 .dropdown-menu a:hover,
header > nav ul.navbar-nav > li.color01 .dropdown-menu a:active,
header > nav ul.navbar-nav > li.color01 .dropdown-menu a:focus{color:#ffffff;}
header > nav ul.navbar-nav > li.color01 .dropdown-menu a:hover{background-color:#b01527 !important;}
header > nav ul.navbar-nav > li.color02 .dropdown-menu a:hover{background-color:#b4821f !important;}
header > nav ul.navbar-nav > li.color03 .dropdown-menu a:hover{background-color:#346d26 !important;}
header > nav ul.navbar-nav > li.color04 .dropdown-menu a:hover{background-color:#981323 !important;}
header > nav ul.navbar-nav > li.color05 .dropdown-menu a:hover{background-color:#dc1900 !important;}
header > nav ul.navbar-nav > li.color06 .dropdown-menu a:hover{background-color:#15839e !important;}
header > nav ul.navbar-nav > li.color07 .dropdown-menu a:hover{background-color:#c19402 !important;}
header > nav ul.navbar-nav > li.color08 .dropdown-menu a:hover{background-color:#67102a !important;}

header > nav ul.navbar-nav > li.dropdown{position:static;}

@media screen and (max-width:1599px) {
  header > nav ul.navbar-nav > li > a{display:flex !important; align-items:center !important;font-size:0.7rem; padding:.5rem .2rem .5rem .2rem !important; width:120px!important;}
  header > nav ul.navbar-nav > li.dropdown .dropdown-menu{font-size:0.7rem;}
}
@media screen and (max-width:1280px) {
  header > nav ul.navbar-nav > li > a{display:flex !important; align-items:center !important;font-size:0.6rem; padding:.5rem .2rem .5rem .2rem !important; width:100px!important;}
  header > nav ul.navbar-nav > li.dropdown .dropdown-menu{font-size:0.6rem;}
}
@media (max-width:1200px) {
  header > nav ul.navbar-nav > li > a{display:flex !important; align-items:center !important;font-size:1rem; padding:1rem .2rem!important; width:100%!important;}
  .dropdown-item{padding: .5rem 1.5rem;}
  header > nav ul.navbar-nav > li.dropdown .dropdown-menu{font-size:1rem;}
}
@media (min-width: $screen-sm-min) {
  header > nav ul.navbar-nav > li.dropdown:hover .dropdown-menu { display: block !important;}
}
header > nav ul.navbar-nav > li.dropdown .dropdown-menu{width:100%; right:0; border-radius:0; margin:0; text-align:left; top:calc(100% - 2px); color:#ffffff;}
header > nav ul.navbar-nav > li.dropdown .dropdown-menu > a{display:block; width:auto;}



@media (min-width:1200px) {
  header div.tog{display:none;}
  header > nav div.globalMenuSp{display:flex; justify-content: center !important; align-items:stretch !important; width:100% !; height:auto; background-color:#3bb38c; position: relative; padding:0 0 0 280px;transform:none;top:0px; z-index: 1;}
  header > nav div.globalMenuSp:after{
    content:'';
    display:block;
    position:absolute;
    background-color:#1a5478;
    width:50%;
    right:0;
    top:0;z-index:1;
    bottom:0px;
  }

  header  nav ul.navbar-nav{display:flex; position: relative; z-index:2 !important;overflow:visible; width:auto; position: static;}
  header > nav ul.navbar-nav > li.nav-item{display:flex; justify-content:center !important; flex-wrap:wrap;}
  header > nav ul.navbar-nav > li > a{padding:1.7rem .5rem !important; width:150px; transform:skewX(-25deg); display:flex; justify-content:center;}
  header > nav ul.navbar-nav > li > a > span{ transform:skewX(25deg);}
  header > nav ul.navbar-nav > li.dropdown .dropdown-menu{text-align:center; padding:25px 0 10px; /*font-size: 0.9em;*/}
  header > nav ul.navbar-nav > li.dropdown .dropdown-menu > a{display:inline-block; position: relative; padding-left:1.7em;}

  header > nav ul.navbar-nav > li.dropdown .dropdown-menu > a::after {
    content:'';
    display:block;
    position:absolute;
    top:.87em;
    left:.7em;
    height:0;
    width:0;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid #ffffff;
  }
  header > nav ul.navbar-nav > li.color01 .dropdown-menu > a:hover::after{border-left-color:#e5243b;}
  header > nav ul.navbar-nav > li.color02 .dropdown-menu > a:hover::after{border-left-color:#dda63a;}
  header > nav ul.navbar-nav > li.color03 .dropdown-menu > a:hover::after{border-left-color:#4c9f38;}
  header > nav ul.navbar-nav > li.color04 .dropdown-menu > a:hover::after{border-left-color:#c5192d;}
  header > nav ul.navbar-nav > li.color05 .dropdown-menu > a:hover::after{border-left-color:#ff3a21;}
  header > nav ul.navbar-nav > li.color06 .dropdown-menu > a:hover::after{border-left-color:#26bde2;}
  header > nav ul.navbar-nav > li.color07 .dropdown-menu > a:hover::after{border-left-color:#fcc30b;}
  header > nav ul.navbar-nav > li.color08 .dropdown-menu > a:hover::after{border-left-color:#a21942;}
  header > nav ul.navbar-nav > li.dropdown > a:after{display:none;}
}

.navToggle {
  display: flex; justify-content: flex-end;
  position: relative;
  right:0px;
  top: 0px;
  width: 50px;
  height: 55px;
  cursor: pointer;
  z-index: 15;  background-color:transparent;
  text-align: center;
  padding:15px 6px;
}

.navToggle span {
  display: block;
  position: absolute;
  width:calc(100% - 12px);
  border-bottom: solid 2px #eee;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;

}

.navToggle span:nth-child(1) {
  top: 9px;
}

.navToggle span:nth-child(2) {
  top: 19px; width:calc(90% - 12px);
}

.navToggle span:nth-child(3) {
  top: 29px; width:calc(80% - 12px);
}

.navToggle span:nth-child(4) {
  border: none;
  color: #eee;
  font-size: 10px;
  font-weight: bold;
  top: 34px;
}

.navToggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
  top: 18px;
  width: calc(100% - 12px);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.globalMenuSp form .form-control{width:calc(100% - 65px) ; border-radius: 0;}

@media (max-width: 780px) {
  .navToggle {
    width: 38px;
    height: 42px;
  }
  .navToggle span {
    font-size:60% !important;
    line-height:0.8em;
    display: block;
    position: absolute;
    width:calc(100% - 12px);
    border-bottom: solid 2px #eee;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    transition: .25s ease-in-out;

  }
  .navToggle span:nth-child(1) {
    top: 6px;
  }

  .navToggle span:nth-child(2) {
    top: 14px; width:calc(90% - 12px);
  }

  .navToggle span:nth-child(3) {
    top: 22px; width:calc(80% - 12px);
  }

  .navToggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 7px !important;
    font-weight: normal;
    top: 30px;
  }
  .navToggle.active span:nth-child(1) {
    top: 14px;
    left: 4px;
    width: calc(100% - 10px);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .navToggle.active span:nth-child(2),
  .navToggle.active span:nth-child(3) {
    top: 14px;
    width: calc(100% - 10px);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .dropdown-toggle::after{display:none;}
}