// Wireframe #3 — Hand-drawn Friendly
// Editorial-rhythm redesign: less box, more flow & full-bleed sections.

function WF_Handdrawn() {
  const sticker = (color) => ({
    border: "2px solid var(--line)",
    background: color,
    padding: "4px 10px",
    borderRadius: "20px 8px 22px 6px / 10px 18px 8px 20px",
    fontFamily: "Caveat, cursive",
    fontSize: 16,
    fontWeight: 700,
    display: "inline-block",
    boxShadow: "2px 2px 0 var(--ink)",
  });

  const Blob = ({ color = "#ffd5cb", rotate = 0, size = 80, face = "^-^" }) => (
    <div className="char-blob" style={{
      width:size, height:size,
      background: color,
      border:"2px solid var(--ink)",
      borderRadius: "60% 40% 55% 45% / 50% 55% 45% 50%",
      display:"flex", alignItems:"center", justifyContent:"center",
      transform:`rotate(${rotate}deg)`,
      fontFamily:"Caveat", fontSize: size/4, fontWeight:700,
      boxShadow:"3px 3px 0 var(--ink)",
    }}>{face}</div>
  );

  const Scribble = ({ color = "var(--accent-1)", width = 200 }) => (
    <svg viewBox="0 0 200 14" style={{position:"absolute", left:0, bottom:-10, width, height:14}} preserveAspectRatio="none">
      <path d="M 4,8 Q 30,2 60,7 T 120,7 T 196,6" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round"/>
    </svg>
  );

  const services = [
    {n:"01", type:"fde",     en:"FDE",     jp:"FDE 開発",          tag:"社内参画型・完全オーダーメイド",  color:"#ffd5cb", href:"FDE Service Detail.html",
      body:"エンジニアが貴社の現場に常駐し、業務を内側から理解した上で完全オーダーメイドのシステムを設計・実装・運用まで一気通貫でご支援します。"},
    {n:"02", type:"rpa",     en:"RPA",     jp:"業務自動化",         tag:"手作業を、機械に。",            color:"#c8e6ff", href:"RPA Service Detail.html",
      body:"反復的なPC作業をRPAで自動化。月次レポート・データ転記・受発注処理など、人がやらなくていい仕事を機械に任せ、本来の業務に時間を取り戻します。"},
    {n:"03", type:"ai",      en:"AI",      jp:"AI 自動化",          tag:"判断を、機械に。",              color:"#e4ccff", href:"AI Service Detail.html",
      body:"生成AI・機械学習・OCRを業務プロセスに組み込み、判断業務そのものを自動化。属人化を解消し、24時間動き続ける仕組みを実現します。"},
    {n:"04", type:"consult", en:"CONSULT", jp:"IT コンサル",        tag:"戦略から伴走。",                color:"#d8f5c2", href:"IT Consulting Service Detail.html",
      body:"DX戦略の策定から要件定義、ベンダー選定、内製化支援まで。技術と業務の橋渡し役として、貴社の意思決定に伴走します。"},
  ];

  return (
    <BrowserFrame url="algoviax.co.jp">
      <div style={{background:"#fff8ec"}}>
        <MockNav bg="#fff8ec" items={["サービス","導入事例","会社概要","ニュース","採用情報"]} variant="filled"/>

        {/* ============ HERO ============ */}
        <section style={{position:"relative", padding:"72px 56px 88px", overflow:"hidden"}}>
          <svg style={{position:"absolute", inset:0, width:"100%", height:"100%", pointerEvents:"none", opacity:.5}}>
            <pattern id="dot" x="0" y="0" width="32" height="32" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="1.2" fill="#1a1a1a" opacity=".18"/>
            </pattern>
            <rect width="100%" height="100%" fill="url(#dot)"/>
          </svg>

          <div style={{position:"relative", display:"grid", gridTemplateColumns:"3fr 2fr", gap:20, alignItems:"center"}}>
            <div>
              <div style={sticker("#ffe3a8")}>DX PARTNER · 現場参画型</div>
              <h1 style={{fontFamily:"Caveat, cursive", fontSize:80, fontWeight:700, margin:"20px 0 8px", lineHeight:1.05, whiteSpace:"nowrap"}}>
                現場の業務を、<br/>
                <span style={{color:"var(--accent-1)", position:"relative", display:"inline-block"}}>
                  もっと軽く、
                  <Scribble width={260}/>
                </span><br/>
                <span style={{color:"var(--accent-1)"}}>もっと速く。</span>
              </h1>
              <div className="jp" style={{fontSize:16, maxWidth:480, lineHeight:1.85, marginTop:18, color:"#333"}}>
                Algoviaxは、FDEによる社内参画型のシステム開発、業務自動化、AI活用、ITコンサルティングで、企業のDX推進を一貫してサポートします。
              </div>
              <div style={{marginTop:28, display:"flex", gap:12, flexWrap:"wrap", alignItems:"center"}}>
                <a href="Contact.html" style={{...sticker("#ffb7b0"), textDecoration:"none", color:"inherit", fontSize:18, padding:"8px 18px"}}>🍃 無料相談</a>
                <a href="Services.html" style={{...sticker("#c8e6ff"), textDecoration:"none", color:"inherit", fontSize:18, padding:"8px 18px"}}>📄 サービス資料</a>
                <span className="mono" style={{fontSize:11, color:"var(--muted)", marginLeft:8}}>scroll ↓</span>
              </div>
            </div>
            <div style={{position:"relative", height:320}}>
              <div style={{position:"absolute", top:30, left:30}}><Blob color="#ffd5cb" face="o_o" rotate={-8} size={120}/></div>
              <div style={{position:"absolute", top:0, right:20}}><Blob color="#c8e6ff" face="^_^" size={130} rotate={6}/></div>
              <div style={{position:"absolute", bottom:0, left:70}}><Blob color="#d8f5c2" face="* 3 *" size={88} rotate={12}/></div>
              <div style={{position:"absolute", bottom:40, right:50}}><Blob color="#ffe3a8" face="・ω・" size={76} rotate={-10}/></div>
              <svg viewBox="0 0 100 100" style={{position:"absolute", top:-10, right:0, width:80, height:80}}>
                <circle cx="50" cy="50" r="20" fill="none" stroke="#1a1a1a" strokeWidth="2"/>
                {Array.from({length:8}).map((_,i)=>{
                  const a = i*Math.PI/4;
                  return <line key={i} x1={50+25*Math.cos(a)} y1={50+25*Math.sin(a)} x2={50+35*Math.cos(a)} y2={50+35*Math.sin(a)} stroke="#1a1a1a" strokeWidth="2"/>
                })}
              </svg>
            </div>
          </div>
        </section>

        {/* ============ STATEMENT BAND ============ */}
        <section style={{
          padding:"80px 56px",
          background:"linear-gradient(180deg, #ffd84a 0%, #ffc933 100%)",
          borderTop:"2px solid var(--line)", borderBottom:"2px solid var(--line)",
          position:"relative", overflow:"hidden",
        }}>
          <div style={{position:"absolute", top:20, right:60}}><Blob color="#fff" face="o_v_o" size={70} rotate={-12}/></div>
          <div style={{position:"absolute", bottom:30, left:80}}><Blob color="#ffb7b0" face=":3" size={56} rotate={8}/></div>

          <div className="mono" style={{fontSize:11, color:"#1a1a1a", opacity:.6, letterSpacing:"0.2em"}}>OUR BELIEF —</div>
          <h2 style={{
            fontFamily:"Caveat, cursive", fontSize:84, fontWeight:700,
            lineHeight:1.1, margin:"12px 0 18px", maxWidth:900, color:"#1a1a1a",
          }}>
            「使いこなせないシステム」を、<br/>
            この世から、ひとつ減らす。
          </h2>
          <div className="jp" style={{fontSize:17, lineHeight:1.95, maxWidth:680, color:"#2a2118"}}>
            機能の多さや、最先端の技術じゃない。<br/>
            <b>現場で本当に使われ続けるかどうか。</b>それが、Algoviaxがシステムをつくるときの唯一の物差しです。
          </div>
        </section>

        {/* ============ SERVICES — editorial vertical ============ */}
        <section style={{padding:"96px 56px 80px"}}>
          <div style={{display:"flex", alignItems:"baseline", gap:24, marginBottom:48, flexWrap:"wrap"}}>
            <span className="mono" style={{fontSize:11, color:"var(--muted)", letterSpacing:"0.2em"}}>SERVICES — 事業内容</span>
            <h2 style={{fontFamily:"Caveat",fontSize:56,fontWeight:700, margin:0, lineHeight:1}}>
              4つの<span style={{color:"var(--accent-1)"}}>動詞</span>で、現場を動かす。
            </h2>
          </div>

          <div style={{display:"flex", flexDirection:"column", gap:0}}>
            {services.map((s,i)=>(
              <a key={i} href={s.href} style={{
                display:"grid", gridTemplateColumns:"110px 1fr 240px 32px",
                gap:36, alignItems:"center", padding:"32px 4px",
                borderTop: i === 0 ? "2px solid var(--line)" : "none",
                borderBottom:"2px solid var(--line)",
                textDecoration:"none", color:"inherit",
                position:"relative",
              }} className="svc-row">
                <div className="mono" style={{fontSize:13, color:"var(--muted)", letterSpacing:"0.15em"}}>{s.n} ↳</div>
                <div>
                  <div style={{display:"flex", alignItems:"baseline", gap:14, marginBottom:6}}>
                    <span style={{fontFamily:"Caveat", fontSize:44, fontWeight:700, color:"var(--ink)", lineHeight:1}}>{s.jp}</span>
                    <span className="mono" style={{fontSize:12, color:"var(--accent-1)", letterSpacing:"0.2em"}}>{s.en}</span>
                  </div>
                  <div className="hand" style={{fontSize:18, color:"var(--accent-1)", marginBottom:8}}>「{s.tag}」</div>
                  <div className="jp" style={{fontSize:13.5, lineHeight:1.85, color:"#333", maxWidth:560}}>{s.body}</div>
                </div>
                <div style={{
                  background: s.color, border:"2px solid var(--line)",
                  borderRadius:"8px 14px 6px 12px / 10px 8px 14px 6px",
                  overflow:"hidden", height:128, transform:`rotate(${i%2 ? 1 : -1}deg)`,
                  boxShadow:"3px 3px 0 var(--ink)",
                }}>
                  <ServiceIllustration type={s.type}/>
                </div>
                <div className="hand" style={{fontSize:32, color:"var(--accent-1)"}}>→</div>
              </a>
            ))}
          </div>
        </section>

        {/* ============ STATS BAND ============ */}
        <section style={{
          padding:"72px 56px",
          background:"#1a1a1a", color:"#fff8ec",
          borderTop:"2px solid var(--line)", borderBottom:"2px solid var(--line)",
          position:"relative", overflow:"hidden",
        }}>
          <div className="mono" style={{fontSize:11, opacity:.5, letterSpacing:"0.2em", marginBottom:24}}>BY THE NUMBERS</div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:36, alignItems:"end"}}>
            {[
              {n:"72%", l:"業務工数 平均削減率", c:"#ffd5cb"},
              {n:"40+", l:"これまでの導入企業数", c:"#c8e6ff"},
              {n:"6.2x", l:"平均ROI(投資対効果)", c:"#d8f5c2"},
              {n:"24/7", l:"自動化システム稼働", c:"#ffd84a"},
            ].map((s,i)=>(
              <div key={i}>
                <div style={{
                  fontFamily:"Caveat, cursive", fontSize:108, fontWeight:700,
                  color:s.c, lineHeight:0.95, marginBottom:8,
                }}>{s.n}</div>
                <div className="jp" style={{fontSize:13, opacity:.8, borderTop:`2px solid ${s.c}`, paddingTop:8}}>{s.l}</div>
              </div>
            ))}
          </div>
        </section>

        {/* ============ PROCESS — horizontal path ============ */}
        <section style={{padding:"96px 56px 80px", position:"relative"}}>
          <div style={{marginBottom:60, maxWidth:680}}>
            <span className="mono" style={{fontSize:11, color:"var(--muted)", letterSpacing:"0.2em"}}>PROCESS — 導入プロセス</span>
            <h2 style={{fontFamily:"Caveat",fontSize:56,fontWeight:700, margin:"8px 0 14px", lineHeight:1}}>
              <span style={{color:"var(--accent-1)"}}>ご相談</span>から運用まで、ずっと隣で。
            </h2>
            <div className="jp" style={{fontSize:14.5, color:"#444", lineHeight:1.85}}>
              要件定義書を投げて終わり、ではありません。現場の課題を一緒にひもとくところから、運用後の改善まで、ずっと並走します。
            </div>
          </div>

          <div style={{position:"relative", padding:"40px 0 12px"}}>
            <svg style={{position:"absolute", top:88, left:60, right:60, width:"calc(100% - 120px)", height:4, pointerEvents:"none"}} preserveAspectRatio="none">
              <path d="M 0 2 Q 100 -8, 200 2 T 400 2 T 600 2 T 800 2" stroke="var(--accent-1)" strokeWidth="2.5" strokeDasharray="6 6" fill="none"/>
            </svg>

            <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:18}}>
              {[
                {t:"ヒアリング", d:"現場の課題と業務フローを丁寧にお伺いし、解決すべき要件を明確化します。", step:0},
                {t:"企画・設計", d:"最適なソリューションをご提案し、要件定義と設計書を共同で策定します。", step:1},
                {t:"開発・実装", d:"FDEが貴社に参画し、アジャイルで開発・プロトタイピングを推進します。", step:2},
                {t:"運用・改善", d:"リリース後も継続的に改善し、成果の最大化と内製化をご支援します。", step:3},
              ].map((s,i)=>(
                <div key={i} style={{position:"relative", textAlign:"center"}}>
                  <div style={{
                    width:64, height:64, margin:"0 auto 14px",
                    background:["#ffe3a8","#ffd5cb","#c8e6ff","#d8f5c2"][i],
                    border:"2.5px solid var(--ink)", borderRadius:"58% 42% 55% 45% / 50% 55% 45% 50%",
                    display:"flex", alignItems:"center", justifyContent:"center",
                    fontFamily:"Caveat", fontSize:28, fontWeight:700,
                    transform:`rotate(${i%2 ? -4 : 4}deg)`,
                    boxShadow:"3px 3px 0 var(--ink)",
                    position:"relative", zIndex:2,
                  }}>0{i+1}</div>
                  <div style={{height:90, marginBottom:10}}>
                    <ProcessIllustration step={s.step}/>
                  </div>
                  <div className="hand" style={{fontSize:24, fontWeight:700, marginBottom:6}}>{s.t}</div>
                  <div className="jp" style={{fontSize:12, lineHeight:1.7, color:"#444", maxWidth:220, margin:"0 auto"}}>{s.d}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ============ WORKS — 1 featured + 2 side ============ */}
        <section style={{padding:"96px 56px 80px", background:"#fdf3e3", position:"relative", borderTop:"2px solid var(--line)"}}>
          <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between", gap:24, marginBottom:36, flexWrap:"wrap"}}>
            <div>
              <span className="mono" style={{fontSize:11, color:"var(--muted)", letterSpacing:"0.2em"}}>WORKS — 導入事例</span>
              <h2 style={{fontFamily:"Caveat",fontSize:56,fontWeight:700, margin:"8px 0 0", lineHeight:1}}>
                結果が出ている、<span style={{color:"var(--accent-2)"}}>本気の事例</span>。
              </h2>
            </div>
            <a href="Works.html" className="hand" style={{fontSize:20, color:"var(--ink)", textDecoration:"none", borderBottom:"2px solid var(--accent-1)"}}>
              すべての事例を見る →
            </a>
          </div>

          <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr", gap:24}}>
            <a href="Case Detail.html" style={{textDecoration:"none", color:"inherit", display:"block"}}>
              <div style={{
                height:380, background:"#fff", border:"2px solid var(--line)",
                borderRadius:"6px 18px 4px 12px / 12px 6px 18px 4px",
                overflow:"hidden", boxShadow:"5px 5px 0 var(--ink)", marginBottom:14,
              }}>
                <CaseMock kind="manufacturing"/>
              </div>
              <div style={{display:"flex", alignItems:"baseline", gap:12, marginBottom:6}}>
                <span style={sticker("#ffd5cb")}>FEATURED</span>
                <span className="mono" style={{fontSize:10, color:"var(--muted)", letterSpacing:"0.15em"}}>CASE — 製造業</span>
              </div>
              <div className="hand" style={{fontSize:32, fontWeight:700, lineHeight:1.2}}>業務工数 72%削減を実現した、製造業の現場改革</div>
              <div className="jp" style={{fontSize:13.5, color:"#444", lineHeight:1.85, marginTop:8, maxWidth:560}}>
                工場の日次レポートと品質管理工程をRPAとAIで再設計。月160時間以上かかっていた集計業務を、自動で完結する仕組みに変えました。
              </div>
            </a>

            <div style={{display:"flex", flexDirection:"column", gap:18}}>
              {[
                {t:"金融業 / AI与信モデル導入", d:"審査速度を3倍に短縮しながら、貸倒れ率を改善。", c:"#c8e6ff", kind:"finance"},
                {t:"小売業 / 在庫管理システム自動化", d:"発注ミスを月平均でゼロに。欠品率も大幅に低下。", c:"#d8f5c2", kind:"retail"},
              ].map((w,i)=>(
                <a key={i} href="Case Detail.html" style={{textDecoration:"none", color:"inherit", display:"flex", gap:14, padding:"14px 0", borderTop:"2px dashed var(--line)"}}>
                  <div style={{
                    flexShrink:0, width:140, height:96, background:"#fff",
                    border:"2px solid var(--line)",
                    borderRadius:"6px 12px 4px 10px / 10px 6px 12px 4px",
                    overflow:"hidden",
                  }}>
                    <CaseMock kind={w.kind}/>
                  </div>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="hand" style={{fontSize:20, fontWeight:700, lineHeight:1.3}}>{w.t}</div>
                    <div className="jp" style={{fontSize:12.5, color:"#444", lineHeight:1.7, marginTop:6}}>{w.d}</div>
                  </div>
                </a>
              ))}
              <div style={{padding:"18px 0", borderTop:"2px dashed var(--line)"}}>
                <div className="hand" style={{fontSize:22, color:"var(--accent-1)", marginBottom:4}}>もっと事例を見る →</div>
                <div className="mono" style={{fontSize:10, color:"var(--muted)"}}>40+ CASES / ACROSS INDUSTRIES</div>
              </div>
            </div>
          </div>
        </section>

        {/* ============ NEWS — clean list ============ */}
        <section style={{padding:"80px 56px"}}>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:60, alignItems:"start"}}>
            <div>
              <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between", marginBottom:24}}>
                <div>
                  <span className="mono" style={{fontSize:11, color:"var(--muted)", letterSpacing:"0.2em"}}>NEWS — お知らせ</span>
                  <h3 style={{fontFamily:"Caveat",fontWeight:700,fontSize:40,margin:"6px 0 0"}}>ニュース</h3>
                </div>
                <a href="News.html" className="hand" style={{fontSize:16, color:"var(--ink)", textDecoration:"none", borderBottom:"2px solid var(--accent-1)"}}>一覧 →</a>
              </div>
              <div>
                {[
                  {d:"2026.04.10", c:"お知らせ", t:"オフィスを神田に移転しました。", color:"#ffd5cb"},
                  {d:"2026.04.05", c:"セミナー", t:"5/22開催「中小企業のためのAI活用セミナー」",  color:"#c8e6ff"},
                  {d:"2026.03.28", c:"プレス",   t:"製造業向けRPA導入実績が30社を突破しました。", color:"#d8f5c2"},
                  {d:"2026.03.15", c:"ブログ",   t:"AIエージェント時代に必要なFDEの役割とは",      color:"#ffe3a8"},
                ].map((n,i)=>(
                  <a key={i} href="News Detail.html" style={{
                    display:"grid", gridTemplateColumns:"100px 84px 1fr 20px", gap:14,
                    padding:"16px 0", borderBottom:"1px dashed var(--line)",
                    alignItems:"center", textDecoration:"none", color:"inherit",
                  }}>
                    <span className="mono" style={{fontSize:11, color:"var(--muted)"}}>{n.d}</span>
                    <span style={{...sticker(n.color), padding:"4px 8px", fontSize:13, fontFamily:"'Kosugi Maru', 'Zen Kurenaido', system-ui, sans-serif", display:"inline-block", width:78, textAlign:"center", whiteSpace:"nowrap", boxSizing:"border-box"}}>{n.c}</span>
                    <span className="jp" style={{fontSize:14}}>{n.t}</span>
                    <span className="hand" style={{fontSize:18, color:"var(--accent-1)"}}>→</span>
                  </a>
                ))}
              </div>
            </div>

            <a href="Careers.html" style={{
              padding:"36px 32px", background:"#ffd84a",
              border:"2.5px solid var(--line)",
              borderRadius:"18px 8px 24px 10px / 12px 22px 8px 18px",
              boxShadow:"6px 6px 0 var(--ink)",
              transform:"rotate(-1.5deg)",
              textDecoration:"none", color:"inherit", display:"block",
              alignSelf:"stretch", position:"relative",
            }}>
              <div className="mono" style={{fontSize:11, opacity:.6, letterSpacing:"0.2em"}}>WE ARE HIRING ✦</div>
              <div style={{fontFamily:"Caveat", fontSize:48, fontWeight:700, lineHeight:1, margin:"10px 0 6px"}}>
                仲間を、<br/>募集しています。
              </div>
              <div className="jp" style={{fontSize:13.5, lineHeight:1.85, marginTop:14, color:"#2a2118"}}>
                エンジニア / PM / デザイナー / コンサルタント。<br/>
                現場と一緒に動くこと、ものづくりを楽しめる方を歓迎します。
              </div>
              <div style={{marginTop:22, display:"flex", alignItems:"center", gap:12}}>
                <span style={sticker("#fff")}>採用ページへ →</span>
                <div style={{marginLeft:"auto"}}><Blob color="#ffb7b0" face="^o^" size={56} rotate={8}/></div>
              </div>
            </a>
          </div>
        </section>

        {/* ============ FOOTER ============ */}
        <div className="page" style={{background:"var(--ink)", color:"#fff8ec", padding:"48px 56px"}}>
          <div style={{display:"grid", gridTemplateColumns:"2.6fr 1fr 1fr 1.2fr", gap:24}}>
            <div>
              <div style={{fontFamily:"Caveat",fontSize:38,fontWeight:700, lineHeight:1}}>Algoviax.</div>
              <div className="hand" style={{fontSize:16, opacity:.7, marginTop:8, whiteSpace:"nowrap"}}>現場の業務を、もっと軽く、もっと速く。</div>
              <div className="mono" style={{fontSize:10, opacity:.4, marginTop:18}}>© 2026 Algoviax, Inc.</div>
            </div>
            <div>
              <div className="mono" style={{fontSize:10,opacity:.5,marginBottom:8, letterSpacing:"0.15em"}}>SERVICES</div>
              <div className="mono" style={{fontSize:11, opacity:.85, lineHeight:2, display:"flex", flexDirection:"column", gap:0}}>
                <a href="FDE Service Detail.html" style={{color:"inherit", textDecoration:"none"}}>FDE開発</a>
                <a href="RPA Service Detail.html" style={{color:"inherit", textDecoration:"none"}}>業務自動化 (RPA)</a>
                <a href="AI Service Detail.html" style={{color:"inherit", textDecoration:"none"}}>AI活用</a>
                <a href="IT Consulting Service Detail.html" style={{color:"inherit", textDecoration:"none"}}>ITコンサルティング</a>
              </div>
            </div>
            <div>
              <div className="mono" style={{fontSize:10,opacity:.5,marginBottom:8, letterSpacing:"0.15em"}}>COMPANY</div>
              <div className="mono" style={{fontSize:11, opacity:.85, lineHeight:2, display:"flex", flexDirection:"column", gap:0}}>
                <a href="Company.html" style={{color:"inherit", textDecoration:"none"}}>会社概要</a>
                <a href="Works.html" style={{color:"inherit", textDecoration:"none"}}>導入事例</a>
                <a href="News.html" style={{color:"inherit", textDecoration:"none"}}>ニュース</a>
                <a href="Careers.html" style={{color:"inherit", textDecoration:"none"}}>採用情報</a>
              </div>
            </div>
            <div>
              <div className="mono" style={{fontSize:10,opacity:.5,marginBottom:8, letterSpacing:"0.15em"}}>CONTACT</div>
              <div className="mono" style={{fontSize:11, opacity:.85, lineHeight:2, display:"flex", flexDirection:"column", gap:0}}>
                <a href="Contact.html" style={{color:"inherit", textDecoration:"none"}}>無料相談</a>
                <a href="Contact.html" style={{color:"inherit", textDecoration:"none"}}>サービス資料</a>
                <a href="Contact.html" style={{color:"inherit", textDecoration:"none"}}>お問い合わせフォーム</a>
                <a href="Privacy.html" style={{color:"inherit", textDecoration:"none"}}>プライバシーポリシー</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .svc-row { transition: background .2s ease; }
        .svc-row:hover { background: rgba(255,216,74,0.18); }
        .svc-row:hover .hand { color: var(--accent-1); }
      `}</style>
    </BrowserFrame>
  );
}

window.WF_Handdrawn = WF_Handdrawn;