@charset "UTF-8";
/* =========================================================
   menespark LP  -  lp_reserve.css
   For: /page/lp/lp_reserve.php
   The page body is a stack of exported section images, so the
   CSS only handles the shell, the CTA button and the sticky bar.
   The CTA rules are kept even though the page ships without one,
   so turning $lp_show_cta on later needs no CSS work.
   ========================================================= */

:root {
  --lp-pink: #F0407A;
  --lp-pink-deep: #D42A62;
  --lp-ink: #2b2229;
  --lp-bg: #01061a;
  --lp-line: rgba(255, 255, 255, .12);
  --lp-font: "Noto Sans JP", sans-serif;
  --lp-disp: "Zen Kaku Gothic New", sans-serif;
  --lp-wrap: 1080px;
  /* Bottom edge of 5.webp -> srgb(1,9,47). Used to close the page
     without a visible seam under the last section image. */
  --lp-tail: #01092f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--lp-font);
  background: var(--lp-bg);
  color: #fff;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.lp-wrap {
  width: min(var(--lp-wrap), 92vw);
  margin-inline: auto;
}

/* ---------- header ---------- */
.lp-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(1, 6, 26, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lp-line);
}

.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
}

.lp-brand {
  font-family: var(--lp-disp);
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 1.05rem;
}

.lp-brand b { color: #c9a86c; }

.lp-nav__cta {
  padding: .5em 1.3em;
  background: var(--lp-pink);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- body: stacked section images ---------- */
.lp-main {
  max-width: var(--lp-wrap);
  margin-inline: auto;
  /* Closes the gap under the last image on tall screens. */
  background: var(--lp-tail);
}

/* Sections are exported edge to edge, so they butt against each other
   with no gap. vertical-align kills the inline-image baseline gap. */
.lp-shot {
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* Seam softener. 3.webp ends light (2,25,87) and 4.webp opens dark
   (1,7,35), so that join may show a step. Enable only if it does.
.lp-main { position: relative; }
.lp-shot { position: relative; }
.lp-shot + .lp-shot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(2, 25, 87, .55), transparent);
  pointer-events: none;
}
*/

/* ---------- CTA (unused while $lp_show_cta is false) ---------- */
.lp-cta {
  padding: 34px 20px 54px;
  text-align: center;
  background: var(--lp-tail);
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 62px;
  padding: 0 3em;
  background: linear-gradient(135deg, var(--lp-pink) 0%, var(--lp-pink-deep) 100%);
  border-radius: 999px;
  font-family: var(--lp-disp);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px rgba(240, 64, 122, .34);
  transition: transform .18s, box-shadow .18s;
}

.lp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(240, 64, 122, .44);
}

.lp-btn:active { transform: translateY(0); }

.lp-cta__sub {
  margin-top: 18px;
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}

.lp-cta__sub a {
  color: var(--lp-pink);
  text-decoration: underline;
}

/* ---------- sticky CTA ---------- */
.lp-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(1, 6, 26, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--lp-line);
  text-align: center;
}

.lp-fixed[hidden] { display: none; }

.lp-btn--sm {
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  font-size: 1.1rem;
  padding: 0 1.5em;
}

/* ---------- footer ---------- */
/* No sticky bar ships with this page, so no extra bottom room is
   reserved. Add 76px back if $lp_show_cta is turned on. */
.lp-foot {
  padding: 34px 0;
  text-align: center;
  border-top: 1px solid var(--lp-line);
  font-size: .84rem;
  color: rgba(255, 255, 255, .5);
}

.lp-foot a {
  color: rgba(255, 255, 255, .7);
  text-decoration: underline;
}

.lp-foot__c { margin-top: 10px; font-size: .78rem; }

@media (min-width: 768px) {
  /* No sticky bar on desktop: the inline CTA is always reachable. */
  .lp-fixed { display: none !important; }
}