Update styles.css

styles.css

@@ -22,7 +22,7 @@ body {
 }
 
 .container {
-    max-width: 1200px;
+    max-width: 1000px;
     margin: 0 auto;
     background: white;
     border-radius: 8px;
@@ -87,13 +87,12 @@ h3 i {
 
 .editor-container {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     gap: 30px;
 }
 
 .image-preview {
-    flex: 1;
-    min-width: 300px;
+    width: 100%;
     border: 1px solid var(--border-color);
     border-radius: 4px;
     overflow: hidden;
@@ -111,8 +110,7 @@ h3 i {
 }
 
 .controls {
-    flex: 1;
-    min-width: 300px;
+    width: 100%;
     padding: 15px;
     background: var(--light-color);
     border-radius: 4px;
@@ -167,32 +165,18 @@ h3 i {
     font-weight: 500;
 }
 
-.hsl-controls {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-.hsl-slider label {
-    display: block;
-    margin-bottom: 5px;
-    font-size: 0.9em;
-}
-
-.hsl-slider input[type="range"] {
-    width: 100%;
-}
-
 .curve-controls {
     display: flex;
-    gap: 15px;
     flex-wrap: wrap;
+    gap: 15px;
+    justify-content: space-between;
 }
 
 .curve-container {
-    flex: 1;
-    min-width: 150px;
+    flex: 1 1 45%;
+    min-width: 200px;
     text-align: center;
+    margin-bottom: 15px;
 }
 
 .curve-container canvas {
@@ -200,17 +184,21 @@ h3 i {
     border-radius: 4px;
     background: white;
     margin-bottom: 5px;
+    width: 100%;
+    height: auto;
 }
 
 .curve-container label {
     font-size: 0.9em;
     color: var(--secondary-color);
+    display: block;
 }
 
 .action-buttons {
     display: flex;
     gap: 15px;
     margin-top: 25px;
+    flex-wrap: wrap;
 }
 
 .btn {
@@ -248,23 +236,6 @@ h3 i {
     background-color: #e9ecef;
 }
 
-@media (max-width: 768px) {
-    .editor-container {
-        flex-direction: column;
-    }
-    
-    .image-preview, .controls {
-        min-width: 100%;
-    }
-    
-    .curve-controls {
-        flex-direction: column;
-    }
-    
-    .curve-container {
-        min-width: 100%;
-    }
-}
 .loading-overlay {
     position: fixed;
     top: 0;
@@ -300,7 +271,6 @@ h3 i {
     100% { transform: rotate(360deg); }
 }
 
-/* 適用ボタンのスタイルを微調整 */
 #apply-btn {
     background-color: #28a745;
 }
@@ -309,7 +279,6 @@ h3 i {
     background-color: #218838;
 }
 
-/* ダウンロードボタンのスタイル調整 */
 #download-btn {
     background-color: var(--secondary-color);
     color: white;
@@ -317,4 +286,19 @@ h3 i {
 
 #download-btn:hover {
     background-color: #5a6268;
+}
+
+@media (max-width: 768px) {
+    .curve-container {
+        flex: 1 1 100%;
+    }
+    
+    .action-buttons {
+        flex-direction: column;
+    }
+    
+    .btn {
+        width: 100%;
+        justify-content: center;
+    }
 }