/* メガメニューのベーススタイル */
.has-mega-menu {
  position: relative;
}

/* すべてのメガメニュークラスに適用 */
li.mega01,
li.mega02,
li.mega03,
li.mega04,
li.mega05,
li.mega06,
li.mega07,
li.mega08,
li.mega09,
li.mega10 {
  position: relative;
}

.has-mega-menu>a,
li.mega01>a,
li.mega02>a,
li.mega03>a,
li.mega04>a,
li.mega05>a,
li.mega06>a,
li.mega07>a,
li.mega08>a,
li.mega09>a,
li.mega10>a {
  position: relative;
}

.has-mega-menu>a::after,
li.mega01>a::after,
li.mega02>a::after,
li.mega03>a::after,
li.mega04>a::after,
li.mega05>a::after,
li.mega06>a::after,
li.mega07>a::after,
li.mega08>a::after,
li.mega09>a::after,
li.mega10>a::after {
  content: "\f0d7";
  /* FontAwesomeの下矢印アイコン */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 5px;
}

/* メガメニューコンテンツの基本スタイル */
.mega-menu-content,
.mega01-content,
.mega02-content,
.mega03-content,
.mega04-content,
.mega05-content,
.mega06-content,
.mega07-content,
.mega08-content,
.mega09-content,
.mega10-content {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  /* background: #fff; */
  padding: 16px 0;
  /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
  z-index: 1000;
  border-radius: 0 0 4px 4px;
  transform: translateY(10px);
  /* アニメーション用の設定 */
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* メガメニューを表示 - すべてのメガメニューに対応 */
.has-mega-menu:hover .mega-menu-content,
li.mega01:hover .mega01-content,
li.mega02:hover .mega02-content,
li.mega03:hover .mega03-content,
li.mega04:hover .mega04-content,
li.mega05:hover .mega05-content,
li.mega06:hover .mega06-content,
li.mega07:hover .mega07-content,
li.mega08:hover .mega08-content,
li.mega09:hover .mega09-content,
li.mega10:hover .mega10-content {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
}

/* 特にメガメニュー02のスタイルを強調 */
li.mega02 .mega02-content {
  z-index: 1001;
  /* 他のメガメニューより前面に */
}

/* メガメニュー内のウィジェットスタイル */
.mega-menu-widget {
  margin-bottom: 20px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}

.mega-menu-widget:last-child {
  margin-bottom: 0;
}

/* メガメニューコンテンツの内部レイアウト */
.mega-menu-content .inner-container,
.mega01-content .inner-container,
.mega02-content .inner-container,
.mega03-content .inner-container,
.mega04-content .inner-container,
.mega05-content .inner-container,
.mega06-content .inner-container,
.mega07-content .inner-container,
.mega08-content .inner-container,
.mega09-content .inner-container,
.mega10-content .inner-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  background: #FFF;
}

/* ウィジェット内のブロックエディタコンテンツ */
.mega-menu-content .wp-block-columns,
.mega01-content .wp-block-columns,
.mega02-content .wp-block-columns,
.mega03-content .wp-block-columns,
.mega04-content .wp-block-columns,
.mega05-content .wp-block-columns,
.mega06-content .wp-block-columns,
.mega07-content .wp-block-columns,
.mega08-content .wp-block-columns,
.mega09-content .wp-block-columns,
.mega10-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 0;
  width: 100%;
}

.mega-menu-content .wp-block-column,
.mega01-content .wp-block-column,
.mega02-content .wp-block-column,
.mega03-content .wp-block-column,
.mega04-content .wp-block-column,
.mega05-content .wp-block-column,
.mega06-content .wp-block-column,
.mega07-content .wp-block-column,
.mega08-content .wp-block-column,
.mega09-content .wp-block-column,
.mega10-content .wp-block-column {
  flex: 1;
  min-width: 0;
}

/* 各メガメニュー用の個別スタイル */
/* メガメニュー01のスタイル */
.mega01-content {
  /* デフォルトスタイル - 必要に応じてカスタマイズ */
}

/* メガメニュー02のスタイル */
.mega02-content {
  /* デフォルトスタイル - 必要に応じてカスタマイズ */
}

/* メガメニュー03のスタイル */
.mega03-content {
  /* デフォルトスタイル - 必要に応じてカスタマイズ */
}

/* ウィジェットが設定されていない場合のメッセージ */
.mega-menu-empty {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  color: #6c757d;
  text-align: center;
}

.mega-menu-empty p {
  margin: 5px 0;
}

/* モバイル対応 */
@media (max-width: 1023px) {

  .mega-menu-content,
  .mega01-content,
  .mega02-content,
  .mega03-content,
  .mega04-content,
  .mega05-content,
  .mega06-content,
  .mega07-content,
  .mega08-content,
  .mega09-content,
  .mega10-content {
    position: static;
    width: 100%;
    min-width: auto;
    transform: none;
    left: 0;
    right: 0;
    box-shadow: none;
    padding: 15px 0;
    background: #f5f5f5;
    margin-top: 0;
    /* モバイル用のアニメーション設定 */
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none;
  }

  /* モバイルでのホバー制御を無効化 */
  .has-mega-menu:hover .mega-menu-content,
  li.mega01:hover .mega01-content,
  li.mega02:hover .mega02-content,
  li.mega03:hover .mega03-content,
  li.mega04:hover .mega04-content,
  li.mega05:hover .mega05-content,
  li.mega06:hover .mega06-content,
  li.mega07:hover .mega07-content,
  li.mega08:hover .mega08-content,
  li.mega09:hover .mega09-content,
  li.mega10:hover .mega10-content {
    display: none;
    transform: none;
  }

  /* モバイルでのクリック展開時のみ表示 */
  .has-mega-menu .mega-menu-content.active,
  li.mega01 .mega01-content.active,
  li.mega02 .mega02-content.active,
  li.mega03 .mega03-content.active,
  li.mega04 .mega04-content.active,
  li.mega05 .mega05-content.active,
  li.mega06 .mega06-content.active,
  li.mega07 .mega07-content.active,
  li.mega08 .mega08-content.active,
  li.mega09 .mega09-content.active,
  li.mega10 .mega10-content.active {
    display: block;
  }

  .mega-menu-content .wp-block-columns,
  .mega01-content .wp-block-columns,
  .mega02-content .wp-block-columns,
  .mega03-content .wp-block-columns,
  .mega04-content .wp-block-columns,
  .mega05-content .wp-block-columns,
  .mega06-content .wp-block-columns,
  .mega07-content .wp-block-columns,
  .mega08-content .wp-block-columns,
  .mega09-content .wp-block-columns,
  .mega10-content .wp-block-columns {
    flex-direction: column;
    gap: 15px;
  }

  .mega-menu-content .wp-block-column,
  .mega01-content .wp-block-column,
  .mega02-content .wp-block-column,
  .mega03-content .wp-block-column,
  .mega04-content .wp-block-column,
  .mega05-content .wp-block-column,
  .mega06-content .wp-block-column,
  .mega07-content .wp-block-column,
  .mega08-content .wp-block-column,
  .mega09-content .wp-block-column,
  .mega10-content .wp-block-column {
    flex: auto;
  }

  .mega-menu-content .inner-container,
  .mega01-content .inner-container,
  .mega02-content .inner-container,
  .mega03-content .inner-container,
  .mega04-content .inner-container,
  .mega05-content .inner-container,
  .mega06-content .inner-container,
  .mega07-content .inner-container,
  .mega08-content .inner-container,
  .mega09-content .inner-container,
  .mega10-content .inner-container {
    padding: 0 15px;
  }
}

/* 重要なフッター相互作用の修正 - 必ず最後に配置すること */
body .mega-menu-content,
body .mega01-content,
body .mega02-content,
body .mega03-content,
body .mega04-content,
body .mega05-content,
body .mega06-content,
body .mega07-content,
body .mega08-content,
body .mega09-content,
body .mega10-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* メガメニューがフッターの余白に影響しないようにする */
body:not(.mega-menu-hover-enabled) .mega-menu-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega01-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega02-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega03-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega04-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega05-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega06-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega07-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega08-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega09-content:not(:hover):not(.active),
body:not(.mega-menu-hover-enabled) .mega10-content:not(:hover):not(.active) {
  display: none !important;
}

/* ホバー時のメガメニュー表示を明示的に有効化 */
.mega-menu-hover-enabled li.mega01:hover .mega01-content,
.mega-menu-hover-enabled li.mega02:hover .mega02-content,
.mega-menu-hover-enabled li.mega03:hover .mega03-content,
.mega-menu-hover-enabled li.mega04:hover .mega04-content,
.mega-menu-hover-enabled li.mega05:hover .mega05-content,
.mega-menu-hover-enabled li.mega06:hover .mega06-content,
.mega-menu-hover-enabled li.mega07:hover .mega07-content,
.mega-menu-hover-enabled li.mega08:hover .mega08-content,
.mega-menu-hover-enabled li.mega09:hover .mega09-content,
.mega-menu-hover-enabled li.mega10:hover .mega10-content,
.mega-menu-hover-enabled .has-mega-menu:hover .mega-menu-content {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s !important;
  left: 0 !important;
  right: 0 !important;
}