diff --git a/apps/client/src/app.tsx b/apps/client/src/app.tsx
index 1702176..2e36f59 100644
--- a/apps/client/src/app.tsx
+++ b/apps/client/src/app.tsx
@@ -6,15 +6,26 @@
 import { LobbyScene } from "./scenes/lobby/LobbyScene";
 import { GameScene } from "./scenes/game/GameScene";
 import { ResultScene } from "./scenes/result/ResultScene";
+import { LandscapeOnlyGate } from "./components/LandscapeOnlyGate";
 
 import { appConsts } from "@repo/shared";
 
 export default function App() {
-  const { scenePhase, room, myId, gameResult, joinErrorMessage, isJoining, requestJoin } = useAppFlow();
+  const {
+    scenePhase,
+    room,
+    myId,
+    gameResult,
+    joinErrorMessage,
+    isJoining,
+    requestJoin,
+  } = useAppFlow();
+
+  let scene = <GameScene myId={myId} />;
 
   // タイトル画面分岐
   if (scenePhase === appConsts.ScenePhase.TITLE) {
-    return (
+    scene = (
       <TitleScene
         onJoin={requestJoin}
         joinErrorMessage={joinErrorMessage}
@@ -22,17 +33,22 @@
       />
     );
   }
-  
+
   // ロビー画面分岐
   if (scenePhase === appConsts.ScenePhase.LOBBY) {
-    return <LobbyScene room={room} myId={myId} onStart={() => socketManager.lobby.startGame()} />;
+    scene = (
+      <LobbyScene
+        room={room}
+        myId={myId}
+        onStart={() => socketManager.lobby.startGame()}
+      />
+    );
   }
 
   // 結果画面分岐
   if (scenePhase === appConsts.ScenePhase.RESULT) {
-    return <ResultScene result={gameResult} />;
+    scene = <ResultScene result={gameResult} />;
   }
 
-  // プレイ画面分岐
-  return <GameScene myId={myId} />;
-}
\ No newline at end of file
+  return <LandscapeOnlyGate>{scene}</LandscapeOnlyGate>;
+}
diff --git a/apps/client/src/components/LandscapeOnlyGate.tsx b/apps/client/src/components/LandscapeOnlyGate.tsx
new file mode 100644
index 0000000..7d85d94
--- /dev/null
+++ b/apps/client/src/components/LandscapeOnlyGate.tsx
@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const LandscapeOnlyGate = ({ children }: Props) => {
+  return (
+    <>
+      <style>{`
+        .landscape-only-gate {
+          width: 100vw;
+          height: 100dvh;
+        }
+
+        .landscape-only-content {
+          width: 100%;
+          height: 100%;
+        }
+
+        .landscape-only-blocker {
+          display: none;
+          position: fixed;
+          inset: 0;
+          z-index: 9999;
+          background: #111;
+          color: #fff;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          text-align: center;
+          padding: 20px;
+        }
+
+        @media screen and (orientation: portrait) {
+          .landscape-only-blocker {
+            display: flex;
+          }
+
+          .landscape-only-content {
+            display: none;
+          }
+        }
+      `}</style>
+
+      <div className="landscape-only-gate">
+        <div className="landscape-only-blocker">
+          <h2>画面を横向きにしてください</h2>
+          <p>Please rotate your device to landscape mode.</p>
+        </div>
+
+        <div className="landscape-only-content">{children}</div>
+      </div>
+    </>
+  );
+};
diff --git a/apps/client/src/main.tsx b/apps/client/src/main.tsx
index 5e89748..7a3dd04 100644
--- a/apps/client/src/main.tsx
+++ b/apps/client/src/main.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './app'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./app";
+import "./index.css";
 
 // React ルートマウント処理
-ReactDOM.createRoot(document.getElementById('app')!).render(
+ReactDOM.createRoot(document.getElementById("app")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
\ No newline at end of file
+);
diff --git a/apps/client/src/scenes/lobby/LobbyScene.tsx b/apps/client/src/scenes/lobby/LobbyScene.tsx
index 1956dbe..22977e2 100644
--- a/apps/client/src/scenes/lobby/LobbyScene.tsx
+++ b/apps/client/src/scenes/lobby/LobbyScene.tsx
@@ -19,28 +19,6 @@
         * {
           box-sizing: border-box;
         }
-        .portrait-blocker {
-          display: none;
-          position: fixed;
-          top: 0; left: 0; width: 100vw; height: 100dvh;
-          background: #111;
-          color: white;
-          z-index: 9999;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
-          font-size: 1.5rem;
-          text-align: center;
-          padding: 20px;
-        }
-        @media screen and (orientation: portrait) {
-          .portrait-blocker {
-            display: flex;
-          }
-          .lobby-container {
-            display: none !important;
-          }
-        }
         /* スクロールバーの見た目をスマホ・PCでスッキリさせる */
         ::-webkit-scrollbar {
           width: 8px;
@@ -51,15 +29,6 @@
         }
       `}</style>
 
-      <div className="portrait-blocker">
-        <div style={{ fontSize: "4rem", marginBottom: "20px" }}>🔄</div>
-        <p style={{ margin: 0, lineHeight: "1.5" }}>
-          このゲームは横画面専用です。
-          <br />
-          スマホを横向きにしてください。
-        </p>
-      </div>
-
       {/* 🌟🌟 追加：背景のWebPアニメーション 🌟🌟 */}
       <div
         style={{
diff --git a/apps/client/src/scenes/title/TitleScene.tsx b/apps/client/src/scenes/title/TitleScene.tsx
index 5e571ac..aba28d8 100644
--- a/apps/client/src/scenes/title/TitleScene.tsx
+++ b/apps/client/src/scenes/title/TitleScene.tsx
@@ -36,24 +36,6 @@
         * {
           box-sizing: border-box;
         }
-        .portrait-blocker {
-          display: none;
-          position: fixed;
-          top: 0; left: 0; width: 100vw; height: 100dvh;
-          background: #111;
-          color: white;
-          z-index: 9999;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
-          text-align: center;
-          padding: 20px;
-        }
-        @media screen and (orientation: portrait) {
-          .portrait-blocker {
-            display: flex;
-          }
-        }
         /* 🌟 追加：文字を点滅させるアニメーション */
         @keyframes blink {
           0%, 100% { opacity: 1; }
@@ -61,12 +43,6 @@
         }
       `}</style>
 
-      {/* 縦画面時のブロック画面 */}
-      <div className="portrait-blocker">
-        <h2>画面を横向きにしてください</h2>
-        <p>Please rotate your device to landscape mode.</p>
-      </div>
-
       {/* 画面全体を覆う背景コンテナ */}
       <div
         style={{