/* ------------------------------------------------------------------------------------------------------------------ */
/* VIPシート（店舗） */

.cvm-for-store-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
    color: #535353;
}

.cvm-for-store-page,
.cvm-for-store-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cvm-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #c5a983;
    text-align: center;
    margin-top: 40px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 期のタブ */

.cvm-period-tabs {
    display: flex;
    gap: 6px;
    margin-top: 24px;
    padding-inline: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cvm-period-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid #E3D7C0;
    border-radius: 20px;
    background: #fff;
    color: #AAAAAC;
    font-size: 0.875rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.cvm-period-tab.is-active {
    background: #C5A983;
    border-color: #C5A983;
    color: #fff;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 絞り込み（ランク別・危険度アラート） */

.cvm-filter-tabs {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-inline: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cvm-filter-button {
    flex: 0 0 auto;
    padding: 7px 15px;
    border: 1px solid #E3D7C0;
    border-radius: 20px;
    background: #fff;
    color: #AAAAAC;
    font-size: 0.8125rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.cvm-filter-button.is-active {
    background: #C5A983;
    border-color: #C5A983;
    color: #fff;
}

.cvm-filter-button[data-filter="black"].is-active {
    background: #2B2B2B;
    border-color: #2B2B2B;
    color: #E3D7C0;
}

.cvm-filter-button[data-filter="platinum"].is-active {
    background: #7E8C9A;
    border-color: #7E8C9A;
    color: #fff;
}

.cvm-filter-button.cvm-filter-alert.is-active {
    background: #C0524F;
    border-color: #C0524F;
    color: #fff;
}

/* 人数。ボタンの字（#AAAAAC）より濃くして、押す前に数が読めるようにする。選んだボタンではボタンの字の色に合わせる */
.cvm-filter-count {
    margin-left: 5px;
    font-weight: 700;
    color: #535353;
}

.cvm-filter-count:empty {
    display: none;
}

.cvm-filter-alert .cvm-filter-count {
    color: #C0524F;
}

.cvm-filter-button.is-active .cvm-filter-count {
    color: inherit;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 検索と並べ替え */

.cvm-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-inline: 1.25rem;
}

#cvm-search-box {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    box-sizing: border-box;
}

.cvm-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cvm-sort-button,
.cvm-settings-button {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #C5A983;
    background: #fff;
    color: #C5A983;
    font-size: 0.75rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.cvm-sort-button.is-active {
    background: #C5A983;
    color: #fff;
}

.cvm-back-link {
    margin-left: auto;
    display: inline-block;
    text-decoration: none;
    line-height: 1.5;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #AAAAAC;
    background: #fff;
    color: #AAAAAC;
    font-size: 0.75rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    white-space: nowrap;
}

.cvm-settings-button {
    border-color: #AAAAAC;
    color: #AAAAAC;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 一覧の表 */

#cvm-vip-list {
    display: block;
    width: 100%;
    margin-top: 20px;
}

.cvm-table-wrap {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    position: relative;
    cursor: grab;
}

.cvm-table-wrap.is-dragging,
.cvm-table-wrap.is-dragging * {
    cursor: grabbing !important;
}

.cvm-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.cvm-table thead th {
    background: #C5A983;
    color: #fff;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 12px 14px;
    white-space: nowrap;
    text-align: right;
    cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    position: relative;
}

.cvm-table thead th:last-child {
    border-right: none;
}

.cvm-table tbody td {
    font-size: 0.875rem;
    padding: 12px 14px;
    text-align: right;
    white-space: nowrap;
    color: #535353;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}

.cvm-table tbody td:last-child {
    border-right: none;
}

.cvm-table tbody tr:nth-child(even) td {
    background: #f4f4f4;
}

.cvm-table thead th.is-sorted {
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.9);
}

.cvm-table tbody td.is-sorted {
    background: #E3D7C0 !important;
}

.cvm-sort-arrow {
    font-size: 0.7rem;
    margin-left: 2px;
}

/* 1列目（お客様名）は左寄せ＋横スクロールしても固定 */
.cvm-th.cvm-col-name,
.cvm-td.cvm-col-name {
    text-align: left;
    position: sticky;
    left: 0;
    min-width: 132px;
    width: 132px;
    box-shadow: 1px 0 0 #e6e6e6;
}

.cvm-table thead .cvm-col-name {
    z-index: 5;
    background: #C5A983;
}

.cvm-table tbody .cvm-col-name {
    z-index: 2;
    background: #fff;
}

.cvm-table tbody tr:nth-child(even) .cvm-col-name {
    background: #f4f4f4;
}

/* 列幅の目安 */
.cvm-col-text     { min-width: 120px; text-align: left !important; }
.cvm-col-num      { min-width: 130px; }
.cvm-col-month    { min-width: 110px; }
.cvm-col-rank     { min-width: 110px; text-align: center !important; }
.cvm-col-birthday { min-width: 96px;  text-align: center !important; }
.cvm-col-alert    { min-width: 150px; text-align: left !important; }
.cvm-col-visit    { min-width: 108px; text-align: center !important; }
.cvm-col-share    { min-width: 132px; }
.cvm-col-toggle   { min-width: 168px; text-align: center !important; }
.cvm-col-benefit  { min-width: 116px; text-align: left !important; }

/* お客様名のセル */
.cvm-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cvm-row-name {
    font-weight: bold;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96px;
}

/* 名前の左に立てるランクの帯。表を横に振っても、いつでもランクが分かる */
.cvm-rank-stripe {
    flex-shrink: 0;
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: #E3D7C0;
}

.cvm-rank-stripe-black    { background: #2B2B2B; }
.cvm-rank-stripe-platinum { background: #7E8C9A; }
.cvm-rank-stripe-gold     { background: #C5A983; }
.cvm-rank-stripe-none     { background: #E6E6E6; }

/* 名前の下のランク。狭い画面だけ出す（ランクの列まで横に振らないと見えないため） */
.cvm-name-rank {
    display: none;
}

@media (max-width: 767px) {

    .cvm-name-cell {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .cvm-name-rank {
        display: block;
        flex: 1 0 100%;
        padding-left: 12px;
    }

    .cvm-name-rank .cvm-rank-badge {
        min-width: 0;
        padding: 2px 8px;
        font-size: 0.6875rem;
    }

    .cvm-th.cvm-col-name,
    .cvm-td.cvm-col-name {
        min-width: 124px;
        width: 124px;
    }

    .cvm-row-name {
        max-width: 88px;
    }

    /* 識別番号は探すための欄で、一目で見るものではない。狭い画面では詰める */
    .cvm-col-text { min-width: 104px; }
    .cvm-col-num  { min-width: 118px; }
}

.cvm-table tbody tr.cvm-row {
    cursor: pointer;
}

.cvm-table tbody tr.cvm-row:hover td,
.cvm-table tbody tr.cvm-row:hover .cvm-col-name {
    background: #FAF6EE;
}

.cvm-table tbody tr.cvm-row.is-selected td,
.cvm-table tbody tr.cvm-row.is-selected .cvm-col-name,
.cvm-table tbody tr.cvm-row.is-selected:hover td,
.cvm-table tbody tr.cvm-row.is-selected:hover .cvm-col-name {
    background: #E8DCC7 !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ランクのバッジ */

.cvm-rank-badge {
    display: inline-block;
    box-sizing: border-box;
    min-width: 74px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.4;
}

.cvm-rank-black {
    background: #2B2B2B;
    color: #E3D7C0;
}

.cvm-rank-platinum {
    background: #7E8C9A;
    color: #fff;
}

.cvm-rank-gold {
    background: #C5A983;
    color: #fff;
}

.cvm-rank-none {
    background: #F5F5F5;
    color: #AAAAAC;
    min-width: 44px;
}

/* 表の「ランク」「次回ランク」の列だけは、札の幅を1つにそろえる。
   BLACK・PLATINUM・GOLD・「—」で幅が変わると、右に付く▼の位置が行ごとにずれてしまう */
.cvm-col-rank .cvm-rank-badge {
    width: 88px;
    min-width: 0;
}

/* 次回ランクの上下 */
/* ▼の枠は、上下が無い行でも必ず取る。取らないと札が真ん中に寄って、▼が縦にそろわない */
.cvm-next-cell {
    display: inline-grid;
    grid-template-columns: 88px 10px;
    align-items: center;
    gap: 6px;
}

.cvm-trend {
    display: inline-block;
    justify-self: center;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.cvm-trend-up {
    border-bottom: 8px solid #4C9A67;
}

.cvm-trend-down {
    border-top: 8px solid #C86B6B;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 危険度アラート */

.cvm-alert {
    display: inline-block;
    padding: 3px 9px;
    margin-right: 4px;
    border-radius: 11px;
    background: #FBEAEA;
    color: #C0524F;
    font-size: 0.75rem;
    line-height: 1.5;
}

.cvm-alert-none {
    color: #D6D6D6;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 来店歴 */

.cvm-visit-yes {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #C5A983;
}

.cvm-visit-no {
    color: #D6D6D6;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 売上構成比 */

.cvm-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
}

.cvm-share-bar {
    flex: 1 1 auto;
    min-width: 40px;
    height: 6px;
    border-radius: 3px;
    background: #F0EAE0;
    overflow: hidden;
}

.cvm-share-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #C5A983;
}

.cvm-share-value {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.cvm-zero {
    color: #C9C9C9;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 誕生日と特典の折りたたみ */

.cvm-birthday-value {
    display: inline-block;
    min-width: 44px;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px dashed rgba(197, 169, 131, 0.7);
    color: #535353;
    font-size: 0.8125rem;
    cursor: pointer;
}

.cvm-group-toggle {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #fff;
}

.cvm-group-toggle.is-open {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #fff;
    border-bottom: none;
}

.cvm-benefit-used {
    display: inline-block;
    padding: 3px 8px;
    margin: 1px;
    border-radius: 10px;
    background: #EEF6F0;
    color: #4C9A67;
    font-size: 0.75rem;
}

.cvm-benefit-unused {
    color: #D6D6D6;
}

/* 使った回数／上限。期の中であと何回使えるかが一目で分かる */
.cvm-benefit-count {
    display: inline-block;
    margin-right: 4px;
    padding: 2px 7px;
    border-radius: 9px;
    background: #F0EAE0;
    color: #8C7A5E;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.cvm-benefit-count.is-over {
    background: #FBEAEA;
    color: #C0524F;
}

/* 特典の対象のランクではない行。回数は出さず、文字だけ淡く置く（2026-10-03） */
.cvm-benefit-outside {
    color: #AAAAAC;
    font-size: 0.6875rem;
}

/* 顧客マージの最後の確認に出す「特典の使える回数を超える」一覧。
   顧客管理の画面で使うが、中身は VIP のものなので、全ページで読み込まれるここに置く */
.cvm-merge-over-title {
    margin: 16px 0 0;
    font-size: 0.875rem;
    color: #535353;
}

/* 確認の中身（#swal2-html-container）は左右の余白が0なので、幅は前の段の選択肢（.cci-merge-dialog-section）と同じ 80% にする */
.cvm-merge-over {
    width: 80%;
    box-sizing: border-box;
    margin: 8px auto 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #F3EDE0;
    text-align: left;
}

.cvm-merge-over-item + .cvm-merge-over-item {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #E3D7C0;
}

.cvm-merge-over-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: bold;
    color: #535353;
}

.cvm-merge-over-head .cvm-benefit-count {
    flex-shrink: 0;
    margin-right: 0;
}

.cvm-merge-over-sub {
    margin-top: 3px;
    font-size: 0.75rem;
    color: #8C7A5E;
}

/* 設定パネルの中の切り替え1行 */
.cvm-settings-switch {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cvm-settings-switch > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 予約表に表示するかの切り替え */

.cvm-show-toggle {
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #E0E0E0;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cvm-show-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.cvm-show-toggle.is-on {
    background: #C5A983;
}

.cvm-show-toggle.is-on::after {
    transform: translateX(18px);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 見出しの固定（clone を画面上部に置く） */

.cvm-sticky-head {
    position: fixed;
    top: 0;
    z-index: 90;
    overflow: hidden;
    display: none;
    pointer-events: auto;
}

.cvm-sticky-head.is-active {
    display: block;
}

.cvm-sticky-head table {
    border-collapse: separate;
    border-spacing: 0;
}

.cvm-sticky-head .cvm-th.cvm-col-name {
    position: relative;
    left: auto;
    z-index: 2;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 補足と空の状態 */

.cvm-list-note {
    font-size: 0.75rem;
    color: #AAAAAC;
    margin-top: 12px;
    padding-inline: 1.25rem;
    line-height: 1.7;
}

.cvm-no-customer-message,
.cvm-error-message {
    text-align: center;
    font-size: 0.875rem;
    color: #AAAAAC;
    padding: 60px 20px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 設定 */

.cvm-settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cvm-settings-overlay.is-open {
    display: flex;
}

.cvm-settings-panel {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    box-sizing: border-box;
    max-height: 86vh;
    overflow-y: auto;
}

.cvm-settings-title {
    font-size: 1.125rem;
    color: #C5A983;
    text-align: center;
    margin: 0 0 20px;
}

.cvm-settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.cvm-settings-field label {
    font-size: 0.75rem;
    color: #AAAAAC;
}

.cvm-settings-field input,
.cvm-settings-field select {
    font-size: 0.875rem;
    padding: 11px 13px;
    border: none;
    border-radius: 10px;
    background: #F5F5F5;
    color: #535353;
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.cvm-settings-note {
    font-size: 0.75rem;
    color: #AAAAAC;
    line-height: 1.7;
    margin: 0 0 20px;
}

.cvm-settings-buttons {
    display: flex;
    gap: 10px;
}

.cvm-settings-cancel,
.cvm-settings-save {
    flex: 1 1 0;
    padding: 12px;
    border-radius: 24px;
    font-size: 1rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    cursor: pointer;
}

.cvm-settings-cancel {
    border: 1px solid #AAAAAC;
    background: #fff;
    color: #AAAAAC;
}

.cvm-settings-save {
    border: 1px solid #C5A983;
    background: #C5A983;
    color: #fff;
}

.cvm-swal-birthday {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cvm-swal-select {
    flex: 0 1 120px;
    font-size: 1rem;
    padding: 11px 13px;
    border: none;
    border-radius: 10px;
    background: #F5F5F5;
    color: #535353;
    font-family: 'Noto Sans JP', sans-serif;
}

.cvm-swal-note {
    font-size: 0.75rem;
    color: #AAAAAC;
    margin-top: 10px;
}

.cvm-field-label {
    font-size: 0.75rem;
    color: #AAAAAC;
}

.cvm-field-hint {
    font-size: 0.6875rem;
    color: #C0C0C0;
    line-height: 1.6;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 特典の登録（設定の中） */

.cvm-benefit-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #EFE7D8;
}

.cvm-benefit-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
}

.cvm-benefit-row-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.cvm-benefit-name {
    font-size: 0.875rem;
    color: #535353;
    font-weight: 500;
}

.cvm-benefit-limit {
    font-size: 0.6875rem;
    color: #AAAAAC;
    margin-left: auto;
    white-space: nowrap;
}

.cvm-benefit-row-ranks {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.cvm-benefit-row-ranks .cvm-rank-badge {
    min-width: 0;
    padding: 2px 8px;
    font-size: 0.625rem;
}

.cvm-benefit-row-actions {
    display: flex;
    gap: 8px;
}

.cvm-benefit-edit,
.cvm-benefit-delete {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.6875rem;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    cursor: pointer;
}

.cvm-benefit-edit {
    border: 1px solid #C5A983;
    color: #C5A983;
}

.cvm-benefit-delete {
    border: 1px solid #D8A0A0;
    color: #C0524F;
}

.cvm-benefit-empty {
    font-size: 0.75rem;
    color: #C0C0C0;
    margin: 0;
}

.cvm-benefit-add {
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    border-radius: 22px;
    border: 1px dashed #C5A983;
    background: #fff;
    color: #C5A983;
    font-size: 0.8125rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    cursor: pointer;
}

.cvm-benefit-editor {
    display: none;
    margin-top: 18px;
    padding: 16px;
    border-radius: 12px;
    background: #FDFBF7;
}

.cvm-benefit-editor.is-open {
    display: block;
}

/* 対象のランクの選択。
   ブラウザ既定のチェックボックスは端末によって描かれないことがあるので、
   input は隠して四角とチェックを自前で描く。状態はランクの色で見せる。 */

.cvm-rank-checks {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cvm-rank-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid #E4DDCF;
    border-radius: 999px;
    background: #fff;
    font-size: 0.8125rem;
    color: #9C9C9E;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

/* Story は styles.css で input[type=checkbox] を display:none にしていて、
   チェックの四角は画面ごとに描く決まりになっている。ここでも同じ形にする。
   label が input を包んでいるので、押したときの切り替えと :checked はそのまま効く */
.cvm-rank-check input {
    display: none;
}

.cvm-rank-check-box {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1.5px solid #D8D0C2;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

/* チェックは2辺の線を回して作る。SVGを足さずに済む */
.cvm-rank-check-box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0.6);
    opacity: 0;
    transition: opacity 0.12s, transform 0.12s;
}

.cvm-rank-check-text {
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* 来店歴を出すセラピスト。四角の描き方はランクの選択と同じものを使い回す */

.cvm-therapist-checks {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cvm-therapist-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid #E4DDCF;
    border-radius: 999px;
    background: #fff;
    font-size: 0.8125rem;
    color: #9C9C9E;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cvm-therapist-check input {
    display: none;
}

.cvm-therapist-check:has(input:checked) {
    border-color: #C5A983;
    background: #FAF6EF;
    color: #8A6A3C;
}

.cvm-therapist-check input:checked ~ .cvm-rank-check-box {
    background: #C5A983;
    border-color: #C5A983;
}

.cvm-therapist-check-text {
    font-weight: 700;
}

.cvm-rank-check input:checked ~ .cvm-rank-check-box::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

/* 選んだときはそのランクの色にする */

.cvm-rank-check-black input:checked ~ .cvm-rank-check-box {
    background: #2B2B2B;
    border-color: #2B2B2B;
}

.cvm-rank-check-black input:checked ~ .cvm-rank-check-box::after {
    border-color: #E3D7C0;
}

.cvm-rank-check-platinum input:checked ~ .cvm-rank-check-box {
    background: #7E8C9A;
    border-color: #7E8C9A;
}

.cvm-rank-check-gold input:checked ~ .cvm-rank-check-box {
    background: #C5A983;
    border-color: #C5A983;
}

.cvm-rank-check-black:has(input:checked) {
    border-color: #2B2B2B;
    background: #F5F4F2;
    color: #2B2B2B;
}

.cvm-rank-check-platinum:has(input:checked) {
    border-color: #7E8C9A;
    background: #F3F5F7;
    color: #55606B;
}

.cvm-rank-check-gold:has(input:checked) {
    border-color: #C5A983;
    background: #FAF6EF;
    color: #8A6A3C;
}

/* :has が効かない環境でも、四角の色だけで選択が分かる */

.cvm-rank-check:active {
    background: #F7F4EE;
}

/* 「VIP用の割引を新しく作る」を選んだときだけ出す欄 */
.cvm-new-discount-field {
    display: none;
}

.cvm-new-discount-field.is-open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
}

.cvm-new-discount-field .cvm-field-hint {
    grid-column: 1 / -1;
}

/* コースのセラピストバック額。「全員同じ額」と「バック率ごとに分ける」を #cvm-new-course-field の is-by-rate で出し分ける */
#cvm-new-course-field .cvm-back-title,
#cvm-new-course-field .cvm-back-mode,
#cvm-new-course-field .cvm-back-same,
#cvm-new-course-field .cvm-back-rates {
    grid-column: 1 / -1;
}

.cvm-back-title {
    margin-top: 6px;
}

.cvm-back-mode {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cvm-back-mode-button {
    padding: 6px 13px;
    border: 1px solid #E3D7C0;
    border-radius: 20px;
    background: #fff;
    color: #AAAAAC;
    font-size: 0.75rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.cvm-back-mode-button.is-active {
    background: #C5A983;
    border-color: #C5A983;
    color: #fff;
}

.cvm-back-rates {
    display: none;
    grid-template-columns: 62px 1fr;
    gap: 8px;
    align-items: center;
}

.cvm-back-rate-label {
    font-size: 0.875rem;
    color: #535353;
}

/* 空欄のときに払われる額（料金×バック率）。入れた額と見分けられるよう薄くする */
.cvm-back-rate-input::placeholder {
    color: #C4C4C4;
}

.cvm-back-rates-empty {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: #C0C0C0;
}

.cvm-back-hint-rate {
    display: none;
}

#cvm-new-course-field.is-by-rate .cvm-back-rates {
    display: grid;
}

#cvm-new-course-field.is-by-rate .cvm-back-same,
#cvm-new-course-field.is-by-rate .cvm-back-hint-same {
    display: none;
}

#cvm-new-course-field.is-by-rate .cvm-back-hint-rate {
    display: inline;
}

.cvm-limit-field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
}

.cvm-limit-field label {
    grid-column: 1 / -1;
}

.cvm-limit-field .cvm-field-hint {
    grid-column: 1 / -1;
}

.cvm-id-fallback {
    color: #AAAAAC;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 予約表に出すランクのバッジ（予約管理・お客様共有ページから使う） */

.cvm-inline-rank {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    vertical-align: middle;
}

.cvm-inline-rank-black {
    background: #2B2B2B;
    color: #E3D7C0;
}

.cvm-inline-rank-platinum {
    background: #7E8C9A;
    color: #fff;
}

.cvm-inline-rank-gold {
    background: #C5A983;
    color: #fff;
}

/* 店舗の予約表のブロックは幅75pxしかないので、その中だけ小さくする */
.csrm-reservation-block .cvm-inline-rank {
    display: inline-block;
    margin-top: 1px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 0.5rem;
    line-height: 1.4;
    letter-spacing: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 予約表だけは頭文字1文字（B・P・G）。丸く抜いて名前の邪魔をしない */
.cvm-inline-rank-short {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
}

/* 上の `.csrm-reservation-block .cvm-inline-rank` のほうが詳細度が高いので、
   同じ形で書き直さないと中央寄せも文字の大きさも効かない */
.csrm-reservation-block .cvm-inline-rank-short {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-left: 3px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.5625rem;
    line-height: 1;
    overflow: visible;
}

/* バッジもランクで少し格を変える */
.cvm-inline-rank-platinum {
    letter-spacing: 0.06em;
}

.cvm-inline-rank-black {
    letter-spacing: 0.1em;
    box-shadow: 0 0 0 1px rgba(197, 169, 131, 0.55);
}

/* 予約カードは名前が長いと押し出されるので、名前だけを縮めてバッジは残す */
.ctrm-reservation-card-user-name,
.csrm-reservation-card-user-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ctrm-reservation-card-user-name .cvm-inline-rank,
.csrm-reservation-card-user-name .cvm-inline-rank {
    flex: 0 0 auto;
}

/* セラピストの7日表示は縦書きで幅が無いので、色の点だけ置く（枠の右上に浮かせて行を増やさない） */
.cvm-rank-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 1;
}

/* 予約の割引ピッカーで、VIPの特典が上限に達しているカード */
.dp-card.is-exhausted {
    opacity: 0.55;
    pointer-events: none;
    background: #F7F7F6;
}

.dp-exhausted-note {
    margin-top: 6px;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: #C0524F;
}

.cvm-rank-dot-black    { background: #2B2B2B; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); }
.cvm-rank-dot-platinum { background: #7E8C9A; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); }
.cvm-rank-dot-gold     { background: #C5A983; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); }/* ------------------------------------------------------------------------------------------------------------------ */
/* お客様の予約共有ページ。ランクが付いているお客様は、ページ全体をそのランクの仕立てにする。
 *
 * 2026-09-24 にいただいた見本（通常・GOLD・PLATINUM・BLACK の4枚）から、色と寸法を1つずつ測って合わせてある。
 * 見本は列の幅320pxで描かれているので、寸法は 1.172 倍して375px幅に直した値を使っている。
 *
 *   紙と枠 … ページの地色の内側に「用紙」を1枚置き、その縁をランクの枠にする
 *   金属   … ステップの丸・日時の見出し・VIPの札。ランクごとの見え方を変数で持つ
 *   文字   … 項目名と合計金額をランクの色に。レシートの品名は見本どおり灰色のまま
 *
 * BLACK も紙は明るい。黒は枠・丸・日時の見出し・札にだけ使う（見本と同じ）。 */

.cvm-vip-page-gold {
    --vip-ink:         #A98F6E;
    --vip-ink-soft:    #B09675;
    --vip-deep:        #8A6234;
    --vip-item:        #4B4A47;
    --vip-value:       #2E2E2E;
    --vip-edge:        #EFE8DA;
    --vip-rule:        #D4D3D1;
    --vip-rule-soft:   #E8E6E2;
    --vip-page:        #FBF8F1;
    --vip-step-off:    #BE9A6E;
    --vip-step-on:     #C29255;
    --vip-step-ink:    #FFFFFF;
    --vip-pill:        linear-gradient(180deg, #C89A5D, #C29659 46%, #BA8C4E);
    --vip-pill-ink:    #FFFFFF;
    --vip-plate:       linear-gradient(150deg, #ECD0A3 0%, #CFA669 50%, #B1803E 100%);
    --vip-plate-band:  linear-gradient(180deg, #EEDCB4, #F7EBD2);
    --vip-plate-width: 1px;
    --vip-plate-ink:   #FFFDF7;
    --vip-crown-ink:   #FFFDF7;
    --vip-plate-shade: 0 1px 1px rgba(90, 60, 20, 0.32);
    --vip-plate-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    --vip-frame-line:  #BFA57A;
    --vip-frame-size:  2px;
    --vip-frame-ring:  none;
    --vip-sheet-gap:   5px;
}

.cvm-vip-page-platinum {
    --vip-ink:         #8D949C;
    --vip-ink-soft:    #8C9199;
    --vip-deep:        #5E656D;
    --vip-item:        #5A5F65;
    --vip-value:       #262C33;
    --vip-edge:        #E9ECF1;
    --vip-rule:        #CBCCCE;
    --vip-rule-soft:   #E6E7EA;
    --vip-page:        #F8F9FB;
    --vip-step-off:    #A7ADB5;
    --vip-step-on:     #A7ADB5;
    --vip-step-ink:    #FFFFFF;
    --vip-pill:        linear-gradient(180deg, #A2A7AF, #9BA0A8 46%, #949AA2);
    --vip-pill-ink:    #FFFFFF;
    --vip-plate:       linear-gradient(178deg, #EFF1F4 0%, #C9CED5 52%, #A3ACB5 100%);
    --vip-plate-band:  linear-gradient(180deg, #E8ECF1, #FFFFFF);
    --vip-plate-width: 1px;
    --vip-plate-ink:   #232A32;
    --vip-crown-ink:   #5F6772;
    --vip-plate-shade: 0 1px 0 rgba(255, 255, 255, 0.55);
    --vip-plate-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.35);
    --vip-frame-line:  #BFC4CB;
    --vip-frame-size:  2px;
    --vip-frame-ring:  none;
    --vip-sheet-gap:   5px;
}

.cvm-vip-page-black {
    --vip-ink:         #8C7454;
    --vip-ink-soft:    #9C8663;
    --vip-deep:        #7A4E1E;
    --vip-item:        #3C3A36;
    --vip-value:       #232323;
    --vip-edge:        #EDE6D9;
    --vip-rule:        #CBCAC6;
    --vip-rule-soft:   #E4E3DF;
    --vip-page:        #F8F3EB;
    --vip-step-off:    #1B160C;
    --vip-step-on:     #B58848;
    --vip-step-ink:    #FFFFFF;
    --vip-pill:        linear-gradient(180deg, #2A2219, #16110C 55%, #0E0A06);
    --vip-pill-ink:    #F7F1E3;
    --vip-plate:       linear-gradient(135deg, #CDAC89 0%, #6B5C4B 12%, #2A2620 30%, #0E0B08 58%, #070605 100%);
    --vip-plate-band:  linear-gradient(145deg, #E2C58C, #8A6A32 46%, #D9B676);
    --vip-plate-width: 3px;
    --vip-plate-ink:   #E9CC8B;
    --vip-crown-ink:   #E9CC8B;
    --vip-plate-shade: 0 1px 2px rgba(0, 0, 0, 0.65);
    --vip-plate-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --vip-frame-line:  #221B12;
    --vip-frame-size:  3px;
    --vip-frame-ring:  0 0 0 2px #C9A86B, 0 0 0 5px #221B12;
    --vip-sheet-gap:   5px;
}

/* 紙と用紙。用紙の外側に地色の余白を少し残し、その内側の縁を枠にする（見本と同じ作り）。
   BLACK だけは枠が「暗い帯・金の細い線・暗い帯」の3層なので、外向きの影を2枚重ねて作る */

.cvm-vip-page {
    background: var(--vip-page);
}

.cvm-vip-page .cvm-vip-sheet {
    margin: var(--vip-sheet-gap);
    border: var(--vip-frame-size) solid var(--vip-frame-line);
    border-radius: 14px;
    box-shadow: var(--vip-frame-ring);
    overflow: hidden;
}

/* 上下のセクション。地色は用紙の中でも敷いておく（中身が長いときに下が白く抜けないように）。
   下のセクションは margin-top:-91px で上に食い込んでいるので、重なる順も決めておく */

.cvm-vip-page .crh-reservation-details-page-top-section {
    position: relative;
    z-index: 1;
    padding: 24px 11px 0;
    background: var(--vip-page);
}

.cvm-vip-page .crh-reservation-details-page-bottom-section {
    position: relative;
    z-index: 0;
    padding: 91px 11px 28px;
    background: var(--vip-page);
}

/* ステップの丸。見本では艶も影もなく、ランクの色を平らに塗ってあるだけ */

.cvm-vip-page .custom-reservations-history-stepper {
    margin-bottom: 16px;
}

.cvm-vip-page .custom-reservations-history-step::before {
    background: var(--vip-step-off);
    color: var(--vip-step-ink);
}

.cvm-vip-page .custom-reservations-history-step.active::before {
    background: var(--vip-step-on);
    color: var(--vip-step-ink);
}

/* 見本ではラベルの色が2つとも同じ。通り過ぎたほうだけ薄くはしない */
.cvm-vip-page .custom-reservations-history-step .step-label,
.cvm-vip-page .custom-reservations-history-step.active .step-label {
    color: var(--vip-ink-soft);
}

/* 丸と丸をつなぐ線。見本では右端に小さな矢じりが付いている */
.cvm-vip-page .custom-reservations-history-step:not(:last-child)::after {
    top: 16px;
    height: 9px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5 9'%3E%3Cpath d='M0 2 4.6 4.5 0 7Z' fill='%23000' fill-opacity='.33'/%3E%3C/svg%3E") no-repeat right center,
        linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)) no-repeat left center / calc(100% - 4px) 1px;
}

/* いちばん上の2枚のカード。左右の余白を外し、見本と同じ幅・同じ厚みにする。
   このカードは width:100% に padding が外付けなので、box-sizing を変えないと横にはみ出す */

.cvm-vip-page .crh-reservation-details-page-therapist-info-wrapper {
    padding-right: 0;
    padding-left: 0;
}

.cvm-vip-page .crh-reservation-details-page-therapist-info {
    box-sizing: border-box;
    margin-top: 12px;
    padding: 15px;
    border: 1px solid var(--vip-edge);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* この行は親から gap を受け取っている（テーマ側の指定）。自分で決めておかないと
   写真・名前・札の間隔が読めず、名前の場所が足りなくなる */
.cvm-vip-page .crh-reservation-details-page-therapist-img-and-name {
    gap: 8px;
}

.cvm-vip-page .crh-reservation-details-page-therapist-img-and-name img {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
}

.cvm-vip-page .crh-reservation-details-page-therapist-and-store {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    overflow-wrap: anywhere;
}

/* 開始日時と終了日時。見本では白いカードが2枚、隙間はわずか4pxで、角は4つとも丸い。
   （上辺を画素で追うと、接合部の手前で2枚とも内側の角が丸まっている） */

.cvm-vip-page .crh-reservation-details-page-datetime-info {
    margin-top: 12px;
    gap: 4px;
}

.cvm-vip-page .crh-reservation-details-page-start-datetime-info,
.cvm-vip-page .crh-reservation-details-page-end-datetime-info {
    box-sizing: border-box;
    padding: 12px 10px;
    border: 1px solid var(--vip-edge);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* 見出しの板。見本には輪郭線が無く、ごく浅い縦のグラデーションだけ */
.cvm-vip-page .crh-reservation-details-page-start-datetime-info-title,
.cvm-vip-page .crh-reservation-details-page-end-datetime-info-title {
    box-sizing: border-box;
    width: 100%;
    max-width: 142px;
    height: 29px;
    border-radius: 15px;
    margin-bottom: 6px;
    background: var(--vip-pill);
    color: var(--vip-pill-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-size: 0.9375rem;
}

/* 項目のカードとレシート。こちらも padding が外付けなので box-sizing を直す */

.cvm-vip-page .crh-reservation-details-page-meeting-place-info,
.cvm-vip-page .crh-reservation-details-page-new-for-store-info,
.cvm-vip-page .crh-reservation-details-page-schedule-adjusted-info,
.cvm-vip-page .crh-reservation-details-page-question-info,
.cvm-vip-page .crh-reservation-details-page-contact-info,
.cvm-vip-page .crh-reservation-details-page-reservation-route-info,
.cvm-vip-page .crh-reservation-details-page-receipt {
    box-sizing: border-box;
    width: 100%;
    margin-top: 11px;
    padding: 12px;
    border: 1px solid var(--vip-edge);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cvm-vip-page .crh-reservation-details-page-receipt {
    margin-top: 12px;
}

/* 見本では項目名は値より小さく淡い。値のほうを濃く太くして、読ませる側を逆にしている */

.cvm-vip-page .crh-reservation-details-page-meeting-place-title,
.cvm-vip-page .crh-reservation-details-page-new-for-store-title,
.cvm-vip-page .crh-reservation-details-page-schedule-adjusted-title,
.cvm-vip-page .crh-reservation-details-page-question-title,
.cvm-vip-page .crh-reservation-details-page-contact-title,
.cvm-vip-page .crh-reservation-details-page-reservation-route-title {
    display: block;
    margin-bottom: 2px;
    font-size: 0.8125rem;
    color: var(--vip-ink);
}

.cvm-vip-page .crh-reservation-details-page-meeting-place,
.cvm-vip-page .crh-reservation-details-page-new-for-store,
.cvm-vip-page .crh-reservation-details-page-schedule-adjusted,
.cvm-vip-page .crh-reservation-details-page-question,
.cvm-vip-page .crh-reservation-details-page-contact,
.cvm-vip-page .crh-reservation-details-page-reservation-route {
    color: var(--vip-value);
    font-weight: 600;
}

.cvm-vip-page .crh-reservation-details-page-store-name,
.cvm-vip-page .crh-receipt-payment-method-title,
.cvm-vip-page .crh-reservation-details-page-therapist-info-button {
    color: var(--vip-ink);
}

/* レシートの品名は、見本では灰色で、途中で切れずに折り返している */

.cvm-vip-page .crh-receipt-item-title {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 12px;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    color: var(--vip-item);
}

.cvm-vip-page .crh-receipt-item-price-and-reason {
    width: auto;
    flex: 0 0 auto;
}

.cvm-vip-page .crh-receipt-item-price {
    color: var(--vip-value);
}

.cvm-vip-page .crh-receipt-total-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--vip-deep);
}

.cvm-vip-page .crh-receipt-total-price {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--vip-deep);
}

.cvm-vip-page .crh-reservation-details-page-status-message {
    color: var(--vip-deep);
}

/* 見本では品名の行ごとにも細い線が入り、合計金額の上だけ一段濃くなる */

.cvm-vip-page .crh-receipt-item + .crh-receipt-item {
    border-top: 1px solid var(--vip-rule-soft);
    padding-top: 10px;
}

.cvm-vip-page .crh-receipt-total,
.cvm-vip-page .crh-receipt-payment-method {
    border-top: 2px solid var(--vip-rule);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* VIPの札（お客様カードの右）。冠＋VIP＋ランク名を金属の板に載せる。
   見本では3ランクとも同じ大きさで、隣のアバターと高さがそろっている。
   縁は線ではなく金属の帯なので、地の色と帯を2枚重ねて border に敷く（BLACK だけ帯が太い） */

.cvm-vip-plate {
    flex: 0 0 auto;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 120px;
    height: 62px;
    padding: 0 10px;
    border: var(--vip-plate-width) solid transparent;
    border-radius: 10px;
    background-image: var(--vip-plate), var(--vip-plate-band);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--vip-plate-bevel), 0 3px 7px rgba(0, 0, 0, 0.24);
    color: var(--vip-plate-ink);
    line-height: 1.1;
    text-shadow: var(--vip-plate-shade);
}

.cvm-vip-plate-crown {
    width: 24px;
    height: 20px;
    flex: 0 0 auto;
    fill: var(--vip-crown-ink);
}

.cvm-vip-plate-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.cvm-vip-plate-vip {
    font-family: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
}

.cvm-vip-plate-rank {
    font-family: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 1.1875rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* PLATINUM だけ字数が多いので、札の幅を他とそろえるために字を小さくする（見本も同じ） */
.cvm-vip-plate-platinum .cvm-vip-plate-rank {
    font-size: 0.8125rem;
}

/* 画面が狭いときは札と写真を小さくして、お名前の行を潰さない */

@media (max-width: 360px) {
    .cvm-vip-plate {
        width: 106px;
        height: 56px;
        padding: 0 8px;
        gap: 6px;
    }

    .cvm-vip-plate-crown { width: 21px; height: 18px; }
    .cvm-vip-plate-vip   { font-size: 0.6875rem; }
    .cvm-vip-plate-rank  { font-size: 1.0625rem; }
    .cvm-vip-plate-platinum .cvm-vip-plate-rank { font-size: 0.75rem; }

    .cvm-vip-page .crh-reservation-details-page-therapist-img-and-name {
        gap: 7px;
    }

    .cvm-vip-page .crh-reservation-details-page-therapist-img-and-name img {
        width: 54px;
        height: 54px;
    }
}