diff --git a/apps/client/src/scenes/lobby/LobbyScene.tsx b/apps/client/src/scenes/lobby/LobbyScene.tsx
index 5d9485c..578fb65 100644
--- a/apps/client/src/scenes/lobby/LobbyScene.tsx
+++ b/apps/client/src/scenes/lobby/LobbyScene.tsx
@@ -14,6 +14,7 @@
 
   return (
     <>
+      \n{" "}
       <style>{`
         /* 全てのエレメントの幅・高さ計算に余白(padding)を含める魔法のCSS */
         * {
@@ -50,7 +51,6 @@
           border-radius: 4px;
         }
       `}</style>
-
       <div className="portrait-blocker">
         <div style={{ fontSize: "4rem", marginBottom: "20px" }}>🔄</div>
         <p style={{ margin: 0, lineHeight: "1.5" }}>
@@ -59,128 +59,145 @@
           スマホを横向きにしてください。
         </p>
       </div>
-
       <div
         className="lobby-container"
         style={{
-          padding: "20px" /* 🌟 余白をスマホ向けに少しスッキリと */,
+          padding: "20px",
           color: "white",
           background: "#222",
-          height:
-            "100dvh" /* 🌟 vhではなくdvh(スマホのURLバー等を考慮した正確な高さ)を使用 */,
+          height: "100dvh",
           width: "100vw",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          justifyContent: "center" /* 🌟 縦方向も中央揃えに */,
         }}
       >
         <h2
-          style={{ fontSize: "clamp(1.5rem, 4vw, 2rem)", margin: "0 0 10px 0" }}
+          style={{ fontSize: "clamp(1.5rem, 4vw, 2rem)", margin: "0 0 15px 0" }}
         >
           ルーム: {room.roomId} (待機中)
         </h2>
 
+        {/* 🌟 ここから左右に分けるコンテナ (flexDirection: "row" に変更) */}
         <div
           style={{
-            margin: "10px 0",
-            background: "#333",
-            padding: "20px",
-            borderRadius: "8px",
-            width: "100%" /* 🌟 常に親要素の100%の幅にする */,
-            maxWidth:
-              "500px" /* 🌟 ただし、最大でも500pxまでしか広がらないようにする */,
             display: "flex",
-            flexDirection: "column",
-            maxHeight:
-              "50vh" /* 🌟 スマホ横画面では高さが厳しいので、リスト枠の高さも可変に */,
+            flexDirection: "row",
+            width: "100%",
+            maxWidth: "900px" /* 画面幅が広いPCでも間延びしないように */,
+            flexGrow: 1 /* 残りの高さをすべて使う */,
+            gap: "20px" /* 左右の要素の隙間 */,
+            minHeight: 0 /* flex要素内のスクロールを有効にするためのおまじない */,
           }}
         >
-          <h3
+          {/* 🌟 左半分: スタートボタン or 待機メッセージ */}
+          <div
             style={{
-              borderBottom: "1px solid #555",
-              paddingBottom: "10px",
-              margin: "0 0 10px 0",
-              fontSize: "clamp(1rem, 3vw, 1.2rem)",
+              flex: 1 /* 左右で1:1の幅にする */,
+              display: "flex",
+              alignItems: "center" /* 上下中央揃え */,
+              justifyContent: "center" /* 左右中央揃え */,
+              padding: "10px",
             }}
           >
-            参加プレイヤー ({room.players.length}/{room.maxPlayers})
-          </h3>
-          <ul
-            style={{
-              listStyle: "none",
-              padding: 0,
-              margin: 0,
-              fontSize: "1.1rem",
-              overflowY:
-                "auto" /* 🌟 maxHeightを親に任せて、ここではみ出し分をスクロール */,
-              flexGrow: 1 /* 🌟 親枠の中で余った高さを全部使う */,
-            }}
-          >
-            {room.players.map((p: roomTypes.RoomMember) => (
-              <li
-                key={p.id}
+            {isMeOwner ? (
+              <button
+                onClick={onStart}
                 style={{
-                  margin: "10px 0",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
+                  width: "100%",
+                  maxWidth: "350px" /* ボタンが横に伸びすぎないように制限 */,
+                  padding: "20px",
+                  fontSize: "clamp(1.2rem, 3vw, 1.8rem)",
+                  cursor: "pointer",
+                  backgroundColor: "#4ade80",
+                  color: "#111",
+                  border: "none",
+                  borderRadius: "8px",
+                  fontWeight: "bold",
+                  boxShadow: "0 4px 6px rgba(0,0,0,0.3)" /* 立体感を追加 */,
                 }}
               >
-                <span>{p.id === myId ? "🟢" : "⚪"}</span>
-                <span style={{ fontWeight: p.id === myId ? "bold" : "normal" }}>
-                  {p.name}
-                </span>
-                {p.isOwner && <span style={{ fontSize: "0.9em" }}>👑</span>}
-                {p.isReady && (
-                  <span style={{ marginLeft: "auto", fontSize: "0.9em" }}>
-                    ✅
-                  </span>
-                )}
-              </li>
-            ))}
-          </ul>
-        </div>
+                ゲームスタート
+              </button>
+            ) : (
+              <div
+                style={{
+                  width: "100%",
+                  maxWidth: "350px",
+                  padding: "20px",
+                  fontSize: "clamp(1.2rem, 3vw, 1.5rem)",
+                  backgroundColor: "#555",
+                  color: "#ccc",
+                  borderRadius: "8px",
+                  textAlign: "center",
+                  boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
+                }}
+              >
+                ホストの開始を待っています...
+              </div>
+            )}
+          </div>
 
-        <div
-          style={{
-            marginTop: "10px",
-            width: "100%",
-            maxWidth: "500px",
-            textAlign: "center",
-          }}
-        >
-          {isMeOwner ? (
-            <button
-              onClick={onStart}
+          {/* 🌟 右半分: 参加プレイヤーリスト */}
+          <div
+            style={{
+              flex: 1 /* 左右で1:1の幅にする */,
+              background: "#333",
+              padding: "20px",
+              borderRadius: "8px",
+              display: "flex",
+              flexDirection: "column",
+              minHeight: 0 /* これがないとスクロールが効かない場合がある */,
+              boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
+            }}
+          >
+            <h3
               style={{
-                width: "100%" /* 🌟 ボタンも押しやすいように幅広に */,
-                padding: "12px",
-                fontSize: "clamp(1.2rem, 3vw, 1.5rem)",
-                cursor: "pointer",
-                backgroundColor: "#4ade80",
-                color: "#111",
-                border: "none",
-                borderRadius: "8px",
-                fontWeight: "bold",
+                borderBottom: "1px solid #555",
+                paddingBottom: "10px",
+                margin: "0 0 10px 0",
+                fontSize: "clamp(1rem, 3vw, 1.2rem)",
               }}
             >
-              ゲームスタート
-            </button>
-          ) : (
-            <div
+              参加プレイヤー ({room.players.length}/{room.maxPlayers})
+            </h3>
+            <ul
               style={{
-                width: "100%",
-                padding: "12px",
-                fontSize: "clamp(1.2rem, 3vw, 1.5rem)",
-                backgroundColor: "#555",
-                color: "#ccc",
-                borderRadius: "8px",
+                listStyle: "none",
+                padding: 0,
+                margin: 0,
+                fontSize: "1.1rem",
+                overflowY: "auto",
+                flexGrow: 1,
+                paddingRight: "10px",
               }}
             >
-              ホストの開始を待っています...
-            </div>
-          )}
+              {room.players.map((p: roomTypes.RoomMember) => (
+                <li
+                  key={p.id}
+                  style={{
+                    margin: "10px 0",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                  }}
+                >
+                  <span>{p.id === myId ? "🟢" : "⚪"}</span>
+                  <span
+                    style={{ fontWeight: p.id === myId ? "bold" : "normal" }}
+                  >
+                    {p.name}
+                  </span>
+                  {p.isOwner && <span style={{ fontSize: "0.9em" }}>👑</span>}
+                  {p.isReady && (
+                    <span style={{ marginLeft: "auto", fontSize: "0.9em" }}>
+                      ✅
+                    </span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
       </div>
     </>