@charset "UTF-8";

nav.sp_menu { color: #fff; position: fixed; width: 300px; height: 100vh; top: 0; background-color: #585650; opacity: 0.9; z-index: 9999; right: 0; text-align: left; }
nav.sp_menu .sp_menu_box { position: relative; width: 100%; height:100vh; padding:0 0 0 0; display:flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
nav.sp_menu .global_nav { width: 70%; margin: 0 auto; text-align: left; display:flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
nav.sp_menu .global_nav li { font-size: 1.3em; line-height: 1.5; font-weight: 400; text-align: center; margin: 0.8em auto; letter-spacing: 0.25em; }
nav.sp_menu .global_nav li a { color: #fff; text-decoration: none; }
nav.sp_menu .global_nav li.sp_nemu__logo { width: 70%; margin: 0 auto 2.5em auto; }

.menu_overlay { position: fixed; width: 100%; height: 100vh; top: 0; right: 0; z-index: -1;  }
.menu_btn { width: 50px; height: 45px; background-color: transparent; position: fixed; overflow: visible; line-height: 10px; font-size: 1px; float: right; cursor: pointer; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; top: 1rem; right: 1rem; z-index: 999; }
.menu_btn .line { position: fixed; background-color: #fff; overflow: hidden; z-index: 999; width: 30px; height: 1px; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; top: 0; right: 1.6rem; }
.menu_btn .line:nth-child(1) { top: 28px; z-index: 2; }
.menu_btn .line:nth-child(2) { top: 38px; z-index: 2; }
.menu_btn .line:nth-child(3) { top: 48px; z-index: 2; }
.btn_wrapper { z-index: 99999; position: fixed; }
.btn_wrapper.clicked .menu_btn .line:nth-child(1) { -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
.btn_wrapper.clicked .menu_btn .line:nth-child(2) { opacity: 0; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
.btn_wrapper.clicked .menu_btn .line:nth-child(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }


/* sp */
@media screen and (max-width: 600px) {

  nav.sp_menu { color: #fff; position: fixed; width: 100%; height: 100vh; top: 0; background-color: #585650; opacity: 0.9; z-index: 9999; right: 0; text-align: left; }
  nav.sp_menu .sp_menu_box { position: relative; width: 100%; height:100svh; padding:0 0 0 0; display:flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  nav.sp_menu .global_nav { width: 70%; margin: 0 auto; text-align: left; display:flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  nav.sp_menu .global_nav li { font-size: 1.5em; line-height: 1; font-weight: 400; text-align: center; margin: 0.8em auto; letter-spacing: 0.25em; }
  nav.sp_menu .global_nav li a { color: #fff; text-decoration: none; }
  nav.sp_menu .global_nav li.sp_nemu__logo { width: 70%; margin: 0 auto 2.5em auto; }

  .menu_overlay { position: fixed; width: 100%; height: 100vh; top: 0; right: 0; z-index: -1;  }
  .menu_btn { width: 50px; height: 45px; background-color: transparent; position: fixed; overflow: visible; line-height: 10px; font-size: 1px; float: right; cursor: pointer; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; top: 1rem; right: 1rem; z-index: 999; }
  .menu_btn .line { position: fixed; background-color: #fff; overflow: hidden; z-index: 999; width: 30px; height: 1px; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; top: 0; right: 1.6rem; }
  .menu_btn .line:nth-child(1) { top: 28px; z-index: 2; }
  .menu_btn .line:nth-child(2) { top: 38px; z-index: 2; }
  .menu_btn .line:nth-child(3) { top: 48px; z-index: 2; }
  .btn_wrapper { z-index: 99999; position: fixed; }
  .btn_wrapper.clicked .menu_btn .line:nth-child(1) { -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
  .btn_wrapper.clicked .menu_btn .line:nth-child(2) { opacity: 0; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
  .btn_wrapper.clicked .menu_btn .line:nth-child(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }

}