@charset "utf-8";
/* CSS Document */
/*----------ハンバーガーアイコン----------*/
/*-------------------タブレット以下用-------------------*/
@media screen and (max-width: 1024px) {
  .hamburger {
    display: inline-block;
    width: 4.5rem;
    height: 4.5rem;
    z-index: 10;
    box-sizing: border-box;
    background-color: transparent;
    align-self: center;
    position: relative;
    top:0;
    right: 0;
    margin-left: 1.2rem;
    margin-right: 0.5rem;
  }
  .hamburger span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
    position: absolute;
    left: 0.5rem;
    width: 3rem;
    height: 0.3rem;
    background-color: #ffffff;
    margin: 0 auto;
    border-radius: 0.1rem;
  }
  .hamburger span:nth-of-type(1) {
    top: 30%;
  }
  .hamburger span:nth-of-type(2) {
    top: 50%;
  }
  .hamburger span:nth-of-type(3) {
    top: 70%;
  }
  .hamburger span:nth-of-type(1) {
    -webkit-animation: menu-ber01 0.75s forwards;
    animation: menu-ber01 0.75s forwards;
  }
  .hamburger span:nth-of-type(2) {
    transition: all 0.25s 0.25s;
    opacity: 1;
  }
  .hamburger span:nth-of-type(3) {
    -webkit-animation: menu-ber02 0.75s forwards;
    animation: menu-ber02 0.75s forwards;
  }

  .active_hamburger span:nth-of-type(1) {
    -webkit-animation: active-menu-ber01 0.75s forwards;
    animation: active-menu-ber01 0.75s forwards;
    top: 30%;
  }
  .active_hamburger span:nth-of-type(2) {
    opacity: 0;
  }
  .active_hamburger span:nth-of-type(3) {
    -webkit-animation: active-menu-ber03 0.75s forwards;
    animation: active-menu-ber03 0.75s forwards;
  }

  @-webkit-keyframes menu-ber01 {
    0% {
      -webkit-transform: translateY(8px) rotate(45deg);
    }
    50% {
      -webkit-transform: translateY(8px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
    }
  }
  @keyframes menu-ber01 {
    0% {
      transform: translateY(8px) rotate(45deg);
    }
    50% {
      transform: translateY(8px) rotate(0);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
  @-webkit-keyframes menu-ber02 {
    0% {
      -webkit-transform: translateY(-8px) rotate(-45deg);
    }
    50% {
      -webkit-transform: translateY(-8px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
    }
  }
  @keyframes menu-ber02 {
    0% {
      transform: translateY(-8px) rotate(-45deg);
    }
    50% {
      transform: translateY(-8px) rotate(0);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
  @-webkit-keyframes active-menu-ber01 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(10px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(10px) rotate(45deg);
    }
  }
  @keyframes active-menu-ber01 {
    0% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(10px) rotate(0);
    }
    100% {
      transform: translateY(10px) rotate(45deg);
    }
  }
  @-webkit-keyframes active-menu-ber03 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(-8px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(-8px) rotate(-45deg);
    }
  }
  @keyframes active-menu-ber03 {
    0% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(-8px) rotate(0);
    }
    100% {
      transform: translateY(-8px) rotate(-45deg);
    }
  }
  .gnav_sp_open {
    position: relative;
  }
}