/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* 
-------------------------------------------------------------- */
/* Theme customization starts here
-------------------------------------------------------------- */
/* --- ナビ項目の説明文を中央＆タイトル直下に配置 --- */
.main-navigation .menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央揃え */
}

/* 説明文の基本スタイル */
.main-navigation .menu-item-description {
  display: block;
  font-size: 0.65em;
  color: #777;
  line-height: 0.2;
  margin-top: 2px; /* タイトルとの間隔を最小限に */
  position: relative;
  top: 0; /* underlineより上に */
  opacity: 0.6;
}

/* Kadence特有の下線装飾との干渉を防ぐ */
.main-navigation .menu-item > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 下線アニメーションが説明文にかからないように調整 */
.main-navigation .menu-item > a::after {
  bottom: -2px !important; /* 下線を説明文より上に維持 */
}
/* --- Kadenceナビ下線を説明文の下に下げる --- */
.main-navigation .menu-item > a::after {
  bottom: -1.4em !important; /* 数値を調整して説明文の下に下げる */
}
.main-navigation .menu-item-description {
  margin-top: 2px;
  line-height: 1.2;
}
/* --- hover時の下線色も指定したい場合 --- */
.main-navigation .menu-item > a:hover::after {
  background-color: #005E9C !important; /* hover時の下線色 */
}
/* --- アクティブ（現在のページ）の下線色 --- */
.main-navigation .current-menu-item > a::after,
.main-navigation .current-menu-parent > a::after {
  width: 100%;
  background-color: #005E9C !important; /* ←ここでアクティブ色を指定 */
}
/* --- 説明文をスマートフォン＆タブレットでは非表示にする --- */
@media (max-width: 1024px) {
  .main-navigation .menu-item-description {
    display: none !important;
  }
}
/* アクティブページの説明文の色を変更 */
.main-navigation .current-menu-item .menu-item-description,
.main-navigation .current-menu-parent .menu-item-description {
  color: #fe0000 !important;
}