nav.globalMenuSp {
  position: fixed;
  z-index: 16;
  top:67px;
  right:0px;
  color: #333333;
  transform: translateX(100%);
  transition: all 0.3s;
  width: 100%;
}

nav.globalMenuSp.active {
  top:67px;
  transition: all 0.6s;
}

nav.globalMenuSp > div{
  overflow:scroll;
  max-height:85vh;
  background-color: rgba(255,255,255,.8);
  display:flex; 
  flex-wrap:wrap;
  padding:2em;
  align-items:center; justify-content:center;
  width:100%;
}
@media (min-width: 992px) {
  nav.globalMenuSp {width: 50%;}
  nav.globalMenuSp.active > div{overflow:visible; max-height:auto; margin:10px;}
  nav.globalMenuSp > div{margin:10px;}
}

nav.globalMenuSp ul{display:flex; width:100%; list-style-type:none; margin:0; padding:0; flex-wrap:wrap;}
nav.globalMenuSp ul li{border:none; border-radius:0; background-color:transparent;}
nav.globalMenuSp.active ul li{width: 50%;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  nav.globalMenuSp ul li:nth-child(1){animation-delay:0s;}
  nav.globalMenuSp ul li:nth-child(2){animation-delay:0.05s;}
  nav.globalMenuSp ul li:nth-child(3){animation-delay:0.1s;}
  nav.globalMenuSp ul li:nth-child(4){animation-delay:0.15s;}
  nav.globalMenuSp ul li:nth-child(5){animation-delay:0.2s;}
  nav.globalMenuSp ul li:nth-child(6){animation-delay:0.25s;}
  nav.globalMenuSp ul li:nth-child(7){animation-delay:0.3s;}
  nav.globalMenuSp ul li:nth-child(8){animation-delay:0.35s;}
  nav.globalMenuSp ul li:nth-child(9){animation-delay:0.4s;}
  @-webkit-keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }

nav.globalMenuSp.active ul li a[data-toggle="collapse"]:active,
nav.globalMenuSp.active ul li a[data-toggle="collapse"]:hover,
nav.globalMenuSp.active ul li a[data-toggle="collapse"]:focus {
  text-decoration: none; border:none;
}

nav.globalMenuSp.active ul li a{display: block; position: relative; padding:.5em .8em;border-bottom:1px solid #cccccc !important; text-decoration:none;}
nav.globalMenuSp.active ul li:nth-child(even) a{border-left:1px solid #cccccc !important;}
nav.globalMenuSp.active ul li a:hover{background-color:#eeeeee;}

/* ???????jQuery???????? */
nav.globalMenuSp.active {
  transform: translateY(0%);
}

.navToggle {
  display: block;
  position: relative;    /* body??????????? */
  right:0px;
  top: 0px;
  width: 42px;
  height: 40px;
  cursor: pointer;
  z-index: 20;
  background-color:#0411af;
  text-align: center;
  overflow:hidden;
  padding:0 6px;
}
@media (min-width: 992px) {
  .navToggle {display:none;}
}

.navToggle span {
  display: block;
  position: absolute;    /* .navToggle???? */
  width:calc(100% - 12px);
  border-bottom: solid 3px #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: 18px;
}

.navToggle span:nth-child(3) {
  top: 27px;
}

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


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

/* 2???3???span?45?? */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}


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