Update index.html

index.html

@@ -508,94 +508,76 @@
           display: block;
         }
     </style>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            background-color: #0a192f; /* 暗い青 */
-            overflow: hidden;
-            height: 100vh;
-        }
-        
-        .wave-container {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-        }
-        
-        .wave {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(
-                to bottom,
-                transparent,
-                rgba(100, 200, 255, 0.1) 20%, /* 水色 */
-                rgba(100, 200, 255, 0.3) 50%,
-                rgba(100, 200, 255, 0.1) 80%,
-                transparent
-            );
-            opacity: 0.7;
-            z-index: -1;
-            animation: waveFlow 4s linear infinite;
-        }
-        
-        .wave:nth-child(2) {
-            animation-delay: 1s;
-            opacity: 0.5;
-        }
-        
-        .wave:nth-child(3) {
-            animation-delay: 2s;
-            opacity: 0.3;
-        }
-        
-        @keyframes waveFlow {
-            0% {
-                transform: translateY(-100%);
-            }
-            100% {
-                transform: translateY(100%);
-            }
-        }
-        
-        /* テクノロジー風のグリッド線を追加 */
-        .grid-lines {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image: 
-                linear-gradient(rgba(100, 200, 255, 0.1) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(100, 200, 255, 0.1) 1px, transparent 1px);
-            background-size: 50px 50px;
-            z-index: -2;
-        }
-        
-        /* 点滅するドットでテクノロジー感を追加 */
-        .tech-dots {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-        }
-        
-        .tech-dot {
-            position: absolute;
-            width: 3px;
-            height: 3px;
-            background-color: rgba(100, 200, 255, 0.7);
-            border-radius: 50%;
-            animation: blink 2s infinite alternate;
-        }
-        
-        @keyframes blink {
+<style>
+    html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        background-color: #0a192f;
+        overflow: hidden;
+    }
+            @keyframes blink {
             0% { opacity: 0.2; }
             100% { opacity: 0.8; }
         }
-    </style>
+    .wave-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-height: 100vh;
+    }
+    
+    /* グリッド線を最背面に */
+    .grid-lines {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: 
+            linear-gradient(rgba(100, 200, 255, 0.1) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(100, 200, 255, 0.1) 1px, transparent 1px);
+        background-size: 50px 50px;
+        z-index: 1;
+    }
+    
+    /* 波をグリッドの上に */
+    .wave {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+            to bottom,
+            transparent,
+            rgba(100, 200, 255, 0.1) 20%,
+            rgba(100, 200, 255, 0.3) 50%,
+            rgba(100, 200, 255, 0.1) 80%,
+            transparent
+        );
+        opacity: 0.7;
+        animation: waveFlow 4s linear infinite;
+        z-index: 2;
+    }
+    
+    /* テクノロジードットの修正 */
+    .tech-dots {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 3;
+    }
+    
+    .tech-dot {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background-color: rgba(100, 200, 255, 0.7);
+        border-radius: 50%;
+        animation: blink 2s infinite alternate;
+    }
+</style>
 
 </head>