// soft keys LP v2 — SP対応版 // 「1人に頼らない仕組みを、LINEで。」 (function () { const R = React; const C = { bg: 'oklch(0.99 0.006 150)', sf: '#ffffff', ink: 'oklch(0.24 0.012 152)', sub: 'oklch(0.50 0.012 152)', faint: 'oklch(0.70 0.010 152)', ln: 'oklch(0.91 0.010 152)', gr: 'oklch(0.56 0.11 158)', grd: 'oklch(0.44 0.10 158)', grs: 'oklch(0.96 0.025 158)', f: '"Zen Kaku Gothic New", sans-serif', m: '"Space Mono", monospace', sh: '0 10px 32px oklch(0.55 0.08 150 / 0.09)', }; /* ── viewport hook ── */ const useViewport = () => { const [w, setW] = R.useState(typeof window !== 'undefined' ? window.innerWidth : 1200); R.useEffect(() => { const h = () => setW(window.innerWidth); window.addEventListener('resize', h); return () => window.removeEventListener('resize', h); }, []); return { isMobile: w < 768, isTablet: w < 1024, w }; }; /* ── primitives ── */ function Glyph({ size = 24, color }) { return ( ); } function SLabel({ children }) { return

{children}

; } function SHead({ children, sub, center, isMobile }) { return (

{children}

{sub &&

{sub}

}

); } function Card({ children, style }) { return

{children}

; } function Slot({ label, h, r = 16 }) { return (

{label}

); } function Field({ label, placeholder, type = 'text', area, opt, name }) { const b = { width: '100%', boxSizing: 'border-box', font: `15px ${C.f}`, color: C.ink, padding: '13px 15px', borderRadius: 11, border: `1px solid ${C.ln}`, background: C.bg, outline: 'none' }; return ( {label}{opt && 任意} {area ?

: <input type={type} placeholder={placeholder} name={name} style={b} />}
      </label>
    );
  }

/* ── nav ── */
  function NavBar() {
    const { isMobile } = useViewport();
    const [menuOpen, setMenuOpen] = R.useState(false);
    const scrollTo = (id) => {
      const el = document.getElementById(id);
      if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); setMenuOpen(false); }
    };
    const navItems = ['できること', '導入事例', 'よくある質問', '事業情報'];
    const navIds   = ['services',   'cases',    'faq',        'about'];
    return (
      <nav style={{ position: 'sticky', top: 0, zIndex: 100, background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(12px)', borderBottom: `1px solid ${C.ln}` }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: isMobile ? '12px 20px' : '14px 72px', maxWidth: 1200, margin: '0 auto' }}>
          <a href="#" style={{ display: 'block', textDecoration: 'none' }}>
            <img src="assets/logo-cropped.png" alt="soft keys" style={{ height: isMobile ? 32 : 44, width: 'auto', display: 'block' }} />
          </a>
          {isMobile ? (
            <button onClick={() => setMenuOpen(o => !o)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 8, display: 'flex', flexDirection: 'column', gap: 5 }}>
              <span style={{ display: 'block', width: 22, height: 2, background: menuOpen ? C.gr : C.ink, borderRadius: 2, transform: menuOpen ? 'rotate(45deg) translate(5px,5px)' : 'none', transition: 'all .2s' }} />
              <span style={{ display: 'block', width: 22, height: 2, background: menuOpen ? C.gr : C.ink, borderRadius: 2, opacity: menuOpen ? 0 : 1, transition: 'all .2s' }} />
              <span style={{ display: 'block', width: 22, height: 2, background: menuOpen ? C.gr : C.ink, borderRadius: 2, transform: menuOpen ? 'rotate(-45deg) translate(5px,-5px)' : 'none', transition: 'all .2s' }} />
            </button>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
              {navItems.map((n, i) => <a key={n} href="#" onClick={e => { e.preventDefault(); scrollTo(navIds[i]); }} style={{ font: `500 14px ${C.f}`, color: C.sub, textDecoration: 'none' }}>{n}</a>)}
              <button onClick={() => scrollTo('contact')} style={{ font: `600 14px ${C.f}`, color: '#fff', background: C.gr, padding: '11px 22px', borderRadius: 24, border: 'none', cursor: 'pointer' }}>無料で相談する</button>
            </div>
          )}
        </div>
        {/* モバイルドロワー */}
        {isMobile && menuOpen && (
          <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: '#fff', borderBottom: `1px solid ${C.ln}`, boxShadow: C.sh, padding: '16px 20px 24px', display: 'flex', flexDirection: 'column', gap: 0 }}>
            {navItems.map((n, i) => (
              <a key={n} href="#" onClick={e => { e.preventDefault(); scrollTo(navIds[i]); }} style={{ font: `500 16px ${C.f}`, color: C.ink, textDecoration: 'none', padding: '14px 0', borderBottom: `1px solid ${C.ln}` }}>{n}</a>
            ))}
            <button onClick={() => scrollTo('contact')} style={{ font: `700 16px ${C.f}`, color: '#fff', background: C.gr, padding: '16px', borderRadius: 14, border: 'none', cursor: 'pointer', marginTop: 16 }}>無料で相談する</button>
          </div>
        )}
      </nav>
    );
  }

/* ── FV ── */
  function FVSection() {
    const { isMobile } = useViewport();
    const icons = [
      { left: '65.4%', top: '32.6%', delay: '0s',   icon: 'invoice'   },
      { left: '79.2%', top: '14.3%', delay: '.4s',   icon: 'dashboard' },
      { left: '93%',   top: '32.6%', delay: '.8s',   icon: 'doc'       },
      { left: '65.4%', top: '61.2%', delay: '1.2s',  icon: 'box'       },
      { left: '79.2%', top: '80.1%', delay: '1.6s',  icon: 'cal'       },
      { left: '93%',   top: '61.2%', delay: '2.0s',  icon: 'chart'     },
    ];
    const svgMap = {
      invoice:   <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5h15a2 2 0 0 1 2 2v28l-3-2-3 2-3-2-3 2-3-2-3 2V7a2 2 0 0 1 2-2z"/><path d="M15 13h11M15 18h11M15 23h7"/></svg>,
      dashboard: <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="8" width="30" height="24" rx="2.5"/><path d="M5 14h30"/><circle cx="9" cy="11" r=".9" fill="currentColor" stroke="none"/><circle cx="12.5" cy="11" r=".9" fill="currentColor" stroke="none"/><path d="M10 26l6-6 4 3 7-8"/></svg>,
      doc:       <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="12" y="9" width="17" height="22" rx="2"/><rect x="8" y="6" width="17" height="22" rx="2" fill="rgba(255,255,255,.65)"/><path d="M11 12h11M11 16h11M11 20h7"/></svg>,
      box:       <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6l9 5-9 5-9-5z"/><path d="M11 11v9l9 5 9-5v-9"/><path d="M20 16v9"/></svg>,
      cal:       <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="7" y="9" width="26" height="24" rx="2.5"/><path d="M7 15h26M13 6v5M27 6v5"/><path d="M14 24l2.5 2.5 5-5.5"/></svg>,
      chart:     <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M7 33h26"/><rect x="10" y="22" width="4.5" height="9"/><rect x="18" y="17" width="4.5" height="14"/><rect x="26" y="12" width="4.5" height="19"/><path d="M9 17l7-6 5 3 9-8"/><path d="M27 6h4v4"/></svg>,
    };

if (isMobile) {
      return (
        <section data-screen-label="FV" style={{ position: 'relative', width: '100%', minHeight: '88svh', overflow: 'hidden', background: 'linear-gradient(160deg, rgb(0,22,88) 0%, rgb(10,50,140) 55%, rgb(30,100,200) 100%)' }}>
          <div style={{ position: 'absolute', inset: 0, background: `url(assets/fv-textless.png) left center/cover no-repeat`, opacity: 0.35 }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(0,18,80,0.6) 0%, rgba(0,18,80,0.2) 60%, rgba(0,18,80,0.55) 100%)' }} />
          <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: '88svh', padding: '60px 24px 48px' }}>
            <div style={{ font: `700 36px/1.35 ${C.f}`, color: '#fff', letterSpacing: 0.3, marginBottom: 20 }}>
              担当者が休んでも、<br />業務が止まらない<br /><span style={{ color: 'oklch(0.78 0.14 158)' }}>仕組み</span>を。
            </div>
            <p style={{ font: `15px/1.85 ${C.f}`, color: 'rgba(255,255,255,0.78)', margin: '0 0 32px', maxWidth: 340 }}>
              公式LINE・LINE Worksを活用した業務システムで、属人化・ワンオペを解消します。
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a href="#cases" onClick={e => { e.preventDefault(); const el = document.getElementById('cases'); if(el) el.scrollIntoView({behavior:'smooth',block:'start'}); }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, font: `600 15px ${C.f}`, color: '#fff', background: 'oklch(0.56 0.11 158)', padding: '16px 24px', borderRadius: 14, textDecoration: 'none', boxShadow: '0 4px 18px rgba(6,199,85,0.45)' }}>
                📑 導入事例はこちら
              </a>
            </div>
          </div>
        </section>
      );
    }

return (
      <section data-screen-label="FV" style={{ position: 'relative', width: '100%', aspectRatio: '1376/768', overflow: 'hidden', maxHeight: '92vh', containerType: 'size' }}>
        <div style={{ position: 'absolute', inset: 0, background: `url(assets/fv-textless.png) center/cover no-repeat` }} />
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} viewBox="0 0 1376 768" preserveAspectRatio="none">
          <defs>
            <linearGradient id="lg2" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stopColor="#9fd8ff" stopOpacity=".12" />
              <stop offset="1" stopColor="#06c755" stopOpacity=".8" />
            </linearGradient>
          </defs>
          <g stroke="url(#lg2)" strokeWidth="2.2" fill="none" strokeLinecap="round">
            <line x1="900" y1="250" x2="1090" y2="360" /><line x1="1090" y1="110" x2="1090" y2="360" />
            <line x1="1280" y1="250" x2="1090" y2="360" /><line x1="900" y1="470" x2="1090" y2="360" />
            <line x1="1090" y1="615" x2="1090" y2="360" /><line x1="1280" y1="470" x2="1090" y2="360" />
          </g>
          <g stroke="#eafff2" strokeWidth="2" fill="none" strokeLinecap="round" strokeDasharray="2 14" style={{ animation: 'dashflow 1.4s linear infinite' }}>
            <line x1="900" y1="250" x2="1090" y2="360" /><line x1="1090" y1="110" x2="1090" y2="360" />
            <line x1="1280" y1="250" x2="1090" y2="360" /><line x1="900" y1="470" x2="1090" y2="360" />
            <line x1="1090" y1="615" x2="1090" y2="360" /><line x1="1280" y1="470" x2="1090" y2="360" />
          </g>
        </svg>
        {icons.map((ic, i) => (
          <div key={i} style={{ position: 'absolute', left: ic.left, top: ic.top, transform: 'translate(-50%,-50%)', width: '6.3cqw', height: '6.3cqw', borderRadius: '50%', background: 'radial-gradient(circle at 50% 38%, rgba(255,255,255,.92), rgba(232,242,255,.72))', boxShadow: '0 0 0 .5cqw rgba(255,255,255,.15), 0 .6cqw 1.6cqw rgba(11,52,110,.18)', color: '#2f6fd6', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: `float 6s ease-in-out ${ic.delay} infinite` }}>
            <div style={{ width: '3.5cqw', height: '3.5cqw' }}>{svgMap[ic.icon]}</div>
          </div>
        ))}
        <div style={{ position: 'absolute', left: '79.2%', top: '46.9%', transform: 'translate(-50%,-50%)', width: '9cqw', height: '9cqw', borderRadius: '26%', background: 'linear-gradient(160deg,#2ee06a,#06c755)', boxShadow: '0 0 2.4cqw rgba(6,199,85,.55), 0 0 0 .7cqw rgba(6,199,85,.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'floatHub 5.5s ease-in-out infinite' }}>
          <span style={{ font: `800 2.4cqw/1 ${C.f}`, color: '#fff', letterSpacing: '.06em' }}>LINE</span>
        </div>
        {[['72%','22%','.2s'],['88%','18%','1.1s'],['96%','52%','.6s'],['70%','70%','1.6s']].map(([l,t,d],i)=>(
          <div key={i} style={{ position:'absolute',left:l,top:t,width:'.5cqw',height:'.5cqw',borderRadius:'50%',background:'#fff',boxShadow:'0 0 .6cqw rgba(255,255,255,.9)',animation:`twinkle 3.6s ${d} ease-in-out infinite` }} />
        ))}
        <div style={{ position:'absolute', left:0, top:0, width:'63%', height:'100%', background:'linear-gradient(to right, rgba(5,18,52,0.55) 0%, rgba(5,18,52,0.45) 60%, rgba(5,18,52,0) 100%)', pointerEvents:'none' }} />
        <div style={{ position:'absolute', left:'5%', top:0, width:'50%', height:'100%', display:'flex', flexDirection:'column', justifyContent:'center', gap:'2cqw', pointerEvents:'auto' }}>
          <div style={{ font:`700 3.8cqw/1.35 ${C.f}`, color:'#fff', letterSpacing:0.5, textShadow:'0 2px 20px rgba(0,0,0,0.4)', textWrap:'pretty' }}>
            担当者が休んでも、<br />業務が止まらない<br /><span style={{ color:'oklch(0.78 0.14 158)' }}>仕組み</span>を。
          </div>
          <p style={{ font:`1.55cqw/1.85 ${C.f}`, color:'rgba(255,255,255,0.72)', margin:0, maxWidth:'34cqw' }}>
            公式LINE・LINE Worksを活用した業務システムで、<br />属人化・ワンオペを解消します。
          </p>
          <div style={{ display:'flex', gap:'1.2cqw', flexWrap:'wrap', justifyContent:'center' }}>
            <a href="#cases" onClick={e => { e.preventDefault(); const el = document.getElementById('cases'); if(el) el.scrollIntoView({behavior:'smooth',block:'start'}); }} style={{ display:'inline-flex', alignItems:'center', gap:'0.6cqw', font:`600 1.45cqw/1 ${C.f}`, color:'#fff', background:'oklch(0.56 0.11 158)', padding:'1cqw 2.8cqw', borderRadius:'3cqw', textDecoration:'none', boxShadow:'0 4px 18px rgba(6,199,85,0.45)', whiteSpace:'nowrap' }}>
              📑 導入事例はこちら
            </a>
          </div>
        </div>
      </section>
    );
  }

/* ── tagline ── */
  function TaglineSection() {
    const { isMobile } = useViewport();
    const px = isMobile ? 20 : 72;
    return (
      <section data-screen-label="Tagline" style={{ background: C.sf, padding: `${isMobile ? 56 : 80}px ${px}px ${isMobile ? 60 : 84}px`, borderBottom: `1px solid ${C.ln}` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 56, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, font: `12px ${C.m}`, color: C.grd, letterSpacing: 1, background: C.grs, padding: '7px 14px', borderRadius: 20, marginBottom: 22 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.gr }} />LINE × システム × HP制作
            </div>
            <h1 style={{ font: `700 ${isMobile ? '36px' : '52px'}/1.32 ${C.f}`, margin: '0 0 20px', color: C.ink, letterSpacing: .5 }}>
              1人に頼らない<br />仕組みを、<span style={{ color: C.gr }}>LINEで。</span>
            </h1>
            <p style={{ font: `${isMobile ? '15px' : '16px'}/2.0 ${C.f}`, color: C.sub, margin: '0 0 32px', maxWidth: 460 }}>
              公式LINE・LINE Worksを活用した業務システム運用で、<br />集客効率化・属人化・ワンオペを解消します。
            </p>
            <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 12 }}>
              <button onClick={() => { const el = document.getElementById('contact'); if(el) el.scrollIntoView({behavior:'smooth'}); }} style={{ font: `600 15px ${C.f}`, color: '#fff', background: C.gr, padding: '14px 30px', borderRadius: 28, border: 'none', cursor: 'pointer', boxShadow: C.sh }}>無料で相談する</button>
              <button onClick={() => { const el = document.getElementById('cases'); if(el) el.scrollIntoView({behavior:'smooth'}); }} style={{ font: `600 15px ${C.f}`, color: C.grd, background: C.sf, border: `1px solid ${C.ln}`, padding: '14px 28px', borderRadius: 28, cursor: 'pointer' }}>事例を見る</button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14 }}>
            {[
              { num: '01', n: '受発注', d: '注文から納品書・請求書まで自動化' },
              { num: '02', n: '在庫管理', d: 'リアルタイムで全員が確認できる' },
              { num: '03', n: '電子日報', d: '現場からLINEで即時報告・集計' },
              { num: '04', n: '顧客管理', d: '集客から購買履歴まで一元管理' },
            ].map((it) => (
              <div key={it.n} style={{ background: C.grs, borderRadius: 14, padding: '18px 18px 16px', border: `1px solid ${C.ln}` }}>
                <div style={{ font: `11px ${C.m}`, color: C.gr, letterSpacing: 1, marginBottom: 8 }}>{it.num}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <Glyph size={16} /><span style={{ font: `600 14px ${C.f}`, color: C.ink }}>{it.n}</span>
                </div>
                <p style={{ font: `12px/1.7 ${C.f}`, color: C.sub, margin: 0 }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

/* ── problems ── */
  function ProblemsSection() {
    const { isMobile } = useViewport();
    const px = isMobile ? 20 : 72;
    const items = [
      '受注・在庫は担当者にしか分からない',
      '担当者が休むと、業務が止まってしまう',
      '電話・メモでの受発注でミスが絶えない',
      '現場とオフィスで、情報がバラバラ',
      '日報や報告書の手入力に時間がかかる',
      '新しいシステムを入れたが、現場で使われない',
    ];
    return (
      <section data-screen-label="Problems" style={{ background: C.grs, padding: `${isMobile ? 56 : 80}px ${px}px ${isMobile ? 60 : 84}px` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <SLabel>PROBLEM</SLabel>
            <SHead center isMobile={isMobile}>こんな状況、ありませんか？</SHead>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2,1fr)', gap: 12, maxWidth: 880, margin: '0 auto' }}>
            {items.map((t, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, background: C.sf, border: `1px solid ${C.ln}`, borderRadius: 14, padding: '18px 20px' }}>
                <span style={{ width: 28, height: 28, borderRadius: '50%', border: `1.5px solid ${C.faint}`, color: C.faint, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: `600 14px ${C.f}`, flexShrink: 0 }}>?</span>
                <span style={{ font: `500 14px/1.65 ${C.f}`, color: C.ink }}>{t}</span>
              </div>
            ))}
          </div>
          <p style={{ textAlign: 'center', font: `600 ${isMobile ? '16px' : '18px'}/1.8 ${C.f}`, color: C.grd, margin: '40px 0 0' }}>
            その“詰まり”、いつものLINEで解けるかもしれません。
          </p>
        </div>
      </section>
    );
  }

/* ── services ── */
  function ServicesSection() {
    const { isMobile, isTablet } = useViewport();
    const px = isMobile ? 20 : 72;
    const cols = isMobile ? '1fr' : isTablet ? 'repeat(2,1fr)' : 'repeat(3,1fr)';
    const services = [
      { tag: '主力サービス', t: 'LINEシステム構築', b: '公式LINE・LINE Worksを業務システムのプラットフォームとして活用。受発注管理・在庫管理・電子日報・予約管理など、御社の業務にあわせてカスタム開発します。', items: ['受発注 / 在庫管理', '電子日報 / 報告システム', '予約 / 問い合わせ対応', '顧客管理 / スタッフ管理'], highlight: true },
      { tag: 'LINE活用', t: 'LINE集客マーケティング', b: '公式LINEアカウントの構築から運用まで。友だち獲得・セグメント配信・クーポン・アンケートを活用し、既存顧客との関係を深めてリピートを増やします。', items: ['公式LINEアカウント開設', 'メッセージ配信 / 自動応答', 'クーポン・ポイント施策', '友だち数・CVR分析'], highlight: false },
      { tag: 'Web制作', t: 'HP制作', b: '集客につながるWebサイトを制作。LINEとの連携導線を設計し、問い合わせから顧客管理まで一貫した仕組みをつくります。', items: ['コーポレートサイト', 'LP / 採用ページ', 'LINE連携フォーム', 'SEO / アクセス解析'], highlight: false },
    ];
    return (
      <section id="services" data-screen-label="Services" style={{ background: C.sf, padding: `${isMobile ? 56 : 84}px ${px}px ${isMobile ? 60 : 90}px` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SLabel>WHAT WE DO</SLabel>
          <SHead sub="LINEを軸に、3つのサービスで御社のビジネスを支えます。" isMobile={isMobile}>soft keys でできること</SHead>
          <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 20 }}>
            {services.map((sv, si) => (
              <Card key={sv.t} style={{ padding: 28, position: 'relative', overflow: 'hidden', border: sv.highlight ? `2px solid ${C.gr}` : `1px solid ${C.ln}` }}>
                {sv.highlight && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: C.gr }} />}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                  <span style={{ display: 'inline-block', font: `600 12px ${C.f}`, color: sv.highlight ? '#fff' : C.grd, background: sv.highlight ? C.gr : C.grs, padding: '5px 12px', borderRadius: 20 }}>{sv.tag}</span>
                  <span style={{ font: `700 20px ${C.m}`, color: sv.highlight ? C.gr : C.faint }}>{String(si + 1).padStart(2, '0')}</span>
                </div>
                <div style={{ width: 44, height: 44, borderRadius: 13, background: C.grs, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}><Glyph size={22} /></div>
                <h3 style={{ font: `700 18px ${C.f}`, margin: '0 0 10px', color: C.ink }}>{sv.t}</h3>
                <p style={{ font: `14px/1.85 ${C.f}`, color: C.sub, margin: '0 0 18px' }}>{sv.b}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {sv.items.map(it => (
                    <div key={it} style={{ display: 'flex', alignItems: 'center', gap: 10, font: `13px ${C.f}`, color: C.ink }}>
                      <span style={{ width: 16, height: 16, borderRadius: '50%', background: C.gr, flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                        <svg width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M1.5 4.5l2.5 2.5 3.5-4" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      </span>{it}
                    </div>
                  ))}
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  }

/* ── cases ── */
  function CaseCard({ service, company, industry, title, points, link, accentColor, heroImg, anchorId }) {
    const ac = accentColor || C.gr;
    return (
      <div id={anchorId} style={{ background: C.sf, border: `1px solid ${C.ln}`, borderRadius: 20, boxShadow: C.sh, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        {heroImg
          ? <img src={heroImg} alt={company} style={{ width: '100%', height: 200, objectFit: 'cover', display: 'block' }} />
          : <Slot label="導入事例の画像" h={200} r={0} />}
        <div style={{ padding: '24px 26px 22px', flex: 1, display: 'flex', flexDirection: 'column' }}>
          <span style={{ display: 'inline-block', font: `600 12px ${C.f}`, color: '#fff', background: ac, padding: '5px 13px', borderRadius: 20, marginBottom: 12 }}>{service}</span>
          <div style={{ font: `700 13px ${C.f}`, color: C.ink, marginBottom: 3 }}>{company}</div>
          <div style={{ font: `12px ${C.f}`, color: C.faint, marginBottom: 16 }}>{industry}</div>
          <h3 style={{ font: `700 17px/1.55 ${C.f}`, color: C.ink, margin: '0 0 16px' }}>{title}</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
            {points.map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 18, height: 18, borderRadius: '50%', background: ac, flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M1.5 4.5l2.5 2.5 4.5-5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
                <span style={{ font: `600 13px ${C.f}`, color: C.ink }}>{p}</span>
              </div>
            ))}
          </div>
          <a href={link} style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 8, font: `600 14px ${C.f}`, color: ac, textDecoration: 'none', borderTop: `1px solid ${C.ln}`, paddingTop: 16 }}>
            詳しく読む
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
    );
  }

/* ── faq ── */
  function FAQItem({ q, a, defaultOpen }) {
    const [open, setOpen] = R.useState(!!defaultOpen);
    return (
      <div onClick={() => setOpen(o => !o)} style={{ background: C.sf, border: `1px solid ${C.ln}`, borderRadius: 14, padding: '18px 20px', cursor: 'pointer', boxShadow: C.sh }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ font: `700 14px ${C.m}`, color: C.gr, flexShrink: 0 }}>Q</span>
          <span style={{ font: `600 15px/1.6 ${C.f}`, color: C.ink, flex: 1 }}>{q}</span>
          <span style={{ width: 26, height: 26, borderRadius: '50%', border: `1px solid ${C.ln}`, color: C.sub, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '16px sans-serif', flexShrink: 0, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .2s' }}>+</span>
        </div>
        {open && (
          <div style={{ display: 'flex', gap: 14, marginTop: 14, paddingTop: 14, borderTop: `1px solid ${C.ln}` }}>
            <span style={{ font: `700 14px ${C.m}`, color: C.faint, flexShrink: 0 }}>A</span>
            <p style={{ font: `14px/1.9 ${C.f}`, color: C.sub, margin: 0 }}>{a}</p>
          </div>
        )}
      </div>
    );
  }

/* ── message ── */
  function MessageSection() {
    const { isMobile } = useViewport();
    const px = isMobile ? 20 : 72;
    return (
      <section id="about" data-screen-label="Message" style={{ background: C.grs, padding: `${isMobile ? 56 : 84}px ${px}px ${isMobile ? 60 : 88}px` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '.72fr 1fr', gap: isMobile ? 32 : 60, alignItems: 'center' }}>
          <img src="assets/takizawa.jpg" alt="滝澤雅大" style={{ width: isMobile ? '60%' : '100%', maxWidth: 280, margin: isMobile ? '0 auto' : 0, borderRadius: 20, objectFit: 'cover', aspectRatio: '3/4', display: 'block' }} />
          <div>
            <SLabel>MESSAGE</SLabel>
            <h2 style={{ font: `700 ${isMobile ? '24px' : '30px'}/1.55 ${C.f}`, margin: '0 0 20px', color: C.ink }}>仕事の“面倒”を、<br />仕組みで減らしたい。</h2>
            <p style={{ font: `${isMobile ? '14px' : '15px'}/2.05 ${C.f}`, color: C.sub, margin: '0 0 14px' }}>高機能なシステムほど、現場では使われずに眠ってしまう。そんな光景を、私たちは何度も見てきました。</p>
            <p style={{ font: `${isMobile ? '14px' : '15px'}/2.05 ${C.f}`, color: C.sub, margin: '0 0 14px' }}>soft keys は、誰もが使い慣れた LINE を入口に、御社の業務にぴったりの仕組みをつくります。特定の人に頼らなくていい、誰でも動ける体制をつくること。それが、私たちの目指すDXです。</p>
            <p style={{ font: `${isMobile ? '14px' : '15px'}/2.05 ${C.f}`, color: C.sub, margin: '0 0 24px' }}>難しさは私たちが引き受けます。現場には“かんたん”だけを届けたい。一社一社に寄り添って、これからも。</p>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap' }}>
              <div style={{ flex: 1, minWidth: 200 }}>
                <div style={{ font: `12px ${C.f}`, color: C.faint, marginBottom: 4 }}>soft keys 代表</div>
                <div style={{ font: `700 ${isMobile ? '18px' : '20px'} ${C.f}`, color: C.ink }}>滝澤 雅大</div>
                <div style={{ font: `12px ${C.f}`, color: C.faint, marginTop: 3 }}>たきざわ まさひろ</div>
              </div>
              <div style={{ flex: 1, minWidth: 220 }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
                  {[
                    ['事業名', 'soft keys'],
                    ['所在地', '長野県松本市里山辺3949-1\nグランデュール出井3 202'],
                    ['連絡先', 'cheetoi1150@gmail.com'],
                  ].map(([k,v]) => (
                    <div key={k} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                      <span style={{ font: `600 11px ${C.m}`, color: C.gr, flexShrink: 0, marginTop: 2, letterSpacing: 0.5, minWidth: 48 }}>{k}</span>
                      <span style={{ font: `13px/1.65 ${C.f}`, color: C.sub, whiteSpace: 'pre-line' }}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

/* ── contact ── */
  function ContactSection() {
    const { isMobile } = useViewport();
    const px = isMobile ? 20 : 72;
    const [status, setStatus] = R.useState(null);
    const [errMsg, setErrMsg] = R.useState('');
    const formRef = R.useRef(null);

return (
      <section id="contact" data-screen-label="Contact" style={{ background: C.sf, padding: `${isMobile ? 56 : 84}px ${px}px ${isMobile ? 60 : 90}px`, borderTop: `1px solid ${C.ln}` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '.85fr 1fr', gap: isMobile ? 40 : 60, alignItems: 'start' }}>
          <div>
            <SLabel>CONTACT</SLabel>
            <h2 style={{ font: `700 ${isMobile ? '28px' : '34px'}/1.4 ${C.f}`, margin: '0 0 16px', color: C.ink }}>まずは、無料で<br />ご相談ください</h2>
            <p style={{ font: `${isMobile ? '14px' : '15px'}/1.95 ${C.f}`, color: C.sub, margin: '0 0 24px', maxWidth: 360 }}>どんな業務を改善したいか、どんな課題があるかを教えてください。最適な仕組みをご提案します。</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {['通常1営業日以内にご返信', '相談・お見積りは無料', '小さく始めて段階的に拡張OK'].map((t) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, font: `14px ${C.f}`, color: C.ink }}>
                  <span style={{ width: 20, height: 20, borderRadius: '50%', background: C.gr, flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M1.5 5l2.5 2.5 4.5-5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </span>{t}
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card style={{ padding: isMobile ? 22 : 32 }}>
              <div style={{ font: `600 14px ${C.f}`, color: C.ink, marginBottom: 18 }}>📝 フォームでお問い合わせ</div>
              {status === 'ok' ? (
                <div style={{ textAlign: 'center', padding: '32px 0' }}>
                  <div style={{ font: `700 18px ${C.f}`, color: C.gr, marginBottom: 10 }}>✓ 送信完了しました</div>
                  <p style={{ font: `14px/1.8 ${C.f}`, color: C.sub }}>1営業日以内にご返信いたします。</p>
                </div>
              ) : (
                <form ref={formRef} onSubmit={handleSubmit}>
                  <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14, marginBottom: 14 }}>
                    <Field label="会社名" placeholder="株式会社〇〇" name="company" />
                    <Field label="お名前" placeholder="滝澤 雅大" name="name" />
                    <Field label="メールアドレス" placeholder="info@example.com" type="email" name="email" />
                    <Field label="電話番号" placeholder="03-0000-0000" opt name="phone" />
                  </div>
                  <div style={{ marginBottom: 14 }}><Field label="現在のHP（URL）" placeholder="https://example.com" type="url" opt name="website" /></div>
                  <div style={{ marginBottom: 14 }}><Field label="ご相談内容" placeholder="例）受発注管理を公式LINEで一元化したい" area name="message" /></div>
                  {status === 'error' && <p style={{ font: `13px ${C.f}`, color: '#e53e3e', margin: '0 0 12px' }}>{errMsg}</p>}
                  <button type="submit" disabled={status === 'sending'} style={{ width: '100%', font: `600 16px ${C.f}`, color: '#fff', background: status === 'sending' ? C.faint : C.gr, padding: '15px', borderRadius: 12, border: 'none', cursor: status === 'sending' ? 'default' : 'pointer', boxShadow: C.sh }}>{status === 'sending' ? '送信中…' : 'この内容で送信する'}</button>
                </form>
              )}
            </Card>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ flex: 1, height: 1, background: C.ln }} />
              <span style={{ font: `12px ${C.f}`, color: C.faint, whiteSpace: 'nowrap' }}>または</span>
              <div style={{ flex: 1, height: 1, background: C.ln }} />
            </div>
            <a href="https://line.me/ti/p/%40060dxdjj" target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, background: '#06c755', color: '#fff', font: `700 16px ${C.f}`, padding: '18px 24px', borderRadius: 14, textDecoration: 'none', boxShadow: '0 8px 24px rgba(6,199,85,0.35)' }}>
              <svg width="26" height="26" viewBox="0 0 26 26" fill="none"><rect width="26" height="26" rx="7" fill="white" fillOpacity="0.2"/><path d="M13 5C8.58 5 5 8.16 5 12.06c0 3.5 3.1 6.43 7.3 6.95l.7.1v2.4l2.2-2.2c3.5-.8 5.8-3.3 5.8-5.25C21 8.16 17.42 5 13 5z" fill="white"/></svg>
              公式LINEでお問い合わせ
            </a>
          </div>
        </div>
      </section>
    );
  }

/* ── footer ── */
  function FooterBar() {
    const { isMobile } = useViewport();
    const px = isMobile ? 20 : 72;
    return (
      <footer style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between', gap: isMobile ? 16 : 0, padding: `24px ${px}px`, background: C.sf, borderTop: `1px solid ${C.ln}` }}>
        <img src="assets/logo-cropped.png" alt="soft keys" style={{ height: 28, width: 'auto' }} />
        <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 10 : 24 }}>
          {['プライバシーポリシー', '特定商取引法に基づく表記'].map(t => <a key={t} href="legal.html" style={{ font: `12px ${C.f}`, color: C.faint, textDecoration: 'none' }}>{t}</a>)}
        </div>
        <span style={{ font: `12px ${C.m}`, color: C.faint }}>© 2026 soft keys</span>
      </footer>
    );
  }

/* ── main ── */
  function LPv2() {
    return (
      <div style={{ background: C.bg, color: C.ink, font: `16px/1.75 ${C.f}`, WebkitFontSmoothing: 'antialiased' }}>
        <style>{`
          @keyframes dashflow { to { stroke-dashoffset: -16; } }
          @keyframes float { 0%,100%{transform:translate(-50%,calc(-50% - .5cqw))}50%{transform:translate(-50%,calc(-50% + .5cqw))} }
          @keyframes floatHub { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,calc(-50% + .35cqw)) scale(1.015)} }
          @keyframes twinkle { 0%,100%{opacity:.22}50%{opacity:.9} }
          @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
          a { transition: color .15s; } a:hover { color: oklch(0.56 0.11 158); }
          button { transition: opacity .15s; } button:hover { opacity: .88; }
          * { box-sizing: border-box; }
        `}</style>
        <NavBar />
        <FVSection />
        <TaglineSection />
        <ProblemsSection />
        <ServicesSection />
        <CasesSection />
        <FAQSection />
        <MessageSection />
        <ContactSection />
        <FooterBar />
      </div>
    );
  }

window.LPv2 = LPv2;
})();