/* ユーザー登録フォームのスタイル */
.user-registration {
  max-width: 100%;
}

.fas {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* スピナーアニメーション */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* フォームフィードバック */
.valid-feedback {
  display: block;
  color: #28a745;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* アニメーション効果 */
.step {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}