@charset "UTF-8";

/* ==================================================================================

  "Gokuraku Shokudo" Site SP Common Styles

================================================================================== */
body { min-width: 100%; }

.pc { display: none; }
.sp { display: inherit; }

/*
  Site Header
================================================================================== */
.l-header { padding: 15px 0 0; }
.l-header h1 { width: 150px; }

/* Global Navi
---------------------------------------------------------------------------------- */
.gnav {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blk);
}
.gnav ul { flex-direction: column; }
.gnav ul li { font-size: calc(36 / 640 * 100vw); }
.gnav ul li:not(:last-of-type) { margin: 0 0 .25em; }
.gnav ul li:last-of-type::before { content: none; }
.gnav ul li:last-of-type a:first-of-type { margin: 0; }
.gnav ul li:last-of-type a:last-of-type { width: calc(36 / 640 * 100vw) }

/* Toggle Menu
---------------------------------------------------------------------------------- */
.menu-trigger {
  position: absolute;
  z-index: 11;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 24px;
  display: inline-block;
  border: none;
  background: none;
  outline: none;
  transition: all .3s;
  cursor: pointer;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  display: inline-block;
  border-radius: 2px;
  background-color: var(--wht);
  transition: all .3s;
}
.menu-trigger span:first-of-type { top: 0; }
.menu-trigger span:nth-of-type(2) { top: calc((24px - 2px) / 2); }
.menu-trigger span:last-of-type { bottom: 0; }

.menu-trigger.is-active span:first-of-type { transform: translateY(11px) rotate(-45deg); }
.menu-trigger.is-active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.is-active span:last-of-type { transform: translateY(-11px) rotate(45deg); }

/*
  Site Footer
================================================================================== */
.l-footer { padding: 25px 0; }
.l-footer h2 { width: 225px; }