body { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.draft-banner { margin: 0; padding: 10px 16px; background: #e5ebe6; font-size: .75rem; text-align: center; }
.site-header { max-width: 760px; margin: auto; padding: 20px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.site-header strong { font-size: .95rem; }
.line-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 10px 16px; border-radius: 8px; background: #247447; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; }
main { padding-top: 16px; }
.hero { margin-bottom: 56px; }
.hero h1 { max-width: 620px; }
.draft-label { font-size: .9rem; display: inline-block; }
.placeholder { border: 2px dashed #9ca5a0; background: #ecefed; color: #4c5751; border-radius: 10px; min-height: 100px; padding: 22px 16px; margin: 16px 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow-wrap: anywhere; }
.placeholder small { display: block; font-size: .75rem; color: #606a64; font-weight: 400; }
.photo-placeholder { aspect-ratio: 4 / 3; width: 100%; max-width: 480px; max-height: 240px; margin-inline: auto; }
.map-placeholder { min-height: 220px; }
.section-heading { padding: 0 4px 12px; }
.page-section { margin-top: 56px; }
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 24px 46px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #245b43; color: white; text-align: center; line-height: 32px; font-weight: 700; }
.steps .placeholder { margin-bottom: 0; }
.faq-item + .faq-item { border-top: 1px solid #d7e0d8; padding-top: 20px; margin-top: 20px; }
.site-footer { max-width: 760px; margin: auto; padding: 0 16px 32px; text-align: center; }
.fixed-contact { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; border-top: 1px solid #d7e0d8; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #f3f6f3; text-align: center; }
.fixed-contact .line-button { display: flex; max-width: 728px; margin: auto; }
.fixed-contact small { display: block; font-size: .7rem; margin-top: 4px; color: #51615b; }
@media (min-width: 600px) { main { padding-top: 24px; } .hero { padding-top: 16px; } }