@charset "UTF-8";

.form-errors { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 20px; margin-bottom: 30px; }
.form-errors ul { list-style: none; margin: 0; padding: 0; }
.form-errors li { color: #dc2626; font-size: 14px; line-height: 1.8; margin-bottom: 8px; }
.form-errors li:last-child { margin-bottom: 0; }

.form-error { display: block; min-height: 20px; color: #dc2626; font-size: 13px; margin-top: 6px; }
.form-error:empty { display: none; }

.form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid { border-color: #dc2626; background: #fef2f2; }
.form-input.is-invalid:focus, .form-select.is-invalid:focus, .form-textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }
.form-input.is-valid, .form-select.is-valid, .form-textarea.is-valid { border-color: #16a34a; }

.contact-form { background: #fff; border-radius: 12px; padding: 40px; margin-bottom: 40px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.form-group { margin-bottom: 28px; }
.form-label { display: block; font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 8px; }
.form-label.required::after { content: "必須"; display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: #fff; background: #dc2626; border-radius: 4px; }

.form-input, .form-select, .form-textarea { width: 100%; padding: 12px 16px; font-size: 15px; font-family: var(--font-family); color: var(--color-text-primary); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 8px; transition: all var(--transition-ease); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-accent-blue); background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.form-textarea { resize: vertical; min-height: 150px; }
.form-help { margin-top: 6px; font-size: 13px; color: var(--color-text-muted); }

.form-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-text-secondary); cursor: pointer; }
.form-checkbox { width: 20px; height: 20px; margin-top: 2px; cursor: pointer; accent-color: var(--color-accent-blue); }
.form-checkbox-label a { color: #FE94BF; text-decoration: underline; }

.form-actions { display: flex; gap: 16px; justify-content: center; margin-top: 40px; }
.btn-primary, .btn-secondary { padding: 14px 40px; font-size: 15px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: all var(--transition-ease); font-family: var(--font-family); text-decoration: none; display: inline-block; text-align: center; }
.btn-primary {     color: #fff;
    background: #FE94BF;
    font-weight: 700;
    letter-spacing: .5px;}
.btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.btn-primary:disabled { background: #9ca3af; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary { color: var(--color-text-secondary); background: var(--color-bg-secondary); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-bg-tertiary); border-color: var(--color-text-muted); }

.confirm-content { background: #fff; border-radius: 12px; padding: 40px; margin-bottom: 40px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.confirm-list { margin: 0; }
.confirm-list dt { font-size: 14px; font-weight: 600; color: var(--color-text-muted); margin-top: 24px; margin-bottom: 8px; }
.confirm-list dt:first-child { margin-top: 0; }
.confirm-list dd { font-size: 15px; color: var(--color-text-primary); line-height: 1.8; padding: 12px 16px; background: var(--color-bg-secondary); border-radius: 6px; }
.confirm-message { white-space: pre-wrap; word-wrap: break-word; }
.form-inline { display: inline; }

.complete-message { background: #fff; border-radius: 12px; padding: 60px 40px; margin-bottom: 40px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.complete-icon { width: 80px; height: 80px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #dcfce7; }
.complete-icon svg { color: #16a34a; }
.complete-icon.error { background: #fef2f2; }
.complete-icon.error svg { color: #dc2626; }
.complete-title { font-size: 28px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 16px; }
.complete-description { font-size: 15px; color: var(--color-text-secondary); line-height: 1.8; margin-bottom: 12px; }
.complete-note { font-size: 13px; color: var(--color-text-muted); margin-bottom: 32px; }
.complete-actions { margin-top: 32px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
    .contact-form, .confirm-content, .complete-message { padding: 30px 25px; }
    .form-actions, .complete-actions { flex-direction: column; }
    .btn-primary, .btn-secondary { width: 100%; }
    .complete-message { padding: 40px 25px; }
    .complete-title { font-size: 24px; }
}