/**
 * nav-submenu.css — 既存ヘッダーナビ「サービス一覧」ドロップダウンの補助スタイル
 *
 * PC のホバー表示（.header_item.has-sub:hover .sub_menu{display:block}）と
 * ドロップダウン体裁（背景・枠・位置）は親テーマ bly/assets/css/style.css が既に定義済み。
 * 本ファイルは (1) PC のドロップダウン記号（キャレット） (2) SP のアコーディオン挙動
 * だけを補う。ナビ限定セレクタのみで、既存サイトの他要素には影響しない。
 *
 * @package bal-child
 */

/* ==========================================================================
   PC ナビ: 「サービス一覧」にドロップダウンを示すキャレット
   ========================================================================== */
.header_rig .header_item.has-sub > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.header_rig .header_item.has-sub > a::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

/* ==========================================================================
   SP ナビ: 「サービス一覧」をアコーディオン化
   親テーマの .sub_menu は position:absolute のドロップダウン前提のため、
   SP ではインライン展開に上書きする。
   ========================================================================== */

/* トグル記号（▼／開いたら回転） */
.header_nav.sp .header_item.bal-sp-has-sub > a::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    vertical-align: middle;
    transition: transform 0.15s ease;
}
.header_nav.sp .header_item.bal-sp-has-sub.is-open > a::after {
    transform: rotate(180deg);
}

/* サブメニュー本体（親の absolute ドロップダウンを打ち消してインライン展開） */
.header_nav.sp .header_item.has-sub .sub_menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.header_nav.sp .header_item.bal-sp-has-sub.is-open .sub_menu {
    display: block;
}
.header_nav.sp .header_item.has-sub .sub_menu li a {
    display: block;
    padding: 10px 0 10px 1.25em;
    white-space: normal;
    opacity: 0.9;
}

/* ==========================================================================
   サブメニュー項目のホバー強調（どれを選んでいるか一目でわかるように）
   親テーマの .sub_menu li a にはホバー時の見た目変化が無いため補う。PC/SP 共通。
   ========================================================================== */
.header_item.has-sub .sub_menu li a {
    transition: background-color 0.12s ease, color 0.12s ease;
}
.header_item.has-sub .sub_menu li a:hover,
.header_item.has-sub .sub_menu li a:focus {
    background-color: #eef2f9;   /* 薄いネイビー寄りの背景 */
    color: #162a70;              /* 本番メインカラー（濃紺） */
}

/* ==========================================================================
   サブメニュー項目間の仕切り線（どこまでが1項目か分かりやすく）
   PC ドロップダウン=白背景 → 薄グレー / SP ナビ=濃紺背景 → 半透明白 で出し分け。
   li + li で「項目と項目の間」だけに引く（先頭の上・末尾の下には引かない）。
   ========================================================================== */
.header_item.has-sub .sub_menu li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.header_nav.sp .header_item.has-sub .sub_menu li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}