@charset "UTF-8";

.hamburger-nav{
  display: none;
}


@media screen and (max-width: 768px) {
  header{
    border: 0px;
    display: block;
    min-height: 0;
  }
  .header-inner{
    display: none;
  }
  .openbtn-wrap{
    position: absolute;
    top: 50%;
    right: 20px;
    width: 24px;
    height: 12px;
  }
  .openbtn-wrap span{
    position: absolute;
    display: block;
    width: 100%;
    background-color: #fff;
    height: 1px;
    transition: all .4s;
  }
  .openbtn-wrap span:nth-child(1){
    top: 0;
    transform: translateY(0) rotate(0);
  }
  .openbtn-wrap span:nth-child(2){
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
  }
  .openbtn-wrap span:nth-child(3){
    top: 100%;
    transform: translateY(0) rotate(0);
  }
  .openbtn-wrap.is-open span{
    background-color: #555;
  }
  .openbtn-wrap.is-open span:nth-child(1){
    transform: translateY(6px) rotate(-45deg);
  }
  .openbtn-wrap.is-open span:nth-child(2){
    opacity: 0;
  }
  .openbtn-wrap.is-open span:nth-child(3){
    transform: translateY(-6px) rotate(45deg);
  }
  .hamburger-nav{
    display: block;
    position: fixed;
    top: -120%;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #efefef;
    transition: all .6s;
  }
  .hamburger-nav.is-open{
    top: 0;
  }
  .hamburger-nav #g-nav-list{
    position: absolute;
    width: 160px;
    top: 45vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }
  .hamburger-nav li{
    list-style: none;
    text-align: center;
  }
  .hamburger-nav li a{
    text-decoration: none;
    padding: 10px;
    display: block;
    letter-spacing: 0.1em;
    font-size: 16px;
  }
  ul#menu-gnavi{
    width: 100%;
  }
}