igara/syonet_seven

.sidebar_exit {
  animation: sidebar_exit_slider 1s;
}

@keyframes sidebar_exit_slider {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100vh);
  }
}

.sidebar_wrap_div {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}

.sidebar_overlay_div {
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(45, 45, 45, 0.5);
}

.sidebar_overlay_div.hidden {
  animation: sidebar_overlay_div_slider_hidden 1s;
  animation-fill-mode: forwards;
}

@keyframes sidebar_overlay_div_slider_hidden {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

.sidebar_overlay_div.able {
  animation: sidebar_overlay_div_slider_able 1s;
  animation-fill-mode: forwards;
}

@keyframes sidebar_overlay_div_slider_able {
  0% {
    left: 100%;
  }

  100% {
    left: 0;
  }
}

.sidebar_link_wrap_ul {
  position: fixed;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  overflow-y: scroll;
  list-style: none;
  background: #ebffe7;
  opacity: 1;
}

.sidebar_link_wrap_ul.hidden {
  animation: sidebar_link_wrap_ul_slider_hidden 1s;
  animation-fill-mode: forwards;
}

@keyframes sidebar_link_wrap_ul_slider_hidden {
  0% {
    left: 0;
  }

  100% {
    left: -40%;
  }
}

.sidebar_link_wrap_ul.able {
  animation: sidebar_link_wrap_ul_slider_able 1s;
  animation-fill-mode: forwards;
}

@keyframes sidebar_link_wrap_ul_slider_able {
  0% {
    left: -40%;
  }

  100% {
    left: 0;
  }
}

.sidebar_link_list {
  left: -100%;
  padding: 2vh;
  overflow: hidden;
  border-bottom: dotted;
  cursor: pointer;
}

.sidebar_link_list a {
  left: -100%;
  display: block;
  color: #000;
  text-decoration: none;
}