diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl
index b98d12c142a..ff01d155ca0 100644
--- a/themes/future/css-src/theme-styles.styl
+++ b/themes/future/css-src/theme-styles.styl
@@ -950,32 +950,56 @@ Header and header elements
      押せる面は 24×24px を下回らないように上下左右に 4px ずつ取る */
   .header-drawer-toggle {
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: space-step;
     margin: 0;
     padding: space-step;
     cursor: pointer;
   }
+  /* 3本は同じ長さで、右端をそろえて左端だけずらす。窓で切って見せるので、
+     開くときは線を伸ばさず横へ滑らせるだけで済む（アーキテクチャ
+     ガイドラインと同じ形）。高さ 14px は 2px の線3本と 4px の間隔2つの和 */
+  .header-drawer-icon {
+    display: block;
+    position: relative;
+    width: 20px;
+    height: 14px;
+    overflow: hidden;
+  }
   .header-drawer-bar {
     display: block;
+    position: absolute;
+    left: 0;
     width: 20px;
     height: 2px;
     /* 線なのでピルにする。角丸の段の3つ目 */
     border-radius: 999px;
     background: var(--ink-mute);
     /* 開閉は反応ではなく状態の変化なので、hover-speed ではなく state-speed */
-    transition: transform state-speed ease, opacity state-speed ease;
+    transition: transform state-speed ease;
+  }
+  /* 窓からはみ出した分が隠れるので、見える長さは 20 / 10 / 15px になる */
+  .header-drawer-bar:nth-child(1) {
+    top: 0;
+  }
+  .header-drawer-bar:nth-child(2) {
+    top: 6px;
+    transform: translateX(10px);
+  }
+  .header-drawer-bar:nth-child(3) {
+    top: 12px;
+    transform: translateX(5px);
   }
   /* 上下の線を中央へ寄せてから回す。6px は線の高さ2pxと間隔4pxの和で、
      間隔の段として選んだ値ではない。角度は参照実装（リクルートサイト）と
-     同じ ±135deg で、45deg と違って回る向きが両者で逆になる */
+     同じ ±135deg で、45deg と違って回る向きが両者で逆になる。
+     ✕ の2本は左端もそろえて同じ長さにする */
   .header-drawer-input:checked + .header-drawer-toggle .header-drawer-bar:nth-child(1) {
     transform: translateY(6px) rotate(-135deg);
   }
+  /* 真ん中は消すのではなく窓の外へ送る */
   .header-drawer-input:checked + .header-drawer-toggle .header-drawer-bar:nth-child(2) {
-    opacity: 0;
+    transform: translateX(20px);
   }
   /* 動きを減らす設定では回さずに ✕ の形へ切り替える */
   @media (prefers-reduced-motion: reduce) {
diff --git a/themes/future/layout/_partial/header.ejs b/themes/future/layout/_partial/header.ejs
index b889c52c88e..6ae6e3a98d7 100644
--- a/themes/future/layout/_partial/header.ejs
+++ b/themes/future/layout/_partial/header.ejs
@@ -34,8 +34,9 @@
 			    名前は中の sr-only が持つ（label に絵しか無いと読み上げる名前が無い） %>
 			<input type="checkbox" id="header-drawer" class="header-drawer-input">
 			<%# 三本線は svg-icon の辞書ではなく3本の span で描く (#2883)。開くと1本目と
-			    3本目が回って ✕ になり、2本目が消える。1枚の絵では動かせないため %>
-			<label for="header-drawer" class="header-drawer-toggle"><span class="header-drawer-bar"></span><span class="header-drawer-bar"></span><span class="header-drawer-bar"></span><span class="sr-only">メニュー</span></label>
+			    3本目が回って ✕ になり、2本目は窓の外へ抜ける。1枚の絵では動かせないため。
+			    包む span はその窓で、3本を同じ長さのまま違う長さに見せる %>
+			<label for="header-drawer" class="header-drawer-toggle"><span class="header-drawer-icon"><span class="header-drawer-bar"></span><span class="header-drawer-bar"></span><span class="header-drawer-bar"></span></span><span class="sr-only">メニュー</span></label>
 
 			<%# 行き先の帯。畳んだ中身は :hover と :focus-within で開く（JS は使わない）。
 			    開く合図がフォーカスなので、押す必要のあるボタンにはしていない