img { max-width: 100%; height: auto; }

:root {
  --bg: #ffffff;
  --bg-soft: #f3fbff;
  --bg-soft-2: #edf9ff;
  --main: #0a558e;
  --main-dark: #073f70;
  --cyan: #2ba8d8;
  --green: #58b95c;
  --green-soft: #99d774;
  --accent: #f4763c;
  --accent-2: #f89450;
  --h1-accent: #1a86c8;
  --text: #16446b;
  --muted: #58748a;
  --line: #dbeef7;
  --shadow: 0 12px 30px rgba(33, 108, 148, .09);
  --radius: 18px;
  --container: 1110px;
  --container-wide: 1320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; scroll-behavior: smooth; }
html { scroll-padding-top: 92px; }
body {
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #f3a12c; outline-offset: 4px; border-radius: 8px; }

.container { width: min(calc(100% - 64px), var(--container)); margin-inline: auto; }
.container-wide { width: min(calc(100% - 64px), var(--container-wide)); margin-inline: auto; }
.bleed-left { margin-left: calc(50% - 50vw); }
.bleed-right { margin-right: calc(50% - 50vw); }
.bleed-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 92px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(9, 84, 141, .06);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 430px; }
.brand-mark { width: 56px; height: 50px; object-fit: contain; }
.brand-name-wrap { display: grid; line-height: 1.05; }
.brand-name { font: 700 25px/1.05 "Zen Maru Gothic", sans-serif; letter-spacing: .04em; color: var(--main); white-space: nowrap; }
.brand-en { margin-top: 6px; font-size: 8px; font-weight: 700; letter-spacing: .2em; color: #247da8; }
.brand-tagline { margin-left: 8px; padding-left: 18px; border-left: 1px solid #d7e6ed; color: #52728a; font-size: 12px; font-weight: 600; line-height: 1.65; white-space: nowrap; }
.global-nav { display: flex; align-items: center; justify-content: flex-end; gap: 30px; font-size: 14px; font-weight: 600; color: #234c6b; white-space: nowrap; }
.global-nav > a:not(.header-cta) { transition: color .25s ease; }
.global-nav > a:not(.header-cta):hover { color: var(--cyan); }
.header-cta { min-height: 54px; display: inline-flex; align-items: center; gap: 8px; padding: 0 25px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 22px rgba(255,116,75,.22); transition: transform .25s ease, box-shadow .25s ease; }
.header-cta img { width: 23px; filter: brightness(0) invert(1); }
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(255,116,75,.28); }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 700px; background: linear-gradient(180deg, #fbfeff 0%, #f0fbff 100%); }
.hero::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -42px; height: 90px; background: #fff; border-radius: 50% 50% 0 0 / 48% 48% 0 0; z-index: 4; }
.hero-inner { min-height: 700px; display: grid; grid-template-columns: 48% 52%; align-items: stretch; }
.hero-copy { position: relative; z-index: 8; padding: 65px 34px 58px 12px; }
.hero h1 em { font-style: normal; color: var(--h1-accent); }
.hero h1 { margin: 0; width: 620px; max-width: 100%; font: 700 clamp(44px, 5.4vw, 72px)/1.36 "Zen Maru Gothic", sans-serif; letter-spacing: .025em; color: var(--main-dark); }
.hero h1::first-line { color: var(--main); }
.hero-text { margin: 24px 0 0; font-size: 18px; line-height: 1.75; font-weight: 600; color: #245777; }
.hero-points { display: flex; gap: 28px; margin-top: 48px; }
.hero-point { width: 142px; height: 142px; display: grid; place-items: center; align-content: center; text-align: center; gap: 8px; border: 1px solid #d5edf7; background: rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 7px 18px rgba(41,116,148,.08); font-size: 14px; line-height: 1.45; }
.round-icon { width: 45px; height: 34px; display: grid; place-items: center; }
.round-icon img { width: 38px; height: 34px; object-fit: contain; }
.hero-media { position: relative; min-height: 700px; align-self: stretch; overflow: visible;
  margin-right: min(-32px, calc((var(--container-wide) - 100vw) / 2)); }
.hero-media > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 6% 68%, 2% 32%); }
.hero-handwritten { position: absolute; z-index: 8; right: 54px; top: 388px; margin: 0; padding: 22px 26px; transform: rotate(-12deg); font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.7; color: var(--main-dark); letter-spacing: .08em;
  /* 端を溶かした白のハロー。写真の上でも文字が沈まない */
  background: radial-gradient(ellipse closest-side, rgba(255,255,255,.96) 46%, rgba(255,255,255,.78) 72%, rgba(255,255,255,0) 100%);
  text-shadow: 0 1px 3px rgba(255,255,255,.9); }
.hero-leaf-small { position: absolute; z-index: 8; width: 46px; right: 44px; top: 500px; transform: rotate(15deg); }
.hero-dad-badge { position: absolute; z-index: 8; right: 34px; bottom: 54px; min-width: 238px; min-height: 84px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 24px; background: rgba(255,255,255,.94); border-radius: 999px; box-shadow: 0 8px 24px rgba(39,100,130,.1); font-weight: 700; font-size: 15px; line-height: 1.45; }
.hero-dad-badge img { width: 56px; height: 56px; object-fit: contain; }
.hero-leaf { position: absolute; z-index: 7; pointer-events: none; }
.hero-leaf-a { left: -35px; top: 0; width: 190px; opacity: .5; transform: rotate(12deg); }
.hero-leaf-b { position: absolute; z-index: 7; width: 72px; right: 4px; top: 320px; opacity: .78; transform: rotate(-14deg); pointer-events: none; }

.section { position: relative; padding: 56px 0; }
.section-heading { position: relative; z-index: 2; text-align: center; margin-bottom: 54px; }
.section-heading h2 { margin: 0; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--main-dark); font: 700 37px/1.35 "Zen Maru Gothic", sans-serif; letter-spacing: .03em; white-space: nowrap; }
.section-heading h2 > img:first-child { width: 42px; max-height: 38px; object-fit: contain; }
.section-heading h2 .spark { width: 24px; max-height: 24px; object-fit: contain; }
.section-heading p { margin: 14px 0 0; color: #587187; font-size: 19px; font-weight: 500; }

.section-reasons { padding-top: 58px; padding-bottom: 34px; background: #fff; }
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.reason-card { min-width: 0; }
.reason-photo-wrap { position: relative; }
.reason-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; display: block; }
.reason-icon { position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #2da4dc; box-shadow: 0 8px 16px rgba(38,151,203,.16); }
.reason-icon img { width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); }
.reason-card h3 { margin: 20px 0 8px; font: 700 27px/1.35 "Zen Maru Gothic", sans-serif; color: #057b83; }
.reason-card p { margin: 0; font-size: 19px; line-height: 1.8; color: #456780; }

.section-price { background: linear-gradient(180deg, #effaff 0%, #eaf8ff 100%); padding-top: 30px; padding-bottom: 26px; }
.wave-top { position: absolute; left: -8%; right: -8%; top: -44px; height: 80px; background: #effaff; border-radius: 50% 50% 0 0 / 60% 60% 0 0; }
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.price-card { display: grid; grid-template-columns: 42% 58%; gap: 20px; padding: 28px; background: rgba(255,255,255,.94); border-radius: 13px; box-shadow: 0 9px 24px rgba(60,132,164,.05); }
.price-photo { width: 100%; aspect-ratio: 1.18 / 1; object-fit: cover; border-radius: 10px; }
.price-content h3 { margin: 2px 0 0; color: var(--main-dark); font: 700 21px/1.35 "Zen Maru Gothic", sans-serif; white-space: nowrap; }
.price-sub { margin: 4px 0 10px; font-size: 11px; color: #5b7385; }
.price-value { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #174e73; }
.price-value strong { color: #ef6b39; font-size: 31px; font-weight: 500; letter-spacing: .04em; }
.price-value span { color: #ef6b39; font-size: 15px; }
.price-content ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; color: #4a6b80; line-height: 1.9; }
.price-content li::before { content: "✓"; color: #1f7a4a; font-weight: 700; margin-right: 7px; }
.price-note { margin: 22px 0 0; text-align: center; font-size: 12px; color: #586f80; }

.section-flow { background: #fff; padding-top: 28px; padding-bottom: 36px; }
.flow-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px; }
.flow-item { position: relative; min-width: 0; }
.flow-item:not(:last-child)::after { content: ""; position: absolute; right: -28px; top: 87px; width: 16px; height: 16px; border-right: 6px solid #8fd09c; border-top: 6px solid #8fd09c; transform: rotate(45deg); }
.flow-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.flow-item:nth-child(1) img { object-position: 48% 50%; }
.flow-item:nth-child(2) img { object-position: 50% 35%; }
.flow-item:nth-child(3) img { object-position: 52% 48%; }
.flow-item:nth-child(4) img { object-position: 50% 48%; }
.step-number { position: absolute; z-index: 3; left: -7px; top: -17px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #0f78a8; color: #fff; font-size: 22px; font-weight: 700; box-shadow: 0 5px 12px rgba(37,149,203,.16); }
.flow-item h3 { margin: 16px 0 6px; font: 700 22px/1.4 "Zen Maru Gothic", sans-serif; color: var(--main-dark); white-space: nowrap; }
.flow-item p { margin: 0; font-size: 15px; line-height: 1.75; color: #577084; }

.section-voices { padding-top: 26px; padding-bottom: 26px; background: linear-gradient(180deg, #ecfaff 0%, #f0fbff 100%); }
.section-voices .section-heading { margin-bottom: 38px; }
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.voice-card { display: grid; grid-template-columns: 82px 1fr; gap: 18px; align-items: center; min-height: 170px; padding: 24px 26px; background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: 0 9px 22px rgba(57,133,165,.05); }
.voice-card img { width: 78px; height: 90px; object-fit: contain; }
.voice-text { margin: 0; font-size: 18px; line-height: 1.7; font-weight: 700; color: #245879; }
.voice-meta { margin: 11px 0 0; font-size: 13px; color: #5b7283; }

.section-faq { padding-top: 30px; padding-bottom: 26px; background: #fff; }
.faq-shell { display: grid; grid-template-columns: 68fr 32fr; gap: 28px; align-items: end; }
.section-heading-left { margin-bottom: 38px; }
.faq-list { display: grid; gap: 13px; }
.faq-item { background: #fff; border: 1px solid #e0eff6; border-radius: 999px; box-shadow: 0 6px 14px rgba(54,122,153,.06); overflow: clip; }
.faq-item summary { list-style: none; min-height: 54px; display: grid; grid-template-columns: 38px 1fr 26px; align-items: center; gap: 12px; padding: 6px 18px 6px 12px; cursor: pointer; font-size: 19px; font-weight: 600; color: #2b5978; }
/* 開くと箱が高くなり 999px の角丸が高さの半分まで膨らんでQバッジを削るため、
   閉じた状態の実効値(28px)に固定して角丸長方形に保つ */
.faq-item[open] { border-radius: 28px; }
.faq-item summary::-webkit-details-marker { display: none; }
.q-mark { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0f78a8; font-size: 16px; font-weight: 700; }
.faq-plus { position: relative; width: 20px; height: 20px; justify-self: end; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: #55bc69; transform: translate(-50%,-50%); }
.faq-plus::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .2s ease; }
.faq-item[open] .faq-plus::after { transform: translate(-50%,-50%) rotate(0deg); }
.faq-item > p { margin: 0; padding: 0 24px 18px 63px; font-size: 16px; color: #5a7285; }
.faq-side { position: relative; min-height: 330px; display: flex; align-items: flex-end; }
.faq-photo { width: 100%; height: 245px; object-fit: cover; object-position: 58% 55%; border-radius: 0; }
.faq-note { position: absolute; z-index: 3; top: 4px; left: 20px; right: 26px; display: flex; align-items: center; justify-content: center; gap: 11px; transform: rotate(-8deg); color: #315f7c; font: 700 14px/1.8 "Zen Maru Gothic", sans-serif; letter-spacing: .06em; text-align: center; }
.faq-note p { margin: 0; padding: 12px 18px; color: var(--main-dark);
  /* 写真に重なる行でも沈まないよう、端を溶かした白の下地を敷く */
  background: radial-gradient(ellipse closest-side, rgba(255,255,255,.96) 46%, rgba(255,255,255,.78) 72%, rgba(255,255,255,0) 100%);
  text-shadow: 0 1px 3px rgba(255,255,255,.9); }
.faq-line { width: 32px; height: 115px; object-fit: contain; }
.faq-line-right { transform: scaleX(-1); }

.final-cta { position: relative; min-height: 320px; display: flex; align-items: center; background: linear-gradient(100deg, #f5fff2 0%, #effdf5 55%, #f8fff1 100%); overflow: visible; }
.cta-inner { position: relative; z-index: 4; display: grid; grid-template-columns: 63% 37%; align-items: center; min-height: 320px; }
.cta-copy { padding: 28px 0 30px 65px; }
.cta-copy h2 { margin: 0; font: 700 40px/1.45 "Zen Maru Gothic", sans-serif; color: var(--main-dark); letter-spacing: .04em; }
.cta-copy p { margin: 15px 0 24px; color: #4c6f83; font-size: 18px; }
.main-cta { width: min(100%, 520px); margin-inline: auto; min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 16px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, var(--accent-2), var(--accent)); font-size: 22px; font-weight: 700; letter-spacing: .05em; box-shadow: 0 12px 25px rgba(255,117,76,.24); transition: transform .25s ease, box-shadow .25s ease; }
.main-cta img { width: 30px; filter: brightness(0) invert(1); }
.main-cta span { margin-left: 24px; font-size: 24px; }
.main-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(255,117,76,.3); }
.cta-visual { position: relative; min-height: 320px; }
.cta-family { position: absolute; z-index: 3; width: min(430px, 100%); right: 0; bottom: 24px; }
.cta-leaf-small { position: absolute; width: 52px; left: 2px; top: 94px; transform: rotate(9deg); }
.cta-leaf-bottom { position: absolute; z-index: 2; width: min(260px, 62%); left: 4%; bottom: -12px; opacity: .45; }
.cta-bubble { position: absolute; z-index: 5; right: -10px; top: 58px; width: 124px; height: 124px; display: grid; place-items: center; text-align: center; border-radius: 55% 45% 50% 48%; background: #2f7d32; color: #fff; font: 700 14px/1.45 "Zen Maru Gothic", sans-serif; transform: rotate(4deg); }
.cta-deco { position: absolute; z-index: 1; opacity: .42; pointer-events: none; }
.cta-deco-left-top { width: 280px; left: -70px; top: -55px; }
.cta-deco-left-bottom { width: 300px; left: -90px; bottom: -92px; }

.site-footer { min-height: 164px; padding: 28px 0 18px; background: #fff; }
.footer-inner { display: grid; grid-template-columns: 320px 1fr 130px; align-items: center; gap: 36px; }
.footer-brand { display: block; }
.footer-brand-row { display: flex; align-items: center; gap: 8px; }
.footer-brand-row img { width: 52px; }
.footer-brand-row strong { font: 700 21px/1.2 "Zen Maru Gothic", sans-serif; color: var(--main); }
.footer-brand-en { display: block; margin-left: 62px; margin-top: -5px; font-size: 7px; color: #247da8; font-weight: 700; letter-spacing: .18em; }
.footer-copy { display: block; margin-top: 10px; font-size: 10px; line-height: 1.65; color: #5b7789; }
.footer-nav { display: flex; justify-content: center; gap: 34px; font-size: 12px; font-weight: 600; color: #3e627a; white-space: nowrap; }
.footer-nav a:hover { color: var(--cyan); }
.footer-social { display: flex; justify-content: flex-end; gap: 16px; }
.footer-social img { width: 34px; height: 34px; object-fit: contain; }
.copyright { margin: 18px 34px 0 0; padding-right: 54px; text-align: right; font-size: 9px; color: #5e7180; }

/* Motion is opt-in only when JS adds .js-enabled. */
.js-enabled .js-reveal { opacity: 0; transform: translateY(16px); transition: opacity .42s ease, transform .42s ease; }
.js-enabled .js-reveal.is-visible { opacity: 1; transform: none; }

/* ページ先頭へ戻る。href="#top" なのでJSが落ちても機能する */
.to-top { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #0f78a8; box-shadow: 0 8px 20px rgba(12,74,109,.28); transition: background .25s ease, box-shadow .25s ease, opacity .3s ease, transform .3s ease, visibility .3s; }
.to-top span { width: 13px; height: 13px; margin-top: 4px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(-45deg); }
.to-top:hover { background: #0b5c85; box-shadow: 0 12px 26px rgba(12,74,109,.34); }
/* JSがある時だけ「スクロールしたら出現」に切り替える */
.js-enabled .to-top { opacity: 0; visibility: hidden; transform: translateY(12px); }
.js-enabled .to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.js-enabled .to-top.is-shown:hover { transform: translateY(-3px); }

@media (max-width: 1100px) {
  .brand { min-width: 360px; }
  .brand-tagline { display: none; }
  .global-nav { gap: 18px; }
  .header-cta { padding-inline: 18px; }
  .faq-note { left: 0; right: 0; gap: 6px; }
  .hero h1 { font-size: 52px; }
  .hero-copy { padding-left: 0; }
  .price-card { grid-template-columns: 40% 60%; padding: 22px; }
  .price-content h3 { font-size: 18px; }
  .flow-grid { gap: 28px; }
  .flow-item:not(:last-child)::after { right: -20px; }
}

@media (max-width: 820px) {
  .container, .container-wide { width: min(calc(100% - 40px), var(--container)); }
  html { scroll-padding-top: 74px; }
  .site-header { height: 74px; }
  .brand { min-width: 0; }
  .brand-mark { width: 42px; height: 40px; }
  .brand-name { font-size: 20px; }
  .brand-en { font-size: 7px; }
  .menu-toggle { position: relative; z-index: 80; display: grid; width: 46px; height: 46px; padding: 11px; border: 0; border-radius: 50%; background: #f0f9fd; cursor: pointer; }
  .menu-toggle span { width: 23px; height: 2px; margin: 3px auto; background: var(--main); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .global-nav { position: fixed; z-index: 70; inset: 0 0 auto auto; width: min(86vw, 390px); height: 100dvh; padding: 108px 30px 30px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: rgba(255,255,255,.99); box-shadow: -20px 0 40px rgba(20,83,113,.12); transform: translateX(110%); transition: transform .25s ease; }
  .global-nav.is-open { transform: translateX(0); }
  .global-nav > a:not(.header-cta) { min-height: 56px; display: flex; align-items: center; border-bottom: 1px solid #e4f0f5; }
  .header-cta { margin-top: 24px; justify-content: center; min-height: 58px; }
  body.menu-open { overflow: hidden; }

  .hero { min-height: auto; padding-bottom: 64px; }
  .hero::after { display: none; }
  .hero-inner { min-height: 0; grid-template-columns: 1fr; }
  .hero-copy { padding: 54px 0 34px; }
  .hero h1 { width: 100%; font-size: clamp(40px, 10vw, 58px); }
  .hero-text { font-size: 16px; }
  .hero-points { gap: 12px; margin-top: 34px; }
  .hero-point { flex: 1; width: auto; height: auto; min-height: 112px; border-radius: 18px; font-size: 12px; }
  .hero-media { min-height: 510px; margin-right: calc(50% - 50vw); }
  .hero-media > img:first-child { clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 96%); object-position: 56% 50%; }
  .hero-handwritten { right: 24px; top: 232px; font-size: 15px; padding: 18px 22px; }
  .hero-dad-badge { right: 18px; bottom: 42px; min-width: 210px; font-size: 13px; }
  .hero-leaf-a { width: 120px; }

  .section { padding-block: 68px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2 { font-size: clamp(27px, 6vw, 34px); }
  .section-heading p { font-size: 16px; }
  .reason-grid, .price-grid, .voice-grid { grid-template-columns: repeat(2, 1fr); }
  .reason-card:last-child, .voice-card:last-child { grid-column: 1 / -1; width: calc(50% - 17px); justify-self: center; }
  .price-card { grid-template-columns: 1fr; }
  .price-photo { aspect-ratio: 3 / 2; }
  .flow-grid { grid-template-columns: repeat(2, 1fr); gap: 54px 28px; }
  .flow-item::after { display: none; }
  .faq-shell { grid-template-columns: 1fr; }
  .faq-side { min-height: 300px; margin-right: calc(50% - 50vw); }
  .faq-photo { height: 270px; }
  .cta-inner { grid-template-columns: 1fr; min-height: 650px; }
  .cta-copy { padding: 65px 0 24px; }
  .cta-visual { min-height: 320px; }
  .cta-family { right: 50%; transform: translateX(50%); bottom: 5px; width: 390px; }
  .cta-bubble { right: 5%; top: 28px; }
  .cta-leaf-small { left: 16%; top: 54px; }
  .footer-inner { grid-template-columns: 1fr auto; }
  .footer-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; justify-content: flex-start; gap: 16px 24px; }
}

@media (max-width: 560px) {
  .container, .container-wide { width: calc(100% - 36px); }
  .brand-name { font-size: 18px; }
  .brand-mark { width: 38px; }
  .hero-copy { padding-top: 44px; }
  .hero h1 { font-size: clamp(38px, 11vw, 48px); line-height: 1.34; }
  .hero-text { font-size: 16px; line-height: 1.8; }
  .hero-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-point { min-height: 112px; padding: 10px 5px; font-size: 10px; }
  .round-icon img { width: 30px; height: 30px; }
  .hero-media { min-height: 430px; }
  .hero-handwritten { top: 192px; right: 4px; font-size: 12px; padding: 14px 16px; }
  .hero-leaf-small { right: 14px; top: 276px; width: 35px; }
  .hero-dad-badge { min-width: 188px; min-height: 68px; right: 12px; bottom: 24px; padding: 8px 14px; font-size: 11px; }
  .hero-dad-badge img { width: 45px; height: 45px; }
  .hero-leaf-b { width: 48px; right: 4px; top: 285px; opacity: .65; }
  .section { padding-block: 60px; }
  .section-heading h2 { gap: 8px; font-size: clamp(25px, 7vw, 31px); }
  #reasons-title { font-size: 22px; gap: 7px; }
  #reasons-title > img:first-child { width: 22px; }
  #reasons-title .spark { width: 14px; }
  .section-heading h2 > img:first-child { width: 31px; }
  .section-heading h2 .spark { width: 18px; }
  .section-heading p, .section-heading p br { font-size: 16px; }
  .reason-grid, .price-grid, .voice-grid, .flow-grid { grid-template-columns: 1fr; }
  .reason-card:last-child, .voice-card:last-child { grid-column: auto; width: auto; }
  .reason-card { max-width: 420px; margin-inline: auto; }
  .reason-card h3 { font-size: 22px; }
  .reason-card p { font-size: 16px; }
  .price-card { padding: 18px; }
  .price-content h3 { font-size: 20px; }
  .price-content ul { font-size: 14px; }
  .flow-grid { gap: 46px; }
  .flow-item { max-width: 420px; margin-inline: auto; }
  .flow-item h3 { font-size: 20px; }
  .flow-item p { font-size: 16px; }
  .voice-card { grid-template-columns: 74px 1fr; padding: 20px; }
  .voice-text { font-size: 16px; }
  .voice-meta { font-size: 12px; }
  .faq-item, .faq-item[open] { border-radius: 18px; }
  .faq-item summary { grid-template-columns: 36px 1fr 22px; min-height: 68px; font-size: 16px; }
  .faq-item > p { padding-left: 60px; font-size: 16px; }
  .faq-note { font-size: 12px; left: 0; }
  .faq-note p { padding: 9px 12px; }
  .faq-side { min-height: 290px; }
  .final-cta { min-height: 670px; }
  .cta-inner { min-height: 670px; }
  .cta-copy { padding-top: 62px; text-align: left; }
  .cta-copy h2 { font-size: clamp(32px, 9vw, 40px); }
  .cta-copy p { font-size: 16px; }
  .main-cta { width: 100%; max-width: 360px; min-height: 72px; font-size: 19px; }
  .cta-family { width: 340px; }
  .cta-bubble { width: 98px; height: 98px; font-size: 12px; }
  .footer-inner { grid-template-columns: 1fr auto; gap: 26px 16px; }
  .footer-nav { font-size: 11px; }
  .copyright { margin-right: 18px; text-align: left; padding-left: 18px; padding-right: 72px; }
  .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .js-enabled .js-reveal { opacity: 1 !important; transform: none !important; }
}