// Variant D · v5 — White × Blue ブランドミニマル / 抽象Canvas+SVG / キネティックタイポ
// 写真ゼロ。線・円・グリッド・ノイズだけで世界観を構築。

const hbcp = {
  white:'#FFFFFF',
  paper:'#FAFAFA',
  paperWarm:'#F5F4F0',
  ink:'#0E0E14',
  inkSoft:'#3A3A45',
  inkLight:'#8A8A93',
  line:'#E8E6DF',
  lineSoft:'#F0EEE8',
  blue:'#1F61AB',
  blueDeep:'#0F3B72',
  blueLight:'#E8EFF8',
  blueGhost:'#F4F8FD',
};
const fontEN     = '"Cormorant Garamond", "Times New Roman", serif';
const fontENSans = '"Inter", system-ui, sans-serif';
const fontJP     = '"Zen Kaku Gothic New", "Noto Sans JP", sans-serif';
const fontJPSerif= '"Shippori Mincho", "Noto Serif JP", serif';
const fontMono   = '"JetBrains Mono", monospace';
const ease = 'cubic-bezier(.16,.88,.2,1)';

const styles = `
  @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

  /* スプラッシュは front-page.php 側で定義（document.body 直下にマウント）。
     variant-d.jsx 内の旧 HBSplash 用 CSS は撤去済み。 */

  @keyframes hb-fade { to { opacity:1; } }

  /* ====== 共通 reveal ====== */
  .hb-chars { display:inline; }
  .hb-chars .hb-line { display:block; overflow:hidden; padding-bottom:.22em; }
  .hb-chars .hb-c {
    display:inline-block; opacity:0; transform: translateY(105%);
    transition: opacity .55s ${ease}, transform .55s ${ease};
  }
  .hb-chars.is-in .hb-c { opacity:1; transform:translateY(0); }

  /* ヒーロー内のテキストはリビール待ちにせず常時表示（IO/transitionのバグで非表示になる事故回避） */
  .hb-hero .hb-chars .hb-c,
  .hb-hero .hb-up { opacity:1 !important; transform:none !important; transition:none !important; }

  .hb-up { opacity:0; transform: translateY(28px); transition: opacity .6s ${ease}, transform .6s ${ease}; }
  .hb-up.is-in { opacity:1; transform: translateY(0); }

  /* アクセシビリティ: 動きを抑制したいユーザーには即時静止表示 */
  @media (prefers-reduced-motion: reduce) {
    .hb-chars .hb-c, .hb-up { opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* ====== Hero ====== */
  .hb-hero { position:relative; padding:72px 32px 64px; overflow:hidden; background:${hbcp.white}; }
  .hb-hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
  .hb-hero-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

  .hb-hero-display {
    font-family:${fontJP}; font-weight:900; letter-spacing:-.02em; line-height:1.18;
    font-size:72px; color:${hbcp.ink}; margin:0;
  }
  .hb-hero-display em {
    font-family:${fontEN}; font-style:italic; font-weight:300; font-size:.7em;
    letter-spacing:.005em; color:${hbcp.blue}; line-height:1.1;
  }
  .hb-hero-display .hb-accent { border-bottom: 3px solid ${hbcp.blue}; padding-bottom:.05em; }

  /* 縦罫 */
  .hb-vrule {
    position:absolute; top:0; bottom:0; width:1px; background:${hbcp.line}; z-index:0;
  }

  /* ====== Section common ====== */
  .hb-section-head { display:flex; align-items:baseline; gap:18px; padding-bottom:18px; border-bottom:1px solid ${hbcp.line}; margin-bottom:40px; }
  .hb-section-head-en {
    font-family:${fontENSans}; font-size:11px; font-weight:500; letter-spacing:.3em; color:${hbcp.blue};
    display:flex; align-items:center; gap:10px;
  }
  .hb-section-head-en::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:${hbcp.blue}; }
  .hb-section-head-jp { font-family:${fontJP}; font-weight:500; font-size:32px; letter-spacing:-.01em; color:${hbcp.ink}; }

  /* News */
  .hb-news-row {
    display:grid; grid-template-columns: 110px 110px 1fr 100px 24px; gap:24px;
    padding:16px 0; border-bottom:1px solid ${hbcp.line};
    align-items:center; text-decoration:none; color:${hbcp.ink};
    transition: padding-left .35s ${ease}, background .35s ${ease};
  }
  .hb-news-row:hover { padding-left:14px; background:${hbcp.blueGhost}; }
  .hb-label {
    display:inline-flex; align-items:center; height:22px; padding:0 10px;
    font-family:${fontENSans}; font-size:10px; font-weight:500; letter-spacing:.18em;
    border:1px solid ${hbcp.ink}; color:${hbcp.ink}; line-height:1;
  }
  .hb-label-blue   { background:${hbcp.blue}; color:#fff; border-color:${hbcp.blue}; }
  .hb-label-fill   { background:${hbcp.ink}; color:#fff; border-color:${hbcp.ink}; }
  .hb-label-ghost  { background:transparent; color:${hbcp.ink}; }
  .hb-label-warm   { background:${hbcp.paperWarm}; color:${hbcp.ink}; border-color:${hbcp.line}; }

  /* Service block */
  .hb-svc-block {
    display:grid; grid-template-columns: 100px 1fr auto;
    gap:48px; padding:32px 0; border-bottom:1px solid ${hbcp.ink};
    align-items:flex-start; cursor:pointer; text-decoration:none; color:inherit;
    transition: padding-left .4s ${ease};
  }
  .hb-svc-block:hover { padding-left:18px; }
  .hb-svc-num {
    font-family:${fontEN}; font-style:italic; font-weight:300; font-size:56px;
    color:${hbcp.blue}; line-height:.9;
  }

  /* Big Pickup */
  .hb-pickup-card {
    position:relative; display:block; text-decoration:none; color:${hbcp.ink};
    background:${hbcp.white}; border:1px solid ${hbcp.line}; padding:32px;
    aspect-ratio: 4/3.4; overflow:hidden;
    transition: transform .45s ${ease}, border-color .35s ${ease}, background .35s ${ease};
  }
  .hb-pickup-card:hover { transform: translateY(-4px); border-color:${hbcp.ink}; }
  .hb-pickup-card.fill { background:${hbcp.blue}; color:#fff; border-color:${hbcp.blue}; }
  .hb-pickup-card.fill:hover { background:${hbcp.blueDeep}; border-color:${hbcp.blueDeep}; }
  .hb-pickup-card.dark { background:${hbcp.ink}; color:#fff; border-color:${hbcp.ink}; }

  /* CTA */
  .hb-cta {
    position:relative; display:inline-flex; align-items:center; gap:14px; padding:18px 32px;
    background:${hbcp.ink}; color:#fff; text-decoration:none; border-radius:999px; overflow:hidden;
    font-family:${fontENSans}; font-size:13px; font-weight:500; letter-spacing:.04em;
  }
  .hb-cta::before { content:''; position:absolute; inset:0; background:${hbcp.blue}; transform:translateY(101%); transition:transform .5s ${ease}; border-radius:999px; }
  .hb-cta:hover::before { transform:translateY(0); }
  .hb-cta > * { position:relative; z-index:1; }
  .hb-cta-outline { background:transparent; color:${hbcp.ink}; border:1px solid ${hbcp.ink}; }
  .hb-cta-outline::before { background:${hbcp.ink}; }
  .hb-cta-outline:hover { color:#fff; }

  /* Marquee */
  @keyframes hb-marquee { from {transform:translateX(0);} to {transform:translateX(-50%);} }
  .hb-marquee { display:flex; gap:64px; animation: hb-marquee 38s linear infinite; }
`;

function HBChars({ text, delay=0, weight }) {
  const lines = String(text).split('\n');
  let total = 0;
  return (
    <span className="hb-chars" style={{ fontWeight: weight }}>
      {lines.map((line, li) => (
        <span key={li} className="hb-line">
          {Array.from(line).map((c, i) => {
            const span = (
              <span key={i} className="hb-c" style={{transitionDelay: `${delay + total*0.025}s`}}>
                {c===' ' ? '\u00A0' : c}
              </span>
            );
            total++;
            return span;
          })}
        </span>
      ))}
    </span>
  );
}

function HBLogo({ height=32, light=false }) {
  return <img src="images/hatena_logo.svg" alt="はてなベース株式会社" style={{ height, filter: light?'brightness(0) invert(1)':'none', display:'block' }} />;
}

// =====================================================
// PC HEADER — クリックでスライド開閉する全幅ドロワー
// =====================================================
// 本番 hatenabase.jp の実ナビをそのまま再現。リンクはすべて公式ページへ向ける。
// HB_BASE: ホスト判定で本番/ローカル/ngrok 自動切替え。
//  - hatenabase.jp                  → 'https://hatenabase.jp'
//  - hatenahp-v2.local:10028 / *.ngrok-free.dev / *.local 等
//                                   → 現在の origin を使う（ローカル内回遊に閉じる）
const HB_BASE = (function(){
  try {
    var h = window.location.hostname;
    if (/(^|\.)hatenabase\.jp$/.test(h)) return 'https://hatenabase.jp';
    return window.location.origin;
  } catch (e) {
    return '';
  }
})();
const HB_WANTEDLY  = 'https://www.wantedly.com/companies/company_2336297/projects';

// 採用ポジションの単一ソース（page-recruit.jsx と共有）
// 増減時はここだけ編集すれば、トップ／採用ページ両方の表示が連動する。
const HOME_POSITIONS = [
  { dept:'DX',      title:'kintoneコンサルタント',              type:'正社員',     loc:'東京 / リモート可' },
  { dept:'DX',      title:'kintoneアプリ開発エンジニア',         type:'正社員',     loc:'東京 / リモート可' },
  { dept:'AI',      title:'生成AI業務適用 PM',                   type:'正社員',     loc:'東京' },
  { dept:'FINANCE', title:'会計コンサルタント / 公認会計士',     type:'正社員',     loc:'東京' },
  { dept:'CONTENT', title:'編集ディレクター',                     type:'正社員',     loc:'東京 / リモート可' },
  { dept:'CORP',    title:'採用担当',                             type:'正社員',     loc:'東京' },
  { dept:'INTERN',  title:'長期インターン (DX/Content/BI)',       type:'インターン', loc:'東京' },
];
window.HB_POSITIONS = HOME_POSITIONS;

const HB_NAV = [
  { en:'Service',      jp:'事業・サービス', href:`${HB_BASE}/hatena-dx`, items:[
      {t:'Hatena,DX.',      s:'DXシステム導入・BPRシステム導入支援',          href:`${HB_BASE}/hatena-dx`},
      {t:'Hatena,Content.', s:'DX・AI人材育成／クラウド会計人材の育成',       href:`${HB_BASE}/hatena-content`},
      {t:'Hatena,BI.',      s:'経理業務改善・DX支援会計コンサル',              href:`${HB_BASE}/hatena-bi`},
  ]},
  { en:'Achievements', jp:'導入事例・実績',  href:`${HB_BASE}/achievements` },
  { en:'News',         jp:'お知らせ',         href:`${HB_BASE}/news` },
  { en:'Blog',         jp:'ブログ',           href:`${HB_BASE}/blog` },
  { en:'About',        jp:'私たちについて',   href:`${HB_BASE}/about-us` },
  { en:'Recruit',      jp:'採用情報',         href:`${HB_BASE}/recruit`, items:[
      {t:'採用情報トップ',           s:'Careers',          href:`${HB_BASE}/recruit`},
      {t:'一般採用',                  s:'Wantedly',         href:HB_WANTEDLY},
      {t:'新卒採用・インターン採用',  s:'Wantedly Newgrad', href:`${HB_WANTEDLY}/newgrad`},
  ]},
];

function HBHeader() {
  const [open, setOpen] = React.useState(null); // null | nav-en (PCドロップダウン)
  const [mbOpen, setMbOpen] = React.useState(false); // モバイルドロワー

  // 現在地判定: 各 NAV item の href のパス部分が pathname に prefix で含まれていれば active。
  // 例: pathname=/news/ → m.href=…/news が match。/blog/{slug}/ → m.href=…/blog も match。
  const currentPath = (typeof window !== 'undefined' && window.location && window.location.pathname) || '/';
  function isNavActive ( m ) {
    if ( ! m || ! m.href ) return false;
    let path = '';
    try { path = new URL( m.href, 'http://x' ).pathname; } catch(e){ return false; }
    if ( ! path || path === '/' ) return currentPath === '/';
    // パス末尾 / を整形してから前方一致
    const norm = ( p ) => ( p.endsWith('/') ? p : p + '/' );
    return norm( currentPath ).startsWith( norm( path ) );
  }

  // モバイル時はスクロールロック
  React.useEffect(() => {
    if (mbOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [mbOpen]);

  // 親 wrapper の transform: scale() スコープから抜けるため createPortal で body 直下にマウント
  // → position:fixed が viewport 基準で動作し、PC でもスクロール時にヘッダー常時固定
  const headerNode = (
    <>
      <header className="hb-header" style={{position:'fixed', top:0, left:0, right:0, zIndex:40, height:72, background:'#fff', borderBottom:`1px solid ${hbcp.line}`, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 28px'}}>
        <a href={HB_BASE} style={{display:'block'}}><HBLogo height={28}/></a>

        {/* PC ナビ */}
        <nav className="hb-pc-nav" style={{display:'flex', gap:30, alignItems:'center'}}>
          {HB_NAV.map(m => {
            const Tag = m.items ? 'button' : 'a';
            const props = m.items
              ? { onClick: () => setOpen(open === m.en ? null : m.en) }
              : { href: m.href };
            // active = ドロップダウン展開中 OR 現在地がこの nav の href 配下
            const active = ( open === m.en ) || isNavActive( m );
            return (
              <Tag key={m.en} {...props}
                style={{background:'none', border:'none', padding:'8px 0', cursor:'pointer', color: active ? hbcp.blue : hbcp.ink, textAlign:'left', display:'flex', flexDirection:'column', gap:2, position:'relative', textDecoration:'none'}}>
                <span style={{fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.06em'}}>{m.en}</span>
                <span style={{fontFamily:fontJP, fontSize:10.5, fontWeight:500, color: active ? hbcp.blue : hbcp.inkLight}}>{m.jp}</span>
                <span style={{position:'absolute', left:0, right:0, bottom:-1, height:2, background:hbcp.blue, transform: active ? 'scaleX(1)' : 'scaleX(0)', transformOrigin:'left', transition:`transform .35s ${ease}`}}/>
              </Tag>
            );
          })}
          <span style={{width:1, height:18, background:hbcp.line}}/>
          <a href={`${HB_BASE}/contact`} style={{display:'inline-flex', alignItems:'center', gap:8, padding:'10px 18px', background:hbcp.ink, color:'#fff', fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.18em', textDecoration:'none'}}>
            CONTACT <span style={{fontFamily:fontEN, fontStyle:'italic'}}>↗</span>
          </a>
        </nav>

        {/* モバイル: バーガー */}
        <button className="hb-mb-burger" aria-label="menu" onClick={()=>setMbOpen(v=>!v)} style={{display:'none', background:'none', border:`1px solid ${hbcp.line}`, width:42, height:42, placeItems:'center', cursor:'pointer', padding:0}}>
          <div style={{position:'relative', width:18, height:12, margin:'0 auto'}}>
            <span style={{position:'absolute', left:0, right:0, top:mbOpen?5:0, height:1.5, background:hbcp.ink, transform:mbOpen?'rotate(45deg)':'none', transition:`all .3s ${ease}`}}/>
            <span style={{position:'absolute', left:0, right:0, top:5, height:1.5, background:hbcp.ink, opacity:mbOpen?0:1, transition:'opacity .2s'}}/>
            <span style={{position:'absolute', left:0, right:0, top:mbOpen?5:10, height:1.5, background:hbcp.ink, transform:mbOpen?'rotate(-45deg)':'none', transition:`all .3s ${ease}`}}/>
          </div>
        </button>
      </header>

      {/* モバイルドロワー
          NOTE: 以前は inset:'72px 0 0' + translateY(-100%) で隠していたが、
          ドロワー高さ = viewport - 72 のため translateY(-100%) では top:0~72 の
          範囲が viewport 内に残り、z-index:45 のドロワーが top:0 のヘッダー
          (z-index:40) を覆い隠してロゴ／バーガーが見えなくなる不具合があった。
          translateY(-100vh) で完全に viewport 外へ追い出す。さらに閉じた状態は
          visibility:hidden で a11y / focus からも除外する。 */}
      <div className="hb-mb-drawer" style={{
        position:'fixed', inset:'72px 0 0', zIndex:45, background:'#fff',
        transform: mbOpen ? 'translateY(0)' : 'translateY(-100vh)',
        visibility: mbOpen ? 'visible' : 'hidden',
        transition:`transform .4s ${ease}, visibility 0s ${mbOpen ? '0s' : '.4s'}`,
        overflow:'auto', display:'none', flexDirection:'column',
      }}>
        <div style={{padding:'8px 20px 32px', flex:1}}>
          <div style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', color:hbcp.inkLight, padding:'14px 4px 18px'}}>● MENU</div>
          {HB_NAV.map((m,i)=> (
            m.items ? (
              <details key={m.en} style={{borderBottom:`1px solid ${hbcp.line}`}}>
                <summary style={{listStyle:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'space-between', padding:'18px 4px'}}>
                  <div style={{display:'flex', flexDirection:'column', gap:2}}>
                    <span style={{fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.18em', color:hbcp.blue}}>{String(i+1).padStart(2,'0')} — {m.en.toUpperCase()}</span>
                    <span style={{fontFamily:fontJP, fontWeight:700, fontSize:18}}>{m.jp}</span>
                  </div>
                  <span style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:24, color:hbcp.blue}}>+</span>
                </summary>
                <div style={{padding:'0 4px 18px'}}>
                  {m.items.map(it => (
                    <a key={it.t} href={it.href} target={it.href.startsWith('http')&&!it.href.startsWith(HB_BASE)?'_blank':'_self'} rel="noopener" style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 12px', textDecoration:'none', color:hbcp.inkSoft, fontSize:13.5, borderTop:`1px solid ${hbcp.lineSoft}`}}>
                      <span>{it.t}</span><span style={{fontFamily:fontEN, fontStyle:'italic', color:hbcp.blue}}>↗</span>
                    </a>
                  ))}
                </div>
              </details>
            ) : (
              <a key={m.en} href={m.href} style={{borderBottom:`1px solid ${hbcp.line}`, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'18px 4px', textDecoration:'none', color:hbcp.ink}}>
                <div style={{display:'flex', flexDirection:'column', gap:2}}>
                  <span style={{fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.18em', color:hbcp.blue}}>{String(i+1).padStart(2,'0')} — {m.en.toUpperCase()}</span>
                  <span style={{fontFamily:fontJP, fontWeight:700, fontSize:18}}>{m.jp}</span>
                </div>
                <span style={{fontFamily:fontEN, fontStyle:'italic', color:hbcp.blue, fontSize:18}}>↗</span>
              </a>
            )
          ))}
          <div style={{margin:'24px 0 12px', display:'grid', gap:10}}>
            <a href={`${HB_BASE}/contact`} style={{padding:'14px 20px', background:hbcp.blue, color:'#fff', textDecoration:'none', fontFamily:fontJP, fontSize:14, fontWeight:700, display:'flex', justifyContent:'space-between'}}>
              <span>無料相談を予約</span><span style={{fontFamily:fontEN, fontStyle:'italic'}}>→</span>
            </a>
            <a href={`${HB_BASE}/document-request`} style={{padding:'14px 20px', background:'transparent', color:hbcp.ink, border:`1px solid ${hbcp.ink}`, textDecoration:'none', fontFamily:fontJP, fontSize:14, fontWeight:600, display:'flex', justifyContent:'space-between'}}>
              <span>資料請求</span><span style={{fontFamily:fontEN, fontStyle:'italic'}}>↗</span>
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .hb-header .hb-pc-nav { display: none !important; }
          .hb-header .hb-mb-burger { display: grid !important; }
          .hb-mb-drawer { display: flex !important; }
          /* VariantDMobile (top page) と同じ 60px 高さに揃える (16px 横 padding) */
          .hb-header { height: 60px !important; padding: 0 16px !important; }
          .hb-mb-drawer { inset: 60px 0 0 !important; }
          .hb-header-spacer { height: 60px !important; }
        }
      `}</style>

      {/* DROPDOWN PANEL */}
      {open && (
        <>
          <div onClick={()=>setOpen(null)} style={{position:'fixed', inset:'72px 0 0', background:'rgba(14,14,20,.18)', zIndex:38, animation:'hb-fade .3s forwards', opacity:1}}/>
          <div style={{position:'fixed', top:72, left:0, right:0, zIndex:39, background:'#fff', borderBottom:`1px solid ${hbcp.line}`, boxShadow:'0 24px 60px -32px rgba(14,14,20,.18)', animation:`hb-drop .35s ${ease}`}}>
            <div style={{maxWidth:1280, margin:'0 auto', padding:'40px 32px 48px', display:'grid', gridTemplateColumns:'200px 1fr 320px', gap:48}}>
              <div>
                <div style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:48, color:hbcp.blue, lineHeight:1, marginBottom:8}}>
                  {String(HB_NAV.findIndex(n=>n.en===open)+1).padStart(2,'0')}
                </div>
                <div style={{fontFamily:fontENSans, fontSize:11, letterSpacing:'.28em', color:hbcp.inkLight, marginBottom:14}}>
                  {HB_NAV.find(n=>n.en===open).en.toUpperCase()}
                </div>
                <h3 style={{fontFamily:fontJP, fontWeight:700, fontSize:24, letterSpacing:'-.01em', margin:0}}>
                  {HB_NAV.find(n=>n.en===open).jp}
                </h3>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'4px 32px', alignContent:'start'}}>
                {HB_NAV.find(n=>n.en===open).items.map((it,i)=>(
                  <a key={i} href={it.href} target={it.href.startsWith('http')&&!it.href.startsWith(HB_BASE)?'_blank':'_self'} rel="noopener" style={{display:'flex', alignItems:'baseline', gap:14, padding:'14px 0', borderBottom:`1px solid ${hbcp.line}`, textDecoration:'none', color:hbcp.ink}}>
                    <span style={{fontFamily:fontMono, fontSize:10, color:hbcp.inkLight, width:24}}>0{i+1}</span>
                    <div style={{flex:1}}>
                      <div style={{fontFamily:fontJP, fontWeight:600, fontSize:15, marginBottom:3}}>{it.t}</div>
                      <div style={{fontFamily:fontENSans, fontSize:10.5, letterSpacing:'.14em', color:hbcp.inkLight}}>{it.s}</div>
                    </div>
                    <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18, color:hbcp.blue}}>↗</span>
                  </a>
                ))}
              </div>
              <div style={{background:hbcp.blueGhost, padding:'24px 22px', position:'relative', overflow:'hidden'}}>
                <svg style={{position:'absolute', top:-30, right:-30, width:160, height:160, opacity:.4}} viewBox="0 0 160 160">
                  {[...Array(6)].map((_,i)=>(<circle key={i} cx="80" cy="80" r={10+i*14} fill="none" stroke={hbcp.blue} strokeOpacity=".25" strokeWidth=".7"/>))}
                </svg>
                <div style={{position:'relative'}}>
                  <div style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.28em', color:hbcp.blue, marginBottom:14}}>FEATURED ↘</div>
                  <h4 style={{fontFamily:fontJP, fontWeight:700, fontSize:18, lineHeight:1.55, letterSpacing:'-.01em', margin:'0 0 10px'}}>30分・無料の壁打ち</h4>
                  <p style={{fontSize:12.5, lineHeight:1.85, color:hbcp.inkSoft, margin:'0 0 20px'}}>事業の課題を、まずは話してみる。決算前後の駆け込みもOKです。</p>
                  <a href={`${HB_BASE}/contact`} style={{display:'inline-flex', alignItems:'center', gap:6, fontFamily:fontENSans, fontSize:10.5, fontWeight:600, letterSpacing:'.16em', color:hbcp.blue, textDecoration:'none'}}>
                    BOOK A CALL <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:14}}>→</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );
  return (
    <>
      {typeof document !== 'undefined' && ReactDOM.createPortal(headerNode, document.body)}
      {/* fixed header (PC: 72px / モバイル: 60px) の余白を flow に確保 */}
      <div className="hb-header-spacer" aria-hidden="true" style={{height:72}}/>
    </>
  );
}

// === ヒーロー背景: SVGアニメ円グリッド + Canvasノイズ ===
// パフォーマンス対応: prefers-reduced-motion で停止 / tab非可視時に rAF 停止 /
// ライン本数 14→8、dot 60→24、ストローク・フィルはループ外で確定
function useHeroCanvas(canvasRef) {
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return; // 動きを抑制したいユーザーには canvas 描画自体を行わない

    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    const resize = () => {
      const r = canvas.getBoundingClientRect();
      canvas.width = r.width * dpr; canvas.height = r.height * dpr;
      ctx.setTransform(dpr,0,0,dpr,0,0);
    };
    resize();
    let raf;
    let running = !document.hidden;
    const start = performance.now();
    const STROKE = 'rgba(31,97,171,.10)';
    const DOT_FILL = 'rgba(14,14,20,.045)';
    const loop = () => {
      const r = canvas.getBoundingClientRect();
      const w = r.width, h = r.height;
      const t = (performance.now() - start) / 1000;
      ctx.clearRect(0,0,w,h);

      ctx.strokeStyle = STROKE;
      ctx.lineWidth = 1;
      for (let i=0; i<8; i++) {
        const yBase = (h * (i+1)) / 9;
        ctx.beginPath();
        for (let x=0; x<=w; x+=10) {
          const y = yBase + Math.sin(x*0.005 + t*0.4 + i*0.3) * 14;
          if (x===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
        }
        ctx.stroke();
      }
      ctx.fillStyle = DOT_FILL;
      for (let i=0; i<24; i++) {
        const x = (Math.sin(i*12.9 + t*0.2)*0.5 + 0.5) * w;
        const y = (Math.cos(i*7.1 + t*0.3)*0.5 + 0.5) * h;
        ctx.fillRect(x, y, 2, 2);
      }
      if (running) raf = requestAnimationFrame(loop);
    };
    loop();

    const onVis = () => {
      if (document.hidden) {
        running = false;
        if (raf) cancelAnimationFrame(raf);
      } else if (!running) {
        running = true;
        raf = requestAnimationFrame(loop);
      }
    };
    document.addEventListener('visibilitychange', onVis);
    window.addEventListener('resize', resize);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
      document.removeEventListener('visibilitychange', onVis);
    };
  }, []);
}

function useHBInit(rootRef) {
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const reveals = root.querySelectorAll('.hb-chars, .hb-up');
    // root を viewport(null) にして transform:scale 内側でも intersection 計算が壊れないよう改修
    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);
      // ヒーロー内の reveal はスプラッシュ完了直後に確実に発火させる（IO待ちにしない）
      if (el.closest('.hb-hero')) {
        requestAnimationFrame(() => el.classList.add('is-in'));
      }
    });
    return () => io.disconnect();
  }, []);
}

// ==================================================
// PC
// ==================================================
function VariantDPC() {
  const rootRef = React.useRef(null);
  const heroCanvasRef = React.useRef(null);
  useHeroCanvas(heroCanvasRef);
  useHBInit(rootRef);

  // ライブデータ: WordPress から注入された window.HB_HOME を使う。
  // front-page.php が news / achievements / blog の最新投稿と件数を渡している。
  const HB = (typeof window !== 'undefined' && window.HB_HOME) || { news:[], cases:[], editorials:[], counts:{}, links:{} };
  const news = (HB.news || []).map(p => ({
    d:   p.date,
    cat: p.cat,
    cls: p.cat_cls,
    t:   p.title,
    href:p.permalink,
  }));

  const services = [
    { num:'01', en:'DX / BPR',         jp:'DXシステム導入・BPRシステム導入支援',           d:'kintone・Salesforce・会計ソフトの導入から、業務プロセス再設計（BPR）まで内製チームで一貫対応。事業の意思決定スピードを上げる業務基盤を構築する。', img:'images/storyset_data.svg' },
    { num:'02', en:'Finance',          jp:'経理業務改善・DX支援会計コンサル',                d:'手作業の経理を、クラウド会計ソフト＋BIで再設計。月次決算の高速化・管理会計・IPO 準備まで、経理・会計の実務専門家チームが伴走する。', img:'images/storyset_business_plan.svg' },
    { num:'03', en:'AI / Talent',      jp:'DX・AI人材育成／クラウド会計人材の育成',         d:'速習freee会計研修・kintone 速習・生成 AI 業務適用研修。「使える人」を組織に増やすことから業務改革を始める。', img:'images/storyset_consulting.svg' },
  ];

  // Live tweaks — density/mood/geometry. Reads global state, recomputes on change.
  const tw = (window.useHBTweaks ? window.useHBTweaks() : null);
  const dens = tw ? tw.density : { sectionPadY:96, heroPadY:72, heroDisplay:72, sectionTitle:34, bodyLine:2.05, grid:32 };
  const mood = tw ? tw.mood    : { blue:hbcp.blue, blueLight:hbcp.blueLight, blueGhost:hbcp.blueGhost, ink:hbcp.ink, paper:hbcp.paper };

  return (
    <div ref={rootRef} className="ab-scroll hb-root" style={{
      width:'100%', height:'100%', overflow:'auto', position:'relative',
      background:hbcp.white, color:mood.ink, fontFamily:fontJP,
      // CSS vars consumed by the .hb-* utility classes below.
      ['--hb-blue']:        mood.blue,
      ['--hb-blue-light']:  mood.blueLight,
      ['--hb-blue-ghost']:  mood.blueGhost,
      ['--hb-ink']:         mood.ink,
      ['--hb-paper']:       mood.paper,
      ['--hb-section-pad']: `${dens.sectionPadY}px`,
      ['--hb-hero-pad']:    `${dens.heroPadY}px`,
      ['--hb-display']:     `${dens.heroDisplay}px`,
      ['--hb-section-title']: `${dens.sectionTitle}px`,
      ['--hb-body-line']:   dens.bodyLine,
      ['--hb-grid']:        `${dens.grid}px`,
    }}>
      <style>{styles}</style>
      <style>{`
        /* Tweak overrides: applied via CSS vars so the panel reshapes feel
           globally without re-rendering every section. */
        .hb-root .hb-hero          { padding-top: var(--hb-hero-pad) !important; padding-bottom: var(--hb-hero-pad) !important; min-height: 0 !important; }
        .hb-root .hb-hero-display  { font-size: var(--hb-display) !important; }
        .hb-root section           { transition: padding .35s ${ease}, background-color .35s ${ease}; }
        /* Recolor brand-blue surfaces */
        .hb-root .hb-cta:not(.hb-cta-outline) { background: var(--hb-blue) !important; }
        .hb-root .hb-cta-outline   { color: var(--hb-blue) !important; border-color: var(--hb-blue) !important; }
        .hb-root .hb-label-blue    { background: var(--hb-blue-ghost) !important; color: var(--hb-blue) !important; }
        .hb-root .hb-label-fill    { background: var(--hb-blue) !important; }
        .hb-root [data-mood-bg="blue"]  { background: var(--hb-blue) !important; }
        .hb-root [data-mood-fg="blue"]  { color: var(--hb-blue) !important; }
      `}</style>

      {window.HBTweaksDPanel ? <window.HBTweaksDPanel/> : null}

      {/* HEADER */}
      <HBHeader/>


      {/* HERO */}
      <section className="hb-hero">
        <canvas ref={heroCanvasRef} className="hb-hero-canvas"/>
        {/* 12カラム縦罫 */}
        <svg className="hb-hero-svg" viewBox="0 0 12 100" preserveAspectRatio="none">
          {[1,2,3,4,5,6,7,8,9,10,11].map(i=>(
            <line key={i} x1={i} y1="0" x2={i} y2="100" stroke={hbcp.line} strokeWidth=".02"/>
          ))}
        </svg>
        {/* 大円アクセント — geometry tweak対応 */}
        <svg style={{position:'absolute', top:80, right:-180, width:880, height:880, pointerEvents:'none'}} viewBox="0 0 880 880">
          {window.HBGeo
            ? window.HBGeo(tw ? tw.geometry : 'circles',
                { line: mood.blue, fill: mood.blueLight },
                { w:880, h:880, density:1 })
            : (<>
                <circle cx="440" cy="440" r="438" fill="none" stroke={mood.blue} strokeOpacity=".22" strokeWidth="1"/>
                <circle cx="440" cy="440" r="320" fill="none" stroke={mood.blue} strokeOpacity=".15" strokeWidth="1"/>
                <circle cx="440" cy="440" r="200" fill="none" stroke={mood.blue} strokeOpacity=".10" strokeWidth="1"/>
                <circle cx="440" cy="440" r="80"  fill={mood.blueLight}/>
              </>)}
        </svg>
        {/* Heroイラスト除去（"写真ゼロ" 原則。Storyset がタイポを覆い隠す問題のため）*/}

        <div style={{position:'relative', maxWidth:1280, margin:'0 auto', paddingTop:48}}>
          <div className="hb-up" style={{fontFamily:fontENSans, fontSize:11, letterSpacing:'.36em', color:hbcp.blue, marginBottom:28, display:'flex', alignItems:'center', gap:14}}>
            <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:hbcp.blue}}/>
            A BACKOFFICE COMPANY FOR THE MAKERS OF TOMORROW
          </div>

          <h1 className="hb-hero-display">
            <div><HBChars text="攻めのバックオフィスを構築し、"/></div>
            <div><span className="hb-accent"><HBChars text="経済OSをアップデートする。" delay={.18}/></span></div>
            <div style={{marginTop:24}}><em><HBChars text="Implementing the offensive backoffice." delay={.36}/></em></div>
          </h1>

          <div style={{marginTop:32, maxWidth:640}}>
            <p className="hb-up" style={{fontSize:16, lineHeight:1.9, color:hbcp.inkSoft, margin:0, transitionDelay:'.25s'}}>
              <span style={{color:hbcp.blue, fontWeight:600}}>DX × 会計 × AI</span> の交点で、<br/>
              戦略設計から現場の<strong style={{fontWeight:600, color:hbcp.ink}}>導入・運用・改善</strong>まで、<br/>
              スタートアップ・中小企業のバックオフィスを伸び代に変えるパートナー。
            </p>
          </div>

          <div className="hb-up" style={{marginTop:36, display:'flex', flexWrap:'wrap', gap:14, transitionDelay:'.4s'}}>
            <a href={`${HB_BASE}/contact`} style={{
              display:'inline-flex', alignItems:'center', gap:10,
              padding:'14px 26px', background:hbcp.blue, color:'#fff',
              fontFamily:fontJP, fontSize:14, fontWeight:700, letterSpacing:'.02em',
              textDecoration:'none', borderRadius:0
            }}>
              無料相談を予約する <span style={{fontFamily:fontEN, fontStyle:'italic'}}>→</span>
            </a>
            <a href={`${HB_BASE}/hatena-dx`} style={{
              display:'inline-flex', alignItems:'center', gap:10,
              padding:'14px 26px', background:'transparent', color:hbcp.ink,
              border:`1px solid ${hbcp.ink}`,
              fontFamily:fontJP, fontSize:14, fontWeight:600, letterSpacing:'.02em',
              textDecoration:'none'
            }}>
              サービスを見る <span style={{fontFamily:fontEN, fontStyle:'italic'}}>↗</span>
            </a>
          </div>
        </div>

        <div style={{position:'absolute', left:32, bottom:48, color:hbcp.ink, fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', display:'flex', flexDirection:'column', alignItems:'flex-start', gap:14}}>
          <span style={{display:'inline-block', width:1, height:60, background:hbcp.ink, opacity:.35}}/>
          SCROLL
        </div>
      </section>

      {/* MARQUEE NEWS — Hero 直下に配置 (デザイン的にここの方が落ち着く: ヒーロー → 速報帯 → 各セクション) */}
      <section style={{padding:'18px 0', borderTop:`1px solid ${hbcp.line}`, borderBottom:`1px solid ${hbcp.line}`, overflow:'hidden', background:hbcp.white}}>
        <div className="hb-marquee" style={{whiteSpace:'nowrap'}}>
          {[...news, ...news].map((n,i) => (
            <span key={i} style={{display:'inline-flex', alignItems:'center', gap:16, fontSize:13}}>
              <span className={`hb-label ${n.cls}`}>{n.cat}</span>
              <span style={{fontFamily:fontMono, fontSize:11, color:hbcp.inkLight}}>{n.d}</span>
              <span style={{fontWeight:500}}>{n.t}</span>
              <span style={{color:hbcp.inkLight, marginLeft:14}}>—</span>
            </span>
          ))}
        </div>
      </section>

      {/* THREE-AXIS — DX × 会計 × AI 3つの専門性 */}
      <section style={{padding:'112px 32px 96px', background:hbcp.white, borderBottom:`1px solid ${hbcp.line}`}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-section-head">
            <span className="hb-section-head-en">Structure</span>
            <span className="hb-section-head-jp"><HBChars text="3つの専門性が、交差する場所"/></span>
            <span style={{marginLeft:'auto', fontFamily:fontENSans, fontSize:11, letterSpacing:'.18em', color:hbcp.inkLight}}>DX × ACCOUNTING × AI</span>
          </div>
          <p className="hb-up" style={{fontSize:15, lineHeight:2.1, color:hbcp.inkSoft, margin:'0 0 56px', maxWidth:680}}>
            HatenaBaseは、ひとつの専門会社ではありません。<br/>
            「DX・会計・AI」という、互いに補い合う3つの領域を持つことで、<br/>
            バックオフィスを単独の最適化ではなく、<span style={{color:hbcp.blue, fontWeight:700}}>事業の意思決定スピードそのもの</span>として再設計します。
          </p>

          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, border:`1px solid ${hbcp.line}`}}>
            {[
              {
                no:'01', en:'DX DIVISION', jp:'業務とシステムを再設計する。',
                tag:'DIGITAL TRANSFORMATION',
                d:'kintone・Salesforce・会計ソフトをはじめとするSaaSの設計・導入・定着、業務フローの可視化と再構築。「ツールを入れて終わり」ではなく、現場の運用が変わるところまで伴走するのが、私たちの強みです。',
                pts:['業務フロー設計・標準化', 'SaaS導入・連携', '内製化支援・運用定着', 'ノーコード／ローコード開発'],
                bg:hbcp.white, art:'lines', href:`${HB_BASE}/hatena-dx`,
              },
              {
                no:'02', en:'ACCOUNTING DIVISION', jp:'数字で事業を支える。',
                tag:'ACCOUNTING & FINANCE',
                d:'税理士・経理BPOチームによる、月次決算の高速化、管理会計、IPO準備、内部統制まで。攻めの経営判断に必要な「数字の見える化」を、専門家チームが裏側で支えます。',
                pts:['月次決算の早期化', '管理会計／BI設計', 'IPO・内部統制支援', 'CFOアウトソース'],
                bg:hbcp.blueGhost, art:'circles', href:`${HB_BASE}/hatena-bi`,
              },
              {
                no:'03', en:'AI DIVISION', jp:'生成AIを組織に組み込む。',
                tag:'GENERATIVE AI',
                d:'生成AI／LLMを「PoCで終わらせない」ための導入設計と内製化支援。社内ナレッジRAG、AIエージェント、業務自動化、社員向けAIリテラシー研修まで、組織への定着を一気通貫で。',
                pts:['生成AI導入設計', 'RAG／AIエージェント開発', '業務自動化の実装', 'AIリテラシー研修'],
                bg:hbcp.white, art:'grid', href:`${HB_BASE}/hatena-content`,
              },
            ].map((c,idx)=>(
              <div key={c.no} className="hb-up" style={{
                padding:'48px 36px', background:c.bg,
                borderRight: idx<2 ? `1px solid ${hbcp.line}` : 'none',
                position:'relative', overflow:'hidden', transitionDelay:`${idx*.1}s`,
                display:'flex', flexDirection:'column',
              }}>
                {/* 抽象アート */}
                <svg style={{position:'absolute', top:-40, right:-40, width:240, height:240, opacity:.45}} viewBox="0 0 240 240">
                  {c.art==='circles' && [...Array(7)].map((_,i)=>(<circle key={i} cx="120" cy="120" r={20+i*16} fill="none" stroke={hbcp.blue} strokeOpacity=".22" strokeWidth=".7"/>))}
                  {c.art==='lines'   && [...Array(14)].map((_,i)=>(<line key={i} x1="0" y1={i*20} x2="240" y2={i*20-120} stroke={hbcp.blue} strokeOpacity=".2" strokeWidth=".5"/>))}
                  {c.art==='grid'    && (<g>
                    {[...Array(8)].map((_,i)=>(<line key={'h'+i} x1="0" y1={i*30} x2="240" y2={i*30} stroke={hbcp.blue} strokeOpacity=".15" strokeWidth=".5"/>))}
                    {[...Array(8)].map((_,i)=>(<line key={'v'+i} x1={i*30} y1="0" x2={i*30} y2="240" stroke={hbcp.blue} strokeOpacity=".15" strokeWidth=".5"/>))}
                    <circle cx="120" cy="120" r="50" fill={hbcp.blueLight} opacity=".4"/>
                  </g>)}
                </svg>

                <div style={{position:'relative', display:'flex', flexDirection:'column', flex:1}}>
                  <div style={{display:'flex', alignItems:'baseline', gap:12, marginBottom:32}}>
                    <span style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:42, lineHeight:1, color:hbcp.blue}}>{c.no}</span>
                    <span style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.28em', color:hbcp.inkLight}}>{c.en}</span>
                  </div>
                  <h3 style={{fontFamily:fontJP, fontWeight:800, fontSize:30, lineHeight:1.3, letterSpacing:'-.02em', margin:'0 0 22px'}}>
                    {c.jp}
                  </h3>
                  <p style={{fontSize:13.5, lineHeight:2, color:hbcp.inkSoft, margin:'0 0 28px'}}>
                    {c.d}
                  </p>
                  <div style={{display:'grid', gap:8, marginBottom:28}}>
                    {c.pts.map(p=>(
                      <div key={p} style={{display:'flex', alignItems:'center', gap:10, fontSize:12.5, color:hbcp.ink, fontWeight:500}}>
                        <span style={{display:'inline-block', width:5, height:5, background:hbcp.blue}}/>
                        {p}
                      </div>
                    ))}
                  </div>
                  <a href={c.href} style={{marginTop:'auto', display:'inline-flex', alignItems:'center', gap:10, fontFamily:fontENSans, fontSize:11, fontWeight:600, letterSpacing:'.22em', color:hbcp.blue, textDecoration:'none', borderBottom:`1px solid ${hbcp.blue}`, paddingBottom:6, alignSelf:'flex-start'}}>
                    {c.tag} <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:14}}>↗</span>
                  </a>
                </div>
              </div>
            ))}
          </div>

          {/* 中央 = 強みは交差点 */}
          <div className="hb-up" style={{margin:'-1px auto 0', padding:'36px 48px', background:hbcp.ink, color:'#fff', maxWidth:840, position:'relative', display:'grid', gridTemplateColumns:'1fr auto', gap:32, alignItems:'center'}}>
            <div>
              <div style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:8}}>● OUR DIFFERENCE</div>
              <div style={{fontFamily:fontJP, fontWeight:700, fontSize:20, lineHeight:1.55, letterSpacing:'-.005em'}}>
                3領域を1社で抱え、<br/>
                「業務 × 数字 × AI」を<span style={{color:hbcp.blueLight}}>切れ目なく</span>つなぐ。
              </div>
            </div>
            <a href={`${HB_BASE}/about-us`} style={{display:'inline-flex', alignItems:'center', gap:8, fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.22em', color:'#fff', textDecoration:'none', padding:'14px 22px', border:'1px solid rgba(255,255,255,.3)', whiteSpace:'nowrap'}}>
              ABOUT US <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:14}}>↗</span>
            </a>
          </div>
        </div>
      </section>

      {/* NEWS */}
      <section style={{padding:'96px 32px', background:hbcp.white}}>
        <div style={{maxWidth:1080, margin:'0 auto'}}>
          <div className="hb-section-head">
            <span className="hb-section-head-en">News</span>
            <span className="hb-section-head-jp"><HBChars text="ニュース"/></span>
            <span style={{marginLeft:'auto', fontFamily:fontENSans, fontSize:11, letterSpacing:'.18em', color:hbcp.inkLight}}>{news.length > 0 ? `${String(news.length).padStart(2,'0')} / ${HB.counts && HB.counts.news ? HB.counts.news : news.length} ARTICLES` : 'NO POSTS YET'}</span>
          </div>
          {news.length > 0 ? (
            <div>
              {news.map((n,i)=>(
                <a key={n.href || i} href={n.href || '#'} className="hb-news-row hb-up" style={{transitionDelay:`${i*0.05}s`}}>
                  <span className={`hb-label ${n.cls || 'hb-label-ghost'}`}>{n.cat}</span>
                  <span style={{fontFamily:fontMono, fontSize:12, color:hbcp.inkLight}}>{n.d}</span>
                  <span style={{fontSize:15, fontWeight:500, lineHeight:1.6}}>{n.t}</span>
                  <span style={{fontFamily:fontENSans, fontSize:11, letterSpacing:'.16em', color:hbcp.inkLight, textAlign:'right'}}>READ →</span>
                  <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:20, color:hbcp.blue}}>↗</span>
                </a>
              ))}
            </div>
          ) : (
            <div style={{padding:'32px 0', textAlign:'center', color:hbcp.inkLight, fontSize:14}}>まだニュースは投稿されていません。</div>
          )}
          {HB.links && HB.links.news && (
            <div style={{textAlign:'center', marginTop:36}}>
              <a href={HB.links.news} className="hb-cta hb-cta-outline">
                <span>MORE NEWS</span>
                <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18}}>↗</span>
              </a>
            </div>
          )}
        </div>
      </section>

      {/* VISION — 巨大欧文 */}
      <section style={{padding:'112px 32px', background:mood.blue, color:'#fff', position:'relative', overflow:'hidden'}}>
        {/* 抽象SVG — geometry tweak対応 */}
        <svg style={{position:'absolute', top:'50%', left:-200, transform:'translateY(-50%)', width:780, height:780, opacity:.18}} viewBox="0 0 780 780">
          {window.HBGeo ? window.HBGeo(tw ? tw.geometry : 'circles', { line:'#fff', fill:'#fff' }, { w:780, h:780, density:1 }) : [...Array(14)].map((_,i)=>(
            <circle key={i} cx="390" cy="390" r={50 + i*25} fill="none" stroke="#fff" strokeWidth=".7"/>
          ))}
        </svg>
        <div style={{maxWidth:1280, margin:'0 auto', position:'relative', display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center'}}>
          <div>
            <div className="hb-up" style={{fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.32em', opacity:.85, marginBottom:32, display:'flex', alignItems:'center', gap:10}}>
              <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:'#fff'}}/>
              VISION / 2030
            </div>
            <h2 style={{fontFamily:fontENSans, fontWeight:300, fontSize:'clamp(96px, 11vw, 180px)', lineHeight:.92, letterSpacing:'-.05em', margin:0}}>
              <div><HBChars text="OUR"/></div>
              <div style={{paddingLeft:'.5em'}}><HBChars text="VISION" delay={.2}/></div>
              <div style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, marginTop:24, fontSize:'.55em'}}>
                <HBChars text="? → !" delay={.5}/>
              </div>
            </h2>
          </div>
          <div>
            <h3 className="hb-up" style={{fontFamily:fontJP, fontWeight:700, fontSize:36, lineHeight:1.55, letterSpacing:'-.01em', margin:'0 0 32px'}}>
              事業の<span style={{borderBottom:'2px solid #fff', padding:'0 4px'}}>「？」</span>を、<br/>
              働く人の<span style={{borderBottom:'2px solid #fff', padding:'0 4px'}}>「！」</span>に翻訳する。
            </h3>
            <p className="hb-up" style={{fontSize:14, lineHeight:2.1, opacity:.9, margin:'0 0 36px', transitionDelay:'.15s'}}>
              スタートアップが伸びる速度は、バックオフィスの速度に等しい。私たちは、組織の意思決定とオペレーションを根本から再設計するパートナーです。専門領域が交差する場所に、事業を伸ばすデザインがある。
            </p>
            <a href={`${HB_BASE}/about-us`} className="hb-up hb-cta" style={{background:'#fff', color:hbcp.ink, transitionDelay:'.3s'}}>
              <span>About HatenaBase</span>
              <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18}}>↗</span>
            </a>
          </div>
        </div>
      </section>

      {/* SERVICE */}
      <section style={{padding:'104px 32px', background:hbcp.white}}>
        <div style={{maxWidth:1080, margin:'0 auto'}}>
          <div className="hb-section-head">
            <span className="hb-section-head-en">Service</span>
            <span className="hb-section-head-jp"><HBChars text="3つの専門領域"/></span>
            <span style={{marginLeft:'auto', fontFamily:fontENSans, fontSize:11, letterSpacing:'.18em', color:hbcp.inkLight}}>03</span>
          </div>
          <div style={{borderTop:`1px solid ${hbcp.ink}`}}>
            {services.map((s,i)=>{
              // services[0..2] のリンク先
              const svcHref = i === 0 ? `${HB_BASE}/hatena-dx` : i === 1 ? `${HB_BASE}/hatena-bi` : `${HB_BASE}/hatena-content`;
              return (
              <a key={s.num} href={svcHref} className="hb-svc-block hb-up" style={{transitionDelay:`${i*.06}s`, gridTemplateColumns:'90px 1.1fr 240px 28px', gap:40, alignItems:'center'}}>
                <div>
                  <div className="hb-svc-num">{s.num}</div>
                  <div style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.22em', color:hbcp.inkLight, marginTop:10}}>{s.en}</div>
                </div>
                <div>
                  <h3 style={{fontFamily:fontJP, fontWeight:700, fontSize:32, letterSpacing:'-.01em', margin:'0 0 12px'}}>{s.jp}</h3>
                  <p style={{fontSize:14, lineHeight:2.05, color:hbcp.inkSoft, margin:0, maxWidth:520}}>{s.d}</p>
                </div>
                <div style={{height:140, display:'grid', placeItems:'center'}}>
                  <img src={s.img} alt="" style={{maxHeight:140, maxWidth:240, opacity:.92}}/>
                </div>
                <div style={{fontFamily:fontEN, fontStyle:'italic', fontSize:32, color:hbcp.blue}}>→</div>
              </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* SPOTLIGHT — 速習freee会計研修（freee × DIGITAL BASE 業務提携） */}
      <section style={{padding:'104px 32px', background:hbcp.ink, color:'#fff', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, background:`radial-gradient(circle at 80% 30%, ${hbcp.blue}33, transparent 60%)`, pointerEvents:'none'}}/>
        <div style={{position:'relative', maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-section-head" style={{borderColor:'rgba(255,255,255,.2)'}}>
            <span className="hb-section-head-en" style={{color:hbcp.blueLight}}>Spotlight</span>
            <span className="hb-section-head-jp" style={{color:'#fff'}}><HBChars text="速習freee会計研修"/></span>
            <span style={{marginLeft:'auto', fontFamily:fontENSans, fontSize:11, letterSpacing:'.18em', color:'rgba(255,255,255,.6)'}}>POWERED BY freee × DIGITAL BASE</span>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:64, alignItems:'flex-start', marginBottom:48}}>
            <div>
              <div style={{display:'inline-flex', alignItems:'center', gap:10, padding:'6px 14px', border:`1px solid ${hbcp.blueLight}`, color:hbcp.blueLight, fontFamily:fontENSans, fontSize:10, letterSpacing:'.28em', fontWeight:600, marginBottom:24}}>
                ● PRESS RELEASE / 2025.08.26
              </div>
              <h3 style={{fontFamily:fontJP, fontWeight:900, fontSize:'clamp(26px, 2.6vw, 34px)', lineHeight:1.4, letterSpacing:'-.01em', margin:'0 0 24px', color:'#fff'}}>
                freee × 一般社団法人DIGITAL BASE 業務提携。<br/>
                <span style={{color:hbcp.blueLight}}>「速習freee会計研修」</span>を共同開発・提供開始。
              </h3>
              <p style={{fontSize:15, lineHeight:2, color:'rgba(255,255,255,.8)', margin:'0 0 16px'}}>
                DIGITAL BASE は「デジタルを活用するための基礎力は、特定の企業や業界のものではなく、すべての会計人材にとって必要なスキル」という理念のもと設立された一般社団法人。
                急速な DX 化が進むなか、会計・税理士事務所がクラウド会計ソフトを十分に活用できていない課題に対応すべく、freee は業務提携を決定し、会計人材の育成と業界発展に貢献します。
              </p>
              <p style={{fontSize:15, lineHeight:2, color:'rgba(255,255,255,.8)', margin:'0 0 24px'}}>
                「速習freee会計研修」は <strong style={{color:'#fff'}}>e-learning + バーチャル環境での実務演習 + テスト受講</strong> を含み、<strong style={{color:'#fff'}}>約1ヶ月</strong>で完結。公認会計士・税理士など専門家により提供されます。
              </p>
              <a href="https://corp.freee.co.jp/news/20250826freee_digitalbase.html" target="_blank" rel="noopener noreferrer"
                 style={{display:'inline-flex', alignItems:'center', gap:10, fontFamily:fontENSans, fontSize:11, letterSpacing:'.22em', color:hbcp.blueLight, fontWeight:600, textDecoration:'none', borderBottom:`1px solid ${hbcp.blueLight}`, paddingBottom:4}}>
                READ THE FREEE PRESS RELEASE <span style={{fontFamily:fontEN, fontStyle:'italic'}}>↗</span>
              </a>
            </div>
            <aside style={{padding:'32px 28px', background:'rgba(255,255,255,.05)', border:'1px solid rgba(255,255,255,.15)'}}>
              <div style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', color:hbcp.blueLight, fontWeight:600, marginBottom:18}}>● PROGRAM AT A GLANCE</div>
              {[
                ['期間',     '約1ヶ月で完結'],
                ['構成',     'e-learning + 実務演習 + 修了テスト'],
                ['提供者',   '公認会計士・税理士など専門家'],
                ['提携先',   'freee × 一般社団法人 DIGITAL BASE'],
                ['対象',     '会計事務所・経理部門の DX/クラウド会計人材'],
              ].map(([k,v],i) => (
                <div key={k} style={{display:'grid', gridTemplateColumns:'80px 1fr', gap:14, padding:'12px 0', borderBottom: i < 4 ? '1px solid rgba(255,255,255,.12)' : 'none'}}>
                  <span style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.18em', color:'rgba(255,255,255,.55)', textTransform:'uppercase'}}>{k}</span>
                  <span style={{fontSize:13, color:'#fff', fontWeight:500, lineHeight:1.65}}>{v}</span>
                </div>
              ))}
            </aside>
          </div>

          <div style={{marginTop:24}}>
            <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:24}}>
              <div style={{flex:1, height:1, background:'rgba(255,255,255,.15)'}}/>
              <span style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', color:'rgba(255,255,255,.6)', fontWeight:600}}>SEMINAR APPEARANCES</span>
              <div style={{flex:1, height:1, background:'rgba(255,255,255,.15)'}}/>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18}}>
              {[
                {co:'DIGITAL BASE × freee',     t:'「freee人材」育成セミナー',                d:'速習freee会計研修の内容解説。DX人材に求められるスキルと研修プログラムを紹介。',    href:'https://adv.freee.co.jp/seminar/digital-base'},
                {co:'税理士法人松本 × freee',    t:'「30名の壁を越える事務所」の作り方',     d:'利益率改善と債権管理強化を実現する業務基盤の構築方法。',                            href:'https://adv.freee.co.jp/seminar/sustainable-office-growth'},
                {co:'MAIA × freee',             t:'「育成コストゼロ」経営セミナー',           d:'クラウド会計習得済み人材の採用で、育成コストを削減。',                              href:'https://adv.freee.co.jp/seminar/cloud-accounting-employment'},
              ].map((s,i) => (
                <a key={s.t} href={s.href} target="_blank" rel="noopener noreferrer"
                   style={{display:'block', padding:'24px 22px', background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.15)', textDecoration:'none', color:'#fff', transition:'all .2s'}}>
                  <div style={{fontFamily:fontENSans, fontSize:9, letterSpacing:'.24em', color:hbcp.blueLight, fontWeight:600, marginBottom:12}}>● CO-HOSTED WITH</div>
                  <div style={{fontFamily:fontJP, fontWeight:700, fontSize:13, color:'rgba(255,255,255,.85)', marginBottom:14}}>{s.co}</div>
                  <h4 style={{fontFamily:fontJP, fontWeight:700, fontSize:16, lineHeight:1.5, margin:'0 0 10px', color:'#fff'}}>{s.t}</h4>
                  <p style={{fontSize:12, lineHeight:1.85, color:'rgba(255,255,255,.7)', margin:0}}>{s.d}</p>
                  <div style={{marginTop:18, fontFamily:fontENSans, fontSize:10, letterSpacing:'.22em', color:hbcp.blueLight, fontWeight:600}}>VIEW SEMINAR <span style={{fontFamily:fontEN, fontStyle:'italic'}}>↗</span></div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* WORKS — 事例 (実データ: window.HB_HOME.cases / achievements CPT) */}
      <section style={{padding:'104px 32px', background:hbcp.paper}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-section-head">
            <span className="hb-section-head-en">Works</span>
            <span className="hb-section-head-jp"><HBChars text="事例"/></span>
            <span style={{marginLeft:'auto', fontFamily:fontENSans, fontSize:11, letterSpacing:'.18em', color:hbcp.inkLight}}>{(HB.cases && HB.cases.length > 0) ? `${String(HB.cases.length).padStart(2,'0')} / ${HB.counts && HB.counts.achievements ? HB.counts.achievements : HB.cases.length}` : 'NO CASES YET'}</span>
          </div>
          {(HB.cases && HB.cases.length > 0) ? (
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24}}>
              {HB.cases.map((c,i)=>(
                <a key={c.id} href={c.permalink} className="hb-up" style={{display:'block', padding:0, background:'#fff', border:`1px solid ${hbcp.line}`, textDecoration:'none', color:hbcp.ink, position:'relative', transitionDelay:`${i*.04}s`, overflow:'hidden'}}>
                  {c.thumbnail && (
                    <div style={{aspectRatio:'16/9', overflow:'hidden', background:hbcp.paper, borderBottom:`1px solid ${hbcp.line}`}}>
                      <img src={c.thumbnail} alt={c.title} style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} loading="lazy"/>
                    </div>
                  )}
                  <div style={{padding:'24px 22px'}}>
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
                      <span style={{fontFamily:fontMono, fontSize:11, color:hbcp.inkLight}}>{c.date}</span>
                      <span style={{fontFamily:fontENSans, fontSize:9, letterSpacing:'.22em', padding:'4px 8px', border:`1px solid ${hbcp.ink}`, color:hbcp.ink}}>{c.cat}</span>
                    </div>
                    <h3 style={{fontFamily:fontJP, fontWeight:700, fontSize:17, lineHeight:1.55, letterSpacing:'-.005em', margin:'0 0 12px'}}>{c.title}</h3>
                    <p style={{fontSize:12.5, lineHeight:1.85, color:hbcp.inkSoft, margin:0}}>{c.excerpt}</p>
                    <div style={{marginTop:18, paddingTop:14, borderTop:`1px solid ${hbcp.line}`, fontFamily:fontENSans, fontSize:10, letterSpacing:'.24em', color:hbcp.inkLight, display:'flex', justifyContent:'space-between'}}>
                      <span>READ CASE</span><span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:14, color:hbcp.blue}}>↗</span>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          ) : (
            <div style={{padding:'40px 0', textAlign:'center', color:hbcp.inkLight, fontSize:14}}>導入事例はまだ公開されていません。</div>
          )}
          <div style={{textAlign:'center', marginTop:48}}>
            <a href={(HB.links && HB.links.achievements) || `${HB_BASE}/achievements`} className="hb-cta hb-cta-outline">
              <span>ALL CASE STUDIES</span><span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18}}>↗</span>
            </a>
          </div>
        </div>
      </section>

      {/* AX-ISSUES — FLUX風 こんな課題ありませんか？ */}
      <section style={{padding:'112px 32px', background:hbcp.ink, color:'#fff', position:'relative', overflow:'hidden'}}>
        <svg style={{position:'absolute', top:-100, right:-100, width:520, height:520, opacity:.18}} viewBox="0 0 520 520">
          {[...Array(20)].map((_,i)=>(
            <circle key={i} cx="260" cy="260" r={20+i*14} fill="none" stroke={hbcp.blueLight} strokeOpacity=".4" strokeWidth=".5"/>
          ))}
        </svg>
        <div style={{position:'relative', maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-section-head" style={{borderColor:'rgba(255,255,255,.2)'}}>
            <span className="hb-section-head-en" style={{color:hbcp.blueLight}}>Issues</span>
            <span className="hb-section-head-jp" style={{color:'#fff'}}><HBChars text="こんな課題、ありませんか？"/></span>
            <span style={{marginLeft:'auto', fontFamily:fontENSans, fontSize:11, letterSpacing:'.18em', color:'rgba(255,255,255,.5)'}}>16 ISSUES → AX</span>
          </div>
          <p className="hb-up" style={{fontSize:14.5, lineHeight:2.1, color:'rgba(255,255,255,.7)', margin:'0 0 56px', maxWidth:720}}>
            会計・経理・組織・テクノロジーの現場で、私たちが何度も出会ってきた課題を 16 個に整理しました。<br/>
            ひとつでも当てはまるものがあれば、<span style={{color:hbcp.blueLight, fontWeight:600}}>AX（Accounting Transformation）</span>で解けるかもしれません。
          </p>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, borderTop:'1px solid rgba(255,255,255,.15)', borderLeft:'1px solid rgba(255,255,255,.15)'}}>
            {[
              {c:'FINANCE', t:'月次決算が常に20日以上かかっている'},
              {c:'FINANCE', t:'経営数字が見えるのが、月遅れになっている'},
              {c:'FINANCE', t:'インボイス・電帳法対応の運用が回っていない'},
              {c:'FINANCE', t:'IPO準備で、何から手を付けるべきか分からない'},
              {c:'OPS',     t:'同じ作業を、複数のSaaSに重複入力している'},
              {c:'OPS',     t:'kintoneやfreeeを入れたが、定着していない'},
              {c:'OPS',     t:'業務マニュアルがエクセルで属人化している'},
              {c:'OPS',     t:'部署間で数字の定義がバラバラで、議論が噛み合わない'},
              {c:'AI',      t:'生成AIをどう業務に組み込めばいいか分からない'},
              {c:'AI',      t:'社員に生成AIを使わせたいが、教育が追いつかない'},
              {c:'AI',      t:'AIエージェントで、社内業務を自動化したい'},
              {c:'AI',      t:'PoCで終わらない、AIの本格導入を進めたい'},
              {c:'TEAM',    t:'バックオフィスが慢性的な人手不足で、攻めに回せない'},
              {c:'TEAM',    t:'BPOを使っているが、業務がブラックボックス化している'},
              {c:'TEAM',    t:'採用してもバックオフィス人材がすぐに辞めてしまう'},
              {c:'TEAM',    t:'CFOやCTOがいないが、相談できる相手が欲しい'},
            ].map((it,i)=>(
              <a key={i} href={`${HB_BASE}/contact`} className="hb-up hb-issue" style={{
                padding:'24px 22px', borderRight:'1px solid rgba(255,255,255,.15)', borderBottom:'1px solid rgba(255,255,255,.15)',
                display:'flex', flexDirection:'column', justifyContent:'space-between', minHeight:140,
                textDecoration:'none', color:'#fff', position:'relative', transitionDelay:`${i*.02}s`
              }}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18}}>
                  <span style={{fontFamily:fontENSans, fontSize:9.5, letterSpacing:'.28em', color:hbcp.blueLight, fontWeight:500}}>{String(i+1).padStart(2,'0')} / {it.c}</span>
                  <span style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:18, color:'rgba(255,255,255,.4)'}}>?</span>
                </div>
                <div style={{fontSize:13.5, lineHeight:1.7, fontWeight:500, letterSpacing:'-.005em'}}>{it.t}</div>
                <div style={{marginTop:18, display:'flex', justifyContent:'space-between', alignItems:'center', fontFamily:fontENSans, fontSize:9.5, letterSpacing:'.24em', color:'rgba(255,255,255,.5)'}}>
                  <span>SOLVE WITH AX</span>
                  <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:14, color:hbcp.blueLight}}>↗</span>
                </div>
              </a>
            ))}
          </div>
          <div className="hb-up" style={{textAlign:'center', marginTop:56}}>
            <a href={`${HB_BASE}/achievements`} className="hb-cta" style={{background:'#fff', color:hbcp.ink}}>
              <span>あなたの課題に近いケースを見る</span>
              <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18}}>→</span>
            </a>
          </div>
        </div>
      </section>

      {/* INSIGHTS — 読みもの (実データ: window.HB_HOME.editorials / blog CPT) */}
      <section style={{padding:'104px 32px', background:hbcp.paper}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-section-head">
            <span className="hb-section-head-en">Insights</span>
            <span className="hb-section-head-jp"><HBChars text="読みもの"/></span>
            <span style={{marginLeft:'auto', fontFamily:fontENSans, fontSize:11, letterSpacing:'.18em', color:hbcp.inkLight}}>{(HB.editorials && HB.editorials.length > 0) ? `${String(HB.editorials.length).padStart(2,'0')} / ${HB.counts && HB.counts.blog ? HB.counts.blog : HB.editorials.length}` : 'NO POSTS'}</span>
          </div>
          {(HB.editorials && HB.editorials.length > 0) ? (
            <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:32}}>
              {HB.editorials.slice(0,3).map((p,i)=>{
                const feat = i === 0;
                return (
                  <a key={p.id} href={p.permalink} className="hb-up" style={{display:'block', padding:feat?'40px 32px':'32px 24px', background:feat?hbcp.blue:'#fff', color:feat?'#fff':hbcp.ink, textDecoration:'none', position:'relative', overflow:'hidden', transitionDelay:`${i*.06}s`}}>
                    {feat && (
                      <svg style={{position:'absolute', top:-40, right:-40, width:280, height:280, opacity:.18}} viewBox="0 0 280 280">
                        {[...Array(8)].map((_,k)=>(<circle key={k} cx="140" cy="140" r={20+k*16} fill="none" stroke="#fff" strokeWidth=".7"/>))}
                      </svg>
                    )}
                    <div style={{position:'relative', display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:feat?40:24, fontSize:10, letterSpacing:'.24em'}}>
                      <span style={{fontFamily:fontENSans, fontWeight:500, opacity:feat?1:.65}}>{p.cat}</span>
                      <span style={{fontFamily:fontMono, opacity:.7}}>{p.date}</span>
                    </div>
                    <h3 style={{fontFamily:fontJP, fontWeight:700, fontSize:feat?28:18, lineHeight:1.5, letterSpacing:'-.01em', margin:'0 0 16px', position:'relative'}}>{p.title}</h3>
                    <p style={{fontSize:feat?14:12.5, lineHeight:2, opacity:.85, margin:'0 0 24px', position:'relative'}}>{p.excerpt}</p>
                    <div style={{fontFamily:fontMono, fontSize:11, opacity:.7, paddingTop:14, borderTop:`1px solid ${feat?'rgba(255,255,255,.25)':hbcp.line}`, position:'relative', display:'flex', justifyContent:'space-between'}}>
                      <span>READ</span><span style={{fontFamily:fontEN, fontStyle:'italic'}}>↗</span>
                    </div>
                  </a>
                );
              })}
            </div>
          ) : (
            <div style={{padding:'40px 0', textAlign:'center', color:hbcp.inkLight, fontSize:14}}>記事はまだ公開されていません。</div>
          )}
          {HB.links && HB.links.blog && HB.editorials && HB.editorials.length > 0 && (
            <div style={{textAlign:'center', marginTop:36}}>
              <a href={HB.links.blog} className="hb-cta hb-cta-outline">
                <span>MORE INSIGHTS</span>
                <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18}}>↗</span>
              </a>
            </div>
          )}
        </div>
      </section>

      {/* CAREERS — 採用 */}
      <section style={{
        padding:'104px 32px',
        background:`linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 55%, rgba(11,28,72,0.55) 100%), url('/wp-content/themes/hatena-redesign/images/office_gallery/office_4.jpg') center/cover no-repeat`,
        position:'relative',
        overflow:'hidden',
      }}>
        <svg style={{position:'absolute', top:-120, left:-120, width:520, height:520, opacity:.4}} viewBox="0 0 520 520">
          {[...Array(7)].map((_,i)=>(<circle key={i} cx="260" cy="260" r={30+i*32} fill="none" stroke={hbcp.blue} strokeOpacity=".25" strokeWidth="1"/>))}
        </svg>
        <div style={{position:'relative', maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:80, alignItems:'flex-start'}}>
          <div>
            <div className="hb-up" style={{fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.32em', color:hbcp.blue, marginBottom:24, display:'flex', alignItems:'center', gap:10}}>
              <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:hbcp.blue}}/>
              CAREERS / 2026
            </div>
            <h2 style={{fontFamily:fontJP, fontWeight:700, fontSize:36, lineHeight:1.2, letterSpacing:'-.03em', color:hbcp.inkSoft, margin:'0 0 12px'}}>
              <HBChars text="ちょっと無茶な変化球すら、打ち返す。"/>
            </h2>
            <p className="hb-up" style={{fontFamily:fontJP, fontWeight:900, fontSize:48, lineHeight:1.15, letterSpacing:'-.04em', color:hbcp.ink, margin:'0 0 28px', transitionDelay:'.1s'}}>
              知る人ぞ知る<br/>バックオフィスの<span style={{color:hbcp.blue}}>よろずや</span>。
            </p>
            <p className="hb-up" style={{fontSize:14, lineHeight:2.1, color:hbcp.inkSoft, margin:'0 0 32px', transitionDelay:'.2s'}}>
              専門の境界を越えて事業課題を解く人材を、現在 <strong style={{color:hbcp.ink}}>{(window.HB_POSITIONS || HOME_POSITIONS).length}職種</strong> で募集中。カジュアル面談から、お気軽にどうぞ。
            </p>
            <a href={(HB.links && HB.links.recruit) || `${HB_BASE}/recruit`} className="hb-up hb-cta" style={{transitionDelay:'.3s'}}>
              <span>OPEN POSITIONS — {(window.HB_POSITIONS || HOME_POSITIONS).length}</span>
              <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18}}>→</span>
            </a>
          </div>
          <div>
            {(window.HB_POSITIONS || HOME_POSITIONS).map((j,i)=>(
              <a key={i} href={(HB.links && HB.links.recruit) || `${HB_BASE}/recruit`} className="hb-up" style={{display:'grid', gridTemplateColumns:'90px 1fr 100px 120px 24px', gap:24, alignItems:'center', padding:'18px 0', borderBottom:`1px solid ${hbcp.line}`, textDecoration:'none', color:hbcp.ink, transitionDelay:`${i*.04}s`}}>
                <span style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.22em', padding:'4px 8px', background:hbcp.blue, color:'#fff', justifySelf:'start'}}>{j.dept}</span>
                <span style={{fontSize:14, fontWeight:600}}>{j.title}</span>
                <span style={{fontFamily:fontMono, fontSize:11, color:hbcp.inkLight}}>{j.type}</span>
                <span style={{fontSize:11.5, color:hbcp.inkSoft}}>{j.loc}</span>
                <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18, color:hbcp.blue}}>↗</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS — クライアントの声 */}
      <section style={{padding:'104px 32px', background:hbcp.paper}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-section-head">
            <span className="hb-section-head-en">Voices</span>
            <span className="hb-section-head-jp"><HBChars text="クライアントの声"/></span>
          </div>
          {(HB.testimonials && HB.testimonials.length > 0) ? (
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:32}}>
              {HB.testimonials.slice(0, 3).map((v,i)=>(
                <div key={i} className="hb-up" style={{padding:'40px 32px', background:'#fff', position:'relative', transitionDelay:`${i*.08}s`}}>
                  <div style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:96, lineHeight:.6, color:hbcp.blue, marginBottom:8}}>"</div>
                  <p style={{fontFamily:fontJP, fontWeight:500, fontSize:16, lineHeight:1.85, letterSpacing:'-.005em', margin:'0 0 32px', color:hbcp.ink}}>{v.quote}</p>
                  <div style={{paddingTop:18, borderTop:`1px solid ${hbcp.line}`, display:'flex', justifyContent:'space-between', fontFamily:fontMono, fontSize:11, color:hbcp.inkLight}}>
                    <span>{v.author}</span><span>{v.company}</span>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{padding:'56px 0', textAlign:'center', color:hbcp.inkLight, fontSize:14, lineHeight:2}}>
              クライアントの声は順次掲載予定です。<br/>
              <a href={`${HB_BASE}/achievements`} style={{color:hbcp.blue, textDecoration:'underline'}}>導入事例集</a> もぜひご覧ください。
            </div>
          )}
        </div>
      </section>

      {/* PICKUP — 抽象的なグラフィックカード */}
      <section style={{padding:'96px 32px', background:hbcp.paper}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-section-head">
            <span className="hb-section-head-en">Pickup</span>
            <span className="hb-section-head-jp"><HBChars text="特集"/></span>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24}}>
            {[
              { en:'Pickup / 01', t:'バックオフィスを\n"攻め"に変える3領域',         d:'DX × 会計 × AI の結節点で事業を伸ばす。',             tone:'white', svg: 'circles', href:`${HB_BASE}/about-us` },
              { en:'Pickup / 02', t:'速習freee会計研修\n× DIGITAL BASE',               d:'freeeとの業務提携で生まれた人材育成プログラム。',     tone:'fill',  svg: 'lines',   href:`${HB_BASE}/hatena-content` },
              { en:'Pickup / 03', t:'kintone導入支援\n極みシリーズ',                  d:'業界別・課題別のkintone DXパッケージ。',                tone:'dark',  svg: 'grid',    href:`${HB_BASE}/hatena-dx` },
            ].map((p,i)=>(
              <a key={i} href={p.href} className={`hb-pickup-card hb-up ${p.tone==='fill'?'fill':''} ${p.tone==='dark'?'dark':''}`} style={{transitionDelay:`${i*.08}s`}}>
                {/* 抽象SVG */}
                <svg style={{position:'absolute', top:0, right:0, width:'70%', height:'60%', opacity:p.tone==='white'?.7:.18}} viewBox="0 0 200 200" preserveAspectRatio="xMaxYMin meet">
                  {p.svg==='circles' && [...Array(8)].map((_,k)=>(
                    <circle key={k} cx="180" cy="20" r={20+k*22} fill="none" stroke={p.tone==='white'?hbcp.blue:'#fff'} strokeWidth=".5"/>
                  ))}
                  {p.svg==='lines' && [...Array(20)].map((_,k)=>(
                    <line key={k} x1={k*12} y1="0" x2={200} y2={k*12} stroke="#fff" strokeWidth=".5"/>
                  ))}
                  {p.svg==='grid' && [...Array(8)].flatMap((_,r)=>[...Array(8)].map((_,c)=>(
                    <rect key={`${r}-${c}`} x={c*24+10} y={r*24+10} width="14" height="14" fill="none" stroke="#fff" strokeWidth=".5" opacity={.3 + (r+c)%3*.2}/>
                  )))}
                </svg>
                <div style={{position:'relative', display:'flex', flexDirection:'column', height:'100%'}}>
                  <div style={{fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.24em', marginBottom:'auto', display:'flex', alignItems:'center', gap:10, opacity: p.tone==='white' ? 1 : .85, color: p.tone==='white' ? hbcp.blue : '#fff'}}>
                    <span style={{display:'inline-block', width:6, height:6, borderRadius:'50%', background:p.tone==='white'?hbcp.blue:'#fff'}}/>
                    {p.en}
                  </div>
                  <h3 style={{fontFamily:fontJP, fontWeight:700, fontSize:26, lineHeight:1.45, letterSpacing:'-.01em', margin:'48px 0 16px', whiteSpace:'pre-line'}}>{p.t}</h3>
                  <p style={{fontSize:13, lineHeight:1.95, opacity:.78, margin:0}}>{p.d}</p>
                  <div style={{marginTop:24, fontFamily:fontENSans, fontSize:11, letterSpacing:'.22em', display:'flex', alignItems:'center', gap:10}}>
                    READ MORE <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:16}}>↗</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* PARTNERS — 実際の Hatena Base 取引先ロゴ */}
      <section style={{padding:'96px 32px 80px', background:hbcp.white, borderTop:`1px solid ${hbcp.line}`}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-section-head">
            <span className="hb-section-head-en">Partners</span>
            <span className="hb-section-head-jp"><HBChars text="取引先／協業パートナー"/></span>
          </div>

          <div style={{
            display:'flex', overflowX:'auto', overflowY:'hidden',
            borderTop:`1px solid ${hbcp.line}`, borderLeft:`1px solid ${hbcp.line}`,
            scrollSnapType:'x mandatory', WebkitOverflowScrolling:'touch'
          }}>
            {[
              {n:'freee',            img:'images/partners/freee.svg'},
              {n:'kintone',          img:'images/partners/kintone.png'},
              {n:'Salesforce',       img:'images/partners/salesforce.jpg'},
              {n:'勘定奉行(OBC)',    img:'images/partners/kanjo-bugyo.png'},
              {n:'サイボウズ',       img:'images/partners/cybozu.svg'},
              {n:'LayerX バクラク',  img:'images/partners/bakuraku.png'},
              {n:'マネーフォワード', img:'images/partners/moneyforward.svg'},
              {n:'HelpTech',         img:'images/partners/helptech.png'},
              {n:'Arinos',           img:'images/partners/arinos.jpeg'},
              {n:'SAKYODO',          img:'images/partners/sakyodo.png'},
              {n:'Solabo',           img:'images/partners/solabo.svg'},
              {n:'STRANDER',         img:'images/partners/strander.png'},
              {n:'日本システム技術', img:'images/partners/nihon-system.png'},
              {n:'Uniforce',         img:'images/partners/uniforce.png'},
            ].map((p,i)=>(
              <div key={p.n} className="hb-up" style={{
                flex:'0 0 220px', padding:'32px 24px',
                borderRight:`1px solid ${hbcp.line}`, borderBottom:`1px solid ${hbcp.line}`,
                minHeight:140, display:'flex', alignItems:'center', justifyContent:'center',
                scrollSnapAlign:'start', transitionDelay:`${i*.04}s`
              }}>
                {p.img
                  ? <img src={p.img} alt={p.n} style={{maxWidth:'100%', maxHeight:72, objectFit:'contain'}}/>
                  : <span style={{fontFamily:fontJP, fontWeight:700, fontSize:16, color:hbcp.ink, letterSpacing:'-.005em'}}>{p.n}</span>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA — LP風 大型導線 */}
      <section style={{padding:'120px 32px 132px', background:hbcp.blue, color:'#fff', position:'relative', overflow:'hidden'}}>
        {/* 大きな同心円 */}
        <svg style={{position:'absolute', top:'50%', left:-360, transform:'translateY(-50%)', width:880, height:880, opacity:.22}} viewBox="0 0 880 880">
          {[...Array(14)].map((_,i)=>(
            <circle key={i} cx="440" cy="440" r={40+i*30} fill="none" stroke="#fff" strokeWidth=".6"/>
          ))}
          <circle cx="440" cy="440" r="40" fill="#fff" opacity=".18"/>
        </svg>
        <svg style={{position:'absolute', bottom:0, right:0, width:'100%', height:1, opacity:.3}}><line x1="0" y1="0" x2="100%" y2="0" stroke="#fff"/></svg>

        <div style={{position:'relative', maxWidth:1280, margin:'0 auto'}}>
          <div className="hb-up" style={{fontFamily:fontENSans, fontSize:11, fontWeight:500, letterSpacing:'.32em', color:'rgba(255,255,255,.7)', marginBottom:48, display:'flex', alignItems:'center', gap:10}}>
            <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:'#fff'}}/>
            CONTACT — まずは30分、話してみませんか
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:80, alignItems:'flex-end'}}>
            <div>
              <h2 className="hb-hero-display" style={{margin:'0 0 32px', color:'#fff'}}>
                <div><HBChars text="成長するスタートアップに、"/></div>
                <div style={{paddingLeft:'1em', color:'rgba(255,255,255,.78)'}}><HBChars text="攻めるバックオフィスを構築する。" delay={.4}/></div>
              </h2>
              <p className="hb-up" style={{fontSize:16, lineHeight:2, color:'rgba(255,255,255,.85)', margin:0, maxWidth:520, transitionDelay:'.4s'}}>
                AXは、自社で完結する話ではありません。<br/>
                会計・テクノロジー・AI、3つの専門性を持つチームと、まずは30分、話してみませんか。
              </p>
            </div>

            {/* 右カラム：3導線 */}
            <div className="hb-up" style={{display:'grid', gap:0, transitionDelay:'.5s', borderTop:'1px solid rgba(255,255,255,.3)'}}>
              {[
                {n:'01', en:'CONSULT',  jp:'30分・無料で相談する',     d:'まずは課題感のヒアリングから。', cta:true,  href:`${HB_BASE}/contact`},
                {n:'02', en:'DOWNLOAD', jp:'会社紹介資料をダウンロード', d:'サービス全体・実績・料金感（PDF）', cta:false, href:`${HB_BASE}/document-request`},
                {n:'03', en:'CASES',    jp:'導入事例集を見る',         d:`業界別・課題別、${(HB.counts && HB.counts.achievements) || ''}件の事例から。`, cta:false, href:(HB.links && HB.links.achievements) || `${HB_BASE}/achievements` },
              ].map((c,i)=>(
                <a key={c.n} href={c.href} style={{
                  display:'grid', gridTemplateColumns:'auto 1fr auto', gap:24, alignItems:'center',
                  padding:'26px 4px', borderBottom:'1px solid rgba(255,255,255,.3)',
                  textDecoration:'none', color:'#fff',
                }}>
                  <span style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:32, color:'rgba(255,255,255,.55)', lineHeight:1, minWidth:48}}>{c.n}</span>
                  <span>
                    <span style={{display:'block', fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', color:'rgba(255,255,255,.65)', marginBottom:6}}>{c.en}</span>
                    <span style={{display:'block', fontFamily:fontJP, fontWeight:700, fontSize:18, letterSpacing:'-.005em'}}>{c.jp}</span>
                    <span style={{display:'block', fontSize:11.5, color:'rgba(255,255,255,.65)', marginTop:6}}>{c.d}</span>
                  </span>
                  <span style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:24, color:'#fff'}}>↗</span>
                </a>
              ))}
            </div>
          </div>

          {/* 下部：補助情報 */}
          <div className="hb-up" style={{marginTop:64, paddingTop:24, borderTop:'1px solid rgba(255,255,255,.3)', display:'flex', flexWrap:'wrap', gap:32, fontFamily:fontMono, fontSize:11, color:'rgba(255,255,255,.7)', letterSpacing:'.04em', transitionDelay:'.65s'}}>
            <span>● 平日 9:00-18:00</span>
            <span>● 初回相談 30分・無料</span>
            <span>● 東京・新宿オフィス（東京都新宿区愛住町23-1 woody21 6階）</span>
            <span>● TEL 03-4500-2647</span>
            <span style={{marginLeft:'auto'}}>RESPONSE WITHIN 1 BUSINESS DAY</span>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{padding:'88px 32px 36px', background:hbcp.ink, color:'#fff', position:'relative', overflow:'hidden'}}>
        <svg style={{position:'absolute', bottom:-200, right:-200, width:560, height:560, opacity:.15}} viewBox="0 0 560 560">
          {[...Array(8)].map((_,i)=>(<circle key={i} cx="280" cy="280" r={40+i*30} fill="none" stroke={hbcp.blueLight} strokeOpacity=".4" strokeWidth=".7"/>))}
        </svg>
        <div style={{position:'relative', maxWidth:1280, margin:'0 auto'}}>

          {/* 巨大ロゴ＋GO TO TOP */}
          <div style={{padding:'24px 0 40px', borderBottom:'1px solid rgba(255,255,255,.15)', display:'flex', alignItems:'flex-end', justifyContent:'space-between'}}>
            <div>
              <div style={{fontFamily:fontENSans, fontSize:'clamp(72px, 8vw, 120px)', fontWeight:200, letterSpacing:'-.04em', lineHeight:1}}>
                HatenaBase<span style={{color:hbcp.blueLight, fontFamily:fontEN, fontStyle:'italic', fontWeight:300}}>.</span>
              </div>
              <div style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:22, color:hbcp.blueLight, marginTop:8, letterSpacing:'.02em'}}>
                Backoffice, redesigned.
              </div>
            </div>
            <a href="#top" onClick={(e)=>{ e.preventDefault(); window.scrollTo({top:0, behavior:'smooth'}); }} style={{display:'inline-flex', alignItems:'center', gap:10, fontFamily:fontENSans, fontSize:11, letterSpacing:'.32em', color:'rgba(255,255,255,.6)', textDecoration:'none', padding:'14px 18px', border:'1px solid rgba(255,255,255,.25)'}}>
              GO TO TOP <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:14}}>↑</span>
            </a>
          </div>

          {/* リンクグリッド（本番準拠） */}
          <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr 1fr 1fr', gap:40, padding:'56px 0', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            <div>
              <HBLogo height={28} light/>
              <p style={{fontSize:12.5, lineHeight:2, color:'rgba(255,255,255,.7)', margin:'18px 0 22px', maxWidth:300}}>
                スタートアップ・中小企業の<br/>
                バックオフィスを伸び代に変えるパートナー。
              </p>
              <div style={{fontFamily:fontMono, fontSize:11, color:'rgba(255,255,255,.55)', lineHeight:1.85, marginBottom:22}}>
                東京都新宿区愛住町23-1<br/>
                woody21 6階<br/>
                TEL  03-4500-2647<br/>
                MAIL info@hatenabase.com
              </div>
              <div style={{display:'flex', gap:8}}>
                <a href="https://x.com/hs_hatenabase" target="_blank" rel="noopener" aria-label="X" style={{width:36, height:36, borderRadius:'50%', border:'1px solid rgba(255,255,255,.25)', display:'grid', placeItems:'center'}}>
                  <img src="images/x_logo.svg" alt="" style={{width:13, height:13}}/>
                </a>
                <a href="https://note.com/hatenabase" target="_blank" rel="noopener" aria-label="note" style={{width:36, height:36, borderRadius:'50%', border:'1px solid rgba(255,255,255,.25)', display:'grid', placeItems:'center'}}>
                  <img src="images/note_icon.svg" alt="" style={{width:13, height:13}}/>
                </a>
              </div>
            </div>
            {[
              {h:'Service',     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', 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',     items:[
                {t:'採用情報',                  href:`${HB_BASE}/recruit`},
                {t:'一般採用',                  href:HB_WANTEDLY,            ext:true},
                {t:'新卒採用・インターン採用',  href:`${HB_WANTEDLY}/newgrad`, ext:true},
              ]},
              {h:'Other',       items:[
                {t:'利用規約',                  href:`${HB_BASE}/terms`},
                {t:'資料請求',                  href:`${HB_BASE}/document-request`},
                {t:'コンテンツクリエイター向け', href:`${HB_BASE}/for-content-creaters`},
              ]},
            ].map(c => (
              <div key={c.h}>
                <div style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:22}}>{c.h.toUpperCase()}</div>
                {c.items.map(it => (
                  <a key={it.t} href={it.href} target={it.ext?'_blank':'_self'} rel="noopener"
                     style={{display:'block', color:'#fff', textDecoration:'none', fontSize:12.5, padding:'6px 0', opacity:.85}}>{it.t}</a>
                ))}
              </div>
            ))}
          </div>

          {/* はてなベース税理士事務所（2 法人目・本番 hatenabase.jp 準拠） */}
          <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr 1fr 1fr', gap:40, padding:'56px 0', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            <div>
              <div style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:14, textTransform:'uppercase'}}>HatenaBase Tax Office</div>
              <h3 style={{fontFamily:fontJP, fontWeight:700, fontSize:20, lineHeight:1.45, margin:'0 0 14px', color:'#fff'}}>
                <a href={`${HB_BASE}/tax-accountant`} style={{color:'inherit', textDecoration:'none'}}>はてなベース税理士事務所</a>
              </h3>
              <p style={{fontSize:12.5, lineHeight:2, color:'rgba(255,255,255,.7)', margin:'0 0 22px', maxWidth:300}}>
                クラウド会計を活用して<br/>質の高い経営判断を
              </p>
              <div style={{fontFamily:fontMono, fontSize:11, color:'rgba(255,255,255,.55)', lineHeight:1.85}}>
                東京都新宿区愛住町23-1<br/>
                woody21 6階<br/>
                MAIL tamu@hatenabase.com
              </div>
            </div>
            {[
              {h:'Service',     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', 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',     items:[
                {t:'採用情報',                  href:`${HB_BASE}/tax-accountant/recruit`},
                {t:'一般採用',                  href:HB_WANTEDLY,            ext:true},
                {t:'新卒採用・インターン採用',  href:`${HB_WANTEDLY}/newgrad`, ext:true},
              ]},
              {h:'Other',       items:[
                {t:'利用規約',                  href:`${HB_BASE}/tax-accountant/terms`},
              ]},
            ].map(c => (
              <div key={`tax-${c.h}`}>
                <div style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:22}}>{c.h.toUpperCase()}</div>
                {c.items.map(it => (
                  <a key={it.t} href={it.href} target={it.ext?'_blank':'_self'} rel="noopener"
                     style={{display:'block', color:'#fff', textDecoration:'none', fontSize:12.5, padding:'6px 0', opacity:.85}}>{it.t}</a>
                ))}
              </div>
            ))}
          </div>

          {/* GROUP COMPANIES — 社労士事務所のみ */}
          <div style={{padding:'40px 0', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            <div style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:22}}>GROUP COMPANIES</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr', gap:24, maxWidth:520}}>
              {[
                {n:'はてなベース社会保険労務士事務所', en:'HatenaBase Labor Office', d:'労務・人事・社会保険手続きに関する専門家'},
              ].map(g=>(
                g.href ? (
                  <a key={g.n} href={g.href} style={{display:'block', padding:'20px 18px', border:'1px solid rgba(255,255,255,.15)', textDecoration:'none', color:'#fff'}}>
                    <div style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.22em', color:hbcp.blueLight, marginBottom:8}}>{g.en}</div>
                    <div style={{fontSize:13.5, fontWeight:600, marginBottom:6}}>{g.n}</div>
                    <div style={{fontSize:11, opacity:.65, lineHeight:1.7, marginBottom:10}}>{g.d}</div>
                    <div style={{fontFamily:fontMono, fontSize:10.5, opacity:.55, lineHeight:1.7}}>
                      {g.tel && (<>TEL {g.tel}<br/></>)}
                      {g.mail && (<>MAIL {g.mail}</>)}
                    </div>
                  </a>
                ) : (
                  <div key={g.n} style={{padding:'20px 18px', border:'1px solid rgba(255,255,255,.15)', color:'#fff'}}>
                    <div style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.22em', color:hbcp.blueLight, marginBottom:8}}>{g.en}</div>
                    <div style={{fontSize:13.5, fontWeight:600, marginBottom:6}}>{g.n}</div>
                    <div style={{fontSize:11, opacity:.65, lineHeight:1.7}}>{g.d}</div>
                  </div>
                )
              ))}
            </div>
            <div style={{marginTop:18, fontFamily:fontMono, fontSize:10.5, color:'rgba(255,255,255,.45)', lineHeight:1.7}}>
              共通所在地：東京都新宿区愛住町23-1 woody21 6階
            </div>
          </div>

          {/* BOTTOM */}
          <div style={{display:'flex', flexWrap:'wrap', gap:18, justifyContent:'space-between', paddingTop:28, fontFamily:fontMono, fontSize:10.5, color:'rgba(255,255,255,.5)'}}>
            <div>Copyright © 2025 HatenaBase Inc.</div>
            <div style={{display:'flex', gap:24}}>
              <a href={`${HB_BASE}/terms`} style={{color:'inherit', textDecoration:'none'}}>利用規約</a>
              <a href={`${HB_BASE}/document-request`} style={{color:'inherit', textDecoration:'none'}}>資料請求</a>
              <a href={`${HB_BASE}/contact`} style={{color:'inherit', textDecoration:'none'}}>お問い合わせ</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

// ==================================================
// Mobile
// ==================================================
function VariantDMobile() {
  const rootRef = React.useRef(null);
  const [menuOpen, setMenuOpen] = React.useState(false);
  // ドロワー内で 株式会社 / 税理士事務所 を切替 (hatenabase.jp legacy 構成準拠)
  const [drawerCompany, setDrawerCompany] = React.useState('inc');
  // メニュー開時は背面スクロール禁止 (タッチデバイス用 touchAction も含む)
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = menuOpen ? 'hidden' : prev || '';
    return () => { document.body.style.overflow = prev || ''; };
  }, [menuOpen]);
  React.useEffect(() => {
    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); } }), { root, threshold:0.15 });
    reveals.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // モバイル版もライブデータ: window.HB_HOME を使う
  const HB = (typeof window !== 'undefined' && window.HB_HOME) || { news:[], cases:[], editorials:[], counts:{}, links:{} };
  const news = (HB.news || []).slice(0, 3).map(p => ({
    d:    p.date,
    cat:  p.cat,
    cls:  p.cat_cls,
    t:    p.title,
    href: p.permalink,
  }));
  // 導入実績・事例 (achievements CPT) の最新 3 件
  const cases = (HB.cases || []).slice(0, 3);
  const achievementsHref = (HB.links && HB.links.achievements) || `${HB_BASE}/achievements`;

  // Header / Drawer は親 wrapper の transform: scale() スコープから抜けるため
  // createPortal で document.body 直下にマウント → position:fixed が viewport 基準で動作。
  const headerAndDrawer = (
    <>
      <header style={{position:'fixed', top:0, left:0, right:0, zIndex:50, height:60, background:'#fff', borderBottom:`1px solid ${hbcp.line}`, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 16px'}}>
        <a href={HB_BASE} style={{display:'block'}}><HBLogo height={24}/></a>
        <button onClick={()=>setMenuOpen(!menuOpen)} aria-label="menu" style={{background:'none', border:`1px solid ${hbcp.line}`, width:42, height:42, display:'grid', placeItems:'center', cursor:'pointer', padding:0}}>
          <div style={{position:'relative', width:18, height:12}}>
            <span style={{position:'absolute', left:0, right:0, top: menuOpen ? 5 : 0, height:1.5, background:hbcp.ink, transform: menuOpen ? 'rotate(45deg)' : 'none', transition:`all .3s ${ease}`}}/>
            <span style={{position:'absolute', left:0, right:0, top:5, height:1.5, background:hbcp.ink, opacity: menuOpen ? 0 : 1, transition:`opacity .2s`}}/>
            <span style={{position:'absolute', left:0, right:0, top: menuOpen ? 5 : 10, height:1.5, background:hbcp.ink, transform: menuOpen ? 'rotate(-45deg)' : 'none', transition:`all .3s ${ease}`}}/>
          </div>
        </button>
      </header>

      {/* MOBILE DRAWER — はてなベース株式会社 / 税理士事務所 を縦タブで切替 (hatenabase.jp legacy 構成) */}
      {(() => {
        const COMPANIES_DRAWER = [
          {
            key: 'inc',
            tab: 'はてなベース',
            tagline: '「攻めのバックオフィス」を構築し、\n企業の成長を力強く後押しします。',
            sections: [
              { en:'Service', jp:'事業・サービス', items:[
                {t:'Hatena,DX.',      href:`${HB_BASE}/hatena-dx`},
                {t:'Hatena,Content.', href:`${HB_BASE}/hatena-content`},
                {t:'Hatena,BI.',      href:`${HB_BASE}/hatena-bi`},
              ]},
              { en:'Achievements', jp:'導入実績・事例', href:`${HB_BASE}/achievements` },
              { en:'News',         jp:'お知らせ',       href:`${HB_BASE}/news` },
              { en:'Blog',         jp:'ブログ',         href:`${HB_BASE}/blog` },
              { en:'About us',     jp:'会社情報',       href:`${HB_BASE}/about-us` },
              { en:'Contact',      jp:'お問い合わせ',   href:`${HB_BASE}/contact` },
              { en:'Recruit',      jp:'採用情報',       href:`${HB_BASE}/recruit`, items:[
                {t:'一般採用',                  href:HB_WANTEDLY,            ext:true},
                {t:'新卒採用・インターン採用',  href:`${HB_WANTEDLY}/newgrad`, ext:true},
              ]},
            ],
            secondary: [
              {t:'利用規約',                  href:`${HB_BASE}/terms`},
              {t:'資料請求',                  href:`${HB_BASE}/document-request`},
              {t:'コンテンツクリエイター向け', href:`${HB_BASE}/for-content-creaters`},
            ],
          },
          {
            key: 'tax',
            tab: 'はてなベース税理士事務所',
            tagline: 'クラウド会計を活用して、\n質の高い経営判断を。',
            sections: [
              { en:'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`},
              ]},
              { en:'Achievements', jp:'導入実績・事例', href:`${HB_BASE}/office-achievements` },
              { en:'News',         jp:'お知らせ',       href:`${HB_BASE}/office-news` },
              { en:'Blog',         jp:'ブログ',         href:`${HB_BASE}/blog` },
              { en:'About us',     jp:'私たちについて', href:`${HB_BASE}/tax-accountant/about-us` },
              { en:'Contact',      jp:'お問い合わせ',   href:`${HB_BASE}/tax-accountant/contact` },
              { en:'Recruit',      jp:'採用情報',       href:`${HB_BASE}/tax-accountant/recruit`, items:[
                {t:'一般採用',                  href:HB_WANTEDLY,            ext:true},
                {t:'新卒採用・インターン採用',  href:`${HB_WANTEDLY}/newgrad`, ext:true},
              ]},
            ],
            secondary: [
              {t:'利用規約',  href:`${HB_BASE}/tax-accountant/terms`},
            ],
          },
        ];
        const inactiveBg = '#3a4a5a';
        return (
          <div style={{
            /* 親 wrapper に transform: scale() があるため position:fixed の containing block が
               wrapper になる。inset:60px 0 0 だと wrapper の content height (6000px+) に伸びる。
               明示的に height を指定して viewport 内に収める。 */
            position:'fixed', top:60, left:0, right:0, height:'calc(100vh - 60px)', zIndex:45, background:hbcp.ink,
            transform: menuOpen ? 'translateY(0)' : 'translateY(-100%)',
            transition: `transform .45s ${ease}`,
            display:'flex', flexDirection:'row',
            overflow:'hidden',  /* 親側ではスクロールさせない (右ペーン側で overflow-y) */
          }}>
            {/* 左 縦タブ — 上下 2 タブで等分 (drawer 高さ ÷ 2 = タブ高さ) */}
            <div style={{flex:'0 0 38px', display:'flex', flexDirection:'column', background:'transparent', height:'100%'}}>
              {COMPANIES_DRAWER.map(c => {
                const active = drawerCompany === c.key;
                return (
                  <button key={c.key} onClick={()=>setDrawerCompany(c.key)}
                    style={{
                      flex:'1 1 0', minHeight:0, border:'none', cursor:'pointer',
                      writingMode:'vertical-rl', textOrientation:'mixed',
                      padding:'24px 0', fontFamily:fontJP, fontWeight:600,
                      fontSize:13, letterSpacing:'.16em',
                      color: active ? '#fff' : 'rgba(255,255,255,.55)',
                      background: active ? hbcp.ink : inactiveBg,
                      borderBottom: active ? 'none' : '1px solid rgba(255,255,255,.06)',
                      display:'flex', alignItems:'center', justifyContent:'center',
                    }}>
                    {c.tab}
                  </button>
                );
              })}
            </div>
            {/* 右 アクティブ企業のメニュー */}
            {(() => {
              const co = COMPANIES_DRAWER.find(c => c.key === drawerCompany) || COMPANIES_DRAWER[0];
              return (
                <div style={{flex:1, overflowY:'auto', WebkitOverflowScrolling:'touch', color:'#fff', padding:'18px 22px 28px'}}>
                  {/* Hatenabase ロゴ */}
                  <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:18}}>
                    <img src="/wp-content/themes/hatena/images/hatena_logo_white.svg" alt="HatenaBase" style={{height:30, width:'auto', display:'block'}}/>
                    <button onClick={()=>setMenuOpen(false)} aria-label="close" style={{width:36, height:36, background:'transparent', border:'none', color:'#fff', fontSize:24, cursor:'pointer', display:'grid', placeItems:'center'}}>×</button>
                  </div>
                  {/* タグライン */}
                  <p style={{whiteSpace:'pre-line', fontSize:13, lineHeight:1.85, color:'rgba(255,255,255,.85)', margin:'0 0 22px'}}>{co.tagline}</p>

                  {/* メニュー */}
                  {co.sections.map(s => (
                    <div key={s.en} style={{marginBottom:18}}>
                      <a href={s.href || '#'} style={{display:'block', textDecoration:'none', color:'#fff'}}>
                        <div style={{fontFamily:fontENSans, fontWeight:700, fontSize:18, letterSpacing:'.005em'}}>{s.en}</div>
                        <div style={{fontSize:11, color:'rgba(255,255,255,.65)', marginTop:1}}>{s.jp}</div>
                      </a>
                      {s.items && (
                        <div style={{padding:'8px 0 0 16px'}}>
                          {s.items.map(it => (
                            <a key={it.t} href={it.href} target={it.ext?'_blank':'_self'} rel="noopener"
                               style={{display:'flex', alignItems:'center', gap:6, padding:'5px 0', textDecoration:'none', color:'rgba(255,255,255,.85)', fontSize:13.5}}>
                              {it.t}
                              {it.ext && <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:11, opacity:.7}}>↗</span>}
                            </a>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}

                  {/* 二次リンク (利用規約 / 資料請求 / コンテンツクリエイター向け) */}
                  {co.secondary && co.secondary.length > 0 && (
                    <div style={{marginTop:24, paddingTop:18, borderTop:'1px solid rgba(255,255,255,.18)', display:'flex', flexWrap:'wrap', gap:'10px 16px'}}>
                      {co.secondary.map(it => (
                        <a key={it.t} href={it.href} style={{fontSize:12.5, color:'rgba(255,255,255,.75)', textDecoration:'none'}}>{it.t}</a>
                      ))}
                    </div>
                  )}

                  {/* SNS */}
                  <div style={{marginTop:20, display:'flex', gap:10, justifyContent:'flex-end'}}>
                    <a href="https://x.com/hs_hatenabase" target="_blank" rel="noopener" aria-label="X" style={{width:32, height:32, display:'grid', placeItems:'center'}}><img src="images/x_logo.svg" alt="" style={{width:13, height:13}}/></a>
                    <a href="https://note.com/hatenabase" target="_blank" rel="noopener" aria-label="note" style={{width:32, height:32, display:'grid', placeItems:'center'}}><img src="images/note_icon.svg" alt="" style={{width:13, height:13}}/></a>
                  </div>
                </div>
              );
            })()}
          </div>
        );
      })()}
    </>
  );

  return (
    <>
      <div ref={rootRef} className="ab-scroll" style={{width:'100%', minHeight:'100%', background:hbcp.white, color:hbcp.ink, fontFamily:fontJP, position:'relative', paddingTop:60}}>
        <style>{styles}</style>

      <section style={{position:'relative', padding:'72px 20px 80px', overflow:'hidden', background:`linear-gradient(180deg, #fafbff 0%, #fff 60%, #f6f9ff 100%)`, borderBottom:`1px solid ${hbcp.line}`}}>
        {/* 背景装飾: 大きな concentric circles (右上) + 細かいドットグリッド (全体) + 斜めライン (左下) */}
        <svg style={{position:'absolute', top:80, right:-160, width:380, height:380, opacity:.45, pointerEvents:'none'}} viewBox="0 0 380 380">
          <circle cx="190" cy="190" r="188" fill="none" stroke={hbcp.blue} strokeOpacity=".22" strokeWidth=".8"/>
          <circle cx="190" cy="190" r="140" fill="none" stroke={hbcp.blue} strokeOpacity=".16" strokeWidth=".8"/>
          <circle cx="190" cy="190" r="90"  fill="none" stroke={hbcp.blue} strokeOpacity=".10" strokeWidth=".8"/>
          <circle cx="190" cy="190" r="44"  fill="none" stroke={hbcp.blue} strokeOpacity=".07" strokeWidth=".8"/>
        </svg>
        {/* 背景装飾: ドットグリッド */}
        <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:.35, pointerEvents:'none'}}>
          <defs>
            <pattern id="hb-hero-mb-dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r=".8" fill={hbcp.blue} fillOpacity=".25"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#hb-hero-mb-dots)"/>
        </svg>
        {/* 左下に伸びる斜線 */}
        <svg style={{position:'absolute', bottom:-40, left:-30, width:200, height:200, opacity:.2, pointerEvents:'none'}} viewBox="0 0 200 200">
          {[...Array(8)].map((_,i)=>(
            <line key={i} x1={i*22} y1="200" x2={200} y2={i*22} stroke={hbcp.blue} strokeWidth=".7"/>
          ))}
        </svg>
        {/* HATENABASE モノグラム (右下にうっすら) */}
        <div style={{position:'absolute', right:-12, bottom:8, fontFamily:fontENSans, fontWeight:200, fontSize:'clamp(96px, 28vw, 130px)', lineHeight:.85, letterSpacing:'-.05em', color:hbcp.blue, opacity:.06, pointerEvents:'none', whiteSpace:'nowrap'}}>HB.</div>
        <div style={{position:'relative'}}>
          <div className="hb-up" style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.28em', color:hbcp.blue, marginBottom:24, display:'flex', alignItems:'center', gap:10}}>
            <span style={{display:'inline-block', width:6, height:6, borderRadius:'50%', background:hbcp.blue}}/>
            HATENABASE INC. / TOKYO
          </div>
          <h1 style={{fontFamily:fontJP, fontWeight:900, fontSize:'clamp(34px, 9vw, 44px)', lineHeight:1.08, letterSpacing:'-.03em', margin:0, wordBreak:'keep-all'}}>
            <div><HBChars text="攻めのバックオフィスを構築し、"/></div>
            <div style={{marginTop:6}}><HBChars text="経済OSをアップデートする。" delay={.3}/></div>
            <div style={{marginTop:12, fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:'clamp(16px, 4.4vw, 20px)', color:hbcp.blue, lineHeight:1.1}}><HBChars text="Implementing the offensive backoffice." delay={.6}/></div>
          </h1>
          <p className="hb-up" style={{fontSize:13.5, lineHeight:2.05, color:hbcp.inkSoft, margin:'28px 0 0', transitionDelay:'.6s'}}>
            <span style={{color:hbcp.blue, fontWeight:700}}>DX × 会計 × AI</span>—<br/>
            3つの専門領域が交わる場所から、スタートアップの「守り」を、事業を加速させる「攻め」へ翻訳する。
          </p>
        </div>
      </section>

      <div style={{padding:'14px 0', borderTop:`1px solid ${hbcp.line}`, borderBottom:`1px solid ${hbcp.line}`, overflow:'hidden'}}>
        <div className="hb-marquee" style={{whiteSpace:'nowrap'}}>
          {[...Array(2)].flatMap((_,i) => (HB.news || []).slice(0,3).map((p,j) => (
            <span key={`${i}-${j}`} style={{fontSize:12, fontWeight:500}}>{p.cat} — {p.title}<span style={{color:hbcp.inkLight, marginLeft:24}}>—</span></span>
          )))}
        </div>
      </div>

      {/* ===== 1. 3つの専門領域 (Service) ===== */}
      <section style={{padding:'48px 16px 32px'}}>
        <div className="hb-section-head" style={{flexWrap:'wrap'}}>
          <span className="hb-section-head-en">Service</span>
          <span className="hb-section-head-jp" style={{fontSize:24}}>3つの専門領域</span>
        </div>
        <div style={{borderTop:`1px solid ${hbcp.ink}`}}>
          {[
            {num:'01', en:'DX / BPR',    jp:'DXシステム導入・BPRシステム導入支援',   img:'images/storyset_data.svg',         href:`${HB_BASE}/hatena-dx`},
            {num:'02', en:'Finance',     jp:'経理業務改善・DX支援会計コンサル',        img:'images/storyset_business_plan.svg', href:`${HB_BASE}/hatena-bi`},
            {num:'03', en:'AI / Talent', jp:'DX・AI人材育成／クラウド会計人材の育成', img:'images/storyset_consulting.svg',    href:`${HB_BASE}/hatena-content`},
          ].map((s,i)=>(
            <a key={s.num} href={s.href} className="hb-up" style={{display:'grid', gridTemplateColumns:'36px 1fr 80px 14px', gap:14, alignItems:'center', padding:'18px 0', borderBottom:`1px solid ${hbcp.line}`, textDecoration:'none', color:hbcp.ink, transitionDelay:`${i*.05}s`}}>
              <div style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:24, color:hbcp.blue}}>{s.num}</div>
              <div style={{minWidth:0}}>
                <div style={{fontFamily:fontENSans, fontSize:9, letterSpacing:'.22em', color:hbcp.inkLight, marginBottom:4}}>{s.en}</div>
                <div style={{fontFamily:fontJP, fontWeight:700, fontSize:17}}>{s.jp}</div>
              </div>
              <div style={{height:60, display:'grid', placeItems:'center'}}>
                <img src={s.img} alt="" style={{maxHeight:60, maxWidth:80}}/>
              </div>
              <div style={{fontFamily:fontEN, fontStyle:'italic', fontSize:16, color:hbcp.blue}}>→</div>
            </a>
          ))}
        </div>
      </section>

      {/* ===== 2. AO Vision (Our Vision) ===== */}
      <section style={{padding:'48px 20px', background:hbcp.blue, color:'#fff', position:'relative', overflow:'hidden'}}>
        <svg style={{position:'absolute', top:'50%', right:-100, transform:'translateY(-50%)', width:380, height:380, opacity:.18}} viewBox="0 0 380 380">
          {[...Array(10)].map((_,i)=>(<circle key={i} cx="190" cy="190" r={20+i*18} fill="none" stroke="#fff" strokeWidth=".7"/>))}
        </svg>
        <div style={{position:'relative'}}>
          <div className="hb-up" style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', opacity:.85, marginBottom:18}}>● VISION / 2030</div>
          <div className="hb-up" style={{fontFamily:fontENSans, fontWeight:300, fontSize:60, lineHeight:.92, letterSpacing:'-.05em', transitionDelay:'.1s'}}>
            OUR<br/>VISION
            <div style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:24, marginTop:14, opacity:.85}}>Backoffice, redesigned.</div>
          </div>
          <h3 className="hb-up" style={{fontFamily:fontJP, fontWeight:700, fontSize:24, lineHeight:1.55, letterSpacing:'-.01em', margin:'32px 0 18px', transitionDelay:'.2s'}}>
            バックオフィスを、<br/>事業を伸ばす<span style={{borderBottom:'2px solid #fff'}}>「攻めの装置」</span>へ。
          </h3>
          <p className="hb-up" style={{fontSize:13, lineHeight:2, opacity:.9, margin:'0 0 28px', transitionDelay:'.3s'}}>
            スタートアップが伸びる速度は、バックオフィスの速度に等しい。
          </p>
        </div>
      </section>

      {/* ===== 3. ニュース (News) ===== */}
      <section style={{padding:'48px 16px 32px'}}>
        <div className="hb-section-head" style={{flexWrap:'wrap'}}>
          <span className="hb-section-head-en">News</span>
          <span className="hb-section-head-jp" style={{fontSize:24}}>ニュース</span>
        </div>
        {news.length > 0 ? news.map((n,i)=>(
          <a key={n.href || i} href={n.href || '#'} className="hb-news-row hb-up" style={{gridTemplateColumns:'auto 1fr auto', transitionDelay:`${i*0.06}s`}}>
            <span className={`hb-label ${n.cls || 'hb-label-ghost'}`}>{n.cat}</span>
            <div>
              <div style={{fontFamily:fontMono, fontSize:11, color:hbcp.inkLight, marginBottom:6}}>{n.d}</div>
              <div style={{fontSize:14, fontWeight:500, lineHeight:1.55}}>{n.t}</div>
            </div>
            <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:18, color:hbcp.blue}}>↗</span>
          </a>
        )) : (
          <div style={{padding:'24px 0', textAlign:'center', color:hbcp.inkLight, fontSize:13}}>まだニュースは投稿されていません。</div>
        )}
      </section>

      {/* ===== 4. 採用情報 (Recruit) — hatenabase.jp で使われている header_sp_1.svg を流用 ===== */}
      <section style={{padding:'48px 16px 32px', background:hbcp.paper}}>
        <div className="hb-section-head" style={{flexWrap:'wrap'}}>
          <span className="hb-section-head-en">Recruit</span>
          <span className="hb-section-head-jp" style={{fontSize:24}}>採用情報</span>
        </div>
        <div style={{margin:'14px -16px 8px'}}>
          {/* hatenabase.jp に既に存在するオフィス実写 (themes/hatena/images/office_gallery/) を共有参照。
              SVG イラストではなく現場の写真でリアル感を出す。redesign 内に複製しない (重複保管回避)。 */}
          <div style={{aspectRatio:'3 / 2', overflow:'hidden', background:hbcp.paper}}>
            <img src="/wp-content/themes/hatena/images/office_gallery/office_1.jpg" alt="はてなベース新宿オフィス" loading="lazy" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
          </div>
        </div>
        <p style={{fontSize:13.5, lineHeight:1.85, color:hbcp.inkSoft, margin:'14px 0 18px'}}>
          バックオフィスを「攻めの装置」に変える仲間を募集中。新卒・中途・業務委託まで。
        </p>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          <a href={`${HB_BASE}/recruit`} className="hb-cta" style={{justifyContent:'space-between'}}>
            <span>採用情報トップへ</span>
            <span style={{fontFamily:fontEN, fontStyle:'italic'}}>→</span>
          </a>
          <a href={HB_WANTEDLY} target="_blank" rel="noopener" className="hb-cta hb-cta-outline" style={{justifyContent:'space-between'}}>
            <span>Wantedly で募集を見る</span>
            <span style={{fontFamily:fontEN, fontStyle:'italic'}}>↗</span>
          </a>
        </div>
      </section>

      {/* ===== 5. 会社情報への動線 (About) — Economist 風 row card =====
          編集マガジン体のレイアウト: title/copy 左 + 小型 illust 右 100px。
          イラストは情報を補助するアクセントであり主役にしない (mobile editorial 規約)。 */}
      <section style={{padding:'48px 16px 32px'}}>
        <div className="hb-section-head" style={{flexWrap:'wrap'}}>
          <span className="hb-section-head-en">About</span>
          <span className="hb-section-head-jp" style={{fontSize:24}}>会社情報</span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 100px', gap:14, alignItems:'center', margin:'14px 0 16px'}}>
          <p style={{fontFamily:fontJPSerif, fontSize:14, lineHeight:1.85, color:hbcp.ink, margin:0, fontWeight:500}}>
            はてなベース株式会社の<br/>理念・組織・拠点をご紹介します。
          </p>
          {/* Storyset office illustration — 100px 固定 / アクセント用 */}
          <img src="images/storyset_office.svg" alt="" loading="lazy" style={{width:'100%', height:'auto', display:'block', opacity:.92}}/>
        </div>
        <a href={`${HB_BASE}/about-us`} className="hb-cta" style={{justifyContent:'space-between'}}>
          <span>私たちについて</span>
          <span style={{fontFamily:fontEN, fontStyle:'italic'}}>→</span>
        </a>
      </section>

      {/* ===== 6. 取引先・協業パートナー (Partners) — 実データ ===== */}
      <section style={{padding:'48px 16px 32px', background:hbcp.white, borderTop:`1px solid ${hbcp.line}`}}>
        <div className="hb-section-head" style={{flexWrap:'wrap'}}>
          <span className="hb-section-head-en">Partners</span>
          <span className="hb-section-head-jp" style={{fontSize:22}}>取引先／協業パートナー</span>
        </div>
        <div style={{
          display:'flex', overflowX:'auto', overflowY:'hidden',
          borderTop:`1px solid ${hbcp.line}`, borderLeft:`1px solid ${hbcp.line}`,
          scrollSnapType:'x mandatory', WebkitOverflowScrolling:'touch'
        }}>
          {[
            {n:'freee',            img:'images/partners/freee.svg'},
            {n:'kintone',          img:'images/partners/kintone.png'},
            {n:'Salesforce',       img:'images/partners/salesforce.jpg'},
            {n:'勘定奉行(OBC)',    img:'images/partners/kanjo-bugyo.png'},
            {n:'サイボウズ',       img:'images/partners/cybozu.svg'},
            {n:'LayerX バクラク',  img:'images/partners/bakuraku.png'},
            {n:'マネーフォワード', img:'images/partners/moneyforward.svg'},
            {n:'HelpTech',         img:'images/partners/helptech.png'},
            {n:'Arinos',           img:'images/partners/arinos.jpeg'},
            {n:'SAKYODO',          img:'images/partners/sakyodo.png'},
            {n:'Solabo',           img:'images/partners/solabo.svg'},
            {n:'STRANDER',         img:'images/partners/strander.png'},
            {n:'日本システム技術', img:'images/partners/nihon-system.png'},
            {n:'Uniforce',         img:'images/partners/uniforce.png'},
          ].map((p,i)=>(
            <div key={p.n} className="hb-up" style={{
              flex:'0 0 160px', padding:'28px 18px',
              borderRight:`1px solid ${hbcp.line}`, borderBottom:`1px solid ${hbcp.line}`,
              minHeight:108, display:'flex', alignItems:'center', justifyContent:'center',
              scrollSnapAlign:'start', transitionDelay:`${i*.05}s`
            }}>
              {p.img
                ? <img src={p.img} alt={p.n} style={{maxWidth:'100%', maxHeight:56, objectFit:'contain'}}/>
                : <span style={{fontFamily:fontJP, fontWeight:700, fontSize:13, color:hbcp.ink, textAlign:'center', lineHeight:1.3}}>{p.n}</span>}
            </div>
          ))}
        </div>
      </section>

      {/* ===== 7. 導入実績・事例のサンプル (Achievements) ===== */}
      <section style={{padding:'48px 16px 32px', background:hbcp.paper}}>
        <div className="hb-section-head" style={{flexWrap:'wrap'}}>
          <span className="hb-section-head-en">Achievements</span>
          <span className="hb-section-head-jp" style={{fontSize:24}}>導入実績・事例</span>
        </div>
        {cases.length > 0 ? (
          <div style={{display:'grid', gap:14, marginTop:14}}>
            {cases.map((c, i) => (
              <a key={c.id || i} href={c.permalink || achievementsHref}
                 style={{display:'flex', flexDirection:'column', gap:8, textDecoration:'none', color:hbcp.ink, paddingBottom:14, borderBottom: i === cases.length-1 ? 'none' : `1px solid ${hbcp.line}`}}>
                {c.thumbnail && (
                  <div style={{aspectRatio:'16/9', overflow:'hidden', background:hbcp.white}}>
                    <img src={c.thumbnail} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                  </div>
                )}
                {c.cat && <div style={{fontFamily:fontENSans, fontSize:9, letterSpacing:'.24em', fontWeight:700, color:hbcp.blue, textTransform:'uppercase'}}>{c.cat}</div>}
                <h3 style={{fontFamily:fontJPSerif, fontWeight:700, fontSize:15, lineHeight:1.4, margin:0, display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{c.title}</h3>
              </a>
            ))}
          </div>
        ) : (
          <div style={{padding:'24px 0', textAlign:'center', color:hbcp.inkLight, fontSize:13}}>導入事例を準備中です。</div>
        )}
        <a href={achievementsHref} className="hb-cta hb-cta-outline" style={{justifyContent:'space-between', marginTop:18}}>
          <span>すべての導入事例を見る</span>
          <span style={{fontFamily:fontEN, fontStyle:'italic'}}>↗</span>
        </a>
      </section>

      {/* ===== 8. コンタクト (Contact) ===== */}
      <section style={{padding:'48px 20px'}}>
        <div className="hb-up" style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.32em', color:hbcp.blue, marginBottom:24}}>● CONTACT</div>
        <h2 style={{fontFamily:fontJP, fontWeight:900, fontSize:38, lineHeight:1.05, letterSpacing:'-.04em', margin:'0 0 32px'}}>
          <div><HBChars text="成長するスタートアップに、"/></div>
          <div style={{color:hbcp.blue, paddingLeft:'.6em'}}><HBChars text="攻めるバックオフィスを構築する。" delay={.3}/></div>
        </h2>
        <div className="hb-up" style={{display:'flex', flexDirection:'column', gap:12, transitionDelay:'.4s'}}>
          <a href={`${HB_BASE}/contact`} className="hb-cta" style={{justifyContent:'center'}}>
            <span>30分・無料で相談する</span>
            <span style={{fontFamily:fontEN, fontStyle:'italic'}}>→</span>
          </a>
          <a href={`${HB_BASE}/document-request`} className="hb-cta hb-cta-outline" style={{justifyContent:'center'}}>
            <span>会社紹介資料</span>
          </a>
        </div>
      </section>

      <footer style={{padding:'56px 16px 28px', background:hbcp.ink, color:'#fff', position:'relative', overflow:'hidden'}}>
        <svg style={{position:'absolute', bottom:-100, right:-100, width:280, height:280, opacity:.18}} viewBox="0 0 280 280">
          {[...Array(6)].map((_,i)=>(<circle key={i} cx="140" cy="140" r={20+i*20} fill="none" stroke={hbcp.blueLight} strokeWidth=".7"/>))}
        </svg>
        <div style={{position:'relative'}}>
          {/* ニュースレター */}
          <div style={{paddingBottom:32, borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            <HBLogo height={26} light/>
            <p style={{fontSize:12.5, lineHeight:1.95, color:'rgba(255,255,255,.7)', margin:'14px 0 0', maxWidth:320}}>
              スタートアップ・中小企業のバックオフィスを伸び代に変えるパートナー。
            </p>
          </div>

          {/* 巨大ロゴ */}
          <div style={{padding:'24px 0 28px', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            <div style={{fontFamily:fontENSans, fontSize:44, fontWeight:200, letterSpacing:'-.04em', lineHeight:1}}>
              HatenaBase<span style={{color:hbcp.blueLight, fontFamily:fontEN, fontStyle:'italic', fontWeight:300}}>.</span>
            </div>
            <div style={{fontFamily:fontEN, fontStyle:'italic', fontSize:14, color:hbcp.blueLight, marginTop:6}}>Backoffice, redesigned.</div>
          </div>

          {/* リンク（本番準拠） */}
          <div style={{padding:'12px 0 4px', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            {[
              {h:'Service',     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', 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',     items:[
                {t:'採用情報',                  href:`${HB_BASE}/recruit`},
                {t:'一般採用 (Wantedly)',        href:HB_WANTEDLY,            ext:true},
                {t:'新卒・インターン (Wantedly)', href:`${HB_WANTEDLY}/newgrad`, ext:true},
              ]},
              {h:'Other',       items:[
                {t:'利用規約',                  href:`${HB_BASE}/terms`},
                {t:'資料請求',                  href:`${HB_BASE}/document-request`},
                {t:'コンテンツクリエイター向け', href:`${HB_BASE}/for-content-creaters`},
              ]},
            ].map(c => (
              <details key={c.h} style={{borderTop:'1px solid rgba(255,255,255,.1)'}}>
                <summary style={{listStyle:'none', display:'flex', justifyContent:'space-between', padding:'14px 4px', cursor:'pointer'}}>
                  <span style={{fontFamily:fontENSans, fontSize:11, letterSpacing:'.24em', color:hbcp.blueLight}}>{c.h.toUpperCase()}</span>
                  <span style={{fontFamily:fontEN, fontStyle:'italic', color:hbcp.blueLight}}>+</span>
                </summary>
                <div style={{paddingBottom:12}}>
                  {c.items.map(it=>(
                    <a key={it.t} href={it.href} target={it.ext?'_blank':'_self'} rel="noopener" style={{display:'block', color:'#fff', opacity:.8, fontSize:13, padding:'6px 12px', textDecoration:'none'}}>{it.t}</a>
                  ))}
                </div>
              </details>
            ))}
          </div>

          {/* はてなベース税理士事務所（2 法人目・本番 hatenabase.jp 準拠） */}
          <div style={{padding:'28px 0 4px', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            <div style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:8}}>HatenaBase Tax Office</div>
            <h3 style={{fontFamily:fontJP, fontWeight:700, fontSize:18, lineHeight:1.45, margin:'0 0 10px', color:'#fff'}}>
              <a href={`${HB_BASE}/tax-accountant`} style={{color:'inherit', textDecoration:'none'}}>はてなベース税理士事務所</a>
            </h3>
            <p style={{fontSize:13, lineHeight:1.85, color:'rgba(255,255,255,.7)', margin:'0 0 16px'}}>
              クラウド会計を活用して<br/>質の高い経営判断を
            </p>
            <div style={{fontFamily:fontMono, fontSize:11, color:'rgba(255,255,255,.55)', lineHeight:1.85, marginBottom:14}}>
              東京都新宿区愛住町23-1<br/>woody21 6階<br/>MAIL tamu@hatenabase.com
            </div>
            {[
              {h:'Service',     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', 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',     items:[
                {t:'採用情報',                  href:`${HB_BASE}/tax-accountant/recruit`},
                {t:'一般採用 (Wantedly)',        href:HB_WANTEDLY,            ext:true},
                {t:'新卒・インターン (Wantedly)', href:`${HB_WANTEDLY}/newgrad`, ext:true},
              ]},
              {h:'Other',       items:[
                {t:'利用規約',                  href:`${HB_BASE}/tax-accountant/terms`},
              ]},
            ].map(c => (
              <details key={`tax-${c.h}`} style={{borderTop:'1px solid rgba(255,255,255,.1)'}}>
                <summary style={{listStyle:'none', display:'flex', justifyContent:'space-between', padding:'14px 4px', cursor:'pointer'}}>
                  <span style={{fontFamily:fontENSans, fontSize:11, letterSpacing:'.24em', color:hbcp.blueLight}}>{c.h.toUpperCase()}</span>
                  <span style={{fontFamily:fontEN, fontStyle:'italic', color:hbcp.blueLight}}>+</span>
                </summary>
                <div style={{paddingBottom:12}}>
                  {c.items.map(it=>(
                    <a key={it.t} href={it.href} target={it.ext?'_blank':'_self'} rel="noopener" style={{display:'block', color:'#fff', opacity:.8, fontSize:13, padding:'6px 12px', textDecoration:'none'}}>{it.t}</a>
                  ))}
                </div>
              </details>
            ))}
          </div>

          {/* GROUP — 社労士事務所のみ */}
          <div style={{padding:'24px 0', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            <div style={{fontFamily:fontENSans, fontSize:10, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:14}}>GROUP COMPANIES</div>
            <div style={{display:'grid', gap:10}}>
              {[
                {n:'はてなベース社会保険労務士事務所', en:'HatenaBase Labor Office', mail:''},
              ].map(g=>(
                g.href ? (
                  <a key={g.n} href={g.href} style={{display:'block', padding:'12px 14px', border:'1px solid rgba(255,255,255,.15)', color:'#fff', textDecoration:'none'}}>
                    <div style={{fontFamily:fontENSans, fontSize:9, letterSpacing:'.2em', color:hbcp.blueLight, marginBottom:2}}>{g.en}</div>
                    <div style={{fontSize:13, fontWeight:600, marginBottom:g.mail?4:0}}>{g.n}</div>
                    {g.mail && (<div style={{fontFamily:fontMono, fontSize:10.5, opacity:.6}}>MAIL {g.mail}</div>)}
                  </a>
                ) : (
                  <div key={g.n} style={{padding:'12px 14px', border:'1px solid rgba(255,255,255,.15)', color:'#fff'}}>
                    <div style={{fontFamily:fontENSans, fontSize:9, letterSpacing:'.2em', color:hbcp.blueLight, marginBottom:2}}>{g.en}</div>
                    <div style={{fontSize:13, fontWeight:600}}>{g.n}</div>
                  </div>
                )
              ))}
            </div>
          </div>

          {/* 住所＋SNS */}
          <div style={{padding:'24px 0', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
            <div style={{fontFamily:fontMono, fontSize:11, color:'rgba(255,255,255,.6)', lineHeight:1.85, marginBottom:18}}>
              東京都新宿区愛住町23-1<br/>woody21 6階<br/>TEL  03-4500-2647<br/>MAIL info@hatenabase.com
            </div>
            <div style={{display:'flex', gap:8}}>
              <a href="https://x.com/hs_hatenabase" target="_blank" rel="noopener" aria-label="X" style={{width:36, height:36, borderRadius:'50%', border:'1px solid rgba(255,255,255,.25)', display:'grid', placeItems:'center'}}><img src="images/x_logo.svg" alt="" style={{width:12, height:12}}/></a>
              <a href="https://note.com/hatenabase" target="_blank" rel="noopener" aria-label="note" style={{width:36, height:36, borderRadius:'50%', border:'1px solid rgba(255,255,255,.25)', display:'grid', placeItems:'center'}}><img src="images/note_icon.svg" alt="" style={{width:12, height:12}}/></a>
            </div>
          </div>

          {/* リーガル */}
          <div style={{paddingTop:18, fontFamily:fontMono, fontSize:10, color:'rgba(255,255,255,.5)', display:'flex', flexDirection:'column', gap:8}}>
            <div style={{display:'flex', flexWrap:'wrap', gap:14}}>
              <a href={`${HB_BASE}/terms`} style={{color:'inherit', textDecoration:'none'}}>利用規約</a>
              <a href={`${HB_BASE}/document-request`} style={{color:'inherit', textDecoration:'none'}}>資料請求</a>
              <a href={`${HB_BASE}/contact`} style={{color:'inherit', textDecoration:'none'}}>お問い合わせ</a>
            </div>
            <div>Copyright © 2025 HatenaBase Inc.</div>
          </div>
        </div>
      </footer>
      </div>
      {typeof document !== 'undefined' && ReactDOM.createPortal(headerAndDrawer, document.body)}
    </>
  );
}

// サブページ（page-hatena-dx 等）が共通シェルとして再利用するための window 公開
Object.assign(window, {
  VariantDPC, VariantDMobile,
  HBHeader, HBLogo, HBChars, HB_NAV, HB_BASE, HB_WANTEDLY,
  hbcp, fontEN, fontENSans, fontJP, fontJPSerif, fontMono, ease,
  hbStyles: styles,
});
