会社概要（profile）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>型：会社概要（profile）</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,1.1fr) minmax(0,1fr);gap:var(--gap);">
    <div style="display:flex;flex-direction:column;gap:var(--space-m);">
      <div style="font-size:var(--fs-card);font-weight:var(--fw-bold);color:var(--rock-900);">株式会社ATOYOLO</div>
      <div style="background:var(--white);border:var(--border) solid var(--rock-200);border-radius:var(--radius-card);overflow:hidden;display:grid;grid-template-columns:var(--profile-label-col) minmax(0,1fr);font-size:var(--fs-table);line-height:var(--lh-table);">
        <div style="background:var(--rock-100);padding:var(--space-s) var(--space-m);font-weight:var(--fw-medium);color:var(--rock-900);">設立</div><div style="padding:var(--space-s) var(--space-m);">〇〇</div>
        <div style="background:var(--rock-100);padding:var(--space-s) var(--space-m);font-weight:var(--fw-medium);color:var(--rock-900);border-top:var(--border) solid var(--rock-200);">本店所在地</div><div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);">〇〇</div>
        <div style="background:var(--rock-100);padding:var(--space-s) var(--space-m);font-weight:var(--fw-medium);color:var(--rock-900);border-top:var(--border) solid var(--rock-200);">資本金</div><div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);">〇〇</div>
        <div style="background:var(--rock-100);padding:var(--space-s) var(--space-m);font-weight:var(--fw-medium);color:var(--rock-900);border-top:var(--border) solid var(--rock-200);">事業内容</div><div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);">〇〇</div>
      </div>
    </div>
    <div style="display:flex;flex-direction:column;gap:var(--space-m);">
      <div style="display:flex;align-items:baseline;gap:var(--space-m);"><span style="font-size:var(--fs-table);font-weight:var(--fw-medium);color:var(--rock-600);">〇〇（肩書き）</span><span style="font-size:var(--fs-card);font-weight:var(--fw-bold);color:var(--rock-900);">〇〇 〇〇</span></div>
      <div style="background:var(--rock-100);border-radius:var(--radius-card);padding:var(--space-l) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-s);font-size:var(--fs-body);line-height:var(--lh-table);">
        <div style="display:flex;gap:var(--space-s);"><span style="color:var(--idea-800);font-weight:var(--fw-bold);">・</span><span>〇〇</span></div>
        <div style="display:flex;gap:var(--space-s);"><span style="color:var(--idea-800);font-weight:var(--fw-bold);">・</span><span>〇〇</span></div>
        <div style="display:flex;gap:var(--space-s);"><span style="color:var(--idea-800);font-weight:var(--fw-bold);">・</span><span>〇〇</span></div>
      </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>