Fix: HomePage

src/App.tsx

@@ -1,5 +1,4 @@
 import { Route, Routes } from "react-router-dom";
-import QRCodePage from "./pages/QRCodeGenerator";
 import Home from "./pages/home";
 import Shooter from "./pages/shooter";
 import Yatai from "./pages/yatai";
@@ -11,7 +10,6 @@ const AppRoutes = () => {
 				<Route path="/" element={<Home />} />
 				<Route path="/shooter" element={<Shooter />} />
 				<Route path="/yatai" element={<Yatai />} />
-				<Route path="/qrcode" element={<QRCodePage />} />
 			</Routes>
 		</>
 	);

src/components/responsive/homePC/index.module.css

@@ -48,7 +48,7 @@
   max-width: 48%;
 }
 .background-logo img {
-  height: 100vh;
+  height: 90vh;
   aspect-ratio: 1 / 1;
 }
 
@@ -57,26 +57,12 @@ li {
   padding: 0 32px;
 }
 
-.go-game-pc {
-  justify-content: center;
-  align-items: center;
-  width: 40%;
-  text-align: center;
-  z-index: 10;
-}
-
-.go-game-pc button {
-  width: 100%;
-  padding: 16px 0;
-  font-size: 24px;
-}
-
 .red-lite {
   opacity: 0.8;
   position: absolute;
   top: 2%;
-  width: 500px;
-  height: 500px;
+  width: 200px;
+  height: 200px;
   right: 0;
   z-index: -1;
 }
@@ -85,7 +71,7 @@ li {
   opacity: 0.2;
   position: absolute;
   top: 25%;
-  right: 8%;
+  right: 12px;
   transform: scale(-1, 1);
 }
 
@@ -95,14 +81,13 @@ li {
   right: 120px;
   width: 520px;
   height: 532px;
-  background-color: rgba(255, 255, 255, 0.8);
   z-index: 1;
 }
 
 .qr-scan {
   position: absolute;
-  bottom: 10%;
-  right: -50px;
+  bottom: 10px;
+  right: 0;
   z-index: 10;
 }
 
@@ -134,6 +119,11 @@ li {
   height: 100%;
 }
 
+.go-game-pc {
+  margin-left: 15%;
+  z-index: 10;
+}
+
 .qr-wrapper {
   display: flex;
   position: relative;

src/components/responsive/homePC/index.tsx

@@ -55,15 +55,15 @@ function HomePC() {
 			</div>
 			<div className={styles["left-container"]}>
 				<div className={styles["background-logo"]}>
-					<img
-						src="/logo.webp"
-						alt="背景にばーちゃるなつまつりのロゴ"
-						// width="680"
-						// height="680"
-					/>
+					<img src="/logo.webp" alt="背景にばーちゃるなつまつりのロゴ" />
 				</div>
 				<div className={styles["go-game-pc"]}>
-					<DefaultButton color="red" size="lg" onClick={handleClick}>
+					<DefaultButton
+						variant="outlined"
+						color="red"
+						size="lg"
+						onClick={handleClick}
+					>
 						射的へ向かう
 					</DefaultButton>
 				</div>
@@ -80,26 +80,24 @@ function HomePC() {
 						<img
 							src="/2D_material/scan.webp"
 							alt="qr-scan"
-							width="200"
-							height="200"
+							width="160"
+							height="160"
 						/>
 					</div>
 					<div className={styles["link-copy"]}>
 						<TextButton
 							text="共有リンクをコピー"
+							color="black"
+							size="md"
+							type="button"
 							onClick={() => copyStringToClipboard(url)}
 							underline={true}
 						/>
 					</div>
 				</div>
 			</div>
 			<div className={styles["red-lite"]}>
-				<img
-					src="/2D_material/red_lite.webp"
-					alt="赤提灯"
-					// width="500"
-					// height="500"
-				/>
+				<img src="/2D_material/red_lite.webp" alt="赤提灯" />
 			</div>
 			<div className={styles["pistol-img"]}>
 				<img

src/components/ui/Button/index.module.css

@@ -15,11 +15,12 @@
     }
 
     &[data-size="lg"] {
-      padding: 8px 48px;
-      font-size: 24px;
-      font-weight: bold;
+      padding: 4px 120px;
+      font-size: 40px;
+      font-weight: regular;
       border-radius: 4px;
       white-space: nowrap;
+      left: 
     }
 
     &[data-variant="contained"] {

src/components/ui/TextButton/index.module.css

@@ -7,7 +7,12 @@
     text-decoration: none;
     outline: none; 
     font-family: 'Yuji Syuku', serif;
+    transition: transform 0.2s;
+    outline: none;
 }
+.textButton:focus {
+    outline: none; 
+  }
 
 .textButton.sm {
     font-size: 12px;
@@ -24,3 +29,14 @@
 .underline {
     text-decoration: underline;
 }
+
+.textButton:active {
+    animation: bounce 0.3s;
+  }
+
+  @keyframes bounce {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+    100% { transform: scale(1); }
+  }
+