課題→取り組み（arrow-table）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>型：課題→取り組み（arrow-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-2xl);display:grid;grid-template-columns:minmax(0,1fr) var(--arrow-col) minmax(0,1.3fr);row-gap:var(--space-m);font-size:var(--fs-body);line-height:var(--lh-table);">
    <div style="font-size:var(--fs-card);font-weight:var(--fw-bold);color:var(--rock-900);">課題</div><div></div>
    <div style="font-size:var(--fs-card);font-weight:var(--fw-bold);color:var(--idea-800);">取り組み</div>
    <div style="background:var(--rock-100);border-radius:var(--radius-card);padding:var(--space-m) var(--space-l);color:var(--rock-900);"><b>〇〇</b><br>〇〇</div>
    <div style="display:flex;align-items:center;justify-content:center;color:var(--idea-300);font-size:var(--fs-arrow);font-weight:var(--fw-bold);">→</div>
    <div style="background:var(--idea-50);border:var(--border) solid var(--idea-300);border-radius:var(--radius-card);padding:var(--space-m) var(--space-l);color:var(--idea-900);display:flex;align-items:center;">〇〇</div>
    <div style="background:var(--rock-100);border-radius:var(--radius-card);padding:var(--space-m) var(--space-l);color:var(--rock-900);"><b>〇〇</b><br>〇〇</div>
    <div style="display:flex;align-items:center;justify-content:center;color:var(--idea-300);font-size:var(--fs-arrow);font-weight:var(--fw-bold);">→</div>
    <div style="background:var(--idea-50);border:var(--border) solid var(--idea-300);border-radius:var(--radius-card);padding:var(--space-m) var(--space-l);color:var(--idea-900);display:flex;align-items:center;">〇〇</div>
    <div style="background:var(--rock-100);border-radius:var(--radius-card);padding:var(--space-m) var(--space-l);color:var(--rock-900);"><b>〇〇</b><br>〇〇</div>
    <div style="display:flex;align-items:center;justify-content:center;color:var(--idea-300);font-size:var(--fs-arrow);font-weight:var(--fw-bold);">→</div>
    <div style="background:var(--idea-50);border:var(--border) solid var(--idea-300);border-radius:var(--radius-card);padding:var(--space-m) var(--space-l);color:var(--idea-900);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>