/* global React */ const { useState, useEffect, useRef } = React; // ============================================================ // Shared style — palette swap // ============================================================ const PALETTES = { navy: { primary: '#1e3a5f', primaryDark: '#142845', accent: '#c8a67b', accentDark: '#a8865c', bg: '#faf9f6', ink: '#1c1c1c', name: 'Heritage Navy' }, charcoal: { primary: '#1a1a1a', primaryDark: '#000000', accent: '#b8956a', accentDark: '#947249', bg: '#f6f4ee', ink: '#1a1a1a', name: 'Modern Charcoal' }, forest: { primary: '#2d3e2c', primaryDark: '#1a2618', accent: '#a89576', accentDark: '#86755a', bg: '#f7f5ee', ink: '#1f261d', name: 'Forest Craftsman' }, }; function applyPalette(name) { const p = PALETTES[name] || PALETTES.navy; const r = document.documentElement; r.style.setProperty('--primary', p.primary); r.style.setProperty('--primary-dark', p.primaryDark); r.style.setProperty('--accent', p.accent); r.style.setProperty('--accent-dark', p.accentDark); r.style.setProperty('--bg', p.bg); r.style.setProperty('--ink', p.ink); } // ============================================================ // Reveal-on-scroll hook // ============================================================ function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.12 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }); } // ============================================================ // NAV // ============================================================ function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ ['会社案内', '#about'], ['事業内容', '#services'], ['施工事例', '#works'], ['お客様の声', '#voice'], ['よくある質問', '#faq'], ['アクセス', '#access'], ]; return (
天野工務店 {/* Desktop nav */} {/* Mobile toggle */}
{/* Mobile drawer */} {open && (
{links.map(([label, href]) => ( setOpen(false)} style={{ display: 'block', padding: '14px 0', borderBottom: '1px solid var(--line)', color: 'var(--ink)', fontSize: 15, }}>{label} ))} setOpen(false)} style={{ display: 'block', marginTop: 16, padding: '14px', background: 'var(--accent)', color: '#fff', textAlign: 'center', fontWeight: 600, letterSpacing: '0.08em', }}>お問い合わせ
)}
); } function LogoMark({ color = '#fff', accent = '#c8a67b' }) { return ( {/* roof + frame mark */} ); } // ============================================================ // HERO // ============================================================ function Hero() { return (
{/* Background image */}
); } function Arrow({ color = 'currentColor' }) { return ( ); } // ============================================================ // SECTION TITLE // ============================================================ function SectionTitle({ kicker, jp, en, align = 'left', light = false }) { return (
— {kicker}

{jp}

{en &&
{en}
}
); } // ============================================================ // ABOUT // ============================================================ function About() { return (
天野工務店の職人が住宅の建築現場で作業する様子

暮らしを編むこと。
街と、世代を、繋ぐこと。

1965年の創業以来、半世紀以上にわたり杉並の地で、住まいづくりに向き合ってまいりました。
代々受け継がれた職人の技と、現代の暮らしに応える設計力。その両輪で、ご家族一人ひとりに寄り添う家を、一棟ずつ丁寧に建てています。

建てて終わりではなく、住み始めてからが本当のお付き合い。アフターメンテナンスまで、地域に根ざした工務店だからこそできる、長いお付き合いをお約束します。

); } function Stat({ n, unit, label }) { return (
{n}{unit}
{label}
); } // ============================================================ // PHILOSOPHY / 代表挨拶 // ============================================================ function Philosophy() { return (
); } // ============================================================ // SERVICES // ============================================================ function Services() { const items = [ { no: '01', en: 'NEW BUILD', jp: '新築・注文住宅', desc: '土地探しから設計、施工までワンストップ。ご家族の暮らしに合わせた一邸を、構造から仕上げまで丁寧に。', tags: ['注文住宅', '木造軸組', '長期優良住宅'], img: 'https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1200&q=80', alt: '天野工務店が施工した木造軸組工法の新築注文住宅の外観', }, { no: '02', en: 'RENOVATION', jp: 'リフォーム・リノベーション', desc: 'キッチン・浴室の部分改修から、間取りを変える大規模リノベまで。住み慣れた家を、これからの暮らしに合わせて。', tags: ['水回り', 'フルリノベ', '耐震補強'], img: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80', alt: 'リフォーム後の明るく開放的なリビング・ダイニングキッチン', }, { no: '03', en: 'MAINTENANCE', jp: 'メンテナンス・修繕', desc: '雨漏り、屋根・外壁の補修から、ちょっとした建付けの調整まで。建てた後も、長くお付き合いします。', tags: ['外装補修', '定期点検', '緊急対応'], img: 'https://images.unsplash.com/photo-1581094288338-2314dddb7ece?w=1200&q=80', alt: '住宅の外壁・屋根のメンテナンス作業を行う職人', }, ]; return (

新築から、リフォーム、日々のメンテナンスまで。住まいに関わるすべてを、一貫してお任せいただけます。

{items.map((s, i) => (
e.currentTarget.style.transform = 'translateY(-6px)'} onMouseLeave={(e) => e.currentTarget.style.transform = ''}>
{s.alt}
{s.en}
{s.no}

{s.jp}

{s.desc}

{s.tags.map(t => ( {t} ))}
))}
); } // ============================================================ // WORKS / 施工事例 with Before / After slider // ============================================================ function Works() { const works = [ { cat: 'リノベーション', title: '築40年戸建を、光あふれる二世帯住宅へ', area: '東京都杉並区', year: '2024', type: 'フルリノベ', img: 'https://images.unsplash.com/photo-1600210492493-0946911123ea?w=1400&q=80', alt: 'フルリノベーション後の白を基調とした明るい二世帯住宅のリビング', }, { cat: '新築', title: '木の温もりを感じる、夫婦のための平屋', area: '東京都練馬区', year: '2024', type: '注文住宅', img: 'https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1400&q=80', alt: '木の温もりを感じる平屋の新築注文住宅の外観', }, { cat: 'リフォーム', title: '使いやすさを追求した、回遊型キッチン', area: '東京都中野区', year: '2023', type: '水回り', img: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1400&q=80', alt: 'リフォーム後の使いやすい回遊型アイランドキッチン', }, { cat: '新築', title: '中庭を囲む、コの字型の家', area: '東京都世田谷区', year: '2023', type: '注文住宅', img: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1400&q=80', alt: '中庭を囲むコの字型の現代的な新築住宅', }, { cat: 'リノベーション', title: 'マンションを、ヴィンテージスタイルに', area: '東京都新宿区', year: '2023', type: 'マンション改修', img: 'https://images.unsplash.com/photo-1600121848594-d8644e57abab?w=1400&q=80', alt: 'ヴィンテージスタイルにリノベーションされたマンションリビング', }, { cat: 'リフォーム', title: '老朽化した浴室を、ホテルライクな空間へ', area: '東京都杉並区', year: '2023', type: '水回り', img: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1400&q=80', alt: 'リフォーム後のホテルライクな浴室・サニタリースペース', }, ]; const [filter, setFilter] = useState('すべて'); const cats = ['すべて', '新築', 'リフォーム', 'リノベーション']; const filtered = filter === 'すべて' ? works : works.filter(w => w.cat === filter); return (
{/* Featured Before / After */}
FEATURED — BEFORE / AFTER

築35年の戸建てが、
光あふれる住まいへ。

南向きの大開口と吹抜けを新設。間取りの大胆な変更で、家族が自然に集まる開放的なリビングへと生まれ変わりました。スライダーを動かして変化をご覧ください。

所在地
東京都杉並区
工事種別
フルリノベーション
工期
約4ヶ月
竣工
2024年
{/* Filter tabs */}
{cats.map(c => ( ))}
{/* Grid */}
{filtered.map((w, i) => (
{w.alt} e.currentTarget.style.transform = 'scale(1.05)'} onMouseLeave={e => e.currentTarget.style.transform = ''} />
{w.cat} — {w.area} / {w.year}

{w.title}

))}
); } function BeforeAfter({ before, after, beforeAlt, afterAlt }) { const [pos, setPos] = useState(50); const ref = useRef(null); const dragging = useRef(false); const update = (clientX) => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const p = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100)); setPos(p); }; const start = (e) => { dragging.current = true; const cx = e.touches ? e.touches[0].clientX : e.clientX; update(cx); }; const move = (e) => { if (!dragging.current) return; const cx = e.touches ? e.touches[0].clientX : e.clientX; update(cx); }; const end = () => { dragging.current = false; }; useEffect(() => { window.addEventListener('mousemove', move); window.addEventListener('mouseup', end); window.addEventListener('touchmove', move); window.addEventListener('touchend', end); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', end); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', end); }; }, []); return (
{afterAlt}
{beforeAlt}
{/* Labels */}
BEFORE
AFTER
{/* Handle */}
); } // ============================================================ // VOICE / お客様の声 // ============================================================ function Voice() { const reviews = [ { name: 'K. 様', area: '杉並区', type: '新築注文住宅', stars: 5, text: '土地探しから親身に相談に乗っていただき、想像以上の家を建てていただきました。打ち合わせの一つ一つに丁寧に対応いただき、職人さんも本当に誠実な方ばかり。建てた後の点検も安心です。', }, { name: 'M. 様', area: '練馬区', type: 'フルリノベーション', stars: 5, text: '古い実家を二世帯にリノベーションしていただきました。古い家の良さを残しつつ、現代の暮らしに合わせた間取りに。両親も大変喜んでおり、本当にお願いしてよかったです。', }, { name: 'T. 様', area: '中野区', type: '水回りリフォーム', stars: 5, text: 'キッチンと浴室のリフォームをお願いしました。予算の中で最善の提案をいただき、工期も予定通り。何より、お見積りが明朗で安心してお任せできました。', }, { name: 'S. 様', area: '世田谷区', type: '新築注文住宅', stars: 5, text: 'こだわりの平屋を建てたいという要望に、何度も図面を引き直しながら付き合っていただきました。完成した家は本当に住み心地が良く、毎日が楽しいです。', }, ]; return (
4.9
Google口コミ・124件のレビュー
{reviews.map((r, i) => (

「{r.text}」

{r.name}
{r.area}・{r.type}
))}
Google口コミをすべて見る
); } function Stars({ n = 5 }) { return (
{[1,2,3,4,5].map(i => ( ))}
); } function GoogleG({ size = 24 }) { return ( ); } // ============================================================ // FAQ // ============================================================ function FAQ() { const items = [ { q: '相談や見積りは無料ですか？', a: 'はい、初回のご相談・現地調査・お見積りはすべて無料です。お電話または問い合わせフォームより、お気軽にご連絡ください。' }, { q: '小さなリフォームでも依頼できますか？', a: 'もちろんです。蛇口の交換、網戸の張替えといった小さな工事から、フルリノベーションまで、住まいに関わるご相談はすべてお受けしています。' }, { q: '工事中の家の中は片付けが必要ですか？', a: '工事範囲によって異なります。事前にご説明と養生計画を共有しますので、ご不安な点はお気軽にお尋ねください。家具の移動なども一緒にお手伝いいたします。' }, { q: '保証やアフターサービスはありますか？', a: '当社施工物件には、最長10年の構造保証と、定期点検（1年・2年・5年・10年）をお付けしています。建てた後も、長くお付き合いさせていただきます。' }, { q: '対応エリアを教えてください', a: '東京都杉並区を拠点に、中野区・練馬区・世田谷区・新宿区を中心に対応しております。それ以外の地域もご相談ください。' }, { q: '住宅ローンの相談もできますか？', a: '提携の金融機関のご紹介や、資金計画のシミュレーションも承っております。お気軽にご相談ください。' }, ]; const [open, setOpen] = useState(0); return (
{items.map((it, i) => { const isOpen = open === i; return (
A.

{it.a}

); })}
); } // ============================================================ // ACCESS / Google Map // ============================================================ function Access({ mapEmbed }) { return (

株式会社 天野工務店

{[ ['所在地', '〒166-0000 東京都杉並区○○町1-2-3'], ['電話', '03-0000-0000'], ['FAX', '03-0000-0001'], ['営業時間', '9:00 – 18:00（日曜・祝日定休）'], ['代表者', '天野 健司'], ['設立', '1965年（昭和40年）'], ['事業内容', '新築工事、リフォーム・リノベーション工事、不動産売買仲介'], ['建設業許可', '東京都知事許可（般-○○）第○○○○○○号'], ].map(([k, v]) => (
{k}
{v}
))}
); } // ============================================================ // CONTACT // ============================================================ function Contact() { const [sent, setSent] = useState(false); const [form, setForm] = useState({ name: '', email: '', phone: '', type: '新築', message: '' }); const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 4000); }; const field = { width: '100%', padding: '16px 0', background: 'transparent', border: 'none', borderBottom: '1px solid rgba(255,255,255,0.3)', color: '#fff', fontSize: 15, outline: 'none', }; const label = { fontSize: 12, letterSpacing: '0.15em', color: 'rgba(255,255,255,0.7)' }; return (

ご相談・お見積りはすべて無料です。
新築・リフォーム、どんな小さなことでも、
お気軽にお問い合わせください。

お電話でのご相談
03 — 0000 — 0000
平日・土曜 9:00 – 18:00
お名前 *
setForm({...form, name: e.target.value})} style={field} />
メールアドレス *
setForm({...form, email: e.target.value})} style={field} />
お電話番号
setForm({...form, phone: e.target.value})} style={field} />
ご相談内容
{['新築', 'リフォーム', 'リノベーション', 'メンテナンス', 'その他'].map(t => ( ))}
ご質問・ご要望