*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --green: #1A6B47; --green-mid: #2A8A5C; --green-light: #EAF4EE; --green-pale: #F4FAF6; --ink: #1C1C1A; --ink-mid: #4A4A47; --ink-light: #8A8A85; --border: #E2E0D8; --bg: #FAFAF8; --white: #FFFFFF; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } .hero { background: var(--ink); padding: 64px 24px 56px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, #1A6B4722 0%, transparent 70%); pointer-events: none; } .hero-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-mid); border: 1px solid #2A8A5C44; border-radius: 20px; padding: 4px 14px; margin-bottom: 20px; } .hero h1 { font-family: 'DM Serif Display', serif; font-size: clamp(28px, 5vw, 44px); font-weight: 400; color: var(--white); line-height: 1.2; margin-bottom: 14px; } .hero p { font-size: 15px; color: #AAAAAA; max-width: 460px; margin: 0 auto; } .info-strip { display: flex; gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); } .info-card { flex: 1; background: var(--white); padding: 28px 24px; display: flex; align-items: flex-start; gap: 14px; transition: background .2s; } .info-card:hover { background: var(--green-pale); } .info-icon { width: 38px; height: 38px; background: var(--green-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .info-icon svg { width: 18px; height: 18px; color: var(--green); } .info-text { display: flex; flex-direction: column; gap: 2px; } .info-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-light); } .info-value { font-size: 14px; font-weight: 500; color: var(--ink); } .info-value a { color: var(--green); text-decoration: none; font-weight: 600; } .info-value a:hover { text-decoration: underline; } .info-sub { font-size: 12px; color: var(--ink-light); margin-top: 2px; } .hours-bar { background: var(--green-pale); border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .hours-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); flex-shrink: 0; } .hours-items { display: flex; gap: 24px; flex-wrap: wrap; } .hours-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-mid); } .hours-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .hours-dot.open { background: #2A8A5C; } .hours-dot.closed { background: #D1D0CC; } .main-wrap { max-width: 1080px; margin: 0 auto; padding: 52px 24px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .section-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; } .section-title { font-family: 'DM Serif Display', serif; font-size: 26px; font-weight: 400; color: var(--ink); margin-bottom: 6px; line-height: 1.25; } .section-desc { font-size: 14px; color: var(--ink-light); margin-bottom: 28px; } .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item:first-child { border-top: 1px solid var(--border); } .faq-btn { width: 100%; background: none; border: none; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--ink); transition: color .2s; } .faq-btn:hover { color: var(--green); } .faq-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-light); transition: transform .25s, color .2s; } .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--green); } .faq-item.open .faq-btn { color: var(--green); } .faq-body { display: none; padding: 0 0 16px; font-size: 13.5px; color: var(--ink-mid); line-height: 1.7; } .faq-item.open .faq-body { display: block; } .faq-body a { color: var(--green); font-weight: 500; text-decoration: none; } .faq-body a:hover { text-decoration: underline; } .form-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px; box-shadow: 0 2px 24px #0000000a; } .wa-note { margin-top: 16px; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--green-pale); border: 1px solid var(--green-light); border-radius: 8px; font-size: 12.5px; color: var(--ink-mid); } .wa-note a { color: var(--green); font-weight: 600; text-decoration: none; } .wa-note a:hover { text-decoration: underline; } .wa-note svg { flex-shrink: 0; color: var(--green); } @media (max-width: 720px) { .info-strip { flex-direction: column; gap: 0; } .info-card { border-bottom: 1px solid var(--border); } .main-wrap { grid-template-columns: 1fr; gap: 40px; } .hours-bar { padding: 16px 20px; gap: 12px; } .form-card { padding: 28px 20px; } }document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.faq-btn').forEach(function(btn) { btn.addEventListener('click', function() { var item = btn.closest('.faq-item'); var isOpen = item.classList.contains('open'); document.querySelectorAll('.faq-item.open').forEach(function(el) { el.classList.remove('open'); }); if (!isOpen) item.classList.add('open'); }); }); });