3列カード（three-column）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>型：3列カード（three-column）</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);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);">
    <div style="background:var(--white);border:var(--border) solid var(--rock-200);border-radius:var(--radius-card);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-m);">
      <div style="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><span style="font-size:var(--fs-card);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">〇〇</span></div>
      <div style="display:flex;flex-direction:column;gap:var(--space-s);font-size:var(--fs-body);line-height:var(--lh-table);">
        <span>・〇〇</span>
        <span>・〇〇</span>
        <span>・〇〇</span>
      </div>
    </div>
    <div style="background:var(--white);border:var(--border) solid var(--rock-200);border-radius:var(--radius-card);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-m);">
      <div style="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><span style="font-size:var(--fs-card);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">〇〇</span></div>
      <div style="display:flex;flex-direction:column;gap:var(--space-s);font-size:var(--fs-body);line-height:var(--lh-table);">
        <span>・〇〇</span>
        <span>・〇〇</span>
        <span>・〇〇</span>
      </div>
    </div>
    <div style="background:var(--white);border:var(--border) solid var(--rock-200);border-radius:var(--radius-card);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-m);">
      <div style="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><span style="font-size:var(--fs-card);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">〇〇</span></div>
      <div style="display:flex;flex-direction:column;gap:var(--space-s);font-size:var(--fs-body);line-height:var(--lh-table);">
        <span>・〇〇</span>
        <span>・〇〇</span>
        <span>・〇〇</span>
      </div>
    </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>