:root { --background: hsl(0, 0%, 100%); --foreground: hsl(20, 14.3%, 4.1%); --muted: hsl(60, 4.8%, 95.9%); --muted-foreground: hsl(25, 5.3%, 44.7%); --popover: hsl(0, 0%, 100%); --popover-foreground: hsl(20, 14.3%, 4.1%); --card: hsl(0, 0%, 100%); --card-foreground: hsl(20, 14.3%, 4.1%); --border: hsl(20, 5.9%, 90%); --input: hsl(20, 5.9%, 90%); --primary: hsl(142, 76%, 36%); --primary-foreground: hsl(138, 100%, 99%); --secondary: hsl(60, 4.8%, 95.9%); --secondary-foreground: hsl(24, 9.8%, 10%); --accent: hsl(60, 4.8%, 95.9%); --accent-foreground: hsl(24, 9.8%, 10%); --destructive: hsl(0, 84.2%, 60.2%); --destructive-foreground: hsl(60, 9.1%, 97.8%); --ring: hsl(20, 14.3%, 4.1%); --radius: 0.5rem; --success: hsl(122, 39%, 49%); --warning: hsl(35, 91%, 62%); --error: hsl(0, 84%, 60%); }
* { border-color: var(--border); }
/* 高齢者向け改善 */
body { font-family: 'Noto Sans JP', sans-serif; background-color: var(--background); color: var(--foreground); font-feature-settings: "rlig" 1, "calt" 1; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; font-size: 18px; line-height: 1.6; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.header { background: white; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); border-bottom: 1px solid hsl(20, 5.9%, 90%); padding: 1rem 0; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo-icon { width: 2.5rem; height: 2.5rem; background-color: var(--primary); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; }
.logo-text h1 { font-size: 1.25rem; font-weight: 700; color: hsl(20, 14.3%, 4.1%); margin: 0; }
.logo-text p { font-size: 0.875rem; color: hsl(25, 5.3%, 44.7%); margin: 0; }
.main { background-color: hsl(60, 4.8%, 95.9%); min-height: calc(100vh - 80px); padding: 2rem 0; }
.progress-indicator { margin-bottom: 2rem; }
.progress-steps { display: flex; justify-content: center; gap: 1rem; }
.step { display: flex; align-items: center; gap: 1rem; }
.step-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; transition: all 0.3s; }
.step-circle.active { background-color: var(--primary); color: white; }
.step-circle.inactive { background-color: hsl(60, 4.8%, 95.9%); color: hsl(25, 5.3%, 44.7%); }
.step-title { font-size: 0.875rem; font-weight: 500; }
.step-title.active { color: hsl(20, 14.3%, 4.1%); }
.step-title.inactive { color: hsl(25, 5.3%, 44.7%); }
.step-connector { width: 4rem; height: 1px; background-color: hsl(60, 4.8%, 95.9%); }
.grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 800px; margin: 0 auto; }
.card { background: white; border-radius: 0.5rem; border: 1px solid var(--border); overflow: hidden; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.card-header { padding: 1.5rem; border-bottom: 1px solid hsl(60, 4.8%, 95.9%); background-color: hsl(60, 4.8%, 95.9%); }
.card-title { font-size: 1.3rem; font-weight: 600; color: hsl(20, 14.3%, 4.1%); margin: 0 0 0.5rem 0; }
.card-description { font-size: 1.1rem; color: hsl(25, 5.3%, 44.7%); margin: 0; }
.card-content { padding: 1.5rem; }
.upload-area { border: 2px dashed hsl(20, 5.9%, 90%); border-radius: 0.5rem; padding: 2rem; text-align: center; cursor: pointer; transition: border-color 0.3s; }
.upload-area:hover { border-color: var(--primary); }
.upload-icon { width: 4rem; height: 4rem; background-color: hsl(60, 4.8%, 95.9%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: hsl(25, 5.3%, 44.7%); font-size: 2rem; }
.upload-text { font-size: 1.3rem; font-weight: 500; color: hsl(20, 14.3%, 4.1%); margin: 0 0 0.25rem 0; }
.upload-subtext { font-size: 1.1rem; color: hsl(25, 5.3%, 44.7%); margin: 0 0 1rem 0; }
.upload-format { font-size: 1rem; color: hsl(25, 5.3%, 44.7%); margin: 0; }
/* Form Styles */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.label { font-size: 1.1rem; font-weight: 500; color: hsl(20, 14.3%, 4.1%); margin-bottom: 0.5rem; display: block; }
.label.required::after { content: " *"; color: var(--destructive); }
.form-help { font-size: 1rem; color: hsl(25, 5.3%, 44.7%); margin-top: 0.25rem; display: block; }
/* Alert styles */
.alert { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-weight: 500; font-size: 1.1rem; }
.alert-success { background-color: hsl(142, 76%, 95%); color: hsl(142, 76%, 36%); border: 1px solid hsl(142, 76%, 85%); }
.alert-error { background-color: hsl(0, 84%, 95%); color: hsl(0, 84%, 60%); border: 1px solid hsl(0, 84%, 85%); }
.input { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--input); border-radius: 0.375rem; font-size: 1.1rem; background-color: white; transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; min-height: 3rem; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(142 76% 36% / 0.1); }
.input:readonly { background-color: hsl(60, 4.8%, 95.9%); color: hsl(25, 5.3%, 44.7%); }
.select { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--input); border-radius: 0.375rem; font-size: 1.1rem; background-color: white; cursor: pointer; min-height: 3rem; }
/* Button Styles */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 1px solid transparent; border-radius: 0.375rem; font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; background-color: transparent; }
.button-primary { background-color: var(--primary); color: white; }
.button-primary:hover { background-color: hsl(142, 76%, 32%); }
.button-success { background-color: var(--success); color: white; }
.button-success:hover { background-color: hsl(122, 39%, 44%); }
.button-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
.button-secondary:hover { background-color: hsl(60, 4.8%, 90%); }
.button-outline { background-color: transparent; color: var(--primary); border-color: var(--primary); }
.button-outline:hover { background-color: var(--primary); color: white; }
.button-danger { background-color: var(--destructive); color: white; }
.button-danger:hover { background-color: hsl(0, 84.2%, 55%); }
.button-small { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button.loading { position: relative; color: transparent; }
.button.loading::after { content: ""; position: absolute; width: 1rem; height: 1rem; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.button.loading::before { content: ""; position: absolute; width: 1rem; height: 1rem; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; }
.button.loading.button-primary::before { border-top-color: white; }
.button.loading.button-success::before { border-top-color: white; }
.button-full { width: 100%; }
/* Form Actions */
.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid hsl(60, 4.8%, 95.9%); }
.button-group { display: flex; gap: 0.75rem; }
/* Item Row Styles */
.item-row { background-color: hsl(60, 4.8%, 95.9%); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; }
.item-row:last-child { margin-bottom: 0; }
/* Confirmation Styles */
.confirmation-section { margin-bottom: 2rem; }
.confirmation-section h3 { font-size: 1.2rem; font-weight: 600; color: hsl(20, 14.3%, 4.1%); margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(60, 4.8%, 95.9%); }
.confirmation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.confirmation-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background-color: hsl(60, 4.8%, 95.9%); border-radius: 0.375rem; }
.confirmation-item label { font-size: 1.1rem; font-weight: 500; color: hsl(25, 5.3%, 44.7%); margin: 0; }
.confirmation-item span { font-size: 1.1rem; font-weight: 600; color: hsl(20, 14.3%, 4.1%); }
/* Items Table */
.items-table { overflow-x: auto; }
.items-table table { width: 100%; border-collapse: collapse; background-color: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.items-table th { background-color: hsl(60, 4.8%, 95.9%); padding: 0.75rem; text-align: left; font-size: 1.1rem; font-weight: 600; color: hsl(20, 14.3%, 4.1%); border-bottom: 1px solid hsl(60, 4.8%, 95.9%); }
.items-table td { padding: 0.75rem; text-align: left; font-size: 1.1rem; color: hsl(20, 14.3%, 4.1%); border-bottom: 1px solid hsl(60, 4.8%, 95.9%); }
.items-table tr:last-child td { border-bottom: none; }
.items-table tr:hover { background-color: hsl(60, 4.8%, 95.9%); }
.preview-content { background-color: white; padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border); }
.form-preview { max-width: 800px; margin: 0 auto; }
.form-preview h1 { text-align: center; font-size: 1.8rem; font-weight: 700; color: hsl(20, 14.3%, 4.1%); margin: 0 0 2rem 0; padding-bottom: 1rem; border-bottom: 2px solid var(--primary); }
.stamp-area { text-align: right; margin-bottom: 2rem; }
.stamp { display: inline-block; padding: 0.5rem 1rem; background-color: var(--primary); color: white; border-radius: 0.25rem; font-weight: 600; }
.form-section { margin-bottom: 2rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.form-label { font-weight: 600; color: hsl(25, 5.3%, 44.7%); font-size: 1.1rem; }
.form-value { font-weight: 500; color: hsl(20, 14.3%, 4.1%); font-size: 1.1rem; }
.section-title { font-size: 1.3rem; font-weight: 600; color: hsl(20, 14.3%, 4.1%); margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(60, 4.8%, 95.9%); }
.sub-section { margin-bottom: 1.5rem; }
.action-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.hidden { display: none !important; }
@media print { .no-print { display: none !important; } body * { visibility: hidden; } .print-form-content, .print-form-content * { visibility: visible; } .print-form-content { position: absolute; left: 0; top: 0; width: 100%; background-color: white; padding: 2rem; font-family: 'Noto Sans JP', sans-serif; line-height: 1.6; } body { background-color: white; margin: 0; padding: 0; font-family: 'Noto Sans JP', sans-serif; line-height: 1.6; color: black; } .form-preview h1 { text-align: center; font-size: 1.5rem; font-weight: 700; margin: 0 0 2rem 0; padding-bottom: 1rem; border-bottom: 2px solid #000; } .form-section { margin-bottom: 2rem; } .form-row { margin-bottom: 1rem; } .section-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid #ccc; } .stamp-area { text-align: right; margin-bottom: 2rem; } .stamp { display: inline-block; padding: 0.5rem 1rem; background-color: #000; color: white; border-radius: 0.25rem; font-weight: 600; } .sub-section { margin-bottom: 1.5rem; } .form-value { font-weight: 500; } .form-label { font-weight: 600; color: #666; } }
@media (max-width: 1024px) { .grid { grid-template-columns: 1fr; } .action-buttons { flex-direction: column; align-items: center; } .form-actions { flex-direction: column; gap: 1rem; } .button-group { width: 100%; justify-content: center; } .form-row { grid-template-columns: 1fr; } .confirmation-grid { grid-template-columns: 1fr; } .items-table { font-size: 1rem; } .items-table th, .items-table td { padding: 0.5rem; } }
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.loading-overlay.hidden { display: none; }
.loading-overlay-content { background-color: white; padding: 3rem; border-radius: 0.5rem; text-align: center; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); max-width: 320px; width: 80%; }
.loading-overlay-spinner { width: 4rem; height: 4rem; border: 4px solid hsl(60, 4.8%, 95.9%); border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1.5rem; }
.loading-overlay-text { font-size: 1.3rem; font-weight: 500; color: hsl(20, 14.3%, 4.1%); margin: 0 0 0.5rem 0; }
.loading-overlay-subtext { font-size: 1.1rem; color: hsl(25, 5.3%, 44.7%); margin: 0; }
/* Dialog Styles */
.dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.dialog-overlay.hidden { display: none; }
.dialog { background: white; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); max-width: 400px; width: 100%; max-height: 95vh; overflow-y: auto; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--border); }
.dialog-header h3 { margin: 0; font-size: 1.3rem; font-weight: 600; color: var(--foreground); }
.dialog-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--muted-foreground); padding: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; transition: background-color 0.2s; }
.dialog-close:hover { background-color: var(--muted); }
.dialog-content { padding: 1.5rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1.5rem; border-top: 1px solid var(--border); background-color: var(--muted); }
/* Header Actions */
.header-actions { display: flex; gap: 0.75rem; align-items: center; }
/* Signature Area */
.signature-area { border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; background-color: var(--muted); }
#signatureCanvas { border: 1px solid var(--border); border-radius: 0.25rem; background-color: white; cursor: crosshair; display: block; margin-bottom: 0.75rem; }
.signature-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Toast Styles */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 10000; display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none; }
.toast { min-width: 300px; max-width: 500px; padding: 1rem 1.5rem; border-radius: 0.5rem; font-size: 1.1rem; font-weight: 500; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); opacity: 0; transform: translateX(100%); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: auto; word-wrap: break-word; white-space: pre-line; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { background-color: hsl(142, 76%, 95%); color: hsl(142, 76%, 36%); border: 1px solid hsl(142, 76%, 85%); }
.toast-error { background-color: hsl(0, 84%, 95%); color: hsl(0, 84%, 60%); border: 1px solid hsl(0, 84%, 85%); }
@media (max-width: 768px) { .toast-container { top: 0.5rem; right: 0.5rem; left: 0.5rem; } .toast { min-width: auto; max-width: 100%; } }