:root {
  color-scheme: light dark;
  --paper: #fbfaf8;
  --ink: #181a19;
  --muted: #686d69;
  --line: #dedfda;
  --surface: #f1f0ec;
  --surface-strong: #e8eee9;
  --green: #167653;
  --green-deep: #115b40;
  --green-soft: #deeee6;
  --warm: #f3eadc;
  --inverse: #171a18;
  --inverse-text: #f6f7f4;
  --inverse-muted: #aeb6b1;
  --inverse-line: #3b403d;
  --link: #176548;
  --focus: #167653;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); color: var(--ink); }
body { margin: 0; overflow-wrap: anywhere; }
a { color: var(--link); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1.2em; }
ul, ol { padding-inline-start: 1.4em; }
li + li { margin-top: 0.4em; }
h1, h2, h3 { margin-top: 0; color: var(--ink); line-height: 1.35; letter-spacing: -0.035em; overflow-wrap: normal; text-wrap: balance; }
/* 日本語の見出しは文節で折り返し、最後の行に1〜2文字だけ残らないようにする（対応ブラウザのみ）。 */
html[lang="ja"] :is(h1, h2, h3) { word-break: auto-phrase; }
h1 { font-size: clamp(2.7rem, 5.2vw, 4.7rem); font-weight: 700; }
h2 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 690; }
h3 { margin-bottom: 0.65rem; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 680; }
section > :last-child { margin-bottom: 0; }
.muted, .updated, .label { color: var(--muted); }

.skip-link { position: absolute; top: 0.5rem; left: 1rem; padding: 0.5rem 1rem; background: var(--paper); transform: translateY(-200%); z-index: 20; }
.skip-link:focus { transform: none; }
.site-header, .site-footer, .section-shell, .home-hero { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; min-height: 92px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); font-size: 1.3rem; font-weight: 680; letter-spacing: -0.035em; text-decoration: none; }
.brand img { border-radius: 10px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.6rem; font-size: 0.875rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.site-nav .language { margin-left: 0.3rem; }

.content-page main { width: min(680px, calc(100% - 48px)); min-height: 55vh; margin: 64px auto 96px; }
.content-page h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.content-page h2 { font-size: 1.3rem; letter-spacing: -0.02em; }
.content-page h3 { font-size: 1rem; letter-spacing: -0.01em; }
.content-page main section { margin-block: 2.8rem; }
.page-heading { margin-bottom: 2.4rem; }
.page-heading p { margin-top: 1rem; color: var(--muted); }
.page-heading .updated { font-size: 0.875rem; }
.contact-block { padding: 24px 28px; background: var(--surface); border-radius: 16px; }
.contact-block .label { margin-bottom: 0.4rem; font-size: 0.875rem; }
.contact-block .email { margin-bottom: 0; font-size: clamp(1rem, 3vw, 1.3rem); }
.contact-block .email a { display: inline-block; min-height: 44px; align-content: center; }
.faq { margin-top: 1.8rem; }
.faq p { color: var(--muted); }

.home-page main { overflow: hidden; }
.eyebrow { margin-bottom: 1.25rem; color: var(--green); font-size: 0.78rem; font-weight: 720; letter-spacing: 0.13em; text-transform: uppercase; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr); gap: clamp(40px, 8vw, 110px); align-items: center; min-height: 820px; padding-block: 88px 112px; }
.hero-copy { position: relative; z-index: 2; container-type: inline-size; }
.hero-copy h1 { margin-bottom: 1.8rem; }
.hero-copy h1 > span { display: block; }
.hero-copy h1 .phrase { display: inline-block; white-space: nowrap; }
/* 日本語の見出しは1行目（10文字）が列に収まる大きさにし、2行目は文節の間で折り返す。 */
html[lang="ja"] .hero-copy h1 { font-size: min(4.7rem, 9.4cqi); }
.lead { max-width: 34em; margin-bottom: 1.6rem; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.9; }
.trust-list { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.trust-list li { margin: 0; padding: 0.38rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--paper) 88%, transparent); font-size: 0.78rem; }
.release-button { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 52px; margin: 0; padding: 0.7rem 1.2rem; border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 999px; color: var(--green-deep); background: var(--green-soft); font-weight: 670; }
.release-button span { color: var(--green); font-size: 0.65rem; }
.hero-visual { position: relative; min-height: 650px; }
.hero-visual::before { position: absolute; inset: 14% -16% 4% 9%; border-radius: 50%; background: var(--green-soft); content: ""; }
.phone { position: relative; margin: 0; overflow: hidden; border: 7px solid #1d201f; border-radius: 42px; background: #fff; box-shadow: 0 24px 60px rgb(28 38 33 / 15%); }
.hero-phone { position: absolute; top: 0; right: 2%; width: min(62%, 300px); transform: rotate(2.5deg); z-index: 2; }
.hero-phone-secondary { position: absolute; bottom: 0; left: 3%; width: min(48%, 230px); transform: rotate(-4deg); z-index: 3; }

.problem-section, .showcase-section, .privacy-section, .faq-section, .final-section { padding-block: 128px; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); gap: 64px; align-items: end; margin-bottom: 64px; }
.section-heading p { color: var(--muted); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.problem-item { min-height: 250px; padding: 34px 34px 38px 0; }
.problem-item + .problem-item { padding-left: 34px; border-left: 1px solid var(--line); }
.problem-index, .showcase-number { display: block; margin-bottom: 3rem; color: var(--green); font-size: 0.75rem; font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.problem-item p { color: var(--muted); font-size: 0.92rem; }

.flow-section { padding-block: 120px; background: var(--inverse); color: var(--inverse-text); }
.flow-section h2, .flow-section h3 { color: var(--inverse-text); }
.flow-section .eyebrow { color: #8dd0b3; }
.flow-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 96px; }
.flow-heading p:not(.eyebrow) { max-width: 27em; color: var(--inverse-muted); }
.flow-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--inverse-line); }
.flow-list li { display: grid; grid-template-columns: 44px 1fr; gap: 24px; margin: 0; padding-block: 30px; border-bottom: 1px solid var(--inverse-line); }
.step-number { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #61736a; border-radius: 50%; color: #8dd0b3; font-size: 0.8rem; }
.flow-list p { margin: 0; color: var(--inverse-muted); font-size: 0.92rem; }

.showcase-section { padding-bottom: 160px; }
.showcase-list { border-top: 1px solid var(--line); }
.showcase-row { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(48px, 8vw, 110px); align-items: center; padding-block: 112px; border-bottom: 1px solid var(--line); }
.showcase-row.reverse { grid-template-columns: 1.2fr 0.8fr; }
.showcase-row.reverse .showcase-copy { order: 2; }
.showcase-copy { max-width: 390px; }
.showcase-copy p { color: var(--muted); }
.showcase-number { margin-bottom: 1.5rem; }
.showcase-visual { display: flex; justify-content: center; min-width: 0; }
.showcase-visual > .phone { width: min(72%, 350px); }
.showcase-row:nth-child(1) .showcase-visual, .showcase-row:nth-child(3) .showcase-visual { padding: 72px 18px; background: var(--green-soft); }
.showcase-row:nth-child(2) .showcase-visual { padding: 72px 18px; background: var(--warm); }
.phone-pair { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 3vw, 30px); width: 100%; }
.phone-pair .phone { width: min(45%, 280px); }
.phone-pair .phone:nth-child(2) { margin-top: 70px; }

.demo-section { padding-block: 128px; background: var(--green-deep); color: #edf7f1; }
.demo-section h2 { color: #fff; }
.demo-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 90px; align-items: center; }
.demo-label { display: inline-flex; padding: 0.3rem 0.7rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 999px; color: #bce2d1; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.demo-copy > p:not(.demo-label, .demo-note) { color: #c7d8d0; }
.demo-records { margin: 2.2rem 0 1.4rem; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 18%); }
.demo-records li { display: flex; justify-content: space-between; gap: 24px; margin: 0; padding-block: 0.7rem; border-bottom: 1px solid rgb(255 255 255 / 18%); }
.demo-records strong { color: #fff; font-variant-numeric: tabular-nums; }
.demo-note { color: #9fb7ac; font-size: 0.75rem; }
.demo-visual { display: flex; justify-content: center; max-height: 690px; overflow: hidden; }
.demo-visual .phone { width: min(75%, 360px); }

.privacy-section { display: grid; grid-template-columns: 0.35fr 1fr; gap: 56px; max-width: 900px; }
.privacy-mark { display: grid; place-items: center; align-self: start; width: 112px; height: 112px; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 4rem; line-height: 1; transform: rotate(-18deg); }
.privacy-section h2 { max-width: 11em; }
.privacy-section > div:last-child > p:not(.eyebrow) { max-width: 50em; color: var(--muted); }
.privacy-note { padding-left: 20px; border-left: 2px solid var(--green); font-size: 0.87rem; }
.text-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-weight: 650; }

.faq-section { border-top: 1px solid var(--line); }
.faq-layout { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 80px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 68px; padding-block: 20px; font-weight: 650; cursor: pointer; }
.faq-list details p { padding: 0 32px 22px 0; color: var(--muted); font-size: 0.92rem; }

.final-section { margin-bottom: 128px; padding-inline: clamp(28px, 7vw, 88px); border-radius: 4px; background: var(--surface-strong); text-align: center; }
.final-section h2 { max-width: 14em; margin-inline: auto; }
.final-section > p:not(.eyebrow, .release-button) { color: var(--muted); }
.release-button-final { margin-top: 1rem; }
.page-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; font-size: 0.85rem; }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-block: 24px 40px; color: var(--muted); font-size: 0.8rem; }
.site-footer p { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; }
.footer-brand { color: var(--ink); font-weight: 650; }
.site-footer > a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr 0.8fr; gap: 40px; min-height: 720px; }
  .hero-visual { min-height: 560px; }
  .section-heading, .flow-layout, .demo-layout { gap: 48px; }
  .showcase-row, .showcase-row.reverse { grid-template-columns: 0.85fr 1.15fr; gap: 44px; }
}

@media (max-width: 720px) {
  .site-header, .site-footer, .section-shell, .home-hero { width: calc(100% - 40px); }
  .site-header { flex-wrap: nowrap; min-height: 64px; gap: 12px; }
  .brand { gap: 0.5rem; font-size: 1.1rem; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .site-nav { flex-wrap: nowrap; justify-content: flex-end; gap: 0 14px; font-size: 0.78rem; }
  .site-nav a:first-child { display: none; }
  .site-nav .language { margin-left: 0; }
  .content-page main { margin-block: 40px 64px; }
  .home-hero { grid-template-columns: 1fr; min-height: auto; padding-block: 72px 88px; }
  .hero-copy h1 { font-size: clamp(2.1rem, 10vw, 4rem); }
  .hero-visual { width: min(100%, 440px); min-height: 590px; margin-inline: auto; }
  .hero-phone { right: 4%; width: 64%; }
  .hero-phone-secondary { left: 1%; width: 48%; }
  .problem-section, .showcase-section, .privacy-section, .faq-section, .final-section { padding-block: 88px; }
  .section-heading, .flow-layout, .demo-layout, .faq-layout, .privacy-section { grid-template-columns: 1fr; gap: 32px; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-item { min-height: 0; padding: 28px 0; }
  .problem-item + .problem-item { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .problem-index { margin-bottom: 1.2rem; }
  .flow-section, .demo-section { padding-block: 88px; }
  .showcase-row, .showcase-row.reverse { grid-template-columns: 1fr; gap: 36px; padding-block: 80px; }
  .showcase-row.reverse .showcase-copy { order: 0; }
  .showcase-copy { max-width: none; }
  .showcase-visual > .phone { width: min(70%, 330px); }
  .showcase-row:nth-child(1) .showcase-visual, .showcase-row:nth-child(2) .showcase-visual, .showcase-row:nth-child(3) .showcase-visual { padding-block: 48px; }
  .phone { border-width: 5px; border-radius: 34px; }
  .demo-visual { max-height: 600px; }
  .privacy-mark { width: 80px; height: 80px; font-size: 3rem; }
  .final-section { width: calc(100% - 40px); margin-bottom: 80px; padding-inline: 24px; }
}

@media (max-width: 420px) {
  .hero-visual { min-height: 500px; }
  .phone-pair { gap: 8px; }
  .phone-pair .phone { width: 48%; }
  .phone-pair .phone:nth-child(2) { margin-top: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #181b19;
    --ink: #eff2ef;
    --muted: #b0b8b3;
    --line: #3a403c;
    --surface: #242925;
    --surface-strong: #24352d;
    --green: #8fd0b3;
    --green-deep: #123e2e;
    --green-soft: #283b32;
    --warm: #3a332a;
    --link: #a9ddc7;
    --focus: #8fd0b3;
  }
  .phone { border-color: #090a09; }
  .release-button { color: var(--ink); }
}