diff --git a/public/assets/style.css b/public/assets/style.css
index abc95e0..ee44117 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -43,6 +43,8 @@
   --material-thin: rgba(255, 255, 255, 0.55);
   --material: rgba(250, 250, 252, 0.74);
   --material-thick: rgba(246, 246, 249, 0.86);
+  /* ナビゲーションバー: 下に潜った中身がぼやけた模様として透けないよう、ほぼ不透明に */
+  --material-bar: rgba(242, 242, 247, 0.94);
   --material-edge: rgba(255, 255, 255, 0.7);
   --plate: rgba(255, 255, 255, 0.84);
   --scrim: rgba(0, 0, 0, 0.3);
@@ -110,6 +112,7 @@
     --material-thin: rgba(44, 44, 46, 0.5);
     --material: rgba(30, 30, 32, 0.7);
     --material-thick: rgba(24, 24, 26, 0.84);
+    --material-bar: rgba(12, 12, 13, 0.94);
     --material-edge: rgba(255, 255, 255, 0.09);
     --plate: rgba(28, 28, 30, 0.8);
     --scrim: rgba(0, 0, 0, 0.5);
@@ -127,6 +130,7 @@
     --material-thin: #f2f2f7;
     --material: #f7f7f9;
     --material-thick: #f2f2f7;
+    --material-bar: #f2f2f7;
     --plate: #ffffff;
   }
 }
@@ -135,6 +139,7 @@
     --material-thin: #2c2c2e;
     --material: #1c1c1e;
     --material-thick: #1c1c1e;
+    --material-bar: #0c0c0d;
     --plate: #1c1c1e;
   }
 }
@@ -250,9 +255,9 @@ a {
   content: "";
   position: absolute;
   inset: 0;
-  background: var(--material);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  backdrop-filter: blur(20px) saturate(180%);
+  background: var(--material-bar);
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  backdrop-filter: blur(30px) saturate(150%);
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -264,7 +269,7 @@ a {
   top: 100%;
   height: 16px;
   pointer-events: none;
-  background: linear-gradient(var(--material), transparent);
+  background: linear-gradient(var(--material-bar), transparent);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   -webkit-mask-image: linear-gradient(#000, transparent);