@charset "UTF-8";
#wizard-steps { display: flex; text-align: center; align-items: center; justify-content: center; gap: 4px; border: var(--border-strong) var(--border-style) var(--border-color); background: var(--color-thin); border-radius: var(--radius-m); padding: var(--size-4-1); overflow-x: auto; }

#wizard-steps .step__item { position: relative; width: 25%; padding: var(--size-4-2) 0; color: var(--color-gray-strong); font-size: var(--font-xs); line-height: 1.4; border-radius: var(--radius-m); }

#wizard-steps .step__item.active { background: var(--color-primary); color: var(--color-white); }

@media (max-width: 576px) { #wizard-steps .step__item { font-size: 0.7rem; } }

#wizard-form { padding: var(--size-4-4) var(--size-4-4) var(--size-4-6) var(--size-4-4); background-color: var(--color-white); border-radius: var(--radius-m); border: var(--border-strong) solid var(--border-color); font-size: var(--font-s); }

#wizard-form label.form-label .asteriskField { padding: 0 var(--size-4-2); margin: auto var(--size-4-1); background-color: var(--color-important-alt); border-radius: var(--radius-s); color: var(--color-important); border: 1px dashed var(--color-important); line-height: 1; font-size: var(--font-xs); }

#wizard-form label.form-label .asteriskField::after { content: "必須"; }

#wizard-form select, #wizard-form textarea, #wizard-form input { font-weight: var(--weight-normal); font-size: var(--font-s); letter-spacing: 0.05em; }

#wizard-form .form-check-input { margin-top: 0.5em; }

#wizard-form textarea::placeholder { opacity: 0.5; }

#wizard-form .form-control:focus, #wizard-form .form-check-input:focus, #wizard-form .form-select:focus { outline: var(--border-strong) solid var(--color-primary); outline-offset: var(--border-strong); border: var(--divider); box-shadow: none; -webkit-box-shadow: none; }

#wizard-form .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }

#wizard-form .invalid-feedback { width: auto !important; }

#wizard-form .invalid-feedback::before { content: "!"; padding: 0 0.5rem; font-weight: bolder; }

#wizard-form .bootstrap-datetimepicker-widget thead * { background-color: var(--color-white) !important; }

#wizard-confirm-table { display: flex; gap: var(--size-4-2); overflow-x: auto; }

#wizard-confirm-table table { min-width: 300px; }

#wizard-confirm-table table th { width: 100px; }

#wizard-confirm-table table th, #wizard-confirm-table table td { padding: 3px var(--size-4-2); text-align: left; }

#wizard-confirm-table * { font-size: 14px; }

#wizard-btn-group { display: flex; justify-content: center; flex-direction: row-reverse; gap: var(--size-4-2); }

#wizard-btn-group button { --btn-padding: var(--size-4-3) var(--size-4-2); }

#wizard-btn-group :nth-child(1) { flex: 7; max-width: 400px; }

#wizard-btn-group :nth-child(2) { flex: 3; max-width: 250px; }

main > section:first-of-type { padding-top: var(--size-4-8) !important; }

@media (max-width: 1200px) { main > section:first-of-type { padding-top: var(--size-4-8) !important; } }