:root { --base:#fdfbf7; --forest:#4a6355; --navy:#333333; --ink:#333333; --muted:#646b64; --sage:#f1f2eb; --sage-deep:#e7ece4; --line:#d4dbd0; --brass:#d4a84b; --blush:#f6e9e3; --blush-line:#e6d2c8; --sunlight:#f8ecd3; --gold-ink:#7d5f17; --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif; --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color:var(--ink); background:#e9ece5; font-family:var(--sans); font-synthesis:none; scroll-behavior:smooth; }
* { box-sizing:border-box; }
body { margin:0; font-size:15px; line-height:2; -webkit-text-size-adjust:100%; }
h1,h2,h3,p,ul,ol,dl,figure { margin:0; }
ul,ol { list-style:none; padding:0; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
button { appearance:none; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--brass); outline-offset:5px; }
svg { display:block; flex-shrink:0; }
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none !important; }
.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; }
.site-shell { max-width:390px; margin:0 auto; background:var(--base); box-shadow:0 0 48px #1e354509; }
.skip-link { position:fixed; z-index:100; top:8px; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; background:var(--base); }
.skip-link:focus-visible { clip-path:none; width:auto; height:auto; margin:0; padding:8px 20px; }
.brand { display:flex; align-items:center; gap:9px; color:var(--forest); font-family:var(--serif); font-size:23px; letter-spacing:.12em; line-height:1.4; }
.brand small { display:block; margin-top:4px; font-family:var(--sans); font-size:9px; letter-spacing:.09em; }
.lp-section { padding:64px 24px; scroll-margin-top:20px; }
.section-marker { display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.06em; color:var(--muted); margin-bottom:20px; }
.section-marker span { display:flex; align-items:center; gap:12px; color:var(--forest); font-family:var(--serif); font-size:16px; letter-spacing:.03em; }
.section-marker span::after { content:""; height:1px; width:26px; background:var(--brass); }
h1,h2 { font-family:var(--serif); font-weight:500; color:var(--navy); line-height:1.8; letter-spacing:.015em; }
h1 { font-size:30px; }
h2 { font-size:26px; margin-bottom:28px; }
h3 { font-size:17px; font-weight:500; line-height:1.85; }
.heading-line { display:block; }
p { text-wrap:pretty; }
/* 短い文は文節で折り返す（対応ブラウザのみ。非対応でも表示に問題はありません） */
summary,.faq-question,.service-section > p,.role-text,.example-note,.cta-note { word-break:auto-phrase; }
.lp-section > p:not(.section-marker) + p { margin-top:16px; }
.icon { width:24px; height:24px; color:var(--forest); }
.hero { background:var(--base); padding:0 24px 42px; }
.hero-label { color:var(--forest); font-size:11px; line-height:1.9; letter-spacing:.015em; margin-bottom:18px; }
.hero h1 { margin-bottom:24px; letter-spacing:0; line-height:1.72; }

.hero-copy p { font-size:14px; line-height:1.95; }
.trust-list { display:grid; gap:7px; margin-top:22px; }
.trust-list li { display:flex; align-items:center; gap:10px; font-size:12px; }
.trust-list .icon { width:20px; height:20px; color:var(--forest); }
.button { display:flex; width:100%; align-items:center; justify-content:center; gap:18px; position:relative; min-height:56px; padding:14px 24px; border:1px solid var(--forest); border-radius:999px; background:var(--forest); color:white; font-size:15px; font-weight:500; line-height:1.7; letter-spacing:.035em; transition:background .2s,transform .2s; }
.button > .icon { position:absolute; right:19px; width:25px; color:inherit; }
.button:hover { background:#3e5548; transform:translateY(-1px); }
/* 無料相談ボタン（3か所共通）：緑の丸ボタン＋吹き出し＋ゴールドの矢印 */
.cta { gap:8px; min-height:62px; border-radius:999px; font-size:17px; font-weight:600; letter-spacing:.06em; box-shadow:0 6px 18px #4a635550; }
.cta > .cta-chat { position:static; width:22px; height:22px; color:inherit; }
.cta-arrow { position:absolute; right:12px; top:50%; display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin-top:-19px; border-radius:50%; background:var(--brass); }
.cta-arrow .icon { width:20px; height:20px; color:var(--ink); stroke-width:1.8; }
.cta-area { margin-top:28px; text-align:center; }
.form-alternative { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin-top:8px; font-size:12px; text-decoration:underline; text-underline-offset:5px; }
.form-alternative .icon { width:18px; height:18px; color:inherit; }
#concerns { background:var(--blush); }
.concern-list { display:grid; gap:14px; margin-top:6px; }
.concern-card { padding:18px 18px 20px; background:#fff; border-radius:14px; }
.concern-heading { display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:10px; align-items:center; }
.concern-no { display:flex; align-items:center; gap:6px; margin-bottom:6px; font-family:var(--serif); font-size:13px; line-height:1.4; color:var(--forest); }
.concern-no .icon { width:18px; height:18px; stroke-width:1.6; }
.concern-heading h3 { font-size:15px; font-weight:600; color:var(--navy); line-height:1.7; }
.art { display:block; flex-shrink:0; background-repeat:no-repeat; }
.concern-art { width:88px; height:88px; background-image:url('assets/concerns.webp'); background-size:200% 200%; }
.concern-art-0 { background-position:0 0; }.concern-art-1 { background-position:100% 0; }.concern-art-2 { background-position:0 100%; }.concern-art-3 { background-position:100% 100%; }
.concern-card > p { margin-top:10px; font-size:13.5px; line-height:1.95; }
.concerns-closing { margin-top:36px; text-align:center; }
.concerns-closing > p { font-size:14px; line-height:2.05; }
.lp-section .concerns-closing .concerns-key { margin-top:14px; font-family:var(--serif); font-size:18px; line-height:1.8; color:var(--forest); }
.concerns-next { width:28px; height:28px; margin:16px auto 0; color:var(--brass); stroke-width:1.6; }
/* 見出しの改行を保つため、390px未満ではイラストと文字を少し小さくします */
@media (max-width:389px) { .concern-card { padding:16px 14px 18px; } .concern-heading { grid-template-columns:minmax(0,1fr) 84px; gap:10px; } .concern-art { width:84px; height:84px; } .concern-heading h3 { font-size:14px; } }
/* 依頼後の暮らし（案C）：明るいベージュ＋日だまりのような淡いゴールド */
.future-section { background:var(--base); }
.future-section h2 { margin-bottom:16px; }
.future-intro { font-size:15px; line-height:2; color:var(--forest); }
.future-scenes { display:grid; gap:40px; margin-top:40px; }
.scene-top { display:grid; grid-template-columns:128px minmax(0,1fr); gap:16px; align-items:center; margin-bottom:14px; }
.is-reverse .scene-top { grid-template-columns:minmax(0,1fr) 128px; }
.is-reverse .scene-halo { order:2; }
.scene-halo { display:flex; align-items:center; justify-content:center; width:128px; height:128px; border-radius:50%; background:var(--sunlight); }
.future-art { width:108px; height:108px; border-radius:50%; background-color:#fff; background-image:url('assets/future.webp'); background-size:300% 100%; }
.future-art-0 { background-position:0 0; }.future-art-1 { background-position:50% 0; }.future-art-2 { background-position:100% 0; }
.scene-label { display:inline-block; margin-bottom:10px; padding:2px 12px; border-radius:999px; background:var(--sunlight); color:var(--gold-ink); font-size:11.5px; font-weight:500; line-height:1.7; }
.future-scenes h3 { font-family:var(--serif); font-size:17px; color:var(--forest); line-height:1.7; }
.future-scenes li > p { font-size:14px; line-height:2; }
.future-closing { margin-top:48px; text-align:center; }
.future-ornament { width:40px; height:12px; margin:0 auto 20px; color:var(--brass); }
.future-closing .future-key { font-family:var(--serif); font-size:22px; line-height:1.75; color:var(--forest); }
.future-closing .future-key + p { margin-top:12px; font-size:14px; line-height:2; }
/* 見出しの改行を保つため、390px未満では丸い絵を少し小さくします */
@media (max-width:389px) { .scene-top { grid-template-columns:112px minmax(0,1fr); gap:12px; } .is-reverse .scene-top { grid-template-columns:minmax(0,1fr) 112px; } .scene-halo { width:112px; height:112px; } .future-art { width:94px; height:94px; } }
.service-section { background:var(--forest); color:#f8faf7; }
.service-section h2 { color:white; }
.service-section .section-marker { color:#f3f4ee; }
.service-section .section-marker span { color:#ead5ae; }
.service-section > p:not(.section-marker) { font-size:14px; }
/* サービス内容：お客様の作業は線のカード、未来構想の作業は明るいカードで強調 */
.role-flow { display:grid; gap:30px; margin-top:28px; }
.role-flow > li { position:relative; padding:18px 20px 20px; border:1px solid #ffffff4d; border-radius:14px; }
.role-flow > li:not(:last-child)::after { content:""; position:absolute; left:calc(50% - 6px); bottom:-22px; width:10px; height:10px; border-right:1.5px solid #ead5ae; border-bottom:1.5px solid #ead5ae; transform:rotate(45deg); }
.role-owner { display:inline-block; margin-bottom:8px; padding:1px 12px; border:1px solid #ffffff99; border-radius:999px; font-size:11.5px; line-height:1.7; color:#fff; }
.role-flow h3 { font-family:var(--serif); font-size:18px; line-height:1.7; color:#fff; }
.role-text { margin-top:6px; font-size:14px; line-height:1.95; color:#f5f5ee; }
.role-flow > .role-us { padding:22px 20px 22px; background:var(--base); border-color:var(--base); box-shadow:0 8px 24px #0000002e; }
.role-us .role-owner { background:var(--brass); border-color:var(--brass); color:var(--ink); font-weight:600; }
.role-us h3 { font-size:20px; color:var(--forest); }
.role-tasks { display:grid; gap:8px; margin:14px 0 12px; }
.role-tasks li { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--ink); }
.role-task-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--sunlight); }
.role-task-icon .icon { width:22px; height:22px; }
.role-us .role-text { margin-top:0; font-size:12.5px; color:var(--muted); }
#values-title { letter-spacing:0; }
/* 担当者紹介：写真とプロフィールを1枚のカードに */
.profile-summary { margin-top:30px; overflow:hidden; background:#fff; border-radius:14px; }
.profile-image { width:100%; aspect-ratio:1.5; object-fit:cover; }
.profile-body { padding:22px 20px 26px; }
.profile-brand { font-family:var(--serif); font-size:18px; font-weight:500; color:var(--forest); }
.profile-role { display:inline-block; margin:10px 0 20px; padding:2px 12px; border-radius:999px; background:var(--sunlight); color:var(--gold-ink); font-size:12px; font-weight:600; line-height:1.7; }
.profile-copy { margin-top:14px; }
.profile-copy p { font-size:14px; line-height:2.15; }
.profile-copy p + p { margin-top:20px; }
.pricing-section { background:var(--sage); }
.estimate-commitment { margin:0 0 18px; padding:16px 18px; background:#fff; border-left:3px solid var(--brass); border-radius:0 12px 12px 0; }
.estimate-commitment > p { font-size:11px; color:var(--muted); margin-bottom:6px; }
.estimate-commitment h3 { font-size:17px; font-weight:600; }
.pricing-intro { font-size:14px; }
.estimate-example { margin:28px 0; padding:24px 20px; background:#fff; border-radius:14px; box-shadow:0 4px 18px #4a63551a; }
.estimate-example h3 { font-family:var(--serif); font-size:21px; color:var(--navy); }
.example-description { font-size:13px; margin:12px 0 18px; }
.example-conditions { width:100%; border-collapse:collapse; font-size:13px; line-height:1.8; text-align:left; }
.example-conditions th,.example-conditions td { border:1px solid var(--line); padding:12px 10px; vertical-align:middle; }
.example-conditions th { background:var(--sage); font-weight:500; width:42%; }
.example-conditions td { background:var(--base); }
.example-price { padding:20px 0 16px; border-bottom:1px solid var(--line); }
.example-price > p:first-child { font-size:12px; color:var(--muted); }
.example-amount { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; color:var(--navy); margin-top:2px; }
.example-amount { color:var(--forest); }
.example-amount > span:first-child { font-family:var(--serif); font-size:46px; font-weight:500; letter-spacing:-.01em; line-height:1.5; }
.example-unit { font-size:12px; }
.example-scope { margin-top:16px; font-size:12px; }
.example-note { font-size:12px; color:var(--muted); margin-top:10px; line-height:1.9; }
.estimate-box { margin:30px 0 0; }
.estimate-box h3 { font-size:17px; font-weight:600; margin-bottom:10px; }
.check-list li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; }
.check-list .icon { width:25px; height:25px; }
.cta-note { margin-top:14px; font-size:12px; color:var(--muted); line-height:1.9; }
.flow-list { margin-top:6px; }
.flow-list li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:15px; position:relative; padding-bottom:30px; }
.flow-list li:last-child { padding-bottom:0; }
.flow-list li::before { content:""; position:absolute; width:1px; left:16px; top:33px; bottom:6px; background:var(--line); }
.flow-list li:last-child::before { display:none; }
.item-number { font-family:var(--serif); font-size:16px; line-height:32px; color:var(--forest); width:33px; height:33px; border:1px solid var(--brass); border-radius:50%; background:var(--base); text-align:center; }
.flow-title { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.flow-title .icon { width:25px; height:25px; margin-top:4px; }
.flow-title h3 { font-size:16px; font-weight:600; color:var(--navy); }
.flow-list li p { font-size:14px; line-height:2; }
.faq-section { background:var(--sage); }
.faq-list { padding:4px 18px; background:#fff; border-radius:14px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:last-child { border-bottom:0; }
.faq-item summary,.faq-question { list-style:none; display:grid; grid-template-columns:21px minmax(0,1fr) 22px; gap:10px; padding:22px 0; align-items:start; font-size:15px; line-height:1.85; font-weight:500; }
.faq-item summary::-webkit-details-marker { display:none; }
.q-mark,.a-mark { color:var(--forest); font-family:var(--serif); font-size:19px; line-height:1.45; }
.faq-toggle { width:22px; height:22px; color:var(--forest); margin-top:3px; }
.faq-item[open] .faq-plus { display:none; }
.faq-answer { display:grid; grid-template-columns:21px minmax(0,1fr); gap:10px; padding:0 0 24px; }
.faq-answer p { font-size:14px; line-height:2.05; }
.faq-question { padding-right:0; }
.last-contact-section { background:var(--forest); color:white; }
.last-contact-section h2 { color:white; line-height:1.9; letter-spacing:0; }
.last-contact-section .section-marker { color:#e3eae4; }
.last-contact-section .section-marker span { color:#ead5ae; }
.last-contact-section > p:not(.section-marker) { font-size:14px; }
.last-contact-section .button { background:var(--base); color:var(--forest); border-color:var(--base); box-shadow:0 6px 18px #0000002e; }
.last-contact-section .button:hover { background:#eef3eb; }
.last-contact-section .cta-note { color:#e3eae4; font-size:11px !important; }
.contact-section { background:var(--sage); }
.form-intro { font-size:14px; }
.draft-note { font-size:11px; line-height:1.9; color:var(--muted); }
.form-draft { padding-left:11px; border-left:2px solid #b7c2b4; margin:16px 0 30px; }
.form-field { margin-bottom:26px; }
.form-field > label { display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:14px; font-weight:500; line-height:1.8; margin-bottom:10px; }
.required,.optional { font-size:10px; line-height:1.5; padding:1px 5px; font-weight:400; border:1px solid #c2cabc; border-radius:2px; white-space:nowrap; }
.required { background:var(--forest); color:#fff; border-color:var(--forest); }
.optional { color:var(--muted); background:var(--base); }
.form-field input,.form-field select,.form-field textarea { width:100%; min-width:0; display:block; border:1px solid #bfcbbf; background:var(--base); min-height:54px; border-radius:10px; padding:12px 13px; font-size:16px; line-height:1.8; }
.form-field textarea { resize:vertical; }
.form-field input::placeholder,.form-field textarea::placeholder { color:#68766c; font-size:13px; opacity:1; }
.field-help { font-size:11px; line-height:1.95; color:var(--muted); margin-top:8px; }
.consent-field { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.consent-field > label { display:flex; align-items:flex-start; gap:10px; font-size:13px; }
.consent-field input { width:19px; height:19px; margin:4px 0 0; accent-color:var(--forest); flex-shrink:0; }
.draft-inline { font-size:11px; color:var(--muted); }
.text-button { border:0; border-radius:0; padding:0; background:transparent; font-size:inherit; line-height:inherit; text-align:left; text-decoration:underline; text-underline-offset:4px; }
.policy-link { display:inline-block; margin:10px 0 0 29px; font-size:11px; }
.form-submit { margin-top:28px; }
.site-footer { padding:38px 24px 24px; }
.site-footer .brand { justify-content:center; font-size:24px; text-align:center; }
.footer-links { display:grid; justify-items:center; gap:13px; padding:28px 0; font-size:11px; }
.site-footer > p { text-align:center; font-size:10px; }
dialog { width:calc(100% - 32px); max-width:358px; border:1px solid var(--line); border-radius:8px; max-height:calc(100dvh - 40px); padding:0; color:var(--ink); background:var(--base); }
dialog::backdrop { background:#33333370; }
.dialog-inner { padding:25px 22px; }
.dialog-inner h2 { font-size:23px; margin-bottom:16px; }
.dialog-inner p,#info-body { font-size:14px; line-height:2; }
#info-body { margin-bottom:24px; }
.dialog-label { color:var(--muted); font-size:11px !important; margin-bottom:8px; }
#confirm-values { margin:20px 0; }
#confirm-values > div { padding:12px 0; border-top:1px solid var(--line); }
#confirm-values dt { color:var(--muted); font-size:11px; }
#confirm-values dd { margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; }
.dialog-actions { display:grid; gap:10px; }
.button-secondary { color:var(--forest); background:var(--base); }
.button-secondary:hover { background:var(--sage); }
.status { display:none; position:fixed; z-index:80; bottom:16px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:358px; padding:14px 18px; background:var(--forest); color:white; font-size:12px; border-radius:5px; box-shadow:0 3px 20px #1e354526; }
.status.is-visible { display:block; }
@media (max-width:374px) { .lp-section { padding-left:22px; padding-right:22px; } h1 { font-size:28px; } h2 { font-size:25px; } }
@media (prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }
@media print { :root { background:var(--base); } .site-shell { box-shadow:none; } dialog,.status { display:none !important; } .concern-card,.future-scenes li,.role-flow li,.form-field { break-inside:avoid; } }

.hero-brand { display:inline-flex; gap:6px; font-size:16px; letter-spacing:.08em; margin-bottom:22px; }
.brand-mark { display:block; flex-shrink:0; width:34px; height:31px; background-color:var(--forest); -webkit-mask:url('assets/logo-mark.png') center / contain no-repeat; mask:url('assets/logo-mark.png') center / contain no-repeat; }
.hero-brand .brand-mark { width:29px; height:27px; }
.hero-brand small { font-size:8px; margin-top:2px; }

/* ファーストビュー（案A）：写真＋コピー → 信頼カード → 相談ボタン → サービス3点 → 本文。 */
.hero-stage { position:relative; min-height:470px; margin:0 -24px; padding:20px 24px 90px; isolation:isolate; }
.hero-backdrop { position:absolute; z-index:-1; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; mask-image:linear-gradient(#000 0%,#000 62%,transparent 96%); }
.hero-stage .hero-label { margin-bottom:34px; }
.hand-note.hero-pretitle { position:relative; width:fit-content; margin-left:16px; margin-bottom:10px; font-size:13px; line-height:1.8; letter-spacing:.03em; transform:rotate(-4deg); }
.hero-stage h1 { max-width:none; margin-bottom:18px; font-size:28px; line-height:1.65; }

/* 信頼カード：写真の下端に重ねる */
.hero-trust { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:-62px; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:14px; line-height:1.4; }
.hero-trust-experience { display:flex; flex-direction:column; justify-content:center; gap:2px; padding-right:14px; border-right:1px solid var(--line); }
.trust-lead { font-size:11.5px; color:var(--muted); }
.trust-main { display:flex; align-items:baseline; font-size:14px; font-weight:600; }
.trust-main strong { margin:0 2px 0 6px; font-family:var(--serif); font-size:34px; font-weight:500; line-height:1; color:var(--forest); }
.hero-trust-area { display:flex; align-items:center; gap:8px; padding-left:12px; font-size:13.5px; font-weight:600; line-height:1.5; }
.hero-trust-area .icon { width:24px; height:24px; }

/* 相談ボタンまわり */
.hero .cta-area { margin-top:20px; }
.hero-reassure { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:8px; font-size:13px; font-weight:500; line-height:1.6; letter-spacing:.04em; color:var(--forest); }
.hero-reassure::before,.hero-reassure::after { content:""; width:14px; height:1px; background:currentColor; }
.hero-reassure::before { transform:rotate(60deg); }
.hero-reassure::after { transform:rotate(-60deg); }
.hero-cta-note { margin-top:10px; font-size:12px; line-height:1.6; color:var(--muted); }

/* サービス3点と本文（最初の画面の下） */
.hero-services { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:40px; }
.hero-services li { aspect-ratio:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; background:var(--blush); border:1px solid var(--blush-line); border-radius:50%; padding:10px 4px; text-align:center; }
.hero-services .icon { width:27px; height:27px; }
.hero-services p { font-size:12px; line-height:1.65; font-weight:500; }
.hero > .hero-copy { margin-top:24px; }
.hero > .hero-copy p { font-size:14px; line-height:2; }
.hero-lead { font-weight:600; color:var(--forest); }
@media (max-width:374px) { .hero { padding-left:22px; padding-right:22px; } .hero-stage { margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:22px; } .hero-services { gap:7px; } .hero-trust { padding-left:14px; padding-right:12px; } .hero-trust-experience { padding-right:12px; } .hero-trust-area { padding-left:10px; font-size:13px; } .cta { letter-spacing:.03em; } .cta-arrow { right:10px; width:34px; height:34px; margin-top:-17px; } }

/* ===== 曲線デザイン（2026-10-21試作）：やわらかい曲線と、後半セクションの底上げ ===== */

/* セクションの境目をゆるやかな曲線に。各セクション自身の色で、上の境目に波を描きます */
.lp-section:not(.hero), .site-footer { position:relative; }
.site-footer { background:var(--base); }
.lp-section:not(.hero)::before, .site-footer::before { content:""; position:absolute; left:0; right:0; top:-27px; height:28px; background:inherit; pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V18C70 4 150 0 195 0s125 4 195 18v10z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V18C70 4 150 0 195 0s125 4 195 18v10z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.lp-section:not(.hero):nth-of-type(odd)::before, .site-footer::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V12C60 2 120 2 180 12s130 18 210 4v12z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V12C60 2 120 2 180 12s130 18 210 4v12z'/%3E%3C/svg%3E"); }

/* 見出し上のゴールドの線を、小さな波線に */
.section-marker span::after { width:30px; height:8px; background:var(--brass);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cpath d='M1 5c4.5-4 9-4 14 0s9.5 4 14 0' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cpath d='M1 5c4.5-4 9-4 14 0s9.5 4 14 0' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.service-section .section-marker span::after, .last-contact-section .section-marker span::after { background:#ead5ae; }

/* 角をまるく */
.hero-trust { border-radius:22px; }
.concern-card, .role-flow > li, .profile-summary, .estimate-example, .faq-list { border-radius:26px; }
dialog { border-radius:24px; }

/* 料金：確認項目を丸いチップに */
.estimate-commitment { padding:18px 22px; background:var(--sunlight); border-left:0; border-radius:26px; }
.estimate-commitment > p { color:var(--gold-ink); }
.example-conditions { border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.example-conditions th, .example-conditions td { border:0; }
.example-conditions tr + tr th, .example-conditions tr + tr td { border-top:1px solid var(--line); }
.example-conditions th { border-right:1px solid var(--line); }
.check-list { display:grid; gap:10px; }
.check-list li { grid-template-columns:40px minmax(0,1fr); padding:8px 18px 8px 8px; background:#fff; border-bottom:0; border-radius:999px; }
.check-list .icon { box-sizing:border-box; width:40px; height:40px; padding:9px; border-radius:50%; background:var(--sunlight); }

/* ご依頼の流れ：1段ずつ白いカード、番号は淡いゴールドの丸、間は点線 */
.flow-list { display:grid; gap:20px; }
.flow-list li, .flow-list li:last-child { grid-template-columns:40px minmax(0,1fr); gap:14px; padding:18px 18px 20px; background:#fff; border-radius:26px; box-shadow:0 4px 18px #4a635514; }
.flow-list li::before { top:auto; bottom:-20px; left:37px; width:0; height:20px; background:none; border-left:2px dotted var(--brass); }
.item-number { width:40px; height:40px; line-height:40px; border:0; background:var(--sunlight); color:var(--gold-ink); font-size:15px; }
.flow-title { margin-top:6px; }

/* よくある質問：Q と A を丸の中に */
.faq-list { padding:6px 18px; }
.faq-item summary, .faq-question { grid-template-columns:30px minmax(0,1fr) 22px; }
.faq-answer { grid-template-columns:30px minmax(0,1fr); }
.q-mark, .a-mark { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; font-size:15px; line-height:1; }
.q-mark { background:var(--blush); color:var(--forest); }
.a-mark { background:var(--sunlight); color:var(--gold-ink); }
.faq-toggle { margin-top:4px; }

/* 最後の相談：ほっとひと息のイラストを丸く添えて、中央寄せの締めくくりに */
.last-contact-section { text-align:center; }
.last-contact-section .section-marker { justify-content:center; }
.last-art { display:flex; align-items:center; justify-content:center; width:124px; height:124px; margin:0 auto 22px; border-radius:50%; background:#ffffff2e; }
.last-art .future-art { width:104px; height:104px; }
.last-contact-section > p:not(.section-marker):not(.cta-note) { text-align:left; }

/* フォーム：白いカードにまとめ、入力欄もまるく */
#inquiry-form { padding:26px 20px 24px; background:#fff; border-radius:26px; }
.form-field input, .form-field select, .form-field textarea { border-radius:14px; }
.required, .optional { padding:1px 9px; border-radius:999px; }
.form-draft { border-left:0; padding:10px 16px; background:#ffffffa6; border-radius:14px; }

/* 背景色の指定がないセクションにも色を持たせ、境目の曲線が見えるようにします */
#values, #flow { background:var(--base); }

/* 最後の相談セクションを外したため、FAQのすぐ後のフォームはピンクベージュで区切ります */
#contact { background:var(--blush); }

/* ===== 参考サイトを取り入れた試作（2026-10-21） ===== */
/* 相談ボタンの中の小さなラベル */
.cta { min-height:72px; padding-top:10px; padding-bottom:10px; }
.cta-label { display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1.4; }
.cta-badge { padding:1px 10px; border-radius:999px; background:var(--sunlight); color:var(--gold-ink); font-size:11px; font-weight:600; letter-spacing:.04em; }
.hero .cta-area { margin-top:22px; }

/* ページ途中の相談の帯 */
.cta-band { background:var(--base); padding-top:8px; padding-bottom:64px; }
.cta-band-card { padding:30px 22px 26px; background:var(--forest); border-radius:28px; text-align:center; color:#fff; }
.cta-band-lead { margin-bottom:20px; font-family:var(--serif); font-size:19px; line-height:1.8; }
.cta-band .button { background:var(--base); color:var(--forest); border-color:var(--base); box-shadow:0 6px 18px #0000002e; }
.cta-band .button:hover { background:#eef3eb; }
.cta-band-note { margin-top:12px; font-size:12px; line-height:1.6; color:#e3eae4; }

/* 見出しの大事な言葉に、蛍光ペンのような色 */
.hl { padding:0 2px; color:inherit; background:linear-gradient(transparent 60%, #f2cfc3 60%); }
.service-section .hl { background:linear-gradient(transparent 62%, #d4a84b80 62%); }

/* 後半のイラスト：淡いゴールドの丸に入れて見出しの上へ */
.head-art { display:flex; align-items:center; justify-content:center; width:104px; height:104px; margin-bottom:18px; border-radius:50%; background:var(--sunlight); }
.head-art .art { width:88px; height:88px; border-radius:50%; background-color:#fff; }
.band-art { display:flex; align-items:center; justify-content:center; width:108px; height:108px; margin:0 auto 16px; border-radius:50%; background:#ffffff2e; }
.band-art .art { width:90px; height:90px; border-radius:50%; background-color:#fff; }

/* ===== 水色デザイン案（2026-10-21試作）：参考画像の配色・形・飾りを取り入れたもの ===== */
:root {
  --base:#f7fbfe;        /* 白に近い水色 */
  --forest:#1c4b74;      /* メイン：ネイビー */
  --navy:#2b3440; --ink:#2b3440; --muted:#5d6b78;
  --sage:#eef6fb;        /* 補助背景：ごく淡い水色 */
  --sky-soft:#e6f3fb;    /* お悩みの背景 */
  --sky:#2f93c8;         /* チェックや線の水色 */
  --sky-light:#9fd3f0;
  --line:#d5e6f2;
  --brass:#d94f64;       /* アクセント：コーラルピンク */
  --coral:#d94f64; --coral-ink:#b83a50;
  --blush:#fdeef1; --blush-line:#f6d3da;
  --sunlight:#e3f1fb;    /* イラストの輪・ラベル */
  --gold-ink:#1d6898;
  --hand:"Klee One","Zen Kurenaido","Hiragino Maru Gothic ProN",var(--sans);
  background:#e4eef6;
}

/* セクションの背景の並び */
#concerns { background:var(--sky-soft); }
.future-section, #flow { background:var(--base); }
#values { background:var(--blush); }
.pricing-section, .faq-section { background:var(--sage); }
#contact { background:var(--blush); }
.cta-band { background:var(--base); }

/* 相談ボタン：コーラルピンクに白文字（読みやすさのため文字は大きめ・太め） */
.cta, .cta-band .button, .last-contact-section .button { background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:0 8px 20px #d94f6440; }
.cta:hover, .cta-band .button:hover { background:#c9455a; }
.cta { font-size:19px; font-weight:700; letter-spacing:.04em; }
.cta > .cta-chat { color:#fff; }
.cta-arrow { background:#fff; }
.cta-arrow .icon { color:var(--coral); }
.cta-badge { background:#fff; color:var(--coral-ink); font-size:11px; }
.button:not(.cta):hover { background:#163d5f; }

/* ファーストビュー：白い丸のサービス表示と、角の水色のかたち */
.hero { position:relative; overflow:hidden; isolation:isolate; }
.hero::before, .hero::after { content:""; position:absolute; z-index:-1; pointer-events:none; }
.hero::before { right:-70px; bottom:-30px; width:190px; height:150px; background:var(--sky-light); opacity:.55; border-radius:62% 38% 44% 56% / 58% 46% 54% 42%; }
.hero::after { left:-60px; bottom:-50px; width:150px; height:130px; background:#c8e6f7; opacity:.7; border-radius:42% 58% 60% 40% / 50% 60% 40% 50%; }
.hero-services li { background:#fff; border-color:#cfe6f5; box-shadow:0 4px 14px #2f93c814; }
.hero-trust { border-color:#cfe6f5; box-shadow:0 4px 14px #2f93c814; }

/* お悩み：水色のチェック */
.concern-no { color:var(--forest); }
.concern-no .icon { color:var(--sky); }
.concerns-closing .concerns-key { color:var(--forest); }
.concerns-next { color:var(--sky); }

/* サービス内容（ネイビー） */
.role-flow > li:not(:last-child)::after { border-color:var(--sky-light); }
.role-us .role-owner { background:var(--coral); border-color:var(--coral); color:#fff; }
.service-section .hl { background:linear-gradient(transparent 62%, #2f93c899 62%); }

/* 見出しの強調：淡いピンクのマーカー */
.hl { background:linear-gradient(transparent 60%, #fbd0d8 60%); }

/* 料金・流れ・FAQ */
.estimate-example, .flow-list li, .flow-list li:last-child { box-shadow:0 4px 18px #2f93c812; }
.example-amount { color:var(--forest); }
.flow-list li::before { border-left-color:var(--sky-light); }
.q-mark { background:var(--sky-soft); color:var(--forest); }
.a-mark { background:var(--blush); color:var(--coral-ink); }

/* 帯（ネイビーの角丸カード） */
.cta-band-card { background:var(--forest); }
.cta-band-note { color:#dbe8f3; }

/* フォーム */
.form-field input, .form-field select, .form-field textarea { border-color:#c9dcea; }
.form-field input::placeholder, .form-field textarea::placeholder { color:#667685; }
.required { background:var(--coral); border-color:var(--coral); }
.optional { border-color:#c9dcea; }

/* 手書き風のひと言 */
.hand-note { position:absolute; z-index:2; font-family:var(--hand); font-weight:600; font-size:13px; line-height:1.65; color:var(--forest); text-align:center; transform:rotate(7deg); pointer-events:none; }
.hand-note::before, .hand-note::after { content:""; position:absolute; top:50%; width:12px; height:1.5px; background:var(--sky); border-radius:2px; }
.hand-note::before { left:-16px; transform:rotate(60deg); }
.hand-note::after { right:-16px; transform:rotate(-60deg); }
.concerns-note { top:76px; right:22px; transform:rotate(-6deg); }

/* 葉っぱの飾り */
.sprig { position:absolute; z-index:0; width:46px; height:86px; color:#7fbfc6; pointer-events:none; }
.flow-sprig { top:44px; right:18px; transform:rotate(14deg); }
.contact-sprig { top:54px; right:22px; transform:rotate(-12deg) scaleX(-1); }
@media (max-width:374px) { .concerns-note { right:14px; font-size:12px; } }
/* 微調整：かたちは角に小さく、はみ出し防止、狭い画面のボタン */
.site-shell { overflow-x:clip; }
.hero::before { right:-56px; bottom:-78px; width:150px; height:120px; }
.hero::after { left:-50px; bottom:-74px; width:120px; height:104px; }
@media (max-width:374px) { .cta { letter-spacing:0; gap:6px; } .cta-arrow { right:8px; } }
/* ボタンの中：矢印の丸のぶん右を空け、文字は残りの幅の中央に */
.cta { padding-left:18px; padding-right:56px; }
.cta-band-card { padding-left:12px; padding-right:12px; }
@media (max-width:389px) { .cta-band .cta > .cta-chat { display:none; } }

/* 吹き出しアイコンを「LINEで無料相談する」と同じ行に置き、文字の高さにそろえます */
.cta-main { display:inline-flex; align-items:center; gap:6px; }
.cta-main .cta-chat { width:19px; height:19px; flex-shrink:0; color:#fff; stroke-width:1.8; margin-top:1px; }
.cta-badge { margin-bottom:2px; }
@media (max-width:389px) { .cta-band .cta > .cta-chat, .cta-band .cta-main .cta-chat { display:none; } }

/* ファーストビューの見出し：言葉の大きさに強弱をつけ、文字の間隔を詰めて読み心地を整えます */
.hero-stage h1.is-rich { margin-bottom:16px; font-size:28px; font-weight:500; line-height:1.42; letter-spacing:.01em; font-feature-settings:"palt"; color:var(--forest); text-shadow:0 0 14px #f7fbfee6, 0 0 2px #f7fbfe; }
.is-rich .heading-line { display:block; white-space:nowrap; }
.is-rich .heading-line + .heading-line { margin-top:2px; }
.h-s { font-size:21px; }
.h-m { font-size:25px; }
.h-k { font-size:35px; font-weight:600; letter-spacing:.02em; }
.h-accent { color:var(--coral); }
.h-mark { background:linear-gradient(transparent 52%, #fbd0d8 52%, #fbd0d8 84%, transparent 84%); padding:0 3px; }
@media (max-width:374px) { .h-s { font-size:20px; } .h-m { font-size:23px; } .h-k { font-size:33px; } }

/* 公開用の問い合わせ・案内ページ。LPの配色とスマホ幅を引き継ぎます。 */
[hidden] { display: none !important; }
.form-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.form-feedback { padding:14px; border:1px solid #d94f64; border-radius:12px; background:#fff5f6; color:#913347; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.button:disabled { opacity:.65; cursor:wait; }
.contact-success { padding:28px 20px; border:1px solid var(--line); border-radius:24px; background:#fff; outline-offset:5px; }
.contact-success > .icon { width:42px; height:42px; color:var(--forest); margin-bottom:18px; }
.contact-success h3 { font-size:19px; line-height:1.7; }
.contact-success p { font-size:14px; overflow-wrap:anywhere; }
.contact-direct { margin-top:25px; font-size:12px; line-height:1.9; overflow-wrap:anywhere; }
.contact-direct a, .legal-copy a, .dialog-inner .field-help a, .noscript-note a { text-decoration:underline; text-underline-offset:3px; }
.footer-copyright { margin-top:22px; font-size:11px; color:var(--muted); }
.noscript-note { padding:24px; font-size:14px; }
.legal-copy { padding:36px 24px 50px; }
.legal-copy .brand { margin-bottom:38px; }
.legal-copy h1 { font-family:var(--serif); font-size:25px; line-height:1.6; color:var(--forest); letter-spacing:.01em; }
.legal-copy h2 { margin:30px 0 10px; font-size:17px; line-height:1.6; }
.legal-copy p, .legal-copy li, .legal-copy dd, .legal-copy dt { font-size:14px; line-height:1.9; overflow-wrap:anywhere; }
.legal-copy ul { padding-left:1.4em; }
.legal-copy dl { margin-top:26px; }
.legal-copy dt { font-weight:700; margin-top:20px; }
.legal-copy dd { margin:5px 0 0; }
.legal-copy .legal-back { display:inline-block; margin-top:30px; }