@charset "UTF-8";
/* * サトウ花店 ナビゲーション専用CSS (nav-bar.css)
 * Bootstrap 5 上書き用
 */

/* ナビゲーション全体に少しだけ影を落として立体感を出す（不要なら削除OK） */
.navbar {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ロゴ画像のレスポンシブ対応（スマホの時は少し縮小する） */
.navbar-brand img {
  max-width: 100%;
  height: auto;
  transition: width 0.3s ease;
}
@media (max-width: 991.98px) {
  .navbar-brand img {
    width: 200px; /* スマホ表示時は200pxに縮小 */
  }
}

/* リンクにマウスを乗せた時（ホバー）にサトウ花店カラーに光らせる魔法 */
.navbar-dark .navbar-nav .nav-link:hover {
  color: #c1994b; /* サトウ花店のテーマカラー（ゴールド/ベージュ） */
  transition: color 0.3s ease;
}

/* ドロップダウンメニューの角を少し丸くし、立体感を出す */
.dropdown-menu {
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
}

/* ドロップダウンの中身にマウスを乗せた時の色 */
.dropdown-item:hover {
  background-color: #FCF5ED; /* 薄い背景色 */
  color: #c1994b;
}

/* お問い合わせの文字サイズ微調整用 */
.nav-item .small {
  font-size: 0.85rem;
}

/* =========================================
   ドロップダウンの「にゅる、にゅる」アニメーション
   ========================================= */
.dropdown-menu.show {
  animation: nyuruAnimation 0.3s ease forwards;
}

@keyframes nyuruAnimation {
  0% {
    opacity: 0; /* 最初は透明 */
    transform: translateY(-10px); /* 10px上からスタート */
  }
  100% {
    opacity: 1; /* 完全に見える状態に */
    transform: translateY(0); /* 本来の位置へ着地 */
  }
}