{overlay > 0 &&

}

); } return (

{label && {label}}

); } function Container({ children, wide = false, style }) { return

{children}

; } // ── Header (responsive) ───────────────────────────────────── // サービスは「借りたい方へ / 貸したい方へ」の2分岐をメガメニューで表示。 const SERVICE_MENU = [ { en:'For Tenants', label:'借りたい方へ', sub:'事業用不動産賃貸仲介', route:'lease', desc:'物件探しから条件交渉・契約まで一括代行。本業に集中いただけます。', icon:'handshake' }, { en:'For Owners', label:'貸したい方へ', sub:'事業用不動産物件管理', route:'manage', desc:'攻めのリーシングと丁寧な管理で、空室を早期成約へ。', icon:'shield' }, ]; const NAV = [ { label:'物件を探す', route:'search' }, { label:'サービス', route:'services', mega:true }, { label:'お客様の声', route:'projects' }, { label:'不動産コラム', route:'columns' }, { label:'はじめての方へ', route:'guide' }, { label:'会社概要', route:'company' }, ]; function Header({ onNav, favCount = 0, current = 'home' }) { const { isDesktop } = useViewport(); const [open, setOpen] = React.useState(false); const [mega, setMega] = React.useState(false); const megaTimer = React.useRef(null); React.useEffect(() => { setOpen(false); setMega(false); }, [current]); React.useEffect(() => () => { if (megaTimer.current) clearTimeout(megaTimer.current); }, []); const openMega = () => { if (megaTimer.current) clearTimeout(megaTimer.current); setMega(true); }; const closeMega = () => { if (megaTimer.current) clearTimeout(megaTimer.current); megaTimer.current = setTimeout(()=>setMega(false), 220); }; const navLink = (n) => { const active = current === n.route; if (n.mega) { return (

onNav(n.route)} style={{ cursor:'pointer', display:'inline-flex', alignItems:'center', gap:5, font:`${active?'var(--fw-bold)':'var(--fw-medium)'} var(--t-sm)/1 var(--font-body)`, color: active ? 'var(--blue-700)' : 'var(--text-strong)', paddingBottom:4, borderBottom: active ? '2px solid var(--blue-600)' : '2px solid transparent' }}> {n.label} {mega && ( // 透明ブリッジ込み：top:100% + paddingTop で「サービス」とパネルの間の隙間を埋め、 // マウスが下に移動しても hover が途切れないようにする。

{SERVICE_MENU.map(s=>( onNav(s.route)} style={{ cursor:'pointer', display:'flex', flexDirection:'column', gap:8, padding:'var(--sp-4)', borderRadius:'var(--r-sm)', border:'1px solid var(--border-subtle)', background:'var(--surface)', transition:'background var(--dur-fast) var(--ease-out)' }} onMouseEnter={e=>e.currentTarget.style.background='var(--blue-50)'} onMouseLeave={e=>e.currentTarget.style.background='var(--surface)'}> {s.en} {s.label} {s.sub} {s.desc} ))}

)}

); } return ( onNav(n.route)} style={{ cursor:'pointer', font:`${active?'var(--fw-bold)':'var(--fw-medium)'} var(--t-sm)/1 var(--font-body)`, color: active ? 'var(--blue-700)' : 'var(--text-strong)', paddingBottom:4, borderBottom: active ? '2px solid var(--blue-600)' : '2px solid transparent' }}>{n.label} ); }; return (

{/* utility strip */}

{isDesktop ? '事業用不動産の総合パートナー｜オフィス・店舗・教室・倉庫・工場' : '事業用不動産の総合パートナー'} {isDesktop && onNav('company')} style={{ cursor:'pointer', color:'rgba(255,255,255,0.86)' }}>会社概要} {isDesktop && onNav('news')} style={{ cursor:'pointer', color:'rgba(255,255,255,0.86)' }}>お知らせ} {isDesktop && 平日 10:00〜18:00} 03-5937-7544

{/* main bar */}

onNav('home')} aria-label="ホーム" style={{ cursor:'pointer', flex:'none' }}> {isDesktop && ( )}

onNav('favorites')} aria-label="お気に入り" style={{ cursor:'pointer', position:'relative', display:'inline-flex', flexDirection:'column', alignItems:'center', gap:2, color:'var(--blue-800)' }}> {favCount} {isDesktop && お気に入り} {isDesktop ? ( ) : ( )}

{/* mobile drawer */} {open && (

setOpen(false)} style={{ position:'fixed', inset:0, zIndex:60, background:'rgba(7,24,43,0.5)' }}>

e.stopPropagation()} style={{ position:'absolute', top:0, right:0, bottom:0, width:'min(86vw, 360px)', background:'var(--surface)', boxShadow:'var(--shadow-xl)', display:'flex', flexDirection:'column', padding:'18px 20px', overflowY:'auto' }}>

03-5937-7544 営業時間／平日 10:00〜18:00

)}

); } // ── Mobile sticky bottom action bar ───────────────────────── function MobileBar({ onNav, current }) { const { isDesktop } = useViewport(); if (isDesktop) return null; const items = [ { route:'home', label:'ホーム', icon:'building' }, { route:'search', label:'物件検索', icon:'search' }, { route:'favorites', label:'お気に入り', icon:'heart' }, { route:'contact', label:'相談', icon:'mail' }, ]; return ( ); } // ── Reusable page hero band + breadcrumb ──────────────────── function Crumbs({ items = [], onNav }) { return ( ); } function PageHero({ marker, title, lead, crumbs, onNav, icon = 'building', image, position = 'center' }) { return (

{crumbs &&

} {marker && {marker}}

{lead &&
{lead}
}

); } // ── スマホ用：横スクロール＋自動スライドのカルーセル（ループ） ── function AutoCarousel({ children, basis = '46%' }) { const ref = React.useRef(null); const items = React.Children.toArray(children); React.useEffect(() => { const el = ref.current; if (!el) return; let i = 0; const id = setInterval(() => { if (!el.children.length) return; i = (i + 1) % el.children.length; const c = el.children[i]; el.scrollTo({ left: c.offsetLeft - el.offsetLeft, behavior: 'smooth' }); }, 3000); return () => clearInterval(id); }, [items.length]); return (

{items.map((ch, idx) => (

{ch}

))}

); } // ── Full-bleed photo band（テキスト/アイコン連続区間のビジュアルブレイク） ── function PhotoBand({ src, eyebrow, title, sub, position = 'center 45%', cta, ctaRoute, onNav, height }) { const { isMobile } = useViewport(); return (

{eyebrow && ( {eyebrow} )} {title &&

{title}

} {sub &&

{sub}

} {cta && onNav && (

)}

); } // ── Footer (responsive, route-linked) ─────────────────────── const FOOTER_COLS = [ { h:'物件を探す', links:[['オフィスを探す','search'],['店舗を探す','search'],['教室を探す','search'],['倉庫を探す','search'],['工場を探す','search']] }, { h:'エリアから探す', links:[['東京都','search'],['神奈川県','search'],['埼玉県','search']] }, { h:'サービス', links:[['借りたい方へ（賃貸仲介）','lease'],['貸したい方へ（物件管理）','manage'],['不動産コラム','columns'],['お客様の声','projects']] }, { h:'お役立ち情報', links:[['はじめての方へ','guide'],['よくあるご質問','guide'],['お知らせ','news'],['ご相談・お問い合わせ','contact']] }, { h:'会社情報', links:[['会社概要','company'],['プライバシーポリシー','company'],['ご相談・お問い合わせ','contact']] }, ]; const LEGAL = [['プライバシーポリシー','company'],['利用規約','company'],['個人情報のお取扱い','company'],['Cookie設定','company']]; function Footer({ onNav }) { const { isDesktop } = useViewport(); return ( ); } Object.assign(window, { Icon, Logo, Photo, Container, useViewport, Header, Footer, MobileBar, PageHero, PhotoBand, AutoCarousel, Crumbs });

{lead && {lead}}

{lead &&
{lead}
}