@charset "UTF-8";

  nav.sp_menu { display: none; color: #333; position: fixed; width: 100%; height: 100dvh; top: 0; right: 0; background-color: #fefcf8; z-index: 9999; text-align: left; }
  nav.sp_menu .sp_gnav { height: 100dvh; width: 100%; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  nav.sp_menu .sp_gnav .sp__logo { order: 3; width: 75%; margin-top: 5rem; }
  nav.sp_menu .sp_gnav .sp__main { order: 1; display: flex; flex-direction: column; gap: 1rem; width: 75%; margin-bottom: 3rem; }
  nav.sp_menu .sp_gnav .sp__main li { font-size: 2rem; line-height: 1; font-weight: 500; text-align: left; white-space: nowrap; }
  nav.sp_menu .sp_gnav .sp__main .sp__sub { display: flex; flex-direction: column; gap: 0.8rem; align-self: start; margin: 1rem 0 0 0; }
  nav.sp_menu .sp_gnav .sp__main .sp__sub li { font-size: 1.6rem; line-height: 1; font-weight: 500; text-align: left; white-space: nowrap; display: flex; align-items: center; }
  nav.sp_menu .sp_gnav .sp__main .sp__sub li::before { display: inline-block; content: ""; width: 2rem; height: 1px; background-color: var(--c_black); margin-right: 0.5rem; }
  nav.sp_menu .sp_gnav .sp__lang { order: 2; display: flex; flex-direction: row; align-items: flex-start; width: 75%; margin-bottom: 0; }
  nav.sp_menu .sp_gnav .sp__lang li { font-size: 1.4em; line-height: 1; font-weight: 500; text-align: left; white-space: nowrap; }
  nav.sp_menu .sp_gnav .sp__lang li.sp__lang--en::after { content: '/'; margin: 0 0.25em; }
  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: #fefcf8; opacity: 0.95; z-index: -1;  }
  .menu_btn { width: 4rem; height: 2.65rem; background-color: #fefcf8; 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: 0; right: 0; z-index: 999; }
  .menu_btn .line { position: fixed; background-color: #333; overflow: hidden; z-index: 999; width: 2.4rem; 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: 0.75rem; }
  .menu_btn .line:nth-child(1) { top: 0.75rem; z-index: 2; }
  .menu_btn .line:nth-child(2) { top: 1.25rem; z-index: 2; }
  .menu_btn .line:nth-child(3) { top: 1.75rem; z-index: 2; }

  .btn_wrapper { z-index: 99999; position: fixed; }
  .btn_wrapper.clicked .menu_btn .line:nth-child(1) { -webkit-transform: translateY(0.5rem) rotate(30deg); transform: translateY(0.5rem) rotate(30deg); -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(-0.5rem) rotate(-30deg); transform: translateY(-0.5rem) rotate(-30deg); -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; }