/* カスタマイズ用CSS */

/* スマホ用ハンバーガーメニューのスタイル修正 */
/* まず、すべての画面サイズで基本スタイルを適用 */
.ec-headerNavSP {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7) !important;
}

.ec-headerNavSP .fas,
.ec-headerNavSP i.fas,
.ec-headerNavSP i.fa-bars,
.ec-headerNavSP > i,
.ec-headerNavSP i {
  color: #000000 !important;
}

/* ドロワーメニュー（開いたメニュー）のスタイル修正 */
.ec-drawerRole,
.ec-drawerRole.is_active {
  background: #000000 !important;
  background-color: #000000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ドロワーメニュー内のすべてのテキストを白に設定 */
.ec-drawerRole,
.ec-drawerRole *,
.ec-drawerRole.is_active,
.ec-drawerRole.is_active * {
  color: #ffffff !important;
}

/* 検索エリアの背景とテキスト */
.ec-drawerRole .ec-headerSearchArea,
.ec-drawerRole.is_active .ec-headerSearchArea {
  background: #000000 !important;
  background-color: #000000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerSearchArea *,
.ec-drawerRole.is_active .ec-headerSearchArea * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerSearch,
.ec-drawerRole.is_active .ec-headerSearch {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerSearch *,
.ec-drawerRole.is_active .ec-headerSearch * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* カテゴリエリアの見出しとリンク */
.ec-drawerRole .ec-headerCategoryArea,
.ec-drawerRole.is_active .ec-headerCategoryArea {
  background: #000000 !important;
  background-color: #000000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerCategoryArea *,
.ec-drawerRole.is_active .ec-headerCategoryArea * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerCategoryArea__heading,
.ec-drawerRole.is_active .ec-headerCategoryArea__heading {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-top-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerCategoryArea__heading *,
.ec-drawerRole.is_active .ec-headerCategoryArea__heading * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-itemNav,
.ec-drawerRole .ec-itemNav *,
.ec-drawerRole.is_active .ec-itemNav,
.ec-drawerRole.is_active .ec-itemNav * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-itemNav__nav,
.ec-drawerRole .ec-itemNav__nav *,
.ec-drawerRole.is_active .ec-itemNav__nav,
.ec-drawerRole.is_active .ec-itemNav__nav * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-itemNav__nav li,
.ec-drawerRole.is_active .ec-itemNav__nav li {
  color: #ffffff !important;
  display: list-item !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-itemNav__nav li *,
.ec-drawerRole.is_active .ec-itemNav__nav li * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-itemNav__nav li a,
.ec-drawerRole.is_active .ec-itemNav__nav li a {
  color: #ffffff !important;
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom-color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-itemNav__nav li ul li a,
.ec-drawerRole.is_active .ec-itemNav__nav li ul li a {
  color: #ffffff !important;
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom-color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* リンクエリア */
.ec-drawerRole .ec-headerLinkArea,
.ec-drawerRole.is_active .ec-headerLinkArea {
  background: #000000 !important;
  background-color: #000000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerLinkArea *,
.ec-drawerRole.is_active .ec-headerLinkArea * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerLink__list,
.ec-drawerRole.is_active .ec-headerLink__list {
  border-top-color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerLink__list *,
.ec-drawerRole.is_active .ec-headerLink__list * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerLink__item,
.ec-drawerRole.is_active .ec-headerLink__item {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerLink__item *,
.ec-drawerRole.is_active .ec-headerLink__item * {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ec-drawerRole .ec-headerLink__icon,
.ec-drawerRole .ec-headerLink__icon *,
.ec-drawerRole.is_active .ec-headerLink__icon,
.ec-drawerRole.is_active .ec-headerLink__icon * {
  color: #ffffff !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* その他のドロワー内の要素 */
.ec-drawerRole p,
.ec-drawerRole span,
.ec-drawerRole div,
.ec-drawerRole a,
.ec-drawerRole li,
.ec-drawerRole ul,
.ec-drawerRole.is_active p,
.ec-drawerRole.is_active span,
.ec-drawerRole.is_active div,
.ec-drawerRole.is_active a,
.ec-drawerRole.is_active li,
.ec-drawerRole.is_active ul {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* メニュー内のすべての要素を確実に表示 */
.ec-drawerRole.is_active *,
.ec-drawerRole.is_active .ec-headerCategoryArea,
.ec-drawerRole.is_active .ec-headerCategoryArea *,
.ec-drawerRole.is_active .ec-itemNav,
.ec-drawerRole.is_active .ec-itemNav *,
.ec-drawerRole.is_active .ec-headerLinkArea,
.ec-drawerRole.is_active .ec-headerLinkArea *,
.ec-drawerRole.is_active .ec-headerSearchArea,
.ec-drawerRole.is_active .ec-headerSearchArea * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* リストアイテムとリンクを確実に表示 */
.ec-drawerRole.is_active .ec-itemNav__nav {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

.ec-drawerRole.is_active .ec-itemNav__nav li {
  display: list-item !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

.ec-drawerRole.is_active .ec-itemNav__nav li a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

.ec-drawerRole.is_active .ec-headerLink__list {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

.ec-drawerRole.is_active .ec-headerLink__item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* スマホ版（767px以下）での追加スタイル */
@media only screen and (max-width: 767.98px) {
  /* ハンバーガーメニュー本体のスタイル - 背景を白に強制 */
  .ec-headerNavSP,
  div.ec-headerNavSP,
  .ec-headerRole__navSP .ec-headerNavSP,
  .ec-headerNaviRole .ec-headerNavSP {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7) !important;
    z-index: 10000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* アイコン（ハンバーガーアイコン）を黒に設定 - すべてのパターンを網羅 */
  .ec-headerNavSP .fas,
  .ec-headerNavSP i.fas,
  .ec-headerNavSP i.fa-bars,
  .ec-headerNavSP > i,
  .ec-headerNavSP i,
  div.ec-headerNavSP .fas,
  div.ec-headerNavSP i.fas,
  div.ec-headerNavSP i.fa-bars,
  div.ec-headerNavSP > i,
  div.ec-headerNavSP i {
    color: #000000 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* ホバー時のスタイル */
  .ec-headerNavSP:hover,
  div.ec-headerNavSP:hover {
    background: #f0f0f0 !important;
    background-color: #f0f0f0 !important;
  }
  
  .ec-headerNavSP:hover .fas,
  .ec-headerNavSP:hover i.fas,
  .ec-headerNavSP:hover i.fa-bars,
  .ec-headerNavSP:hover > i,
  .ec-headerNavSP:hover i,
  div.ec-headerNavSP:hover .fas,
  div.ec-headerNavSP:hover i.fas,
  div.ec-headerNavSP:hover i.fa-bars,
  div.ec-headerNavSP:hover > i,
  div.ec-headerNavSP:hover i {
    color: #000000 !important;
  }
}