Update styles.css

styles.css

@@ -242,7 +242,7 @@ h3 i {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: transparent; /* 背景を透明に変更 */
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -259,11 +259,15 @@ h3 i {
     height: 50px;
     animation: spin 1s linear infinite;
     margin-bottom: 15px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* スピナーに影を追加 */
 }
 
 .loading-text {
-    color: white;
+    color: var(--dark-color); /* テキスト色をダークに変更 */
     font-size: 1.2em;
+    background-color: rgba(255,255,255,0.7); /* テキスト背景を半透明白に */
+    padding: 5px 10px;
+    border-radius: 4px;
 }
 
 @keyframes spin {