@charset "UTF-8";

.badge-wrap {
    /* デフォルト（PC）サイズ ── .schedule__title 基準 */
    --badge-h: 64px;
    /* バッジ全体の高さ */
    --badge-border: 4px;
    /* 枠線の太さ */
    --badge-font: 23px;
    /* 文字サイズ */
    --badge-icon: 32px;
    /* 中央アイコンサイズ */
    --badge-pad-l: 80px;
    /* 左の内側余白（円アイコン分） */
    --badge-pad-r: 20px;
    /* 右の内側余白 */

    position: relative;
    height: var(--badge-h);
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.badge-pill {
    height: var(--badge-h);
    border: var(--badge-border) solid #000;
    border-radius: calc(var(--badge-h) / 2);
    background: #fff;
    display: flex;
    align-items: center;
    padding-left: var(--badge-pad-l);
    padding-right: var(--badge-pad-r);
    white-space: nowrap;
    max-width: 100%;
}

.badge-pill span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: var(--badge-font);
    font-weight: 700;
    color: #000;
    line-height: 1;
    letter-spacing: 0.07em; 
}

.badge-circle {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--badge-h);
    height: var(--badge-h);
    border-radius: 50%;
    border: var(--badge-border) solid #000;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.badge-circle::before {
    content: "";
    width: var(--badge-icon);
    height: var(--badge-icon);
    background-color: #000;
    -webkit-mask: url('../img/common/icon_dia.svg') no-repeat center / contain;
    mask: url('../img/common/icon_dia.svg') no-repeat center / contain;
}

.badge-circle svg {
    width: var(--badge-icon);
    height: var(--badge-icon);
}

.badge-wrap.badge--sm {
    --badge-h: 48px;
    --badge-border: 3px;
    --badge-font: 14px;
    --badge-icon: 24px;
    --badge-pad-l: 60px;
    --badge-pad-r: 20px;
}

.badge-wrap.badge--xs {
    --badge-h: 36px;
    --badge-border: 2px;
    --badge-font: 11px;
    --badge-icon: 18px;
    --badge-pad-l: 46px;
    --badge-pad-r: 16px;
}


@media (max-width: 768px) {
    .badge-wrap {
        --badge-h: 50px;
        --badge-border: 2px;
        --badge-font: 16px; 
        --badge-icon: 24px;
        --badge-pad-l: 60px;
        --badge-pad-r: 20px;
    }
}

@media (max-width: 480px) {
    .badge-wrap {
        --badge-h: 40px;
        --badge-border: 2px;
        --badge-font: 12px; 
        --badge-icon: 16px;
        --badge-pad-l: 50px;
        --badge-pad-r: 14px;
    }
}