デザイン

card

components/card.html

白+枠のカード / グレーのカード

1920×可変
components/card.html
<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-s);font-family:var(--font-sans);">
  <div style="font-size:var(--fs-card);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">カード見出し</div>
  <div style="font-size:var(--fs-body);line-height:var(--lh-body);color:var(--rock-800);">本文</div>
</div>
<div style="background:var(--rock-100);border-radius:var(--radius-card);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-s);font-family:var(--font-sans);">
  <div style="font-size:var(--fs-card);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">カード見出し</div>
  <div style="font-size:var(--fs-body);line-height:var(--lh-body);color:var(--rock-800);">本文</div>
</div>

key-message

components/key-message.html

idea-50 の核メッセージ

1920×可変
components/key-message.html
<div style="background:var(--idea-50);border:var(--border) solid var(--idea-300);border-radius:var(--radius-card);padding:var(--space-3xl);font-size:var(--fs-key);font-weight:var(--fw-bold);color:var(--idea-900);line-height:var(--lh-body);font-family:var(--font-sans);">核となる1文</div>

badge

components/badge.html

ピルバッジ・番号バッジ

1920×可変
components/badge.html
<span style="display:inline-block;background:var(--idea-100);border:var(--border) solid transparent;color:var(--idea-900);font-size:var(--fs-note);font-weight:var(--fw-bold);line-height:var(--lh-table);padding:var(--space-2xs) var(--space-m);border-radius:var(--radius-pill);white-space:nowrap;font-family:var(--font-sans);">ラベル</span>
<span style="display:inline-block;background:var(--white);border:var(--border) solid var(--idea-600);color:var(--idea-800);font-size:var(--fs-note);font-weight:var(--fw-bold);line-height:var(--lh-table);padding:var(--space-2xs) var(--space-m);border-radius:var(--radius-pill);white-space:nowrap;font-family:var(--font-sans);">注意</span>
<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;font-family:var(--font-sans);">1</span>
<span style="min-width:var(--badge-num);height:var(--badge-num);padding:0 var(--space-s);box-sizing:border-box;white-space:nowrap;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;font-family:var(--font-sans);">1・2</span>

table

components/table.html

段階・条件などの表

1920×可変
components/table.html
<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(--table-label-col) minmax(0,1fr) minmax(0,1fr);font-size:var(--fs-table);line-height:var(--lh-table);color:var(--rock-800);font-family:var(--font-sans);">
  <div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">列1</div>
  <div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">列2</div>
  <div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">列3</div>
  <div style="padding:var(--space-s) var(--space-m);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="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);">内容</div>
</div>

arrow-row

components/arrow-row.html

課題 → 取り組み の対比行

1920×可変
components/arrow-row.html
<div style="display:grid;grid-template-columns:minmax(0,1fr) var(--arrow-col) minmax(0,1.3fr);font-size:var(--fs-body);line-height:var(--lh-table);font-family:var(--font-sans);">
  <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>
components/footer.html

社名とページ番号(親要素に position:relative が必要)

1920×可変
components/footer.html
<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);font-family:var(--font-sans);"><span>株式会社ATOYOLO</span><span>2</span></div>