/* =========================
  🌼 Navigation
========================= */
.mikoto-navbar {
  background: rgb(180, 42, 35);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(80, 20, 20, 0.3);
}

.site-nav-ul {
  display: flex;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 10px 16px;
  flex-wrap: wrap;
}
.site-nav-ul a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
}
.site-nav-ul a:hover {
  background: rgba(255, 255, 255, 0.18);
}
.site-nav-ul a.mikoto-nav-ul {
  position: relative;
  display: inline-block;
}
.site-nav-ul a.mikoto-nav-ul.is-active::after {
  content: "";
  position: absolute;

  /* 右斜め上の位置 */
  top: -7px;
  right: -10px;

  width: 25px;
  height: 25px;

  background-image: url("../images/icon_flower_nav.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}


/* ナビメニュープルダウンメニュー用 */
.mikoto-nav-item {
  position: relative;
}

.mikoto-nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--mikoto-blue);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(70, 40, 30, 0.16);
  z-index: 9999;
}

.mikoto-nav-item.has-submenu:hover .mikoto-nav-submenu,
.mikoto-nav-item.has-submenu:focus-within .mikoto-nav-submenu {
  display: grid;
  gap: 6px;
}

.mikoto-nav-item.has-submenu .mikoto-nav-submenu-title {
  display: block;
  padding: 2px 2px;
  color: #b4654b;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.96rem;
}
.mikoto-nav-item.has-submenu .mikoto-nav-submenu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #5a3528;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9rem;
}

.mikoto-nav-item.has-submenu .mikoto-nav-submenu a:hover,
.mikoto-nav-item.has-submenu .mikoto-nav-submenu a:focus {
  color: #3f2b22 !important;
  background: rgba(105, 126, 150, 0.12);
}

@media (max-width: 767px) {
  .mikoto-nav-submenu {
    display: none !important;
  }
}