@charset "utf-8";
:root {
    --font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans","Noto Sans JP", Meiryo, sans-serif;

    /* 全体の背景色 */
    --background-color-base: #ffffff;
    --background-color-base-rgb: 255,255,255;
    --background-color-base-hover: #f0f0f0;
    --background-color-light: #eeeeee;
    --background-color-light2: #f7f7f7;
    --background-color-light-hover: #e6e6e6;

    /* ヘッダー・フッターカラー */
    --header-background-color: #333;
    --header-link-color:#fff;
    --header-link-hover-color:#d9d9d9;
    --header-link-border-color:#333;
    --hedder-text-color-light:#b2b2b2;
    --hedder-text-color-light2:#8b8b8b;
    --header-icon-color:#f6f6f6;
    --header-icon-color-hover: #cacaca;
    --hedder-input-color:#636363;
    --hedder-input-text-color:#fff;
    --hedder-text-color-default:#ffffff;
    --header-border-color-dark:#595959;
    --header-bottom-background-color: #f7f7f7;
    --header-bottom-link-color:#333;
    --header-tag-link-background-color: var(--background-color-light2);
    --header-tag-link-background-hover-color: var(--header-tag-link-background-color);
    --header-tag-link-border-color: var(--border-color-light);
    --header-tag-link-color: var(--header-bottom-link-color);
    --header-dropdown-background-color: var(--background-color-base);
    --header-dropdown-border-color: var(--border-color-light);
    --header-dropdown-btn-active-background-color: var(--header-dropdown-background-color);
    --header-submenu-link-border-color: var(--border-color-light);
    --header-submenu-link-hover-background-color: var(--background-color-light2);

    /* ヘッダーポイント */
    --header-point-color: var(--header-link-color);
    --header-point-color-hover: var(--header-icon-color-hover);
    --header-point-color-icon: var(--header-point-color);
    
    /* drawer */
    --drawer-logo-arrow-border-color:var(--text-color-light2);
    --drawer-logo-border-bottom-color:var(--border-color-light);
    --drawer-login-list-background-color:var(--background-color-light);
    --drawer-login-btn-background-color:var(--background-color-base);
    /* suggest */
    --suggest-background-color:var(--background-color-light);
    --suggest-border-color:var(--border-color-dark);
    
    /* アイコンなど */
    --icon-color: #959595;
    --icon-color-hover: #737373;

    /* ボタンカラー */
    --btn-color-disabled: #b9b9b9;
    --btn-color-disabled-text: #808080;
    --btn-color-delete: #c8c8c8;
    --btn-color-delete-text: #000;
    --btn-color-delete-hover: #bdbdbd;
    --btn-color-gray: #f6f6f6;
    --btn-color-gray-border: #dfdfdf;
    --btn-color-gray-hover: #eaeaea;
    --btn-color-gray-text: #333;
    --btn-color-cover: #fff;
    --btn-color-cover-text: #333;
    --btn-color-cover-hover: #f6f6f6;

    /* ログイン送信ボタン */
    --login-submit-btn-bg: var(--color-main);
    --login-submit-btn-text: var(--text-color-with-background);
    --login-submit-btn-border: none;
    --login-submit-btn-radius: 1000px;
    --login-submit-btn-bg-hover: var(--color-main-hover);
    --login-submit-btn-text-hover: var(--login-submit-btn-text);
    --login-submit-btn-border-hover: var(--login-submit-btn-border);

    /* 新規登録送信ボタン */
    --signup-submit-btn-bg: var(--color-main);
    --signup-submit-btn-text: var(--text-color-with-background);
    --signup-submit-btn-border: none;
    --signup-submit-btn-radius: 1000px;
    --signup-submit-btn-bg-hover: var(--color-main-hover);
    --signup-submit-btn-text-hover: var(--signup-submit-btn-text);
    --signup-submit-btn-border-hover: var(--signup-submit-btn-border);

    /* 罫線カラー */
    --border-color-light: #e9e9e9;
    --border-color-dark: #dddddd;
    /* #133257 メルマガ同意欄の枠線 */
    --optin-box-border: var(--border-color-dark);

    /* メイン、アクセントカラー */
    --color-main: #333;
    --color-main-rgb: 51,51,51;
    --color-main-hover: #000;
    --color-accent:#E60035;

    /* タグフィルター選択時の背景 */
    --filter-tag-check-bg: #fcf4f4;
    --filter-tag-check-mark: var(--color-accent);
    --filter-tag-plus-mark:hsl(210 0% 80% / 1);
    /* タグフィルター選択不可時 */
    --filter-tag-disabled-text: var(--text-color-light2);
    --filter-tag-disabled-bg: var(--btn-color-gray);
    --filter-tag-disabled-border: var(--btn-color-gray-border);
    /* タグフィルター filter_limit_notice */
    --filter-tag-limit-notice-text: var(--reward-notice-color);
    --filter-tag-limit-notice-bg: var(--reward-notice-background);
    --filter-tag-limit-notice-border: var(--reward-notice-border-color);

    /* side_filter */
    --side_filter-reset-btn-bg-color:hsl(0 0% 95% / 1);
    --side_filter-reset-btn-text-color:var(--sp-filter-slide-list-btn-text-color);
    --side_filter-reset-btn-border-color:hsl(0deg 0% 90%);
    --side_filter-reset-btn-icon-color:#5c5c5c;
    --side_filter-slide-head-bg-color: var(--background-color-light2);
    --side_filter-slide-head-icon-color:  var(--link-color-light);
    --sp-side_filter-slide-head-border-color: var(--border-color-dark);
    --sp-side_filter-slide-selection-border-color: var(--border-color-light);
    --sp-side_filter-slide-list-bg-color: var(--background-color-base);
    --sp-filter-open-btn-menu-icon-color:#a2a2a2;
    --sp-filter-open-btn-border-color: var(--border-color-light);
    --sp-filter-close-btn-color:var(--text-color-with-background);
    --sp-side-filter-background-color:var(--background-color-base);
    --sp-side-filter-title-border-color:var(--border-color-light);
    --sp-side-filter-title-box-shadow:0px 4px 4px -4px #00000015;
    --sp-root-filter-slide-wrap-bg-color:var(--background-color-base);
    --sp-side_filter_bt_btn_wrap-bg-color:var(--agree-checkbox-background-color);
    --sp-side_filter_bt_btn_wrap-box-shadow:0px -4px 4px -4px #00000015;
    --sp-side_filter_bt_btn_wrap-border-color:var(--border-color-light);
    --sp-filter-slide-list-btn-border-color:var(--border-color-light);
    --sp-filter-slide-list-btn-hovar-border-color:#ff9a9a;
    --sp-filter-slide-list-btn-bg-color:#fafafa;
    --sp-filter-slide-list-btn-text-color:var(--btn-color-gray-text);
    --sp--color-cover-rgb:rgba(var(--color-cover-rgb), .6);

    /* ハンバーガーメニュー展開時の全面カバーなど */
    --color-cover-rgb: 0,0,0;

    /* システムメッセージのカラー */
    --system-message-color: #b8d9ff;
    --system-message-text-color: #333333;
    --success-message-color: #1f6b3c;
    --success-message-background-color: #eaf7ef;
    --success-message-border-color: #c9e7d4;
    --warning-border-color: #ffd64f;
    --warning-background-color: #ffd64f;
    --warning-text-color: #333;
    --error-color:#E60035;
    --error-text-color:#fff;
    --error-color-hover:#D50032;
    --error-textonly-color: #E60035;/*テキストのみ表示時のエラー文字色*/
    --cart-btn-popup-background-color:rgb(55 55 55 / 92%);
    --cart-btn-popup-arrow-background-color:rgb(71 71 71);
    --cart-btn-popup-arrow-border-color:transparent;
    --cart-btn-popup-text-color:#fff;
    --cart-btn-popup--shadow: 0 0 5px 0 rgb(0 0 0 / 50%);

    /* テキストカラー */
    --text-color-default: #333333;
    --text-color-light: #737373;
    --text-color-light2: #9c9c9c;
    --text-color-placeholder:#b2b2b2;
    /* 背景色付き要素のテキストカラー */
    --text-color-with-background:#fff;

    /* Referrence price */
    --pefprice-text: var(--color-accent);

    /* リンクテキストカラー */
    --link-color-default: #5c5c5c;
    --link-color-default-hover: #000000;
    --link-color-colored: #0074c0;
    --link-color-colored-hover: #005a96;
    --link-color-light: #999999;

    /* input、textarea、select要素の背景色 */
    --input-color:rgba(0,0,0,.05);
    --input-text-color:var(--text-color-default);
    --input-border: none;
    --input-disabled-background-color:#b9b9b9;
    --input-disabled-text-color: #808080;
    --input-disabled-border:none;
    
    /* 動画一覧 */
    --text-videolist-price: var(--color-accent);

    /* 動画サムネイル */
    --thumbnail-alt-text-color:#787878;
    
    /* 動画サムネイル 無料アイコン*/
    --icon-color-free:#fff;
    --icon-color-free-text:#E60035;
    --icon-color-free-border-color:var(--icon-color-free-text);
    
    /* 動画サムネイル 見放題アイコン */
    --icon-color-subscription:#000;
    --icon-color-subscription-text:#fff;
    --icon-color-subscription-border-color:transparent;
    
    /* 動画サムネイル 新作・準新作 */
    --icon-color-recent:#E60035;
    --icon-color-recent-text:#fff;
    --icon-color-recent-border-color:transparent;
    
    
    /* video-icon */
    --icon-color-8k:linear-gradient(135deg,#ffc300 0%, #ffc300 50%, #fff 50%, #fff 100%);
    --icon-color-8k-text:#000;
    --icon-color-8k-border-color:hsl(45.88deg 100% 47%);
    
    --icon-color-4k:#ffc300;
    --icon-color-4k-text:#000;
    --icon-color-4k-border-color:transparent;


    --icon-color-full-hd:hsl(191 90% 32% / 1);
    --icon-color-full-hd-text:#fff;
    --icon-color-full-hd-border-color:transparent;

    --icon-color-hd:hsl(191 55% 50% / 1);;
    --icon-color-hd-text:#fff;
    --icon-color-hd-border-color:transparent;

    --icon-color-high:hsl(191 25% 45%);
    --icon-color-high-text:#fff;
    --icon-color-high-border-color:transparent;
    
    --icon-color-middle:hsl(191 18% 86%);
    --icon-color-middle-text:#212529;
    --icon-color-middle-border-color:transparent;

    --icon-color-low:hsl(191 18% 95%);
    --icon-color-low-text:hsl(210deg 21% 15% / 70%);
    --icon-color-low-border-color:transparent;

    /* ランキングセクション */
    --ranking-page-header-background-color: var(--background-color-light2);
    --ranking-page-header-border-color: var(--border-color-light);
    --ranking-page-title-text-color: var(--text-color-default);
    --ranking-page-lead-text-color: var(--text-color-light);
    --ranking-page-tabs-background-color: var(--background-color-base);
    --ranking-page-tabs-border-color: var(--border-color-light);
    --ranking-page-tab-background-color: var(--background-color-base);
    --ranking-page-tab-background-color-hover: var(--background-color-light2);
    --ranking-page-tab-text-color: var(--text-color-default);
    --ranking-page-tab-active-background-color: var(--color-accent);
    --ranking-page-tab-active-text-color: var(--text-color-with-background);
    --ranking-page-card-border-color: var(--border-color-light);
    --ranking-page-card-background-color: var(--background-color-base);
    --ranking-page-card-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.03);
    --ranking-page-list-border-color: var(--border-color-light);
    --ranking-page-list-divider-color: var(--border-color-light);
    --ranking-page-list-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06);
    --ranking-page-rank-background-color: color-mix(in srgb, var(--text-color-default) 9%, var(--background-color-base));
    --ranking-page-rank-text-color: var(--text-color-default);
    --ranking-page-rank-top-background-color: var(--color-accent);
    --ranking-page-rank-top-text-color: var(--text-color-with-background);
    --ranking-page-more-border-color: var(--border-color-dark);
    --ranking-page-more-background-color: var(--background-color-base);
    --ranking-page-more-background-color-hover: var(--background-color-light2);
    --ranking-page-more-text-color: var(--text-color-default);
    --ranking-page-more-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04);

    /* 「もっと見る」ボタン（slider_title 等。ランキング more と同色） */
    --slider-more-border-color: var(--ranking-page-more-border-color);
    --slider-more-background-color: var(--ranking-page-more-background-color);
    --slider-more-background-color-hover: var(--ranking-page-more-background-color-hover);
    --slider-more-text-color: var(--ranking-page-more-text-color);

    /* slider_title 見出し帯 */
    --slider-title-border-color: var(--border-color-light);
    --slider-title-background-color: var(--background-color-light2);
    --slider-title-text-color: var(--text-color-default);

    /* icon_required */
    --icon-required-text-color:#fff;
    --icon-required-background-color:var(--color-accent);
    --icon-required-border-color:transparent;
    
    /* ページトップへ戻るボタン */
    --scroll-to-top-color:0,0,0;
    --scroll-to-top-color-arrow:#fff;

    /* 動画一覧スライダーの前へ・次へボタンカラー */
    --video-slider-color:0,0,0;
    --video-slider-color-arrow:#fff;
    
    --avatar-icon-border-color:var(--border-color-light);
    --avatar-icon-border-color-on-primary-bg:var(--header-border-color-dark);
    --avatar-icon-background-color:var(--background-color-base);

    /* ローディング */
    --loading-back-color:var(--background-color-light);
    --loading-icon-base-color: rgb(0 0 0 / 25%);
    --loading-icon-accent-color:rgb(0 0 0 / 60%);

    /* まとめ販売・金額と購入エリア */
    --group-detail-price-background: #fff;
    --group-detail-price-border: transparent;
    --group-detail-price-under-border: var(--border-color-light);
    /* まとめ販売ラベル */
    --group-label-purchased-background: var(--border-color-light);
    --group-label-purchased-text: var(--text-color-light);
    --group-label-purchased-border: 1px solid var(--border-color-light);
    /* まとめ販売・作品詳細 */
    --group-detail-border: var(--border-color-light);
    --group-detail-title-border: var(--border-color-light);
    --group-detail-title-icon: var(--text-color-default);
    --group-detail-background: #fff;
    --group-detail-more-text: var(--color-accent);
    --group-detail-more-text-hover: var(--color-accent);
    --group-detail-more-background: transparent;
    --group-detail-more-background-hover: #f2f2f2;
    /* まとめ販売・プレイリスト */
    --playlist-note-text: rgba(0,0,0,.4);
    --playlist-active-background: #E5F4FE;
    --playlist-hover-background: hsl(204deg 92.59% 96% / 70%);
    --playlist-time-background: #333;
    --playlist-time-text:#fff;
    --playlist-playing-icon: #558EB4;
    --playlist-dl-background: var(--color-main);
    --playlist-dl-text: var(--text-color-with-background);
    --playlist-paid-label-base-background: #a2a2a2;
    --playlist-paid-label-base-text: #ffffff;
    --playlist-item-count-text: rgba(0,0,0,.6);
    --playlist-item-count-active-text: rgba(0,0,0,.65);
    /* まとめ販売購入後ラベル */
    --group-detail-purchaselabel-background: var(--group-label-purchased-background);
    --group-detail-purchaselabel-text: var(--group-label-purchased-text);
    /* まとめ販売プレイリストの文字オーバーレイ表示 */
    --playlist-overlay-background:rgba(0,0,0,.7);
    --playlist-overlay-border:transparent;
    --playlist-overlay-text: #fff;
    --playlist-overlay-shadow: 0 0 14px rgba(0,0,0,.2);

    /* 購入ボタンエリア */
    --purchase-btnarea-bg: var(--background-color-light2);

    /* 見放題エリア */
    --unlimited-block-bg: #F8E9EE;
    --unlimited-block-radius: 4px;
    --unlimited-inner-bg: #FFF;
    --unlimited-block-border: #F8E9EE;
    --unlimited-price-text: var(--pefprice-text);
    --unlimited-price-label: var(--text-color-light);

    /* まとめ特別価格 */
    --member-limitedprice-block-bg: #FFF3E4;
    --member-limitedprice-block-radius: 4px;
    --member-limitedprice-inner-bg: #fff;
    --member-limitedprice-border: #F7F1E8;

    /* 見放題ユーザー向け表示 */
    --unlimited-paid-mark: #fff;
    --unlimited-paid-mark-bg: #2FD1B8;
    --unlimited-paid-raidus: 4px;
    
    /* monthly-only-done */
    --monthly-only-done-text-color:hsl(161 70% 30% / 1);
    --monthly-only-done-bg-color:#E6F4EA;
    --monthly-only-done-icon-check-color:var(--monthly-only-done-text-color);
    
    /* ボタン角丸 */
    --btn-radius: 1000px;
    --btn-font-size: 1.4rem;
    --btn-font-weight: bold;
    /* 購入ボタン - カートにいれる */
    --purchase-btn-cart-bg: var(--background-color-base);
    --purchase-btn-cart-bg-hover: rgba(var(--color-main-rgb), 0.07);
    --purchase-btn-cart-text: var(--color-main);
    --purchase-btn-cart-text-hover: var(--color-main);
    --purchase-btn-cart-border:var(--color-main);
    --purchase-btn-cart-border-hover:var(--color-main);
    /* 購入ボタン - 今すぐ購入 */
    --purchase-btn-buy-bg: var(--color-accent);
    --purchase-btn-buy-bg-hover: var(--color-accent);
    --purchase-btn-buy-text: var(--text-color-with-background);
    --purchase-btn-buy-text-hover: var(--text-color-with-background);
    --purchase-btn-buy-border: var(--color-accent);
    --purchase-btn-buy-border-hover: var(--color-accent);

    /* 購入ボタン - 見放題購入ボタン */
    --unlimited-btn-bg: #fff;
    --unlimited-btn-bg-hover:#fff;
    --unlimited-btn-text:var(--color-accent);
    --unlimited-btn-text-hover:var(--color-accent);
    --unlimited-btn-border:1px solid var(--color-accent);
    --unlimited-btn-border-hover:1px solid var(--color-accent);
    --unlimited-btn-radius: 4px;

    /* レビューの星 */
    --star-color-back:#d8d8d8;
    --star-color-front:#ffc300;

    /* ポイント履歴 */
    --pointbalance-current-background: var(--background-color-light2);
    --pointbalance-icon: #F7C41C;
    --pointbalance-color-expiry: var(--color-accent);
    /* --pointbalance-color-tabactive: var(--color-accent); */
    --pointbalance-tab-active-color: var(--color-accent);
    --pointbalance-tab-active-border: var(--color-accent);
    --pointbalance-tab-active-background: var(--background-color-light2);
    --pointbalance-tab-default-border: var(--border-color-light);
    --pointbalance-table-border: var(--border-color-light);
    --pointbalance-table-base-background: var(--background-color-light2);
    --pointbalance-table-odd-background: #EAEAEA;
    --pointbalance-pager-background:var(--background-color-base);
    --pointbalance-pager-background-hover:var(--background-color-base);
    --pointbalance-pager-text:var(--text-color-default);
    --pointbalance-pager-text-hover: var(--text-color-light2);
    --pointbalance-pager-border:var(--border-color-light);
    --pointbalance-pager-border-hover:var(--border-color-light);
    --pointbalance-pager-text:var(--text-color-default);
    --pointbalance-list-add: #147BE2;
    --pointbalance-list-use: #E31717;

    /* 個別作品一覧エリア */
    --individual-video-lists-head-balloon-text: var(--color-accent);
    --individual-video-lists-head-balloon-back: var(--background-color-base);
    --individual-video-lists-head-balloon-border: var(--color-accent);
    --individual-video-lists-head-label-text: var(--text-color-with-background);
    --individual-video-lists-head-label-back: var(--color-main);
    --individual-video-lists-btn-text: var(--color-main);
    --individual-video-lists-btn-back: var(--background-color-base);
    --individual-video-lists-btn-border: var(--color-main);
    --individual-video-lists-btn-hover: rgba(var(--color-main-rgb), 0.07);

    /* まとめ作品一覧エリア */
    --group-video-lists-head-balloon-text: var(--color-accent);
    --group-video-lists-head-balloon-back: var(--background-color-base);
    --group-video-lists-head-balloon-border: var(--color-accent);
    --group-video-lists-head-label-text: var(--icon-color-subscription-text);
    --group-video-lists-head-label-back: var(--icon-color-subscription);
    --group-video-lists-head-label-border: transparent;
    --group-video-lists-lead-back: var(--background-color-light2);
    --group-video-lists-btn-text: var(--color-main);
    --group-video-lists-btn-back: var(--background-color-base);
    --group-video-lists-btn-border: var(--color-main);
    --group-video-lists-btn-hover: rgba(var(--color-main-rgb), 0.07);

    /* 新TOPページデザイン */
    --top-v2-search-background: var(--background-color-base);
    --top-v2-title-border: transparent;
    --top-v2-nav-border: var(--border-color-dark);
    --top-v2-nav-border-active: var(--color-accent);
    --top-v2-nav-border-size: 3px;
    --top-v2-nav-border-position: -3px;/*Just enter the same pixels as --top-v2-nav-border-size with a negative number*/
    --top-v2-nav-text: var(--text-color-light2);
    --top-v2-nav-text-active: var(--color-accent);
    --top-v2-nav-sp-overlay-background: background: rgb(var(--background-color-base-rgb));
    --top-v2-nav-sp-overlay-gradent: linear-gradient(90deg, rgba(var(--background-color-base-rgb),0) 0%, rgba(var(--background-color-base-rgb),.8) 100%);
    
    --top-v2-pager-background-active: transparent;
    --top-v2-pager-text-active: var(--color-main);
    --top-v2-pager-border-active: var(--color-main);
    /* 新TOPページデザイン - ランク等 */
    --top-v2-list-background: var(--background-color-base);
    --top-v2-list-border: var(--border-color-dark);
    --top-v2-rank-padding: 8px;
    --top-v2-rank-background: var(--background-color-base);
    --top-v2-rank-text: var(--color-main);
    --top-v2-rank-radius: 0px;

    /* sale */
    --sale-discount-badge-background: var(--color-accent);
    --sale-discount-badge-text-color: var(--text-color-with-background);  
    --sale-name-text-color: var(--color-accent);
    --on-sale-price-original-text-color: var(--text-color-light2);
    --sale-overview_wrap-background: var(--reserve-price-note-background);

    /* ポイント還元キャンペーン（#132772）：詳細側チップ（.reward-line）用。
       決済確認の通知（.reward-notice）はテーマ既定の枠線・本文色を使う */
    --reward-notice-color: #8a5d14;
    --reward-notice-background: #fff9ec;
    --reward-notice-terms-color: var(--text-color-light);
    /* カート・見放題PRバナーの白背景カードは文字と同色の枠線だときついため、背景色に寄せて和らげる */
    --reward-notice-border-color: color-mix(in srgb, var(--reward-notice-color) 50%, var(--background-color-base));

    /* 予約 */
    --reserve-border: transparent;
    --reserve-background: #fff3f5;
    --reserve-radius: 4px;
    --reserve-padding: 12px;
    --reserve-label-background: #fff;
    --reserve-label-text: var(--color-accent);
    --reserve-label-border: 1px solid var(--color-accent);

    --reserve-price-note-background: #FCEBEF;
    --reserve-price-note-text: #652B39;
    --reserve-price-note-radius: 0;
    
    --reserve-price-title-background: var(--reserve-price-note-background);
    --reserve-price-title-text: var(--reserve-price-note-text);

    --reserve-pay-background:#fff;
    --reserve-pay-border: 1px solid var(--border-color-dark);
    --reserve-pay-border-ischeck: 1px solid var(--color-main);
    --reserve-pay-radius: 4px;

    /* leave */
    --leave-notes-list-border: var(--warning-border-color);
    --leave-icon-background:var(--warning-background-color);
    --leave-icon-text:var(--text-color-default);
    --leave-notes-warning-background:hsl(346.17deg 100% 96%);
    --leave-notes-warning-border:none;
    --leave-notes-warning-text-color:var(--text-color-default);
    --leave-notes-warning-text-strong-color:var(--error-color);
    
    /* pay_plan */
    --pay-plan-label-background-color:var(--background-color-light2);
    --pay-plan-label-text-color:var(--text-color-default);
    --pay-plan-label-border-color:var(--border-color-light);
    --pay-plan-label-active-border-color:var(--color-main);
    --pay-plan-cacheBox-title-text-color:var(--text-color-default);
    --pay-plan-cacheBox-title-active-text-color:var(--text-color-default);
    --pay-plan-paymentmethod-detail-border-color:var(--border-color-light);
    --pay-plan-currency-amount-text-color:var(--text-color-light2);
    --pay-plan-amount-text-color:var(--color-accent);
    --pay-plan-select-this-plan-background-color:var(--background-color-base);
    --pay-plan-select-this-plan-text-color:var(--text-color-default);
    --pay-plan-select-this-plan-border-color:var(--border-color-light);
    --pay-plan-select-this-plan-active-background-color:hsl(346 100% 95%);
    --pay-plan-select-this-plan-active-text-color:var(--color-accent);
    --pay-plan-select-this-plan-active-border-color:var(--color-accent);

    /* popup-upload */
    --popup-upload-form-text-color:var(--text-color-light2);
    --popup-upload-file-item-background:var(--background-color-light2);
    --popup-upload-file-media-dl-btn-background:var(--background-color-base);
    --popup-upload-file-media-dl-btn-text-color:var(--btn-color-gray-text);
    --popup-upload-file-media-dl-btn-border-color:var(--btn-color-gray-border);
    --popup-upload-file-media-dl-btn-hover-background:var(--btn-color-gray-hover);
    --popup-upload-file-media-delete-btn-background:var(--btn-color-delete);
    --popup-upload-file-media-delete-btn-text-color:var(--btn-color-delete-text);
    --popup-upload-file-media-delete-btn-hover-background:var(--btn-color-delete-hover);

    /* フッタ */
    --footer-text-color-light:var(--text-color-default);
    --footer-payment-info: #fff;

    /* skeleton */
    --skeleton-background: var(--background-color-light);
    --skeleton-shimmer-gradient-transparent: rgba(var(--background-color-base-rgb),0);
    --skeleton-shimmer-gradient-background: rgba(var(--background-color-base-rgb),0.48);

    /* agree */
    --agree-label-border-color:var(--border-color-light);
    --agree-label-text-color:var(--text-color-default);
    --agree-label-background-color:transparent;
    
    --agree-label-main-background-color:var(--background-color-light2);
    
    --agree-checkbox-border-color:#333;
    --agree-checkbox-background-color:var(--background-color-base);
    
    --agree-checked-label-border-color:hsl(212.11deg 100% 40%);
    --agree-checked-label-text-color:var(--system-message-text-color);
    --agree-checked-label-background-color:transparent;
    
    --agree-checked-label-main-background-color:var(--system-message-color);
    
    --agree-checked-checkbox-border-color:transparent;
    --agree-checked-checkbox-background-color:var(--agree-checked-label-border-color);
    
    --agree-checked-checkbox-mark-border-color:#fff;
    
    /* monthly-plan-pr-area */
    --monthly-plan-pr-section-title-text-color:var(--text-color-default);
    --monthly-plan-pr-plan-banner-background-color:var(--background-color-light2);
    --monthly-plan-pr-video-count-bar-text-color:var(--text-color-default);
    --monthly-plan-pr-video-count-bar-border-color:var(--border-color-light);
    --monthly-plan-pr-video-count-bar-background-color:var(--background-color-base);
    --monthly-plan-pr-plan-info-border-color:var(--monthly-plan-pr-video-count-bar-border-color);
    --monthly-plan-pr-plan-info-background-color:var(--monthly-plan-pr-video-count-bar-background-color);
    --monthly-plan-pr-plan-price-text-color:var(--text-color-default);
    --monthly-plan-pr-plan-info-right-background-color:var(--background-color-light2);
    --monthly-plan-pr-join-btn-bg:var(--purchase-btn-buy-bg);
    --monthly-plan-pr-join-btn-text:var(--purchase-btn-buy-text);
    --monthly-plan-pr-join-btn-border:var(--purchase-btn-buy-border);
    --monthly-plan-pr-join-btn-bg-hover:var(--purchase-btn-buy-bg-hover);
    --monthly-plan-pr-join-btn-text-hover:var(--purchase-btn-buy-text-hover);
    --monthly-plan-pr-join-btn-border-hover:var(--purchase-btn-buy-border-hover);
    --monthly-plan-pr-unlimited_message-bg:transparent;
    --monthly-plan-pr-unlimited_message-text:inherit;
    --monthly-plan-pr-unlimited_message-border:var(--text-color-light);
    --monthly-plan-pr-plan-image-link-border-color:transparent;
    --monthly-plan-pr-plan-image-link-background-color:var(--skeleton-background);
    --monthly-plan-pr-plan-image-link-text-text-color:var(--text-color-with-background);  

    /* monthly-only-message */
    --monthly-only-message-bg:#FFFCF0;
    --monthly-only-message-unlimited-gradient-start:hsla(46, 65%, 52%, 1);
    --monthly-only-message-unlimited-gradient-mid-1:hsla(45, 82%, 70%, 1);
    --monthly-only-message-unlimited-gradient-mid-2:hsla(45, 97%, 77%, 1);
    --monthly-only-message-unlimited-gradient-end:hsla(46, 65%, 52%, 1);
    --monthly-only-message-unlimited-text:#8C6217;
    --monthly-only-message-unlimited-icon-gradient-start:hsl(45 100% 65% / 1);
    --monthly-only-message-unlimited-icon-gradient-end:hsl(46 65% 40% / 1);
    --monthly-only-message-locked-text:#756C5C;
    --monthly-only-message-icon:#D4AF37;
    --monthly-only-message-badge-text:#FFF;
    --monthly-only-message-badge-bg:#D4AF37;

    /* plan */
    --pay-plan-monthly-main-color:#ec365d;
    
    --plan-info-title-text-color:var(--pay-plan-monthly-main-color);
    --plan-info-count-text-color:var(--pay-plan-monthly-main-color);
    --plan-info-count-date-text-color:var(--text-color-light2);
    
    --p-pay-selectPayment-background-color:hsl(0deg 42.86% 97.25%);
    --p-pay-selectPayment-border-color:transparent;
    
    --pay-plan-list-background-color:var(--background-color-base);
    --pay-plan-list-border-color:rgba(0, 0, 0, 0.17);
    
    --pay-plan-list-selected-background-color:hsl(347.14deg 82.73% 98%);
    --pay-plan-list-selected-border-color:var(--pay-plan-monthly-main-color);
    
    --pay-plan-list-title-background-color:transparent;
    --pay-plan-list-title-border-color:rgba(0, 0, 0, 0.08);
    --pay-plan-list-title-text-color:var(--pay-plan-monthly-main-color);
    
    --pay-plan-list-recommend-background-color:var(--background-color-base);
    --pay-plan-list-recommend-border-color:var(--pay-plan-monthly-main-color);
    --pay-plan-list-recommend-text-color:var(--pay-plan-monthly-main-color);
    
    --pay-plan-list-descriptio-text-color:var(--text-color-light);
    
    --pay-plan-list-purchase-btn-background-color:var(--pay-plan-monthly-main-color);
    --pay-plan-list-purchase-btn-border-color:transparent;
    --pay-plan-list-purchase-btn-text-color:#fff;
    --pay-plan-list-purchase-btn-hover-background-color:hsl(347.14deg 82.73% 48%);
    --pay-plan-list-purchase-btn-hover-border-color:var(--pay-plan-list-purchase-btn-border-color);
    --pay-plan-list-purchase-btn-hover-text-color:var(--pay-plan-list-purchase-btn-text-color);
    
    --pay-plan-list-notice-background-color:var(--text-color-light2);
    
    --pay-plan-list-recommend-background-color:var(--background-color-base);
    --pay-plan-list-recommend-border-color:var(--pay-plan-monthly-main-color);
    --pay-plan-list-recommend-text-color:var(--pay-plan-monthly-main-color);

    --pay-plan-list-plan-feature-item-background-color:transparent;
    --pay-plan-list-plan-feature-item-border-color:#E1E1E1;
    --pay-plan-list-plan-feature-item-box-shadow:0px 0px 14px 0px rgba(0, 0, 0, 0.06);

    /* monthly-grade（見放題グレード） */
    --monthly-grade-main-color:var(--pay-plan-monthly-main-color);
    --monthly-grade-main-color-hover:hsl(347.14deg 82.73% 48%);
    /* 面の上で文字・罫線に使う階調（明るいテーマでは main-color と同値） */
    --monthly-grade-main-color-light:var(--monthly-grade-main-color);
    /* 面（カード・パネル）の上に置く罫線。暗いテーマでは面と同化しない明度にする */
    --monthly-grade-border-color:var(--border-color-light);

    /* 見放題グレード：ページ見出し */
    --monthly-grade-page-title-text-color:var(--text-color-default);
    --monthly-grade-page-title-icon-color:var(--monthly-grade-main-color-light);
    --monthly-grade-page-lead-text-color:var(--monthly-grade-main-color-light);
    --monthly-grade-divider-color:var(--border-color-dark);

    /* 見放題グレード：ステップバー */
    --monthly-grade-step-background-color:var(--background-color-light2);
    --monthly-grade-step-text-color:var(--text-color-light2);
    --monthly-grade-step-active-text-color:var(--monthly-grade-main-color-light);
    --monthly-grade-step-arrow-color:var(--border-color-dark);

    /* 見放題グレード：グレードカード */
    --monthly-grade-box-background-color:var(--background-color-light2);
    --monthly-grade-box-lead-text-color:var(--text-color-default);
    --monthly-grade-card-background-color:var(--background-color-base);
    --monthly-grade-card-border-color:var(--monthly-grade-border-color);
    --monthly-grade-card-name-text-color:var(--text-color-default);
    --monthly-grade-card-desc-text-color:var(--text-color-light);
    --monthly-grade-card-price-text-color:var(--text-color-default);
    --monthly-grade-card-price-unit-text-color:var(--text-color-light);
    --monthly-grade-card-count-text-color:var(--text-color-default);
    --monthly-grade-card-note-text-color:var(--text-color-light2);
    --monthly-grade-card-btn-background-color:var(--monthly-grade-main-color);
    --monthly-grade-card-btn-border-color:var(--monthly-grade-main-color);
    --monthly-grade-card-btn-text-color:var(--text-color-with-background);
    --monthly-grade-card-btn-hover-background-color:var(--monthly-grade-main-color-hover);
    --monthly-grade-card-btn-hover-text-color:var(--text-color-with-background);
    --monthly-grade-card-shadow:0 1px 3px rgba(0, 0, 0, 0.06);
    --monthly-grade-card-hover-border-color:var(--monthly-grade-main-color-light);
    --monthly-grade-card-hover-shadow:0 6px 20px rgba(0, 0, 0, 0.10);
    --monthly-grade-card-count-background-color:hsl(347.14deg 82.73% 96%);
    --monthly-grade-card-count-icon-color:var(--monthly-grade-main-color-light);
    --monthly-grade-card-btn-focus-color:var(--monthly-grade-main-color-light);

    /* 見放題グレード：選択中グレードバー */
    --monthly-grade-bar-background-color:hsl(347.14deg 82.73% 98%);
    --monthly-grade-bar-border-color:hsl(347.14deg 82.73% 93%);
    --monthly-grade-bar-label-text-color:var(--text-color-light);
    --monthly-grade-bar-name-text-color:var(--text-color-default);
    --monthly-grade-bar-change-text-color:var(--monthly-grade-main-color-light);
    --monthly-grade-bar-change-hover-text-color:var(--monthly-grade-main-color-hover);

    /* 見放題グレード：お支払い期間選択 */
    --monthly-grade-period-count-text-color:var(--monthly-grade-main-color-light);
    --monthly-grade-period-count-date-text-color:var(--text-color-light2);
    --monthly-grade-period-subtitle-text-color:var(--text-color-light);
    --monthly-grade-period-section-title-text-color:var(--text-color-default);
    --monthly-grade-period-box-background-color:var(--background-color-light2);
    --monthly-grade-period-background-color:var(--background-color-base);
    --monthly-grade-period-border-color:var(--monthly-grade-border-color);
    --monthly-grade-period-head-text-color:var(--monthly-grade-main-color-light);
    --monthly-grade-period-head-accent-color:var(--monthly-grade-main-color-light);
    --monthly-grade-period-desc-text-color:var(--text-color-light);
    --monthly-grade-period-price-text-color:var(--text-color-default);
    --monthly-grade-period-price-unit-text-color:var(--text-color-light);
    --monthly-grade-period-btn-background-color:var(--monthly-grade-main-color);
    --monthly-grade-period-btn-text-color:var(--text-color-with-background);
    --monthly-grade-period-btn-hover-background-color:var(--monthly-grade-main-color-hover);
    --monthly-grade-period-notice-text-color:var(--text-color-light2);

    /* 見放題グレード：見放題プランの魅力セクション（共通） */
    --monthly-plan-features-title-text-color:var(--text-color-default);
    --monthly-plan-features-item-background-color:var(--background-color-base);
    --monthly-plan-features-item-border-color:var(--monthly-grade-border-color);
    --monthly-plan-features-item-title-text-color:var(--text-color-default);
    --monthly-plan-features-item-desc-text-color:var(--text-color-light);

    /* 見放題グレード：グレード切替タブ */
    --monthly-grade-tab-background-color:var(--background-color-base);
    --monthly-grade-tab-border-color:var(--monthly-grade-border-color);
    --monthly-grade-tab-text-color:var(--text-color-default);
    --monthly-grade-tab-hover-background-color:var(--monthly-grade-tab-background-color);
    --monthly-grade-tab-hover-border-color:var(--monthly-grade-main-color-light);
    --monthly-grade-tab-hover-text-color:var(--monthly-grade-main-color-light);
    --monthly-grade-tab-active-background-color:var(--monthly-grade-main-color);
    --monthly-grade-tab-active-border-color:var(--monthly-grade-main-color);
    --monthly-grade-tab-active-text-color:var(--text-color-with-background);
    --monthly-grade-tab-badge-background-color:var(--success-message-color);
    --monthly-grade-tab-badge-text-color:var(--text-color-with-background);
    --monthly-grade-tab-active-badge-background-color:var(--background-color-base);
    --monthly-grade-tab-active-badge-text-color:var(--monthly-grade-main-color);

    /* 見放題グレード：プラン変更ガイド */
    --monthly-grade-guide-background-color:var(--background-color-base);
    --monthly-grade-guide-title-text-color:var(--text-color-default);
    --monthly-grade-guide-check-border-color:var(--text-color-light2);
    --monthly-grade-guide-check-mark-color:var(--text-color-light);
    --monthly-grade-guide-desc-text-color:var(--text-color-light);
    --monthly-grade-guide-card-background-color:var(--background-color-base);
    --monthly-grade-guide-card-border-color:var(--monthly-grade-border-color);
    --monthly-grade-guide-card-title-background-color:var(--background-color-light2);
    --monthly-grade-guide-card-title-text-color:var(--text-color-default);
    --monthly-grade-guide-status-background-color:var(--monthly-grade-main-color);
    --monthly-grade-guide-status-text-color:var(--text-color-with-background);
    --monthly-grade-guide-cycle-text-color:var(--text-color-light);
    --monthly-grade-guide-primary-link-background-color:var(--background-color-base);
    --monthly-grade-guide-primary-link-border-color:var(--monthly-grade-main-color-light);
    --monthly-grade-guide-primary-link-text-color:var(--monthly-grade-main-color-light);
    --monthly-grade-guide-primary-link-hover-background-color:var(--monthly-grade-main-color);
    --monthly-grade-guide-primary-link-hover-text-color:var(--text-color-with-background);
    --monthly-grade-guide-detail-link-text-color:var(--text-color-default);
    --monthly-grade-guide-detail-link-hover-text-color:var(--monthly-grade-main-color-light);
    --monthly-grade-guide-back-link-background-color:var(--background-color-base);
    --monthly-grade-guide-back-link-border-color:var(--monthly-grade-border-color);
    --monthly-grade-guide-back-link-text-color:var(--text-color-default);
    --monthly-grade-guide-back-link-hover-background-color:var(--background-color-light2);
    --monthly-grade-guide-back-link-hover-border-color:var(--text-color-light2);

    /* 見放題グレード：まとめ作品のグレード表示・アップグレード導線 */
    --monthly-grade-group-label-text-color:var(--text-color-default);
    /* 対象グレード名のバッジ。階層を表すデータが無いため中立色にし、
       アクセント（ピンク）は価格とCTAに残す */
    --monthly-grade-group-badge-background-color:var(--background-color-light);
    --monthly-grade-group-badge-text-color:var(--text-color-default);
    --monthly-grade-upgrade-block-bg:var(--unlimited-block-bg);
    --monthly-grade-upgrade-block-border:var(--unlimited-block-border);
    --monthly-grade-upgrade-btn-disabled-background-color:var(--btn-color-disabled);
    --monthly-grade-upgrade-btn-disabled-border-color:var(--btn-color-disabled);
    --monthly-grade-upgrade-btn-disabled-text-color:var(--btn-color-disabled-text);
    --monthly-grade-upgrade-notice-text-color:var(--text-color-light);

    /* plan_panel */
    --plan-panel-no-plan-background-color:var(--background-color-light2);
    --plan-panel-no-plan-text-color:var(--text-color-light);
    --plan-panel-no-plan-border-color:transparent;

    --plan-panel-plan-monthly-recommend-background-color:transparent;
    --plan-panel-plan-monthly-recommend-border-color:var(--border-color-dark);

    --plan-monthly-recommend-btn-background-color:var(--pay-plan-monthly-main-color);
    --plan-monthly-recommend-btn-border-color:transparent;
    --plan-monthly-recommend-btn-text-color:#fff;
    --plan-monthly-recommend-btn-hover-background-color:hsl(347.14deg 82.73% 50%);
    --plan-monthly-recommend-btn-hover-border-color:var(--plan-monthly-recommend-btn-border-color);
    --plan-monthly-recommend-btn-hover-text-color:var(--plan-monthly-recommend-btn-text-color);

    --plan-panel-cancel-link-text-color:var(--link-color-light);  

    --plan-panel-canceled-notice-icon-color:var(--warning-background-color);  
    
    --plan-panel-border-color: var(--border-color-dark);
    --plan-panel-bg: var(--background-color-base);
    --plan-panel-head-bg: var(--background-color-light2);
    --plan-panel-status-active-bg: var(--pay-plan-monthly-main-color);
    --plan-panel-status-canceled-bg: #B2B2B2;
    --plan-panel-status-active-text-color: #fff;
    --plan-panel-status-canceled-text-color: #fff;
    --plan-panel-info-list-canceled-next-color: #B2B2B2;
    --plan-panel-info-list-next-color: #737373;

    /* plan-retention */
    --plan-retention-notice-bg: #FFF0F3;
    --plan-retention-notice-border-color:transparent;
    --plan-retention-notice-title-color: var(--color-accent);
    --plan-retention-plan-info-bg: var(--background-color-light2);
    --plan-retention-recommend-box-bg: var(--background-color-light2);
    --plan-retention-recommend-back-link-bg: #ffffff94;
    --plan-retention-recommend-back-link-bg-hover: #ffffffdb;
    --plan-retention-action-btn-border: var(--color-accent);
    --plan-retention-action-btn-color:var(--color-accent);
    --plan-retention-action-btn-bg: var(--background-color-base);
    --plan-retention-action-btn-bg-hover: hsl(0deg 81.58% 98%);
    --plan-retention-arrow-border-color:#707070;
    /* manager-edit-video */
    --manager-edit-video-title-notes-color:var(--error-color);

    /* release-date-note */
    --automatic-price-changes-wrap-background-color:transparent;
    --automatic-price-changes-wrap-text-color:var(--text-color-light);
    --automatic-price-changes-wrap-border-color:var(--release-date-note-border-color);
    --automatic-price-changes-wrap-head-text-color:var(--text-color-default);
    
    --release-date-notes_underline-background-color:#FFFDBD;
    --release-date-notes_underline-text-color:#4f4f4f;
    
    --release-date-note-lead-text-color:var(--automatic-price-changes-wrap-text-color);
    
    --release-date-note-background-color:transparent;
    --release-date-note-text-color:var(--automatic-price-changes-wrap-text-color);
    --release-date-note-border-color:var(--border-color-dark); 
    
    /* price_pattern_videos */
    --price-pattern-status-icon-new-background-color:var(--text-color-default);
    --price-pattern-status-icon-new-text-color:var(--text-color-with-background);
    --price-pattern-status-icon-new-border-color:transparent;

    --price-pattern-status-icon-recent-background-color:var(--text-color-with-background);
    --price-pattern-status-icon-recent-text-color:var(--text-color-default);
    --price-pattern-status-icon-recent-border-color:var(--text-color-default);

    --price-pattern-status-icon-normal-background-color:var(--background-color-light);
    --price-pattern-status-icon-normal-text-color:var(--text-color-default);
    --price-pattern-status-icon-normal-border-color:transparent;
    
    --price-pattern-status-searchwrapper-background-color:var(--background-color-light2);
    --price-pattern-status-searchwrapper-border-color:transparent;

    --price-pattern-status-price-pattern-table-background-color:transparent;
    --price-pattern-status-price-pattern-table-text-color:inherit;
    --price-pattern-status-price-pattern-table-border-color:transparent;

    --price-pattern-status-price-pattern-th-background-color:var(--background-color-light2);
    --price-pattern-status-price-pattern-th-text-color:inherit;
    
    --price-pattern-status-price-pattern-tr-text-color:rgba(0, 0, 0, 0.08);
    
    --price-pattern-status-price-pattern-background-color:#FFFADF;
    --price-pattern-status-price-pattern-text-color:inherit;

    --price-pattern-status-toolchip-background-color:var(--text-color-default);
    --price-pattern-status-toolchip-text-color:var(--text-color-with-background);
    --price-pattern-status-toolchip-box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
    
    --price-pattern-status-submit-wrapper-background-color:var(--price-pattern-status-price-pattern-background-color);
    --price-pattern-status-submit-wrapper-text-color:inherit;
    --price-pattern-status-submit-wrapper-border-color:rgba(0, 0, 0, 0.04);
    --price-pattern-status-submit-wrapper-box-shadow: 0 -12px 12px -8px #00000017;

    --price-pattern-status-page-link-background-color:var(--text-color-default);
    --price-pattern-status-page-link-text-color:var(--text-color-with-background);
    --price-pattern-status-page-link-border-color:transparent;

    --price-pattern-status-page-link-current-background-color:var(--text-color-with-background);
    --price-pattern-status-page-link-current-text-color:var(--text-color-default);
    --price-pattern-status-page-link-current-border-color:var(--text-color-default);

    /* min_purchase_error */
    --min-purchase-error-bg-color:hsl(0deg 100% 97.06%);
    --min-purchase-error-text-color:var(--color-accent);
    --min-purchase-error-border:1px solid transparent;

    --min-purchase-back-btn-bg-color:transparent;
    --min-purchase-back-btn-text-color:var(--color-accent);
    --min-purchase-back-btn-border:1px solid var(--color-accent);
    --min-purchase-back-btn-border-radius:4px;
    
    --min-purchase-back-btn-hover-bg-color:var(--background-color-base);
    --min-purchase-back-btn-hover-hover-text-color:var(--min-purchase-back-btn-text-color);
    --min-purchase-back-btn-hover-border:var(--min-purchase-back-btn-border);

    --min-purchase-back-btn-arrow-border:solid 1px currentColor;

    /* pay-select-recommendation-lists */
    --pay-select-recommendation-lists-bg-color:var(--background-color-base);
    --pay-select-recommendation-lists-border: 1px solid #E6E6E6;
    --pay-select-recommendation-lists-box-shadow:0 0 12px 0 rgba(0, 0, 0, 0.06);
    
    --pay-select-recommendation-lists-li-border: 1px solid #EFEFEF;

    /* video-member-only */
    --video-member-only-head-balloon-paid-member-only-bg-color:#F8F7F7;
    --video-member-only-head-balloon-paid-member-only-text-color:rgba(0, 0, 0, 0.8);

    --video-member-only-head-balloon-recurring-member-only-bg-color:#EC365D;
    --video-member-only-head-balloon-recurring-member-only-text-color:#fff;

    --video-member-only-head-balloon-recentry-paid-member-only-bg-color:#FFC300;
    --video-member-only-head-balloon-recentry-paid-member-only-text-color:rgba(0, 0, 0, 0.8);
    
    --video-member-only-head-balloon-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.30);
    --video-member-only-btn-wrap-signup_link:var(--text-color-with-background);

    /* video-browser-notice */
    --video-browser-notice-bg-color:transparent;
    --video-browser-notice-border:1px solid var(--warning-border-color);
    --video-browser-notice-text-color:inherit;

    /* popup-notice */
    --popup-notice-overlay-background:rgba(0, 0, 0, 0.5);
    --popup-notice-content-background-color:#fff;
    --popup-notice-content-shadow:  0 10px 25px rgba(0,0,0,0.2);
    --popup-notice-close-background-color:#333;
    --popup-notice-close-hover-background-color:#333333b0;
    --popup-notice-close-content-shadow:  0 0 6px rgba(0,0,0,0.2);
    --popup-notice-icon-close-background-color:#fff;
    --popup-notice-title-border:1px solid #eee;
    --popup-notice-body-text-color:#333;
    --popup-notice-footer-background-color:#f7f7f7;;
    --popup-notice-footer-border:1px solid #e9e9e9;
    --popup-notice-label-text-color:#666;
    
    /* header-description */
    --header-description-bg: #fff9e7;
    --header-discription-border-top: 1px solid #f3eddb;
    --header-discription-border-bottom: 1px solid #f3eddb;
    --header-discription-text: var(--text-color-default);
    --header-discription-text-size-pc: 1.2rem;
    --header-discription-text-size-sp: 1.1rem;

    /* cart */
    --cart-total-price-amount-text-color:var(--text-videolist-price);
    --cart-remove-btn-text-color: var(--link-color-colored);
    --cart-remove-btn-hover-text-color: var(--cart-remove-btn-text-color);
    --cart-noitem-text-color:var(--text-color-light);
    --cart-login-notice-text-color:hsla(0, 0%, 100%, 0.7);
    
    /* DRM download section  */
    --drm-download-link-color: #0074C0;

	/* passcode panel */
    --passcode-panel-bg: #F8FAFC;
    --passcode-panel-border: #DDE7EE;
    --passcode-panel-title: var(--text-color-default);
    --passcode-panel-text: var(--text-color-light);
    --passcode-panel-icon: var(--text-color-default);
    --passcode-panel-input-bg: var(--background-color-base);
    --passcode-panel-input-border: #CBD5E1;
    --passcode-panel-input-border-focus: var(--color-main);
    --passcode-panel-button-bg: var(--btn-color-cover);
    --passcode-panel-button-text: var(--btn-color-cover-text);
    --passcode-panel-button-border: 1px solid var(--color-main);
    --passcode-panel-focus: #94A3B8;
    --passcode-panel-error: var(--error-textonly-color);
    --passcode-panel-success: #16A34A;
    --passcode-panel-expired: #D97706;
    --passcode-panel-success-bg: #F0FDF4;
    --passcode-panel-error-bg: #FEF2F2;
    --passcode-panel-expired-bg: #FFF7ED;
    --passcode-panel-button-disabled-bg: var(--btn-color-disabled);

    /* passcode overlay (video gate) */
    --passcode-overlay-bg: rgba(0, 0, 0, 0.85);
    --passcode-overlay-input-bg: rgba(255, 255, 255, 0.15);
    --passcode-overlay-input-border: rgba(255, 255, 255, 0.4);
    --passcode-overlay-button-bg: var(--color-accent);
    --passcode-overlay-error-text: #FDB03B;

    /* guest (x_guest) */
    --guest-main-background: var(--background-color-light2);
    --guest-card-background: var(--background-color-base);
    --guest-card-shadow: 0 2px 16px rgba(var(--color-cover-rgb), 0.06);
    --guest-flow-label-color: var(--color-accent);
    --guest-heading-color: var(--text-color-default);
    --guest-text-color: var(--text-color-default);
    --guest-step-number-bg: var(--background-color-light2);
    --guest-step-number-color: var(--text-color-light);
    --guest-step-number-border: var(--border-color-light);
    --guest-step-active-bg: var(--color-accent);
    --guest-step-active-color: var(--text-color-with-background);
    --guest-step-label-color: var(--text-color-light);
    --guest-step-label-active-color: var(--color-accent);
    --guest-step-line-color: var(--border-color-light);
    --guest-info-bg: #FAFBFC;
    --guest-info-border: #E5EAF0;
    --guest-info-title-color: var(--text-color-default);
    --guest-required-bg: #FFE6EC;
    --guest-required-color: #E60035;
    --guest-cta-bg: var(--color-accent);
    --guest-cta-shadow: 0 12px 12px #EA161614;
    --guest-trust-check-color: var(--color-main);
    --guest-trust-border: #E5EAF0;
    --guest-trust-icon: var(--color-accent);

    /* monthly-discount */
    --monthly-discount-accent: var(--color-accent);
    --monthly-discount-btn-text: var(--text-color-with-background);
    --monthly-discount-btn-bg: var(--monthly-discount-accent);
    --monthly-discount-btn-shadow: 0 5px 12px color-mix(in srgb, var(--monthly-discount-accent) 30%, transparent);
    --monthly-discount-btn-shadow-hover: 0 5px 16px color-mix(in srgb, var(--monthly-discount-accent) 40%, transparent);
    --monthly-discount-text-pale: color-mix(in srgb, var(--text-color-default) 70%, var(--background-color-base));
    --monthly-discount-text-muted: color-mix(in srgb, var(--text-color-default) 60%, var(--background-color-base));
    --monthly-discount-text-light: color-mix(in srgb, var(--text-color-default) 50%, var(--background-color-base));
    --monthly-discount-text-lighter: color-mix(in srgb, var(--text-color-default) 50%, var(--background-color-base));
    --monthly-discount-border-howto: color-mix(in srgb, var(--text-color-default) 8%, var(--background-color-base));
    --monthly-discount-border-light: color-mix(in srgb, var(--text-color-default) 14%, var(--background-color-base));
    --monthly-discount-border-heading: color-mix(in srgb, var(--text-color-default) 15%, var(--background-color-base));
    --monthly-discount-border-select:var(--monthly-discount-border-heading);
    --monthly-discount-hero-bg: linear-gradient(93deg, #ffffff80 1.84%, #fff2ec80 76.78%, #ffede980 95.17%);
    --monthly-discount-badge-bg: linear-gradient(180deg, #FFE3D2 0%, #FDEFE5 100%);
    --monthly-discount-badge-text: #bd5b2c;
    --monthly-discount-card-bg: var(--background-color-base);
    --monthly-discount-item-border: color-mix(in srgb, var(--text-color-default) 15%, var(--background-color-base));
    --monthly-discount-arrow-color: color-mix(in srgb, var(--text-color-default) 25%, var(--background-color-base));
    --monthly-discount-saving-border: #ffc3d2;
    --monthly-discount-saving-text: var(--monthly-discount-accent);
    --monthly-discount-saving-bg: #fff5f7;

    /* monthly-member-benefit */
    --monthly-member-benefit-badge-bg: var(--monthly-discount-badge-bg);
    --monthly-member-benefit-badge-text: var(--monthly-discount-badge-text);
    --monthly-member-benefit-border: #EED9C8;
    --monthly-member-benefit-bg: #FFF9F4;
    --monthly-member-benefit-label-color: var(--monthly-discount-accent);
    --monthly-member-benefit-price-color: var(--monthly-discount-accent);
    --monthly-member-benefit-saving-border: var(--monthly-discount-accent);
    --monthly-member-benefit-saving-text: var(--monthly-discount-accent);
    --monthly-member-benefit-price-wrap-bg: var(--background-color-base);
    --monthly-member-benefit-note-text: var(--text-color-light2);
    --monthly-member-benefit-cta-border: var(--monthly-discount-accent);
    --monthly-member-benefit-cta-text: var(--monthly-discount-accent);
    --monthly-member-benefit-cta-bg: var(--background-color-base);
    --monthly-member-benefit-btn-shadow: 0 4px 6px color-mix(in srgb, var(--monthly-discount-accent) 13%, transparent);
    --monthly-member-benefit-btn-shadow-hover: 0 4px 12px color-mix(in srgb, var(--monthly-discount-accent) 20%, transparent);

    /* pay-callback-success */
    --pay-callback-success-card-border-color: var(--border-color-light);
    --pay-callback-success-card-bg: var(--guest-card-background);
    --pay-callback-success-card-shadow: var(--guest-card-shadow);
    --pay-callback-success-error-border-color: color-mix(in srgb, var(--error-color) 50%, var(--background-color-base));
    --pay-callback-success-error-bg: color-mix(in srgb, var(--error-color) 6%, var(--background-color-base));
    --pay-callback-success-error-color:var(--error-color);
    --pay-callback-success-notice-color: color-mix(in srgb, var(--text-color-default) 85%, var(--background-color-base));
    --pay-callback-success-code-bg: var(--input-color);
    --pay-callback-success-code-border: var(--input-border);
    --pay-callback-success-code-text-color: var(--input-text-color);
    --pay-callback-success-copy-btn-border: 1px solid var(--border-color-light);
    --pay-callback-success-copy-btn-bg: var(--background-color-base);
    --pay-callback-success-copy-btn-text-color: var(--text-color-default);
    --pay-callback-success-copy-btn-copied-border: 1px solid  var(--success-message-border-color);
    --pay-callback-success-copy-btn-copied-bg:  var(--success-message-background-color);
    --pay-callback-success-copy-btn-copied-text-color: var(--success-message-color);
}