@charset "UTF-8";

  nav.sp_menu { display: none; color: #333; position: fixed; width: 100%; height: 100dvh; top: 0; right: 0; background-color: #fff; z-index: 9999; text-align: left; }
  nav.sp_menu .sp_gnav { height: 100dvh; width: 100%; margin: 0; display: grid; justify-items: center; }
  nav.sp_menu .sp_gnav ul { display: grid; gap: 2rem; align-self: end; width: 55%; margin-bottom: 4rem; }
  nav.sp_menu .sp_gnav li { font-size: 1.5em; line-height: 1; font-weight: 800; text-align: left; letter-spacing: 0.05em; transform: scale(1.1, 1); transform-origin: top left; width: 90%; white-space: nowrap; }
  nav.sp_menu .sp_gnav ul.sub { display: grid; gap: 1.2rem; align-self: start; margin-bottom: 0; }
  nav.sp_menu .sp_gnav ul.sub li { font-size: 1.2em; line-height: 1; font-weight: 800; text-align: left; letter-spacing: 0.05em; transform: scale(1.1, 1); transform-origin: top left; width: 90%; white-space: nowrap; }
  nav.sp_menu .sp_gnav ul li.sns { transform: none; align-self: start; margin-top: 2rem; }
  nav.sp_menu .sp_gnav ul li.sns ul { width: 100%; display: block; margin-bottom: 0; }
  nav.sp_menu .sp_gnav ul li.sns li { display: inline-block; margin-right: 1.5em; width: 1.5em; }
  nav.sp_menu .sp_gnav li a { color: #333; text-decoration: none; }

  .menu_overlay { position: fixed; width: 100%; height: 100dvh; top: 0; right: 0; background-color: #fff; opacity: 0.95; 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: 1.2rem; right: 1.2rem; z-index: 999; }
  .menu_btn .line { position: fixed; background-color: #333; 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: 2rem; }
  .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; }