:root {
  --ink: #24383d;
  --muted: #637378;
  --orange: #ee8a3d;
  --orange-dark: #cd632c;
  --cream: #fffaf1;
  --paper: #fffefd;
  --sky: #dff3f3;
  --sky-deep: #b9e2e4;
  --mint: #4f9682;
  --line: #e7dfd2;
  --display: "M PLUS Rounded 1c", sans-serif;
  --body: "Noto Sans JP", sans-serif;
  --shadow: 0 18px 48px rgba(83, 61, 39, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; }
button, label, a { -webkit-tap-highlight-color: transparent; }
.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; }
.mobile-only { display: none; }

.site-header { height: 74px; padding: 0 clamp(22px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; position: absolute; inset: 0 0 auto; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; }
.brand-mark { position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 50% 50% 48% 48%; background: linear-gradient(145deg, #fff 0 45%, #dfecef 46%); box-shadow: inset 0 -2px 5px #c7dadd; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; top: -7px; width: 14px; height: 9px; background: #98b5bf; border-radius: 100% 0 100% 0; transform: rotate(20deg); }
.brand-mark::before { left: 3px; }
.brand-mark::after { right: 1px; transform: scaleX(-1) rotate(20deg); background: #e7bc60; }
.brand-mark i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); left: 8px; top: 12px; box-shadow: 9px 0 var(--ink); }
.brand-name { font: 800 20px/1 var(--display); letter-spacing: .06em; }
.status-chip { font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 9px; border: 1px solid #eab98d; color: #a95727; border-radius: 99px; background: rgba(255,255,255,.62); }
.header-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.hero { min-height: min(820px, 100svh); padding: 134px clamp(24px, 7vw, 110px) 76px; position: relative; display: grid; grid-template-columns: minmax(390px, 630px) minmax(340px, 560px); align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(112deg, #fffdf8 0 49%, #edf8f6 49.2% 100%); }
.hero::after { content: ""; position: absolute; width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; right: -9vw; top: -16vw; border: 1px solid rgba(238,138,61,.25); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.22), 0 0 0 100px rgba(238,138,61,.03); }
.hero-glow { position: absolute; width: 500px; height: 500px; right: 11vw; top: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(255,218,137,.75), rgba(255,242,214,.35) 44%, transparent 68%); filter: blur(2px); }
.hero-copy { position: relative; z-index: 2; padding-right: 30px; }
.eyebrow, .section-kicker { margin: 0 0 14px; color: var(--orange-dark); font-size: 13px; line-height: 1.3; font-weight: 800; letter-spacing: .18em; }
.hero h1, h2, h3 { font-family: var(--display); }
.hero h1 { margin: 0; max-width: 660px; font-size: clamp(38px, 3.8vw, 58px); line-height: 1.34; letter-spacing: .01em; overflow-wrap: anywhere; }
.hero h1 em { color: var(--orange-dark); font-style: normal; position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 1%; right: 1%; bottom: -2px; height: 8px; background: #f7d5a8; z-index: -1; border-radius: 50%; transform: rotate(-1deg); }
.hero-lead { margin: 26px 0 26px; max-width: 620px; font-size: 17px; line-height: 2; color: #4f6064; }
.hero-lead strong { color: var(--ink); white-space: nowrap; }
.primary-button { min-height: 60px; padding: 14px 23px 14px 27px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; color: white; background: linear-gradient(135deg, #ef8c3d, #f5a14f); box-shadow: 0 11px 25px rgba(224,117,43,.27); text-decoration: none; font-weight: 700; font-size: 16px; transition: transform .2s ease, box-shadow .2s ease; }
.primary-button span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--orange-dark); background: white; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(224,117,43,.34); }
.hero-pet { align-self: center; position: relative; z-index: 2; margin: 10px 0 0; display: grid; place-items: center; }
.hero-pet img { width: min(37vw, 500px); border-radius: 48%; filter: drop-shadow(0 24px 22px rgba(63,86,85,.15)); animation: breathe 4s ease-in-out infinite; }
.hero-pet figcaption { margin-top: -26px; position: relative; z-index: 2; }
.hero-pet figcaption span { display: inline-block; padding: 10px 20px; background: rgba(255,255,255,.9); border: 1px solid rgba(222,214,200,.75); box-shadow: 0 8px 24px rgba(53,68,70,.12); border-radius: 99px; font-weight: 700; }
.sun-ring { position: absolute; width: 88%; aspect-ratio: 1; border: 1px solid rgba(234,150,65,.35); border-radius: 50%; box-shadow: inset 0 0 60px rgba(255,225,164,.35); }
.float-leaf { position: absolute; width: 40px; height: 20px; border: 2px solid #92b1a0; border-width: 2px 0 0; border-radius: 100% 0; }
.leaf-one { top: 16%; left: 3%; transform: rotate(-25deg); }
.leaf-two { right: 2%; bottom: 22%; transform: rotate(155deg) scale(.75); }
.hero-note { position: absolute; left: clamp(24px, 7vw, 110px); bottom: 28px; margin: 0; font-size: 13px; color: #687b7d; }
.hero-note span { color: var(--mint); font-size: 9px; margin-right: 7px; }

.section { padding: 120px max(24px, calc((100vw - 1180px) / 2)); }
.section-heading { max-width: 780px; }
.section-heading.centered { text-align: center; margin-inline: auto; }
.section-heading h2, .letter-copy h2, .signup-inner h2 { margin: 0 0 18px; font-size: clamp(31px, 4vw, 48px); line-height: 1.42; letter-spacing: .015em; }
.section-heading > p:last-child { margin: 0; color: var(--muted); }

.how { background: #fff; }
.steps { list-style: none; margin: 70px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 113px; border-top: 2px dashed #d7d2c6; }
.steps li { position: relative; padding: 0 clamp(14px, 2.4vw, 38px); text-align: center; }
.step-number { display: block; color: var(--orange-dark); font: 800 13px/1 var(--display); letter-spacing: .12em; }
.step-art { width: 150px; height: 150px; margin: 20px auto 24px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; background: var(--cream); }
.pet-orbit img { width: 133px; }
.footprint-art { background: var(--sky); }
.footprint-art i { position: absolute; width: 24px; height: 30px; border-radius: 60% 60% 55% 55%; background: #83bfc1; transform: rotate(-27deg); }
.footprint-art i::before { content: ""; position: absolute; top: -10px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; box-shadow: 9px -4px 0 -1px #83bfc1, 18px 0 0 -1px #83bfc1; }
.footprint-art i:nth-child(1) { left: 32px; bottom: 28px; transform: rotate(-25deg) scale(.75); opacity: .55; }
.footprint-art i:nth-child(2) { left: 65px; top: 54px; }
.footprint-art i:nth-child(3) { right: 27px; top: 25px; transform: rotate(-25deg) scale(.72); opacity: .45; }
.mail-art { background: #fff0dc; }
.mail-art i { width: 68px; height: 48px; border: 3px solid #db8950; border-radius: 8px; position: relative; background: white; }
.mail-art i::before, .mail-art i::after { content: ""; position: absolute; top: 7px; width: 40px; border-top: 3px solid #db8950; }
.mail-art i::before { left: 3px; transform: rotate(31deg); }
.mail-art i::after { right: 3px; transform: rotate(-31deg); }
.steps h3 { margin: 0 0 12px; font-size: 21px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }

.pet-section { background: linear-gradient(180deg, #f0f8f7, #e8f4f2 58%, #fbfaf5); }
#pet-pick { margin: 58px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pet-card { min-width: 0; padding: 22px 22px 24px; border-radius: 26px; border: 2px solid transparent; background: rgba(255,255,255,.7); cursor: pointer; text-align: center; position: relative; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.pet-card:hover { transform: translateY(-4px); background: white; }
.pet-card input { position: absolute; opacity: 0; pointer-events: none; }
.pet-card img { width: min(190px, 80%); margin: 0 auto -6px; transition: transform .25s ease; }
.pet-card:hover img { transform: scale(1.04); }
.pet-type { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
.pet-card strong { display: block; font: 800 24px/1.6 var(--display); }
.pet-card q { display: block; margin: 6px auto 0; max-width: 250px; color: #586a6e; font-size: 15px; line-height: 1.7; }
.pet-card q::before, .pet-card q::after { content: none; }
.pet-check { position: absolute; right: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--orange); opacity: 0; transform: scale(.7); transition: .2s ease; }
.pet-card:has(input:focus-visible) { outline: 3px solid #247b83; outline-offset: 3px; }
.pet-card:has(input:checked), body[data-pet="a"] .pet-card-a, body[data-pet="b"] .pet-card-b, body[data-pet="c"] .pet-card-c { border-color: #ee9b59; background: white; box-shadow: 0 15px 36px rgba(78,94,87,.12); transform: translateY(-4px); }
.pet-card:has(input:checked) .pet-check, body[data-pet="a"] .pet-card-a .pet-check, body[data-pet="b"] .pet-card-b .pet-check, body[data-pet="c"] .pet-card-c .pet-check { opacity: 1; transform: scale(1); }
.sample-stage { margin-top: 38px; min-height: 145px; }
.sample-idle { min-height: 145px; padding: 26px; border: 1px dashed #adc9c6; border-radius: 25px; display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; color: var(--muted); background: rgba(255,255,255,.45); }
.sample-idle p { margin: 0; font-size: 15px; }
.tap-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: white; color: var(--orange-dark); font-weight: 800; box-shadow: 0 6px 14px rgba(51,90,84,.1); animation: point 1.7s ease-in-out infinite; }
.pet-sample { display: none; grid-template-columns: .92fr 1.08fr; gap: 24px; align-items: stretch; animation: reveal .45s ease both; }
body[data-state="engaged"] .sample-idle { display: none; }
body[data-pet="a"] .sample-a, body[data-pet="b"] .sample-b, body[data-pet="c"] .sample-c { display: grid; }
.notification-demo, .email-demo { border-radius: 28px; padding: 24px; box-shadow: var(--shadow); }
.notification-demo { background: linear-gradient(145deg, #edf7f7, #fff8ed); border: 8px solid white; }
.demo-label { margin: 0 0 18px; color: var(--orange-dark); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.phone-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin: -4px 5px 14px; }
.notice-card { display: grid; grid-template-columns: 82px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 8px 20px rgba(59,77,76,.1); }
.notice-card img { width: 82px; }
.notice-card small { display: block; color: var(--muted); font-size: 12px; }
.notice-card strong { display: block; font-size: 15px; line-height: 1.65; }
.fake-action { margin-top: 14px; min-height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--orange); color: white; font-weight: 700; }
.email-demo { background: white; border: 1px solid #e7dfd2; }
.email-from { margin: 0; color: var(--muted); font-size: 13px; }
.email-demo h3 { margin: 5px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 20px; }
.email-body { padding: 18px; border-radius: 16px; background: #fff8ec; }
.email-body p { margin: 0 0 12px; font-size: 15px; }
.email-body p:last-child { margin-bottom: 0; }
.email-demo > small { display: block; margin-top: 14px; color: var(--muted); font-size: 12px; }

.letter-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 8vw, 120px); align-items: center; background: #fffaf1; }
.letter-visual { min-height: 490px; position: relative; display: grid; place-items: center; }
.letter-sun { position: absolute; width: 390px; height: 390px; border-radius: 50%; background: radial-gradient(circle, #ffe1a7 0, #fff2d7 48%, rgba(255,255,255,0) 70%); }
.letter-visual img { width: min(360px, 90%); position: absolute; left: 4%; bottom: 0; filter: drop-shadow(0 22px 22px rgba(95,66,41,.12)); }
.sealed-letter { position: absolute; right: 7%; top: 23%; z-index: 2; width: 116px; height: 92px; display: grid; place-items: center; border-radius: 12px; background: white; border: 1px solid #e6d1b4; color: var(--orange-dark); font-size: 37px; box-shadow: var(--shadow); transform: rotate(6deg); }
.letter-copy p { color: #55676a; }
.letter-examples { padding-left: 18px; border-left: 3px solid #efad70; color: var(--ink) !important; font-weight: 700; }

.trust-section { padding: 100px max(24px, calc((100vw - 1180px) / 2)); background: #fff; }
.trust-list { list-style: none; margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.trust-list li { min-height: 170px; padding: 28px 22px; background: white; display: flex; flex-direction: column; justify-content: center; font-size: 15px; line-height: 1.8; font-weight: 500; }
.trust-list span { width: 36px; height: 36px; margin-bottom: 13px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #397c74; font-size: 18px; font-weight: 800; }

.signup-section { position: relative; overflow: hidden; padding: 110px 24px; background: #dff1ef; }
.signup-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 90%, rgba(255,255,255,.75), transparent 32%), radial-gradient(circle at 90% 15%, rgba(255,216,142,.55), transparent 25%); }
.signup-inner { position: relative; z-index: 2; max-width: 790px; margin: 0 auto; }
.signup-inner > p:not(.section-kicker) { color: #526a6c; }
.signup-lead { margin: 28px 0 12px; color: var(--ink) !important; font: 700 19px/1.7 var(--display); }
.signup-lead span { display: inline-block; margin-left: 14px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.72); color: #52706e; font: 500 13px/1.5 var(--body); }
#signup-form { margin-top: 34px; }
#signup-form label { display: block; margin-bottom: 7px; font-weight: 700; font-size: 14px; }
.form-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
#email-input { width: 100%; min-height: 60px; border: 2px solid transparent; border-radius: 16px; padding: 0 18px; background: white; color: var(--ink); font-size: 16px; outline: none; box-shadow: 0 8px 20px rgba(49,91,84,.08); }
#email-input:focus { border-color: #549b91; box-shadow: 0 0 0 4px rgba(84,155,145,.16); }
#signup-submit { min-height: 60px; padding: 0 25px; border: 0; border-radius: 16px; background: var(--orange); color: white; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px rgba(200,100,38,.2); }
#signup-done, #signup-error { display: none; margin: 0; padding: 18px 20px; border-radius: 16px; font-weight: 700; }
#signup-done { background: white; color: #337565; }
#signup-error { margin-top: 10px; background: #fff0ed; color: #9b3e32; }
#signup-form.is-done label, #signup-form.is-done .form-row { display: none; }
#signup-form.is-done #signup-done, #signup-error.is-visible { display: block; }
.form-note { margin-top: 14px; max-width: 720px; font-size: 12px; line-height: 1.8; }
.signup-pet { position: absolute; width: 270px; right: max(-40px, calc((100vw - 1180px) / 2 - 200px)); bottom: -35px; opacity: .9; transform: rotate(-5deg); }
.want-block { display: none; margin-top: 28px; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.65); }
.want-block.is-visible { display: block; animation: reveal .35s ease both; }
.want-question > p { margin: 0 0 14px; font-weight: 700; }
.want-question small { font-size: 12px; font-weight: 500; }
.want-question > div { display: flex; gap: 9px; flex-wrap: wrap; }
.want-question button { min-height: 46px; padding: 0 19px; border: 1px solid #7aa9a3; border-radius: 99px; background: white; color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.want-done { display: none; margin: 0; color: #337565; font-weight: 700; }
.want-done.is-visible { display: block; }
.want-block.is-answered .want-question { display: none; }

footer { padding: 52px max(24px, calc((100vw - 1180px) / 2)); background: #263b3e; color: #ecf4f2; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.footer-brand { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 19px/1 var(--display); }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 11px 25px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; color: #d7e5e3; text-underline-offset: 4px; }
footer > small { font-size: 12px; color: #b9cbc8; }

@keyframes breathe { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes point { 0%,100% { transform: translateY(4px); } 50% { transform: translateY(-3px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .mobile-only { display: initial; }
  .site-header { height: 60px; padding: 0 18px; }
  .header-link { display: none; }
  .brand-name { font-size: 18px; }
  .brand-mark { width: 25px; height: 25px; }
  .hero { min-height: 667px; padding: 84px 22px 28px; display: block; background: linear-gradient(174deg, #fffdf8 0 64%, #eaf7f5 64.2%); }
  .hero::after { width: 320px; height: 320px; right: -180px; top: -120px; }
  .hero-glow { width: 270px; height: 270px; right: -30px; top: auto; bottom: -34px; }
  .hero-copy { padding: 0; }
  .eyebrow { margin-bottom: 8px; font-size: 12px; }
  .hero h1 { max-width: 100%; font-size: clamp(27px, 7.8vw, 32px); line-height: 1.35; letter-spacing: 0; word-break: normal; }
  .hero-lead { margin: 15px 0 17px; font-size: 15px; line-height: 1.78; }
  .primary-button { width: 100%; min-height: 56px; font-size: 15px; padding: 11px 14px 11px 18px; border-radius: 15px; gap: 8px; }
  .hero-pet { position: absolute; width: 188px; right: 2px; bottom: -7px; margin: 0; }
  .hero-pet img { width: 188px; }
  .sun-ring { width: 175px; }
  .hero-pet figcaption { display: none; }
  .float-leaf { display: none; }
  .hero-note { left: 22px; bottom: 24px; width: 160px; line-height: 1.55; font-size: 12px; }
  .section { padding: 82px 20px; }
  .section-heading h2, .letter-copy h2, .signup-inner h2 { font-size: 29px; line-height: 1.45; }
  .section-heading > p:last-child { font-size: 15px; }
  .steps { grid-template-columns: 1fr; margin-top: 44px; gap: 0; }
  .steps::before { left: 58px; right: auto; top: 20px; bottom: 56px; border-top: 0; border-left: 2px dashed #d7d2c6; }
  .steps li { min-height: 170px; padding: 0 0 30px; display: grid; grid-template-columns: 116px 1fr; align-items: center; text-align: left; }
  .step-number { position: absolute; left: 0; top: 0; }
  .step-art { width: 102px; height: 102px; margin: 14px 14px 0 0; }
  .pet-orbit img { width: 95px; }
  .footprint-art i:nth-child(1) { left: 18px; bottom: 18px; }
  .footprint-art i:nth-child(2) { left: 43px; top: 38px; }
  .footprint-art i:nth-child(3) { right: 11px; top: 15px; }
  .mail-art i { transform: scale(.8); }
  .steps h3 { font-size: 19px; }
  .steps p { font-size: 15px; line-height: 1.75; }
  #pet-pick { margin-top: 36px; grid-template-columns: 1fr; gap: 9px; }
  .pet-card { min-height: 132px; padding: 12px 42px 12px 132px; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
  .pet-card img { position: absolute; left: 8px; top: 6px; width: 116px; max-width: none; }
  .pet-card strong { font-size: 20px; line-height: 1.45; }
  .pet-type { font-size: 12px; }
  .pet-card q { display: block; margin: 3px 0 0; font-size: 15px; line-height: 1.55; }
  .pet-check { width: 27px; height: 27px; top: 12px; right: 12px; font-size: 12px; }
  .sample-stage { margin-top: 22px; }
  .sample-idle { padding: 19px 15px; gap: 12px; min-height: 122px; }
  .sample-idle p { font-size: 14px; }
  .pet-sample { grid-template-columns: 1fr; gap: 14px; }
  .notification-demo, .email-demo { padding: 17px; border-radius: 22px; }
  .notice-card { grid-template-columns: 65px 1fr; gap: 10px; padding: 10px; }
  .notice-card img { width: 65px; }
  .notice-card strong { font-size: 14px; line-height: 1.55; }
  .email-demo h3 { font-size: 18px; line-height: 1.55; }
  .letter-section { grid-template-columns: 1fr; gap: 28px; }
  .letter-visual { min-height: 280px; order: 2; }
  .letter-sun { width: 280px; height: 280px; }
  .letter-visual img { width: 250px; left: -7px; }
  .sealed-letter { width: 92px; height: 70px; right: 6%; top: 17%; }
  .trust-section { padding: 82px 20px; }
  .trust-list { grid-template-columns: 1fr 1fr; margin-top: 34px; border-radius: 20px; }
  .trust-list li { min-height: 180px; padding: 20px 16px; font-size: 15px; }
  .signup-section { padding: 82px 20px 116px; }
  .signup-lead span { display: block; width: max-content; max-width: 100%; margin: 9px 0 0; }
  .form-row { grid-template-columns: 1fr; }
  #signup-submit { width: 100%; min-height: 58px; }
  .signup-pet { width: 150px; right: -28px; bottom: -24px; opacity: .45; }
  .want-question > div { display: grid; grid-template-columns: 1fr; }
  .want-question button { width: 100%; }
  footer { padding: 42px 20px; grid-template-columns: 1fr; gap: 13px; }
  .footer-links { justify-content: flex-start; gap: 3px 18px; }
}

@media (max-width: 520px) {
  .hero-copy { width: min(340px, calc(100vw - 44px)); }
  .hero-pet { left: 225px; right: auto; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .hero { padding-top: 75px; }
  .hero h1 { font-size: 27px; }
  .hero-lead { font-size: 15px; line-height: 1.68; margin: 12px 0 14px; }
  .hero-pet { width: 160px; }
  .hero-pet img { width: 160px; }
  .sun-ring { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Static state gallery hooks used by preview-states.html. */
.state-frame[data-pet="a"] .sample-a, .state-frame[data-pet="b"] .sample-b, .state-frame[data-pet="c"] .sample-c { display: grid; }
.state-frame[data-state="engaged"] .sample-idle { display: none; }
.state-frame[data-pet="a"] .pet-card-a, .state-frame[data-pet="b"] .pet-card-b, .state-frame[data-pet="c"] .pet-card-c { border-color: #ee9b59; background: white; }

/* 広告の印で入口を切り替える: ギャグ調 (?ad=a3 / a4) は「手紙」を先に。JS が body[data-variant="letter"] を付ける (2026-11-04) */
.variant-letter { display: none; }
body[data-variant="letter"] .variant-default { display: none; }
body[data-variant="letter"] .variant-letter { display: block; }
body[data-variant="letter"] figcaption .variant-letter { display: inline; }