/* service-roumu.html — オマカセロウムくん */

const RoumuWhat = () => (
  <section style={{padding:'80px 0 56px', background:'var(--paper)'}} data-screen-label="01 What">
    <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:64, alignItems:'start'}}>
      <div>
        <Eyebrow>WHAT · どんなサービス？</Eyebrow>
        <h2 style={{marginTop:16}}>日々の労務、<br/>まとめて引き取る顧問契約。</h2>
        <div style={{marginTop:28, display:'flex', alignItems:'center', gap:16}}>
          <img src="assets/mascot-roumu.png" alt="オマカセロウムくん" style={{width:128, height:'auto', flex:'0 0 auto'}}/>
          <span style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'var(--navy-700)', lineHeight:1.7}}>「うちの労務、<br/>ぜんぶ任せてください」</span>
        </div>
      </div>
      <div className="prose">
        <p>
          <strong>「オマカセロウムくん」は、月額契約の労務顧問サービスです。</strong>
          中小企業で発生する、ほぼすべての労務実務 ── 手続き・社員対応・書類作成・相談 ── を、労務ニュースのチームがまとめて引き取ります。
        </p>
        <p>
          労務の負担は、件数そのものより「判断」から来ています。
          「これは手続き要る？」「この社員からの相談、どう答える？」「うちの規則、どこ見ればいい？」——
          社長や労務担当の頭を止めるのは、実はこうした<strong>小さな判断の連続</strong>です。
          ロウムくんは、その判断ごと引き取るために作りました。
        </p>
        <p>
          「社員30〜100名／専任の労務担当はいない、あるいはいても1人で手一杯」の会社に、もっとも強く効きます。
        </p>
      </div>
    </div>
  </section>
);

const SCOPE = [
  {
    cat: '日々の手続き',
    items: ['入社・退社に伴う手続き一式', '社会保険の算定基礎・月額変更届', '労災・雇用保険の各種届出', '離職票・退職関連書類の作成', '扶養異動・氏名住所変更'],
  },
  {
    cat: '給与にまつわる実務',
    items: ['勤怠集計のチェック（freee連携可）', '給与計算の監修／計算代行（オプション）', '賞与計算・明細発行サポート', '年末調整の設計と運用', '住民税の更新対応'],
  },
  {
    cat: '社員対応・相談',
    items: ['社員からの労務相談対応（代行含む）', 'トラブル初期対応のアドバイス', '退職交渉・条件整理のアドバイス', '休職・復職プロセスの設計', 'ハラスメント相談窓口の運用補助'],
  },
  {
    cat: '規則・制度の維持',
    items: ['就業規則の小幅な改訂', '36協定・各種労使協定の更新', '育児介護・ハラスメント規程の整備', '同一労働同一賃金の現状チェック', '法改正のアラート＆対応提案'],
  },
  {
    cat: '助成金まわり',
    items: ['取れる助成金の初期診断', '要件合致の簡易判定', '本格申請は「オマカセ助成金申請」へ移行（別料金）'],
  },
  {
    cat: '経営判断のサポート',
    items: ['採用計画の労務観点レビュー', '組織図・等級制度の相談（軽め）', '毎月の定例ミーティング（30〜60分）', '社長・労務担当からのチャット相談'],
  }
];

const RoumuScope = () => (
  <section style={{padding:'64px 0', background:'var(--paper-2)'}} data-screen-label="02 Scope">
    <div className="container">
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>SCOPE · 何が含まれるか</Eyebrow>
        <h2>月額の中で、これだけ引き取ります。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'60ch'}}>
          「手続き代行だけ」の社労士顧問との違いはここです。
          社員対応・相談・規則の維持・法改正アラートまで、顧問料の中に含めています。
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
        {SCOPE.map((s, i) => (
          <div key={i} style={{
            background:'#fff', border:'1px solid var(--paper-line)',
            borderRadius:'var(--radius)', padding:'26px 24px'
          }}>
            <div style={{
              fontFamily:'var(--font-mono)', fontSize:11,
              letterSpacing:'.16em', color:'var(--navy-700)',
              marginBottom:10
            }}>0{i+1}</div>
            <h4 style={{
              fontFamily:'var(--font-serif)', fontWeight:700,
              fontSize:17, color:'var(--ink-900)', marginBottom:14,
              letterSpacing:'.04em'
            }}>{s.cat}</h4>
            <ul style={{padding:0, listStyle:'none', margin:0}}>
              {s.items.map((it, j) => (
                <li key={j} style={{
                  fontSize:13, lineHeight:1.85, color:'var(--ink-700)',
                  padding:'6px 0', borderTop: j===0 ? 0 : '1px dashed var(--paper-line)',
                  display:'flex', gap:8
                }}>
                  <span style={{color:'var(--accent)', fontWeight:700, flex:'0 0 auto'}}>—</span>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const RoumuPrice = () => (
  <section style={{padding:'80px 0 64px', background:'var(--paper)'}} data-screen-label="03 Price">
    <div className="container">
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>PRICE · 料金（全公開）</Eyebrow>
        <h2 style={{display:'flex', alignItems:'baseline', flexWrap:'wrap', gap:'14px'}}>
          <span>月額</span>
          <span style={{fontFamily:'var(--font-serif)', fontWeight:900, fontSize:'1.6em', color:'var(--accent)', letterSpacing:'.02em', lineHeight:1}}>5<small style={{fontSize:'.42em', fontWeight:700, color:'var(--accent)', letterSpacing:'.06em', marginLeft:'.1em'}}>万円〜</small></span>
          <span>から、人事部をアウトソース。</span>
        </h2>
        <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
          「見積もりを出さないと料金が見えない」は、私たちもストレスだと思っています。
          ざっくりした目安は全部公開します。正確な金額は、会社の状況を伺った上で決めます。
        </p>
      </div>

      <div className="pricetbl-wrap">
        <table className="pricetbl">
          <thead>
            <tr>
              <th>社員数</th>
              <th>ライト<small>手続き中心</small></th>
              <th>スタンダード<small>相談・規則含む</small></th>
              <th>フル<small>給与計算代行込み</small></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>〜10名</th>
              <td>50,000円<small>/ 月</small></td>
              <td>65,000円<small>/ 月</small></td>
              <td>85,000円<small>/ 月</small></td>
            </tr>
            <tr>
              <th>11〜30名</th>
              <td>60,000円<small>/ 月</small></td>
              <td>80,000円<small>/ 月</small></td>
              <td>110,000円<small>/ 月</small></td>
            </tr>
            <tr>
              <th>31〜50名</th>
              <td>75,000円<small>/ 月</small></td>
              <td>100,000円<small>/ 月</small></td>
              <td>140,000円<small>/ 月</small></td>
            </tr>
            <tr>
              <th>51〜100名</th>
              <td>95,000円<small>/ 月</small></td>
              <td>125,000円<small>/ 月</small></td>
              <td>170,000円<small>/ 月</small></td>
            </tr>
            <tr>
              <th>101名〜</th>
              <td colSpan={3} style={{textAlign:'center', color:'var(--ink-500)', fontSize:14, fontFamily:'var(--font-sans)', fontWeight:500}}>
                個別にお見積もり ／ 専任担当をアサインします
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div className="price-note">
        <b>料金に含まれるもの：</b>
        日々の手続き／社員対応の相談／就業規則の小幅な改訂／法改正アラート／毎月の定例ミーティング／代表・執行役員への直接相談。<br/>
        <b>別料金となる仕事：</b>
        助成金の本格申請（オマカセ助成金申請で対応）／freeeの新規導入（オマカセfreee導入）／就業規則のゼロからの作成や大規模改訂（オマカセできない就業規則）。<br/>
        <b>支払い：</b> 月末締め・翌月末払い／銀行振込。初期費用は<b>無料</b>です。
      </div>

      <div style={{
        marginTop:28,
        background:'linear-gradient(120deg, var(--navy-800), var(--navy-900))',
        borderRadius:'var(--radius)', padding:'30px 28px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        gap:24, flexWrap:'wrap'
      }}>
        <div style={{color:'#fff', flex:'1 1 320px'}}>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.22em', color:'rgba(255,255,255,.65)', marginBottom:10}}>
            COST SIMULATOR
          </div>
          <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(19px, 2.4vw, 23px)', lineHeight:1.5, letterSpacing:'.03em'}}>
            自社だと、いくら？ <em style={{fontStyle:'normal', color:'var(--accent)'}}>その場でコスト比較</em>
          </div>
          <p style={{fontSize:13.5, lineHeight:1.85, color:'rgba(255,255,255,.82)', margin:'8px 0 0'}}>
            社員数と今の労務体制を選ぶだけ。自社で抱える場合・他社に外注する場合と、オマカセロウムくんのコスト差をその場で試算できます。
          </p>
        </div>
        <a className="btn btn--primary btn--lg" href="simulator/" target="_blank" rel="noopener" style={{flex:'0 0 auto'}}>
          コストを試算する <Arrow/>
        </a>
      </div>
    </div>
  </section>
);

const RoumuNotDo = () => (
  <section style={{padding:'64px 0', background:'var(--paper-2)'}} data-screen-label="04 Not Do">
    <div className="container" style={{maxWidth:860, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>HONEST · 正直に書いておくこと</Eyebrow>
        <h2>オマカセロウムくんで、<br/>「やらないこと」もあります。</h2>
      </div>

      <div className="callout callout--warn">
        <h4>月額顧問の範囲外になる仕事</h4>
        <ul>
          <li>
            <strong>助成金の本格申請：</strong>
            1件あたり数十時間かかる仕事なので、成功報酬型の「オマカセ助成金申請」で別契約にしています。
            初期診断・方針決めまでは月額の中で対応します。
          </li>
          <li>
            <strong>freeeの新規導入：</strong>
            導入プロジェクトは約4ヶ月・関与工数が大きいため、「オマカセfreee導入」で別料金です。
            既に運用中のfreeeの日々の相談は、月額の範囲です。
          </li>
          <li>
            <strong>就業規則のゼロからの作成・大規模改訂：</strong>
            会社の方向性を一緒に決める仕事なので、「オマカセできない就業規則」で別契約にしています。
          </li>
          <li>
            <strong>労働組合との団体交渉・訴訟対応：</strong>
            私たちの専門領域ではないため、必要な場合は信頼できる弁護士をご紹介します。
          </li>
        </ul>
      </div>

      <div className="callout callout--info" style={{marginTop:20}}>
        <h4>「できない」を明確にしている理由</h4>
        <p>
          月額顧問の中に何でも詰め込むと、結局どの仕事も中途半端になります。
          私たちは、<strong>大事な仕事ほど"独立した契約"で、工数と成果を合わせる</strong>方針です。
          その分、月額は低く、範囲は明確に。結果的に、長く使えるサービスだと考えています。
        </p>
      </div>
    </div>
  </section>
);

const RoumuSteps = () => (
  <section style={{padding:'80px 0', background:'var(--paper)'}} data-screen-label="05 Steps">
    <div className="container">
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>FLOW · 契約までの流れ</Eyebrow>
        <h2>相談から契約まで、最短2週間。</h2>
      </div>
      <div className="steps">
        <div className="step">
          <div className="step__n">1</div>
          <div className="step__t">無料相談（30分）</div>
          <div className="step__b">オンラインで現状を伺います。「まだ何を聞けばいいか分からない」状態でOK。</div>
        </div>
        <div className="step">
          <div className="step__n">2</div>
          <div className="step__t">現状ヒアリング（1h）</div>
          <div className="step__b">社員数・freee利用状況・規則・助成金履歴をまとめてお聞きします。秘密保持契約を締結。</div>
        </div>
        <div className="step">
          <div className="step__n">3</div>
          <div className="step__t">プラン提案</div>
          <div className="step__b">3プランのうちどれが合うか、料金と範囲を書面でご提案。迷うポイントは一緒に整理します。</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 RoumuCTA = () => (
  <section style={{
    padding:'72px 0',
    background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))',
    color:'#fff'
  }} data-screen-label="06 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 CONSULTATION
      </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'}}>30分だけ</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>
);

const RoumuLine = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="02b LINE Support">
    <div className="container">
      <div className="section-head" style={{marginBottom:30}}>
        <Eyebrow>CHAT SUPPORT · 社員対応を引き取る</Eyebrow>
        <h2>社員からの「ちょっと相談」は、<br/>LINE／チャットで私たちが受けます。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'64ch'}}>
          勤怠の打刻修正、住所変更、交通費の手続き、有給の相談 ── 社員の細かな問い合わせを、社長や担当者を介さず私たちが直接受けて対応します。
          「社長、ちょっといいですか」が「労務ニュースに聞けばいい」に変わります。
        </p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20, maxWidth:1040, margin:'0 auto'}}>
        {['roumu-line-1.jpg','roumu-line-2.jpg','roumu-line-3-1.jpg','roumu-line-4.jpg'].map((img, i) => (
          <div key={i} style={{borderRadius:'var(--radius)', overflow:'hidden', border:'1px solid var(--paper-line)', boxShadow:'0 8px 24px -16px rgba(20,32,60,.25)'}}>
            <img src={`assets/${img}`} alt="LINE・チャットでの労務相談対応の例" style={{width:'100%', display:'block'}} loading="lazy"/>
          </div>
        ))}
      </div>
      <p style={{fontSize:12.5, color:'var(--ink-500)', textAlign:'center', marginTop:18}}>
        ※ 上記はチャット対応のイメージです。LINE・Chatwork・Slack・メール等、御社で使っているツールに合わせて対応します。
      </p>
    </div>
  </section>
);

const TRUST = [
  { t:'担当者を、固定します', d:'毎回ちがう人に一から説明し直す——がありません。御社の事情を分かっている担当が継続して対応するので、「あの件、どうなった？」がそのまま通じます。' },
  { t:'手続きも、相談も、一気通貫', d:'社会保険労務士法人と株式会社の二法人体制。資格が要る手続きは社労士法人、運用や仕組みづくりは株式会社が担い、窓口は一つ。「これは誰に聞けば」がなくなります。' },
  { t:'代表・執行役員に、直接相談できる', d:'重い判断や込み入った相談は、現場を分かっている代表・執行役員にそのまま届きます。下に降ろして止まる、がありません。' },
  { t:'ツールの運用ごと、引き取れる', d:'freee人事労務などの勤怠・給与まわりも、設定・運用ごとお預かりできます。「自社で回しきれない部分だけ」も可。丸投げでも、一部だけでも。' }
];
const RoumuTrust = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="02c なぜ安心か">
    <div className="container">
      <div className="section-head" style={{marginBottom:30}}>
        <Eyebrow>WHY TRUST · 丸ごと任せられる理由</Eyebrow>
        <h2>「任せて大丈夫か」に、<br/>仕組みで答えます。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
          労務をまるごと預けるのは、勇気がいることだと思います。だからこそ、属人的な“がんばり”ではなく、続けられる体制で受けています。
        </p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:20}}>
        {TRUST.map((s,i)=>(
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderLeft:'3px solid var(--accent)', borderRadius:'var(--radius)', padding:'24px 22px'}}>
            <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16.5, color:'var(--ink-900)', margin:'0 0 10px', lineHeight:1.5, letterSpacing:'.03em'}}>{s.t}</h4>
            <p style={{fontSize:13.5, lineHeight:1.9, color:'var(--ink-700)', margin:0}}>{s.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { RoumuWhat, RoumuScope, RoumuLine, RoumuTrust, RoumuPrice, RoumuNotDo, RoumuSteps, RoumuCTA });
