段階・判断条件（step-table）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>型：段階・判断条件（step-table）</title>
<link rel="stylesheet" href="../../foundations/tokens.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<style>body{margin:0;background:var(--rock-200);}</style>
</head>
<body>
<section style="position:relative;width:var(--slide-w);height:var(--slide-h);box-sizing:border-box;padding:var(--pad-top) var(--pad-x) var(--pad-bottom);background:var(--rock-50);display:flex;flex-direction:column;font-family:var(--font-sans);color:var(--rock-800);">
  <h2 style="margin:0;font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">〇〇</h2>
  <div style="margin-top:var(--space-m);font-size:var(--fs-sub);font-weight:var(--fw-medium);line-height:var(--lh-heading);color:var(--rock-600);">〇〇</div>
  <div style="margin-top:var(--space-2xl);background:var(--white);border:var(--border) solid var(--rock-200);border-radius:var(--radius-card);overflow:hidden;display:grid;grid-template-columns:var(--table-label-col) minmax(0,1fr) minmax(0,1fr);font-size:var(--fs-table);line-height:var(--lh-table);">
    <div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">段階</div>
    <div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">主な取り組み</div>
    <div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">次へ進む判断条件</div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;gap:var(--space-s);"><span style="width:var(--badge-num);height:var(--badge-num);border-radius:var(--radius-pill);background:var(--idea-100);color:var(--idea-800);font-size:var(--fs-body);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;">1</span><b style="color:var(--rock-900);">〇〇</b></div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;">〇〇</div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;">〇〇</div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;gap:var(--space-s);"><span style="width:var(--badge-num);height:var(--badge-num);border-radius:var(--radius-pill);background:var(--idea-100);color:var(--idea-800);font-size:var(--fs-body);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;">2</span><b style="color:var(--rock-900);">〇〇</b></div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;">〇〇</div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;">〇〇</div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;gap:var(--space-s);"><span style="width:var(--badge-num);height:var(--badge-num);border-radius:var(--radius-pill);background:var(--idea-100);color:var(--idea-800);font-size:var(--fs-body);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;">3</span><b style="color:var(--rock-900);">〇〇</b></div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;">〇〇</div>
    <div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);display:flex;align-items:center;">〇〇</div>
  </div>
  <div style="position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:var(--footer-bottom);display:flex;justify-content:space-between;font-size:var(--fs-footer);color:var(--rock-500);"><span>株式会社ATOYOLO</span><span>〇</span></div>
</section>
</body>
</html>