diff --git a/public/assets/style.css b/public/assets/style.css
index 574b79a..28ab6ad 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -251,15 +251,16 @@ a {
   position: sticky;
   top: 0;
   z-index: 10;
+  isolation: isolate;
   padding-top: env(safe-area-inset-top);
 }
+/* ぼかしはスクロールしたときだけ付ける。iOS Safari は透明でもぼかしの層をボタンの上に描くことがあるため */
 .nav-bar::before {
   content: "";
   position: absolute;
   inset: 0;
+  z-index: -1;
   background: var(--material-bar);
-  -webkit-backdrop-filter: blur(30px) saturate(150%);
-  backdrop-filter: blur(30px) saturate(150%);
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -271,9 +272,8 @@ a {
   top: 100%;
   height: 16px;
   pointer-events: none;
+  z-index: -1;
   background: linear-gradient(var(--material-bar), transparent);
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
   -webkit-mask-image: linear-gradient(#000, transparent);
   mask-image: linear-gradient(#000, transparent);
   opacity: 0;
@@ -283,8 +283,18 @@ a {
 .nav-bar.scrolled::after {
   opacity: 1;
 }
+.nav-bar.scrolled::before {
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  backdrop-filter: blur(30px) saturate(150%);
+}
+.nav-bar.scrolled::after {
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+}
+/* ボタンと見出しはぼかしの層より必ず手前に */
 .nav-inner {
   position: relative;
+  z-index: 1;
   max-width: 600px;
   height: 44px;
   margin: 0 auto;