/* =====================================================
   02_header.css
   ヘッダー・グローバルナビ
   - 星空背景 (.header, ::before/::after, @keyframes khhdr-drift-*)
   - グローバルナビ KH風 (.navi, .navi-in, .menu-header)
   - サブメニュー dark スタイル
   - スマホメニュー色統一
   - 最強オーバーライド (html body .header .navi a)
===================================================== */
   /* =========================================================
         Cocoonヘッダー：星空が流れる背景 (khhdr-)
         - 深い藍グラデ + 星の2レイヤーパララックス
         - 純CSS、軽量、reduced-motion 配慮
         ========================================================= */
   
   /* (1) ヘッダー本体に深い藍背景 */
   .header,
   header.header,
   .header-container {
     position: relative;
     overflow: hidden;
     isolation: isolate;
     background: radial-gradient(
         ellipse at 50% 0%,
         rgba(212, 175, 55, 0.1),
         transparent 60%
       ),
       linear-gradient(180deg, #050a1c 0%, #0c1a3a 55%, #1b2a4e 100%) !important;
     box-shadow: inset 0 -2px 0 rgba(212, 175, 55, 0.18),
       inset 0 -10px 28px rgba(212, 175, 55, 0.05);
   }
   
   /* (2) 近景の星 (くっきり・速め) */
   .header::before,
   header.header::before {
     content: "";
     position: absolute;
     inset: -2px 0 -2px 0;
     z-index: 0;
     pointer-events: none;
     background-image: radial-gradient(
         1px 1px at 10% 22%,
         #fff 50%,
         transparent 51%
       ),
       radial-gradient(1.2px 1.2px at 24% 78%, #fff 50%, transparent 51%),
       radial-gradient(1px 1px at 38% 35%, #fff 50%, transparent 51%),
       radial-gradient(1.4px 1.4px at 53% 62%, #fff 50%, transparent 51%),
       radial-gradient(1px 1px at 67% 18%, #fff 50%, transparent 51%),
       radial-gradient(1.2px 1.2px at 82% 48%, #fff 50%, transparent 51%),
       radial-gradient(1px 1px at 92% 82%, #fff 50%, transparent 51%);
     background-repeat: repeat;
     background-size: 600px 240px;
     opacity: 0.75;
     animation: khhdr-drift-near 90s linear infinite;
   }
   
   /* (3) 遠景の星 (細かい・遅め) */
   .header::after,
   header.header::after {
     content: "";
     position: absolute;
     inset: -2px 0 -2px 0;
     z-index: 0;
     pointer-events: none;
     background-image: radial-gradient(
         0.7px 0.7px at 7% 40%,
         #fdf6dc 50%,
         transparent 51%
       ),
       radial-gradient(0.7px 0.7px at 18% 12%, #fdf6dc 50%, transparent 51%),
       radial-gradient(0.7px 0.7px at 31% 70%, #fdf6dc 50%, transparent 51%),
       radial-gradient(0.7px 0.7px at 44% 30%, #fdf6dc 50%, transparent 51%),
       radial-gradient(0.7px 0.7px at 58% 85%, #fdf6dc 50%, transparent 51%),
       radial-gradient(0.7px 0.7px at 71% 50%, #fdf6dc 50%, transparent 51%),
       radial-gradient(0.7px 0.7px at 85% 20%, #fdf6dc 50%, transparent 51%),
       radial-gradient(0.7px 0.7px at 96% 65%, #fdf6dc 50%, transparent 51%);
     background-repeat: repeat;
     background-size: 380px 180px;
     opacity: 0.35;
     animation: khhdr-drift-far 180s linear infinite;
   }
   
   @keyframes khhdr-drift-near {
     from {
       background-position: 0 0;
     }
     to {
       background-position: -1200px 0;
     }
   }
   @keyframes khhdr-drift-far {
     from {
       background-position: 0 0;
     }
     to {
       background-position: -760px 0;
     }
   }
   
   /* (4) ヘッダー中身を星の上に出す */
   .header-in,
   .header .header-in,
   .header > *:not(::before):not(::after) {
     position: relative;
     z-index: 1;
   }
   
   /* (5) サイト名・キャッチを暗背景で映える色に */
   .site-name,
   .site-name-text,
   .site-name a,
   .site-name a:hover,
   .site-name a:visited {
     color: #fdf6dc !important;
     text-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
   }
   .site-description,
   .site-description-text,
   .site-description a {
     color: #c8d1ea !important;
   }
   
   /* (6) Cocoonヘッダーのロゴ画像が暗背景で見にくい場合の救済 (任意・必要時に外す) */
   /* .site-name-text-link img{ filter: brightness(1.05) drop-shadow(0 0 6px rgba(212,175,55,.3)); } */
   
   /* (7) グローバルナビ (PC): KH風アクセント
             半透明の藍バー + 金色の縦区切り + ホバー/アクティブで金グロー */
   .navi,
   .navi-in {
     background: linear-gradient(
       180deg,
       rgba(7, 17, 42, 0.55),
       rgba(12, 26, 58, 0.65)
     ) !important;
     border-top: 1px solid rgba(212, 175, 55, 0.2);
     border-bottom: 1px solid rgba(212, 175, 55, 0.2);
   }
   .navi-in > .menu-header {
     background: transparent !important;
   }
   .navi-in > .menu-header > li {
     border-right: 1px solid rgba(212, 175, 55, 0.15);
     transition: background-color 0.2s ease;
   }
   .navi-in > .menu-header > li:first-child {
     border-left: 1px solid rgba(212, 175, 55, 0.15);
   }
   .navi-in > .menu-header > li > a {
     position: relative;
     color: #fdf6dc !important;
     font-weight: 600;
     letter-spacing: 0.08em;
     background: transparent !important;
     transition: color 0.2s ease, background-color 0.2s ease, text-shadow 0.2s ease;
   }
   /* ホバー */
   .navi-in > .menu-header > li > a:hover,
   .navi-in > .menu-header > li:hover > a {
     color: #ffe8a0 !important;
     background-color: rgba(212, 175, 55, 0.1) !important;
     text-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
   }
   /* 現在のページ (current-menu-item) */
   .navi-in > .menu-header > li.current-menu-item > a,
   .navi-in > .menu-header > li.current_page_item > a,
   .navi-in > .menu-header > li.current-menu-ancestor > a {
     color: #ffe8a0 !important;
     background-color: rgba(212, 175, 55, 0.1) !important;
     text-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
   }
   /* ホバー時の金色アンダーライン (KH風キーアートの金ライン) */
   .navi-in > .menu-header > li > a::after {
     content: "";
     position: absolute;
     left: 14%;
     right: 14%;
     bottom: 6px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #d4af37, transparent);
     opacity: 0;
     transform: scaleX(0.4);
     transition: opacity 0.25s ease, transform 0.25s ease;
   }
   .navi-in > .menu-header > li:hover > a::after,
   .navi-in > .menu-header > li.current-menu-item > a::after,
   .navi-in > .menu-header > li.current_page_item > a::after,
   .navi-in > .menu-header > li.current-menu-ancestor > a::after {
     opacity: 1;
     transform: scaleX(1);
   }
   
   /* サブメニュー (ドロップダウン) */
   .navi-in .sub-menu {
     background: linear-gradient(180deg, #0c1a3a, #07112a) !important;
     border: 1px solid rgba(212, 175, 55, 0.25) !important;
     box-shadow: 0 10px 28px rgba(7, 17, 42, 0.45) !important;
   }
   .navi-in .sub-menu li {
     border-bottom: 1px solid rgba(212, 175, 55, 0.1);
   }
   .navi-in .sub-menu li:last-child {
     border-bottom: none;
   }
   .navi-in .sub-menu a {
     color: #fdf6dc !important;
     background: transparent !important;
   }
   .navi-in .sub-menu a:hover {
     color: #ffe8a0 !important;
     background-color: rgba(212, 175, 55, 0.1) !important;
   }
   
   /* (8) スマホメニュー (Cocoon: .menu-mobile-icon, .navi-menu-content) */
   .navi-menu-button,
   .menu-mobile-icon,
   .menu-mobile-icon-image {
     color: #fdf6dc !important;
   }
   .menu-mobile-icon-image .fa {
     color: #fdf6dc !important;
   }
   
   /* (8.5) 中画面〜スマホ：ナビ折り返し時の色と罫線を統一
         Cocoonのレスポンシブで暗色のリンクが優先される問題対策
         詳細度を上げるため #navi-in と複合セレクタで上書き */
   #navi-in .menu-header li a,
   #navi-in .menu-header li a:link,
   #navi-in .menu-header li a:visited,
   .navi .menu-header li a,
   .navi .menu-header li a:link,
   .navi .menu-header li a:visited,
   .navi-in .menu-header li a,
   .navi-in .menu-header li a:link,
   .navi-in .menu-header li a:visited {
     color: #fdf6dc !important;
     background: transparent !important;
   }
   
   #navi-in .menu-header li a:hover,
   .navi .menu-header li a:hover,
   .navi-in .menu-header li a:hover,
   #navi-in .menu-header li.current-menu-item > a,
   .navi-in .menu-header li.current-menu-item > a,
   #navi-in .menu-header li.current_page_item > a,
   .navi-in .menu-header li.current_page_item > a {
     color: #ffe8a0 !important;
     background-color: rgba(212, 175, 55, 0.1) !important;
     text-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
   }
   
   /* 折り返し時 (2列・1列) の縦区切りに加えて横区切りも金色に */
   @media (max-width: 1023px) {
     .navi-in > .menu-header > li {
       border-bottom: 1px solid rgba(212, 175, 55, 0.15);
     }
     .navi-in > .menu-header > li:nth-last-child(-n + 2) {
       /* 2列レイアウト時、最後の2つの下罫線を消す */
       border-bottom: 1px solid rgba(212, 175, 55, 0.15);
     }
     .navi-in > .menu-header > li:last-child {
       border-right: 1px solid rgba(212, 175, 55, 0.15);
     }
   }
   @media (max-width: 600px) {
     .navi-in > .menu-header > li {
       border-right: 1px solid rgba(212, 175, 55, 0.15);
       border-bottom: 1px solid rgba(212, 175, 55, 0.15);
     }
   }
   
   /* (9) ハンバーガー展開時のドロワー (Cocoon: .menu-drawer) */
   .menu-drawer,
   .menu-drawer ul,
   .menu-drawer li,
   .menu-drawer a,
   .menu-drawer a:link,
   .menu-drawer a:visited {
     background-color: rgba(7, 17, 42, 0.96) !important;
     color: #fdf6dc !important;
   }
   .menu-drawer li {
     border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important;
   }
   .menu-drawer a:hover {
     background-color: rgba(212, 175, 55, 0.12) !important;
     color: #ffe8a0 !important;
   }
   
   /* (9) reduced-motion 配慮 */
   @media (prefers-reduced-motion: reduce) {
     .header::before,
     .header::after,
     header.header::before,
     header.header::after {
       animation: none;
     }
   }
   
   /* (10) ヘッダー直下に薄い金ラインで仕切る (任意) */
   .header,
   header.header {
     border-bottom: 1px solid rgba(212, 175, 55, 0.25);
   }
   
   /* =========================================================
         (11) 最強オーバーライド：Cocoon の既存スタイルに負ける場合の保険
         html body から始めて、ID + クラスでセレクタを最強にする
         ※前述のCSSで効いていれば、ここは重複だが害なし
         ========================================================= */
   html body .header .navi a,
   html body .header .navi a:link,
   html body .header .navi a:visited,
   html body .header .navi-in a,
   html body .header .navi-in a:link,
   html body .header .navi-in a:visited,
   html body header.header .navi-in li a,
   html body header.header .navi-in .menu-header li a,
   html body #header .navi-in a,
   html body #header .navi-in .menu-header li a,
   html body #navi a,
   html body #navi-in a,
   html body #navi-in li a,
   html body #navi-in .menu-header li a,
   html body .menu-drawer a,
   html body .menu-drawer li a {
     color: #fdf6dc !important;
     background-color: transparent !important;
     text-decoration: none !important;
   }
   
   html body .header .navi a:hover,
   html body .header .navi-in a:hover,
   html body header.header .navi-in li a:hover,
   html body header.header .navi-in .menu-header li a:hover,
   html body #header .navi-in a:hover,
   html body #header .navi-in .menu-header li a:hover,
   html body #navi-in a:hover,
   html body #navi-in li a:hover,
   html body #navi-in .menu-header li a:hover,
   html body #navi-in .menu-header li.current-menu-item > a,
   html body #navi-in .menu-header li.current_page_item > a,
   html body .menu-drawer a:hover {
     color: #ffe8a0 !important;
     background-color: rgba(212, 175, 55, 0.12) !important;
     text-shadow: 0 0 14px rgba(212, 175, 55, 0.55) !important;
   }
   
   /* Cocoonがメニュー全体を別の色変数で塗っている可能性に対応 */
   html body .navi,
   html body .navi-in,
   html body #navi-in,
   html body #navi-in .menu-header {
     color: #fdf6dc !important;
   }