:root {
  --black: #111111;
  --charcoal: #191919;
  --paper: #ffffff;
  --soft: #f7f7f5;
  --line: #deded9;
  --muted: #6b6b6b;
  --brand-green: #06c167;
  --green-ink: #067a45;
  --green: var(--green-ink);
  --green-action: var(--brand-green);
  --green-wash: #eaf9f0;
  --green-line: #78bd96;
  --side: #ecece8;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--side);
  color: var(--black);
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.page-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,.06);
  position: relative;
}
.site-header {
  height: 60px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  position: relative;
  z-index: 50;
}
.brand { display: flex; align-items: center; }
.brand-wordmark { width: 104px; height: auto; display: block; flex: 0 0 auto; }
.brand-divider { width: 1px; height: 18px; margin-left: 18px; margin-right: 10px; background: #ccc; }
.brand-caption { font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.menu-button {
  width: 44px; height: 44px; border: 0; background: transparent; padding: 11px 8px;
  display: flex; flex-direction: column; justify-content: center; gap: 7px; cursor: pointer;
}
.menu-button span { display: block; height: 1.5px; width: 25px; background: #111; transition: transform .3s, opacity .3s; }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.global-menu {
  position: fixed; inset: 0; background: #fff; z-index: 40; visibility: hidden; opacity: 0;
  transition: opacity .25s, visibility .25s;
}
.global-menu.open { visibility: visible; opacity: 1; }
.menu-inner { width: min(100%, 480px); margin: 0 auto; padding: 120px 30px 40px; }
.menu-inner a { display: block; border-bottom: 1px solid var(--line); padding: 18px 0; font-size: 22px; font-weight: 700; }
.desktop-fv { display: block; }
.eyebrow { margin: 0 0 22px; font-size: 10px; line-height: 1; letter-spacing: .18em; font-weight: 800; color: var(--muted); }
.section-pad { padding: 104px 26px; }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 54px; font-size: clamp(34px, 10vw, 44px); line-height: 1.32; letter-spacing: -.055em; font-weight: 800; }
.button {
  min-height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; font-size: 15px; font-weight: 700; letter-spacing: .01em; border: 1px solid transparent;
  transition: background-color .2s ease, transform .2s ease;
}
.button:active { transform: translateY(1px); }
.button span, .text-link span { font-family: Arial, sans-serif; font-size: 27px; font-weight: 400; line-height: 1; }
.button-primary { background: #000; color: #fff; }
.button-primary span { color: var(--brand-green); }
.button-inverse { border-bottom-color: var(--brand-green); background: #fff; color: #111; }
.button-inverse span { color: var(--green-ink); }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.hero { padding-bottom: 22px; position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fafafa 0%, #f0fbf5 100%); }
.hero-visual { height: clamp(360px, 45svh, 400px); position: relative; z-index: 0; overflow: hidden; isolation: isolate; background: #e7edef; }
.hero-photo { position: absolute; inset: 0; z-index: -3; display: block; margin: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 35%; filter: brightness(1.01) saturate(.96) contrast(.99); }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(250,250,248,.84) 0%, rgba(250,250,248,.62) 37%, rgba(250,250,248,.08) 61%, rgba(250,250,248,0) 100%), linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.42) 78%, #f7f8f6 100%); }
.hero-content { width: 67%; padding: 25px 0 0 23px; position: relative; z-index: 1; }
.hero-kicker { width: max-content; max-width: 100%; margin: 0 0 16px; padding: 7px 12px 8px; border: 1px solid rgba(6,193,103,.35); border-radius: 999px; color: #111; background: rgba(255,255,255,.92); box-shadow: 0 4px 16px rgba(0,0,0,.05); font-size: 9px; font-weight: 800; letter-spacing: .045em; }
.hero-kicker { animation: hero-copy-enter .62s .08s cubic-bezier(.22,.78,.24,1) both; }
.hero h1 { width: 100%; max-width: 305px; margin: 0; color: #0d0f0e; font-size: clamp(34px, 9.5vw, 44px); line-height: 1.24; letter-spacing: -.045em; font-weight: 900; text-align: left; text-shadow: 0 1px 0 #fff, 0 4px 18px rgba(255,255,255,.48); animation: hero-copy-enter .72s .16s cubic-bezier(.22,.78,.24,1) both; }
.hero-line { display: block; width: max-content; max-width: 100%; white-space: nowrap; }
.hero h1::after { content: ""; display: block; width: 92px; height: 3px; margin-top: 14px; border-radius: 999px; background: var(--green-action); transform-origin: left; animation: hero-line-draw .58s .7s cubic-bezier(.22,.78,.24,1) both; }
.hero-offer-card { position: relative; z-index: 3; margin: -116px 16px 0; overflow: hidden; background: #fff; border: 1px solid #e5e8e6; border-radius: 20px; box-shadow: 0 16px 40px rgba(20,50,40,.06); animation: hero-card-enter .72s .28s cubic-bezier(.22,.78,.24,1) both; }
.hero-offer-link { display: block; }
.hero-offer-art { width: 100%; height: auto; display: block; }
.hero-actions { padding: 10px 20px 22px; display: grid; gap: 13px; color: #111; background: transparent; text-align: center; }
.hero-actions .button { height: clamp(76px, 18vw, 82px); min-height: 0; position: relative; overflow: hidden; justify-content: center; border-radius: 13px; color: #000; background: var(--brand-green); box-shadow: 0 8px 20px rgba(0,117,62,.2); animation: cta-breathe 3.6s ease-in-out infinite; }
.hero-actions .button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.3) 46%, transparent 67%); transform: translateX(-125%); animation: cta-sheen .78s 1.05s cubic-bezier(.22,.78,.24,1) both; pointer-events: none; }
.hero-actions .button > span { position: absolute; right: 20px; }
.hero-actions .button .button-arrow { color: #000; font-size: 19px; animation: arrow-nudge 1.8s ease-in-out infinite; }
.hero-actions .button:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0,117,62,.16); }
.hero-actions .text-link { justify-self: center; gap: 7px; color: #39423e; font-size: 11px; font-weight: 600; text-decoration-color: #aeb7b2; }
.hero-actions .text-link span { color: var(--green-ink); font-size: 15px; }
.hero-actions small { display: block; text-align: center; font-size: 10px; line-height: 1.55; color: #777; }

.metric-section { min-height: 0; padding: 64px 26px 58px; display: flex; flex-direction: column; justify-content: center; position: relative; background: linear-gradient(150deg, #fff 62%, var(--green-wash) 100%); }
.metric-section .eyebrow { color: var(--green); }
.mega-number { margin: 0; line-height: .88; letter-spacing: -.08em; }
.mega-number strong { display: block; font-size: clamp(68px, 20vw, 92px); font-weight: 800; }
.mega-number span { display: block; font-size: 22px; font-weight: 700; margin: 14px 0 0 4px; letter-spacing: -.04em; }
.metric-rule { width: 68%; height: 1px; background: var(--green-line); margin: 29px 0 18px; transform-origin: left; }
.quiet-copy { display: grid; gap: 11px; font-size: 13px; line-height: 1.85; color: var(--muted); }
.quiet-copy strong { color: #111; font-size: 18px; line-height: 1.7; letter-spacing: -.025em; }
.quiet-copy span { font-size: 11px; line-height: 1.8; }

.accent-mark {
  padding: 0 .04em .04em;
  position: relative;
  z-index: 0;
  background-image: linear-gradient(90deg, rgba(6,193,103,.27), rgba(6,193,103,.14));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0 24%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size .62s .22s cubic-bezier(.22,.78,.24,1);
}
.accent-mark-light { background-image: linear-gradient(90deg, var(--brand-green), rgba(6,193,103,.48)); }
.reveal.in-view .accent-mark,
.motion-group.in-view .accent-mark,
.metric-section.in-view .accent-mark { background-size: 100% 24%; }
.metric-section.in-view .metric-rule { animation: emphasis-line .7s .18s cubic-bezier(.22,.78,.24,1) both; }

.worries { background: var(--soft); padding-top: 50px; padding-bottom: 48px; }
.worries .eyebrow { margin-bottom: 15px; color: var(--green); }
.worries h2 { margin-bottom: 31px; font-size: clamp(32px, 8.8vw, 39px); }
.worry-editorial { margin: 0 -26px; }
.worry-photo { height: 326px; background: #d5d1c9 url("assets/worry-owner.jpg") 50% center / cover no-repeat; }
.worry-story { width: calc(100% - 42px); margin: -74px 0 0 42px; padding: 20px 26px 25px; position: relative; background: var(--soft); border-top: 3px solid var(--green); }
.worry-story::before { display: none; }
.worry-story p { margin: 0; }
.story-first { font-size: clamp(14px, 4vw, 18px); line-height: 1.5; }
.story-first strong { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.3; letter-spacing: -.055em; }
.story-turn { display: block; margin: 18px 0 6px; font-size: 11px; font-weight: 700; color: var(--green); }
.story-after { font-size: 16px; font-weight: 600; line-height: 1.9; letter-spacing: -.025em; }
.answer { margin-top: 34px; padding: 13px 0 2px; display: flex; gap: 22px; align-items: flex-start; border-bottom: 1px solid #d7dfdb; }
.answer-line { width: 34px; height: 2px; background: var(--green); margin-top: 9px; flex: 0 0 auto; }
.answer p { margin-bottom: 18px; font-size: 17px; line-height: 1.8; }
.answer strong { font-size: 29px; line-height: 1.55; letter-spacing: -.05em; }

.comparison { padding-top: 58px; padding-bottom: 68px; background: linear-gradient(180deg, #fff 0%, #f7faf8 100%); }
.comparison .eyebrow { color: var(--green); }
.comparison h2 { margin-bottom: 36px; }
.compare-grid { margin: 0 -4px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #d8dfdb; border-radius: 22px; background: #fff; box-shadow: 0 22px 55px rgba(21,56,45,.09); }
.compare-column { min-width: 0; padding: 28px 14px 30px; position: relative; }
.compare-column + .compare-column { padding-left: 15px; padding-right: 14px; border-left: 1px solid #acd9bf; background: var(--green-wash); }
.compare-head { min-height: 72px; margin: 0 0 21px; padding-bottom: 16px; border-bottom: 1px solid #d4dcd8; }
.compare-head > span { display: block; margin-bottom: 8px; color: #8a928e; font-size: 7px; line-height: 1; font-weight: 800; letter-spacing: .15em; }
.compare-column h3 { margin: 0; color: #151816; font-size: clamp(13px, 3.5vw, 16px); line-height: 1.45; font-weight: 800; letter-spacing: -.035em; }
.compare-us .compare-head { border-bottom-color: #b8cbc3; }
.compare-us .compare-head > span { color: var(--green); }
.compare-column ol { min-height: 290px; list-style: none; padding: 0; margin: 0; }
.compare-column li { position: relative; min-height: 58px; display: flex; align-items: flex-start; gap: 9px; color: #6f7773; font-size: clamp(10px, 2.8vw, 12px); font-weight: 600; line-height: 1.55; }
.compare-column li i { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #c0c8c4; border-radius: 50%; color: #89908d; background: #fff; font-family: "Montserrat", sans-serif; font-size: 6px; line-height: 1; font-style: normal; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 3px 10px rgba(20,50,40,.05); }
.compare-column li > span { padding-top: 1px; }
.compare-column li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 25px; height: 25px; width: 1px; background: #c4cbc7; }
.compare-column li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 47px; width: 6px; height: 6px; border-right: 1px solid #aeb7b2; border-bottom: 1px solid #aeb7b2; transform: rotate(45deg); }
.compare-self li:last-child { color: #363d39; font-weight: 700; }
.compare-us li { color: #19231f; font-weight: 700; }
.compare-us li i { color: #fff; background: #000; border-color: #000; box-shadow: 0 5px 12px rgba(0,0,0,.14); }
.compare-us li:not(:last-child)::after { background: var(--brand-green); }
.compare-us li:not(:last-child)::before { border-color: var(--green); }
.compare-us ol { display: grid; grid-template-rows: 52px 180px 58px; }
.compare-us ol > li:first-child::after { z-index: 2; height: 25px; }
.compare-us ol > li:first-child::before { z-index: 2; top: 47px; }
.compare-us .support-flow { min-height: 0; margin: 8px 4px 40px; padding: 20px 12px 17px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; isolation: isolate; border: 1px solid #000; border-top: 3px solid var(--brand-green); border-radius: 12px; color: #fff; background: linear-gradient(145deg, #171717 0%, #050505 100%); box-shadow: 0 10px 22px rgba(0,0,0,.15); text-align: center; }
.compare-us .support-flow::before { display: none; }
.compare-us .support-flow::after { display: none; }
.compare-us .support-flow i { position: absolute; top: 6px; left: 8px; z-index: 1; width: 21px; height: 21px; color: #000; background: var(--brand-green); border-color: transparent; box-shadow: 0 3px 9px rgba(0,0,0,.14); }
.compare-us .support-flow span { padding: 0; color: #bfc8c3; font-size: 9px; line-height: 1.7; font-weight: 600; letter-spacing: .04em; text-align: center; }
.support-flow b { display: block; margin-top: 5px; color: #fff; font-size: clamp(16px, 4.6vw, 20px); line-height: 1.4; font-weight: 800; letter-spacing: -.045em; }
.compare-us .goal { min-height: 58px; margin-top: 0; font-weight: 800; }
.compare-us .goal::before { content: ""; position: absolute; left: 10px; top: -36px; width: 1px; height: 25px; border: 0; background: var(--brand-green); transform: none; }
.compare-us .goal::after { content: ""; position: absolute; left: 7px; top: -14px; width: 6px; height: 6px; border-right: 1px solid var(--green); border-bottom: 1px solid var(--green); background: transparent; transform: rotate(45deg); }
.recommended { position: absolute; z-index: 2; top: 12px; right: 10px; padding: 5px 8px 6px; border: 1px solid var(--brand-green); border-radius: 999px; color: #000; background: rgba(255,255,255,.92); font-size: 7px; line-height: 1; font-weight: 800; letter-spacing: .08em; box-shadow: 0 5px 14px rgba(0,0,0,.06); }
.section-closing { margin: 44px 0 0; font-size: 19px; line-height: 1.85; }
.section-closing strong { font-size: 28px; letter-spacing: -.045em; }

.reasons { background: var(--soft); }
.reasons-intro { padding-top: 62px; padding-bottom: 56px; background: #000; color: #fff; }
.reasons-intro .eyebrow { color: var(--brand-green); }
.reasons-intro h2 { margin: 0; }
.reasons-heading { display: grid; gap: 13px; }
.reasons-logo { width: clamp(166px, 47vw, 202px); display: block; line-height: 0; }
.reasons-logo img { width: 100%; height: auto; display: block; filter: brightness(0) invert(1); }
.reason { min-height: 390px; padding: 42px 26px 38px; border-top: 1px solid #ced8d3; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.reason-distance { min-height: 420px; background: var(--green-wash); }
.reason-shops { min-height: 390px; background: #fff; }
.reason-users { min-height: 405px; background: var(--green-wash); }
.reason-pay { min-height: 370px; background: #fff; }
.reason-index { font-size: 9px; letter-spacing: .15em; color: var(--green); margin-bottom: 18px; }
.reason-title { margin-bottom: 0; font-size: 18px; font-weight: 600; line-height: 1.55; }
.reason-stat-label { width: max-content; margin: 15px 0 0; padding: 5px 9px 6px; border-left: 3px solid var(--brand-green); color: #27483b; background: rgba(255,255,255,.66); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .06em; }
.reason strong { margin-top: 8px; font-size: 30px; letter-spacing: -.06em; line-height: 1; position: relative; z-index: 2; font-variant-numeric: tabular-nums; }
.reason strong span { font-size: clamp(96px, 29vw, 132px); font-weight: 800; }
.reason-benefit { width: 73%; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--green-line); position: relative; z-index: 3; font-size: 12px; font-weight: 500; line-height: 1.8; color: #4f5e59; }
.reason-visual { position: absolute; overflow: visible; fill: none; stroke: var(--green-line); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.distance-visual { width: 220px; height: 220px; right: -82px; bottom: 54px; }
.distance-visual > path { stroke-dasharray: 4 5; }
.distance-visual .visual-solid { fill: var(--green-action); stroke: #fff; stroke-width: 5; }
.distance-visual .visual-route { stroke: var(--green-action); stroke-width: 2; stroke-dasharray: 3 4; }
.shop-pattern { width: 142px; height: 108px; right: 9px; bottom: 55px; stroke-width: 1.5; }
.shop-muted { opacity: .38; }
.shop-active { color: var(--green-action); stroke: currentColor; opacity: .92; }
.people-visual { width: 166px; height: 148px; right: -2px; bottom: 44px; opacity: .8; }
.people-visual > path { stroke-dasharray: 3 5; }
.people-visual .visual-dots { fill: var(--green-action); stroke: #fff; stroke-width: 2; }
.reason-pay strong { font-size: clamp(82px, 24vw, 110px); }
.reason-pay .reason-benefit { width: 100%; }
.week-line { display: grid; grid-template-columns: repeat(7,1fr); order: 2; margin-top: 22px; border-top: 1px solid #b7c5c0; }
.week-line i { padding-top: 11px; font-size: 8px; font-style: normal; text-align: center; color: #888; }
.week-line i:last-child { border-top: 4px solid var(--green); margin-top: -1px; color: var(--green); font-weight: 800; padding-top: 8px; }
.reasons-end { min-height: 0; padding-top: 60px; padding-bottom: 62px; display: flex; align-items: center; background: #fff; }
.reasons-end p { margin: 0; font-size: 30px; line-height: 1.6; letter-spacing: -.05em; }
.reasons-end strong { font-size: 49px; }

.benefits { background: #111; color: #fff; padding-top: 72px; padding-bottom: 76px; }
.benefits .eyebrow { color: var(--brand-green); }
.benefits h2 { margin-bottom: 44px; font-size: clamp(40px, 11vw, 50px); }
.benefit-photo { height: 250px; margin: -8px -26px 36px; position: relative; overflow: hidden; background: #242824; }
.benefit-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.benefit-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 56% center; }
.benefit-photo figcaption { position: absolute; z-index: 1; right: 22px; bottom: 20px; left: 22px; margin: 0; color: #fff; font-size: 15px; line-height: 1.55; font-weight: 700; letter-spacing: -.02em; }
.benefit-photo figcaption span { display: block; margin-bottom: 7px; color: var(--brand-green); font-family: "Montserrat", sans-serif; font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: .17em; }
.benefit-list { border-top: 1px solid #4d4d4d; }
.benefit-list > div { min-height: 92px; border-bottom: 1px solid #3d3d3d; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.benefit-list p { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.benefit-list p small { display: block; color: #b8b8b8; font-size: 11px; line-height: 1.4; margin-top: 6px; font-weight: 600; }
.benefit-list span { display: flex; align-items: baseline; gap: 13px; white-space: nowrap; }
.benefit-list s { color: #a7a7a7; font-size: 12px; text-decoration-thickness: 1px; }
.benefit-list b { width: 55px; color: var(--brand-green); text-align: right; font-size: 34px; line-height: 1; letter-spacing: -.06em; }
.benefit-note { color: #aaa; font-size: 10px; line-height: 1.7; margin: 20px 0 40px; }
.benefit-actions { display: grid; gap: 16px; }
.text-link-light { color: #fff; text-decoration-color: var(--brand-green); justify-self: center; }
.text-link-light span { color: var(--brand-green); }

.faq { padding-top: 72px; padding-bottom: 72px; background: #fff; }
.faq h2 { margin-bottom: 38px; }
.faq-list { border-top: 1px solid #8f9e98; }
.faq-list details { border-bottom: 1px solid #d7ddda; }
.faq-list summary { list-style: none; min-height: 84px; padding: 21px 36px 21px 0; display: grid; grid-template-columns: 32px 1fr; align-items: center; position: relative; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.75; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span, .faq-answer > span { color: var(--green); font-size: 11px; font-weight: 800; align-self: start; margin-top: 3px; }
.faq-list summary i { position: absolute; right: 2px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; background: var(--green); left: 0; top: 8px; width: 17px; height: 1px; transition: transform .25s; }
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i::after { transform: rotate(0); }
.faq-answer { display: grid; grid-template-columns: 32px 1fr; padding: 0 32px 34px 0; color: #4f4f4b; }
.faq-answer p { font-size: 13px; line-height: 2; margin: 0; }
.faq-answer small { display: block; margin-top: 10px; font-size: 9px; line-height: 1.75; color: #888; }

.area-check { padding-top: 66px; padding-bottom: 70px; position: relative; overflow: hidden; background: #000; color: #fff; }
.area-check .eyebrow { margin-bottom: 18px; color: var(--brand-green); }
.area-check h2 { margin-bottom: 22px; color: #fff; font-size: clamp(38px, 10.5vw, 48px); line-height: 1.25; }
.area-check h2 span { color: var(--brand-green); }
.area-check-lead { margin: 0 0 28px; color: #d9dddb; font-size: 14px; line-height: 1.85; font-weight: 500; }
.area-checker { padding: 28px 22px 23px; border: 1px solid #dfe4e1; border-radius: 17px; background: #fff; color: #111; box-shadow: 0 18px 44px rgba(19,37,29,.08); transition: border-color .2s ease, box-shadow .2s ease; }
.area-checker:focus-within { border-color: #8bcaa7; box-shadow: 0 18px 44px rgba(19,37,29,.1), 0 0 0 4px rgba(6,193,103,.12); }
.area-checker.is-checked { border-color: var(--brand-green); }
.area-checker > label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #17211d; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.area-checker > label > span { padding: 5px 8px 6px; border: 1px solid #b9dfca; border-radius: 999px; color: var(--green-ink); background: #fff; font-size: 9px; line-height: 1; font-weight: 800; white-space: nowrap; }
.zip-input-wrap { margin-top: 13px; position: relative; display: flex; align-items: center; }
.zip-input-wrap > span { position: absolute; z-index: 1; inset: 2px auto 2px 2px; width: 50px; display: grid; place-items: center; border-right: 1px solid #d8dfdb; border-radius: 10px 0 0 10px; color: #111; background: #f5f6f5; font-size: 16px; font-weight: 800; pointer-events: none; }
.zip-input-wrap input { width: 100%; height: 70px; margin: 0; padding: 0 48px 0 65px; border: 2px solid #71847b; border-radius: 12px; background: #fff; color: #111714; font-family: "Montserrat", "Noto Sans JP", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: .08em; outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.zip-input-wrap input:hover { border-color: #111; }
.zip-input-wrap input:focus { border-color: var(--green-ink); box-shadow: 0 0 0 4px rgba(6,193,103,.2); }
.zip-status { position: absolute; right: 16px; width: 22px; height: 22px; border: 1px solid #b9c7c0; border-radius: 50%; opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease; }
.area-checker.is-checked .zip-status { opacity: 1; transform: scale(1); border-color: var(--brand-green); background: var(--brand-green); }
.area-checker.is-checked .zip-status::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 10px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); }
.area-check-hint { margin: 10px 0 0; color: #5b6862; font-size: 10px; line-height: 1.65; }
.area-result.is-entering { animation: result-enter .52s cubic-bezier(.22,.78,.24,1) both; }

.contact { padding-top: 74px; padding-bottom: 82px; border-top: 1px solid #cfeada; background: var(--green-wash); }
.contact .eyebrow { color: var(--green); }
.contact h2 { margin-bottom: 26px; font-size: clamp(31px, 8.5vw, 39px); }
.contact-promise { margin: 0 0 32px; display: grid; gap: 13px; }
.contact-promise > .contact-offer-lead { display: flex; align-items: center; gap: 10px; color: #17211d; font-size: 17px; line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.contact-offer-lead img { width: clamp(128px, 36vw, 154px); height: auto; display: block; flex: 0 0 auto; }
.contact-promise > .contact-offer-main { color: #17211d; font-size: 22px; line-height: 1.55; font-weight: 600; letter-spacing: -.035em; }
.contact-offer-main strong { font-weight: 900; }
.contact form { padding: 26px 20px 24px; display: grid; gap: 25px; border: 1px solid #dce3df; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(24,61,51,.07); }
.contact label { font-size: 12px; font-weight: 700; letter-spacing: .015em; }
.contact label > span { margin-left: 7px; color: var(--green); font-size: 8px; font-weight: 800; vertical-align: 0; }
.contact input { width: 100%; height: 64px; margin-top: 11px; border: 1px solid #d0d6d2; border-radius: 10px; background: #fff; padding: 0 17px; font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s; }
.contact input:focus { border-color: var(--green-ink); box-shadow: 0 0 0 4px rgba(6,193,103,.16); }
.contact input::placeholder { color: #b0b0ac; }
.area-result { margin: 20px -22px -23px; padding: 18px 22px 20px; border: 0; border-top: 1px solid #dfe4e1; border-radius: 0 0 16px 16px; background: #fff; color: #111; }
.area-result[hidden] { display: none; }
.area-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.area-result-meta > span { display: inline-flex; align-items: center; gap: 8px; position: relative; color: #33413a; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .06em; }
.area-result-meta > span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 4px rgba(6,193,103,.11); }
.area-result-meta > span::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: rotate(45deg); }
.area-result-city { min-width: 0; overflow: hidden; color: #52615b; font-size: 11px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.area-result-copy { display: none; padding-top: 14px; text-align: left; }
.area-result[data-tier="gain"] .result-gain,
.area-result[data-tier="normal"] .result-normal,
.area-result[data-tier="out"] .result-out,
.area-result[data-tier="unknown"] .result-unknown { display: block; }
.area-result-copy h3 { margin: 0; color: #101713; font-size: 24px; line-height: 1.4; letter-spacing: -.04em; }
.result-special { margin: 10px 0 14px; padding: 8px 0 8px 12px; border-left: 3px solid var(--brand-green); color: #59635e; font-size: 11px; line-height: 1.7; }
.result-special strong { color: #111; font-size: 14px; line-height: inherit; letter-spacing: -.02em; }
.area-result-perks { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; list-style: none; }
.area-result-perks:empty { display: none; }
.area-result-perks li { min-width: 0; min-height: 38px; padding: 7px 4px; display: grid; place-items: center; border: 1px solid #cee7d9; border-radius: 8px; color: #123f31; background: linear-gradient(145deg, #fbfefc 0%, #edf8f2 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 10px rgba(23,76,60,.07); font-size: 10px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; text-align: center; white-space: nowrap; }
.result-action { margin-top: 13px; padding-top: 13px; border-top: 1px solid #e5e8e6; }
.result-guidance { margin: 0 0 11px; color: #46524c; font-size: 11px; line-height: 1.7; font-weight: 600; }
.result-support { margin: -3px 0 11px; color: #111; font-size: 11px; line-height: 1.7; font-weight: 700; }
.area-result-copy .button { min-height: 60px; position: relative; justify-content: center; padding: 0 42px 0 16px; border-radius: 10px; color: #000; background: var(--brand-green); font-size: 14px; box-shadow: 0 8px 18px rgba(0,117,62,.17); }
.area-result-copy .button span { position: absolute; right: 17px; color: #000; font-size: 18px; }
.area-result > small { display: block; color: #68726d; font-size: 10px; line-height: 1.75; }
.area-result-note { margin-top: 9px; padding-top: 9px; border-top: 1px solid #e5e8e6; text-align: left; }
.area-result[data-tier="gain"] { background: #fff; }
.area-result[data-tier="out"] { background: #fff; color: #50493f; }
.area-result[data-tier="out"] .area-result-city { color: #766f64; }
.area-result[data-tier="out"] .area-result-meta > span { color: #645b4e; }
.area-result[data-tier="out"] .area-result-meta > span::before { background: #d7cfbf; box-shadow: none; }
.area-result[data-tier="out"] .area-result-meta > span::after { display: none; }
.area-result[data-tier="unknown"] { background: #fff; color: #555d59; }
.area-result[data-tier="unknown"] .area-result-meta > span::before { background: #d9ddda; box-shadow: none; }
.area-result[data-tier="unknown"] .area-result-meta > span::after { display: none; }
.submit-button { width: 100%; min-height: 64px; border: 0; border-radius: 10px; margin-top: 10px; justify-content: center; position: relative; cursor: pointer; }
.submit-button span { position: absolute; right: 18px; }
.form-note { font-size: 10px; line-height: 1.75; color: #777; margin: -10px 0 0; }
.form-success { min-height: 0; margin: 0; font-size: 12px; font-weight: 700; }

.company { padding-top: 70px; padding-bottom: 82px; background: #fff; }
.company h2 { font-size: 31px; margin-bottom: 36px; }
.award { border-top: 1px solid var(--green-line); border-bottom: 1px solid var(--green-line); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; }
.award span { font-size: 11px; font-weight: 600; }
.award strong { color: var(--green); font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.award small { font-family: "Noto Sans JP", sans-serif; font-size: 8px; }
.company-copy { margin: 28px 0 36px; font-size: 12px; line-height: 1.9; color: #666; }
.company dl { margin: 0; border-top: 1px solid var(--line); }
.company dl div { display: grid; grid-template-columns: 76px 1fr; border-bottom: 1px solid var(--line); padding: 16px 0; font-size: 11px; line-height: 1.8; }
.company dt { color: #777; }
.company dd { margin: 0; }
.company dd a { text-decoration: underline; }
.footer-links { display: flex; gap: 22px; margin-top: 32px; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.copyright { font-size: 9px; color: #999; margin: 40px 0 0; }

.sticky-cta { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 480px); padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(255,255,255,.97); border-top: 3px solid var(--brand-green); transition: transform .3s, opacity .3s; }
.sticky-button { min-width: 0; min-height: 54px; padding: 0 25px 0 12px; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 7px; font-size: clamp(10px, 2.9vw, 12px); line-height: 1.35; font-weight: 800; letter-spacing: -.02em; text-align: center; }
.sticky-button span { position: absolute; right: 10px; font-family: Arial, sans-serif; font-size: 18px; line-height: 1; }
.sticky-area { color: #000; background: var(--brand-green); }
.sticky-contact { color: #fff; background: #000; }
.sticky-contact span { color: var(--brand-green); }
.sticky-cta.hidden { transform: translate(-50%, 120%); opacity: 0; pointer-events: none; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .58s ease, transform .58s cubic-bezier(.22,.78,.24,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.emphasis-reveal { transform: translateY(22px) scale(.975); transition-duration: .62s; transition-timing-function: cubic-bezier(.22,.78,.24,1); }
.reveal.in-view.emphasis-reveal { transform: translateY(0) scale(1); }
.brand-logo-reveal { opacity: 0; transform: translateY(7px) scale(.985); }
.reveal.in-view .brand-logo-reveal { animation: brand-logo-settle .52s .13s cubic-bezier(.22,.78,.24,1) both; }
.photo-reveal { transform: translateY(16px) scale(1.018); }
.photo-reveal.in-view { transform: translateY(0) scale(1); }

.motion-group .motion-item,
.compare-grid .compare-column,
.benefit-list > div,
.faq-list > details {
  opacity: 0;
  transform: translateY(13px);
  transition: opacity .46s ease, transform .46s cubic-bezier(.22,.78,.24,1);
}
.motion-group.in-view .motion-item,
.compare-grid.in-view .compare-column,
.benefit-list.in-view > div,
.faq-list.in-view > details { opacity: 1; transform: translateY(0); }
.motion-group.in-view .motion-item:nth-child(2),
.benefit-list.in-view > div:nth-child(2),
.faq-list.in-view > details:nth-child(2) { transition-delay: .07s; }
.motion-group.in-view .motion-item:nth-child(3),
.benefit-list.in-view > div:nth-child(3),
.faq-list.in-view > details:nth-child(3) { transition-delay: .14s; }
.motion-group.in-view .motion-item:nth-child(4),
.benefit-list.in-view > div:nth-child(4),
.faq-list.in-view > details:nth-child(4) { transition-delay: .21s; }
.motion-group.in-view .motion-item:nth-child(5),
.faq-list.in-view > details:nth-child(5) { transition-delay: .28s; }
.faq-list.in-view > details:nth-child(6) { transition-delay: .35s; }
.compare-grid .compare-self { transform: translateX(-10px); }
.compare-grid .compare-us { transform: translateX(10px); }
.compare-grid.in-view .compare-column { transform: translateX(0); }
.compare-grid.in-view .compare-us { transition-delay: .1s; }
.reason .reason-visual { opacity: 0; transform: scale(.94); transform-origin: center; transition: opacity .7s .18s ease, transform .7s .18s cubic-bezier(.22,.78,.24,1); }
.reason.in-view .reason-visual { opacity: .8; transform: scale(1); }
.area-checker.motion-group,
.contact form.motion-group { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.78,.24,1), border-color .2s ease, box-shadow .2s ease; }
.area-checker.motion-group.in-view,
.contact form.motion-group.in-view { opacity: 1; transform: translateY(0); }
.area-checker.motion-group.in-view .zip-input-wrap input { animation: input-cue .9s .48s ease-out both; }
.benefit-list.in-view b { animation: zero-pop .46s .16s cubic-bezier(.22,.78,.24,1) both; }

@keyframes cta-breathe {
  0%, 100% { box-shadow: 0 8px 20px rgba(0,117,62,.2); }
  50% { box-shadow: 0 10px 26px rgba(0,117,62,.32); }
}
@keyframes arrow-nudge {
  0%, 55%, 100% { transform: translateX(0); }
  70% { transform: translateX(4px); }
}
@keyframes result-enter {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes next-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-copy-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-line-draw {
  from { opacity: 0; transform: scaleX(.15); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes hero-card-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes emphasis-line {
  from { opacity: .25; transform: scaleX(.18); transform-origin: left; }
  to { opacity: 1; transform: scaleX(1); transform-origin: left; }
}
@keyframes zero-pop {
  from { opacity: .35; transform: translateY(6px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cta-sheen {
  from { transform: translateX(-125%); }
  to { transform: translateX(125%); }
}
@keyframes input-cue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6,193,103,0); }
  45% { box-shadow: 0 0 0 5px rgba(6,193,103,.17); }
}
@keyframes brand-logo-settle {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 481px) {
  .site-header { border-left: 1px solid #e2e2de; border-right: 1px solid #e2e2de; }
}
@media (min-width: 960px) {
  .page-shell { max-width: none; overflow: clip; box-shadow: none; }
  .site-header { height: 68px; padding: 0 38px; }
  .menu-inner { width: 100%; padding-right: 48px; padding-left: 48px; }
  main > section,
  main > footer { width: 100%; margin-right: 0; margin-left: 0; }
  main > .metric-section,
  main > .worries,
  main > .comparison,
  main > .benefits,
  main > .faq,
  main > .area-check,
  main > .company {
    padding-right: max(36px, calc(50% - 360px));
    padding-left: max(36px, calc(50% - 360px));
  }
  .desktop-fv {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    grid-template-rows: 860px;
    align-items: stretch;
    border-top: 1px solid #e1e5e2;
    background: #f4f7f5;
  }
  .desktop-fv .hero {
    min-width: 0;
    min-height: 0;
    height: 860px;
    padding-bottom: 28px;
    border-right: 1px solid #dce4df;
  }
  .desktop-fv .hero-visual { height: 415px; }
  .desktop-fv .hero-content { width: 64%; padding: 40px 0 0 42px; }
  .desktop-fv .hero-kicker { margin-bottom: 18px; padding: 8px 13px 9px; font-size: 10px; }
  .desktop-fv .hero h1 { max-width: 390px; font-size: clamp(44px, 4.1vw, 54px); line-height: 1.2; }
  .desktop-fv .hero-offer-card { width: min(calc(100% - 64px), 500px); margin: -70px auto 0; }
  .desktop-fv .hero-actions { padding: 10px 24px 20px; gap: 11px; }
  .desktop-fv .hero-actions .button { height: 72px; }
  .desktop-fv .contact {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: 860px;
    margin: 0;
    padding: 88px 34px 18px;
    display: flex;
    flex-direction: column;
    border-top: 0;
    background: var(--green-wash);
  }
  .desktop-fv .contact > .eyebrow,
  .desktop-fv .contact > h2,
  .desktop-fv .contact > .contact-promise,
  .desktop-fv .contact > form {
    width: min(100%, 520px);
    margin-right: auto;
    margin-left: auto;
  }
  .desktop-fv .contact .eyebrow { margin-bottom: 14px; }
  .desktop-fv .contact h2 { margin-bottom: 16px; font-size: 31px; line-height: 1.35; }
  .desktop-fv .contact-promise { margin-bottom: 21px; gap: 8px; }
  .desktop-fv .contact-offer-main strong { font-size: inherit; line-height: inherit; }
  .desktop-fv .contact-offer-lead img { width: 140px; }
  .desktop-fv .contact-promise > .contact-offer-lead { font-size: 16px; }
  .desktop-fv .contact-promise > .contact-offer-main { font-size: 21px; line-height: 1.5; }
  .desktop-fv .contact form { margin-top: auto; padding: 20px; gap: 15px; border-radius: 14px; }
  .desktop-fv .contact label { font-size: 11px; }
  .desktop-fv .contact input { height: 52px; margin-top: 7px; font-size: 14px; }
  .desktop-fv .submit-button { min-height: 72px; margin-top: 3px; }
  .desktop-fv .form-note { margin-top: -3px; font-size: 9px; }
  .benefit-photo { height: 340px; margin: -10px 0 54px; border-radius: 18px; }
  .benefit-photo figcaption { right: 30px; bottom: 26px; left: 30px; font-size: 18px; }
  .reasons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reasons-intro,
  .reasons-end { grid-column: 1 / -1; }
  .reasons-intro {
    padding: 60px max(56px, calc(50% - 500px)) 56px;
  }
  .reason {
    min-width: 0;
    padding-right: max(34px, calc(50% - 250px));
    padding-left: max(34px, calc(50% - 250px));
  }
  .reason:nth-of-type(even) { border-left: 1px solid #ced8d3; }
  .reason strong span { font-size: clamp(96px, 10vw, 126px); }
  .reason-pay strong { font-size: clamp(76px, 8vw, 100px); }
  .distance-visual { right: max(-82px, calc(50% - 332px)); }
  .shop-pattern { right: max(9px, calc(50% - 241px)); }
  .people-visual { right: max(-2px, calc(50% - 252px)); }
  .reasons-end {
    padding-right: max(56px, calc(50% - 500px));
    padding-left: max(56px, calc(50% - 500px));
  }
  .sticky-cta {
    left: 0;
    width: 100%;
    max-width: none;
    padding: 10px max(28px, 4vw) calc(10px + env(safe-area-inset-bottom));
    gap: 12px;
    transform: none;
    border-top-width: 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.1);
  }
  .sticky-button { min-height: 64px; border-radius: 8px; font-size: 14px; }
  .sticky-cta.hidden { transform: translateY(120%); }
}
@media (max-height: 720px) and (max-width: 959px) {
  .hero-visual { min-height: 346px; height: 346px; }
  .hero-content { padding-top: 22px; }
  .hero h1 { font-size: clamp(32px, 8.8vw, 39px); line-height: 1.22; }
  .hero-offer-card { margin-top: -110px; }
  .hero-actions { padding-bottom: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal,
  .motion-group,
  .motion-group .motion-item,
  .compare-grid .compare-column,
  .benefit-list > div,
  .faq-list > details,
  .area-checker.motion-group,
  .contact form.motion-group { opacity: 1; transform: none; }
  .accent-mark { background-size: 100% 24%; }
  .brand-logo-reveal { opacity: 1; transform: none; }
  .reason .reason-visual { opacity: .8; transform: none; }
}