:root {
  --cream: #FBF7EE;
  --mint: #E4F2DC;
  --green: #4FA85A;
  --coral: #EE7F5B;
  --ink: #2E3A30;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--mint);
  color: var(--ink);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.7;
}
h1, h2, h3 { word-break: auto-phrase; text-wrap: balance; line-break: strict; }
.lp { max-width: 560px; margin: 0 auto; background: var(--cream); box-shadow: 0 0 40px rgba(46, 58, 48, .08); }
.part { position: relative; }
.part img { display: block; width: 100%; height: auto; }
.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;
}
/* 画像の中のボタンに重ねる、押せる範囲 */
.hit {
  position: absolute; display: block; border-radius: 999px;
  transition: box-shadow .2s, background-color .2s;
}
.hit:hover, .hit:focus-visible { background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 3px rgba(238, 127, 91, .45); outline: none; }
.hit-fv { left: 12%; right: 12.2%; top: 88.8%; height: 5.3%; }
.hit-cta { left: 4.7%; right: 4.7%; top: 82.5%; height: 7%; }

/* スマホで下に出る申込ボタン（最初の画面と最後の申込パートが見えている間は隠す） */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 247, 238, .94);
  border-top: 1px solid rgba(79, 168, 90, .25);
  transform: translateY(110%); transition: transform .25s;
}
.sticky.show { transform: none; }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }
.sticky a {
  display: block; max-width: 528px; margin: 0 auto; padding: 12px 16px;
  border-radius: 999px; background: var(--coral); color: #fff;
  text-align: center; text-decoration: none; font-size: 16px; font-weight: 500;
}
.sticky small { display: block; font-size: 11px; opacity: .9; }

.note {
  padding: 20px 16px 32px; font-size: 12px; text-align: center; color: rgba(46, 58, 48, .75);
  background: var(--mint);
}

/* ページの一番下：お申し込みフォーム */
.form-area {
  scroll-margin-top: 0;
  padding: 40px 16px 48px;
  background: var(--mint);
}
.form-eyebrow {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 500;
}
.form-title {
  margin: 12px 0 18px; font-size: 26px; font-weight: 300; line-height: 1.45;
  word-break: keep-all;
}
.form-facts { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid rgba(79, 168, 90, .35); }
.form-facts li {
  display: flex; gap: 12px; padding: 10px 0; font-size: 14px;
  border-bottom: 1px solid rgba(79, 168, 90, .35);
}
.form-facts span { flex: 0 0 4em; color: var(--green); font-weight: 500; }
.form-frame {
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(46, 58, 48, .08);
}
/* Googleフォームは中身の高さに合わせて自動で伸びないので、枠の中でスクロールが出ない高さを決めておく */
.form-frame iframe { display: block; width: 100%; height: 1990px; border: 0; }
@media (min-width: 370px) { .form-frame iframe { height: 1850px; } }
@media (min-width: 480px) { .form-frame iframe { height: 1690px; } }
.form-wait { padding: 48px 20px; text-align: center; font-size: 15px; }
.form-note { margin-top: 14px; font-size: 12px; color: rgba(46, 58, 48, .8); }
.form-note a { color: var(--ink); }
