diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5914ebb..c144328 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -82,28 +82,43 @@ const jsonLd = [
   description={DESC}
   ogImage="/site/ffb300c2-1071-4714-978c-87d386d5dfd3.png" path="/" jsonLd={jsonLd}>
 
-  <!-- 最初の画面（2026-11-08 作り直し）。立ち位置の1文を主役に、いま進めている2つ（導入シミュレーション・研究室）をその証拠として並べる。
+  <!-- 最初の画面（2026-11-08 作り直し・2026-11-13 動画にした）。立ち位置の1文を主役に、いま進めている2つ（導入シミュレーション・研究室）をその証拠として並べる。
        同じ1文をタイトル・説明文・AI 向けの案内（src/lib/llmsGuide.ts）にもそろえている（AI がこのサイトを説明するときの言葉になるため）。
-       前の FV はハコブくんの動画（media の hakobu_fv_voice_eleven.mp4・消さずに残してある） -->
-  <section class="hero-wrap"><div class="hero">
-    <div class="hero-head">
-      <h1>現場で人が受け入れて、<br>使い続けられるロボットを。</h1>
-      <p>そのために、いま2つを進めています。店に入れる前に何が起きるかを確かめることと、ロボットに動きを覚えさせること。前提・結果・コードは、すべて公開しています。</p>
-    </div>
-    <div class="hero-cards">
-      <a class="hcard" href="/series8" data-ev="FV:導入シミュレーション">
-        <img src="/site/series8-service-robot-unity.webp" alt="Unityで建てたファミレスを斜めから見たところ" width="1320" height="880" />
-        <span class="hc-meta"><span><span class="hc-kicker">入れる前に確かめる</span><span class="hc-title">サービスロボット<wbr>導入シミュレーション</span></span><i class="ms" aria-hidden="true">arrow_forward</i></span>
-      </a>
-      <a class="hcard" href="/series6" data-ev="FV:研究室">
-        <img class="hc-arm" src="/site/lab/run-poster.webp" alt="机の上のロボットアームと、赤いブロックと白い箱" width="1200" height="900" />
-        <span class="hc-meta"><span><span class="hc-kicker">動きを覚えさせる</span><span class="hc-title">フィジカルAI研究室</span></span><i class="ms" aria-hidden="true">arrow_forward</i></span>
-      </a>
-    </div>
-  </div></section>
-
-  <!-- このサイトの楽しみ方（AI に読ませて聞く）。何度も来ている人向けに、ヒーローのすぐ下・閉じると1行（2026-11-03） -->
-  <TopAiGuide />
+       背景は保管してきた動画をつないだ早回し（R2 の top_fv_v3*.mp4。シミュレーション約3分の2・アーム約4分の1・サービスの操作画面約1割、分割画面が約3割。本人は映さない。最初と最後は3Dのハコブくん）。
+       つなぎ順と作り方は KIOXIA の videos/FV_トップ動画/README.md・build_v2.py。全体に黒の乗算をかけて文字を読みやすくする。ヘッダーは変えないため、動画はヘッダーの下から始める。
+       タイトルは左寄せのまま縦の真ん中、説明文はその下。「このサイトの楽しみ方」は動画の上、左右の真ん中に半透明で重ねる（2026-11-13 エイイチ）。
+       前の FV は、文字と2枚の写真のカード（git の 2026-11-13 より前）。その前はハコブくんの動画（media の hakobu_fv_voice_eleven.mp4・消さずに残してある） -->
+  <div class="fv-stack">
+    <section class="vfv">
+      <video class="vfv-video" autoplay muted loop playsinline preload="auto"
+        poster={media('/media/top_fv_v3_poster.webp')} aria-hidden="true">
+        <source src={media('/media/top_fv_v3_sp.mp4')} type="video/mp4" media="(max-width: 767px)" />
+        <source src={media('/media/top_fv_v3.mp4')} type="video/mp4" />
+      </video>
+      <div class="vfv-shade" aria-hidden="true"></div>
+      <div class="vfv-inner">
+        <div class="vfv-head">
+          <h1>現場で人が受け入れて、<br>使い続けられるロボットを。</h1>
+          <p class="vfv-desc">「思っていたのと違った」を、入れる前に終わらせる。<br class="br-pc">現場を人ごと再現して、入れたあとの一日を、先に見ておきます。</p>
+        </div>
+        <div class="vfv-cards">
+          <a class="vcard" href="/series8" data-ev="FV:導入シミュレーション">
+            <span><span class="hc-kicker">入れる前に確かめる</span><span class="hc-title">サービスロボット<wbr>導入シミュレーション</span></span><i class="ms" aria-hidden="true">arrow_forward</i>
+          </a>
+          <a class="vcard" href="/series6" data-ev="FV:研究室">
+            <span><span class="hc-kicker">動きを覚えさせる</span><span class="hc-title">フィジカルAI研究室</span></span><i class="ms" aria-hidden="true">arrow_forward</i>
+          </a>
+        </div>
+      </div>
+    </section>
+    <!-- このサイトの楽しみ方（AI に読ませて聞く）。2026-11-03 にヒーローの下に置き、2026-11-13 に動画の上（左右の真ん中・半透明）へ移した -->
+    <div class="guide-band"><TopAiGuide /></div>
+  </div>
+  <script>
+    // 動きを減らす設定のブラウザでは止めて、最初の絵（ハコブくん）だけを見せる
+    const fvVideo = document.querySelector<HTMLVideoElement>('.vfv-video');
+    if (fvVideo && matchMedia('(prefers-reduced-motion: reduce)').matches) { fvVideo.removeAttribute('autoplay'); fvVideo.pause(); }
+  </script>
 
   <!-- 解説動画：YouTube の新着を GitHub の videos.json から読む埋め込み（Studio で使っていたものをそのまま） -->
   <section class="sec"><div class="panel">
@@ -219,22 +234,40 @@ const jsonLd = [
 </Base>
 
 <style>
-  /* 最初の画面：下の節のパネル（.sec の左右 80px＋.panel の 32px）と端をそろえる */
-  .hero-wrap { padding: 0 80px; }
-  .hero { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 112px 32px 48px; display: flex; flex-direction: column; gap: 44px; }
-  .hero-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
-  .hero h1 { margin: 0; font: 900 46px/1.4 'Noto Sans JP', sans-serif; letter-spacing: -0.005em; }
-  .hero-head p { flex: 0 1 440px; margin: 0 0 6px; font: 400 16px/1.85 'Noto Sans JP', sans-serif; color: #333; }
-  .hero-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
-  .hcard { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,.08); color: var(--ink); }
-  .hcard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #eceef2; transition: transform .3s; }
-  .hcard .hc-arm { object-position: center 40%; }
-  .hcard:hover img { transform: scale(1.02); }
-  .hc-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; position: relative; background: #fff; }
-  .hc-meta > span { display: flex; flex-direction: column; gap: 6px; }
-  .hc-kicker { font: 500 13px/1 'Noto Sans JP', sans-serif; color: #666; }
+  /* 最初の画面（動画）。動画はヘッダーの下から画面の高さいっぱい */
+  .fv-stack { position: relative; margin-top: 48px; }
+  .vfv { position: relative; height: calc(100svh - 48px); min-height: 560px; max-height: 960px; overflow: hidden; background: #111; color: #fff; }
+  .vfv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  /* 黒の乗算：動画の色を残したまま全体を暗くする。文字のある左の真ん中と、カードのある下を少し濃く */
+  .vfv-shade { position: absolute; inset: 0; mix-blend-mode: multiply;
+    background: radial-gradient(ellipse 65% 60% at 25% 50%, rgba(0,0,0,.68) 0%, rgba(0,0,0,.5) 100%), linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,.3) 100%); }
+  /* 左右の端は下の節（.sec 80px＋.panel 32px）とそろえる */
+  .vfv-inner { position: relative; height: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 0 112px 56px; display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; }
+  .vfv-head { margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 24px; }
+  .vfv h1 { margin: 0; font: 900 46px/1.4 'Noto Sans JP', sans-serif; letter-spacing: -0.005em; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
+  .vfv-desc { max-width: 720px; margin: 0; font: 400 16px/1.85 'Noto Sans JP', sans-serif; color: rgba(255,255,255,.9); text-wrap: pretty; }
+  .vfv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
+  .vcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-radius: 8px; color: #fff;
+    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s; }
+  .vcard:hover { background: rgba(255,255,255,.2); }
+  .vcard > span { display: flex; flex-direction: column; gap: 6px; }
+  .hc-kicker { font: 500 13px/1 'Noto Sans JP', sans-serif; color: rgba(255,255,255,.75); }
   .hc-title { font: 600 22px/1.3 'Noto Sans JP', sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
-  .hc-meta .ms { font-size: 24px; }
+  .vcard .ms { font-size: 24px; }
+  /* 楽しみ方：動画の上、左右の真ん中に、入口カードと同じすりガラスで重ねる。開いた中身は少し濃くして読めるようにする */
+  .guide-band { position: absolute; z-index: 3; top: 24px; left: 50%; transform: translateX(-50%); width: min(660px, calc(100% - 224px)); }
+  .guide-band :global(.tag-guide) { max-width: none; margin: 0; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
+  .guide-band :global(.tag-guide[open]) { background: rgba(20,20,20,.62); max-height: calc(100svh - 48px - 48px); overflow-y: auto; }
+  .guide-band :global(.tag-guide summary:hover) { background: rgba(255,255,255,.08); }
+  .guide-band :global(.tg-t), .guide-band :global(.tg-msg) { color: rgba(255,255,255,.78); }
+  .guide-band :global(.tg-note) { color: rgba(255,255,255,.6); }
+  .guide-band :global(.tg-n) { background: #fff; color: #111; }
+  .guide-band :global(.tg-q) { background: rgba(255,255,255,.1); color: #fff; }
+  .guide-band :global(.tg-q:hover) { background: rgba(255,255,255,.18); }
+  .guide-band :global(.tg-q[aria-checked="true"]) { background: #fff; color: #111; }
+  .guide-band :global(.tg-ais a), .guide-band :global(.tg-ais button) { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
+  .guide-band :global(.tg-ais a:hover), .guide-band :global(.tg-ais button:hover) { background: #fff; color: #111; }
+  .guide-band :global(.tag-guide:not([open])::after) { mix-blend-mode: normal; opacity: .22; }
   .embed-wide { margin: 0 -16px; } /* 埋め込み側の左右 16px の余白ぶん外へ出し、カードの端をほかの節と揃える */
   .embed-wide iframe, .embed-banner iframe { display: block; width: 100%; border: 0; }
   .embed-banner { max-width: 964px; margin: 48px auto 0; }
@@ -298,22 +331,23 @@ const jsonLd = [
   @media (max-width: 1023px) {
     .ways-cols, .sv-grid { grid-template-columns: 1fr; }
     .way + .way { box-shadow: inset 0 1px 0 #e6e6e6; }
-    .hero-wrap { padding: 0 24px; }
-    .hero { padding: 96px 0 32px; gap: 32px; }
-    .hero-head { flex-direction: column; align-items: flex-start; gap: 20px; }
-    .hero-head p { flex: none; max-width: 640px; }
-    .hero-cards { gap: 20px; }
+    .vfv-inner { padding: 0 24px 40px; gap: 28px; }
+    .vfv-cards { gap: 16px; }
     .hc-title { font-size: 18px; }
+    .guide-band { width: min(660px, calc(100% - 48px)); }
     .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   @media (max-width: 599px) {
-    .hero-wrap { padding: 0 16px; }
-    .hero { padding: 80px 0 24px; gap: 24px; }
-    .hero h1 { font-size: 26px; line-height: 1.5; }
-    .hero-head p { font-size: 15px; line-height: 1.8; }
-    .hero-cards { grid-template-columns: 1fr; gap: 16px; }
-    .hc-meta { padding: 14px 16px; }
+    .vfv { min-height: 600px; }
+    .vfv-video { object-position: 68% center; } /* 縦長の画面では、最初のハコブくんが見える位置に寄せる */
+    .vfv-inner { padding: 0 16px 24px; gap: 20px; }
+    .vfv h1 { font-size: 26px; line-height: 1.5; }
+    .vfv-desc { font-size: 15px; line-height: 1.8; }
+    .br-pc { display: none; }
+    .vfv-cards { grid-template-columns: 1fr; gap: 10px; }
+    .vcard { padding: 14px 16px; }
     .hc-title { font-size: 17px; }
+    .guide-band { top: 16px; width: calc(100% - 32px); }
     .grid2 { grid-template-columns: 1fr; gap: 24px; }
     .grid4 { gap: 16px; }
     .prop { flex-direction: column; align-items: center; gap: 24px; }
