/* ==========================================
   ロゴテキスト デザイン調整（美的風・高級感）
   ========================================== */

/* 1. ロゴ全体の親要素 */
.site-name-text a {
  display: flex !important;
  flex-direction: column !important; /* 上下に配置 */
  align-items: center !important;    /* 中央揃え */
  text-decoration: none !important;
  line-height: 1.2 !important;
}

/* 2. メインブランド名「AENQIA」の設定 */
.site-name-text a {
  font-family: "Cinzel", "Cormorant Garamond", "Times New Roman", "YuMincho", serif !important; /* 優美な明朝・ローマン系フォント */
  font-size: 28px !important;            /* メイン文字の大きさ */
  font-weight: 600 !important;           /* ほどよい太さ */
  letter-spacing: 0.18em !important;      /* 文字間隔を広く開けてエレガントに */
  color: #2b2b2b !important;             /* 高級感のあるダークグレー */
  transition: opacity 0.3s ease;
}

/* 3. 読み方「-エンキア-」（サブテキスト）の設定 */
.site-name-text a::after {
  content: '- エンキア -';               /* サブテキストを自動付与 */
  display: block;
  font-family: "Yu Gothic", "游ゴシック", "Meiryo", sans-serif !important;
  font-size: 10px !important;            /* 小さめのサイズ */
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;     /* やや広めの文字間隔 */
  color: #999999 !important;             /* 控えめなグレー */
  margin-top: 4px;                       /* メインロゴとの間隔 */
}

/* マウスを乗せたときのほんのり透過 */
.site-name-text a:hover {
  opacity: 0.75;
}

/* ==========================================
   ヘッダー・メニューの背景色を完全に「白」に強制固定
   ========================================== */

/* ヘッダー関連の全パーツの背景色・グラデーションをリセットして白にする */
header.header,
.header-in,
#header-container,
.navi,
.navi-in,
#navi-in,
.mobile-header,
.mobile-menu-buttons {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ヘッダー全体にほんのり上品な薄い影をつけて境界線をすっきり見せる */
.header-container,
header.header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  border-bottom: 1px solid #f2f2f2 !important;
}

/* メニューの文字色を白から濃いグレー（#333）へ変更して見やすくする */
.navi-in a,
.navi-in a span,
.mobile-menu-buttons .mobile-menu-button {
  color: #333333 !important;
}

/* メニューにマウスを乗せた時の文字色（アクセント用ピンク） */
.navi-in a:hover {
  color: #e63967 !important;
  background-color: #fdf2f5 !important; /* ほんのり薄ピンクのホバー色 */
}