/* =====================================================
   新ヘッダー スタイル
   ===================================================== */

/* header::before カラーバーを非表示 */
.new-header::before {
    display: none !important;
}

/* ヘッダーバー共通 */
.new-header {
    padding: 0 !important;
    border-bottom: 1px solid #F0F0F0;
    position: relative; /* バッジ行の絶対配置基準 */
}

.new-header-inner {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 12px 0 20px;
    position: relative;
}

/* 左側コンテナ */
.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ロゴ (TOP) */
.header-logo {
    width: 189px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* 戻るボタン (TOP以外) */
.header-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 14px 8px 4px;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.header-back-icon {
    width: 10px;
    height: auto;
}

/* ページタイトル (TOP以外・中央固定) */
.header-page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 620px); /* ロゴ側 + バッジ行 + アイコン群を除いた幅 */
    text-align: center;
}

/* 右側コンテナ */
.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* =====================================================
   コイン / カミガチャ券 バッジ行
   ===================================================== */

/* PC：ヘッダー上段内に絶対配置（ベル+ハンバーガーの左隣） */
.header-badge-row {
    position: absolute;
    top: 10px;
    right: 100px; /* icon-group(82px) + padding(12px) + gap(6px) */
    display: flex;
    gap: 6px;
    height: 60px;
}

/* =====================================================
   コイン / カミガチャ券 バッジボックス
   ===================================================== */
.header-badge-box {
    position: relative;
    display: block;
    border-radius: 5px;
    width: 100px;
    height: 60px;
    flex-shrink: 0;
}

/* rgba で背景色だけに opacity 65% を適用（文字・アイコンには影響しない） */
.header-coin-box {
    background: rgba(235, 110, 165, 0.65);
}

.header-ticket-box {
    background: rgba(46, 167, 224, 0.65);
}

/* ラベル："コイン" / "カミガチャ券" — 中央・上から12px */
.header-badge-label {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #333;
    text-align: center;
}

/* inner は位置指定なし（子要素が .header-badge-box 基準で絶対配置） */
.header-badge-inner {
    position: static;
}

/* アイコン：左から11px・上から35px */
.header-badge-icon {
    position: absolute;
    left: 11px;
    top: 35px;
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

/* コインアイコン：15×15px */
.header-coin-icon {
    width: 15px;
    height: 15px;
}

/* カミガチャ券アイコン：幅17.44px・高さ15px */
.header-ticket-icon {
    width: 17.44px;
    height: 15px;
}

/* 数値：右から13px・上から33px */
.header-badge-num {
    position: absolute;
    right: 13px;
    top: 33px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    color: #333;
}

/* =====================================================
   ベル & ハンバーガー
   ===================================================== */
.header-icon-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ベルアイコン：外枠 40×40px / 中アイコン 24×24px */
.new-header-bell-link {
    position: relative;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    background: transparent;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.new-header-bell-link:hover {
    opacity: 0.7;
}

.new-header-bell-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.new-header-bell-badge {
    position: absolute;
    top: 7px;
    left: 22px;
    background: #E60039;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0;
    text-align: right;
    border-radius: 7px;
    min-width: 14px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5.067px;
    white-space: nowrap;
}

/* ハンバーガーボタン：外枠 40×40px / 中アイコン 24×24px */
.new-header-hamburger-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.new-header-hamburger-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

/* =====================================================
   gNav オーバーレイ
   ===================================================== */
#gNavOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1002; /* #bottom-nav(1000) より上 */
}

#gNavOverlay.is-open {
    display: block;
}

/* =====================================================
   gNav サイドパネル (ハンバーガーメニュー)
   ===================================================== */
body #gNav {
    display: block;
    position: fixed;
    top: 0;
    right: -320px;
    left: auto;
    width: 300px;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    z-index: 1003; /* #bottom-nav(1000) より上 */
    padding: 0;
    transition: right 0.3s ease;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
}

body #gNav.is-open {
    right: 0;
}

/* gNav ヘッダー行 */
.gnav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
}

/* セクションラベル */
.gnav-section-label {
    display: block;
    padding: 18px 20px 4px;
    font-size: 12px;
    color: #aaa;
    font-weight: 400;
}

.gnav-top .gnav-section-label {
    padding: 0;
    font-size: 13px;
    color: #999;
}

/* 閉じるボタン */
.gnav-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
    line-height: 1;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
}

/* gNav リスト */
body #gNav .gnav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: auto;
}

body #gNav .gnav-list li {
    padding: 0;
}

body #gNav .gnav-list li a {
    display: block;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

body #gNav .gnav-list li a:hover {
    background: #fafafa;
    opacity: 1;
    color: #333;
}

/* 区切り線 */
.gnav-divider {
    margin: 6px 0;
    border: none;
    border-top: 1px solid #eee;
}

/* ログアウト */
body #gNav .gnav-logout-list {
    padding: 8px 0 20px;
}

body #gNav .gnav-logout-list li a {
    font-weight: 400 !important;
    color: #666 !important;
}

/* nav_open 時はボディスクロールをロック */
html.nav_open {
    overflow: hidden;
}

/* =====================================================
   PCワイド対応 (1280px〜)
   1280px超は左右に余白を追加してコンテンツ幅を1280pxに固定
   .header-badge-row は absolute 配置のため padding では追従しない
   → right 値を padding 相当分シフトする
   ===================================================== */
@media (min-width: 1280px) {
    .new-header {
        padding-left: calc((100vw - 1280px) / 2) !important;
        padding-right: calc((100vw - 1280px) / 2) !important;
    }
    .header-badge-row {
        right: calc(100px + (100vw - 1280px) / 2);
    }
}

/* =====================================================
   スマートフォン対応 (〜767px)
   ===================================================== */
@media (max-width: 767px) {

    /* 上段：高さを縮小 */
    .new-header-inner {
        height: 50px;
        padding: 0 12px;
    }

    /* ロゴ：SP用に縮小 */
    .header-logo {
        width: 130px;
        height: auto;
    }

    /* ページタイトル：フォント・最大幅をSP向けに調整 */
    .header-page-title {
        font-size: 14px;
        max-width: calc(100% - 160px);
    }

    /* バッジ行：static に戻して2段目として全幅表示 */
    .header-badge-row {
        position: static;
        display: flex;
        width: 100%;
        height: 36px;
        gap: 0;
        top: auto;
        right: auto;
    }

    /* バッジボックス：各50%幅・横並びレイアウト */
    .header-badge-box {
        position: relative;
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 0;
        padding: 0 12px 0 20px;
    }

    /* バッジ inner：横並びフレックス */
    .header-badge-inner {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0;
        position: relative;
    }

    /* ラベル（コイン・カミガチャ券）：エリア左端から40pxに固定 */
    /* inner が position:relative になるため、left:20px = badge-box左端から40px */
    .header-badge-label {
        position: absolute;
        left: 20px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        width: auto;
    }

    /* アイコン：absolute 解除 */
    .header-badge-icon {
        position: static;
    }

    .header-coin-icon {
        width: 15px;
        height: 15px;
    }

    .header-ticket-icon {
        width: 17.44px;
        height: 15px;
    }

    /* 数値：absolute 解除・右端に配置 */
    .header-badge-num {
        position: static;
        margin-left: auto;
        font-size: 14px;
    }

    /* ベル・ハンバーガー：白背景で見えるよう黒く表示 */
    .new-header-bell-img,
    .new-header-hamburger-img {
        filter: brightness(0);
    }

}