// shell-d.jsx — Variant D の共通シェル（HBFooter / HBLayout / HBSubHero） // variant-d.jsx を先に読み込んで window.HBHeader / hbcp / fontJP 等が公開されている前提。 // サブページ (page-hatena-dx 等) はこのシェルで HBHeader + body + HBFooter を巻き取る。 (function(){ const { HBHeader, HBLogo, HBChars, HB_NAV, HB_BASE, HB_WANTEDLY, hbcp, fontEN, fontENSans, fontJP, fontMono, ease, hbStyles } = window; // ---- HBFooter (PC) ---- // フッターに掲載する法人 (本番 hatenabase.jp の構成と一致): // 1. はてなベース株式会社（メイン） — Service/Information/Recruit/Other 4 列 // 2. はてなベース税理士事務所 — Service/Information/Recruit/Other 4 列 // 3. はてなベース社会保険労務士事務所 — 名称・概要のみ // // GROUP COMPANIES (variant-d.jsx 側) のカード一覧は社労士事務所のみ。 function HBFooter() { const COMPANIES = [ // 1. はてなベース株式会社（メイン） { name: 'はてなベース株式会社', en: 'HatenaBase, Inc.', tagline: '成長するスタートアップに "攻めるバックオフィス" を構築する。', addr: '東京都新宿区愛住町23-1 woody21 6階', mail: 'info@hatenabase.com', tel: '03-4500-2647', url: HB_BASE, sections: [ { h:'Service', jp:'事業・サービス', items:[ {t:'DXシステム導入・BPRシステム導入支援', href:`${HB_BASE}/hatena-dx`}, {t:'DX・AI人材育成／クラウド会計人材の育成', href:`${HB_BASE}/hatena-content`}, {t:'経理業務改善・DX支援会計コンサル', href:`${HB_BASE}/hatena-bi`}, ]}, { h:'Information', jp:'情報', items:[ {t:'導入事例・実績', href:`${HB_BASE}/achievements`}, {t:'お知らせ', href:`${HB_BASE}/news`}, {t:'ブログ', href:`${HB_BASE}/blog`}, {t:'私たちについて', href:`${HB_BASE}/about-us`}, {t:'お問い合わせ', href:`${HB_BASE}/contact`}, ]}, { h:'Recruit', jp:'採用', items:[ {t:'採用情報', href:`${HB_BASE}/recruit`}, {t:'一般採用', href:HB_WANTEDLY, ext:true}, {t:'新卒採用・インターン採用', href:`${HB_WANTEDLY}/newgrad`, ext:true}, ]}, { h:'Other', jp:'その他', items:[ {t:'利用規約', href:`${HB_BASE}/terms`}, {t:'資料請求', href:`${HB_BASE}/document-request`}, {t:'コンテンツクリエイター向け', href:`${HB_BASE}/for-content-creaters`}, ]}, ], }, // 2. はてなベース税理士事務所 { name: 'はてなベース税理士事務所', en: 'HatenaBase Tax Office', tagline: 'クラウド会計を活用して、質の高い経営判断を。創業期からベンチャー企業、上場企業まで対応する税務の専門家。', addr: '東京都新宿区愛住町23-1 woody21 6階', mail: 'tamu@hatenabase.com', tel: '', url: `${HB_BASE}/tax-accountant`, sections: [ { h:'Service', jp:'料金・サービス', items:[ {t:'税務顧問', href:`${HB_BASE}/tax-accountant/service/tax-advisor`}, {t:'融資支援', href:`${HB_BASE}/tax-accountant/service/financing-support`}, {t:'管理会計コンサル', href:`${HB_BASE}/tax-accountant/service/consulting`}, ]}, { h:'Information', jp:'情報', items:[ {t:'導入事例・実績', href:`${HB_BASE}/office-achievements`}, {t:'お知らせ', href:`${HB_BASE}/office-news`}, {t:'ブログ', href:`${HB_BASE}/blog`}, {t:'私たちについて', href:`${HB_BASE}/tax-accountant/about-us`}, {t:'お問い合わせ', href:`${HB_BASE}/tax-accountant/contact`}, ]}, { h:'Recruit', jp:'採用', items:[ {t:'採用情報', href:`${HB_BASE}/tax-accountant/recruit`}, {t:'一般採用', href:HB_WANTEDLY, ext:true}, {t:'新卒採用・インターン採用', href:`${HB_WANTEDLY}/newgrad`, ext:true}, ]}, { h:'Other', jp:'その他', items:[ {t:'利用規約', href:`${HB_BASE}/tax-accountant/terms`}, ]}, ], }, // 3. はてなベース社会保険労務士事務所 { name: 'はてなベース社会保険労務士事務所', en: 'HatenaBase Labor Office', tagline: '労務・人事・社会保険手続きに関する専門家。', addr: '東京都新宿区愛住町23-1 woody21 6階', mail: '', tel: '', url: '', sections: [], }, ]; return ( ); } // ---- HBSubHero: サブページ用の共通ヒーロー ---- // crumb: パンくず文字列 (例: "Service / Hatena, DX.") // en: 英語ラベル (例: "Hatena, DX.") // jp: メインタイトル日本語 (例: "DX・システム開発") // tag: italic 一行 (例: "Designing the new operating system of business.") // lead: 段落本文 function HBSubHero({ crumb, en, jp, tag, lead }) { return (
{[...Array(9)].map((_,i)=>())}
{crumb && (
{crumb}
)} {en && (
{en.toUpperCase()}
)}

{jp}

{tag && (
{tag}
)} {lead && (

{lead}

)}
); } // ---- HBLayout: HBHeader + 子ノード + HBFooter ---- function HBLayout({ children }) { const rootRef = React.useRef(null); React.useEffect(() => { // 共通 reveal 観測 const root = rootRef.current; if (!root) return; const reveals = root.querySelectorAll('.hb-chars, .hb-up'); const io = new IntersectionObserver(es => { es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } }); }, { threshold: 0.05, rootMargin: '0px 0px -5% 0px' }); reveals.forEach(el => { io.observe(el); if (el.closest('.hb-hero, .hb-subhero')) { requestAnimationFrame(() => el.classList.add('is-in')); } }); return () => io.disconnect(); }, []); return (
{children}
); } Object.assign(window, { HBFooter, HBSubHero, HBLayout }); })();