// P5Kern, P6Largo, P7Doma, P8Super, P9Shift, P10ShiftB
// Inspired by: kern.inc · largo.studio · doma.solutions · supercrowds.co · shiftbrain.com
const { useState, useEffect, useRef } = React;

const _d = [
  {n:"01",name:"アプリ開発",desc:"業務に特化したWebアプリや社内ツールのお困りごと。要件整理から運用まで一貫してサポートします。",tags:["Webアプリ","社内ツール","API連携"]},
  {n:"02",name:"業務効率化DX",desc:"手作業・属人化・紙業務を見直し、デジタルで自動化。無理のない変革で現場の負担を減らします。",tags:["業務自動化","RPA","DX推進","人材育成"]},
  {n:"03",name:"AI活用",desc:"ChatGPTや生成AIを実務で使いこなす仕組みを構築。プロンプト設計から業務フローへの統合まで対応。",tags:["生成AI導入","AIエージェント","AI人材育成"]},
  {n:"04",name:"セミナー・研修",desc:"AI・DX・ノーコードをテーマにしたワークショップ・セミナーを企業・団体向けに開催。初心者にもわかりやすく。",tags:["企業研修","ワークショップ","オンライン可"]},
];
const _r = [
  {n:"01",t:"現場目線で考える",tx:"技術先行ではなく、人材・業務の実態から課題を整理します。現場の方が本当に使えるものの作り方を一緒に考えます。"},
  {n:"02",t:"スモールスタートOK",tx:"まず小さく試して、効果を確認しながら広げる進め方を提案。大きな投資の前に未来を見せます。"},
  {n:"03",t:"伴走型のサポート",tx:"納品して終わりではなく、継続的に改善・運用をサポート。人と職場を一緒に育てていく関係を大切にします。"},
];

function useNav2(cls){
  useEffect(()=>{
    const n=document.querySelector('.'+cls);
    if(!n)return;
    const fn=()=>n.classList.toggle('sc',window.scrollY>40);
    window.addEventListener('scroll',fn,{passive:true});
    return()=>window.removeEventListener('scroll',fn);
  },[]);
}
function useSR2(){
  useEffect(()=>{
    const els=document.querySelectorAll('.sr');
    const io=new IntersectionObserver(entries=>{
      entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');io.unobserve(e.target);}});
    },{threshold:.1});
    els.forEach(el=>io.observe(el));
    return()=>io.disconnect();
  });
}
const Frm=({cls,btnCls,btnLabel="送信する →"})=>{
  const[s,setS]=useState(false);
  if(s)return <p style={{opacity:.45,fontSize:14,paddingTop:16,fontFamily:"'Noto Sans JP',sans-serif"}}>ありがとうございます！3営業日以内にご連絡いたします。</p>;
  return(
    <form className={`${cls}-form`} onSubmit={e=>{e.preventDefault();setS(true);}}>
      <div className="fr"><label>お名前</label><input type="text" placeholder="山田 太郎" required/></div>
      <div className="fr"><label>会社名</label><input type="text" placeholder="株式会社〇〇"/></div>
      <div className="fr"><label>メールアドレス</label><input type="email" placeholder="your@email.com" required/></div>
      <div className="fr"><label>お問い合わせ種別</label>
        <select><option>選択してください</option><option>アプリ開発について</option><option>業務効率化・DXについて</option><option>AI活用について</option><option>セミナー・研修について</option><option>その他</option></select>
      </div>
      <div className="fr"><label>お問い合わせ内容</label><textarea placeholder="ざっくりした内容で大丈夫です..."></textarea></div>
      <button type="submit" className={btnCls}>{btnLabel}</button>
    </form>
  );
};

/* ═══════ P5 KERN.INC ═══════ */
const P5Kern=({cta,tagline})=>{
  const[go,setGo]=useState(false);
  useNav2('p5k-nav'); useSR2();
  useEffect(()=>{const t=setTimeout(()=>setGo(true),200);return()=>clearTimeout(t);},[]);
  const mq=[...[..._d.map(s=>s.name),'IT・AIソリューション','伴走型サポート','スモールスタート','ゆるくしっかり']];
  const mqItems=[...mq,...mq];
  return(
    <div className="p5k">
      <nav className="p5k-nav">
        <div className="p5k-logo">ゆるハックラボ</div>
        <div className="p5k-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p5k-cta">{cta}</a></div>
      </nav>
      <section className="p5k-hero">
        <div className="p5k-bg-word" style={{position:'absolute',fontFamily:"'DM Serif Display',serif",fontStyle:'italic',fontSize:'clamp(120px,22vw,320px)',color:'rgba(245,245,240,.018)',letterSpacing:'-.04em',userSelect:'none',lineHeight:1,pointerEvents:'none'}}>HACK</div>
        <div className="p5k-hero-content" style={{position:'relative',zIndex:1}}>
          <span className={`p5k-line${go?' go':''}`} style={{transitionDelay:'.1s'}}>ゆるく、</span>
          <span className={`p5k-line p5k-li${go?' go':''}`} style={{transitionDelay:'.3s'}}>でもしっかり</span>
          <span className={`p5k-line${go?' go':''}`} style={{transitionDelay:'.5s'}}>ハックする</span>
          <p className={`p5k-sub${go?' go':''}`}>{tagline}。アプリ開発・業務DX・AI活用・セミナーを通じて、あなたのビジネスをアップデートします。</p>
          <div className={`p5k-btns${go?' go':''}`}>
            <button className="p5k-btn">{cta}</button>
            <button className="p5k-bto">SERVICES ↓</button>
          </div>
        </div>
        <div className={`p5k-scroll${go?' go':''}`}>SCROLL ↓</div>
      </section>
      <div className="p5k-strip">
        <div className="p5k-si">{mqItems.map((t,i)=><span key={i} className="p5k-sm">{t}</span>)}</div>
      </div>
      <section className="p5k-svc">
        <div className="p5k-svch sr">
          <div className="p5k-stag">SERVICES</div>
          <div className="p5k-stitle">IT・AI活用<br/>ソリューション</div>
        </div>
        {_d.map(s=>(
          <div key={s.n} className="p5k-row sr">
            <span className="p5k-rn">{s.n}</span>
            <span className="p5k-rname">{s.name}</span>
            <span className="p5k-rarrow">→</span>
          </div>
        ))}
      </section>
      <section className="p5k-why">
        <div className="p5k-why-left sr"><div className="p5k-wl-title">ゆるハックラボが<br/>選ばれる理由</div></div>
        <div className="sr sr-d2">
          {_r.map(r=>(
            <div key={r.n} className="p5k-wi">
              <div className="p5k-wn">{r.n}</div>
              <div className="p5k-wt">{r.t}</div>
              <div className="p5k-wtx">{r.tx}</div>
            </div>
          ))}
        </div>
      </section>
      <section className="p5k-ct">
        <div className="p5k-ctag sr">CONTACT</div>
        <h2 className="sr sr-d1">まず、話してみませんか</h2>
        <p className="sr sr-d2">ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
        <div className="p5k-cti sr sr-d3"><Frm cls="p5k" btnCls="p5k-btn"/></div>
      </section>
      <footer className="p5k-ft">
        <span className="p5k-ftl">ゆるハックラボ</span>
        <span className="p5k-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

/* ═══════ P6 LARGO.STUDIO ═══════ */
const P6Largo=({cta,tagline})=>{
  useNav2('p6l-nav'); useSR2();
  const bgColors=[
    'linear-gradient(145deg,#d8cfc0,#c5b8a5)','linear-gradient(145deg,#b8d0c5,#a5c0b8)',
    'linear-gradient(145deg,#c5c0d0,#b5afc0)','linear-gradient(145deg,#d0c8b8,#c0b8a8)',
  ];
  const wBg=['linear-gradient(145deg,#c8bfb0,#b8af9f)','linear-gradient(145deg,#b0bfc8,#a0b0c0)','linear-gradient(145deg,#c8c0b8,#b8b0a8)'];
  return(
    <div className="p6l">
      <nav className="p6l-nav">
        <div className="p6l-logo" style={{fontFamily:"'Noto Serif JP',serif",fontWeight:700}}>ゆるハックラボ</div>
        <div className="p6l-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p6l-cta">{cta}</a></div>
      </nav>
      <section className="p6l-hero">
        <div className="p6l-hero-photo"></div>
        <div className="p6l-hero-photo-grain"></div>
        <div className="p6l-hero-photo-inner">HACK</div>
        <div className="p6l-hero-overlay"></div>
        <div className="p6l-hero-photo-label">PHOTO — オフィスの様子 / WORKSPACE 2025</div>
        <div className="p6l-hero-content">
          <div className="p6l-hero-label">YuruHack Lab — アプリ開発・DX・AI活用</div>
          <div className="p6l-hero-title">ゆるく、でも<br/><em>しっかり</em><br/>ハックする</div>
          <div className="p6l-hero-bottom">
            <div className="p6l-hero-sub">{tagline}。あなたが本来するべきことに、時間を使えるように。</div>
            <div className="p6l-hero-btns">
              <button className="p6l-btn">{cta}</button>
              <button className="p6l-btn-o">SERVICES ↓</button>
            </div>
          </div>
        </div>
      </section>
      <section className="p6l-svc">
        <div className="p6l-svch sr">
          <div><div className="p6l-stag">SERVICES</div><div className="p6l-stitle">あなたの会社にあった<br/>IT・AI活用</div></div>
          <div className="p6l-sdesc">小さなツールから本格的なシステムまで。ビジネスの課題に合わせて柔軟に対応します。</div>
        </div>
        <div className="p6l-sg">
          {_d.map((s,i)=>(
            <div key={s.n} className={`p6l-sc sr sr-d${i%2+1}`}>
              <div className="p6l-sc-img">
                <div className="p6l-sc-bg" style={{background:bgColors[i]}}></div>
                <div className="p6l-sc-inner">{s.name.charAt(0)}</div>
                <div className="p6l-sc-lbl">PHOTO — {s.name}のイメージ</div>
              </div>
              <div className="p6l-sc-info">
                <div className="p6l-sc-num">{s.n}</div>
                <div className="p6l-sc-name">{s.name}</div>
                <div className="p6l-sc-desc">{s.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
      <section className="p6l-why">
        <div className="p6l-why-top sr"><h2>ゆるハックラボが<br/>選ばれる理由</h2></div>
        {_r.map((r,i)=>(
          <div key={r.n} className={`p6l-wrow${i%2===1?' p6l-wrow-r':''}`}>
            <div className={`p6l-wphoto sr sr-d${i%2===0?1:2}`}>
              <div className="p6l-wphoto-bg" style={{background:wBg[i]}}></div>
              <div className="p6l-wphoto-lbl">PHOTO — {r.t}</div>
            </div>
            <div className={`p6l-wcontent sr sr-d${i%2===0?2:1}`}>
              <div className="p6l-wnum">{r.n}</div>
              <div className="p6l-wt">{r.t}</div>
              <div className="p6l-wtx">{r.tx}</div>
            </div>
          </div>
        ))}
      </section>
      <section className="p6l-ct">
        <div className="p6l-ctl sr">
          <div className="p6l-stag" style={{marginBottom:12}}>CONTACT</div>
          <h2>まず、話してみませんか</h2>
          <p>ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
        </div>
        <div className="sr sr-d2"><Frm cls="p6l" btnCls="p6l-btn"/></div>
      </section>
      <footer className="p6l-ft">
        <span className="p6l-ftl">ゆるハックラボ</span>
        <span className="p6l-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

/* ═══════ P7 DOMA.SOLUTIONS ═══════ */
const P7Doma=({cta,tagline})=>{
  useNav2('p7d-nav'); useSR2();
  return(
    <div className="p7d">
      <nav className="p7d-nav">
        <div className="p7d-logo">YuruHack Lab</div>
        <div className="p7d-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p7d-cta">{cta}</a></div>
      </nav>
      <section className="p7d-hero">
        <div className="p7d-hl">
          <div className="p7d-ey">AI × DX × AUTOMATION</div>
          <div className="p7d-title">AIと技術で<br/><span>仕事をもっと</span><br/>楽しく</div>
          <div className="p7d-sub">{tagline}。アプリ開発・業務DX・AI活用・セミナーを通じて、あなたのビジネスをアップデートします。</div>
          <div className="p7d-hb">
            <button className="p7d-btn">{cta}</button>
            <button className="p7d-bto">SERVICES ↓</button>
          </div>
        </div>
        <div className="p7d-hr">
          {[["4+","主要サービス領域"],["100%","伴走型サポート"],["即日","相談対応対応"],["∞","成長の可能性"]].map(([v,l])=>(
            <div key={l} className="p7d-stat-box">
              <div className="p7d-stat-val">{v}</div>
              <div className="p7d-stat-lbl">{l}</div>
            </div>
          ))}
        </div>
      </section>
      <section className="p7d-svc">
        <div className="p7d-stag sr">SERVICES</div>
        <div className="p7d-stitle sr sr-d1">あなたの会社にあった IT・AI活用</div>
        <div className="p7d-sg">
          {_d.map((s,i)=>(
            <div key={s.n} className={`p7d-sc sr sr-d${i+1}`}>
              <div className="p7d-sc-n">{s.n}</div>
              <div className="p7d-sc-name">{s.name}</div>
              <div className="p7d-sc-desc">{s.desc}</div>
              <div className="p7d-sc-tags">{s.tags.map(t=><span key={t} className="p7d-sc-tag">{t}</span>)}</div>
            </div>
          ))}
        </div>
      </section>
      <section className="p7d-why">
        <div className="p7d-stag sr">WHY US</div>
        <div className="p7d-stitle sr sr-d1">ゆるハックラボが選ばれる理由</div>
        <div className="p7d-wg">
          {_r.map((r,i)=>(
            <div key={r.n} className={`p7d-wc sr sr-d${i+1}`}>
              <div className="p7d-wn">{r.n}</div>
              <div className="p7d-wt">{r.t}</div>
              <div className="p7d-wtx">{r.tx}</div>
            </div>
          ))}
        </div>
      </section>
      <section className="p7d-ct">
        <div className="p7d-ctl sr">
          <div className="p7d-stag" style={{marginBottom:12}}>CONTACT</div>
          <h2>まず、話してみませんか</h2>
          <p>ざっくりした相談でも大歓迎です。</p>
        </div>
        <div className="sr sr-d2"><Frm cls="p7d" btnCls="p7d-btn"/></div>
      </section>
      <footer className="p7d-ft">
        <span className="p7d-ftl">YURUHACK LAB</span>
        <span className="p7d-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

/* ═══════ P8 SUPERCROWDS.CO ═══════ */
const P8Super=({cta,tagline})=>{
  useSR2();
  const mq=[..._d.map(s=>s.name),'AI活用','DX推進','ノーコード','RPA','生成AI','ChatGPT','伴走型','スモールスタート'];
  const mqItems=[...mq,...mq,...mq];
  return(
    <div className="p8s">
      <nav className="p8s-nav">
        <div className="p8s-logo">ゆるハックラボ</div>
        <div className="p8s-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p8s-cta">{cta}</a></div>
      </nav>
      <section className="p8s-hero">
        <div className="p8s-hl">
          <div className="p8s-ey">YuruHack Lab — アプリ開発・DX・AI活用・セミナー</div>
          <div className="p8s-title">ゆるく、<span>でも</span>しっかり<br/>ハックする</div>
          <div className="p8s-sub">{tagline}。あなたが本来するべきことに、時間を使えるように。</div>
          <div className="p8s-hbtns">
            <button className="p8s-btn">{cta}</button>
            <button className="p8s-bto">SERVICES ↓</button>
          </div>
        </div>
        <div className="p8s-hr">
          <div className="p8s-hr-top">AIと技術で、仕事をもっと<em style={{fontStyle:'italic'}}>楽しく</em></div>
          <div className="p8s-hr-metrics">
            {[["4+","主要サービス"],["即日","相談対応"],["100%","伴走型サポート"]].map(([v,l])=>(
              <div key={l} className="p8s-metric">
                <div className="p8s-metric-val">{v}</div>
                <div className="p8s-metric-lbl">{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div className="p8s-mq">
        <div className="p8s-mqi">{mqItems.map((t,i)=><span key={i} className="p8s-mqitem">{t}<span className="p8s-mqdot"> ✦ </span></span>)}</div>
      </div>
      <section className="p8s-svc">
        <div className="p8s-svch">
          <div><h2 className="sr">IT・AI<br/>SERVICES</h2></div>
          <p className="sr sr-d2">小さなツールから本格的なシステムまで。ビジネスの課題に合わせて柔軟に対応します。</p>
        </div>
        <div className="p8s-sg">
          {_d.map((s,i)=>(
            <div key={s.n} className={`p8s-sc sr sr-d${i%2+1}`}>
              <div className="p8s-sc-bar"></div>
              <div className="p8s-sc-n">{s.n}</div>
              <div className="p8s-sc-name">{s.name}</div>
              <div className="p8s-sc-desc">{s.desc}</div>
              <div className="p8s-sc-tags">{s.tags.map(t=><span key={t} className="p8s-sc-tag">{t}</span>)}</div>
            </div>
          ))}
        </div>
      </section>
      <section className="p8s-why">
        <div className="p8s-wh">
          <div className="p8s-wh-tag">WHY US</div>
          <h2>選ばれる<br/>理由</h2>
        </div>
        {_r.map((r,i)=>(
          <div key={r.n} className={`p8s-wi sr sr-d${i+1}`}>
            <div className="p8s-wn">{r.n}</div>
            <div className="p8s-wt">{r.t}</div>
            <div className="p8s-wtx">{r.tx}</div>
          </div>
        ))}
      </section>
      <section className="p8s-ct">
        <div className="p8s-ctl">
          <h2>まず、話して<br/>みませんか</h2>
          <p>ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
        </div>
        <div className="p8s-ctr sr"><Frm cls="p8s" btnCls="p8s-bsub"/></div>
      </section>
      <footer className="p8s-ft">
        <span className="p8s-ftl">ゆるハックラボ</span>
        <span className="p8s-ftc">© 2025 YuruHack Lab</span>
      </footer>
    </div>
  );
};

/* ═══════ P9 SHIFTBRAIN DARK ═══════ */
const P9Shift=({cta,tagline})=>{
  useNav2('p9sb-nav'); useSR2();
  return(
    <div className="p9sb">
      <nav className="p9sb-nav">
        <div className="p9sb-logo">ゆるハックラボ</div>
        <div className="p9sb-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p9sb-cta">{cta}</a></div>
      </nav>
      <section className="p9sb-hero">
        <div className="p9sb-bg-word">HACK</div>
        <div className="p9sb-hero-content">
          <div className="p9sb-ey">YuruHack Lab — AI × DX × アプリ開発</div>
          <div className="p9sb-title">ゆるく、でも<br/><em>しっかり</em><br/>ハックする</div>
          <div className="p9sb-sub">{tagline}。あなたが本来するべきことに、時間を使えるように。</div>
          <div className="p9sb-btns">
            <button className="p9sb-btn">{cta}</button>
            <button className="p9sb-bto">SERVICES ↓</button>
          </div>
        </div>
      </section>
      <section className="p9sb-svc">
        <div className="p9sb-svch sr">
          <div className="p9sb-stag">SERVICES</div>
          <div className="p9sb-stitle">あなたの会社にあった<br/>IT・AI活用</div>
        </div>
        {_d.map(s=>(
          <div key={s.n} className="p9sb-row sr">
            <span className="p9sb-rn">{s.n}</span>
            <span className="p9sb-rname">{s.name}</span>
            <span className="p9sb-rdesc">{s.desc}</span>
            <span className="p9sb-rarrow">→</span>
          </div>
        ))}
      </section>
      <section className="p9sb-why">
        {_r.map((r,i)=>(
          <div key={r.n} className={`p9sb-wc sr sr-d${i+1}`}>
            <div className="p9sb-wn">{r.n}</div>
            <div className="p9sb-wt">{r.t}</div>
            <div className="p9sb-wtx">{r.tx}</div>
          </div>
        ))}
      </section>
      <section className="p9sb-ct">
        <div className="p9sb-ctag sr">CONTACT</div>
        <h2 className="sr sr-d1">まず、<em>話して</em>みませんか</h2>
        <p className="sr sr-d2">ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
        <div className="p9sb-cti sr sr-d3"><Frm cls="p9sb" btnCls="p9sb-btn"/></div>
      </section>
      <footer className="p9sb-ft">
        <span className="p9sb-ftl">ゆるハックラボ</span>
        <span className="p9sb-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

/* ═══════ P10 SHIFTBRAIN EDITORIAL ═══════ */
const P10ShiftB=({cta,tagline})=>{
  useNav2('p10sb-nav'); useSR2();
  return(
    <div className="p10sb">
      <nav className="p10sb-nav">
        <div className="p10sb-logo">ゆるハックラボ</div>
        <div className="p10sb-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p10sb-cta">{cta}</a></div>
      </nav>
      <section className="p10sb-hero">
        <div className="p10sb-hl">
          <div className="p10sb-ey">YuruHack Lab — AI × DX × App Dev</div>
          <div className="p10sb-title">ゆるく、でも<br/><em>しっかり</em><br/>ハックする</div>
          <div className="p10sb-sub">{tagline}。あなたが本来するべきことに、時間を使えるように。</div>
          <div className="p10sb-btns">
            <button className="p10sb-btn">{cta}</button>
            <button className="p10sb-bto">SERVICES ↓</button>
          </div>
        </div>
        <div className="p10sb-hr">
          <div>
            <div className="p10sb-hr-label">Philosophy</div>
            <div className="p10sb-hr-big">AIと技術で、仕事をもっと楽しく</div>
          </div>
          <div className="p10sb-hr-stats">
            {[["4+","主要サービス"],["即日","相談対応"],["100%","伴走サポート"]].map(([v,l])=>(
              <div key={l} className="p10sb-hr-stat">
                <div className="p10sb-hr-val">{v}</div>
                <div className="p10sb-hr-lbl">{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="p10sb-svc">
        <div className="p10sb-svch">
          <div className="p10sb-svch-l"><h2 className="sr">IT・AI<br/>活用</h2></div>
          <div className="p10sb-svch-r"><p className="sr sr-d1">小さなツールから本格的なシステムまで。ビジネスの課題に合わせて柔軟に対応します。</p></div>
        </div>
        {_d.map(s=>(
          <div key={s.n} className="p10sb-row sr">
            <span className="p10sb-rn">{s.n}</span>
            <span className="p10sb-rname">{s.name}</span>
            <span className="p10sb-rdesc">{s.desc}</span>
            <span className="p10sb-rarrow">→</span>
          </div>
        ))}
      </section>
      <section className="p10sb-why">
        <div className="p10sb-wh">
          <div className="p10sb-wh-tag">WHY US</div>
          <h2>選ばれる<br/>理由</h2>
        </div>
        {_r.map((r,i)=>(
          <div key={r.n} className={`p10sb-wi sr sr-d${i+1}`}>
            <div className="p10sb-wn">{r.n}</div>
            <div className="p10sb-wt">{r.t}</div>
            <div className="p10sb-wtx">{r.tx}</div>
          </div>
        ))}
      </section>
      <section className="p10sb-ct">
        <div className="p10sb-ctl sr">
          <h2>まず、<em>話して</em>みませんか</h2>
          <p>ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
        </div>
        <div className="p10sb-ctr sr sr-d2"><Frm cls="p10sb" btnCls="p10sb-bsub"/></div>
      </section>
      <footer className="p10sb-ft">
        <span className="p10sb-ftl">ゆるハックラボ</span>
        <span className="p10sb-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

Object.assign(window, { P5Kern, P6Largo, P7Doma, P8Super, P9Shift, P10ShiftB });