/* Block: bigboss/pr-versus
 * ============================================================
 * 商品カード比較（A案）
 *   - 候補リストからチェック → 比較表を動的生成
 *   - モバイルファースト。SPは横スクロール＋1列目 sticky
 *   - 選択UIは SP でフローティングボタン → ボトムシート
 *   - 配色は **ダーク基調**。役割安定トークン ink / on-ink を使用する。
 *     ⚠ --bb-dark / --bb-black / --bb-white は sapphire で反転するため使わない
 *        （二重反転で潰れる。base.css L58- の規約）。
 *     面の階層: ink（セクション地・パネル見出し・表の1列目/列見出し）
 *              < ink-soft（候補リスト・セルなどのカード面）
 *   - 例外的にハードコードするのは「オーバーレイ・×ボタンの rgba（中立効果）」のみ。
 * ============================================================ */

.bpr-versus {
    background: var(--bb-ink);
    color: var(--bb-on-ink);
    position: relative;
}

/* ════════════════════════════════════════════════════════════
 * COMPARE セクション（.bpr-compare）
 *   比較表が増えるたびに COMPARE が並ぶのは冗長なので、
 *   セクションは1つにして中の pr-versus をタブで切り替える（2026-08-14）。
 *   ⚠ 中の .bpr-versus は見出しを持たない前提（page_builder が空で渡す）。
 *      パネル側で上の余白を詰めないと、タブと表の間が空きすぎる。
 * ════════════════════════════════════════════════════════════ */
.bpr-compare {
    background: var(--bb-ink);
    color: var(--bb-on-ink);
}

.bpr-compare__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.bpr-compare__tab {
    position: relative;
    appearance: none;
    padding: 9px 18px;
    border: 1px solid var(--bb-border);
    border-radius: 50px;
    background: transparent;
    color: var(--bb-on-ink-muted);
    font-family: var(--bb-font-body);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: var(--bb-transition);

    &:hover {
        color: var(--bb-on-ink);
        border-color: color-mix(in srgb, var(--bb-accent) 45%, transparent);
    }

    /* 選択中のシリーズ */
    &.is-active {
        background: color-mix(in srgb, var(--bb-accent) 18%, transparent);
        border-color: color-mix(in srgb, var(--bb-accent) 55%, transparent);
        color: var(--bb-on-ink);
        font-weight: 700;
    }

    /* ⚠ 選択中の印は色だけに頼らない（2026-08-14）。
          色の差だけでは、どちらのタブの中身が下に出ているのか読み取りにくい。
          下向きの三角でタブとパネルを結びつける。 */
    &.is-active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -9px;
        width: 0;
        height: 0;
        transform: translateX(-50%);
        border-inline: 7px solid transparent;
        border-block-start: 8px solid color-mix(in srgb, var(--bb-accent) 55%, transparent);
    }
}

/* パネル内の pr-versus は、COMPARE 側に見出しがあるぶん上を詰める。
   ⚠ セクションの上下パディングは pr-block 側で付いている。
      ここで打ち消さないと、タブと表の間が1画面近く空く（2026-08-14 指摘）。 */
.bpr-compare__panel .bpr-versus .sc-inner {
    /* ⚠ 上下余白は .sc-inner の padding-block で付く（base.css の規約）。
          ブロック側ではなくここを詰めないと効かない。 */
    padding-block-start: 0;
}

.bpr-compare__panel .bpr-versus__header {
    margin-bottom: 20px;

    @media screen and (min-width: 768px) {
        margin-bottom: 24px;
    }
}

/* パネル内の見出しは「どのシリーズを見ているか」の表示。
   COMPARE の見出し（シリーズをグレードで比べる）より小さくする。 */
.bpr-compare__panel .bpr-versus__heading {
    font-size: 20px;
    line-height: 1.3;

    @media screen and (min-width: 1024px) {
        font-size: 24px;
    }
}

/* タブ直後のパネルは上余白を持たせない */
.bpr-compare__panel {
    margin-top: 24px;
}

.bpr-versus__header {
    margin-bottom: 28px;

    @media screen and (min-width: 768px) {
        margin-bottom: 40px;
    }
}

.bpr-versus__empty {
    font-size: 14px;
    color: var(--bb-on-ink-muted);
}

/* PCでは 候補リスト（左）＋ 比較表（右）の2カラム */
.bpr-versus__body {
    display: block;

    @media screen and (min-width: 1024px) {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 32px;
        align-items: start;
    }
}


/* ════════════════════════════════════════
 *  選択パネル
 * ════════════════════════════════════════ */

.bpr-versus__picker {
    /* SP: 既定は非表示（フローティングボタンで開く） */
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;

    &.is-open {
        display: flex;
    }

    @media screen and (min-width: 1024px) {
        /* PC: 常設のサイドパネル */
        position: sticky;
        top: 24px;
        inset: auto;
        z-index: 1;
        background: var(--bb-ink-soft);
        border: 1px solid var(--bb-border);
        border-radius: 10px;
        display: block;
        max-height: calc(100vh - 48px);
        overflow: hidden;
    }
}

.bpr-versus__picker-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bb-ink);
    color: var(--bb-accent);
    border-radius: 14px 14px 0 0;
    width: 100%;
    flex: 0 0 auto;

    @media screen and (min-width: 1024px) {
        border-radius: 10px 10px 0 0;
    }
}

.bpr-versus__picker-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}

.bpr-versus__count {
    margin-left: auto;
    font-size: 14px;
    font-variant-numeric: tabular-nums;

    & b {
        font-size: 16px;
    }
}

.bpr-versus__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;

    @media screen and (min-width: 1024px) {
        display: none;
    }
}

.bpr-versus__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bb-ink-soft);
    width: 100%;
    flex: 0 0 auto;
}

.bpr-versus__chip {
    appearance: none;
    background: var(--bb-ink-soft);
    /* button は color を継承しないため明示する（未指定だと黒になり読めない）*/
    color: var(--bb-on-ink);
    /* --bb-border(#2e2e2e) は ink-soft 上で沈むため、文字色から起こした線にする */
    border: 1px solid color-mix(in srgb, var(--bb-on-ink) 28%, transparent);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;

    &.is-on {
        background: var(--bb-accent);
        /* ⚠ 選択中チップの文字色もトークンで（2026-08-18 修正） */
        color: var(--bb-on-accent);
        border-color: var(--bb-accent);
    }
}

/* 色の絞り込み（価格帯の下に置く2群目）
   ⚠ 価格と色は別の群。押しても互いの選択を消さない（JS 側も群ごとに処理する）。 */
.bpr-versus__filters--color {
    margin-top: 0;
    padding-top: 0;
}

/* チップ内の件数。補助情報なので 11px。 */
.bpr-versus__chip-num {
    margin-left: 5px;
    font-size: 11px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.bpr-versus__list {
    list-style: none;
    margin: 0;
    padding: 0 0 16px;
    background: var(--bb-ink-soft);
    width: 100%;
    overflow-y: auto;
    flex: 1 1 auto;
    max-height: 58vh;

    @media screen and (min-width: 1024px) {
        max-height: calc(100vh - 190px);
        padding-bottom: 8px;
    }
}

.bpr-versus__item {
    border-bottom: 1px solid var(--bb-border);

    &.is-selected {
        background: color-mix(in srgb, var(--bb-accent) 16%, var(--bb-ink-soft));
    }

    &.is-disabled {
        opacity: .45;
    }
}

.bpr-versus__label {
    display: grid;
    grid-template-columns: 20px 56px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
}

.bpr-versus__cb {
    width: 18px;
    height: 18px;
    accent-color: var(--bb-accent);
    cursor: pointer;
}

.bpr-versus__thumb {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--bb-ink);
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    overflow: hidden;

    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.bpr-versus__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* 候補リストのブランド名（グレード比較時）: 主役 */
.bpr-versus__brand {
    color: var(--bb-accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.3;
}

.bpr-versus__name {
    /* ブランド名がある場合は商品名がサブ。無い場合はこれが主役になる */
    color: var(--bb-accent);
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ブランド名と併記されるときは、商品名はサブタイトル扱い */
.bpr-versus__brand + .bpr-versus__name {
    color: var(--bb-on-ink-muted);
    font-size: 12px;
}

.bpr-versus__sub {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bpr-versus__price {
    font-size: 14px;
    font-weight: 700;
}

.bpr-versus__stock {
    font-size: 12px;
    color: var(--bb-on-ink-muted);

    &.is-out {
        color: var(--bb-accent);
    }
}

.bpr-versus__nores {
    padding: 16px;
    background: var(--bb-ink-soft);
    font-size: 14px;
    margin: 0;
    width: 100%;
}


/* ════════════════════════════════════════
 *  比較表
 * ════════════════════════════════════════ */

.bpr-versus__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.bpr-versus__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--bb-font-body);
    font-size: 14px;
    background: var(--bb-ink-soft);

    @media screen and (min-width: 768px) {
        font-size: 14px;
    }
}

/* 1列目は横スクロールしても残す */
.bpr-versus__rowhead,
.bpr-versus__rowlabel {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bb-ink);
    color: var(--bb-accent);
    text-align: left;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 12px 14px;
    white-space: nowrap;
    border-bottom: 1px solid var(--bb-border);
    width: 92px;
    min-width: 92px;

    @media screen and (min-width: 768px) {
        width: 130px;
        min-width: 130px;
        padding: 14px 18px;
    }
}

.bpr-versus__rowhead {
    z-index: 3;
    text-align: center;
    vertical-align: bottom;
    padding-bottom: 12px;
}

.bpr-versus__col {
    position: relative;
    background: var(--bb-ink);
    color: var(--bb-accent);
    border-left: 1px solid var(--bb-border);
    border-bottom: 1px solid var(--bb-border);
    padding: 30px 10px 12px;
    text-align: center;
    vertical-align: top;
    min-width: 150px;
    width: 150px;

    @media screen and (min-width: 768px) {
        /* 画像 280px + 左右パディング14px×2 = 308px */
        min-width: 308px;
        width: 308px;
        padding: 32px 14px 14px;
    }
}

.bpr-versus__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;

    &:hover {
        background: rgba(255, 255, 255, .34);
    }
}

.bpr-versus__colimg {
    appearance: none;
    border: 0;
    padding: 0;
    cursor: zoom-in;
    display: block;
    width: 100%;
    /* 選択数が少ないと列幅が広がるため、画像は3列時の幅で頭打ちにする */
    max-width: 130px;
    margin-inline: auto;
    /* 商品画像は全点 4:3 で統一されているため枠も 4:3。
       1:1 にすると上下に 12.5% ずつ余白が出る。 */
    aspect-ratio: 4 / 3;
    background: var(--bb-ink);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;

    @media screen and (min-width: 768px) {
        max-width: 280px;
    }

    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* 列見出しのブランド名: この列が何のグレードかを示す主役 */
.bpr-versus__colbrand {
    display: block;
    color: var(--bb-accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.3;
    margin-bottom: 3px;

    @media screen and (min-width: 768px) {
        font-size: 16px;
    }
}

/* ブランド名があるときは商品名を控えめに */
.bpr-versus__colbrand + .bpr-versus__colname {
    color: var(--bb-on-ink-muted);
    font-weight: 400;
    /* SP・タブレット 12px → PC 14px（2026-08-14 指示）。
       ⚠ 下の .bpr-versus__colname より詳細度が高いので、ここにも同じ指定が要る。
          片方だけ直すと、グレード名（colbrand）付きの列だけ 12px のまま残る。 */
    font-size: 12px;

    @media screen and (min-width: 1024px) {
        font-size: 14px;
    }
}

.bpr-versus__colnote {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--bb-on-ink-muted);
}

.bpr-versus__colname {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* SP・タブレット 12px → PC 14px（2026-08-14 指示）。
       ⚠ 商品名は長く、列幅が狭いので本文の 14/16px には上げない。 */
    font-size: 12px;
    line-height: 1.45;
    /* 親 th が強調色。名前表示は全ブロックで強調色に統一する */
    color: var(--bb-accent);

    @media screen and (min-width: 1024px) {
        font-size: 14px;
    }
}

.bpr-versus__cell {
    background: var(--bb-ink-soft);
    border-left: 1px solid var(--bb-border);
    border-bottom: 1px solid var(--bb-border);
    padding: 11px 12px;
    text-align: center;
    line-height: 1.5;
    word-break: break-word;

    @media screen and (min-width: 768px) {
        padding: 13px 14px;
    }

    &.is-out {
        color: var(--bb-accent);
    }
}

.bpr-versus__cell--price {
    font-size: 14px;
    font-weight: 700;
}

/* ─── 項目名の列（1列目）の開閉 ───
   表の左上のボタンで、価格・在庫・ボディ… の項目名列をまとめて畳む。
   畳むと値だけの表になり、横幅を商品の比較に使える。 */
.bpr-versus__labeltoggle {
    appearance: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: var(--bb-accent);
    cursor: pointer;
    display: grid;
    place-items: center;

    &:hover {
        background: rgba(255, 255, 255, .34);
    }
}

.bpr-versus__labelmark {
    width: 0;
    height: 0;
    border-right: 6px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform var(--bb-transition, .2s ease);
}

.bpr-versus__table.is-nolabel .bpr-versus__labelmark {
    transform: rotate(180deg);
}

/* 畳んだとき: 項目名を消して1列目を細い帯にする */
.bpr-versus__table.is-nolabel {
    & .bpr-versus__rowtext {
        display: none;
    }

    & .bpr-versus__rowlabel {
        width: 10px;
        min-width: 10px;
        padding-inline: 0;
    }

    & .bpr-versus__rowhead {
        width: 10px;
        min-width: 10px;
        padding-inline: 0;
    }
}

/* 全列同じ値の行は控えめに（差分を目立たせる） */
.bpr-versus__table tr.is-same .bpr-versus__cell {
    color: var(--bb-on-ink-muted);
    background: var(--bb-ink);
}

/* ─── 行ホバー ───
   マウスを乗せた行だけ背景を起こして、横に目を走らせやすくする。
   タッチ端末は hover が貼り付くので hover 可能なデバイスに限定する。
   ※ is-same（全列同値）の指定より後に置いて上書きさせること。 */
@media (hover: hover) {
    .bpr-versus__table tbody tr:hover .bpr-versus__cell {
        background: var(--bb-ink-soft-hover);
    }

    .bpr-versus__table tbody tr:hover .bpr-versus__rowlabel {
        background: color-mix(in srgb, var(--bb-accent) 14%, var(--bb-ink));
    }
}


.bpr-versus__na {
    color: var(--bb-on-ink-muted);
}

.bpr-versus__cell--cta {
    padding-top: 14px;
    padding-bottom: 16px;
}

.bpr-versus__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    background: var(--bb-accent);
    /* ⚠ アクセント背景の上の文字は --bb-on-accent。--bb-ink 固定だと
          濃いブランドカラーを選んだときに読めなくなる（2026-08-18 修正）。 */
    color: var(--bb-on-accent);
    border: 1px solid var(--bb-accent);
    border-radius: var(--bb-radius-sm, 4px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--bb-transition, .2s ease), color var(--bb-transition, .2s ease);

    &::after {
        content: '›';
        font-size: 14px;
        line-height: 1;
    }

    &:hover,
    &:focus-visible {
        background: transparent;
        color: var(--bb-accent);
    }

    @media screen and (min-width: 768px) {
        font-size: 14px;
        min-height: 44px;
    }
}


/* ════════════════════════════════════════
 *  画像モーダル
 * ════════════════════════════════════════ */

.bpr-versus__modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, .8);
    display: grid;
    place-items: center;
    padding: 20px;
}

/* ⚠ 非表示指定はネストの中に書かないこと（pr-ladder と同じ理由）。
   ブロックCSSはブロックエディタにも注入され、セレクタが書き換えられる際に
   ネストが壊れると position:fixed だけが残って管理画面を覆う。 */
.bpr-versus__modal[hidden] {
    display: none !important;
}

.bpr-versus__modal-inner {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--bb-ink-soft);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md, 8px);
    padding: 40px 16px 16px;

    @media screen and (min-width: 768px) {
        padding: 44px 24px 24px;
    }
}

.bpr-versus__modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    appearance: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: var(--bb-on-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;

    &:hover {
        background: rgba(255, 255, 255, .3);
    }
}

.bpr-versus__modal-img {
    background: transparent;
    border-radius: var(--bb-radius-sm, 4px);
    overflow: hidden;
    display: grid;
    place-items: center;

    & img {
        width: 100%;
        max-height: 62vh;
        object-fit: contain;
        display: block;
    }
}

.bpr-versus__modal-name {
    margin: 14px 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bb-accent);
    text-align: center;

    @media screen and (min-width: 768px) {
        font-size: 14px;
    }
}

.bpr-versus__modal-btn {
    display: flex;
    max-width: 280px;
    margin-inline: auto;
}

.bpr-versus__placeholder {
    padding: 40px 16px;
    text-align: center;
    color: var(--bb-on-ink-muted);
    background: var(--bb-ink-soft);
    border: 1px dashed var(--bb-border);
    border-radius: 8px;
}

.bpr-versus__hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--bb-on-ink-muted);
    text-align: center;

    @media screen and (min-width: 1024px) {
        display: none;
    }
}

.bpr-versus__note {
    margin: 20px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--bb-on-ink-muted);
}


/* ════════════════════════════════════════
 *  SP フローティングボタン
 * ════════════════════════════════════════ */

.bpr-versus__fab {
    position: fixed;
    /* ⚠ 左上に置くと COMPARE のシリーズ切り替えタブに重なる（2026-08-14 実測）。
          SP（〜767px）は画面が狭くタブが横いっぱいに並ぶため、上に逃がしても重なる。
          そこで SP は右下、タブレット（768〜1023px）は右上に置く。
          いずれも右端の MENU タブ（.drawr_btn）を避ける位置。 */
    bottom: 20px;
    right: 16px;
    z-index: 900;

    @media screen and (min-width: 768px) {
        /* ヘッダー高さ80px を想定し、その下に16pxの余白を取る。
           ⚠ right は MENU タブ（.drawr_btn・幅約40px）の分だけ空ける。
              これ以上詰めると MENU に重なる。 */
        top: 96px;
        bottom: auto;
        right: 52px;
    }
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--bb-ink-soft);
    color: var(--bb-accent);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    cursor: pointer;

    @media screen and (min-width: 1024px) {
        display: none;
    }
}

.bpr-versus__fab-num {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bb-ink);
    color: var(--bb-accent);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ボトムシート表示中は背面スクロールを止める */
body.bpr-versus-lock {
    overflow: hidden;
}


/* 管理画面（ブロックエディタ）では position:fixed の要素を出さない。
   ブロックCSSは編集画面にも注入され、JS は動かないため閉じられず、
   編集画面を覆ってしまう（sc-products-list と同じ方式で統一）。 */
.block-editor-page .bpr-versus__modal,
.block-editor-page .bpr-versus__fab,
.block-editor-page .bpr-versus__picker,
.wp-admin .bpr-versus__modal,
.wp-admin .bpr-versus__fab,
.wp-admin .bpr-versus__picker,
body.block-editor-iframe__body .bpr-versus__modal,
body.block-editor-iframe__body .bpr-versus__fab,
body.block-editor-iframe__body .bpr-versus__picker {
    display: none !important;
}


/* ─── 編集画面だけに出す在庫の案内 ────────────────────────
   ⚠ フロントには出ない。指定した商品が売れて別個体に置き換わった／列が消えたことを、
      編集した人が気づけるようにするためのもの（2026-08-18）。 */
.bpr-versus__notice {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--bb-accent) 45%, transparent);
    border-radius: var(--bb-radius-sm);
    background: color-mix(in srgb, var(--bb-accent) 10%, transparent);
    font-size: 13px;
    line-height: 1.7;

    & ul {
        margin: 6px 0 0;
        padding-left: 1.2em;
        list-style: disc;
    }

    /* 置き換えた（表示は続いている）／消えた（表示されない）で色を分ける */
    & .bpr-versus__notice-missing {
        color: #ff8a8a;
    }
}

.bpr-versus__notice-head {
    margin: 0;
    font-weight: 700;
    color: var(--bb-on-ink);
}