/* ==================================================
   星が丘公民館 ヘッダーナビゲーション
   PC：1200px以上
   縮小・スマホ：1199px以下
   ================================================== */

/* ==================================================
   PC
   ================================================== */

@media (min-width: 1200px) {

    /* ハンバーガーは非表示 */
    .hamburger-menu {
        display: none !important;
    }

    #hpb-nav {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;

        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .hosh-main-nav .hosh-nav-groups {
        display: flex !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* 親項目 */
    .hosh-main-nav .hosh-nav-group {
        position: relative !important;

        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* 親ボタン */
    .hosh-main-nav .hosh-nav-group-title {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 9px !important;

        width: 100% !important;
        min-height: 72px !important;

        margin: 0 !important;
        padding: 0 12px !important;

        border: 0 !important;
        border-right:
            1px solid rgba(255,255,255,0.25) !important;

        background: transparent !important;

        color: #ffffff !important;

        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;

        white-space: nowrap !important;

        cursor: pointer;

        box-sizing: border-box !important;

        transition:
            background-color 0.18s ease,
            box-shadow 0.18s ease;
    }


    .hosh-main-nav
    .hosh-nav-group:hover
    > .hosh-nav-group-title {

        background: #245d9f !important;

        box-shadow:
            inset 0 -4px 0 #ffffff !important;
    }


    /* =========================================
       PC子メニュー

       ★ 親メニューと同じ横幅に固定する
       ★ 中央計算をしない
       ★ これではみ出しを防ぐ
       ========================================= */

    .hosh-main-nav .hosh-nav-submenu {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: auto !important;

        display: none;

        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        list-style: none !important;

        background: #ffffff !important;

        border:
            1px solid #b6c5d8 !important;

        border-top:
            5px solid #174b8a !important;

        box-shadow:
            0 12px 24px
            rgba(20, 45, 75, 0.20) !important;

        z-index: 99999 !important;

        box-sizing: border-box !important;
    }


    /* hoverで開く */
    .hosh-main-nav
    .hosh-nav-group:hover
    > .hosh-nav-submenu {

        display: block !important;
    }


    /* 子項目 */
    .hosh-main-nav
    .hosh-nav-submenu
    > li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-bottom:
            1px solid #dce4ed !important;

        box-sizing: border-box !important;
    }


    .hosh-main-nav
    .hosh-nav-submenu
    > li:last-child {

        border-bottom: 0 !important;
    }


    /* 子リンク */
    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {

        position: relative !important;

        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        min-height: 60px !important;

        margin: 0 !important;

        padding:
            13px
            40px
            13px
            20px !important;

        background: #ffffff !important;

        color: #172c45 !important;

        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.55 !important;

        text-align: left !important;
        text-decoration: none !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;

        box-sizing: border-box !important;

        transition:
            background-color 0.16s ease,
            color 0.16s ease;
    }


    /* 子リンク矢印 */
    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a::before {

        content: none !important;
    }

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a::after {

        content: "" !important;

        position: absolute !important;

        top: 50% !important;
        right: 18px !important;

        width: 7px !important;
        height: 7px !important;

        border-top:
            2px solid #315f94 !important;

        border-right:
            2px solid #315f94 !important;

        transform:
            translateY(-50%)
            rotate(45deg) !important;
    }


    /* hover */
    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a:hover,

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a:focus-visible {

        background: #174b8a !important;
        color: #ffffff !important;

        outline: none !important;
    }

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a:hover::after,

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a:focus-visible::after {

        border-color: #ffffff !important;
    }
}



/* ==================================================
   縮小画面・タブレット・スマホ
   ================================================== */

@media (max-width: 1199px) {

    /* ハンバーガー */
    .hamburger-menu {
        display: flex !important;
    }


    /* サイドメニュー */
    #hpb-nav {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: min(88vw, 380px) !important;
        height: auto !important;
        max-height: 100vh !important;
        overflow-y: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        overflow-y: auto !important;

        transform:
            translateX(-100%) !important;

        opacity: 0 !important;
        pointer-events: none !important;

        box-shadow:
            8px 0 28px
            rgba(0,0,0,0.18) !important;

        z-index: 1025 !important;

        box-sizing: border-box !important;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }


    #hpb-nav.hpb-nav-open {
        transform:
            translateX(0) !important;

        opacity: 1 !important;
        pointer-events: auto !important;
    }


    /* 親一覧 */
    .hosh-main-nav .hosh-nav-groups {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            88px 0 0px !important;

        list-style: none !important;

        box-sizing: border-box !important;
    }


    .hosh-main-nav .hosh-nav-group {
        position: static !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom:
            1px solid #dbe3ec !important;
    }


    /* 親ボタン */
    .hosh-main-nav .hosh-nav-group-title {
        position: relative !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 10px !important;

        width: 100% !important;
        min-height: 66px !important;

        margin: 0 !important;

        padding:
            14px
            58px
            14px
            22px !important;

        border: 0 !important;

        background:
            #ffffff !important;

        color:
            #0b467f !important;

        font-size:
            17px !important;

        font-weight:
            700 !important;

        line-height:
            1.5 !important;

        text-align:
            left !important;

        box-sizing:
            border-box !important;

        cursor: pointer;
    }


    /* =========================================
       親の開閉マーク

       文字ではなくCSSだけで描画
       ========================================= */

    .hosh-main-nav
    .hosh-nav-group-title::before {

        content: none !important;
    }



    /* 子メニュー */
    .hosh-main-nav
    .hosh-nav-submenu {

        position: static !important;

        display: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        background:
            #f4f7fb !important;

        border: 0 !important;
        border-top:
            1px solid #dce4ed !important;

        box-shadow: none !important;

        list-style: none !important;

        box-sizing:
            border-box !important;
    }


    .hosh-main-nav
    .hosh-nav-group.is-open
    > .hosh-nav-submenu {

        display: block !important;
    }


    /* 子項目 */
    .hosh-main-nav
    .hosh-nav-submenu
    > li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-bottom:
            1px solid #e1e7ee !important;

        box-sizing:
            border-box !important;
    }


    /* 子リンク */
    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {

        display: block !important;

        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding:
            15px
            24px
            15px
            54px !important;

        background:
            #f4f7fb !important;

        color:
            #202b38 !important;

        font-size:
            15px !important;

        font-weight:
            500 !important;

        line-height:
            1.6 !important;

        text-align:
            left !important;

        text-decoration:
            none !important;

        white-space:
            normal !important;

        box-sizing:
            border-box !important;
    }


    /* 子リンクの旧矢印等を完全に消す */
    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a::before,

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a::after {

        content: none !important;
        display: none !important;
    }


    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a:hover {

        background:
            #e5edf7 !important;

        color:
            #0b467f !important;
    }
}

/* =========================================
   PC：子メニュー文字を中央揃え
   ========================================= */

@media (min-width: 1200px) {

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {
        justify-content: center !important;
        text-align: center !important;

        padding-left: 38px !important;
        padding-right: 38px !important;
    }
}

/* =========================================
   1199px以下：アコーディオン最終調整
   ========================================= */

@media (max-width: 1199px) {

    /* 親項目 */
    .hosh-main-nav
    .hosh-nav-group-title {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-height: 66px !important;

        padding:
            14px
            58px
            14px
            24px !important;

        margin: 0 !important;

        background: #ffffff !important;
        color: #0b467f !important;

        border: 0 !important;

        font-size: 17px !important;
        font-weight: 700 !important;

        text-align: left !important;

        box-sizing: border-box !important;
    }


    /* 既存の疑似要素を完全リセット */
    .hosh-main-nav
    .hosh-nav-group-title::before {
        content: none !important;
        display: none !important;
    }





    /* 子メニュー */
    .hosh-main-nav
    .hosh-nav-submenu {
        position: static !important;

        display: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        background: #f4f7fb !important;

        border: 0 !important;
        box-shadow: none !important;

        box-sizing: border-box !important;
    }


    /* 開いたところだけ表示 */
    .hosh-main-nav
    .hosh-nav-group.is-open
    > .hosh-nav-submenu {
        display: block !important;
    }


    /* 子項目 */
    .hosh-main-nav
    .hosh-nav-submenu
    > li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-top:
            1px solid #e1e7ee !important;
    }


    /* 子リンク */
    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {
        display: block !important;

        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding:
            16px
            24px
            16px
            52px !important;

        background: #f4f7fb !important;
        color: #26384d !important;

        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;

        text-align: left !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    /* 子メニュー側の矢印も完全削除 */
    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a::before,

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a::after {
        content: none !important;
        display: none !important;
    }
}

/* =========================================
   縮小メニュー：開閉アイコン最終指定
   Font Awesome使用
   ========================================= */

@media (max-width: 1199px) {

    .hosh-main-nav
    .hosh-nav-group-title::after {
        content: "\f078" !important;

        position: absolute !important;
        top: 50% !important;
        right: 24px !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        font-family: "Font Awesome 5 Free" !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;

        color: #0b467f !important;

        transform:
            translateY(-50%)
            rotate(0deg) !important;

        transition:
            transform 0.2s ease !important;
    }

    .hosh-main-nav
    .hosh-nav-group.is-open
    > .hosh-nav-group-title::after {
        transform:
            translateY(-50%)
            rotate(180deg) !important;
    }
}

/* =========================================
   親メニューアイコン統一
   ========================================= */

.hosh-main-nav .hosh-nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 24px !important;
    min-width: 24px !important;

    font-size: 17px !important;
    line-height: 1 !important;
}

.hosh-main-nav .hosh-nav-icon i {
    display: block !important;
    width: 1em !important;
    text-align: center !important;
}


/* PC */
@media (min-width: 1200px) {

    .hosh-main-nav .hosh-nav-icon {
        color: #ffffff !important;
    }
}


/* 縮小・スマホ */
@media (max-width: 1199px) {

    .hosh-main-nav .hosh-nav-icon {
        color: #315f94 !important;

        font-size: 16px !important;
    }

    .hosh-main-nav .hosh-nav-group-title {
        gap: 12px !important;
    }
}

/* =========================================
   ナビ文字の最終調整
   ========================================= */

/* PC */
@media (min-width: 1200px) {

    .hosh-main-nav .hosh-nav-group-title {
        font-family: "Noto Sans JP", sans-serif !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
    }

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {
        font-family: "Noto Sans JP", sans-serif !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }
}


/* 縮小・スマホ */
@media (max-width: 1199px) {

    .hosh-main-nav .hosh-nav-group-title {
        font-family: "Noto Sans JP", sans-serif !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
    }

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {
        font-family: "Noto Sans JP", sans-serif !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
    }
}

.hosh-main-nav .hosh-nav-group:last-child {
    border-bottom: 0 !important;
}

/* =========================================
   縮小メニュー：子項目の余白をコンパクトに
   ========================================= */

@media (max-width: 1199px) {

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {
        padding:
            10px
            24px
            10px
            52px !important;

        line-height: 1.5 !important;
    }
}

/* =========================================
   縮小メニュー：余白最終調整
   ========================================= */

@media (max-width: 1199px) {

    #hpb-nav {
        height: auto !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
    }

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {
        padding:
            10px
            24px
            10px
            52px !important;

        line-height: 1.5 !important;
    }
}

/* =========================================
   PC：子メニュー完全中央揃え
   ========================================= */

@media (min-width: 1200px) {

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        padding-left: 36px !important;
        padding-right: 36px !important;
    }

    /* 右矢印はそのまま右端 */
    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a::after {
        right: 16px !important;
    }
}

/* =========================================
   PC：子メニューを確実に中央配置
   ========================================= */

@media (min-width: 1200px) {

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a {
        position: relative !important;

        display: grid !important;
        place-items: center !important;

        width: 100% !important;

        padding:
            13px
            38px !important;

        text-align: center !important;
    }

    .hosh-main-nav
    .hosh-nav-submenu
    > li
    > a::after {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
    }
}