/* joseikin-list.html — 助成金の種類・くわしい説明（2026年度版・基準日付）
   ※金額・要件は「助成金・補助金のご案内（汎用版）」pptx と一致させること。
   ※AS_OF を更新したら、表示の基準日も合わせる。 */

const JL_AS_OF = '2026年6月時点';

/* 助成金データ（カテゴリ → 各制度）。pptx と一致 */
const JL_GROUPS = [
  {
    cat: '採用・正社員化',
    en: 'HIRE',
    items: [
      {
        name: 'キャリアアップ助成金（正社員化コース）',
        gaiyo: '有期契約の社員を正社員に転換し、あわせて賃金を3%以上引き上げたときの助成。中小企業の助成金活用で最も登場機会が多いコースです。',
        kingaku: [
          ['重点支援対象者を正社員化', '80万円（40万円×2期）'],
          ['上記以外を正社員化', '40万円'],
          ['加算（各1回）', '多様な正社員制度+40万／転換制度新設+20万／情報公表+20万'],
        ],
        youken: ['1年度1事業所あたり20名まで', '転換後6か月の継続雇用が必要', '「重点支援対象者」かどうかで80万 or 40万'],
        nagare: ['計画書を提出', '正社員化＋賃金3%UP', '約6か月後に支給申請'],
      },
      {
        name: '特定求職者雇用開発助成金（特定就職困難者コース）',
        gaiyo: 'ハローワーク等の紹介で、就職が困難な方を雇用したときの助成。求人サイトからの自主応募で雇うと対象外になる点に注意します。',
        kingaku: [
          ['高年齢者(60-64)・母子家庭の母 等', '中小60万円／大50万円（1年）'],
          ['身体・知的障害者', '120万円／50万円（2年）'],
          ['重度障害・精神障害・45歳以上の障害者', '240万円／100万円（3年）'],
        ],
        youken: ['ハローワーク等の紹介が要件（自主応募は対象外）', '短時間労働者は別区分（中小40／大30万・1年）'],
        nagare: ['ハローワークに求人', '紹介で採用', '6か月ごとに支給申請'],
      },
    ],
  },
  {
    cat: '高齢者の活用・定年延長',
    en: 'SENIOR',
    items: [
      {
        name: '65歳超雇用推進助成金（高年齢者無期雇用転換コース）',
        gaiyo: '50歳以上かつ定年未満の有期契約社員を、無期雇用へ転換したときの助成。週20時間以上のパートも対象です（賃金UPは不要）。',
        kingaku: [['中小企業', '1人あたり 40万円（1年度10人まで）'], ['大企業', '1人あたり 30万円（1年度10人まで）']],
        youken: ['週20時間以上のパートも対象', '転換後6か月の継続雇用・賃金支払いが必要'],
        nagare: ['無期転換計画を提出', '機構が認定', '有期→無期に転換', '6か月後に支給申請'],
      },
      {
        name: '65歳超雇用推進助成金（65歳超継続雇用促進コース）',
        gaiyo: '定年を65歳以上へ引き上げ・廃止する、または継続雇用制度を導入したときの助成。令和8年4月に大幅増額されました。',
        kingaku: [
          ['定年引上げ・廃止', '60歳以上の被保険者数×引上げ幅で決定（例：10人以上で定年廃止240万円）'],
          ['継続雇用制度の導入', '別表（例：66〜69歳まで全員・10人以上で90万円）'],
        ],
        youken: ['就業規則を改定し労基署へ届出', '制度整備で社労士等の専門家へ委託費を支出', '実施月の翌月から4か月以内に申請', 'JEEDの最新手引き・正誤表で要件を最終確認'],
        nagare: ['制度を改定', '就業規則を届出', '実施', '4か月以内に申請'],
      },
    ],
  },
  {
    cat: '育児・介護・治療の両立支援（※中小企業のみ）',
    en: 'BALANCE',
    items: [
      {
        name: '両立支援等助成金（育児休業等支援コース）',
        gaiyo: '従業員の育休取得から職場復帰までを支援した中小企業への助成。育休復帰支援プランの作成が要件です。',
        kingaku: [['育休取得時', '30万円'], ['職場復帰時', '30万円'], ['情報公表加算', '2万円'], ['合計の目安', '60万円＋']],
        youken: ['育休復帰支援プランの作成', '中小企業のみが対象'],
        nagare: ['育休復帰支援プラン作成', '育休を取得', '職場復帰6か月後に申請'],
      },
      {
        name: '両立支援等助成金（介護離職防止支援コース）',
        gaiyo: '要介護家族の介護休業を支援した中小企業への助成。業務代替支援（新規雇用等）の加算もあります。',
        kingaku: [['連続5日以上の介護休業', '40万円'], ['連続15日以上の介護休業', '60万円']],
        youken: ['介護支援プランの作成', '中小企業のみが対象'],
        nagare: ['介護支援プラン作成', '介護休業を取得', '職場復帰', '支給申請'],
      },
      {
        name: '両立支援等助成金（不妊治療及び女性の健康課題対応両立支援コース）',
        gaiyo: '不妊治療・月経（PMS含む）・更年期に関する両立支援制度を整え、利用させたときの助成。',
        kingaku: [['不妊治療', '30万円'], ['月経（PMS含む）', '30万円'], ['更年期', '30万円'], ['通算', '最大 90万円']],
        youken: ['両立支援制度を1つ以上導入し就業規則に規定', '両立支援担当者を選任', '対象者に通算5日（回）以上利用させる'],
        nagare: ['制度導入・規定整備', '担当者を選任', '対象者が利用', '支給申請'],
      },
    ],
  },
  {
    cat: '人材育成・研修',
    en: 'TRAINING',
    items: [
      {
        name: '人材開発支援助成金（リスキリング支援コース）',
        gaiyo: '社員の学び直し（AI・DX等）の研修費用と、受講中の賃金を助成。研修と助成金をセットで設計すれば、社員教育の実質負担を大きく抑えられます。',
        kingaku: [
          ['賃金助成（受講中の賃金）', '1時間あたり 1,000円（中小）'],
          ['経費助成（研修費用）', '75%（中小）'],
          ['経費助成の上限', '10〜100h:30万／100〜200h:40万／200h以上:50万'],
        ],
        youken: ['10時間以上の研修が対象', '令和8年度末（2027年3月）までの時限措置', '一般の研修は「人材育成支援コース」（賃金800円〜・経費45%〜/非正規70%〜）'],
        nagare: ['研修計画を提出', '認定', '研修を実施・受講', '支給申請'],
      },
    ],
  },
  {
    cat: '賃上げ・設備投資',
    en: 'WAGE-UP',
    items: [
      {
        name: '業務改善助成金',
        gaiyo: '事業場内の最低賃金を引き上げ、あわせて生産性向上の設備投資をした中小企業への助成。POSレジ・車両・システム化などが対象例です。',
        kingaku: [
          ['助成率', '事業場内最賃1,050円未満は4/5・1,050円以上は3/4'],
          ['上限額', '引上げ額×人数で決定（30人未満で最大600万円）'],
        ],
        youken: ['最低賃金を50円以上引き上げる計画が必要', '支給額＝（設備費×助成率）と上限額の安い方', '申請は令和8年9月1日〜（予算枠で早期終了の可能性）'],
        nagare: ['賃上げ＋設備の計画申請', '交付決定', '設備購入・賃上げ', '実績報告→支給'],
      },
    ],
  },
];

const JL_PILL = {
  background:'var(--navy-700)', color:'#fff', fontSize:15, fontWeight:600,
  padding:'10px 17px', borderRadius:6, lineHeight:1.5
};
const JLStep = ({ steps }) => (
  <div style={{display:'flex', flexWrap:'wrap', alignItems:'center', gap:10}}>
    {steps.map((s, i) => (
      i === 0 ? (
        <span key={i} style={{display:'inline-block', ...JL_PILL}}>{s}</span>
      ) : (
        /* 矢印と次の手順を一塊にして折り返す（行末で矢印が宙に浮かないように） */
        <span key={i} style={{display:'inline-flex', alignItems:'center', gap:10}}>
          <span aria-hidden="true" style={{color:'var(--accent)', fontWeight:700, fontSize:15}}>→</span>
          <span style={{display:'inline-block', ...JL_PILL}}>{s}</span>
        </span>
      )
    ))}
  </div>
);

const JLLabel = ({ children }) => (
  <div style={{fontFamily:'var(--font-mono)', fontSize:12.5, letterSpacing:'.12em', color:'var(--accent)', marginBottom:10}}>{children}</div>
);

const JLCard = ({ it }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)',
      padding:'2px clamp(18px, 5vw, 30px)', marginTop:14
    }}>
      <button
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        style={{
          width:'100%', display:'flex', alignItems:'center', justifyContent:'space-between',
          gap:16, background:'none', border:'none', cursor:'pointer',
          padding:'22px 0', textAlign:'left', color:'inherit'
        }}
      >
        <h4 style={{
          fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(16px, 4.2vw, 20px)', color:'var(--ink-900)',
          lineHeight:1.5, margin:0, flex:'1 1 auto', minWidth:0, overflowWrap:'anywhere'
        }}>{it.name}</h4>
        <span aria-hidden="true" style={{
          flexShrink:0, color:'var(--accent)', fontSize:16, lineHeight:1,
          transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition:'transform .2s ease'
        }}>▾</span>
      </button>

      <div style={{display: open ? 'block' : 'none', padding:'2px 0 26px'}}>
        <p style={{fontSize:16, color:'var(--ink-700)', lineHeight:1.95, margin:'0 0 24px'}}>{it.gaiyo}</p>

        <div style={{marginBottom:22}}>
          <JLLabel>支給額</JLLabel>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap:10}}>
            {it.kingaku.map((k, i) => (
              <div key={i} style={{
                display:'flex', flexWrap:'wrap', justifyContent:'space-between', gap:'4px 16px', alignItems:'baseline',
                background:'var(--paper-2)', borderRadius:8, padding:'11px 15px'
              }}>
                <span style={{fontSize:14.5, color:'var(--ink-700)', lineHeight:1.7, minWidth:0, overflowWrap:'anywhere'}}>{k[0]}</span>
                <span style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16.5, color:'var(--navy-700)', textAlign:'right', lineHeight:1.6, minWidth:0, overflowWrap:'anywhere'}}>{k[1]}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{marginBottom:22}}>
          <JLLabel>申請の流れ</JLLabel>
          <JLStep steps={it.nagare} />
        </div>

        <div>
          <JLLabel>主な要件</JLLabel>
          <ul style={{margin:0, paddingLeft:18}}>
            {it.youken.map((y, i) => (
              <li key={i} style={{fontSize:15, color:'var(--ink-700)', lineHeight:1.95}}>{y}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

const JLHero = () => (
  <section style={{padding:'40px 0 8px', background:'var(--paper)'}} data-screen-label="01 Intro">
    <div className="container" style={{maxWidth:920, margin:'0 auto'}}>
      <div className="price-note">
        <b>※{JL_AS_OF}の情報です。</b>
        記載の金額・要件は <b>令和8年度（2026年度）・中小企業</b> を基準にした概要です。
        助成金の額や要件は年度・予算・改正により変動します（最新は厚生労働省・JEED等の公式情報をご確認ください）。
        申請可否の最終判断には、個別の要件確認が必要です。
      </div>
    </div>
  </section>
);

const JLGroups = () => (
  <section style={{padding:'8px 0 56px', background:'var(--paper)'}} data-screen-label="02 Groups">
    <div className="container" style={{maxWidth:920, margin:'0 auto'}}>
      {JL_GROUPS.map((g, gi) => (
        <div key={gi} style={{marginTop: gi === 0 ? 24 : 44}}>
          <div style={{borderBottom:'2px solid var(--navy-700)', paddingBottom:10}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11.5, letterSpacing:'.14em', color:'var(--accent)', marginBottom:6}}>0{gi+1} · {g.en}</div>
            <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(19px, 5vw, 24px)', color:'var(--ink-900)', margin:0, lineHeight:1.4}}>{g.cat}</h3>
          </div>
          {g.items.map((it, i) => <JLCard key={i} it={it} />)}
        </div>
      ))}
    </div>
  </section>
);

const JLHosokin = () => (
  <section style={{padding:'56px 0', background:'var(--paper-2)'}} data-screen-label="03 Hosokin">
    <div className="container" style={{maxWidth:920, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:18}}>
        <Eyebrow>REFERENCE · 補助金（経済産業省系）</Eyebrow>
        <h2>補助金も、ざっくり押さえておく。</h2>
        <p className="lead" style={{marginTop:12}}>
          助成金（厚労省）と違い、補助金は公募期間・審査があり難度は上がります。当社の専門は厚労省の助成金のため、補助金は適切な支援者をご紹介します。
        </p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
        {[
          {n:'小規模事業者持続化補助金', d:'販路開拓・WEB・チラシなど。', r:'2/3（赤字3/4）・最大250万円'},
          {n:'中小企業省力化投資補助金（カタログ型）', d:'省人化の設備・機器。', r:'1/2・5人以下500万円 等'},
        ].map((k, i) => (
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'22px 22px'}}>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', lineHeight:1.6}}>{k.n}</div>
            <div style={{fontSize:15, color:'var(--ink-700)', lineHeight:1.85, margin:'8px 0 12px'}}>{k.d}</div>
            <div style={{borderTop:'1px solid var(--paper-line)', paddingTop:10, fontFamily:'var(--font-serif)', fontWeight:700, fontSize:17, color:'var(--navy-700)'}}>{k.r}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const JLCTA = () => (
  <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="04 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(24px, 3vw, 34px)', 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}}>
        会社の状況・直近1年の動き・今後の予定を伺い、取れる可能性がある助成金をリストアップします。
      </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="joseikin.html" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>助成金申請サービスを見る</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { JLHero, JLGroups, JLHosokin, JLCTA });
