:root { color-scheme: light; --ink:#214c3b; --muted:#647a6c; --green:#326d4c; --paper:#f5f7ef; --line:#dce5d9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.9; }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:#387b55; }
a:focus-visible,summary:focus-visible { outline:3px solid #559468; outline-offset:5px; }
img { max-width:100%; height:auto; }
.wrap { width:min(1120px,calc(100% - 72px)); margin-inline:auto; }
.skip-link { position:absolute; left:16px; top:-100px; padding:10px 20px; background:white; z-index:10; }
.skip-link:focus { top:10px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:104px; }
.site-brand { display:inline-flex; align-items:center; gap:11px; font-size:15px; font-weight:750; text-decoration:none; letter-spacing:.03em; }
.site-brand img { flex-shrink:0; border-radius:10px; }
.site-header nav { display:flex; gap:26px; align-items:center; font-size:12px; font-weight:600; }
.site-header nav>a:not(.button) { text-decoration:none; white-space:nowrap; }
.button { display:inline-flex; gap:28px; justify-content:space-between; align-items:center; padding:17px 26px; background:var(--green); color:white; border:1px solid var(--green); border-radius:9px; text-decoration:none; font-size:14px; font-weight:700; line-height:1.5; box-shadow:0 6px 18px #326d4c12; transition:background .2s,transform .2s; }
.button:hover { color:white; background:#25593d; transform:translateY(-2px); }
.button-small { padding:12px 17px; font-size:12px; gap:16px; }
.hero { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); align-items:center; gap:18px; padding:64px 0 78px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; color:#57775c; margin:0 0 20px; }
.status-dot { display:inline-block; width:7px; height:7px; background:#76a675; border-radius:50%; margin-right:8px; vertical-align:middle; box-shadow:0 0 0 5px #e5eddc; }
h1,h2,h3,p,figure { margin:0; }
h1,h2 { font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif; font-weight:600; }
h1 { font-size:clamp(35px,4.1vw,52px); line-height:1.65; letter-spacing:.04em; margin-bottom:23px; }
.hero-sns { white-space:nowrap; }
.hero-lead { font-size:15px; line-height:2.15; color:var(--muted); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:30px 0 16px; }
.text-link { display:inline-flex; gap:14px; align-items:center; font-size:12px; font-weight:650; text-decoration:none; border-bottom:1px solid #91ab95; padding:3px 0; }
.hero-note { font-size:11px; color:#738273; letter-spacing:.03em; }
.return-link { font-size:11px; color:#738273; margin-top:17px; }
.hero-pond { position:relative; margin-right:-25px; }
.hero-pond>img { width:100%; display:block; }
.hero-pond figcaption { text-align:center; font-size:10px; color:#839481; margin-top:-10px; }
.pond-note { position:absolute; display:flex; align-items:center; gap:10px; border-radius:10px; padding:12px 17px; font-size:11px; color:#5d755d; background:#fffffff0; box-shadow:0 12px 30px #3b6c4410; }
.pond-note span { font-size:19px; }
.note-top { left:0; top:11%; transform:rotate(-5deg); }
.note-bottom { right:5%; bottom:8%; transform:rotate(3deg); }
.intro-band { text-align:center; background:#e8eee0; border-block:1px solid #dce5d6; padding:25px 24px; color:#55704f; font-size:13px; letter-spacing:.06em; }
.intro-band span { margin-left:28px; color:#6d8164; font-size:12px; }
.section-space { padding-block:100px; }
.section-heading h2,.feature-copy h2,.account-intro h2 { font-size:clamp(26px,3vw,35px); line-height:1.8; letter-spacing:.035em; }
.section-heading>p:last-child:not(.eyebrow) { font-size:13px; margin-top:20px; color:var(--muted); }
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-copy { padding-top:22px; }
.about-copy p,.feature-copy>p:not(.feature-number),.account-intro>p:not(.eyebrow) { font-size:14px; color:var(--muted); line-height:2.1; }
.about-copy p+p { margin-top:18px; }
.about-copy strong { font-weight:650; color:#425e47; }
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:86px; align-items:center; padding-block:42px; }
.feature-copy h2 { margin-bottom:22px; }
.feature-copy>p+p { margin-top:14px; }
.feature-number { font-size:11px; color:#65835c; font-weight:700; letter-spacing:.1em; margin-bottom:18px; }
.feature-copy .text-link { margin-top:23px; }
.feature-art { min-height:340px; border-radius:48% 48% 14px 14px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 32px; }
.care-art { background:#e5eddc; }
.care-orbit { display:flex; align-items:center; gap:27px; margin-bottom:22px; }
.care-orbit>span { font-size:28px; }
.care-orbit>span:first-child { transform:translateY(-32px) rotate(-10deg); }
.care-orbit>span:last-child { transform:translateY(24px); }
.care-orbit img { border-radius:40px; box-shadow:0 15px 38px #3c753d12; transform:rotate(-7deg); }
.art-caption { font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:15px; }
.mini-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }
.mini-tags span { font-size:10px; border:1px solid #cfdbc5; border-radius:100px; padding:4px 10px; color:#6e8061; }
.feature-reverse .feature-art { order:2; }
.voices-art { background:#e3eeea; border-radius:14px 48% 14px 48%; align-items:stretch; padding-inline:40px; }
.sample-label { font-size:11px; color:#698676; letter-spacing:.1em; margin-bottom:15px; }
.sample-voice { display:flex; gap:14px; align-items:flex-start; background:#fffefa; border-radius:14px; padding:20px; box-shadow:0 8px 24px #2c6e4d08; transform:rotate(-3deg); font-size:13px; }
.sample-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e9f1dd; flex-shrink:0; }
.sample-name { color:#86917e; font-size:10px; margin-bottom:6px; }
.sample-voice-small { transform:rotate(3deg); margin:22px 0 0 25px; align-items:center; gap:9px; padding:14px 18px; font-size:11px; }
.sample-caption { font-size:9px; color:#789082; text-align:right; margin-top:17px; }
.visit-row { grid-template-columns:.65fr 1.35fr; border-top:1px solid var(--line); margin-top:44px; padding-block:54px 72px; gap:60px; }
.visit-row .feature-copy h2 { font-size:27px; }
.visit-emblem { display:flex; justify-content:center; gap:18px; align-items:center; }
.visit-emblem img { border-radius:24px; transform:rotate(6deg); }
.visit-emblem>span { font-size:34px; }
.how-section { background:#e9eee2; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; gap:52px; padding:0; margin:48px 0 0; }
.steps li { border-top:1px solid #c7d5bf; padding-top:19px; }
.step-number { font-family:Georgia,serif; font-size:30px; font-style:italic; color:#90a481; }
.steps h3 { font-size:16px; margin:12px 0; }
.steps p { color:var(--muted); font-size:13px; line-height:2; }
.account-section { display:grid; grid-template-columns:.95fr 1.05fr; gap:90px; align-items:center; }
.account-intro h2 { margin-bottom:23px; }
.account-intro .small-copy { font-size:11px!important; margin-top:14px; }
.account-intro .text-link { margin-top:22px; }
.comparison-wrap { min-width:0; }
.comparison { width:100%; border-collapse:collapse; font-size:12px; text-align:center; }
.comparison caption { text-align:left; font-size:13px; font-weight:650; margin-bottom:19px; }
.comparison th,.comparison td { padding:16px 8px; border-bottom:1px solid var(--line); }
.comparison th:first-child { text-align:left; font-weight:500; }
.comparison thead { font-size:11px; background:#e8eee0; }
.comparison td { min-width:62px; color:#6b855b; }
.comparison th:last-child,.comparison td:last-child { background:#ebf0e4; }
.table-note { font-size:10px; color:#788670; margin-top:13px; }
.faq-section { border-top:1px solid var(--line); padding-top:76px; }
.faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:68px; }
.faq-list details { border-bottom:1px solid var(--line); padding:19px 0; }
.faq-list details:first-child { padding-top:0; }
.faq-list summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px; font-weight:600; line-height:1.9; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'＋'; font-weight:400; color:#79936d; flex-shrink:0; }
.faq-list details[open] summary::after { content:'−'; }
.faq-list details>p { margin:15px 24px 0 0; color:var(--muted); font-size:13px; line-height:2.1; }
.closing-section { background:#e0ead9; padding:66px 24px 76px; text-align:center; }
.closing-section img { border-radius:20px; margin-bottom:20px; transform:rotate(-5deg); }
.closing-section .eyebrow { margin-bottom:10px; }
.closing-section h2 { font-size:34px; line-height:1.9; margin-bottom:28px; }
.closing-section .wrap>p:last-child { font-size:11px; color:#647d5f; margin-top:17px; }
.site-footer { display:flex; align-items:center; gap:22px; padding-block:35px; flex-wrap:wrap; }
.site-footer .site-brand { font-size:12px; }
.site-footer nav { display:flex; gap:22px; margin-left:auto; font-size:11px; }
.site-footer nav a { text-decoration:none; }
.site-footer>p { color:#8a9683; font-size:10px; }
@media(min-width:1200px) { .hero-pond { margin-right:-65px; } }
@media(max-width:980px) {
 .wrap { width:calc(100% - 48px); }
 .site-header nav { gap:18px; }
 .site-header .nav-about,.site-header .nav-how { display:none; }
 .hero { padding-block:40px 60px; }
 .hero-pond { margin-right:0; min-width:0; }
 h1 { font-size:37px; }
 .hero-actions { gap:16px; }
 .hero-actions .text-link { font-size:11px; }
 .note-top { font-size:10px; left:-10px; }
 .pond-note { padding:8px 11px; }
 .note-bottom { bottom:4%; right:0; }
 .feature-row { gap:45px; }
 .about-section,.account-section { gap:42px; }
 .steps { gap:30px; }
 .section-space { padding-block:72px; }
 .feature-art { min-height:310px; padding-inline:25px; }
 .care-orbit { gap:15px; }
 .care-orbit img { width:116px; }
 .faq-section { gap:35px; }
}
@media(max-width:700px) {
 .wrap { width:calc(100% - 40px); }
 .site-header { min-height:82px; gap:12px; }
 .site-brand { font-size:12px; gap:8px; }
 .site-brand img { width:30px; }
 .site-header nav { gap:0; }
 .site-header nav>a:not(.button) { font-size:11px; }
 .site-header .button { display:none; }
 .hero { display:flex; flex-direction:column; align-items:stretch; padding-top:35px; padding-bottom:35px; gap:8px; }
 h1 { font-size:clamp(31px,7.7vw,45px); line-height:1.65; margin-bottom:20px; }
 .hero-lead { font-size:14px; }
 .hero-actions { gap:17px; margin-top:25px; }
 .button { font-size:13px; padding:16px 21px; gap:20px; }
 .hero-actions .text-link { font-size:11px; }
 .hero-note,.return-link { font-size:10px; }
 .hero-pond { width:min(440px,100%); margin:10px auto 0; }
 .hero-pond figcaption { margin-top:-6px; }
 .pond-note { font-size:10px; }
 .note-top { top:8%; left:0; }
 .note-bottom { bottom:6%; right:0; }
 .intro-band { padding:22px 20px; font-size:12px; }
 .intro-band span { display:block; margin:7px 0 0; font-size:11px; }
 .section-space { padding-block:58px; }
 .about-section,.account-section,.faq-section { grid-template-columns:1fr; gap:28px; }
 .section-heading h2,.feature-copy h2,.account-intro h2 { font-size:27px; line-height:1.8; }
 .about-copy { padding:0; }
 .about-copy p,.feature-copy>p:not(.feature-number),.account-intro>p:not(.eyebrow) { font-size:13px; }
 .feature-row { grid-template-columns:1fr; gap:27px; padding-block:22px 36px; }
 .feature-art { min-height:280px; }
 .feature-reverse .feature-art { order:0; }
 .feature-copy h2 { margin-bottom:17px; }
 .feature-number { margin-bottom:12px; }
 .visit-row { display:block; margin-top:12px; padding-top:30px; }
 .visit-emblem { padding:0 0 27px; }
 .visit-row .feature-copy h2 { font-size:25px; }
 .steps { grid-template-columns:1fr; gap:25px; margin-top:30px; }
 .steps li { display:grid; grid-template-columns:44px 1fr; gap:0 14px; padding-top:18px; }
 .step-number { grid-row:span 2; font-size:25px; }
 .steps h3 { margin:2px 0 8px; font-size:15px; }
 .comparison { font-size:11px; }
 .comparison th,.comparison td { padding:15px 5px; }
 .comparison td { min-width:52px; }
 .faq-list details { padding:18px 0; }
 .closing-section { padding:50px 0; }
 .closing-section h2 { font-size:28px; }
 .closing-section .wrap>p:last-child { font-size:10px; }
 .site-footer { gap:18px; padding-block:27px; }
 .site-footer nav { margin:0; width:100%; gap:20px; flex-wrap:wrap; }
 .site-footer>p { width:100%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }