@charset "UTF-8";
/* ドロワー */
#nav-drawer {
  position: fixed;
  top: 0px;
  right: 0;
  z-index: 200;
  display: none;
  transition: .3s ease-in-out;
  /*滑らかに表示*/
  -webkit-transform: translateX(100%);
  transform: translate(100%, 0%);
  /*左に隠しておく*/ }
  @media (max-width: 640px) {
    #nav-drawer {
      display: block; } }

.nav-unshown {
  display: none; }

#nav-content {
  background-color: #fff;
  width: 100%;
  max-width: 330px;
  height: 100vh;
  transition: .3s ease-in-out;
  /*滑らかに表示*/ }
  #nav-content ul {
    list-style: none; }
    #nav-content ul li a {
      display: block;
      padding: 15px 100px 15px 15px;
      font-size: 1.3rem; }
      @media (max-width: 576px) {
        #nav-content ul li a {
          padding-right: 50px; } }

/* 三本線 */
#nav-open {
  width: 40px;
  height: 40px;
  background-color: #047c3e;
  display: inline-block;
  position: fixed;
  top: 18px;
  right: 100%;
  transition: .3s ease-in-out;
  /*滑らかに表示*/
  z-index: 1; }

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  /*線の太さ*/
  width: 14px;
  /*長さ*/
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
  transition: .3s ease-in-out;
  /*滑らかに表示*/ }

#nav-open span:before {
  top: 300%;
  transition: .3s ease-in-out;
  /*滑らかに表示*/ }

#nav-open span:after {
  top: -200%;
  transition: .3s ease-in-out;
  /*滑らかに表示*/ }

#nav-input:checked ~ #nav-content {
  -webkit-transform: translate(-100%, 0%);
  transform: translate(-100%, 0%);
  /*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
  transition: .3s ease-in-out;
  /*滑らかに表示*/ }

#nav-input:checked ~ #nav-open {
  -webkit-transform: translate(-805%, 0%);
  transform: translate(-805%, 0%);
  /*中身を表示（右へスライド）*/ }
  @media (max-width: 576px) {
    #nav-input:checked ~ #nav-open {
      -webkit-transform: translate(-680%, 0%);
      transform: translate(-680%, 0%);
      /*中身を表示（右へスライド）*/ } }

#nav-input:checked ~ #nav-open span {
  background: transparent; }

#nav-input:checked ~ #nav-open span:before {
  top: 0;
  left: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transition: .3s ease-in-out;
  /*滑らかに表示*/ }

#nav-input:checked ~ #nav-open span:after {
  top: 0;
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: .3s ease-in-out;
  /*滑らかに表示*/ }

/*# sourceMappingURL=drawer.css.map */