diff --git a/app/globals.css b/app/globals.css
index 3ea409e..047499f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,7 +9,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-noto-sans-jp);
   --font-mono: var(--font-geist-mono);
 }
 
@@ -49,7 +49,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-noto-sans-jp), Arial, Helvetica, sans-serif;
 }
 
 /* フランス語教材セクション（app/learn/french）専用の MDX タイポグラフィ */
@@ -226,32 +226,165 @@ body {
   }
 }
 
-@keyframes vb-scroll-left {
-  from {
-    transform: translateX(0);
+/* 画面幅の中心を頂点とする二次曲線に沿って単語が流れる背景アニメーション。
+下に凸（vb-wave-dip）と上に凸（vb-wave-peak）の2本の弧は交差しない。
+各単語は移動しながら、その位置での弧の接線角度にrotateで合わせている。
+頂点どうしの縦方向の距離は、VOCABOOKの見出し（page.tsxでfontSize: 18.7vw）の
+実際の文字の高さ（インクの上端〜下端、フォントサイズの0.72倍）の2倍になるように
+している。片側の振れ幅はその半分（0.72 * 18.7 * 2 / 2 = 0.72 * 18.7 ≈ 13.464vw）。
+VOCABOOKと同じvw単位で揃えることで、画面の縦横比によらずこの関係が常に成り立つ
+ようにしている。
+（このvw値とbackground.tsxのVERTEX_OFFSET_VWは連動しているため、フォントサイズや
+文字の高さの比率を変えたら両方を再計算すること） */
+@keyframes vb-wave-dip {
+  0% {
+    transform: translate(-50%, -50%) translate(62vw, 0vw) rotate(-14.12deg);
   }
-  to {
-    transform: translateX(-50%);
+  5% {
+    transform: translate(-50%, -50%) translate(55.8vw, 2.56vw) rotate(-12.76deg);
+  }
+  10% {
+    transform: translate(-50%, -50%) translate(49.6vw, 4.85vw) rotate(-11.38deg);
+  }
+  15% {
+    transform: translate(-50%, -50%) translate(43.4vw, 6.87vw) rotate(-9.99deg);
+  }
+  20% {
+    transform: translate(-50%, -50%) translate(37.2vw, 8.62vw) rotate(-8.58deg);
+  }
+  25% {
+    transform: translate(-50%, -50%) translate(31vw, 10.1vw) rotate(-7.17deg);
+  }
+  30% {
+    transform: translate(-50%, -50%) translate(24.8vw, 11.31vw) rotate(-5.75deg);
+  }
+  35% {
+    transform: translate(-50%, -50%) translate(18.6vw, 12.25vw) rotate(-4.32deg);
+  }
+  40% {
+    transform: translate(-50%, -50%) translate(12.4vw, 12.93vw) rotate(-2.88deg);
+  }
+  45% {
+    transform: translate(-50%, -50%) translate(6.2vw, 13.33vw) rotate(-1.44deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) translate(0vw, 13.46vw) rotate(0deg);
+  }
+  55% {
+    transform: translate(-50%, -50%) translate(-6.2vw, 13.33vw) rotate(1.44deg);
+  }
+  60% {
+    transform: translate(-50%, -50%) translate(-12.4vw, 12.93vw) rotate(2.88deg);
+  }
+  65% {
+    transform: translate(-50%, -50%) translate(-18.6vw, 12.25vw) rotate(4.32deg);
+  }
+  70% {
+    transform: translate(-50%, -50%) translate(-24.8vw, 11.31vw) rotate(5.75deg);
+  }
+  75% {
+    transform: translate(-50%, -50%) translate(-31vw, 10.1vw) rotate(7.17deg);
+  }
+  80% {
+    transform: translate(-50%, -50%) translate(-37.2vw, 8.62vw) rotate(8.58deg);
+  }
+  85% {
+    transform: translate(-50%, -50%) translate(-43.4vw, 6.87vw) rotate(9.99deg);
+  }
+  90% {
+    transform: translate(-50%, -50%) translate(-49.6vw, 4.85vw) rotate(11.38deg);
+  }
+  95% {
+    transform: translate(-50%, -50%) translate(-55.8vw, 2.56vw) rotate(12.76deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) translate(-62vw, 0vw) rotate(14.12deg);
+  }
+}
+
+@keyframes vb-wave-peak {
+  0% {
+    transform: translate(-50%, -50%) translate(62vw, 0vw) rotate(14.12deg);
+  }
+  5% {
+    transform: translate(-50%, -50%) translate(55.8vw, -2.56vw) rotate(12.76deg);
+  }
+  10% {
+    transform: translate(-50%, -50%) translate(49.6vw, -4.85vw) rotate(11.38deg);
+  }
+  15% {
+    transform: translate(-50%, -50%) translate(43.4vw, -6.87vw) rotate(9.99deg);
+  }
+  20% {
+    transform: translate(-50%, -50%) translate(37.2vw, -8.62vw) rotate(8.58deg);
+  }
+  25% {
+    transform: translate(-50%, -50%) translate(31vw, -10.1vw) rotate(7.17deg);
+  }
+  30% {
+    transform: translate(-50%, -50%) translate(24.8vw, -11.31vw) rotate(5.75deg);
+  }
+  35% {
+    transform: translate(-50%, -50%) translate(18.6vw, -12.25vw) rotate(4.32deg);
+  }
+  40% {
+    transform: translate(-50%, -50%) translate(12.4vw, -12.93vw) rotate(2.88deg);
+  }
+  45% {
+    transform: translate(-50%, -50%) translate(6.2vw, -13.33vw) rotate(1.44deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) translate(0vw, -13.46vw) rotate(0deg);
+  }
+  55% {
+    transform: translate(-50%, -50%) translate(-6.2vw, -13.33vw) rotate(-1.44deg);
+  }
+  60% {
+    transform: translate(-50%, -50%) translate(-12.4vw, -12.93vw) rotate(-2.88deg);
+  }
+  65% {
+    transform: translate(-50%, -50%) translate(-18.6vw, -12.25vw) rotate(-4.32deg);
+  }
+  70% {
+    transform: translate(-50%, -50%) translate(-24.8vw, -11.31vw) rotate(-5.75deg);
+  }
+  75% {
+    transform: translate(-50%, -50%) translate(-31vw, -10.1vw) rotate(-7.17deg);
+  }
+  80% {
+    transform: translate(-50%, -50%) translate(-37.2vw, -8.62vw) rotate(-8.58deg);
+  }
+  85% {
+    transform: translate(-50%, -50%) translate(-43.4vw, -6.87vw) rotate(-9.99deg);
+  }
+  90% {
+    transform: translate(-50%, -50%) translate(-49.6vw, -4.85vw) rotate(-11.38deg);
+  }
+  95% {
+    transform: translate(-50%, -50%) translate(-55.8vw, -2.56vw) rotate(-12.76deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) translate(-62vw, 0vw) rotate(-14.12deg);
   }
 }
 
-.vb-flow-row {
-  animation-name: vb-scroll-left;
+.vb-wave-item {
+  position: absolute;
+  left: 50%;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }
 
-.vb-flow-row--fg {
-  animation-duration: 30s;
+.vb-wave-item--dip {
+  animation-name: vb-wave-dip;
 }
 
-.vb-flow-row--bg {
-  animation-duration: 36s;
-  animation-direction: reverse;
+.vb-wave-item--peak {
+  animation-name: vb-wave-peak;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .vb-flow-row {
+  .vb-wave-item {
     animation: none;
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 5fdff47..d3d7163 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist_Mono, Noto_Sans_JP } from "next/font/google";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import Sidebar from "@/components/Sidebar";
@@ -7,9 +7,10 @@ import { getAllLanguageSections } from "@/app/learn/content";
 import { LANGUAGES } from "@/app/learn/languages";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const notoSansJP = Noto_Sans_JP({
+  variable: "--font-noto-sans-jp",
   subsets: ["latin"],
+  weight: "variable",
 });
 
 const geistMono = Geist_Mono({
@@ -32,7 +33,7 @@ export default async function RootLayout({
   const allSections = await getAllLanguageSections(LANGUAGES.map((l) => l.languageSlug));
 
   return (
-    <html lang="ja" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
+    <html lang="ja" className={`${notoSansJP.variable} ${geistMono.variable} h-full antialiased`}>
       <body className="min-h-full flex flex-col">
         <Header />
         <div className="flex flex-1 flex-col md:flex-row">
diff --git a/app/learn/page.tsx b/app/learn/page.tsx
index 1ee298a..0659b40 100644
--- a/app/learn/page.tsx
+++ b/app/learn/page.tsx
@@ -27,7 +27,7 @@ export default async function LearnPage() {
             <Link
               key={language.languageSlug}
               href={`/learn/${language.languageSlug}`}
-              className="group flex items-center justify-between rounded-2xl border border-black/[.08] bg-white p-6 transition-all hover:border-tealblue-400/60 hover:shadow-sm dark:border-white/[.145] dark:bg-zinc-950 dark:hover:border-tealblue-600/60"
+              className="group flex items-center justify-between rounded-2xl border border-tealblue-200 bg-white p-6 transition-all hover:-translate-y-1 hover:border-tealblue-300 hover:shadow-xl hover:shadow-tealblue-100 dark:border-tealblue-900/40 dark:bg-zinc-950 dark:hover:border-tealblue-700/60 dark:hover:shadow-none"
             >
               <div className="flex flex-col gap-1 text-left">
                 <span className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
diff --git a/app/my-notebooks/[notebookId]/CardRow.tsx b/app/my-notebooks/[notebookId]/CardRow.tsx
index 034fdbc..a816229 100644
--- a/app/my-notebooks/[notebookId]/CardRow.tsx
+++ b/app/my-notebooks/[notebookId]/CardRow.tsx
@@ -19,7 +19,7 @@ function SaveButton() {
     <button
       type="submit"
       disabled={pending}
-      className="rounded-full bg-black px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200"
+      className="rounded-full bg-coral-500 px-3 py-1 text-xs font-medium text-white transition-all hover:-translate-y-0.5 hover:bg-coral-600 hover:shadow-lg hover:shadow-coral-200 disabled:opacity-50 dark:hover:shadow-none"
     >
       {pending ? "保存中…" : "保存"}
     </button>
@@ -204,7 +204,7 @@ export default function CardRow({
             <button
               type="button"
               onClick={() => setEditing(false)}
-              className="text-sm text-zinc-500 transition-colors hover:underline dark:text-zinc-500"
+              className="text-sm text-coral-600 transition-all hover:-translate-y-0.5 hover:text-coral-800 hover:underline dark:text-coral-400 dark:hover:text-coral-200"
             >
               キャンセル
             </button>
diff --git a/app/my-notebooks/[notebookId]/CreateCardForm.tsx b/app/my-notebooks/[notebookId]/CreateCardForm.tsx
index e7b22b8..91078b2 100644
--- a/app/my-notebooks/[notebookId]/CreateCardForm.tsx
+++ b/app/my-notebooks/[notebookId]/CreateCardForm.tsx
@@ -14,7 +14,7 @@ function AddButton() {
     <button
       type="submit"
       disabled={pending}
-      className="rounded-full bg-black px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200"
+      className="rounded-full bg-coral-500 px-4 py-1.5 text-sm font-medium text-white transition-all hover:-translate-y-0.5 hover:bg-coral-600 hover:shadow-lg hover:shadow-coral-200 disabled:opacity-50 dark:hover:shadow-none"
     >
       {pending ? "追加中…" : "追加"}
     </button>
diff --git a/app/my-notebooks/[notebookId]/page.tsx b/app/my-notebooks/[notebookId]/page.tsx
index d3e9873..483164f 100644
--- a/app/my-notebooks/[notebookId]/page.tsx
+++ b/app/my-notebooks/[notebookId]/page.tsx
@@ -64,14 +64,14 @@ export default async function NotebookPage(props: PageProps<"/my-notebooks/[note
               {starredCount > 0 && (
                 <Link
                   href={`/my-notebooks/${notebook.id}/review`}
-                  className="rounded-full border border-amber-400 px-5 py-2 text-sm font-medium text-amber-600 transition-colors hover:bg-amber-50 dark:border-amber-400/60 dark:text-amber-400 dark:hover:bg-amber-400/10"
+                  className="rounded-full border border-coral-300 px-5 py-2 text-sm font-medium text-coral-700 transition-all hover:-translate-y-0.5 hover:border-coral-500 hover:bg-coral-50 hover:text-coral-800 hover:shadow-md hover:shadow-coral-100 dark:border-coral-900/50 dark:text-coral-300 dark:hover:border-coral-600 dark:hover:bg-coral-950/20 dark:hover:text-coral-200 dark:hover:shadow-none"
                 >
                   ★を復習する（{starredCount}語）
                 </Link>
               )}
               <Link
                 href={`/my-notebooks/${notebook.id}/study`}
-                className="rounded-full bg-black px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200"
+                className="rounded-full bg-coral-500 px-5 py-2 text-sm font-medium text-white transition-all hover:-translate-y-0.5 hover:bg-coral-600 hover:shadow-lg hover:shadow-coral-200 dark:hover:shadow-none"
               >
                 暗記学習を始める
               </Link>
diff --git a/app/my-notebooks/[notebookId]/study/StudyDeck.tsx b/app/my-notebooks/[notebookId]/study/StudyDeck.tsx
index 59afe17..2502bac 100644
--- a/app/my-notebooks/[notebookId]/study/StudyDeck.tsx
+++ b/app/my-notebooks/[notebookId]/study/StudyDeck.tsx
@@ -153,7 +153,7 @@ export default function StudyDeck({
         >
           {columns.map((col) => (
             <option key={col} value={col}>
-              表: {col}
+              おもて: {col}
             </option>
           ))}
         </select>
@@ -285,7 +285,7 @@ export default function StudyDeck({
         <button
           type="button"
           onClick={shuffle}
-          className="rounded-full border border-black/[.08] px-4 py-2 text-sm transition-colors hover:border-black/[.15] dark:border-white/[.145] dark:hover:border-white/[.25]"
+          className="rounded-full border border-coral-300 px-4 py-2 text-sm text-coral-700 transition-colors hover:border-coral-500 hover:text-coral-800 dark:border-coral-900/50 dark:text-coral-300 dark:hover:border-coral-600 dark:hover:text-coral-200"
         >
           シャッフル
         </button>
@@ -293,7 +293,7 @@ export default function StudyDeck({
           type="button"
           onClick={goNext}
           disabled={index === order.length - 1}
-          className="rounded-full bg-black px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-40 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200"
+          className="rounded-full bg-coral-500 px-4 py-2 text-sm font-medium text-white transition-all hover:-translate-y-0.5 hover:bg-coral-600 hover:shadow-lg hover:shadow-coral-200 disabled:opacity-40 dark:hover:shadow-none"
         >
           次へ
         </button>
diff --git a/app/my-notebooks/page.tsx b/app/my-notebooks/page.tsx
index 3e6eea0..c17d7c5 100644
--- a/app/my-notebooks/page.tsx
+++ b/app/my-notebooks/page.tsx
@@ -55,7 +55,7 @@ export default async function MyNotebooksPage() {
             {notebooks.map((notebook) => (
               <li
                 key={notebook.id}
-                className="flex items-center justify-between gap-4 rounded-2xl border border-black/[.08] bg-white p-5 transition-colors hover:border-black/[.15] dark:border-white/[.145] dark:bg-zinc-950 dark:hover:border-white/[.25]"
+                className="flex items-center justify-between gap-4 rounded-2xl border border-coral-200 bg-white p-5 transition-all hover:-translate-y-1 hover:border-coral-300 hover:shadow-xl hover:shadow-coral-100 dark:border-coral-900/40 dark:bg-zinc-950 dark:hover:border-coral-700/60 dark:hover:shadow-none"
               >
                 <Link href={`/my-notebooks/${notebook.id}`} className="flex-1 text-left">
                   <p className="font-medium text-black dark:text-zinc-50">{notebook.title}</p>
diff --git a/app/page.tsx b/app/page.tsx
index 8b06d73..dc00639 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,24 @@
 import Link from "next/link";
+import { Bebas_Neue, Shippori_Mincho } from "next/font/google";
 
 import Background from "@/components/background";
+import BookShape from "@/components/book-shape";
+import { MaterialsPreview } from "@/components/home/MaterialsPreview";
+import { StudyModePreview } from "@/components/home/StudyModePreview";
+
+// トップページのメインコピー「Vocabook」専用の見出しフォント（映画ポスター風の存在感を演出）
+const bebasNeue = Bebas_Neue({
+  variable: "--font-bebas-neue",
+  subsets: ["latin"],
+  weight: "400",
+});
+
+// キャッチコピー専用の明朝体（洋画の邦題コピーのような、字間の空いた上品な佇まいを演出）
+const shipporiMincho = Shippori_Mincho({
+  variable: "--font-shippori-mincho",
+  subsets: ["latin"],
+  weight: "500",
+});
 
 // ルートページ
 export default function Home() {
@@ -8,16 +26,33 @@ export default function Home() {
     <main className="flex flex-1 flex-col items-center bg-zinc-50 dark:bg-black">
       <section className="relative flex w-full flex-col items-center overflow-hidden px-6 py-24 text-center">
         <Background />
-        <div className="relative z-10 flex w-full max-w-3xl flex-col items-center gap-6">
-          <span className="inline-flex items-center gap-3 text-xs font-semibold tracking-[0.2em] text-zinc-500 dark:text-zinc-500">
+        <div className="relative z-10 flex max-w-3xl flex-col items-center gap-6">
+          <span
+            className={`${shipporiMincho.variable} inline-flex items-center gap-3 text-xs tracking-[0.3em] text-zinc-500 [font-family:var(--font-shippori-mincho)] dark:text-zinc-500`}
+          >
             <span className="h-px w-6 bg-zinc-300 dark:bg-zinc-700" />
             多言語対応 語学暗記アプリ
             <span className="h-px w-6 bg-zinc-300 dark:bg-zinc-700" />
           </span>
-          <h1 className="text-4xl font-semibold tracking-tight text-black sm:text-6xl dark:text-zinc-50">
-            Vocabook
-          </h1>
-          <p className="max-w-xl text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+          {/* 本の形はここ（h1のラッパー）にぶら下げることで、VOCABOOKの実際の文字幅（vw指定で
+          可変）に常に追従する。外側のdivに置くとmax-w-3xlで幅が頭打ちになり、
+          VOCABOOKの方が広い画面ではみ出してズレていた */}
+          <div className="relative">
+            <BookShape />
+            <h1
+              className={`${bebasNeue.variable} relative tracking-[0.06em] text-black [font-family:var(--font-bebas-neue)] dark:text-zinc-50`}
+              style={{ textShadow: "0 2px 24px rgba(0,0,0,0.12)", fontSize: "18.7vw" }}
+            >
+              Vocabook
+            </h1>
+          </div>
+          <p
+            className={`${shipporiMincho.variable} max-w-xl text-lg leading-9 tracking-[0.15em] text-zinc-600 [font-family:var(--font-shippori-mincho)] dark:text-zinc-400`}
+            // VOCABOOKの見出し(h1)はBebas Neueのディセンダー分の余白が下に大きく、
+            // gap-6だけだと文字の見た目より間隔が広く見えるため、フォントサイズ(18.7vw)に
+            // 比例させて少し引き上げて詰めている
+            style={{ marginTop: "calc(-5.2vw)" }}
+          >
             自分だけの多次元単語帳を作って共有できる、
             <br />
             多言語対応の語学暗記アプリ。
@@ -26,31 +61,14 @@ export default function Home() {
       </section>
 
       <section className="grid w-full max-w-5xl grid-cols-1 gap-8 px-6 pb-28 sm:grid-cols-2">
-        <Link
-          href="/my-notebooks"
-          className="group flex flex-col gap-6 rounded-3xl border border-coral-200 bg-white p-8 text-left transition-all hover:-translate-y-1 hover:border-coral-300 hover:shadow-xl hover:shadow-coral-100 sm:p-9 dark:border-coral-900/40 dark:bg-zinc-950 dark:hover:border-coral-700/60 dark:hover:shadow-none"
-        >
-          <div className="relative overflow-hidden rounded-2xl border border-coral-200/70 bg-coral-50/40 p-5 dark:border-coral-900/30 dark:bg-coral-950/10">
-            <span className="absolute right-3 top-3 rounded-full border border-dashed border-coral-300 px-2 py-0.5 text-[10px] text-coral-700/70 dark:border-coral-800 dark:text-coral-500/70">
-              仮画像
-            </span>
-            <p className="text-[11px] tracking-wide text-zinc-400">FR → JA</p>
-            <p className="mt-1 text-lg font-semibold text-zinc-900 dark:text-zinc-50">liberté</p>
-            <div className="mt-3 flex gap-1.5">
-              <span className="rounded-full bg-coral-500 px-2.5 py-1 text-[11px] font-semibold text-white">
-                意味
-              </span>
-              <span className="rounded-full bg-white px-2.5 py-1 text-[11px] text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">
-                発音
-              </span>
-              <span className="rounded-full bg-white px-2.5 py-1 text-[11px] text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">
-                例文
-              </span>
-            </div>
-            <p className="mt-3 text-sm text-zinc-600 dark:text-zinc-400">自由</p>
-          </div>
+        <div className="group relative flex flex-col gap-6 rounded-3xl border border-coral-200 bg-white p-8 text-left transition-all hover:-translate-y-1 hover:border-coral-300 hover:shadow-xl hover:shadow-coral-100 sm:p-9 dark:border-coral-900/40 dark:bg-zinc-950 dark:hover:border-coral-700/60 dark:hover:shadow-none">
+          <Link
+            href="/my-notebooks"
+            className="absolute inset-0 z-0 rounded-3xl"
+            aria-label="単語帳を作ってみる"
+          />
 
-          <div>
+          <div className="pointer-events-none relative z-10">
             <h2 className="text-2xl font-bold text-coral-900 dark:text-coral-100">My単語帳</h2>
             <p className="mt-2 text-sm leading-6 text-zinc-600 dark:text-zinc-400">
               意味・発音・例文など複数の軸を持つ、自分だけの単語帳を作成。
@@ -59,7 +77,7 @@ export default function Home() {
             </p>
           </div>
 
-          <span className="inline-flex w-fit items-center gap-2 rounded-full bg-coral-500 px-6 py-3 text-sm font-bold text-white transition-colors group-hover:bg-coral-600">
+          <span className="pointer-events-none relative z-10 inline-flex w-fit items-center gap-2 rounded-full bg-coral-500 px-6 py-3 text-sm font-bold text-white transition-colors group-hover:bg-coral-600">
             単語帳を作ってみる
             <span className="vb-arrow-window" aria-hidden="true">
               <span className="vb-arrow-track">
@@ -102,34 +120,18 @@ export default function Home() {
               </span>
             </span>
           </span>
-        </Link>
 
-        <Link
-          href="/learn"
-          className="group flex flex-col gap-6 rounded-3xl border border-tealblue-200 bg-white p-8 text-left transition-all hover:-translate-y-1 hover:border-tealblue-300 hover:shadow-xl hover:shadow-tealblue-100 sm:p-9 dark:border-tealblue-900/40 dark:bg-zinc-950 dark:hover:border-tealblue-700/60 dark:hover:shadow-none"
-        >
-          <div className="relative overflow-hidden rounded-2xl border border-tealblue-200/70 bg-tealblue-50/40 p-5 dark:border-tealblue-900/30 dark:bg-tealblue-950/10">
-            <span className="absolute right-3 top-3 rounded-full border border-dashed border-tealblue-300 px-2 py-0.5 text-[10px] text-tealblue-700/70 dark:border-tealblue-800 dark:text-tealblue-400/70">
-              仮画像
-            </span>
-            <p className="text-[11px] tracking-wide text-zinc-400">対応言語</p>
-            <div className="mt-3 grid grid-cols-2 gap-2">
-              <span className="rounded-xl border border-black/[.08] bg-white px-3 py-2 text-center text-xs font-medium text-zinc-700 dark:border-white/[.145] dark:bg-zinc-900 dark:text-zinc-300">
-                中国語
-              </span>
-              <span className="rounded-xl border border-black/[.08] bg-white px-3 py-2 text-center text-xs font-medium text-zinc-700 dark:border-white/[.145] dark:bg-zinc-900 dark:text-zinc-300">
-                フランス語
-              </span>
-              <span className="rounded-xl border border-black/[.08] bg-white px-3 py-2 text-center text-xs font-medium text-zinc-700 dark:border-white/[.145] dark:bg-zinc-900 dark:text-zinc-300">
-                ドイツ語
-              </span>
-              <span className="rounded-xl border border-black/[.08] bg-white px-3 py-2 text-center text-xs font-medium text-zinc-700 dark:border-white/[.145] dark:bg-zinc-900 dark:text-zinc-300">
-                スペイン語
-              </span>
-            </div>
-          </div>
+          <StudyModePreview />
+        </div>
+
+        <div className="group relative flex flex-col gap-6 rounded-3xl border border-tealblue-200 bg-white p-8 text-left transition-all hover:-translate-y-1 hover:border-tealblue-300 hover:shadow-xl hover:shadow-tealblue-100 sm:p-9 dark:border-tealblue-900/40 dark:bg-zinc-950 dark:hover:border-tealblue-700/60 dark:hover:shadow-none">
+          <Link
+            href="/learn"
+            className="absolute inset-0 z-0 rounded-3xl"
+            aria-label="学習教材を見てみる"
+          />
 
-          <div>
+          <div className="pointer-events-none relative z-10">
             <h2 className="text-2xl font-bold text-tealblue-900 dark:text-tealblue-100">
               学習教材
             </h2>
@@ -140,7 +142,7 @@ export default function Home() {
             </p>
           </div>
 
-          <span className="inline-flex w-fit items-center gap-2 rounded-full bg-tealblue-600 px-6 py-3 text-sm font-bold text-white transition-colors group-hover:bg-tealblue-700">
+          <span className="pointer-events-none relative z-10 inline-flex w-fit items-center gap-2 rounded-full bg-tealblue-600 px-6 py-3 text-sm font-bold text-white transition-colors group-hover:bg-tealblue-700">
             教材を見てみる
             <span className="vb-arrow-window" aria-hidden="true">
               <span className="vb-arrow-track">
@@ -183,7 +185,9 @@ export default function Home() {
               </span>
             </span>
           </span>
-        </Link>
+
+          <MaterialsPreview />
+        </div>
       </section>
     </main>
   );
diff --git a/components/Footer.tsx b/components/Footer.tsx
index a7b7086..3ed6589 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,5 +1,6 @@
 //花沢
 import Link from "next/link";
+import { Bebas_Neue } from "next/font/google";
 
 const NAV_LINKS = [
   { href: "https://forms.gle/HnspDy2kNqQxPCWA8", label: "ご意見" },
@@ -7,25 +8,37 @@ const NAV_LINKS = [
   { href: "https://x.com/utokyo_code", label: "公式X" },
 ];
 
+// フッターの「Vocabook」をヘッダーロゴと統一する見出しフォント
+const bebasNeue = Bebas_Neue({
+  variable: "--font-bebas-neue",
+  subsets: ["latin"],
+  weight: "400",
+});
+
 export default function Footer() {
   return (
     <footer className="border-t border-black/[.08] bg-zinc-300 dark:border-white/[.145] dark:bg-zinc-600">
       <div className="px-[5%] pt-4 pb-1.5">
         <div className="flex flex-col gap-0.5">
-          <nav className="flex flex-wrap justify-end gap-8 text-2xl font-medium text-zinc-600 dark:text-zinc-100">
+          <nav className="flex flex-wrap justify-end gap-8 text-2xl font-semibold tracking-[0.04em] text-zinc-600 dark:text-zinc-100">
             {NAV_LINKS.map((link) => (
               <Link
                 key={link.href}
                 href={link.href}
-                className="transition-colors hover:text-emerald-500 dark:hover:text-emerald-500"
+                className="inline-block transition-transform duration-300 ease-out hover:scale-110 hover:[text-shadow:0_2px_3px_rgba(39,39,42,0.55)] dark:hover:[text-shadow:0_2px_3px_rgba(228,228,231,0.45)]"
               >
                 {link.label}
               </Link>
             ))}
           </nav>
 
-          <div className="flex justify-center text-xl text-zinc-400 dark:text-zinc-400">
-            <span>© {new Date().getFullYear()} Vocabook</span>
+          <div className="flex items-baseline justify-center gap-1.5 text-xl tracking-wide text-zinc-400 dark:text-zinc-400">
+            <span>© {new Date().getFullYear()}</span>
+            <span
+              className={`${bebasNeue.variable} leading-none tracking-[0.06em] [font-family:var(--font-bebas-neue)]`}
+            >
+              Vocabook
+            </span>
           </div>
         </div>
       </div>
diff --git a/components/Header.tsx b/components/Header.tsx
index 6630612..796095c 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,18 +1,34 @@
 import { Suspense } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { Bebas_Neue } from "next/font/google";
 
 import HeaderAuthStatus from "@/components/HeaderAuthStatus";
 
+// ヘッダーロゴ「Vocabook」専用の見出しフォント（トップページの見出しと統一感を出す）
+const bebasNeue = Bebas_Neue({
+  variable: "--font-bebas-neue",
+  subsets: ["latin"],
+  weight: "400",
+});
+
 const NAV_LINKS = [
-  { href: "/my-notebooks", label: "My単語帳" },
-  { href: "/learn", label: "学習教材" },
+  {
+    href: "/my-notebooks",
+    label: "My単語帳",
+    hoverClassName: "hover:text-[#FF7F50] dark:hover:text-[#FF7F50]",
+  },
+  {
+    href: "/learn",
+    label: "学習教材",
+    hoverClassName: "hover:text-[#1E9A9C] dark:hover:text-[#6FD1D1]",
+  },
 ];
 
 export default function Header() {
   return (
     <header className="sticky top-0 z-50 bg-white/5 dark:bg-zinc-600/80 backdrop-blur-md border-b border-black/[.08] dark:border-white/[.145]">
-      <div className="mx-auto flex w-full items-center justify-between px-6 py-4">
+      <div className="mx-auto flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2 px-6 py-4">
         <Link href="/" className="flex item-center gap-3">
           <Image
             src="/logo-dummy.png"
@@ -21,17 +37,19 @@ export default function Header() {
             height={32}
             className="h-10 w-auto object-contain"
           />
-          <span className="text-3xl font-semibold tracking-tight self-center hover:text-emerald-500 dark:hover:text-emerald-500">
+          <span
+            className={`${bebasNeue.variable} inline-block text-[clamp(1.2rem,4.5vw,2.125rem)] tracking-[0.06em] self-center transition-transform duration-300 ease-out [font-family:var(--font-bebas-neue)] hover:scale-110 hover:[text-shadow:0_2px_3px_rgba(39,39,42,0.55)] dark:hover:[text-shadow:0_2px_3px_rgba(228,228,231,0.45)]`}
+          >
             Vocabook
           </span>
         </Link>
-        <div className="flex items-center gap-6">
-          <nav className="flex gap-6 text-lg font-medium text-zinc-600 dark:text-zinc-200">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+          <nav className="flex flex-wrap gap-x-4 gap-y-2 text-[clamp(1rem,2.2vw,1.125rem)] font-semibold tracking-[0.04em] text-zinc-600 dark:text-zinc-200">
             {NAV_LINKS.map((link) => (
               <Link
                 key={link.href}
                 href={link.href}
-                className="transition-colors hover:text-emerald-500 dark:hover:text-emerald-500"
+                className={`whitespace-nowrap transition-colors ${link.hoverClassName}`}
               >
                 {link.label}
               </Link>
diff --git a/components/HeaderAuthStatus.tsx b/components/HeaderAuthStatus.tsx
index 15762f1..0857128 100644
--- a/components/HeaderAuthStatus.tsx
+++ b/components/HeaderAuthStatus.tsx
@@ -10,7 +10,7 @@ export default async function HeaderAuthStatus() {
   if (user) {
     return (
       <div className="flex items-center gap-3">
-        <span className="hidden text-sm text-zinc-500 dark:text-zinc-400 sm:inline">
+        <span className="hidden text-base text-zinc-500 dark:text-zinc-400 sm:inline">
           {user.name}
         </span>
         <LogoutButton />
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 0102e58..5dcc904 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -126,8 +126,8 @@ export default function Sidebar({ allSections = {} }: SidebarProps) {
               onClick={() => setIsMyNotebooksOpen((prev) => !prev)}
               className={`flex-1 rounded-lg px-3 py-2 text-sm font-semibold transition-colors ${
                 isMyNotebooksActive
-                  ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400"
-                  : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900"
+                  ? "bg-[#FF7F50]/10 text-[#FF7F50] dark:bg-[#FF7F50]/20 dark:text-[#FF7F50]"
+                  : "text-zinc-700 hover:bg-zinc-100 hover:text-[#FF7F50] dark:text-zinc-300 dark:hover:bg-zinc-900 dark:hover:text-[#FF7F50]"
               }`}
             >
               My単語帳
@@ -165,8 +165,8 @@ export default function Sidebar({ allSections = {} }: SidebarProps) {
               onClick={() => setIsLearnOpen((prev) => !prev)}
               className={`flex-1 rounded-lg px-3 py-2 text-sm font-semibold transition-colors ${
                 isLearnActive && !currentLanguageSlug
-                  ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400"
-                  : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900"
+                  ? "bg-[#367588]/10 text-[#367588] dark:bg-[#367588]/20 dark:text-[#367588]"
+                  : "text-zinc-700 hover:bg-zinc-100 hover:text-[#367588] dark:text-zinc-300 dark:hover:bg-zinc-900 dark:hover:text-[#367588]"
               }`}
             >
               学習教材
@@ -216,7 +216,7 @@ export default function Sidebar({ allSections = {} }: SidebarProps) {
                         className={`flex-1 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
                           isLangActive && !currentSectionSlug
                             ? "bg-zinc-200/70 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100 font-semibold"
-                            : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-200"
+                            : "text-zinc-600 hover:bg-zinc-100 hover:text-[#367588] dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-[#367588]"
                         }`}
                       >
                         {lang.label}
@@ -261,8 +261,8 @@ export default function Sidebar({ allSections = {} }: SidebarProps) {
                               href={`/learn/${lang.languageSlug}/${section.sectionSlug}`}
                               className={`rounded-md px-2.5 py-1 text-xs transition-colors ${
                                 isSectionActive
-                                  ? "bg-emerald-100 text-emerald-800 font-semibold dark:bg-emerald-900/60 dark:text-emerald-300"
-                                  : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-200"
+                                  ? "bg-[#367588]/10 text-[#367588] font-semibold dark:bg-[#367588]/20 dark:text-[#367588]"
+                                  : "text-zinc-500 hover:bg-zinc-100 hover:text-[#367588] dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-[#367588]"
                               }`}
                             >
                               {section.title}
diff --git a/components/StarColorSettings.tsx b/components/StarColorSettings.tsx
index 89e31b7..34635c7 100644
--- a/components/StarColorSettings.tsx
+++ b/components/StarColorSettings.tsx
@@ -17,7 +17,7 @@ export default function StarColorSettings() {
         type="button"
         onClick={() => setOpen((o) => !o)}
         aria-expanded={open}
-        className="rounded-full border border-black/[.08] px-3 py-1.5 text-sm text-zinc-600 transition-colors hover:border-black/[.15] dark:border-white/[.145] dark:text-zinc-300 dark:hover:border-white/[.25]"
+        className="rounded-full border border-coral-300 px-3 py-1.5 text-sm text-coral-700 transition-all hover:-translate-y-0.5 hover:border-coral-500 hover:bg-coral-50 hover:text-coral-800 hover:shadow-md hover:shadow-coral-100 dark:border-coral-900/50 dark:text-coral-300 dark:hover:border-coral-600 dark:hover:bg-coral-950/20 dark:hover:text-coral-200 dark:hover:shadow-none"
       >
         ★の色
       </button>
@@ -55,7 +55,7 @@ export default function StarColorSettings() {
             <button
               type="button"
               onClick={resetColors}
-              className="mt-4 text-xs text-zinc-500 transition-colors hover:underline dark:text-zinc-500"
+              className="mt-4 text-xs text-coral-600 transition-all hover:-translate-y-0.5 hover:text-coral-800 hover:underline dark:text-coral-400 dark:hover:text-coral-200"
             >
               初期設定に戻す
             </button>
diff --git a/components/StarCountEditor.tsx b/components/StarCountEditor.tsx
index 73689a6..8e2a650 100644
--- a/components/StarCountEditor.tsx
+++ b/components/StarCountEditor.tsx
@@ -60,7 +60,7 @@ export default function StarCountEditor({
               />
               <button
                 type="submit"
-                className="rounded-full bg-black px-2.5 py-1 text-xs font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200"
+                className="rounded-full bg-coral-500 px-2.5 py-1 text-xs font-medium text-white transition-all hover:-translate-y-0.5 hover:bg-coral-600 hover:shadow-lg hover:shadow-coral-200 dark:hover:shadow-none"
               >
                 保存
               </button>
@@ -72,7 +72,7 @@ export default function StarCountEditor({
             >
               <button
                 type="submit"
-                className="text-xs text-zinc-500 transition-colors hover:underline dark:text-zinc-500"
+                className="text-xs text-coral-600 transition-all hover:-translate-y-0.5 hover:text-coral-800 hover:underline dark:text-coral-400 dark:hover:text-coral-200"
               >
                 0にリセット
               </button>
diff --git a/components/auth/AuthNavLinks.tsx b/components/auth/AuthNavLinks.tsx
index c9dd204..6fb1c1e 100644
--- a/components/auth/AuthNavLinks.tsx
+++ b/components/auth/AuthNavLinks.tsx
@@ -13,13 +13,13 @@ export default function AuthNavLinks() {
     <div className="flex items-center gap-3">
       <Link
         href={`/login?${redirectQuery}`}
-        className="text-sm font-medium text-zinc-600 transition-colors hover:text-emerald-500 dark:text-zinc-200 dark:hover:text-emerald-500"
+        className="whitespace-nowrap text-base font-medium text-zinc-600 transition-colors hover:text-[#eaa64d] dark:text-zinc-200 dark:hover:text-[#eaa64d]"
       >
         ログイン
       </Link>
       <Link
         href={`/signup?${redirectQuery}`}
-        className="rounded-full bg-black px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200"
+        className="whitespace-nowrap rounded-full bg-black px-4 py-1.5 text-base font-medium text-white transition-colors hover:bg-[#eaa64d] dark:bg-zinc-50 dark:text-black dark:hover:bg-[#eaa64d]"
       >
         新規登録
       </Link>
diff --git a/components/auth/LoginForm.tsx b/components/auth/LoginForm.tsx
index 752f76a..423a56d 100644
--- a/components/auth/LoginForm.tsx
+++ b/components/auth/LoginForm.tsx
@@ -83,7 +83,7 @@ export default function LoginForm() {
 
       <p className="text-center text-sm text-zinc-500 dark:text-zinc-500">
         アカウントをお持ちでない場合は{" "}
-        <Link href="/signup" className="text-emerald-600 hover:underline dark:text-emerald-400">
+        <Link href="/signup" className="text-[#FF7F50] hover:underline dark:text-[#FF7F50]">
           新規登録
         </Link>
       </p>
diff --git a/components/auth/LogoutButton.tsx b/components/auth/LogoutButton.tsx
index bcde165..14a6f51 100644
--- a/components/auth/LogoutButton.tsx
+++ b/components/auth/LogoutButton.tsx
@@ -20,7 +20,7 @@ export default function LogoutButton() {
     <button
       onClick={handleLogout}
       disabled={pending}
-      className="rounded-full border border-black/[.08] px-4 py-1.5 text-sm font-medium text-zinc-600 transition-colors hover:bg-zinc-100 disabled:opacity-50 dark:border-white/[.145] dark:text-zinc-300 dark:hover:bg-zinc-900"
+      className="whitespace-nowrap rounded-full border border-black/[.08] px-4 py-1.5 text-base font-medium text-zinc-600 transition-colors hover:bg-zinc-100 disabled:opacity-50 dark:border-white/[.145] dark:text-zinc-300 dark:hover:bg-zinc-900"
     >
       {pending ? "ログアウト中…" : "ログアウト"}
     </button>
diff --git a/components/auth/SignupForm.tsx b/components/auth/SignupForm.tsx
index 6127ef5..86051ef 100644
--- a/components/auth/SignupForm.tsx
+++ b/components/auth/SignupForm.tsx
@@ -117,7 +117,7 @@ export default function SignupForm() {
 
       <p className="text-center text-sm text-zinc-500 dark:text-zinc-500">
         すでにアカウントをお持ちの場合は{" "}
-        <Link href="/login" className="text-emerald-600 hover:underline dark:text-emerald-400">
+        <Link href="/login" className="text-[#FF7F50] hover:underline dark:text-[#FF7F50]">
           ログイン
         </Link>
       </p>
diff --git a/components/background.tsx b/components/background.tsx
index 5c01155..2f514f6 100644
--- a/components/background.tsx
+++ b/components/background.tsx
@@ -12,104 +12,187 @@ const vocabularyWords = ["vocabulary", "词汇", "vocabulaire", "Wortschatz", "v
 const bookWords = ["book", "书", "livre", "Buch", "libro"];
 
 function isCJK(word: string) {
-  return /[\u4e00-\u9fff]/.test(word);
+  return /[\u4E00-\u9FFF]/.test(word);
 }
 
-type Depth = {
-  // 手前(fg)・奥(bg)。速さや振れ幅の見た目上の強さを決める
-  layer: "fg" | "bg";
-  amplitudeY: number;
-  amplitudeRotate: number;
-  scaleRange: number;
-  opacityRange: [number, number];
+// 単語ごとの見た目上の横幅を文字数から概算（1文字あたりのem係数。
+// CJKは全角文字なので、フォントによらず送り幅がちょうど1emになる）
+function estimateWidthEm(word: string) {
+  let width = 0;
+  for (const ch of word) {
+    width += /[\u4E00-\u9FFF]/.test(ch) ? 1 : 0.72;
+  }
+  return width;
+}
+
+// VOCABOOKの見出し(h1)の中心に、流れる文字の縦の中心を合わせるための計算。
+// page.tsx側のレイアウト（section: py-24, バッジ: text-xs 1行, gap-6, h1: fontSize 18.7vw）
+// をもとに、h1の行ボックス上端は画面幅によらず常に「py-24(96px) + バッジの行の高さ(16px)
+// + gap-6(24px) = 136px」の位置になる（実測でも確認済み）。
+const H1_TOP_PX = 136;
+
+// VOCABOOKのフォントサイズ（page.tsx側の指定と合わせる）
+const VOCABOOK_FONT_SIZE_VW = 18.7;
+
+// VOCABOOKの「見た目の高さの中心」＝実際に文字が塗られているピクセル（インク）の
+// 上端と下端の中間点。h1の行ボックス上端からの距離を、フォントサイズに対する比率で
+// 表したもの。
+//   line-height比 = 1.5
+//   fontBoundingBoxAscent比 = 0.90、fontBoundingBoxDescent比 = 0.30
+//   actualBoundingBoxAscent比（インク上端） = 0.71、actualBoundingBoxDescent比（インク下端） = 0.01
+// これらから、インクの中心は行ボックス上端からフォントサイズのちょうど0.70倍の位置になる
+// （h1のフォントや文字列を変えたら、この値も実測し直すこと）
+const VOCABOOK_INK_CENTER_RATIO = 0.7;
+
+// VOCABOOKのインクの高さ（上端〜下端）は、上と同じ実測により
+// actualBoundingBoxAscent比(0.71) + actualBoundingBoxDescent比(0.01) = フォントサイズの0.72倍
+const VOCABOOK_INK_HEIGHT_RATIO = 0.72;
+
+// VOCABOOKの視覚的な縦中心（背景コンテナ上端からの距離、px + vw）
+const VOCABOOK_CENTER_VW = VOCABOOK_INK_CENTER_RATIO * VOCABOOK_FONT_SIZE_VW;
+
+// 二次曲線の頂点（画面中央、単語がVOCABOOKの前を横切る瞬間）どうしの距離が、
+// VOCABOOKの実際の文字の高さ（インクの上端〜下端）の2倍になるようにする。
+// 頂点は中心から一番遠い位置（弧の基準位置＝画面外の待機列にいる間は中心に寄り、
+// 中央で最も離れる向き）になるようにし、そこから中心までの距離はその半分
+// （globals.cssの@keyframes vb-wave-dip/vb-wave-peakの振れ幅と連動しているので、
+// 変更する場合は両方を合わせて直すこと）
+const VOCABOOK_INK_HEIGHT_VW = VOCABOOK_INK_HEIGHT_RATIO * VOCABOOK_FONT_SIZE_VW;
+const VERTEX_OFFSET_VW = (VOCABOOK_INK_HEIGHT_VW * 2) / 2;
+
+type Curve = {
+  // "dip"は画面中央で下に凸（谷）、"peak"は画面中央で上に凸（山）。
+  // 頂点はどちらも画面横幅の中心。振れ幅を抑えて互いに交差しないようにする
+  shape: "dip" | "peak";
+  // 弧の基準位置（アニメーション開始・終了時点の高さ。背景コンテナ上端からの距離）
+  baselineTop: string;
+  // 単語がスタート地点からゴール地点まで移動する距離（画面外の余白を含む、vw）
+  travelVw: number;
+  // フォントサイズ（vw指定。画面幅に比例させることで、どの画面幅でも
+  // 1emあたりのvw換算値が変わらず、単語間隔の計算が崩れないようにする）
+  fontSizeVw: number;
+  fontSizeMinRem: number;
+  fontSizeMaxRem: number;
+  // 単語と単語の間に空けるスペース（em）
+  gapEm: number;
+  durationSeconds: number;
+  direction: "normal" | "reverse";
 };
 
-const FG: Depth = {
-  layer: "fg",
-  amplitudeY: 16,
-  amplitudeRotate: 3.5,
-  scaleRange: 0.1,
-  opacityRange: [0.65, 1],
+const TOP_CURVE: Curve = {
+  // "peak"（頂点でVERTEX_OFFSET_VW分上に動く）にすることで、画面中央でVOCABOOKから
+  // 一番遠ざかる（＝重ならない）向きにする
+  shape: "peak",
+  // 弧の基準位置（画面外の待機列にいる高さ）はVOCABOOKの縦中心そのもの。
+  // 頂点（画面中央）ではそこからVERTEX_OFFSET_VW分上に離れる
+  baselineTop: `calc(${H1_TOP_PX}px + ${VOCABOOK_CENTER_VW}vw)`,
+  travelVw: 124,
+  fontSizeVw: 4.4,
+  fontSizeMinRem: 0.8,
+  fontSizeMaxRem: 5.5,
+  gapEm: 2.2,
+  durationSeconds: 34,
+  direction: "reverse",
 };
 
-const BG: Depth = {
-  layer: "bg",
-  amplitudeY: 9,
-  amplitudeRotate: 2,
-  scaleRange: 0.06,
-  opacityRange: [0.55, 0.9],
+const BOTTOM_CURVE: Curve = {
+  // "dip"（頂点でVERTEX_OFFSET_VW分下に動く）にすることで、画面中央でVOCABOOKから
+  // 一番遠ざかる（＝重ならない）向きにする
+  shape: "dip",
+  // 弧の基準位置（画面外の待機列にいる高さ）はVOCABOOKの縦中心そのもの。
+  // 頂点（画面中央）ではそこからVERTEX_OFFSET_VW分下に離れる
+  baselineTop: `calc(${H1_TOP_PX}px + ${VOCABOOK_CENTER_VW}vw)`,
+  travelVw: 124,
+  fontSizeVw: 3.6,
+  fontSizeMinRem: 0.6,
+  fontSizeMaxRem: 4.5,
+  gapEm: 2.2,
+  durationSeconds: 34,
+  direction: "normal",
 };
 
-function FlowRow({
+function buildChain(words: string[], curve: Curve) {
+  const stepVw = curve.fontSizeVw; // 1emあたりのvw換算値
+  const chainWords: string[] = [];
+  const offsetsVw: number[] = [];
+
+  let cumulativeVw = 0;
+  let i = 0;
+  // 画面外の待機列も含めて、移動距離全体が単語で埋まるまで並べる
+  while (cumulativeVw < curve.travelVw) {
+    const word = words[i % words.length];
+    const widthVw = estimateWidthEm(word) * stepVw;
+    chainWords.push(word);
+    // 各単語はtranslate(-50%, -50%)で「その位置」を中心にレンダリングされるため、
+    // 枠の開始位置ではなく枠の中心（開始位置 + 単語幅の半分）をオフセットにする。
+    // 開始位置をそのまま使うと、単語ごとに幅が違う分だけ隣の単語との間隔が
+    // 均等にならない（幅が広い単語ほど左にずれて詰まって見える）
+    offsetsVw.push(cumulativeVw + widthVw / 2);
+    cumulativeVw += widthVw + curve.gapEm * stepVw;
+    i++;
+  }
+
+  // ループの継ぎ目（最後の単語→最初の単語）も他と同じ間隔になるよう、
+  // 固定のtravelVwではなく実際に単語で埋まった合計幅を1周期として使う
+  const loopPeriodVw = cumulativeVw;
+
+  return chainWords.map((word, idx) => {
+    const t = offsetsVw[idx] / loopPeriodVw;
+    return { word, delaySeconds: -t * curve.durationSeconds };
+  });
+}
+
+function WaveCurve({
   words,
-  phase,
-  depth,
-  repeat,
+  curve,
   className,
 }: {
   words: string[];
-  phase: number;
-  depth: Depth;
-  repeat: number;
+  curve: Curve;
   className: string;
 }) {
-  const totalItems = words.length * repeat * 2;
-  const items = Array.from({ length: totalItems }, (_, i) => words[i % words.length]);
-  const freq = (2 * Math.PI) / words.length;
+  const items = buildChain(words, curve);
 
   return (
-    <div
-      className={`vb-flow-row vb-flow-row--${depth.layer} flex w-max shrink-0 items-baseline gap-12 whitespace-nowrap ${className}`}
-    >
-      {items.map((word, i) => {
-        const angle = (i % words.length) * freq + phase;
-        const wave = Math.sin(angle) + 0.25 * Math.sin(angle * 2);
-        const norm = wave / 1.25; // -1〜1 に正規化
-
-        const translateY = wave * depth.amplitudeY;
-        const rotate = Math.cos(angle) * depth.amplitudeRotate;
-        const scale = 1 + norm * depth.scaleRange;
-        const [opMin, opMax] = depth.opacityRange;
-        const opacity = opMin + ((norm + 1) / 2) * (opMax - opMin);
-
-        return (
-          <span
-            key={`${word}-${i}`}
-            className={isCJK(word) ? "font-serif" : bookFont.className}
-            style={{
-              transform: `translateY(${translateY}px) rotate(${rotate}deg) scale(${scale})`,
-              opacity,
-            }}
-          >
-            {word}
-          </span>
-        );
-      })}
-    </div>
+    <>
+      {items.map(({ word, delaySeconds }, i) => (
+        <span
+          key={`${word}-${i}`}
+          className={`vb-wave-item vb-wave-item--${curve.shape} whitespace-nowrap ${
+            isCJK(word) ? "font-serif" : bookFont.className
+          } ${className}`}
+          style={{
+            top: curve.baselineTop,
+            fontSize: `clamp(${curve.fontSizeMinRem}rem, ${curve.fontSizeVw}vw, ${curve.fontSizeMaxRem}rem)`,
+            animationDuration: `${curve.durationSeconds}s`,
+            animationDirection: curve.direction,
+            animationDelay: `${delaySeconds}s`,
+          }}
+        >
+          {word}
+        </span>
+      ))}
+    </>
   );
 }
 
-// 背景の装飾
+// 背景の装飾：画面横幅の中心を頂点とする、下に凸／上に凸の2本の弧（交差しない）に沿って単語が連なって流れる
 export default function Background() {
   return (
     <div
       aria-hidden="true"
       // 装飾目的なのでaria-hidden
-      className="pointer-events-none absolute inset-0 z-0 flex select-none flex-col justify-center gap-8 overflow-hidden"
+      className="pointer-events-none absolute inset-0 z-0 select-none overflow-hidden"
     >
-      <FlowRow
+      <WaveCurve
         words={vocabularyWords}
-        phase={0}
-        depth={FG}
-        repeat={3}
-        className="text-4xl text-zinc-300 sm:text-5xl dark:text-zinc-800"
+        curve={TOP_CURVE}
+        className="text-zinc-300 dark:text-zinc-800"
       />
-      <FlowRow
+      <WaveCurve
         words={bookWords}
-        phase={Math.PI}
-        depth={BG}
-        repeat={3}
-        className="text-3xl text-zinc-300 sm:text-4xl dark:text-zinc-800"
+        curve={BOTTOM_CURVE}
+        className="text-zinc-300 dark:text-zinc-800"
       />
     </div>
   );
diff --git a/components/book-shape.tsx b/components/book-shape.tsx
new file mode 100644
index 0000000..d8a85d9
--- /dev/null
+++ b/components/book-shape.tsx
@@ -0,0 +1,24 @@
+// 背景の動く文字列とメインコピー（Vocabookなど）の間に敷く、開いた本のシルエット。
+// 半透明の図形で背景の文字列を和らげ、手前の文字の視認性を上げる。
+export default function BookShape() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="2.5 6.25 19 12"
+      fill="none"
+      preserveAspectRatio="none"
+      // 見出しブロック（バッジ・見出し・説明文）を包むdivは中身の実際の幅に
+      // シュリンクラップされている（page.tsx側でw-fullを外している）ため、
+      // そこに少しだけ外側にはみ出させて（負のinset）重ねれば、
+      // 文字を欠けさせず、かつ幅が広がりすぎて本に見えなくなることもない。
+      className="pointer-events-none absolute -inset-x-4 -inset-y-6 -z-10 fill-white/70 sm:-inset-x-6 sm:-inset-y-8 dark:fill-zinc-900/60"
+      // Bebas Neueはディセンダー分の余白が行下側に大きく偏っているため、
+      // insetを上下均等にしただけだとVOCABOOKの文字の中心より下にずれる。
+      // 見出しのフォントサイズ（18.7vw）に比例させてその分だけ上に引き上げて中心を合わせる。
+      style={{ transform: "translateY(-5.4vw)" }}
+    >
+      <path d="M3.25 6.75L11 6.75A1 1 0 0 1 12 7.75L12 17.75A1 1 0 0 0 11 16.75L3.25 16.75A0.25 0.25 0 0 1 3 16.5L3 7A0.25 0.25 0 0 1 3.25 6.75Z" />
+      <path d="M20.75 6.75L13 6.75A1 1 0 0 0 12 7.75L12 17.75A1 1 0 0 1 13 16.75L20.75 16.75A0.25 0.25 0 0 0 21 16.5L21 7A0.25 0.25 0 0 0 20.75 6.75Z" />
+    </svg>
+  );
+}
diff --git a/components/home/MaterialsPreview.tsx b/components/home/MaterialsPreview.tsx
new file mode 100644
index 0000000..435f457
--- /dev/null
+++ b/components/home/MaterialsPreview.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+interface LanguagePreview {
+  key: string;
+  label: string;
+  href: string;
+  caption: string;
+  src: string;
+  width: number;
+  height: number;
+  alt: string;
+}
+
+const LANGUAGES: LanguagePreview[] = [
+  {
+    key: "chinese",
+    label: "中国語",
+    href: "/learn/chinese",
+    caption: "中国語 → 漢字からピンイン",
+    src: "/images/materials-preview-chinese-pinyin-card-v3.png",
+    width: 1152,
+    height: 874,
+    alt: "学習教材の例：中国語「漢字からピンイン」の練習画面",
+  },
+  {
+    key: "french",
+    label: "フランス語",
+    href: "/learn/french",
+    caption: "フランス語 → 動詞の活用",
+    src: "/images/materials-preview-french-lire-v2.png",
+    width: 1152,
+    height: 898,
+    alt: "学習教材の例：フランス語の動詞活用練習画面",
+  },
+  {
+    key: "german",
+    label: "ドイツ語",
+    href: "/learn/german",
+    caption: "ドイツ語 → 翻訳",
+    src: "/images/materials-preview-german-translation.png",
+    width: 1464,
+    height: 1057,
+    alt: "学習教材の例：ドイツ語の翻訳練習画面",
+  },
+  {
+    key: "spanish",
+    label: "スペイン語",
+    href: "/learn/spanish",
+    caption: "スペイン語 → 動詞の活用",
+    src: "/images/materials-preview-spanish-aprender-v2.png",
+    width: 1152,
+    height: 858,
+    alt: "学習教材の例：スペイン語の動詞活用練習画面",
+  },
+];
+
+export function MaterialsPreview() {
+  const [activeKey, setActiveKey] = useState<string>(LANGUAGES[0].key);
+  const activeLang = LANGUAGES.find((l) => l.key === activeKey) ?? LANGUAGES[0];
+
+  return (
+    <>
+      <div className="relative z-10 flex flex-col gap-1.5">
+        <span className="pointer-events-none text-[11px] tracking-wide text-zinc-400">
+          言語を学ぶ
+        </span>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {LANGUAGES.map((lang) => (
+            <Link
+              key={lang.key}
+              href={lang.href}
+              onMouseEnter={() => setActiveKey(lang.key)}
+              className={`rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                activeLang.key === lang.key
+                  ? "bg-tealblue-100 text-tealblue-800 dark:bg-tealblue-900/50 dark:text-tealblue-200"
+                  : "bg-tealblue-50 text-tealblue-700 hover:bg-tealblue-100 dark:bg-tealblue-950/30 dark:text-tealblue-300 dark:hover:bg-tealblue-950/50"
+              }`}
+            >
+              {lang.label}
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      <div className="pointer-events-none relative z-10 overflow-hidden rounded-2xl border border-tealblue-200/70 dark:border-tealblue-900/30">
+        <p className="border-b border-tealblue-200/70 bg-tealblue-50/60 px-5 py-2 text-xs font-medium text-tealblue-800 dark:border-tealblue-900/30 dark:bg-tealblue-950/20 dark:text-tealblue-300">
+          {activeLang.caption}
+        </p>
+        <div className="relative aspect-[4/3] w-full bg-white p-4 dark:bg-zinc-900">
+          <Image
+            key={activeLang.key}
+            src={activeLang.src}
+            alt={activeLang.alt}
+            fill
+            className="object-contain opacity-90 saturate-50 transition-all duration-300 group-hover:opacity-100 group-hover:saturate-100"
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/home/StudyModePreview.tsx b/components/home/StudyModePreview.tsx
new file mode 100644
index 0000000..578baf4
--- /dev/null
+++ b/components/home/StudyModePreview.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import MultiElementCard from "@/components/my-notebooks/MultiElement";
+
+const FACES: { label: string; value: string }[] = [
+  { label: "見出し語", value: "literature" },
+  { label: "意味", value: "文学" },
+  { label: "発音", value: "/ˈlɪdər(ə)tʃər/" },
+];
+
+export function StudyModePreview() {
+  const faces = FACES.map(({ label, value }) => {
+    const isPronunciation = label === "発音";
+    return (
+      <div key={label} className="flex flex-col items-center gap-2 text-center">
+        <span className="text-xs font-medium tracking-wide text-zinc-500 uppercase dark:text-zinc-500">
+          {label}
+        </span>
+        <span
+          className={`font-semibold text-black dark:text-zinc-50 ${
+            isPronunciation ? "whitespace-nowrap" : "text-2xl"
+          }`}
+          style={isPronunciation ? { fontSize: "clamp(0.65rem, 3vw, 1.25rem)" } : undefined}
+        >
+          {value}
+        </span>
+      </div>
+    );
+  });
+
+  return (
+    <div className="relative z-10 overflow-hidden rounded-2xl border border-coral-200/70 dark:border-coral-900/30">
+      <p className="border-b border-coral-200/70 bg-coral-50/60 px-5 py-2 text-xs font-medium text-coral-800 dark:border-coral-900/30 dark:bg-coral-950/20 dark:text-coral-300">
+        暗記学習モード
+      </p>
+      <div className="flex justify-center bg-white p-4 dark:bg-zinc-900">
+        <MultiElementCard
+          faces={faces}
+          columnNames={FACES.map((f) => f.label)}
+          width={190}
+          height={125}
+          showHint={false}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/learn/SectionCard.tsx b/components/learn/SectionCard.tsx
index c16e6e0..c743d93 100644
--- a/components/learn/SectionCard.tsx
+++ b/components/learn/SectionCard.tsx
@@ -26,7 +26,7 @@ export function SectionCard({
   manuallyTagged,
 }: SectionCardProps) {
   return (
-    <div className="group relative flex items-center justify-between rounded-2xl border border-black/[.08] bg-white p-5 text-left transition-all hover:border-tealblue-400/60 hover:shadow-sm dark:border-white/[.145] dark:bg-zinc-950 dark:hover:border-tealblue-600/60">
+    <div className="group relative flex items-center justify-between rounded-2xl border border-tealblue-200 bg-white p-5 text-left transition-all hover:-translate-y-1 hover:border-tealblue-300 hover:shadow-xl hover:shadow-tealblue-100 dark:border-tealblue-900/40 dark:bg-zinc-950 dark:hover:border-tealblue-700/60 dark:hover:shadow-none">
       <Link href={href} aria-label={title} className="absolute inset-0 rounded-2xl" />
       <div className="pointer-events-none flex flex-col gap-1">
         <span className="text-xs font-semibold uppercase tracking-wider text-tealblue-600 dark:text-tealblue-400">
diff --git a/components/my-notebooks/CardFieldsForm.tsx b/components/my-notebooks/CardFieldsForm.tsx
index 721cf03..33c9142 100644
--- a/components/my-notebooks/CardFieldsForm.tsx
+++ b/components/my-notebooks/CardFieldsForm.tsx
@@ -67,7 +67,7 @@ export default function CardFieldsForm({
                 type="button"
                 onClick={() => removeSense(sense.key)}
                 disabled={senses.length <= 1}
-                className="text-xs text-zinc-500 transition-colors hover:underline disabled:opacity-30 dark:text-zinc-500"
+                className="text-xs text-coral-600 transition-all hover:-translate-y-0.5 hover:text-coral-800 hover:underline disabled:opacity-30 dark:text-coral-400 dark:hover:text-coral-200"
               >
                 この意味を削除
               </button>
@@ -76,7 +76,7 @@ export default function CardFieldsForm({
           <button
             type="button"
             onClick={addSense}
-            className="self-start text-xs text-zinc-600 transition-colors hover:underline dark:text-zinc-400"
+            className="self-start text-xs text-coral-600 transition-all hover:-translate-y-0.5 hover:text-coral-800 hover:underline dark:text-coral-400 dark:hover:text-coral-200"
           >
             ＋ 意味を追加
           </button>
diff --git a/components/my-notebooks/ImportForm.tsx b/components/my-notebooks/ImportForm.tsx
index e913a3f..fc54e85 100644
--- a/components/my-notebooks/ImportForm.tsx
+++ b/components/my-notebooks/ImportForm.tsx
@@ -15,7 +15,7 @@ function SubmitButton() {
     <button
       type="submit"
       disabled={pending}
-      className="rounded-full bg-black px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200"
+      className="rounded-full bg-coral-500 px-5 py-2 text-sm font-medium text-white transition-all hover:-translate-y-0.5 hover:bg-coral-600 hover:shadow-lg hover:shadow-coral-200 disabled:opacity-50 dark:hover:shadow-none"
     >
       {pending ? "取り込み中…" : "単語帳を作成"}
     </button>
@@ -56,7 +56,7 @@ export default function ImportForm() {
           type="file"
           accept=".xlsx"
           required
-          className="text-sm text-zinc-600 file:mr-3 file:rounded-full file:border-0 file:bg-zinc-100 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-zinc-700 hover:file:bg-zinc-200 dark:text-zinc-400 dark:file:bg-zinc-800 dark:file:text-zinc-200 dark:hover:file:bg-zinc-700"
+          className="text-sm text-zinc-600 file:mr-3 file:rounded-full file:border-0 file:bg-coral-100 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-coral-700 hover:file:bg-coral-200 hover:file:text-coral-800 dark:text-zinc-400 dark:file:bg-coral-900/30 dark:file:text-coral-300 dark:hover:file:bg-coral-900/50 dark:hover:file:text-coral-200"
         />
         <p className="text-xs text-zinc-500 dark:text-zinc-500">
           1行目を見出し行として自動で読み取ります。列の数や名前は自由です。
diff --git a/components/my-notebooks/MultiElement.tsx b/components/my-notebooks/MultiElement.tsx
index e6cb5e4..41e1a6e 100644
--- a/components/my-notebooks/MultiElement.tsx
+++ b/components/my-notebooks/MultiElement.tsx
@@ -8,6 +8,7 @@ interface MultiElementCardProps {
   columnNames?: string[];
   width?: number;
   height?: number;
+  showHint?: boolean;
 }
 
 //以下多要素単語帳のカード
@@ -16,6 +17,7 @@ const MultiElementCard: React.FC<MultiElementCardProps> = ({
   columnNames = [],
   width = 340,
   height = 220,
+  showHint = true,
 }) => {
   //回転回数の記録
   const [rotationStep, setRotationStep] = useState(0);
@@ -27,6 +29,10 @@ const MultiElementCard: React.FC<MultiElementCardProps> = ({
   // 正多角形の重心から面までの距離（奥行き押し出し量）
   const tz = Math.round(width / (2 * Math.tan(Math.PI / numFaces)));
 
+  // 視点を上に持ち上げて見下ろす量。カードの高さに比例させることで、
+  // サイズを変えても常に同じ見下ろし角度・全体像が収まるようにする
+  const perspectiveOriginY = Math.round(height * -0.73);
+
   // クリック位置（左側か右側か）に応じて回転方向を分岐
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     const rect = e.currentTarget.getBoundingClientRect();
@@ -61,7 +67,7 @@ const MultiElementCard: React.FC<MultiElementCardProps> = ({
           width: `${width}px`,
           height: `${height}px`,
           perspective: "1000px",
-          perspectiveOrigin: "50% -160px", //  視点を上に持ち上げて見下ろす
+          perspectiveOrigin: `50% ${perspectiveOriginY}px`, //  視点を上に持ち上げて見下ろす
           cursor: "pointer",
           userSelect: "none",
         }}
@@ -114,11 +120,13 @@ const MultiElementCard: React.FC<MultiElementCardProps> = ({
       </div>
 
       {/* 操作ガイド */}
-      <div className="flex items-center gap-4 text-xs text-zinc-400 dark:text-zinc-500">
-        <span>◀ 左: 戻る</span>
-        <span>|</span>
-        <span>右: 進む ▶</span>
-      </div>
+      {showHint && (
+        <div className="flex items-center gap-4 text-xs text-zinc-400 dark:text-zinc-500">
+          <span>◀ 左: 戻る</span>
+          <span>|</span>
+          <span>右: 進む ▶</span>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/components/my-notebooks/ResetAllStarsButton.tsx b/components/my-notebooks/ResetAllStarsButton.tsx
index 72f6acc..f7928fb 100644
--- a/components/my-notebooks/ResetAllStarsButton.tsx
+++ b/components/my-notebooks/ResetAllStarsButton.tsx
@@ -16,7 +16,7 @@ export default function ResetAllStarsButton({ notebookId }: { notebookId: string
     >
       <button
         type="submit"
-        className="rounded-full border border-black/[.08] px-5 py-2 text-sm text-zinc-600 transition-colors hover:border-black/[.15] dark:border-white/[.145] dark:text-zinc-300 dark:hover:border-white/[.25]"
+        className="rounded-full border border-coral-300 px-5 py-2 text-sm text-coral-700 transition-all hover:-translate-y-0.5 hover:border-coral-500 hover:bg-coral-50 hover:text-coral-800 hover:shadow-md hover:shadow-coral-100 dark:border-coral-900/50 dark:text-coral-300 dark:hover:border-coral-600 dark:hover:bg-coral-950/20 dark:hover:text-coral-200 dark:hover:shadow-none"
       >
         ★を一括リセット
       </button>
diff --git a/components/my-notebooks/ShareNotebookButton.tsx b/components/my-notebooks/ShareNotebookButton.tsx
index 0d7a9e9..883b52a 100644
--- a/components/my-notebooks/ShareNotebookButton.tsx
+++ b/components/my-notebooks/ShareNotebookButton.tsx
@@ -38,7 +38,7 @@ export default function ShareNotebookButton({
         type="button"
         onClick={handleToggle}
         disabled={isPending}
-        className="rounded-full border border-black/[.08] px-5 py-2 text-sm font-medium transition-colors hover:border-black/[.15] disabled:opacity-50 dark:border-white/[.145] dark:hover:border-white/[.25]"
+        className="rounded-full border border-coral-300 px-5 py-2 text-sm font-medium text-coral-700 transition-all hover:-translate-y-0.5 hover:border-coral-500 hover:bg-coral-50 hover:text-coral-800 hover:shadow-md hover:shadow-coral-100 disabled:opacity-50 dark:border-coral-900/50 dark:text-coral-300 dark:hover:border-coral-600 dark:hover:bg-coral-950/20 dark:hover:text-coral-200 dark:hover:shadow-none"
       >
         {optimisticPublic ? "公開中（クリックで非公開に）" : "リンクで共有する"}
       </button>
@@ -54,7 +54,7 @@ export default function ShareNotebookButton({
           <button
             type="button"
             onClick={handleCopy}
-            className="rounded-full border border-black/[.08] px-4 py-2 text-xs font-medium transition-colors hover:border-black/[.15] dark:border-white/[.145] dark:hover:border-white/[.25]"
+            className="rounded-full border border-coral-300 px-4 py-2 text-xs font-medium text-coral-700 transition-all hover:-translate-y-0.5 hover:border-coral-500 hover:bg-coral-50 hover:text-coral-800 hover:shadow-md hover:shadow-coral-100 dark:border-coral-900/50 dark:text-coral-300 dark:hover:border-coral-600 dark:hover:bg-coral-950/20 dark:hover:text-coral-200 dark:hover:shadow-none"
           >
             {copied ? "コピーしました" : "コピー"}
           </button>
diff --git a/components/pinyin/PinyinPractice.tsx b/components/pinyin/PinyinPractice.tsx
index c4b43d5..15edbcc 100644
--- a/components/pinyin/PinyinPractice.tsx
+++ b/components/pinyin/PinyinPractice.tsx
@@ -314,7 +314,7 @@ export function PinyinPractice({ characters }: PinyinPracticeProps) {
         </span>
       </div>
 
-      <div className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900/50">
+      <div className="rounded-2xl bg-white p-6 shadow-sm dark:bg-zinc-900/50">
         <div className="mb-2 text-center text-xs font-medium text-zinc-400 dark:text-zinc-500">
           この漢字のピンインは？
         </div>
diff --git a/components/verbs/ConjugationPractice.tsx b/components/verbs/ConjugationPractice.tsx
index bfed04f..1972d66 100644
--- a/components/verbs/ConjugationPractice.tsx
+++ b/components/verbs/ConjugationPractice.tsx
@@ -359,7 +359,7 @@ export function ConjugationPractice<V extends VerbLike, T>({
         </span>
       </div>
 
-      <div className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900/50">
+      <div className="rounded-2xl bg-white p-6 shadow-sm dark:bg-zinc-900/50">
         <div className="mb-4 flex items-center justify-center gap-2">
           <span className="rounded-full bg-tealblue-50 px-3 py-1 text-xs font-bold text-tealblue-700 dark:bg-tealblue-900/30 dark:text-tealblue-300">
             {question.tenseLabel}
diff --git a/public/images/materials-preview-chinese-pinyin-card-v3.png b/public/images/materials-preview-chinese-pinyin-card-v3.png
new file mode 100644
index 0000000..a95e10f
Binary files /dev/null and b/public/images/materials-preview-chinese-pinyin-card-v3.png differ
diff --git a/public/images/materials-preview-french-lire-v2.png b/public/images/materials-preview-french-lire-v2.png
new file mode 100644
index 0000000..dba772e
Binary files /dev/null and b/public/images/materials-preview-french-lire-v2.png differ
diff --git a/public/images/materials-preview-german-translation.png b/public/images/materials-preview-german-translation.png
new file mode 100644
index 0000000..ca81900
Binary files /dev/null and b/public/images/materials-preview-german-translation.png differ
diff --git a/public/images/materials-preview-spanish-aprender-v2.png b/public/images/materials-preview-spanish-aprender-v2.png
new file mode 100644
index 0000000..281bcc7
Binary files /dev/null and b/public/images/materials-preview-spanish-aprender-v2.png differ