Slide Design Kit

スライドサイズ	1280px × 720px（16:9）
ビューポート対応	transform: scale() で画面サイズに自動フィット
ナビゲーション	← → キー / クリック（左半分=前、右半分=次）
プログレスバー	画面下部、白30%透明、幅がスライド進行に連動
フォント読み込み	Google Fonts — Noto Sans JP（400/500/600/700）
背景色（外枠）	#1a1a1a

CSS変数定義

:root {
  --dark: #1e2124;
  --gray: #b9b9b9;
  --gray-light: #e8e8ec;
  --gray-text: #6b6f73;
  --bg: #ffffff;
  --slide-w: 1280px;
  --slide-h: 720px;
}

使い分けルール

本文テキスト	var(--dark) — #1e2124
サブテキスト	var(--gray-text) — #6b6f73
ボーダー・区切り線	var(--gray-light) — #e8e8ec
フッター	var(--gray) — #b9b9b9
ダークスライド背景	var(--dark) — #1e2124
ダークスライド上のテキスト	rgba(255,255,255,0.7)（本文）/ rgba(255,255,255,0.4)（サブ）

フォントファミリー

本文	'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif
ラベル・番号・フッター	'Courier New', monospace

サイズ体系

Logotype_Inverted.png	ダーク背景で使用。表紙のロゴ、opacity: 0.5
Logotype_Black.png	ライト背景で使用。各スライド右下、opacity: 0.35
配置	右下固定 — height:18px; width:90px; object-fit:contain; object-position:right center
注意	max-width と object-fit:contain を必ず指定。引き伸ばし防止。

ヘッダー・フッター（全スライド共通）

<!-- ヘッダー: スライド番号 -->
<div class="slide-header">
  <div class="slide-num">02 / 09</div>
</div>

<!-- フッター: ロゴ + Confidential -->
<img class="slide-logo" src="../logo/Logotype_Black.png" alt="PortX">
<div class="slide-footer">Confidential &mdash; PortX, Inc.</div>

表紙（ダーク背景）

PortXロゴ（Inverted、opacity 0.5）→ タイトル → サブタイトル。全体を左寄せで配置。

<div class="slide slide-dark">
  <div style="position:absolute; inset:0; display:flex;
    align-items:center; justify-content:flex-start; padding:0 60px;">
    <div>
      <img src="../logo/Logotype_Inverted.png" alt="PortX"
        style="height:28px; max-width:140px; object-fit:contain;
        opacity:0.5; margin-bottom:32px;">
      <h1>タイトル</h1>
      <p style="font-size:18px; color:rgba(255,255,255,0.4);">
        サブタイトル
      </p>
    </div>
  </div>
</div>

Label + タイトル + カード3列

最も使用頻度が高いレイアウト。

<div class="slide">
  <div class="slide-header"><div class="slide-num">03 / 09</div></div>
  <div class="slide-body">
    <div class="label">Section Label</div>
    <h2>スライドタイトル</h2>
    <p class="slide-sub">説明文テキスト</p>

    <div class="three-col">
      <div class="card">
        <div class="card-tag">01</div>
        <h3>見出し</h3>
        <p>説明文</p>
      </div>
      <!-- ... card 2, 3 ... -->
    </div>
  </div>
</div>

Big Statement

1スライド1メッセージの原則を体現するレイアウト。

<div class="slide">
  <div class="slide-body" style="justify-content:center;">
    <div class="label">Label</div>
    <div class="big-statement">
      <span class="highlight">強調したい部分</span>を含む、
      大きなメッセージ。
    </div>
    <p style="margin-top:28px; font-size:16px; color:var(--gray-text);">
      補足テキスト
    </p>
  </div>
</div>

2列比較（左ライト・右ダーク）

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0;">
  <div style="padding:28px; background:#f8f8fa;
    border:1px solid var(--gray-light); border-right:none;">
    <!-- 左: ライト -->
  </div>
  <div style="padding:28px; background:var(--dark); color:white;">
    <!-- 右: ダーク -->
  </div>
</div>

1スライド1メッセージ	1枚のスライドで伝えることは1つだけ。
Confidential表記	全スライドの左下に Confidential — PortX, Inc.（Courier New 10px）。text-transform: uppercase は使わない（PortXがPORTXになる）。
PortX / Formula表記	「PortX」「Formula」は固有名詞。全大文字にしない。
ダウンロードボタン	右上に固定配置。PDF/PPTXのドロップダウン。
← Portal ボタン	左上に固定配置。ポータルトップへの導線。
余白	slide-bodyの左右パディングは 60px。