add: yataiの装飾(absolute多用はここは許して欲しいです、、、)

src/components/garary/index.module.css

@@ -0,0 +1,61 @@
+h1{
+    font-size: 40px;
+}
+
+.title{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    padding: 16px;
+    margin: 0;
+}
+.nobori img{
+    position: absolute;
+    bottom: 0;
+    left: -240px;
+    height: 80vh;
+    aspect-ratio: 1 / 1;
+    z-index: -1;
+}
+
+.light img{
+    position: absolute;
+    top: 0;
+    left: 0px;
+    height: 80vh;
+    aspect-ratio: 1 / 1;
+    z-index: -1;
+}
+
+.container {
+    display: flex;
+    align-items: flex-end; 
+    position: absolute;
+    bottom: 16px; 
+    left: 4vw; 
+    z-index: 1;
+}
+
+.logo img {
+    height: 16vh;
+    aspect-ratio: 1 / 1;
+    margin-right: 2vw;
+}
+
+.shop {
+    color: var(--white);
+    font-size: 4vw;
+    padding: 16px;
+    margin: 0;
+}
+
+.light-right img{
+    position: absolute;
+    top: 0;
+    right: 0px;
+    height: 80vh;
+    aspect-ratio: 1 / 1;
+    z-index: -1;
+    transform: scale(-1, 1);
+}

src/components/garary/index.tsx

@@ -0,0 +1,25 @@
+import styles from "./index.module.css"
+
+function Garally() {
+    return (
+        <div>
+            <h1 className={styles.title}>VIRTUAL_NATSUMATSURI</h1>
+            <div className={styles.nobori}>
+                <img src="/2D_material/nobori.webp" alt="夏祭り_のぼり" />
+            </div>
+            <div className={styles.light}>
+                <img src="/2D_material/red_small_lite.webp" alt="提灯" />
+            </div>
+            <div className={styles.container}>
+                <div className={styles.logo}>
+                    <img src="/logo.webp" alt="logo" />
+                </div>
+                <p className={styles.shop}>VIRTUAL_NATSUMATSURI</p>
+            </div>
+            <div className={styles["light-right"]}>
+                <img src="/2D_material/red_small_lite.webp" alt="提灯" />
+            </div>
+        </div>
+    )
+}
+export default Garally;

src/pages/yatai/index.module.css

@@ -12,6 +12,7 @@
 .canvas {
   width: 100%;
   height: 100%;
+  background-color: transparent;
 }
 
 .target {

src/pages/yatai/index.tsx

@@ -16,6 +16,7 @@ import {
 	type Target,
 } from "../../type/shooting";
 import styles from "./index.module.css";
+import Garally from "../../components/garary";
 
 const YataiStage = memo(() => {
 	// 土台
@@ -216,6 +217,7 @@ function Yatai() {
 		<div className={styles.container}>
 			<YataiStage />
 			<TargetOverlay />
+			<Garally/>
 		</div>
 	);
 }