/* =========================================================
   Drawer Navigation
   ========================================================= */

#drawer_nav{
  display: none;
}

@media screen and (max-width: 960px){
  #drawer_nav{
    display: block;
  }
  /* アクティブ時のラッパー */
  #drawer_nav.panelactive{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
  }
  
  #drawer_nav__list{
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #drawer_nav.panelactive #drawer_nav__list{
    display: block;
  }
  
  /* ----------------------------------------
    Navigation UL / LI
    ---------------------------------------- */
  #drawer_nav ul{
    opacity: 0;
    z-index: 9999;
  }
  #drawer_nav.panelactive ul{
    opacity: 1;
  }
  #drawer_nav.panelactive ul li{
    opacity: 0;
    animation: gnaviAnime 1s forwards;
  }
  
  @keyframes gnaviAnime{
    0%{ opacity: 0; }
    100%{ opacity: 1; }
  }
  
  #drawer_nav li{
    list-style: none;
    text-align: center;
  }
  #drawer_nav li a{
    display: block;
    text-decoration: none;
  }
  
  .openbtn{
    position: relative;
    z-index: 9999;
    cursor: pointer;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    margin-left: .5rem;
    background-color: #fff;
    border: 1px solid rgba(231,231,231,.6);
    transition: transform .3s ease, background-color .3s ease;
  }
  .openbtn:hover{
    background-color: #fff;
  }
  .openbtn.active{
    border: 1px solid var(--black);
    background-color: #fff;
  }
  
  /* ハンバーガーライン */
  .openbtn span{
    position: absolute;
    left: 17px;
    display: inline-block;
    width: 52%;
    height: 2px;
    background-color: var(--black);
    border-radius: 0;
    transition: transform .3s ease, background-color .3s ease;
  }
  .openbtn span:nth-of-type(1){ top: 23px; }
  .openbtn span:nth-of-type(2){ top: 34px; }
  .openbtn span:nth-of-type(3){ top: 45px; }
  
  /* active時の × 形状 */
  .openbtn.active span:nth-of-type(1){
    top: 27px;
    transform: translateY(6px) rotate(-45deg);
  }
  .openbtn.active span:nth-of-type(2){ 
    opacity: 0;
  }
  
  .openbtn.active span:nth-of-type(3){
    top: 39px;
    transform: translateY(-6px) rotate(45deg);
  }
  
  .openbtn.active span:nth-of-type(1),
  .openbtn.active span:nth-of-type(2),
  .openbtn.active span:nth-of-type(3){
    left: 17px;
    width: 52%;
  }
}

@media screen and (max-width: 650px){
  .openbtn{
    width: 56px;
    height: 56px;
    border-radius: 28px;
  }
  .openbtn span{
    left: 15px;
    width: 44%;
  }
  .openbtn span:nth-of-type(1){ top: 19px; }
  .openbtn span:nth-of-type(2){ top: 27px; }
  .openbtn span:nth-of-type(3){ top: 35px; }

  .openbtn.active span:nth-of-type(1){ top: 20px; }
  .openbtn.active span:nth-of-type(3){ top: 32px; }

  .openbtn.active span:nth-of-type(1),
  .openbtn.active span:nth-of-type(2),
  .openbtn.active span:nth-of-type(3){
    left: 13px;
  }
}