:root {
  --black: #000;
  --white: #fff;
  --green: #00aa44;
  --yellow: #fcee00;
  --yellow-alpha: #fcee00dd;
  --gray: #888;
}



@keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}

#menu-button {
  position: fixed;
  right: 12px;
  top: 20px;
  padding: 10px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}

#menu-button span {
  height: 3px;
  width: 18px;
  background-color: var(--gray);
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}

#menu-button span:before {
  top: -10px;
  visibility: visible;
}

#menu-button span:after {
  top: 10px;
}

#menu-button span:before,
#menu-button span:after {
  height: 3px;
  width: 18px;
  background-color: var(--gray);
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~#menu {
  visibility: visible;
  transition: all .3s ease-in-out;
}

input[type=checkbox]:checked~#menu-button:hover span,
input[type=checkbox]:checked~#menu-button span {
  background: transparent;
}

input[type=checkbox]:checked~#menu-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
  background-color:  var(--gray);
}

input[type=checkbox]:checked~#menu-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
  background-color:  var(--gray);
}

#menu {
  height: 100vh;
  width: 100vw;
  background: var(--yellow);
  z-index: 2;
  position: fixed;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top:0;
}

.menu-logo {
  padding: 50px 0 20px;
}
.menu-logo-svg {
  width:120px;
}

.menu-menu {
  text-align: center;
  padding-left: 0;
  list-style-type: none;
}

.menu-item {
  letter-spacing: .08em;
  padding: .6em;
}

.menu-item a {
  color:  var(--gray);
  text-decoration: none;
  font-size: 2em;
  font-weight: 600;
}

.menu-item a:hover {
  opacity: .6;
}

.menu-icon-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 5px 16px;
  list-style-type: none;
}

.menu-sns-icon {
  width: 26px;
  height: 26px;
  padding: 0;
}