:root {
  color-scheme: light;
  --page-bg: #f7f1e9;
  --shadow: 0 18px 48px rgba(91, 70, 55, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 8%, rgba(154, 178, 137, 0.2), transparent 28%),
    linear-gradient(180deg, #fbf7ef 0%, var(--page-bg) 100%);
  color: #4b3a30;
  font-family:
    "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui,
    sans-serif;
}

.lp-shell {
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 0 0 116px;
  background: #fffaf3;
  box-shadow: var(--shadow);
}

.lp-section {
  display: block;
  width: 100%;
  height: auto;
}

.floating-cta {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 20;
  display: block;
  width: min(92vw, 390px);
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 22px rgba(111, 63, 45, 0.26));
  -webkit-tap-highlight-color: transparent;
}

.floating-cta img {
  display: block;
  width: 100%;
  height: auto;
}

.floating-cta:focus-visible {
  outline: 3px solid #6f956b;
  outline-offset: 4px;
  border-radius: 999px;
}

@media (min-width: 768px) {
  body {
    padding: 32px 0;
  }

  .lp-shell {
    border-radius: 18px;
    overflow: hidden;
  }
}

@media (max-width: 430px) {
  .lp-shell {
    width: 100%;
    box-shadow: none;
  }
}