diff --git a/apps/site/_screenshots/baseline/en/pricing/pricing03.png b/apps/site/_screenshots/baseline/en/pricing/pricing03.png
index 01160b9f0..4e23820ca 100644
Binary files a/apps/site/_screenshots/baseline/en/pricing/pricing03.png and b/apps/site/_screenshots/baseline/en/pricing/pricing03.png differ
diff --git a/apps/site/_screenshots/baseline/en/process/process01.png b/apps/site/_screenshots/baseline/en/process/process01.png
new file mode 100644
index 000000000..3620195ab
Binary files /dev/null and b/apps/site/_screenshots/baseline/en/process/process01.png differ
diff --git a/apps/site/_screenshots/baseline/en/process/process02.png b/apps/site/_screenshots/baseline/en/process/process02.png
new file mode 100644
index 000000000..ce50618c8
Binary files /dev/null and b/apps/site/_screenshots/baseline/en/process/process02.png differ
diff --git a/apps/site/_screenshots/baseline/en/process/process03.png b/apps/site/_screenshots/baseline/en/process/process03.png
new file mode 100644
index 000000000..5181cf97b
Binary files /dev/null and b/apps/site/_screenshots/baseline/en/process/process03.png differ
diff --git a/apps/site/_screenshots/baseline/process/process01.png b/apps/site/_screenshots/baseline/process/process01.png
index 58f9cc987..2a6ebc9d0 100644
Binary files a/apps/site/_screenshots/baseline/process/process01.png and b/apps/site/_screenshots/baseline/process/process01.png differ
diff --git a/apps/site/_screenshots/baseline/process/process02.png b/apps/site/_screenshots/baseline/process/process02.png
new file mode 100644
index 000000000..58caf69b5
Binary files /dev/null and b/apps/site/_screenshots/baseline/process/process02.png differ
diff --git a/apps/site/_screenshots/baseline/process/process03.png b/apps/site/_screenshots/baseline/process/process03.png
new file mode 100644
index 000000000..3e979da9e
Binary files /dev/null and b/apps/site/_screenshots/baseline/process/process03.png differ
diff --git a/apps/site/public/screenshots/patterns/en/pricing/pricing03.webp b/apps/site/public/screenshots/patterns/en/pricing/pricing03.webp
index e681e2dfb..008b43546 100644
Binary files a/apps/site/public/screenshots/patterns/en/pricing/pricing03.webp and b/apps/site/public/screenshots/patterns/en/pricing/pricing03.webp differ
diff --git a/apps/site/public/screenshots/patterns/en/process/process01.webp b/apps/site/public/screenshots/patterns/en/process/process01.webp
new file mode 100644
index 000000000..ac1402c6c
Binary files /dev/null and b/apps/site/public/screenshots/patterns/en/process/process01.webp differ
diff --git a/apps/site/public/screenshots/patterns/en/process/process02.webp b/apps/site/public/screenshots/patterns/en/process/process02.webp
new file mode 100644
index 000000000..9e9251059
Binary files /dev/null and b/apps/site/public/screenshots/patterns/en/process/process02.webp differ
diff --git a/apps/site/public/screenshots/patterns/en/process/process03.webp b/apps/site/public/screenshots/patterns/en/process/process03.webp
new file mode 100644
index 000000000..ae014bb26
Binary files /dev/null and b/apps/site/public/screenshots/patterns/en/process/process03.webp differ
diff --git a/apps/site/public/screenshots/patterns/process/process01.webp b/apps/site/public/screenshots/patterns/process/process01.webp
index a20d98027..32858829f 100644
Binary files a/apps/site/public/screenshots/patterns/process/process01.webp and b/apps/site/public/screenshots/patterns/process/process01.webp differ
diff --git a/apps/site/public/screenshots/patterns/process/process02.webp b/apps/site/public/screenshots/patterns/process/process02.webp
new file mode 100644
index 000000000..e43386965
Binary files /dev/null and b/apps/site/public/screenshots/patterns/process/process02.webp differ
diff --git a/apps/site/public/screenshots/patterns/process/process03.webp b/apps/site/public/screenshots/patterns/process/process03.webp
new file mode 100644
index 000000000..cc4c22e3a
Binary files /dev/null and b/apps/site/public/screenshots/patterns/process/process03.webp differ
diff --git a/apps/site/src/config/patterns.ts b/apps/site/src/config/patterns.ts
index cf6c660a2..26e923bd3 100644
--- a/apps/site/src/config/patterns.ts
+++ b/apps/site/src/config/patterns.ts
@@ -583,6 +583,53 @@ const patterns = {
       },
     ],
   },
+  process: {
+    label: 'Process',
+    description: {
+      ja: '利用開始やサービス提供の手順を伝えるセクション。',
+      en: 'Sections explaining the steps to get started or use a service.',
+    },
+    items: [
+      {
+        id: 'process01',
+        draft: true,
+        title: '01 - はじめるまでの3ステップ',
+        description: {
+          ja: '番号付きのカードを矢印でつないで縦に並べ、利用開始までの手順を順番に伝えるセクションです。最後に登録ボタンを置いています。',
+          en: 'A section that stacks numbered cards connected by arrows to explain the steps to get started, ending with a sign-up button.',
+        },
+        titleEn: '01 - Three steps to get started',
+      },
+      {
+        id: 'process02',
+        title: '02 - ご相談から公開までのステップ',
+        description: {
+          ja: 'ステップ番号のバッジと見出しで、依頼から公開までの手順を順に伝えるセクションです。',
+          en: 'A section that walks through the steps from inquiry to launch with numbered step badges and headings.',
+        },
+        titleEn: '02 - Steps from consultation to launch',
+      },
+      {
+        id: 'process03',
+        title: '03 - 滞在の流れを時刻で追うタイムライン',
+        description: {
+          ja: '時刻・見出し・説明を縦のラインでつなぎ、宿泊当日の流れを伝えるタイムラインです。breakpoint「md」以上では見出しとタイムラインが横に並びます。',
+          en: 'A timeline that connects times, headings and descriptions with a vertical line to show the flow of a stay. From the "md" breakpoint up, the heading and timeline sit side by side.',
+        },
+        titleEn: '03 - Timeline of a stay by time of day',
+      },
+      {
+        id: 'process04',
+        draft: true,
+        title: '04 - 導入スケジュールを示す横並びのタイムライン',
+        description: {
+          ja: '導入から定着までの期間を横並びのタイムラインで示すセクションです。幅が足りない場合は横にスクロールします。',
+          en: 'A section that shows the period from setup to everyday use as a horizontal timeline. It scrolls horizontally when there is not enough width.',
+        },
+        titleEn: '04 - Horizontal timeline for an onboarding schedule',
+      },
+    ],
+  },
   cta: {
     label: 'CTA',
     description: {
@@ -627,34 +674,6 @@ const patterns = {
       },
     ],
   },
-  process: {
-    label: 'Process',
-    description: {
-      ja: '利用開始やサービス提供の手順を伝えるセクション。',
-      en: 'Sections explaining the steps to get started or use a service.',
-    },
-    items: [
-      {
-        id: 'process01',
-        draft: true,
-        title: '01 - はじめるまでの3ステップ',
-        description: {
-          ja: '番号と罫線を使って、利用開始までの手順を順番に伝えるセクションです。',
-          en: 'A section explaining the steps to get started with numbers and dividing lines.',
-        },
-        titleEn: '01 - Three steps to get started',
-      },
-      {
-        id: 'process02',
-        draft: true,
-        title: 'Process02',
-        description: {
-          ja: '番号付きのカードを縦に並べた、手順紹介用のパターンです。',
-          en: 'A process pattern with numbered cards arranged vertically.',
-        },
-      },
-    ],
-  },
   stats: {
     label: 'Stats',
     description: {
@@ -728,8 +747,8 @@ export const categoryIds: PatternCategoryId[] = [
   'testimonials',
   'faq',
   'posts',
-  'cta',
   'process',
+  'cta',
   'stats',
   'logos',
   'footer',
diff --git a/apps/site/src/config/redirects.ts b/apps/site/src/config/redirects.ts
index 0042831ff..2044cf4eb 100644
--- a/apps/site/src/config/redirects.ts
+++ b/apps/site/src/config/redirects.ts
@@ -100,13 +100,18 @@ export const astroRedirects: AstroRedirects = {
   '/ui/examples/card/': '/ui/components/card/',
   '/ui/examples/dividerlabel/': '/ui/components/dividerlabel/',
   '/ui/examples/reel/': '/ui/components/reel/',
-  '/ui/examples/steps/': '/ui/components/steps/',
   '/en/ui/examples/banner/': '/en/ui/components/banner/',
   '/en/ui/examples/breadcrumb/': '/en/ui/components/breadcrumb/',
   '/en/ui/examples/card/': '/en/ui/components/card/',
   '/en/ui/examples/dividerlabel/': '/en/ui/components/dividerlabel/',
   '/en/ui/examples/reel/': '/en/ui/components/reel/',
-  '/en/ui/examples/steps/': '/en/ui/components/steps/',
+  // Steps は MDX を削除し、Timeline は MDX を draft 化して本番非公開にしたため、作例のある patterns へ誘導する。ui/examples/*からの連鎖も避ける
+  '/ui/components/steps/': '/patterns/process/',
+  '/ui/examples/steps/': '/patterns/process/',
+  '/ui/block-examples/timeline/': '/patterns/process/',
+  '/en/ui/components/steps/': '/en/patterns/process/',
+  '/en/ui/examples/steps/': '/en/patterns/process/',
+  '/en/ui/block-examples/timeline/': '/en/patterns/process/',
   // FAQ/Hero は patterns のカテゴリページへ直接リダイレクトし、ui/examples/*からの連鎖を避ける（#566）
   '/ui/components/faq/': '/patterns/faq/',
   // Hero は MDX を draft 化して本番非公開にしたため、作例のある patterns へ誘導する
diff --git a/apps/site/src/content/en/ui/block-examples/Timeline.mdx b/apps/site/src/content/en/ui/block-examples/Timeline.mdx
index f12515414..24c03933a 100644
--- a/apps/site/src/content/en/ui/block-examples/Timeline.mdx
+++ b/apps/site/src/content/en/ui/block-examples/Timeline.mdx
@@ -1,6 +1,7 @@
 ---
 title: 'Timeline'
 description: 'An example of a timeline UI (b--timeline) built with Lism CSS.'
+draft: true
 ---
 
 import { CheckIcon } from '@lism-css/icons/astro';
diff --git a/apps/site/src/content/en/ui/components/Steps.mdx b/apps/site/src/content/en/ui/components/Steps.mdx
deleted file mode 100644
index 55eca3777..000000000
--- a/apps/site/src/content/en/ui/components/Steps.mdx
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: 'Steps'
-description: 'Example implementation of step-by-step procedural layouts using Lism CSS.'
----
-import { Lism, Flow, Stack } from 'lism-css/astro';
-import { DummyText } from '@lism-css/ui/astro/DummyText';
-
-
-Examples of step-by-step procedural layouts built with Lism.
-
-
-## Examples
-
-<Preview>
-  <PreviewTitle>Example</PreviewTitle>
-  <PreviewArea resize p="30">
-    <Stack g="40">
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">1</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>Step 1 Title</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="en" length="s" />
-        </Flow>
-      </Stack>
-
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">2</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>Step 2 Title</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="en" length="s" />
-          <DummyText lang="en" length="codes" />
-        </Flow>
-      </Stack>
-
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">3</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>Step 3 Title</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="en" length="l" />
-        </Flow>
-      </Stack>
-    </Stack>
-  </PreviewArea>
-  <PreviewCode slot="tab" label="JSX">
-    ```jsx
-    <Stack g="40">
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">1</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>Step 1 Title</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="en" length="s" />
-        </Flow>
-      </Stack>
-
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">2</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>Step 2 Title</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="en" length="s" />
-          <DummyText lang="en" length="codes" />
-        </Flow>
-      </Stack>
-
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">3</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>Step 3 Title</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="en" length="l" />
-        </Flow>
-      </Stack>
-    </Stack>
-    ```
-  </PreviewCode>
-  <PreviewCode slot="tab" label="HTML">
-    ```html
-    <div class="l--stack -g:40">
-      <div class="l--stack -g:20">
-        <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
-          <div class="-d:inline-flex -hl:0 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
-            <span class="-fz:xs">Step.</span>
-            <span class="-fz:l">1</span>
-          </div>
-          <h3 class="-fz:l">Step 1 Title</h3>
-        </div>
-        <div class="l--flow -flow:s -px:15">
-          <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
-        </div>
-      </div>
-      <div class="l--stack -g:20">
-        <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
-          <div class="-d:inline-flex -hl:0 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
-            <span class="-fz:xs">Step.</span>
-            <span class="-fz:l">2</span>
-          </div>
-          <h3 class="-fz:l">Step 2 Title</h3>
-        </div>
-        <div class="l--flow -flow:s -px:15">
-          <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
-          <p>
-            Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere
-            <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.
-          </p>
-        </div>
-      </div>
-      <div class="l--stack -g:20">
-        <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
-          <div class="-d:inline-flex -hl:0 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
-            <span class="-fz:xs">Step.</span>
-            <span class="-fz:l">3</span>
-          </div>
-          <h3 class="-fz:l">Step 3 Title</h3>
-        </div>
-        <div class="l--flow -flow:s -px:15">
-          <p>
-            Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
-            veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
-          </p>
-        </div>
-      </div>
-    </div>
-    ```
-  </PreviewCode>
-</Preview>
diff --git a/apps/site/src/content/ja/ui/block-examples/Timeline.mdx b/apps/site/src/content/ja/ui/block-examples/Timeline.mdx
index af8c0e5e4..ec3cf9132 100644
--- a/apps/site/src/content/ja/ui/block-examples/Timeline.mdx
+++ b/apps/site/src/content/ja/ui/block-examples/Timeline.mdx
@@ -1,6 +1,7 @@
 ---
 title: 'Timeline'
 description: 'Lism CSS で実装するタイムラインUI（b--timeline）の実装例です。'
+draft: true
 ---
 
 import { CheckIcon } from '@lism-css/icons/astro';
diff --git a/apps/site/src/content/ja/ui/components/Steps.mdx b/apps/site/src/content/ja/ui/components/Steps.mdx
deleted file mode 100644
index a50def0b6..000000000
--- a/apps/site/src/content/ja/ui/components/Steps.mdx
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: 'Steps'
-description: 'Lism CSS で実装する、手順を示すステップレイアウトの実装例です。'
----
-import { Lism, Flow, Stack } from 'lism-css/astro';
-import { DummyText } from '@lism-css/ui/astro/DummyText';
-
-
-手順を示すレイアウトの作成例を紹介します。
-
-
-## Examples
-
-<Preview>
-  <PreviewTitle>例</PreviewTitle>
-  <PreviewArea resize p="30">
-    <Stack g="40">
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">1</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>手順1のタイトル</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="ja" length="s" />
-        </Flow>
-      </Stack>
-
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">2</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>手順2のタイトル</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="ja" length="s" />
-          <DummyText lang="ja" length="codes" />
-        </Flow>
-      </Stack>
-
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">3</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>手順3のタイトル</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <DummyText lang="ja" length="l" />
-        </Flow>
-      </Stack>
-    </Stack>
-  </PreviewArea>
-  <PreviewCode slot="tab" label="JSX">
-    ```jsx
-    <Stack g="40">
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">1</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>手順1のタイトル</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
-        </Flow>
-      </Stack>
-
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">2</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>手順2のタイトル</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
-          <p>ロレム・イプサムの<i>座り雨</i>、それは<a href='###'>静かに歩く仮の言葉</a>です。長いあいだ積み重ねられてきた<code>Liberroy</code>と<code>Foog</code>の取り組み」は、私たちに<b>一定の示唆</b>を与えてくれます。</p>
-        </Flow>
-      </Stack>
-
-      <Stack g="20">
-        <Stack g="15" ai="center" fxd={[null, 'row']}>
-          <Lism d="inline-flex" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
-            <span className="-fz:xs">Step.</span>
-            <span className="-fz:l">3</span>
-          </Lism>
-          <Lism as="h3" fz="l">
-            <Fragment>手順3のタイトル</Fragment>
-          </Lism>
-        </Stack>
-        <Flow flow="s" px="15">
-          <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。</p>
-        </Flow>
-      </Stack>
-    </Stack>
-    ```
-  </PreviewCode>
-  <PreviewCode slot="tab" label="HTML">
-    ```html
-    <div class="l--stack -g:40">
-      <div class="l--stack -g:20">
-        <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
-          <div class="-d:inline-flex -hl:0 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
-            <span class="-fz:xs">Step.</span>
-            <span class="-fz:l">1</span>
-          </div>
-          <h3 class="-fz:l">手順1のタイトル</h3>
-        </div>
-        <div class="l--flow -flow:s -px:15">
-          <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
-        </div>
-      </div>
-      <div class="l--stack -g:20">
-        <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
-          <div class="-d:inline-flex -hl:0 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
-            <span class="-fz:xs">Step.</span>
-            <span class="-fz:l">2</span>
-          </div>
-          <h3 class="-fz:l">手順2のタイトル</h3>
-        </div>
-        <div class="l--flow -flow:s -px:15">
-          <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
-          <p>
-            ロレム・イプサムの<i>座り雨</i>、それは<a href="###">静かに歩く仮の言葉</a
-            >です。長いあいだ積み重ねられてきた<code>Liberroy</code>と<code>Foog</code>の取り組み」は、私たちに<b>一定の示唆</b>を与えてくれます。
-          </p>
-        </div>
-      </div>
-      <div class="l--stack -g:20">
-        <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
-          <div class="-d:inline-flex -hl:0 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
-            <span class="-fz:xs">Step.</span>
-            <span class="-fz:l">3</span>
-          </div>
-          <h3 class="-fz:l">手順3のタイトル</h3>
-        </div>
-        <div class="l--flow -flow:s -px:15">
-          <p>
-            ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。
-          </p>
-        </div>
-      </div>
-    </div>
-    ```
-  </PreviewCode>
-</Preview>
diff --git a/apps/site/src/pages/preview/patterns/pricing/pricing03/en.astro b/apps/site/src/pages/preview/patterns/pricing/pricing03/en.astro
index e2de52651..9bcb23666 100644
--- a/apps/site/src/pages/preview/patterns/pricing/pricing03/en.astro
+++ b/apps/site/src/pages/preview/patterns/pricing/pricing03/en.astro
@@ -11,7 +11,7 @@ import { Button } from '@lism-css/ui/astro/Button';
       <Stack g="20" ai="center" ta="center">
         <Inline fz="s" c="text-2">Pricing plans</Inline>
         <Heading level="2" class="u--trim" fz="2xl" fw="bold"
-          ><Inline d="inline-block">Compare plans </Inline><Inline d="inline-block">by feature</Inline></Heading
+          ><Inline d="inline-block">Compare plans</Inline>{' '}<Inline d="inline-block">by feature</Inline></Heading
         >
         <Text max-sz="s" c="text-2">Choose a plan that fits your team size and the support you need.</Text>
       </Stack>
diff --git a/apps/site/src/pages/preview/patterns/process/process01/en.astro b/apps/site/src/pages/preview/patterns/process/process01/en.astro
index 97ff9a828..902b297e1 100644
--- a/apps/site/src/pages/preview/patterns/process/process01/en.astro
+++ b/apps/site/src/pages/preview/patterns/process/process01/en.astro
@@ -1,45 +1,54 @@
 ---
+import { ArrowDownIcon } from '@lism-css/icons/astro';
 import DemoLayout from '@/layouts/DemoLayout.astro';
-
-import { Columns, Container, Heading, Inline, Stack, Text, WithSide } from 'lism-css/astro';
+import { Button } from '@lism-css/ui/astro/Button';
+import { Container, Heading, Icon, Inline, Stack, Text, WithSide } from 'lism-css/astro';
 ---
 
 <DemoLayout title="01 - Three steps to get started">
-  <Container as="section" isWrapper="l" isContainer hasGutter bgc="base" py="50">
+  <Container as="section" isWrapper="m" isContainer hasGutter bgc="base" py="50">
     <Stack g="40">
       <Stack g="20" max-sz="s">
         <Inline fz="s" c="text-2">How it works</Inline>
         <Heading level="2" class="u--trim" fz="2xl" fw="bold"
-          ><Inline d="inline-block">Get started in </Inline><Inline d="inline-block">three steps.</Inline></Heading
+          ><Inline d="inline-block">Get started in</Inline>{' '}<Inline d="inline-block">three steps.</Inline></Heading
         >
         <Text c="text-2">Getting set up takes little time. Follow the on-screen instructions from signing up to sharing your first task.</Text>
       </Stack>
 
-      <Columns as="ol" cols={[1, null, 2]} g="20">
-        <WithSide as="li" gc="1/-1" rg="30" cg="50" ai="center" bgc="base-2" p="30" bdrs="20">
-          <Inline isSide ff="mono" fz="3xl" fw="bold">01</Inline>
-          <Stack g="15">
-            <Heading level="3" fz="xl">Create a free account</Heading>
-            <Text>Enter your email address, then follow the instructions in your inbox to complete your profile. No credit card required.</Text>
-          </Stack>
-        </WithSide>
+      <Stack as="ol" g="15">
+        <Stack as="li" g="15">
+          <WithSide rg="30" cg="40" ai="center" bgc="base-2" p="30" bdrs="20">
+            <Inline isSide ff="mono" fz="3xl" fw="bold">01</Inline>
+            <Stack g="15">
+              <Heading level="3" fz="xl">Create a free account</Heading>
+              <Text>Enter your email address, then follow the instructions in your inbox to complete your profile. No credit card required.</Text>
+            </Stack>
+          </WithSide>
+          <Icon icon={ArrowDownIcon} fz="xl" c="text-2" aslf="center" />
+        </Stack>
 
-        <Stack as="li" g="30" p="30" bd-bs>
-          <Inline ff="mono" fz="3xl" fw="bold" c="text-2">02</Inline>
-          <Stack g="15">
-            <Heading level="3" fz="xl">Invite your team</Heading>
-            <Text fz="s" c="text-2">Send an invitation link to your teammates and choose their roles.</Text>
-          </Stack>
+        <Stack as="li" g="15">
+          <WithSide rg="30" cg="40" ai="center" bgc="base-2" p="30" bdrs="20">
+            <Inline isSide ff="mono" fz="3xl" fw="bold">02</Inline>
+            <Stack g="15">
+              <Heading level="3" fz="xl">Invite your team</Heading>
+              <Text>Send an invitation link to your teammates and choose their roles.</Text>
+            </Stack>
+          </WithSide>
+          <Icon icon={ArrowDownIcon} fz="xl" c="text-2" aslf="center" />
         </Stack>
 
-        <Stack as="li" g="30" p="30" bd-bs>
-          <Inline ff="mono" fz="3xl" fw="bold" c="text-2">03</Inline>
+        <WithSide as="li" rg="30" cg="40" ai="center" bgc="base-2" p="30" bdrs="20">
+          <Inline isSide ff="mono" fz="3xl" fw="bold">03</Inline>
           <Stack g="15">
             <Heading level="3" fz="xl">Share your first task</Heading>
-            <Text fz="s" c="text-2">Choose a template, assign a team member and set a deadline. You’re ready to go.</Text>
+            <Text>Choose a template, assign a team member and set a deadline. You’re ready to go.</Text>
           </Stack>
-        </Stack>
-      </Columns>
+        </WithSide>
+      </Stack>
+
+      <Button href="#" bdrs="99" px="30" aslf="center">Get started for free</Button>
     </Stack>
   </Container>
 </DemoLayout>
diff --git a/apps/site/src/pages/preview/patterns/process/process01/index.astro b/apps/site/src/pages/preview/patterns/process/process01/index.astro
index 01b2b6d37..ef0b06cbb 100644
--- a/apps/site/src/pages/preview/patterns/process/process01/index.astro
+++ b/apps/site/src/pages/preview/patterns/process/process01/index.astro
@@ -1,11 +1,12 @@
 ---
+import { ArrowDownIcon } from '@lism-css/icons/astro';
 import DemoLayout from '@/layouts/DemoLayout.astro';
-
-import { Columns, Container, Heading, Inline, Stack, Text, WithSide } from 'lism-css/astro';
+import { Button } from '@lism-css/ui/astro/Button';
+import { Container, Heading, Icon, Inline, Stack, Text, WithSide } from 'lism-css/astro';
 ---
 
 <DemoLayout title="01 - はじめるまでの3ステップ">
-  <Container as="section" isWrapper="l" isContainer hasGutter bgc="base" py="50">
+  <Container as="section" isWrapper="m" isContainer hasGutter bgc="base" py="50">
     <Stack g="40">
       <Stack g="20" max-sz="s">
         <Inline fz="s" c="text-2">ご利用の流れ</Inline>
@@ -15,31 +16,39 @@ import { Columns, Container, Heading, Inline, Stack, Text, WithSide } from 'lism
         <Text c="text-2">準備に時間はかかりません。登録から最初の共有まで、画面の案内に沿って進められます。</Text>
       </Stack>
 
-      <Columns as="ol" cols={[1, null, 2]} g="20">
-        <WithSide as="li" gc="1/-1" rg="30" cg="50" ai="center" bgc="base-2" p="30" bdrs="20">
-          <Inline isSide ff="mono" fz="3xl" fw="bold">01</Inline>
-          <Stack g="15">
-            <Heading level="3" fz="xl">無料アカウントを作成</Heading>
-            <Text>メールアドレスを入力し、届いた案内から基本情報を登録します。カード情報は不要です。</Text>
-          </Stack>
-        </WithSide>
+      <Stack as="ol" g="15">
+        <Stack as="li" g="15">
+          <WithSide rg="30" cg="40" ai="center" bgc="base-2" p="30" bdrs="20">
+            <Inline isSide ff="mono" fz="3xl" fw="bold">01</Inline>
+            <Stack g="15">
+              <Heading level="3" fz="xl">無料アカウントを作成</Heading>
+              <Text>メールアドレスを入力し、届いた案内から基本情報を登録します。カード情報は不要です。</Text>
+            </Stack>
+          </WithSide>
+          <Icon icon={ArrowDownIcon} fz="xl" c="text-2" aslf="center" />
+        </Stack>
 
-        <Stack as="li" g="30" p="30" bd-bs>
-          <Inline ff="mono" fz="3xl" fw="bold" c="text-2">02</Inline>
-          <Stack g="15">
-            <Heading level="3" fz="xl">チームを招待する</Heading>
-            <Text fz="s" c="text-2">一緒に使うメンバーへ招待リンクを送り、役割を選びます。</Text>
-          </Stack>
+        <Stack as="li" g="15">
+          <WithSide rg="30" cg="40" ai="center" bgc="base-2" p="30" bdrs="20">
+            <Inline isSide ff="mono" fz="3xl" fw="bold">02</Inline>
+            <Stack g="15">
+              <Heading level="3" fz="xl">チームを招待する</Heading>
+              <Text>一緒に使うメンバーへ招待リンクを送り、役割を選びます。</Text>
+            </Stack>
+          </WithSide>
+          <Icon icon={ArrowDownIcon} fz="xl" c="text-2" aslf="center" />
         </Stack>
 
-        <Stack as="li" g="30" p="30" bd-bs>
-          <Inline ff="mono" fz="3xl" fw="bold" c="text-2">03</Inline>
+        <WithSide as="li" rg="30" cg="40" ai="center" bgc="base-2" p="30" bdrs="20">
+          <Inline isSide ff="mono" fz="3xl" fw="bold">03</Inline>
           <Stack g="15">
             <Heading level="3" fz="xl">最初の仕事を共有する</Heading>
-            <Text fz="s" c="text-2">テンプレートを選んで担当と期限を設定したら、準備は完了です。</Text>
+            <Text>テンプレートを選んで担当と期限を設定したら、準備は完了です。</Text>
           </Stack>
-        </Stack>
-      </Columns>
+        </WithSide>
+      </Stack>
+
+      <Button href="#" bdrs="99" px="30" aslf="center">無料ではじめる</Button>
     </Stack>
   </Container>
 </DemoLayout>
diff --git a/apps/site/src/pages/preview/patterns/process/process02/en.astro b/apps/site/src/pages/preview/patterns/process/process02/en.astro
index 5c67f47f0..886c427d7 100644
--- a/apps/site/src/pages/preview/patterns/process/process02/en.astro
+++ b/apps/site/src/pages/preview/patterns/process/process02/en.astro
@@ -1,130 +1,76 @@
 ---
-import { ArrowRightIcon } from '@lism-css/icons/astro';
 import DemoLayout from '@/layouts/DemoLayout.astro';
 
-import { Container, Grid, Box, Flex, Center, Icon, Text, Inline } from 'lism-css/astro';
-import { Button } from '@lism-css/ui/astro/Button';
+import { Container, Flex, Heading, Inline, Stack, Text } from 'lism-css/astro';
 ---
 
-<DemoLayout title="Process02">
-  <Container isWrapper="m" bgc="base-2" py="50" hasGutter>
-    <Grid
-      gt={[
-        '"title" "body" "link" / 1fr',
-        null,
-        `"title link"
-				 "body body" / auto 1fr`,
-      ]}
-      g="40"
-    >
-      <Box ga="title">
-        <h2 class="u--trim">Service Features</h2>
-      </Box>
-      <Grid ga="body" gtc={['1fr auto', null, 'auto 1fr auto']} g="30">
-        <Grid
-          as="a"
-          isBoxLink
-          href="#"
-          gtc="subgrid"
-          gc="1 / -1"
-          g={['20', '30', '40']}
-          bgc="base"
-          p={['20', '30']}
-          bdrs="10"
-          set="hov"
-          hasTransition
-          ai="center"
-          hov="-bxsh"
+<DemoLayout title="02 - Steps from consultation to launch">
+  <Container as="section" isWrapper="m" isContainer hasGutter bgc="base" py="50">
+    <Stack g="50">
+      <Stack g="20">
+        <Inline fz="s" c="text-2">Our process</Inline>
+        <Heading level="2" class="u--trim" fz="2xl" fw="bold">From first conversation to launch</Heading>
+        <Text c="text-2"
+          >No need to worry if this is your first project with us. We shape your ideas one step at a time, through ongoing conversation.</Text
         >
-          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
-            <Flex g={['20', null, '30']} ai="center">
-              <Inline layout="center" fxsh="0" fz="xs" hl="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 1</Inline>
-              <Text fz="m" fw="bold">Build wealth while having fun</Text>
-            </Flex>
-            <Flex ai="center" c="text" td="none" g="30">
-              <Text
-                >Introducing "Goal-Based Savings" where you can save by setting target amounts. Plan your wealth building in an enjoyable way.</Text
-              >
-            </Flex>
-          </Grid>
-          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
-            <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
-          </Center>
-        </Grid>
-        <Grid
-          as="a"
-          isBoxLink
-          href="#"
-          gtc="subgrid"
-          gc="1 / -1"
-          g={['20', null, '40']}
-          bgc="base"
-          p={['20', '30']}
-          bdrs="10"
-          set="hov"
-          hasTransition
-          ai="center"
-          hov="-bxsh"
-        >
-          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
-            <Flex g={['20', null, '30']} ai="center">
-              <Inline layout="center" fxsh="0" fz="xs" hl="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 2</Inline>
-              <Text fz="m" fw="bold">Reliable security measures</Text>
-            </Flex>
-            <Flex ai="center" c="text" td="none" g="30">
-              <Text
-                >With encrypted communications and two-factor authentication, we rigorously protect your valuable assets and personal information.</Text
-              >
-            </Flex>
-          </Grid>
-          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
-            <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
-          </Center>
-        </Grid>
-        <Grid
-          as="a"
-          isBoxLink
-          href="#"
-          gtc="subgrid"
-          gc="1 / -1"
-          g={['20', null, '40']}
-          bgc="base"
-          p={['20', '30']}
-          bdrs="10"
-          set="hov"
-          hasTransition
-          ai="center"
-          hov="-bxsh"
-        >
-          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
-            <Flex g={['20', null, '30']} ai="center">
-              <Inline layout="center" fxsh="0" fz="xs" hl="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 3</Inline>
-              <Text fz="m" fw="bold">All you need is your smartphone!</Text>
-            </Flex>
-            <Flex ai="center" c="text" td="none" g="30">
-              <Text
-                >From account opening to checking your portfolio, everything is completed in the smartphone app. Check your assets anytime, anywhere.</Text
-              >
-            </Flex>
-          </Grid>
-          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
-            <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
-          </Center>
-        </Grid>
-      </Grid>
-      <Flex ga="link" ai="flex-end" jc="flex-end">
-        <Button href="#" variant="outline" w={['stretch', null, 'auto']} min-w="8rem" fz="s" bd bdc="text" py="15" bdrs="10">View Detail</Button>
-      </Flex>
-    </Grid>
+      </Stack>
+
+      <Stack as="ol" g="40">
+        <Stack as="li" g="20">
+          <Flex g="15" ai="center">
+            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
+              <Inline fz="xs">Step.</Inline>
+              <Inline fz="l">1</Inline>
+            </Inline>
+            <Heading level="3" fz="l">Get in touch</Heading>
+          </Flex>
+          <Text px="15"
+            >Send us your project details through the contact form. Someone from our team will reply within two business days. It’s fine if your plans
+            aren’t settled yet.</Text
+          >
+        </Stack>
+
+        <Stack as="li" g="20">
+          <Flex g="15" ai="center">
+            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
+              <Inline fz="xs">Step.</Inline>
+              <Inline fz="l">2</Inline>
+            </Inline>
+            <Heading level="3" fz="l">Discovery and proposal</Heading>
+          </Flex>
+          <Text px="15"
+            >We learn about your strengths and the audience you want to reach, and clarify the challenges. Then we propose a project scope, schedule
+            and estimate.</Text
+          >
+        </Stack>
+
+        <Stack as="li" g="20">
+          <Flex g="15" ai="center">
+            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
+              <Inline fz="xs">Step.</Inline>
+              <Inline fz="l">3</Inline>
+            </Inline>
+            <Heading level="3" fz="l">Design and build</Heading>
+          </Flex>
+          <Text px="15"
+            >From information architecture to design and development. We set up a review at each milestone and incorporate your feedback as we go.</Text
+          >
+        </Stack>
+
+        <Stack as="li" g="20">
+          <Flex g="15" ai="center">
+            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
+              <Inline fz="xs">Step.</Inline>
+              <Inline fz="l">4</Inline>
+            </Inline>
+            <Heading level="3" fz="l">Launch and ongoing support</Heading>
+          </Flex>
+          <Text px="15"
+            >After launch, we look at how people respond and identify what to work on next. From day-to-day updates to revisiting content and design,
+            we keep supporting you.</Text
+          >
+        </Stack>
+      </Stack>
+    </Stack>
   </Container>
 </DemoLayout>
-
-<style is:inline>
-  @media (any-hover: hover) {
-    .-hov\:in\:reverse {
-      background-color: var(--_isHov, var(--text));
-      color: var(--_isHov, var(--base));
-      border-color: var(--text);
-    }
-  }
-</style>
diff --git a/apps/site/src/pages/preview/patterns/process/process02/index.astro b/apps/site/src/pages/preview/patterns/process/process02/index.astro
index b196471c8..1b780533a 100644
--- a/apps/site/src/pages/preview/patterns/process/process02/index.astro
+++ b/apps/site/src/pages/preview/patterns/process/process02/index.astro
@@ -1,124 +1,63 @@
 ---
-import { ArrowRightIcon } from '@lism-css/icons/astro';
 import DemoLayout from '@/layouts/DemoLayout.astro';
 
-import { Container, Grid, Box, Flex, Center, Icon, Text, Inline } from 'lism-css/astro';
-import { Button } from '@lism-css/ui/astro/Button';
+import { Container, Flex, Heading, Inline, Stack, Text } from 'lism-css/astro';
 ---
 
-<DemoLayout title="Process02">
-  <Container isWrapper="m" bgc="base-2" py="50" hasGutter>
-    <Grid
-      gt={[
-        '"title" "body" "link" / 1fr',
-        null,
-        `"title link"
-				 "body body" / auto 1fr`,
-      ]}
-      g="40"
-    >
-      <Box ga="title">
-        <h2 class="u--trim">サービスの特徴について</h2>
-      </Box>
-      <Grid ga="body" gtc={['1fr auto', null, 'auto 1fr auto']} g="30">
-        <Grid
-          as="a"
-          isBoxLink
-          href="#"
-          gtc="subgrid"
-          gc="1 / -1"
-          g={['20', '30', '40']}
-          bgc="base"
-          p={['20', '30']}
-          bdrs="10"
-          set="hov"
-          hasTransition
-          ai="center"
-          hov="-bxsh"
-        >
-          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
-            <Flex g={['20', null, '30']} ai="center">
-              <Inline layout="center" fxsh="0" fz="xs" hl="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 1</Inline>
-              <Text fz="m" fw="bold">楽しみながら計画的に資産形成</Text>
-            </Flex>
-            <Flex ai="center" c="text" td="none" g="30">
-              <Text>目標金額を設定して貯蓄ができる「目的別預金」が登場。楽しみながら計画的な資産形成が行えます。</Text>
-            </Flex>
-          </Grid>
-          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
-            <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
-          </Center>
-        </Grid>
-        <Grid
-          as="a"
-          isBoxLink
-          href="#"
-          gtc="subgrid"
-          gc="1 / -1"
-          g={['20', null, '40']}
-          bgc="base"
-          p={['20', '30']}
-          bdrs="10"
-          set="hov"
-          hasTransition
-          ai="center"
-          hov="-bxsh"
-        >
-          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
-            <Flex g={['20', null, '30']} ai="center">
-              <Inline layout="center" fxsh="0" fz="xs" hl="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 2</Inline>
-              <Text fz="m" fw="bold">安心のセキュリティ体制</Text>
-            </Flex>
-            <Flex ai="center" c="text" td="none" g="30">
-              <Text>通信の暗号化や二段階認証を導入。お客様の大切な資産と個人情報を厳重に保護します。</Text>
-            </Flex>
-          </Grid>
-          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
-            <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
-          </Center>
-        </Grid>
-        <Grid
-          as="a"
-          isBoxLink
-          href="#"
-          gtc="subgrid"
-          gc="1 / -1"
-          g={['20', null, '40']}
-          bgc="base"
-          p={['20', '30']}
-          bdrs="10"
-          set="hov"
-          hasTransition
-          ai="center"
-          hov="-bxsh"
-        >
-          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
-            <Flex g={['20', null, '30']} ai="center">
-              <Inline layout="center" fxsh="0" fz="xs" hl="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 3</Inline>
-              <Text fz="m" fw="bold">必要なものはスマホだけ！</Text>
-            </Flex>
-            <Flex ai="center" c="text" td="none" g="30">
-              <Text>口座開設から運用状況の確認までスマホアプリで完結。いつでも手軽に資産をチェックできます。</Text>
-            </Flex>
-          </Grid>
-          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
-            <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
-          </Center>
-        </Grid>
-      </Grid>
-      <Flex ga="link" ai="flex-end" jc="flex-end">
-        <Button href="#" variant="outline" w={['stretch', null, 'auto']} min-w="8rem" fz="s" bd bdc="text" py="15" bdrs="10">View Detail</Button>
-      </Flex>
-    </Grid>
+<DemoLayout title="02 - ご相談から公開までのステップ">
+  <Container as="section" isWrapper="m" isContainer hasGutter bgc="base" py="50">
+    <Stack g="50">
+      <Stack g="20">
+        <Inline fz="s" c="text-2">制作の流れ</Inline>
+        <Heading level="2" class="u--trim" fz="2xl" fw="bold">ご相談から公開まで</Heading>
+        <Text c="text-2">はじめてのご依頼でも心配はいりません。対話を重ねながら、一つずつかたちにしていきます。</Text>
+      </Stack>
+
+      <Stack as="ol" g="40">
+        <Stack as="li" g="20">
+          <Flex g="15" ai="center">
+            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
+              <Inline fz="xs">Step.</Inline>
+              <Inline fz="l">1</Inline>
+            </Inline>
+            <Heading level="3" fz="l">お問い合わせ</Heading>
+          </Flex>
+          <Text px="15">フォームからご相談内容をお送りください。2営業日以内に担当者からご連絡します。内容が固まっていない段階でも構いません。</Text>
+        </Stack>
+
+        <Stack as="li" g="20">
+          <Flex g="15" ai="center">
+            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
+              <Inline fz="xs">Step.</Inline>
+              <Inline fz="l">2</Inline>
+            </Inline>
+            <Heading level="3" fz="l">ヒアリング・ご提案</Heading>
+          </Flex>
+          <Text px="15">事業の強みや届けたい相手を伺い、課題を整理します。そのうえで、制作の範囲とスケジュール、お見積りをご提案します。</Text>
+        </Stack>
+
+        <Stack as="li" g="20">
+          <Flex g="15" ai="center">
+            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
+              <Inline fz="xs">Step.</Inline>
+              <Inline fz="l">3</Inline>
+            </Inline>
+            <Heading level="3" fz="l">デザイン・制作</Heading>
+          </Flex>
+          <Text px="15">情報の構成からデザイン、実装まで。節目ごとに確認の機会を設け、いただいたご意見を反映しながら進めます。</Text>
+        </Stack>
+
+        <Stack as="li" g="20">
+          <Flex g="15" ai="center">
+            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
+              <Inline fz="xs">Step.</Inline>
+              <Inline fz="l">4</Inline>
+            </Inline>
+            <Heading level="3" fz="l">公開・運用サポート</Heading>
+          </Flex>
+          <Text px="15">公開後の反応を確かめ、次の課題を整理します。日々の更新から内容やデザインの見直しまで、継続して支えます。</Text>
+        </Stack>
+      </Stack>
+    </Stack>
   </Container>
 </DemoLayout>
-
-<style is:inline>
-  @media (any-hover: hover) {
-    .-hov\:in\:reverse {
-      background-color: var(--_isHov, var(--text));
-      color: var(--_isHov, var(--base));
-      border-color: var(--text);
-    }
-  }
-</style>
diff --git a/apps/site/src/pages/preview/patterns/process/process03/_style.css b/apps/site/src/pages/preview/patterns/process/process03/_style.css
new file mode 100644
index 000000000..10b841bba
--- /dev/null
+++ b/apps/site/src/pages/preview/patterns/process/process03/_style.css
@@ -0,0 +1,35 @@
+@layer lism-custom {
+  .c--timeline {
+    --shape-size: 1.375rem;
+    --line-len: 100%;
+    --line-bold: 1px;
+    --_line-offset: calc(var(--shape-size) / 2);
+    --edge: var(--s20);
+    --startSpace: var(--edge);
+    --endSpace: var(--edge);
+  }
+
+  .c--timeline_item {
+    grid: var(--startSpace) auto auto auto var(--endSpace) / var(--shape-size) 1fr;
+  }
+
+  .c--timeline_line {
+    width: var(--line-bold);
+    height: var(--line-len);
+  }
+
+  .c--timeline_shape {
+    font-size: var(--shape-size);
+    width: 0.5em;
+  }
+
+  /* 先頭・末尾はラインをシェイプの中心で止める */
+  .c--timeline_item[data-timeline='start'] {
+    --startSpace: 0;
+    --line-len: calc(100% - var(--_line-offset));
+  }
+  .c--timeline_item[data-timeline='end'] {
+    --endSpace: 0;
+    --line-len: calc(100% - var(--_line-offset));
+  }
+}
diff --git a/apps/site/src/pages/preview/patterns/process/process03/en.astro b/apps/site/src/pages/preview/patterns/process/process03/en.astro
new file mode 100644
index 000000000..99b0daab9
--- /dev/null
+++ b/apps/site/src/pages/preview/patterns/process/process03/en.astro
@@ -0,0 +1,66 @@
+---
+import DemoLayout from '@/layouts/DemoLayout.astro';
+
+import { Container, Decorator, Grid, Heading, Inline, Stack, Text } from 'lism-css/astro';
+import './_style.css';
+---
+
+<DemoLayout title="03 - Timeline of a stay by time of day">
+  <Container as="section" isWrapper="l" isContainer hasGutter bgc="base" py="50">
+    <Grid gtc={['1fr', null, '2fr 3fr']} g="50">
+      <Stack g="20">
+        <Inline fz="s" c="text-2">Your stay</Inline>
+        <Heading level="2" class="u--trim" fz="2xl" fw="bold">A day at the inn</Heading>
+        <Text c="text-2">Here’s how your day unfolds, from check-in to departure. Meal and bath times can be adjusted to suit your plans.</Text>
+      </Stack>
+
+      <Grid as="ol" class="c--timeline" hl="s">
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20" data-timeline="start">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" aslf="e" gr="1/-1" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">3:00 PM</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Check-in</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >We welcome you in the lobby with seasonal tea and sweets, and introduce the inn and nearby walking routes.</Text
+          >
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">4:00 PM</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Hot spring baths</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >Enjoy the large public bath and a private open-air bath. Please reserve the private bath at the front desk.</Text
+          >
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">6:00 PM</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Dinner</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >Savor a seasonal kaiseki course made with the day’s freshest ingredients, served at a relaxed pace in your room.</Text
+          >
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">Next day, 7:30 AM</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Breakfast</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >We serve freshly cooked rice and seasonal miso soup. A morning stroll through the garden is a lovely way to start the day.</Text
+          >
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20" data-timeline="end">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" aslf="s" gr="1/3" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">Next day, 11:00 AM</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Check-out</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >We’re happy to keep your luggage after check-out, so you can go sightseeing or visit nearby hot springs before heading home.</Text
+          >
+        </Grid>
+      </Grid>
+    </Grid>
+  </Container>
+</DemoLayout>
diff --git a/apps/site/src/pages/preview/patterns/process/process03/index.astro b/apps/site/src/pages/preview/patterns/process/process03/index.astro
new file mode 100644
index 000000000..9cc25e694
--- /dev/null
+++ b/apps/site/src/pages/preview/patterns/process/process03/index.astro
@@ -0,0 +1,64 @@
+---
+import DemoLayout from '@/layouts/DemoLayout.astro';
+
+import { Container, Decorator, Grid, Heading, Inline, Stack, Text } from 'lism-css/astro';
+import './_style.css';
+---
+
+<DemoLayout title="03 - 滞在の流れを時刻で追うタイムライン">
+  <Container as="section" isWrapper="l" isContainer hasGutter bgc="base" py="50">
+    <Grid gtc={['1fr', null, '2fr 3fr']} g="50">
+      <Stack g="20">
+        <Inline fz="s" c="text-2">ご滞在の流れ</Inline>
+        <Heading level="2" class="u--trim" fz="2xl" fw="bold">静寂の宿で過ごす一日</Heading>
+        <Text c="text-2">チェックインからご出発まで、当日の過ごし方をご案内します。お食事やお風呂の時間は、ご希望に合わせて調整いたします。</Text>
+      </Stack>
+
+      <Grid as="ol" class="c--timeline" hl="s">
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20" data-timeline="start">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" aslf="e" gr="1/-1" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">15:00</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">チェックイン</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2">ロビーで季節の茶菓をお出しし、館内と周辺の散策コースをご案内します。</Text>
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">16:00</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">湯めぐり</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >大浴場と貸切露天風呂をご利用いただけます。貸切露天風呂はフロントでご予約ください。</Text
+          >
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">18:00</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">ご夕食</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >その日の仕入れで組み立てる旬の会席を、お部屋でゆっくりとお召し上がりください。</Text
+          >
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">翌日 7:30</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">ご朝食</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >炊きたてのご飯と季節の汁物をご用意します。食後は朝の庭園散策もおすすめです。</Text
+          >
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" cg="20" data-timeline="end">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" aslf="s" gr="1/3" gc="1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">翌日 11:00</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">チェックアウト</Heading>
+          <Text class="c--timeline_text" fz="s" mbs="10" gr="4" gc="2"
+            >ご出発後も荷物をお預かりします。周辺の観光や外湯めぐりの前後にご利用ください。</Text
+          >
+        </Grid>
+      </Grid>
+    </Grid>
+  </Container>
+</DemoLayout>
diff --git a/apps/site/src/pages/preview/patterns/process/process04/_style.css b/apps/site/src/pages/preview/patterns/process/process04/_style.css
new file mode 100644
index 000000000..0d30a62fe
--- /dev/null
+++ b/apps/site/src/pages/preview/patterns/process/process04/_style.css
@@ -0,0 +1,50 @@
+@layer lism-custom {
+  .c--timeline {
+    --shape-size: 1.375rem;
+    --line-len: 100%;
+    --line-bold: 1px;
+    --edge: var(--s15);
+    --_line-offset: calc(50% - var(--edge) / 2);
+    --highlight-inset: -3px;
+    --startSpace: var(--edge);
+    --endSpace: var(--edge);
+    --shapeSpace: calc(var(--shape-size) + var(--highlight-inset) * -2);
+    grid-template-rows: var(--shapeSpace) auto auto auto;
+    grid-auto-columns: minmax(12rem, 1fr);
+    overflow-x: auto;
+  }
+
+  .c--timeline_item {
+    grid-template-columns: var(--startSpace) auto var(--endSpace);
+  }
+
+  .c--timeline_line {
+    width: var(--line-len);
+    height: var(--line-bold);
+  }
+
+  .c--timeline_shape {
+    font-size: var(--shape-size);
+    width: 0.5em;
+  }
+  .c--timeline_shape._hasIcon {
+    width: 1em;
+  }
+  .c--timeline_shape > .a--icon {
+    scale: 0.625;
+  }
+
+  .c--timeline_highlight {
+    inset: var(--highlight-inset);
+  }
+
+  /* 先頭・末尾はラインをシェイプの中心で止める */
+  .c--timeline_item[data-timeline='start'] {
+    --startSpace: 0;
+    --line-len: calc(100% - var(--_line-offset));
+  }
+  .c--timeline_item[data-timeline='end'] {
+    --endSpace: 0;
+    --line-len: calc(100% - var(--_line-offset));
+  }
+}
diff --git a/apps/site/src/pages/preview/patterns/process/process04/en.astro b/apps/site/src/pages/preview/patterns/process/process04/en.astro
new file mode 100644
index 000000000..3b535749c
--- /dev/null
+++ b/apps/site/src/pages/preview/patterns/process/process04/en.astro
@@ -0,0 +1,57 @@
+---
+import { CheckIcon } from '@lism-css/icons/astro';
+import DemoLayout from '@/layouts/DemoLayout.astro';
+
+import { Center, Container, Decorator, Grid, Heading, Icon, Inline, Stack, Text } from 'lism-css/astro';
+import './_style.css';
+---
+
+<DemoLayout title="04 - Horizontal timeline for an onboarding schedule">
+  <Container as="section" isWrapper="l" isContainer hasGutter bgc="base" py="50">
+    <Stack g="50">
+      <Stack g="20" ta="center">
+        <Inline fz="s" c="text-2">Onboarding schedule</Inline>
+        <Heading level="2" class="u--trim" fz="2xl" fw="bold">From setup to everyday use in about a month</Heading>
+        <Text c="text-2">A dedicated specialist supports you from initial setup until your team is up and running.</Text>
+      </Stack>
+
+      <Grid as="ol" class="c--timeline" gaf="column" hl="s">
+        <Grid as="li" class="c--timeline_item" ai="center" ji="center" ta="center" gtr="subgrid" gr="1/-1" rg="10" data-timeline="start">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="e" gr="1" gc="1/-1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" bgc="text" gr="1" gc="2" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">Week 1</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Initial setup</Heading>
+          <Text class="c--timeline_text" fz="s" gr="4" gc="2">We issue your accounts and decide how to organize your teams and projects.</Text>
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" ji="center" ta="center" gtr="subgrid" gr="1/-1" rg="10">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1" gc="1/-1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" bgc="text" gr="1" gc="2" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">Week 2</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Data migration</Heading>
+          <Text class="c--timeline_text" fz="s" gr="4" gc="2"
+            >Import your existing tasks and documents. Your specialist will help with the migration.</Text
+          >
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" ji="center" ta="center" gtr="subgrid" gr="1/-1" rg="10">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1" gc="1/-1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" bgc="text" gr="1" gc="2" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">Week 3</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Team training</Heading>
+          <Text class="c--timeline_text" fz="s" gr="4" gc="2">We hold online training sessions for each team and walk you through everyday use.</Text>
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" ji="center" ta="center" gtr="subgrid" gr="1/-1" rg="10" data-timeline="end">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="s" gr="1" gc="1/-1" />
+          <Center class="c--timeline_shape _hasIcon" pos="relative" z="1" c="base" ar="1/1" bdrs="99" bgc="text" gr="1" gc="2">
+            <Decorator class="c--timeline_highlight" as="span" pos="absolute" z="-1" bgc="inherit" bdrs="99" o="ppp" />
+            <Icon icon={CheckIcon} weight="bold" />
+          </Center>
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">After 1 month</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">Full rollout</Heading>
+          <Text class="c--timeline_text" fz="s" gr="4" gc="2"
+            >We review how your team is using it together and suggest ways to improve your workflow.</Text
+          >
+        </Grid>
+      </Grid>
+    </Stack>
+  </Container>
+</DemoLayout>
diff --git a/apps/site/src/pages/preview/patterns/process/process04/index.astro b/apps/site/src/pages/preview/patterns/process/process04/index.astro
new file mode 100644
index 000000000..a61e6bb3f
--- /dev/null
+++ b/apps/site/src/pages/preview/patterns/process/process04/index.astro
@@ -0,0 +1,53 @@
+---
+import { CheckIcon } from '@lism-css/icons/astro';
+import DemoLayout from '@/layouts/DemoLayout.astro';
+
+import { Center, Container, Decorator, Grid, Heading, Icon, Inline, Stack, Text } from 'lism-css/astro';
+import './_style.css';
+---
+
+<DemoLayout title="04 - 導入スケジュールを示す横並びのタイムライン">
+  <Container as="section" isWrapper="l" isContainer hasGutter bgc="base" py="50">
+    <Stack g="50">
+      <Stack g="20" ta="center">
+        <Inline fz="s" c="text-2">導入スケジュール</Inline>
+        <Heading level="2" class="u--trim" fz="2xl" fw="bold">導入から定着まで、約1か月</Heading>
+        <Text c="text-2">専任の担当者が、初期設定から運用の定着までをサポートします。</Text>
+      </Stack>
+
+      <Grid as="ol" class="c--timeline" gaf="column" hl="s">
+        <Grid as="li" class="c--timeline_item" ai="center" ji="center" ta="center" gtr="subgrid" gr="1/-1" rg="10" data-timeline="start">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="e" gr="1" gc="1/-1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" bgc="text" gr="1" gc="2" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">1週目</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">初期設定</Heading>
+          <Text class="c--timeline_text" fz="s" gr="4" gc="2">アカウントを発行し、チームとプロジェクトの構成を決めます。</Text>
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" ji="center" ta="center" gtr="subgrid" gr="1/-1" rg="10">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1" gc="1/-1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" bgc="text" gr="1" gc="2" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">2週目</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">データ移行</Heading>
+          <Text class="c--timeline_text" fz="s" gr="4" gc="2">既存のタスクや資料をインポートします。移行作業は担当者がお手伝いします。</Text>
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" ji="center" ta="center" gtr="subgrid" gr="1/-1" rg="10">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="center" gr="1" gc="1/-1" />
+          <Decorator class="c--timeline_shape" ar="1/1" bdrs="99" bgc="text" gr="1" gc="2" />
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">3週目</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">操作研修</Heading>
+          <Text class="c--timeline_text" fz="s" gr="4" gc="2">チームごとにオンライン研修を行い、日々の使い方をご案内します。</Text>
+        </Grid>
+        <Grid as="li" class="c--timeline_item" ai="center" ji="center" ta="center" gtr="subgrid" gr="1/-1" rg="10" data-timeline="end">
+          <Decorator class="c--timeline_line" bgc="divider" jslf="s" gr="1" gc="1/-1" />
+          <Center class="c--timeline_shape _hasIcon" pos="relative" z="1" c="base" ar="1/1" bdrs="99" bgc="text" gr="1" gc="2">
+            <Decorator class="c--timeline_highlight" as="span" pos="absolute" z="-1" bgc="inherit" bdrs="99" o="ppp" />
+            <Icon icon={CheckIcon} weight="bold" />
+          </Center>
+          <Text class="c--timeline_time" fz="xs" fw="bold" c="text-2" gr="2" gc="2">1か月後</Text>
+          <Heading level="3" class="c--timeline_title" fz="m" gr="3" gc="2">本格運用</Heading>
+          <Text class="c--timeline_text" fz="s" gr="4" gc="2">実際の使い方を一緒に振り返り、ワークフローの改善をご提案します。</Text>
+        </Grid>
+      </Grid>
+    </Stack>
+  </Container>
+</DemoLayout>
diff --git a/packages/mcp/src/data/docs-index.json b/packages/mcp/src/data/docs-index.json
index a36ff9e17..3a77972d2 100644
--- a/packages/mcp/src/data/docs-index.json
+++ b/packages/mcp/src/data/docs-index.json
@@ -1683,32 +1683,6 @@
     "keywords": ["Banner", "バナー", "example", "hero"],
     "snippet": "バナーの実装例。"
   },
-  {
-    "sourcePath": "ui/components/Steps.mdx",
-    "title": "Steps",
-    "description": "Lism CSS で実装する、手順を示すステップレイアウトの実装例です。",
-    "category": "ui",
-    "headings": ["Examples"],
-    "keywords": ["Steps", "ステップ", "手順", "example"],
-    "snippet": "ステップ（手順）表示の実装例。"
-  },
-  {
-    "sourcePath": "ui/block-examples/Timeline.mdx",
-    "title": "Timeline",
-    "description": "Lism CSS で実装するタイムラインUI（b--timeline）の実装例です。",
-    "category": "ui",
-    "headings": [
-      "Overview",
-      "Styles",
-      "Markup",
-      "Examples",
-      "先頭・末尾の指定とシェイプの強調",
-      "アイコンの表示",
-      "横並び（b--timeline--horizontal）"
-    ],
-    "keywords": ["Timeline", "b--timeline", "タイムライン", "年表", "時系列", "沿革", "history"],
-    "snippet": "出来事を時系列に並べるタイムラインUIの実装例。primitivesと少量のCSS（b--timeline）で構成し、CSSをlism-blockレイヤーへコピーして利用。data-timelineで先頭・末尾を指定でき、b--timeline--horizontalで横並びにできる。"
-  },
   {
     "sourcePath": "ui/components/Breadcrumb.mdx",
     "title": "Breadcrumb",