/* --- Contact Form Layout --- */
.contact-wrap {
  max-width: 700px;
  margin: 0 auto;
}

.contact-form {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label {
  font-family: var(--font-serif-ja);
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.label-required {
  font-size: var(--font-size-xs);
  background-color: var(--color-brand-orange);
  color: var(--color-bg);
  padding: 1px 6px;
  font-weight: normal;
}

.label-optional {
  font-size: var(--font-size-xs);
  background-color: var(--color-text-muted);
  color: var(--color-bg);
  padding: 1px 6px;
  font-weight: normal;
}

.form-control {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  background-color: #FFF;
  font-size: var(--font-size-base);
  color: var(--color-text-main);
  transition: var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
}

.form-error-msg {
  font-size: var(--font-size-xs);
  color: var(--color-brand-orange);
  display: none; /* JSでエラー時に block に切り替え */
}

.form-control.has-error {
  border-color: var(--color-brand-orange);
  background-color: rgba(185, 103, 50, 0.05);
}

/* Completion Screen */
.contact-completion {
  display: none; /* JSで送信成功時に block に切り替え */
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.completion-icon {
  font-size: var(--font-size-4xl);
  color: var(--color-brand-green);
  margin-bottom: var(--space-sm);
}

.completion-title {
  font-family: var(--font-serif-ja);
  font-size: var(--font-size-xl);
  font-weight: bold;
  margin-bottom: var(--space-sm);
}

.completion-desc {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}