:root {
  color-scheme: light;
  --base: #F6F1EB;
  --ink: #3A2F2D;
  --mauve: #9A6D74;
  --greige: #E6DDD4;
  --gray: #6F6560;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #EDE6DF; color: var(--ink); font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; line-height: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
h1, h2, h3, .headline { word-break: auto-phrase; text-wrap: balance; line-break: strict; }

.demo-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; background: var(--ink); color: var(--base); font-size: 13px; }
.demo-bar p { margin: 0; line-height: 1.6; }

.back-link { width: min(100%, 640px); margin: 0 auto; padding: 10px 16px; background: var(--base); font-size: 14px; }
.back-link a { color: var(--mauve); text-underline-offset: 4px; }
.lp { width: min(100%, 640px); margin: 0 auto; background: var(--base); box-shadow: 0 12px 48px rgba(58,47,45,.12); }
.panel { position: relative; width: 100%; overflow: hidden; }
.panel img { display: block; width: 100%; height: auto; }

/* 見せ場：FVがゆっくり明るくなり、少しだけ寄る */
.panel-fv img { animation: fv-in 2.4s ease-out both; }
@keyframes fv-in { from { opacity: 0; transform: scale(1.04); filter: brightness(1.08); } to { opacity: 1; transform: none; filter: none; } }
.no-motion .panel-fv img { animation: none; }

.hotspot { position: absolute; display: block; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.hs-fv { left: 8%; width: 84%; top: 88%; height: 5.6%; }
.hs-end { left: 5%; width: 90%; top: 82.5%; height: 8%; }
.hotspot:hover { background: rgba(154,109,116,.08); }
.hotspot:focus-visible { outline: 3px solid var(--mauve); outline-offset: 3px; }

.motion-toggle { flex: none; min-height: 44px; padding: 8px 14px; border: 1px solid #C7A3A8; border-radius: 999px; background: transparent; color: var(--base); font: inherit; font-size: 13px; cursor: pointer; }

.sticky-cta { position: fixed; left: 50%; bottom: 14px; z-index: 20; transform: translate(-50%, 140%); width: min(calc(100% - 32px), 420px); min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--mauve); color: var(--base); font-size: 16px; text-decoration: none; box-shadow: 0 8px 24px rgba(58,47,45,.25); transition: transform .4s ease; }
.sticky-cta.show { transform: translate(-50%, 0); }
.no-motion .sticky-cta { transition: none; }

.footer { max-width: 640px; margin: 0 auto; padding: 28px 20px 96px; background: var(--base); text-align: center; }
.footer p { margin: 0 0 12px; font-size: 14px; }
.footer small { color: var(--gray); font-size: 12px; }

.line-dialog { width: min(calc(100% - 24px), 480px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 16px; background: var(--base); color: var(--ink); }
.line-dialog::backdrop { background: rgba(58,47,45,.45); }
.dlg { position: relative; padding: 24px 20px 20px; }
.dlg h2 { margin: 4px 0 16px; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 400; font-size: 21px; line-height: 1.5; }
.dlg-demo { margin: 0 48px 0 0;padding: 6px 10px; border-radius: 8px; background: var(--greige); font-size: 13px; }
.dlg fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.dlg legend { margin-bottom: 6px; font-size: 14px; color: var(--gray); }
.dlg label { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 16px; }
.dlg input { width: 20px; height: 20px; accent-color: var(--mauve); }
.msg-label { color: var(--gray); font-size: 14px !important; }
.dlg textarea { width: 100%; padding: 10px; border: 1px solid #D9CEC4; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; resize: vertical; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dlg-actions button { flex: 1 1 180px; min-height: 48px; border-radius: 999px; font: inherit; font-size: 15px; cursor: pointer; }
.btn-copy { border: 0; background: var(--mauve); color: var(--base); }
.btn-line { flex: 1 1 180px; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px; border: 1px solid #D9CEC4; border-radius: 999px; background: transparent; color: var(--gray); font-size: 15px; text-align: center; text-decoration: none; cursor: not-allowed; }
.btn-line.is-live { border-color: #06C755; background: #06C755; color: #fff; cursor: pointer; }
.copied { min-height: 1.8em; margin: 8px 0 0; font-size: 14px; color: var(--mauve); }
.dlg-close { position: absolute; top: 10px; right: 10px; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--gray); font: inherit; font-size: 13px; cursor: pointer; }

@media (max-width: 640px) { .lp { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel-fv img { animation: none; }
  .sticky-cta { transition: none; }
}