:root{color-scheme:light;--ink:#222;--orange:#ff8a00;--line:#06c755;--border:#e5e7eb;--dock:100px;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:#f8f9fa;font-synthesis:none}
*{box-sizing:border-box}body{margin:0} .page{max-width:430px;margin:0 auto;background:#fff;padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom) + 12px)}
.hero{text-align:center;padding:20px 12px 17px}.hero h1{font-size:26px;font-weight:800;line-height:1.45;letter-spacing:.01em;margin:0}.hero h1 span{color:var(--orange)}.hero p{font-size:12px;line-height:1.7;margin:9px 0 0;font-weight:500}
.manga{display:flex;flex-direction:column;gap:2px}.manga img{display:block;width:100%;height:auto;object-fit:contain}
.consultation{text-align:center;padding:24px 18px 16px}.consultation h2{font-size:21px;font-weight:800;line-height:1.6;margin:0}.consultation h2 span{color:var(--orange)}.consultation p{font-size:12px;line-height:1.9;margin:10px 0 18px}
.line-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:0;border-radius:12px;background:var(--line);color:#fff;text-decoration:none;font:700 16px/1.2 inherit;font-size:16px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.line-button svg{width:24px;height:24px;flex-shrink:0}.line-button>span:last-child{font-size:23px;margin-left:4px}.line-button:hover{background:#05b64d}.line-button:active{background:#049e43}.line-button:focus-visible{outline:3px solid #222;outline-offset:3px}.line-button[aria-disabled="true"]{cursor:default}
.fixed-cta{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;padding:10px 14px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:#fff;z-index:10}.availability,.free-note{display:block;font-size:10px;line-height:1.5;margin-top:5px;text-align:center;color:#686868}[hidden]{display:none!important}.noscript{position:fixed;top:0;left:0;right:0;background:#fff;padding:8px;font-size:12px;z-index:20}
@media(max-width:359px){.hero h1{font-size:24px}.hero p{font-size:11px}.consultation{padding-inline:12px}.consultation h2{font-size:20px}.line-button{gap:8px;font-size:15px}}
/* 見出しの装飾：漫画を主役に、住宅相談らしい落ち着きを添える */
.hero{position:relative;padding-top:17px;border-top:4px solid #ffb34e;border-bottom:1px solid #f1e5d5}
.eyebrow{display:inline-flex;align-items:center;gap:6px;color:#526358;font-size:11px;letter-spacing:.05em;font-weight:700;margin-bottom:9px}
.eyebrow svg{width:18px;height:18px;color:#d47c16}
.hero h1{color:#263d36}.hero h1 span{position:relative;isolation:isolate;white-space:nowrap}
.hero h1 span::after{content:"";position:absolute;left:-2px;right:-2px;bottom:1px;height:8px;background:#fff0d4;z-index:-1;border-radius:2px}
.hero p{color:#53615b}
.consultation{margin:16px 10px 0;padding:18px 14px 20px;border:1px solid #dae9df;border-radius:14px;background:#f6fbf7}
.section-label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.05em;color:#4c7160;margin-bottom:8px}
.section-label::before,.section-label::after{content:"";width:23px;height:1px;background:#a6c6b2}
.consultation h2{color:#263d36}.consultation h2 span{display:inline-block;border-bottom:3px solid #ffe0ac;line-height:1.35;padding-bottom:2px}
.consultation p{color:#53615b}
.line-button{font-family:inherit;line-height:1.2;box-shadow:0 3px 0 #059c43}
.fixed-cta{border-top-color:#dce9df}
@media(max-width:359px){.consultation{margin-inline:8px;padding-inline:10px}.consultation h2{font-size:19px}.line-button{gap:6px;font-size:14px}}
/* ファーストビュー：サービス内容と次の行動をひと目で伝える */
.hero{padding:14px 18px 0;border-top:5px solid #f9a235;overflow:hidden;background:radial-gradient(circle at 100% 13%,#fff0d6 0 51px,transparent 52px),radial-gradient(circle at 0 54%,#edf6ee 0 37px,transparent 38px),#fff}
.eyebrow{display:flex;justify-content:center;font-size:10px;margin-bottom:10px}
.hero-tag{display:inline-block;position:relative;padding:5px 18px;margin-bottom:10px;border:1px solid #bdd7c8;background:#f0f8f3;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#315b46}
.hero h1{font-size:30px;line-height:1.4;letter-spacing:.02em}.hero h1 span::after{height:10px;bottom:0;background:#ffe6ae}
.hero p{font-size:11px;margin-top:10px}
.support-points{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:14px 0 16px;gap:7px}
.support-points li{position:relative;padding:9px 2px 8px;background:#fff;border:1px solid #dce9df;border-radius:9px;color:#304f3e;font-size:11px;font-weight:700;line-height:1.55;box-shadow:0 2px 0 #edf3ef}
.support-points li>span{display:block;margin:0 auto 3px;width:19px;height:19px;line-height:19px;background:#eaf6ee;border-radius:50%;color:#318258;font-size:12px}
.next-step{display:block;font-size:10px;line-height:1.6;margin:10px 0 12px;color:#53615b}
.story-link{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;margin:0 -18px;background:#fff7e9;border-top:1px solid #f6e5c9;text-decoration:none;color:#6f5026;font-size:11px;font-weight:700}
.story-link>span{font-size:17px}.story-link:focus-visible{outline:3px solid #263d36;outline-offset:-3px}
.fixed-cta.is-redundant{visibility:hidden;pointer-events:none}
.consultation{border-top:4px solid #89b99c}.consultation .section-label{color:#385d46}
@media(max-width:359px){.hero{padding-inline:14px}.hero h1{font-size:27px}.support-points{gap:5px}.support-points li{font-size:10px}.story-link{margin-inline:-14px;font-size:10px}}