/* リセット */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 全体 */ body { font-family: sans-serif; line-height: 1.6; padding: 20px; background-color: #f8f9fa; color: #333; } /* 見出し */ h1, h2 { margin-bottom: 16px; color: #222; } /* ドロップゾーン */ .drop-zone { border: 2px dashed #bbb; border-radius: 8px; background-color: #fff; padding: 40px; text-align: center; color: #777; transition: background-color 0.2s, border-color 0.2s; margin-bottom: 24px; } .drop-zone.dragover { background-color: #e9f5ff; border-color: #007bff; color: #007bff; } /* ファイル選択ラベル */ .file-label { display: inline-block; padding: 10px 16px; background-color: #007bff; color: #fff; border-radius: 4px; cursor: pointer; margin-bottom: 24px; transition: background-color 0.2s; } .file-label:hover { background-color: #0056b3; } .file-label input { display: none; } /* プレビューコンテナ */ .preview-container { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 24px; } .preview-container img, .preview-container canvas { max-width: 100%; display: block; margin-bottom: 8px; } .preview-container p { font-size: 0.9rem; color: #555; } /* リサイズ設定 */ .resize-controls { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 24px; } .resize-controls label { display: block; margin-bottom: 12px; font-size: 0.95rem; color: #444; } .resize-controls input[type="number"] { width: 80px; padding: 6px; margin-left: 8px; border: 1px solid #ccc; border-radius: 4px; } .resize-controls input[type="checkbox"] { margin-left: 8px; transform: translateY(2px); } /* リサイズ・リセットボタン */ #resizeButton, #resetButton { display: inline-block; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } #resizeButton { background-color: #28a745; color: #fff; } #resizeButton:hover { background-color: #218838; } #resetButton { margin-left: 8px; background-color: #dc3545; color: #fff; } #resetButton:hover { background-color: #c82333; } /* ダウンロードボタン */ #downloadButton { display: inline-block; padding: 10px 16px; text-decoration: none; background-color: #17a2b8; color: #fff; border-radius: 4px; transition: background-color 0.2s; } #downloadButton:hover:not(.disabled) { background-color: #117a8b; } #downloadButton.disabled { background-color: #6c757d; pointer-events: none; cursor: default; } header{align-items: center;  background-color:white;font-weight:500;transition:color 0.2s;padding:15px 20px}footer{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2rem;padding:2rem;background-color:#f8f8f8;color:#666666;font-size:0.875rem} 

a{font-size: 25px;}