/* =========================================
   Unread Badge
========================================= */

.js-unread-badge-target {
    position: relative !important;
    overflow: visible !important;
}

.unread-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.4em;

    background-color: #d00;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 999px;

    font-size: inherit;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;

    z-index: auto;
    pointer-events: none;

    top: var(--unread-badge-top, 0);
    right: var(--unread-badge-right, 0);
    transform: translate(
        var(--unread-badge-translate-x, 50%),
        var(--unread-badge-translate-y, -50%)
    );
}

.unread-badge[hidden] {
    display: none !important;
}

/* PCヘッダー：マイページ */
.header-utility__type--button[data-unread-badge-role="header-mypage"] {
    --unread-badge-top: 0px;
    --unread-badge-right: 0px;
    --unread-badge-translate-x: 45%;
    --unread-badge-translate-y: -45%;
}

/* PCインナーメニュー：マイページ */
#nav-pc-menu .nav-pc-menu-button__type[data-unread-badge-role="menu-mypage"] {
    --unread-badge-top: 0px;
    --unread-badge-right: 0px;
    --unread-badge-translate-x: 45%;
    --unread-badge-translate-y: -45%;
}

/* スマホヘッダー：ハンバーガーメニュー */
.header-utility__icon[data-unread-badge-role="sp-menu-trigger"] {
    --unread-badge-top: 0px;
    --unread-badge-right: 0px;
    --unread-badge-translate-x: 50%;
    --unread-badge-translate-y: -45%;
}
.header-utility__icon[data-unread-badge-role="sp-menu-trigger"] > .unread-badge {
    font-size: 1.1rem;
    font-weight: 400;
}
.header-utility__type--menu[data-unread-badge-role="sp-menu-trigger"] > .unread-badge {
    z-index: 9999;
}

/* スマホインナーメニュー：マイページ */
#nav-sp-menu .header-utility__type--button[data-unread-badge-role="header-mypage"],
#nav-sp-menu .nav-pc-menu-button__type[data-unread-badge-role="menu-mypage"] {
    --unread-badge-top: 0px;
    --unread-badge-right: 8px;
    --unread-badge-translate-x: 50%;
    --unread-badge-translate-y: -45%;
}
/* マイページ内のお知らせリンク用 */
.mypage-heading__nav-list__type.js-unread-badge-target--inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* テキスト横に置く件数バッジ */
.mypage-heading__nav-list__type .unread-badge--inline {
    position: relative;
    top: -5px;
    transform: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 1.8em;
    height: 1.8em;
    padding: 0 0.3em;

    background-color: #d00;
    color: #fff;
    border-radius: 999px;

    font-size: 0.8em;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

.mypage-heading__nav-list__type .unread-badge--inline[hidden] {
    display: none !important;
}