@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  button.menu-button {
    width: 100%;
    height: 100%;

    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  button.menu-button span {
    display: inline-block;

    width: 100%;
    min-width: 25px;
    height: 10%;
    min-height: 2.5px;
    background-color: #000000;

    border-radius: 10px;

    transition-property: all;
    transition-duration: 0.275s;
    transition-timing-function: ease;
  }

  button.menu-button span:nth-of-type(1) {
  }
  button.menu-button span:nth-of-type(2) {
  }
  button.menu-button span:nth-of-type(3) {
  }

  button.menu-button.is-active span:nth-of-type(1) {
    transform: translateY(10px) rotate(45deg);
  }
  button.menu-button.is-active span:nth-of-type(2) {
    opacity: 0;
  }
  button.menu-button.is-active span:nth-of-type(3) {
    transform: translateY(-10px) rotate(-45deg);
  }
}

@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
  button.menu-button {
    width: 100%;
    height: 100%;

    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  button.menu-button span {
    display: inline-block;

    width: 100%;
    min-width: 25px;
    height: 10%;
    min-height: 2.5px;
    background-color: #000000;

    border-radius: 10px;

    transition-property: all;
    transition-duration: 0.275s;
    transition-timing-function: ease;
  }

  button.menu-button span:nth-of-type(1) {
  }
  button.menu-button span:nth-of-type(2) {
  }
  button.menu-button span:nth-of-type(3) {
  }

  button.menu-button.is-active span:nth-of-type(1) {
    transform: translateY(10px) rotate(45deg);
  }
  button.menu-button.is-active span:nth-of-type(2) {
    opacity: 0;
  }
  button.menu-button.is-active span:nth-of-type(3) {
    transform: translateY(-10px) rotate(-45deg);
  }
}