/* =========================
   通知コンテナ（右上固定）
========================= */
#notify-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== モバイル時だけ中央 ===== */
@media (max-width: 768px) {
  #notify-container {
    top: 50%;
    left: 50%;
    right: auto;
    width: calc(100% - 32px); /* 画面端に余白 */
    max-width: 360px;         /* デカくなりすぎ防止 */
  }
}
/* =========================
   通知カード本体
========================= */
.notify {
  pointer-events: auto;
  display: flex;
  align-items: center;   /* ← center に戻す */
  gap: 12px;

  background: rgba(255, 255, 255, 0.92);
  color: #222;

  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.08);

  animation: slideDown 0.35s ease-out;
}


/* =========================
   アイコン（位置ズレ修正）
========================= */
.notify-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;

  object-fit: cover;
  flex-shrink: 0;

  /* ★ここがズレ修正の本体 */
  margin-top: 2px;
}

/* =========================
   テキストブロック
========================= */
.notify-body {
  flex: 1;

  /* 視覚補正（任意だが推奨） */
  padding-top: 1px;
}

.notify-title {
  font-size: 0.8rem;
  color: #3a7f4f;
  margin-bottom: 2px;
}

.notify-message {
  font-size: 1rem;
  line-height: 1.4;
}

/* =========================
   閉じるボタン
========================= */
.notify-close {
  appearance: none;
  border: none;
  background: transparent;

  font-size: 1.1rem;
  cursor: pointer;
  color: #888;

  margin-left: 8px; /* ← 余白だけ */
}

.notify-close:hover {
  color: #000;
}


/* =========================
   出現アニメーション
========================= */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   モバイル対応
========================= */
@media (max-width: 480px) {
  #notify-container {
    top: 8px;
    right: 8px;
    left: auto;
  }

  .notify {
    max-width: calc(100vw - 16px);
  }
}