いろドリ豊かなトリたちをトリ入れた

torisetsu/src/jsMain/kotlin/components/base/ButtonStyle.kt

@@ -34,8 +34,6 @@ object ButtonStyle : StyleSheet(GlobalStyle) {
             }
         }
 
-
-
         backgroundImage("linear-gradient(#5772FF, #0054DD)")
         color(Color.white)
         fontWeight(700)

torisetsu/src/jsMain/kotlin/components/pages/TopPage.kt

@@ -72,4 +72,24 @@ fun TopPage(
             }
         }
     }
+
+    Div(
+        attrs = { classes(TopPageStyle.overlayBirds) }
+    ) {
+        Img(
+            src = "images/tori_left.png",
+            alt = "birds",
+            attrs = { classes(TopPageStyle.leftBirds) }
+        )
+        Img(
+            src = "images/tori_right.png",
+            alt = "birds",
+            attrs = { classes(TopPageStyle.rightBirds) }
+        )
+        Img(
+            src = "images/tori_center.png",
+            alt = "birds",
+            attrs = { classes(TopPageStyle.centerBirds) }
+        )
+    }
 }

torisetsu/src/jsMain/kotlin/components/pages/TopPageStyle.kt

@@ -80,4 +80,84 @@ object TopPageStyle : StyleSheet(GlobalStyle) {
             fontSize(12.px)
         }
     }
+
+    val overlayBirds by style {
+        position(Position.Fixed)
+        top(0.px)
+        left(0.px)
+        right(0.px)
+        bottom(0.px)
+        property("pointer-event", "none")
+        property("z-index", -1)
+        maxWidth(2000.px)
+    }
+
+    val leftBirds by style {
+        position(Position.Fixed)
+        left(0.px)
+        bottom(400.px)
+        property("width", "calc((100vw - 700px) / 2)")
+
+        media(mediaMaxWidth(1650.px)) {
+            self style {
+                bottom(300.px)
+                maxWidth(500.px)
+                width(50.percent)
+            }
+        }
+
+        media(mediaMaxWidth(1200.px)) {
+            self style {
+                bottom(250.px)
+                width(50.percent)
+            }
+        }
+        media(mediaMaxWidth(600.px)) {
+            self style {
+                bottom(180.px)
+            }
+        }
+    }
+
+    val rightBirds by style {
+        position(Position.Fixed)
+        right(0.px)
+        bottom(400.px)
+        property("width", "calc((100vw - 700px) / 2)")
+
+        media(mediaMaxWidth(1650.px)) {
+            self style {
+                bottom(300.px)
+                maxWidth(500.px)
+                width(50.percent)
+            }
+        }
+        media(mediaMaxWidth(1200.px)) {
+            self style {
+                bottom(250.px)
+                width(50.percent)
+            }
+        }
+        media(mediaMaxWidth(600.px)) {
+            self style {
+                bottom(180.px)
+            }
+        }
+    }
+
+    val centerBirds by style {
+        position(Position.Fixed)
+        bottom(20.px) // footerの高さ分あげる
+        width(100.percent)
+        minWidth(1500.px)
+        left(50.percent)
+        property("transform", "translateX(-50%)")
+        property("object-fit", "cover")
+
+        media(mediaMaxWidth(600.px)) {
+            self style {
+                minWidth(1000.px)
+            }
+        }
+    }
 }