/* 背景（フェードイン） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s forwards;
}

/* モーダル本体（拡大しながらフェードイン） */
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  animation: scaleIn 0.5s forwards;
}

/* フェードイン */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 拡大アニメーション */
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* フェードアウト（背景） */
.fade-out {
  animation: fadeOut 0.5s forwards;
}

/* フェードアウト（モーダル本体） */
.fade-out-content {
  animation: fadeOutContent 0.5s forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeOutContent {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.8); opacity: 0; }
}