/*
Theme Name: Lightning Child
Template: lightning
Description: SEP専用のLightning子テーマ
Author: Manato
Version: 1.0
*/

@import url("../lightning/style.css");

/* =========================================================
   SEP CUSTOM HEADER STYLE（基本デザイン）
   ========================================================= */

/* ====== 通常ヘッダー背景（固定時） ====== */
.site-header,
.site-header.is-fixed {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* ====== PCメニュー基本 ====== */
#global-nav ul li > a {
    color: #111 !important;
    font-weight: 600;
    padding: 18px 20px !important;
    transition: 0.25s ease;
    border-bottom: 3px solid transparent !important;
}

/* ====== hover（水色） ====== */
#global-nav ul li > a:hover {
    color: #23B7FE !important;
    background: rgba(35,183,254,0.08) !important;
    border-bottom: 3px solid #23B7FE !important;
}

/* ====== active（現在ページ） ====== */
#global-nav .current-menu-item > a,
#global-nav .current-menu-parent > a {
    border-bottom: 3px solid #23B7FE !important;
    color: #111 !important;
}

/* ====== 下位メニュー（サブメニュー） ====== */
#global-nav ul.sub-menu {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    padding: 5px 0 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.07) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

#global-nav ul.sub-menu li a {
    padding: 12px 16px !important;
    color: #111 !important;
    font-size: 15px !important;
    white-space: nowrap;
}

/* ====== 下位メニュー hover（SEPイエロー） ====== */
#global-nav ul.sub-menu li a:hover {
    background: #fbc70d !important;
    color: #111 !important;
}

/* ====== 下位メニュー中央ズレ防止 ====== */
#global-nav > ul > li {
    position: relative !important;
}

#global-nav ul.sub-menu {
    left: 0 !important;
    right: 0 !important;
    width: max-content !important;
    min-width: 180px !important;
    margin: 0 auto !important;
    transform: none !important;
    top: 100% !important;
}

/* =========================================================
   スマホ（モバイルメニュー）
   ========================================================= */
.mobile-nav-btn .icon-bar {
    background-color: #23B7FE !important;
}

.mobile-nav-panel {
    background: #ffffff !important;
}

.mobile-nav-panel ul li a {
    color: #111 !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #f1f1f1 !important;
}

.mobile-nav-panel ul li a:hover {
    background: #fbc70d !important;
    color: #111 !important;
}

/* =========================================================
   ▼ トップページ限定：透明ガラスヘッダー（page-id-1578）
   ========================================================= */

/* 透明状態（TOP のみ） */
.page-id-1578 .site-header {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: none !important;
    z-index: 9999;
    transition: background 0.4s ease, border-bottom 0.4s ease;
}

/* TOPページ：白文字＋影（視認性UP） */
.page-id-1578 #global-nav ul li > a {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.35);
    border-bottom: 3px solid transparent !important;
}

/* hover（TOP専用） */
.page-id-1578 #global-nav ul li > a:hover {
    color: #23B7FE !important;
    background: rgba(255,255,255,0.2) !important;
    border-bottom: 3px solid #23B7FE !important;
}

/* 下位メニュー（TOPでも白背景） */
.page-id-1578 #global-nav ul.sub-menu {
    background: #ffffff !important;
}

.page-id-1578 #global-nav ul.sub-menu li a {
    color: #111 !important;
}

/* ▼ TOPページでも下位メニュー hover を黄色に統一 */
.page-id-1578 #global-nav ul.sub-menu li a:hover {
    background: #fbc70d !important;
    color: #111 !important;
}

/* =========================================================
   ▼ スクロール後（.is-fixed）＝通常ヘッダーへ戻す
   ========================================================= */

.site-header.is-fixed {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    backdrop-filter: none !important;
}

.site-header.is-fixed #global-nav ul li > a {
    color: #111 !important;
    text-shadow: none !important;
}

.site-header.is-fixed #global-nav ul li > a:hover {
    background: rgba(35,183,254,0.08) !important;
    color: #23B7FE !important;
    border-bottom: 3px solid #23B7FE !important;
}