/* rules.html — オマカセできない就業規則 */

const RlName = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="01 Name">
    <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:64, alignItems:'start'}}>
      <div>
        <Eyebrow>NAMING · 名前の理由</Eyebrow>
        <h2 style={{marginTop:16}}>あえて「できない」と<br/>サービス名に入れた理由。</h2>
        <img src="assets/svc-rules.jpg" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:'var(--radius)', marginTop:28, display:'block'}}/>
      </div>
      <div className="prose">
        <p>
          世の中には「就業規則お任せパック」がたくさんあります。雛形に会社名を入れて、社名のロゴを差し替えて出来上がり——
          ただそれでは、<strong>いざというとき、会社も社員も守れません</strong>。
        </p>
        <p>
          就業規則は、「会社がどういう働き方を是とするか」「何をしたら評価するか」「何をしたら注意するか」を言葉にするもの。
          これを決められるのは、社長と経営チームだけです。私たちは代わりに決めません。
        </p>
        <p>
          その代わり、<strong>"決めるための論点"を全部テーブルに並べ、判断と合意のプロセスを横で回します</strong>。
          結果、"うちの会社のための規則"が出来上がります。サービス名に「オマカセできない」と入れたのは、
          その覚悟を先に伝えるためです。
        </p>
      </div>
    </div>
  </section>
);

const RlScope = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="02 Scope">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>SCOPE · 扱う範囲</Eyebrow>
        <h2>本則 + 主要規程を、まとめて整える。</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18}}>
        {[
          {t:'就業規則 本則', d:'労働条件・服務規律・人事・懲戒 など、働くルールの本体。'},
          {t:'賃金規程', d:'基本給、手当、残業代、賞与、退職金 などお金にまつわるルール。'},
          {t:'退職金規程', d:'制度の有無、支給基準、算定方法。中退共・企業年金との整合も。'},
          {t:'育児・介護休業規程', d:'法定に合わせつつ、会社としてどこまで上乗せするかを設計。'},
          {t:'ハラスメント防止規程', d:'定義・禁止行為・相談窓口・懲戒の流れを明確に。'},
          {t:'在宅勤務・副業規程', d:'働き方の多様化に合わせて、認める範囲と条件を言語化。'}
        ].map((r, i) => (
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'24px 22px'}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--navy-700)'}}>0{i+1}</div>
            <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, margin:'10px 0 8px', color:'var(--ink-900)', letterSpacing:'.04em'}}>{r.t}</h4>
            <p style={{fontSize:13, lineHeight:1.9, color:'var(--ink-700)', margin:0}}>{r.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const RlPrice = () => (
  <section style={{padding:'64px 0', background:'var(--paper)'}} data-screen-label="03 Price">
    <div className="container" style={{maxWidth:880, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>PRICE · 料金</Eyebrow>
        <h2 style={{display:'flex', alignItems:'baseline', flexWrap:'wrap', gap:'12px'}}>
          <span>作成</span>
          <span style={{fontFamily:'var(--font-serif)', fontWeight:900, fontSize:'1.6em', color:'var(--accent)', lineHeight:1, letterSpacing:'.02em'}}>25<small style={{fontSize:'.42em', fontWeight:700, marginLeft:'.1em', letterSpacing:'.06em'}}>万円〜</small></span>
        </h2>
        <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
          就業規則の作成は <strong>250,000円〜</strong>。会社の規模・扱う規程の数・現状の有無によって変わります。正確な金額は、現状を伺った上で書面でご提示します。
        </p>
      </div>
      <div className="price-note">
        <b>含まれるもの：</b> 現状診断／論点ワークショップ（3〜4回）／条文の起草／社長＋経営チームとの擦り合わせ／労基署への届出サポート／社員説明資料の作成。<br/>
        <b>期間目安：</b> 新規作成で3〜4ヶ月、全面改訂で2〜3ヶ月。決める量によって前後します。
      </div>
    </div>
  </section>
);

const RlSteps = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="04 Steps">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>FLOW · 作り方</Eyebrow>
        <h2>論点を並べる → 決める → 条文にする。</h2>
      </div>
      <div className="steps">
        <div className="step">
          <div className="step__n">1</div>
          <div className="step__t">現状診断</div>
          <div className="step__b">既存の規則／運用の実態／労使トラブル履歴を棚卸し。「今のままだと危ない箇所」をレポート化。</div>
        </div>
        <div className="step">
          <div className="step__n">2</div>
          <div className="step__t">論点ワークショップ</div>
          <div className="step__b">「休職は何ヶ月まで？」「副業はどこまで？」など、決めるべき論点を一覧で提示。選択肢とリスクをセットで。</div>
        </div>
        <div className="step">
          <div className="step__n">3</div>
          <div className="step__t">条文の起草・擦り合わせ</div>
          <div className="step__b">決まった方針を条文に落とし、読みやすい文章へ。社長＋経営チームと読み合わせをして、ズレを潰します。</div>
        </div>
        <div className="step">
          <div className="step__n">4</div>
          <div className="step__t">届出・社員説明</div>
          <div className="step__b">労基署への届出（意見書含む）をサポート。全社員への周知資料と説明会も、必要なら当社で実施します。</div>
        </div>
      </div>
    </div>
  </section>
);

const RlCTA = () => (
  <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="05 CTA">
    <div className="container" style={{textAlign:'center', maxWidth:720, margin:'0 auto'}}>
      <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.24em', color:'rgba(255,255,255,.7)', marginBottom:16}}>FREE DIAGNOSIS</div>
      <h2 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(26px, 3.2vw, 36px)', lineHeight:1.5, color:'#fff', marginBottom:18, letterSpacing:'.04em'}}>
        今の<em style={{fontStyle:'normal', background:'linear-gradient(180deg, transparent 62%, rgba(230,126,34,.55) 62% 92%, transparent 92%)', padding:'0 4px'}}>就業規則の診断</em>だけでも、お受けします。
      </h2>
      <p style={{fontSize:16, lineHeight:2, color:'rgba(255,255,255,.85)', marginBottom:28}}>
        「うちの規則、大丈夫？」の段階で大丈夫です。現状レポートのみのご依頼も歓迎。
      </p>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <a className="btn btn--primary btn--lg" href="contact.html">無料相談を予約する <Arrow/></a>
        <a className="btn btn--ghost btn--lg" href="service.html" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>他のサービスも見る</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { RlName, RlScope, RlPrice, RlSteps, RlCTA });