diff --git a/.github/github-script.js b/.github/github-script.js
index 982160a..35df9c9 100644
--- a/.github/github-script.js
+++ b/.github/github-script.js
@@ -12,6 +12,7 @@ module.exports = async ({ github, context }) => {
 <img src="https://github.com/${context.repo.owner}/${context.repo.repo}/raw/${context.sha}/example/example.002.png" height="360px" />
 <img src="https://github.com/${context.repo.owner}/${context.repo.repo}/raw/${context.sha}/example/example.003.png" height="360px" />
 <img src="https://github.com/${context.repo.owner}/${context.repo.repo}/raw/${context.sha}/example/example.004.png" height="360px" />
+<img src="https://github.com/${context.repo.owner}/${context.repo.repo}/raw/${context.sha}/example/example.005.png" height="360px" />
 
 </details>
     `,
diff --git a/.github/workflows/actionlint.yml b/.github/workflows/actionlint.yml
index 9dbae6d..b9b6542 100644
--- a/.github/workflows/actionlint.yml
+++ b/.github/workflows/actionlint.yml
@@ -15,7 +15,7 @@ jobs:
   actionlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Download actionlint
         id: get_actionlint
         run: bash <(curl https://raw.githubusercontent.com/rhysd/actionlint/main/scripts/download-actionlint.bash)
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 84424b0..665f981 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -23,11 +23,14 @@ jobs:
 
     steps:
       - name: リポジトリのチェックアウト
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: sassコマンドのインストール
         run: npm install -g sass
 
+      - name: ImageMagickのインストール
+        run: sudo apt-get install -y imagemagick
+
       - name: コミットに含まれるスライド画像をバックアップ
         run: mkdir example-backup && mv example/example.0* example-backup
 
@@ -64,8 +67,15 @@ jobs:
             identify -format "%[mean]" -)"
           (( $(echo "0.001 > $result" |bc -l) ))
 
+          result="$(composite -compose difference \
+            example/example.005.png \
+            example-backup/example.005.png \
+            - | \
+            identify -format "%[mean]" -)"
+          (( $(echo "0.001 > $result" |bc -l) ))
+
       - name: 検証しやすいようにビルド結果をartifactへ保存
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         if: ${{ always() }}
         with:
           name: example
@@ -73,8 +83,9 @@ jobs:
           if-no-files-found: error
 
       - name: 結果画像をコミットへ貼り付け
-        uses: actions/github-script@v5
+        uses: actions/github-script@v7
         if: github.event_name == 'pull_request'
+        continue-on-error: true
         with:
           script: |
             const script = require('./.github/github-script.js')
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..c36cff6
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,36 @@
+## プロジェクト概要
+
+Speee社用のMarpプレゼンテーションテーマ。SCSSで定義されたテーマをCSSにコンパイルし、Marp CLIまたはVS Code Marp拡張機能でMarkdownプレゼンテーションを描画する。
+
+## ビルドコマンド
+
+```bash
+# 初期セットアップ（sassのグローバルインストール、gitフックの設定）
+make init
+
+# SCSSをCSSにコンパイルし、サンプルPNG画像を生成
+make
+
+# SCSS変更時に自動コンパイル（ウォッチモード）
+make csswatch
+
+# CSSやMarkdown変更時にサンプル画像を自動再生成（csswatchと併用）
+make marpwatch
+
+# 生成ファイルを削除
+make clean
+```
+
+## アーキテクチャ
+
+- `marp-themes/speee.scss` - テーマのソース（SCSS）、`speee.css`にコンパイルされる
+- `example/example.md` - テストとプレビュー用のサンプルプレゼンテーション
+- `example/example.*.png` - 生成されたスライド画像（コミット必須、CIでの画像差分テストに使用）
+
+pre-commitフックで`make`が実行され、生成ファイルが最新であることを確認する。CIでは生成画像とコミット済み画像を比較し、視覚的なリグレッションを検出する。
+
+## 設計方針
+
+- **Google Fontsのみ使用**: ポータビリティのためウェブフォント（Lato、Noto Sans JP、Roboto Mono）を使用
+- **2種類のスライドクラス**: 通常スライド（白背景）と`lead`クラス（セクションタイトル用のダークグラデーション背景）
+- **Speeeロゴ**: GitHub raw URL経由で埋め込み。Speee社員以外はライセンス規定によりロゴ画像の削除が必要
diff --git a/example/example.001.png b/example/example.001.png
index 8d37e4c..0bff9ef 100644
Binary files a/example/example.001.png and b/example/example.001.png differ
diff --git a/example/example.002.png b/example/example.002.png
index 9cab9da..bde34ed 100644
Binary files a/example/example.002.png and b/example/example.002.png differ
diff --git a/example/example.003.png b/example/example.003.png
index 979343b..9e15877 100644
Binary files a/example/example.003.png and b/example/example.003.png differ
diff --git a/example/example.004.png b/example/example.004.png
index 81c399b..d424a51 100644
Binary files a/example/example.004.png and b/example/example.004.png differ
diff --git a/example/example.005.png b/example/example.005.png
new file mode 100644
index 0000000..0bbf4e2
Binary files /dev/null and b/example/example.005.png differ
diff --git a/example/example.md b/example/example.md
index 6cd7205..72fb460 100644
--- a/example/example.md
+++ b/example/example.md
@@ -6,17 +6,21 @@ theme: speee
 ---
 
 <!--
-_class: lead
-_paginate: false
+_class: cover
 -->
 
-# タイトル
 
-サブタイトルなど
+# Marpスライドテンプレート
+
+
+2021/11/01
+
+
 
 ---
 
-# h1 要素
+
+# 見出し要素の文字サイズ見本
 
 ## h2 要素
 
@@ -24,10 +28,8 @@ _paginate: false
 
 #### h4 要素
 
-通常の文章、
-改行 1 回した直後の文章。
-
-改行 2 回した直後の文章(次のパラグラフ)
+##### h5 要素
+###### h6 要素
 
 ---
 
@@ -35,7 +37,15 @@ _paginate: false
 _class: lead
 -->
 
-## セクション切り替えなど
+# - セクション切り替えなど
+---
+# 箇条書きイメージ
+- 箇条書き
+    - あああ
+1. 番号付きリスト2
+    - あああ
+2. 番号付きリスト3
+    - eeee
 
 ---
 
@@ -53,6 +63,5 @@ _class: lead
 
 ```sh
 #!/bin/bash
-
 echo 'hello world!'
 ```
diff --git a/marp-themes/speee.css b/marp-themes/speee.css
index ee15590..7bac701 100644
--- a/marp-themes/speee.css
+++ b/marp-themes/speee.css
@@ -20,7 +20,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0.5em 0 0 0;
+  margin: 0 0 0 0;
 }
 h1 strong,
 h2 strong,
@@ -32,27 +32,27 @@ h6 strong {
 }
 
 h1 {
-  font-size: 1.8em;
+  font-size: 1.5em;
 }
 
 h2 {
-  font-size: 1.5em;
+  font-size: 1.2em;
 }
 
 h3 {
-  font-size: 1.3em;
+  font-size: 1.1em;
 }
 
 h4 {
-  font-size: 1.1em;
+  font-size: 0.9em;
 }
 
 h5 {
-  font-size: 1em;
+  font-size: 0.8em;
 }
 
 h6 {
-  font-size: 0.9em;
+  font-size: 0.6em;
 }
 
 p,
@@ -62,7 +62,7 @@ blockquote {
 
 ul > li,
 ol > li {
-  margin: 0.3em 0 0 0;
+  margin: 0.15em 0 0 0;
 }
 ul > li > p,
 ol > li > p {
@@ -138,15 +138,16 @@ table td {
 }
 
 header,
-footer,
 section::after {
   box-sizing: border-box;
   font-size: 66%;
-  height: 70px;
-  line-height: 50px;
-  overflow: hidden;
-  padding: 10px 25px;
+  height: 0px;
+  line-height: 30px;
+  overflow: visible;
+  padding: 53% 20px;
   position: absolute;
+  color: #ccd7e6;
+  text-align: right;
 }
 
 header {
@@ -156,17 +157,21 @@ header {
 }
 
 footer {
+  text-align: right;
+  position: fixed;
   left: 0;
-  right: 0;
-  bottom: 0;
+  right: 2%;
+  bottom: 2%;
+  font-size: 0.55em;
+  font-family: "Century Gothic", sans-serif;
 }
 
-section:not(.lead):before {
+section:not(.lead):not(.cover):before {
   position: absolute;
   top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 3%;
+  left: 2.5%;
+  width: 30%;
+  height: 1.5%;
   content: "";
   background: linear-gradient(90deg, #080058, #008bcd);
 }
@@ -178,24 +183,28 @@ section {
   background-size: 9% auto, 100% 100%;
   background-color: var(--color-background);
   color: var(--color-foreground);
-  font-size: 35px;
+  font-size: 30px;
   font-family: "Lato", "Noto Sans JP", sans-serif;
   height: 720px;
   line-height: 1.35;
   letter-spacing: 1.25px;
-  padding: 70px;
+  padding-top: 2%;
+  padding-left: 3%;
+  padding-right: 3%;
+  padding-bottom: 3%;
   width: 1280px;
   word-wrap: break-word;
   --color-background: white;
   --color-background-stripe: rgba(0, 57, 129, 0.1);
   --color-foreground: #003981;
-  --color-dimmed: #33619a;
+  --color-dimmed: rgb(51, 96.6, 154.2);
   --color-highlight: #0288d1;
 }
-section::after {
+section:not(.cover):not(.lead)::after {
   right: 0;
   bottom: 0;
-  font-size: 80%;
+  font-size: 400%;
+  font-family: "Century Gothic", sans-serif;
 }
 section a,
 section mark {
@@ -243,13 +252,14 @@ section.lead {
   --color-background: #003981;
   --color-background-stripe: rgba(255, 255, 255, 0.1);
   --color-foreground: white;
-  --color-dimmed: #ccd7e6;
+  --color-dimmed: rgb(204, 215.4, 229.8);
   --color-highlight: #81d4fa;
   background-image: url("https://raw.githubusercontent.com/speee/marp-speee-theme/main/marp-themes/Speee_VI_yokogumi_white.png"), linear-gradient(115deg, #080058, #008bcd);
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: center;
+  padding-top: 5%;
 }
 section.lead h1,
 section.lead h2,
@@ -257,7 +267,8 @@ section.lead h3,
 section.lead h4,
 section.lead h5,
 section.lead h6 {
-  text-align: center;
+  text-align: left;
+  padding-left: 5%;
 }
 section.lead h1 svg[data-marp-fitting=svg],
 section.lead h2 svg[data-marp-fitting=svg],
@@ -267,8 +278,18 @@ section.lead h5 svg[data-marp-fitting=svg],
 section.lead h6 svg[data-marp-fitting=svg] {
   --preserve-aspect-ratio: xMidYMid meet;
 }
+section.lead h1 {
+  font-size: 2em;
+}
+section.lead h1::first-letter {
+  font-size: 1.5em;
+  padding-right: 20px;
+  color: #005ea5;
+  font-family: "Century Gothic", sans-serif;
+}
 section.lead p {
-  text-align: center;
+  text-align: right;
+  padding-right: 5%;
 }
 section.lead blockquote > h1,
 section.lead blockquote > h2,
@@ -290,5 +311,27 @@ section.lead table {
   margin-left: auto;
   margin-right: auto;
 }
+section.cover {
+  --color-background: #003981;
+  --color-background-stripe: rgba(255, 255, 255, 0.1);
+  --color-foreground: white;
+  --color-dimmed: rgb(204, 215.4, 229.8);
+  --color-highlight: #81d4fa;
+  background-image: url("https://raw.githubusercontent.com/speee/marp-speee-theme/main/marp-themes/Speee_VI_yokogumi_white.png"), linear-gradient(115deg, #080058, #008bcd);
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  padding-top: 5%;
+  padding-left: 10%;
+}
+section.cover h1 {
+  font-size: 2em;
+  padding-top: 5%;
+}
+section.cover p {
+  text-align: right;
+  padding-right: 5%;
+}
 
 /*# sourceMappingURL=speee.css.map */
diff --git a/marp-themes/speee.css.map b/marp-themes/speee.css.map
index 7ddd2d5..5bf9ab4 100644
--- a/marp-themes/speee.css.map
+++ b/marp-themes/speee.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["speee.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBQ;AACA;AAUR;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAKA;AAAA;EACE;;AAEA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA5LA;EACA;EACA;EACA;EACA;;AA4LA;EACE;EACA;EACA;;AAGF;AAAA;EAEE;;AAGF;EACE;EACA;;AASA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAIA;AAAA;EAEE;;AAGF;EACE;EACA;;AAIA;AAAA;EAEE;;AAKN;AAAA;EAEE;;AAGF;EA/PA;EACA;EACA;EACA;EACA;EA6PE;EAGA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;EACE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;EACE;;AAMF;AAAA;EACE;;AAIJ;EACE;EACA","file":"speee.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["speee.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBQ;AACA;AAUR;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAKA;AAAA;EACE;;AAEA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApMA;EACA;EACA;EACA;EACA;;AAoMA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;;AAGF;EACE;EACA;;AASA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAIA;AAAA;EAEE;;AAGF;EACE;EACA;;AAIA;AAAA;EAEE;;AAKN;AAAA;EAEE;;AAGF;EAxQA;EACA;EACA;EACA;EACA;EAsQE;EAGA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA,OA/Sa;EAgTb;;AAIJ;EACE;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;EACE;;AAMF;AAAA;EACE;;AAIJ;EACE;EACA;;AAKJ;EA/UA;EACA;EACA;EACA;EACA;EA6UE;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA","file":"speee.css"}
\ No newline at end of file
diff --git a/marp-themes/speee.scss b/marp-themes/speee.scss
index 910b48d..6fdf75b 100644
--- a/marp-themes/speee.scss
+++ b/marp-themes/speee.scss
@@ -35,7 +35,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0.5em 0 0 0;
+  margin: 0 0 0 0;
 
   strong {
     font-weight: inherit;
@@ -43,27 +43,27 @@ h6 {
 }
 
 h1 {
-  font-size: 1.8em;
+  font-size: 1.5em;
 }
 
 h2 {
-  font-size: 1.5em;
+  font-size: 1.2em;
 }
 
 h3 {
-  font-size: 1.3em;
+  font-size: 1.1em;
 }
 
 h4 {
-  font-size: 1.1em;
+  font-size: 0.9em;
 }
 
 h5 {
-  font-size: 1em;
+  font-size: 0.8em;
 }
 
 h6 {
-  font-size: 0.9em;
+  font-size: 0.6em;
 }
 
 p,
@@ -74,7 +74,7 @@ blockquote {
 ul,
 ol {
   > li {
-    margin: 0.3em 0 0 0;
+    margin: 0.15em 0 0 0;
 
     > p {
       margin: 0.6em 0 0 0;
@@ -159,15 +159,16 @@ table {
 }
 
 header,
-footer,
 section::after {
   box-sizing: border-box;
   font-size: 66%;
-  height: 70px;
-  line-height: 50px;
-  overflow: hidden;
-  padding: 10px 25px;
+  height: 0px;
+  line-height: 30px;
+  overflow: visible;
+  padding: 53% 20px;
   position: absolute;
+  color: #ccd7e6;
+  text-align: right;
 }
 
 header {
@@ -177,17 +178,21 @@ header {
 }
 
 footer {
+  text-align: right;
+  position: fixed;
   left: 0;
-  right: 0;
-  bottom: 0;
+  right: 2%;
+  bottom: 2%;
+  font-size: 0.55em;
+  font-family: "Century Gothic", sans-serif;
 }
 
-section:not(.lead):before {
+section:not(.lead):not(.cover):before {
   position: absolute;
   top: 0px;
-  left: 0px;
-  width: calc(100%);
-  height: calc(3%);
+  left: 2.5%;
+  width: 30%;
+  height: 1.5%;
   content: "";
   background: linear-gradient(90deg, #080058, #008bcd);
 }
@@ -199,21 +204,25 @@ section {
   background-size: 9% auto, 100% 100%;
   background-color: var(--color-background);
   color: var(--color-foreground);
-  font-size: 35px;
+  font-size: 30px;
   font-family: "Lato", "Noto Sans JP", sans-serif;
   height: 720px;
   line-height: 1.35;
   letter-spacing: 1.25px;
-  padding: 70px;
+  padding-top: 2%;
+  padding-left: 3%;
+  padding-right: 3%;
+  padding-bottom: 3%;
   width: 1280px;
   word-wrap: break-word;
 
   @include color-scheme($color-light, $color-dark, $color-normal-highlight);
 
-  &::after {
+  &:not(.cover):not(.lead)::after {
     right: 0;
     bottom: 0;
-    font-size: 80%;
+    font-size: 400%;
+    font-family: "Century Gothic", sans-serif;
   }
 
   a,
@@ -282,6 +291,7 @@ section {
     flex-direction: column;
     flex-wrap: nowrap;
     justify-content: center;
+    padding-top: 5%;
 
     h1,
     h2,
@@ -289,15 +299,28 @@ section {
     h4,
     h5,
     h6 {
-      text-align: center;
+      text-align: left;
+      padding-left: 5%;
 
       svg[data-marp-fitting="svg"] {
         --preserve-aspect-ratio: xMidYMid meet;
       }
     }
 
+    h1 {
+      font-size: 2em;
+
+      &::first-letter {
+        font-size: 1.5em;
+        padding-right: 20px;
+        color: $color-lighter-dark;
+        font-family: "Century Gothic", sans-serif;
+      }
+    }
+
     p {
-      text-align: center;
+      text-align: right;
+      padding-right: 5%;
     }
 
     blockquote {
@@ -328,4 +351,28 @@ section {
       margin-right: auto;
     }
   }
+
+  // 表紙ページのスタイル
+  &.cover {
+    @include color-scheme($color-dark, $color-light, $color-inverted-highlight);
+    background-image: url("https://raw.githubusercontent.com/speee/marp-speee-theme/main/marp-themes/Speee_VI_yokogumi_white.png"),
+      linear-gradient(115deg, #080058, #008bcd);
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    padding-top: 5%;
+    padding-left: 10%;
+
+    h1 {
+      font-size: 2em;
+      padding-top: 5%;
+    }
+
+    p {
+      text-align: right;
+      padding-right: 5%;
+    }
+  }
 }