:root {
    /* === 基本フォント設定 === */
    /* アプリケーション全体のデフォルトフォントファミリー */
    --font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    /* アプリケーション全体のデフォルトフォントサイズ */
    --font-size-base: 14px;
    /* アプリケーション全体のデフォルト行の高さ */
    --line-height-base: 1.6;
    /* アプリケーション全体のデフォルトテキスト色 */
    --text-color-base: #333;
    /* メインカラー（例: 楽天の赤） */
    --text-color-primary: #BF0000;
    /* セカンダリテキスト色（例: フッターやバージョン情報など、控えめな色） */
    --text-color-secondary: #555;
    /* サブタイトルや詳細情報など、やや控えめなテキスト色 */
    --text-color-subtle: #555;



    /* === 見出し === */
    /* H1見出しのフォントサイズ */
    --h1-font-size: 2em;
    /* H1見出しのフォントウェイト */
    --h1-font-weight: bold;
    /* H1見出しのテキスト色 */
    --h1-color: var(--text-color-primary);
    
    /* H2見出し（セクションタイトル）のフォントサイズ */
    --h2-font-size: 1.5em;
    /* H2見出し（セクションタイトル）のフォントウェイト */
    --h2-font-weight: bold;
    /* H2見出し（セクションタイトル）のテキスト色 */
    --h2-color: var(--text-color-base);

    /* H3見出しのフォントサイズ */
    --h3-font-size: 1.2em;
    /* H3見出しのフォントウェイト */
    --h3-font-weight: bold;
    /* H3見出しのテキスト色 */
    --h3-color: var(--text-color-primary);

    /* === ラベル === */
    /* フォームのラベル（例: 「ショップ名」「商品名」）のフォントサイズ */
    --label-font-size: 14px;
    /* フォームのラベルのフォントウェイト */
    --label-font-weight: bold;
    /* フォームのラベルのテキスト色 */
    --label-color: var(--text-color-base);

    /* === 入力フィールド === */
    /* テキスト入力、セレクトボックス、テキストエリアのフォントサイズ */
    --input-font-size: 14px;
    /* テキスト入力、セレクトボックス、テキストエリアのテキスト色 */
    --input-color: var(--text-color-base);

    /* === ボタン === */
    /* ボタンのフォントサイズ */
    --btn-font-size: 16px;
    /* ボタンのフォントウェイト */
    --btn-font-weight: bold;
    /* ボタンのテキスト色 */
    --btn-color: #fff;

    /*
    ==========================================================================
       テーブルのフォント設定 (Table Font Settings)
    ==========================================================================
    このセクションでは、アプリケーション内の主要なテーブル（詳細テーブル、サマリーテーブルなど）
    のヘッダー（th）とセル（td）のフォントスタイルを集中管理します。
    以下の変数の値を変更することで、テーブルの見た目を一括で調整できます。
    ==========================================================================
    */

    /* === テーブルヘッダー (th) === */
    /* ヘッダーのフォントサイズ */
    --table-header-font-size: 1em;
    /* ヘッダーのフォントの太さ (例: normal, bold, 700) */
    --table-header-font-weight: bold;
    /* ヘッダーのテキスト色 */
    --table-header-color: var(--text-color-base);
    
    /* === テーブルセル (td) === */
    /* セルのフォントサイズ */
    --table-cell-font-size: 1em;
    /* セルのフォントの太さ */
    --table-cell-font-weight: normal;
    /* セルのテキスト色 */
    --table-cell-color: var(--text-color-base);

    /* === ポップオーバー === */
    /* 情報ポップオーバーのフォントサイズ */
    --popover-font-size: 0.9em;
    /* 情報ポップオーバーの行の高さ */
    --popover-line-height: 1.4;
    /* 情報ポップオーバーのフォントウェイト */
    --popover-font-weight: normal;
    /* 情報ポップオーバーのテキスト色 */
    --popover-color: var(--text-color-base);

    /* === UI要素 === */
    /* バージョン情報テキストのフォントサイズ */
    --version-info-font-size: 0.8em;
    /* バージョン情報テキストの色 */
    --version-info-color: var(--text-color-secondary);
    /* フッターテキストのフォントサイズ */
    --footer-font-size: 0.9em;
    /* フッターテキストの色 */
    --footer-color: var(--text-color-secondary);
    /* チェックボックスグループ内のテキスト（例: SPU項目名）のフォントサイズ */
    --checkbox-label-font-size: 13px;
    /* 商品詳細行のラベル（例: SPU適用、キャンペーン）のフォントサイズ */
    --product-details-label-font-size: 13px;
    /* 商品詳細行のラベルのフォントウェイト */
    --product-details-label-font-weight: bold;
    /* 商品詳細行のラベルのテキスト色 */
    --product-details-label-color: var(--text-color-subtle);
    /* fieldsetのlegend要素のフォントサイズ */
    --fieldset-legend-font-size: 13px;
    /* fieldsetのlegend要素のフォントウェイト */
    --fieldset-legend-font-weight: bold;
    /* fieldsetのlegend要素のテキスト色 */
    --fieldset-legend-color: var(--text-color-base);
    /* legend要素内のspan（例: ワンダフルデーの日付情報）のフォントサイズ */
    --legend-span-font-size: 11px;
    /* legend要素内のspanのフォントウェイト */
    --legend-span-font-weight: normal;

    /* === 特殊なテキスト === */
    /* ポイント上限到達警告などの警告テキストの色 */
    --warning-text-color: red;
    /* 警告テキストのフォントウェイト */
    --warning-text-weight: bold;
    /* ワンダフルデー警告など、やや控えめな警告テキストの色 */
    --sub-warning-text-color: orange;
    /* 控えめな警告テキストのフォントウェイト */
    --sub-warning-text-weight: bold;
    /* 比較損益などでプラスの場合のテキスト色 */
    --positive-text-color: green;
    /* プラスの場合のテキストのフォントウェイト */
    --positive-text-weight: bold;
    /* 比較損益などでマイナスの場合のテキスト色 */
    --negative-text-color: red;
    /* マイナスの場合のテキストのフォントウェイト */
    --negative-text-weight: bold;
    /* 比較損益などでゼロの場合のテキスト色 */
    --zero-text-color: black;
    /* ゼロの場合のテキストのフォントウェイト */
    --zero-text-weight: normal;
}

/* --- スタイル適用 --- */

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color-base);
}

h1 {
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    color: var(--h1-color);
}

h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    color: var(--h2-color);
}

h3 {
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    color: var(--h3-color);
}

label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
}

input, select, textarea {
    font-size: var(--input-font-size);
    color: var(--input-color);
}

.btn {
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    color: var(--btn-color);
}

.details-table th, .summary-table th {
    font-size: var(--table-header-font-size);
    font-weight: var(--table-header-font-weight);
    color: var(--table-header-color);
}

.details-table td, .summary-table td {
    font-size: var(--table-cell-font-size);
    font-weight: var(--table-cell-font-weight);
    color: var(--table-cell-color);
}

.info-popover {
    font-size: var(--popover-font-size);
    line-height: var(--popover-line-height);
    font-weight: var(--popover-font-weight);
    color: var(--popover-color);
}

.version-info {
    font-size: var(--version-info-font-size);
    color: var(--version-info-color);
}

footer {
    font-size: var(--footer-font-size);
    color: var(--footer-color);
}

.checkbox-group span {
    font-size: var(--checkbox-label-font-size);
}

.product-details-row > label {
    font-size: var(--product-details-label-font-size);
    font-weight: var(--product-details-label-font-weight);
    color: var(--product-details-label-color);
}

legend {
    font-size: var(--fieldset-legend-font-size);
    font-weight: var(--fieldset-legend-font-weight);
    color: var(--fieldset-legend-color);
}

legend span {
    font-size: var(--legend-span-font-size);
    font-weight: var(--legend-span-font-weight);
}


/* ポイント上限到達警告 */
.point-limit-warning {
    color: var(--warning-text-color);
    font-weight: var(--warning-text-weight);
}

/* ワンダフルデー警告 */
.wonderful-day-warning {
    color: var(--sub-warning-text-color);
    font-weight: var(--sub-warning-text-weight);
}

/* 比較損益 */
.price-difference.positive {
    color: var(--positive-text-color);
    font-weight: var(--positive-text-weight);
}

.price-difference.negative {
    color: var(--negative-text-color);
    font-weight: var(--negative-text-weight);
}

/* 比較損益がゼロの場合 */
.price-difference.zero {
    color: var(--zero-text-color);
    font-weight: var(--zero-text-weight);
}

/* 総合損益がプラスの場合 */
#total-profit-loss-value.positive {
    color: var(--positive-text-color);
    font-weight: var(--positive-text-weight);
}

/* 総合損益がマイナスの場合 */
#total-profit-loss-value.negative {
    color: var(--negative-text-color);
    font-weight: var(--negative-text-weight);
}

/* 総合損益がゼロの場合 */
#total-profit-loss-value.zero {
    color: var(--zero-text-color);
    font-weight: var(--zero-text-weight);
}


    /*
    2 ==========================================================================
    3    カスタムCSSクラスの定義方法 (How to Define Custom CSS Classes)
    4 ==========================================================================
    5 特定のHTML要素（例: テーブルのセル<td>やヘッダー<th>）に個別のスタイルを適用したい場合、  
    6 ここに新しいCSSクラスを定義し、そのクラス名をHTML要素に適用することができます。
    7
    8 手順:
    9 1.  **新しいクラスを定義する:**
   10     以下のように、`.クラス名 { プロパティ: 値; }` の形式でクラスを記述します。
   11     既存のCSS変数（例: var(--text-color-base)）も利用できます。
   12
   13     例:
   14     .highlight-negative {
   15         color: red;
   16         font-weight: bold;
   17         background-color: #ffebeb;
   18     }
   19
   20     .total-value-cell {
   21         font-size: 1.1em;
   22         font-weight: bold;
   23         text-align: right;
   24         color: var(--positive-text-color);
   25     }
   26
   27 2.  **HTML要素にクラスを適用する:**
   28     スタイルを適用したいHTML要素に、`class="クラス名"` 属性を追加します。
   29
   30     例:
   31     <td class="highlight-negative">
   32         -100
   33     </td>
   34
   35     <td class="total-value-cell">
   36         12,345
   37     </td>
   38
   39 利点:
   40 *   スタイルとHTML構造が分離され、コードが整理されます。
   41 *   同じスタイルを複数の要素で再利用でき、保守が容易になります。
   42 ==========================================================================
   43 */

/*
==========================================================================
   サマリー項目の個別フォント設定 (Individual Font Settings for Summary Items)
==========================================================================
このセクションでは、サマリーテーブルの特定の項目に対して、個別のフォントスタイル
（フォントファミリー、太さ、サイズ、色）を定義します。
各項目の `--font-family`, `--font-weight`, `--font-size`, `--color` の値を
変更することで、見た目をカスタマイズできます。
==========================================================================
*/

:root {
    /* --- 価格(税込)合計 --- */
    --summary-total-price-label-font-family: var(--font-family-base);
    --summary-total-price-label-font-weight: bold;
    --summary-total-price-label-font-size: 1.1em;
    --summary-total-price-label-color: var(--text-color-base);
    --summary-total-price-value-font-family: var(--font-family-base);
    --summary-total-price-value-font-weight: bold;
    --summary-total-price-value-font-size: 1.3em;
    --summary-total-price-value-color: var(--text-color-base);

    /* --- クーポン割引合計 --- */
    --summary-coupon-discount-label-font-family: var(--font-family-base);
    --summary-coupon-discount-label-font-weight: bold;
    --summary-coupon-discount-label-font-size: 1.1em;
    --summary-coupon-discount-label-color: var(--text-color-base);
    --summary-coupon-discount-value-font-family: var(--font-family-base);
    --summary-coupon-discount-value-font-weight: bold;
    --summary-coupon-discount-value-font-size: 1.3em;
    --summary-coupon-discount-value-color: var(--text-color-base);

    /* --- 最終獲得ポイント合計 --- */
    --summary-final-points-label-font-family: var(--font-family-base);
    --summary-final-points-label-font-weight: bold;
    --summary-final-points-label-font-size: 1.1em;
    --summary-final-points-label-color: var(--text-color-base);
    --summary-final-points-value-font-family: var(--font-family-base);
    --summary-final-points-value-font-weight: bold;
    --summary-final-points-value-font-size: 1.3em;
    --summary-final-points-value-color: var(--text-color-base);

    /* --- 初利用ボーナスP合計 --- */
    --summary-first-time-bonus-label-font-family: var(--font-family-base);
    --summary-first-time-bonus-label-font-weight: bold;
    --summary-first-time-bonus-label-font-size: 1em;
    --summary-first-time-bonus-label-color: var(--text-color-subtle);
    --summary-first-time-bonus-value-font-family: var(--font-family-base);
    --summary-first-time-bonus-value-font-weight: normal;
    --summary-first-time-bonus-value-font-size: 1.1em;
    --summary-first-time-bonus-value-color: var(--text-color-subtle);

    /* --- SPU総合計 --- */
    --summary-spu-total-label-font-family: var(--font-family-base);
    --summary-spu-total-label-font-weight: bold;
    --summary-spu-total-label-font-size: 1em;
    --summary-spu-total-label-color: var(--text-color-subtle);
    --summary-spu-total-value-font-family: var(--font-family-base);
    --summary-spu-total-value-font-weight: normal;
    --summary-spu-total-value-font-size: 1.1em;
    --summary-spu-total-value-color: var(--text-color-subtle);

    /* --- キャンペーン総合計 --- */
    --summary-campaign-total-label-font-family: var(--font-family-base);
    --summary-campaign-total-label-font-weight: bold;
    --summary-campaign-total-label-font-size: 1em;
    --summary-campaign-total-label-color: var(--text-color-subtle);
    --summary-campaign-total-value-font-family: var(--font-family-base);
    --summary-campaign-total-value-font-weight: normal;
    --summary-campaign-total-value-font-size: 1.1em;
    --summary-campaign-total-value-color: var(--text-color-subtle);

    /* --- 買いまわりP合計 --- */
    --summary-kaimawari-total-label-font-family: var(--font-family-base);
    --summary-kaimawari-total-label-font-weight: normal;
    --summary-kaimawari-total-label-font-size: 1em;
    --summary-kaimawari-total-label-color: var(--text-color-base);
    --summary-kaimawari-total-value-font-family: var(--font-family-base);
    --summary-kaimawari-total-value-font-weight: normal;
    --summary-kaimawari-total-value-font-size: 1em;
    --summary-kaimawari-total-value-color: var(--text-color-base);

    /* --- ラクマ連携特典合計 --- */
    --summary-rakuma-bonus-label-font-family: var(--font-family-base);
    --summary-rakuma-bonus-label-font-weight: normal;
    --summary-rakuma-bonus-label-font-size: 1em;
    --summary-rakuma-bonus-label-color: var(--text-color-base);
    --summary-rakuma-bonus-value-font-family: var(--font-family-base);
    --summary-rakuma-bonus-value-font-weight: normal;
    --summary-rakuma-bonus-value-font-size: 1em;
    --summary-rakuma-bonus-value-color: var(--text-color-base);

    /* --- その他キャンペーン合計 --- */
    --summary-other-campaigns-label-font-family: var(--font-family-base);
    --summary-other-campaigns-label-font-weight: normal;
    --summary-other-campaigns-label-font-size: 1em;
    --summary-other-campaigns-label-color: var(--text-color-base);
    --summary-other-campaigns-value-font-family: var(--font-family-base);
    --summary-other-campaigns-value-font-weight: normal;
    --summary-other-campaigns-value-font-size: 1em;
    --summary-other-campaigns-value-color: var(--text-color-base);

    /* --- ポイントアップ合計 --- */
    --summary-point-up-total-label-font-family: var(--font-family-base);
    --summary-point-up-total-label-font-weight: bold;
    --summary-point-up-total-label-font-size: 1em;
    --summary-point-up-total-label-color: var(--text-color-subtle);
    --summary-point-up-total-value-font-family: var(--font-family-base);
    --summary-point-up-total-value-font-weight: bold;
    --summary-point-up-total-value-font-size: 1.1em;
    --summary-point-up-total-value-color: var(--text-color-subtle);

    /* --- 最終購入価格合計 --- */
    --summary-final-price-label-font-family: var(--font-family-base);
    --summary-final-price-label-font-weight: bold;
    --summary-final-price-label-font-size: 1.3em;
    --summary-final-price-label-color: var(--text-color-base);
    --summary-final-price-value-font-family: var(--font-family-base);
    --summary-final-price-value-font-weight: bold;
    --summary-final-price-value-font-size: 1.4em;
    --summary-final-price-value-color: var(--text-color-base);
}

/* --- 個別フォント設定の適用 --- */

#summary-total-price-label {
    font-family: var(--summary-total-price-label-font-family);
    font-weight: var(--summary-total-price-label-font-weight);
    font-size: var(--summary-total-price-label-font-size);
    color: var(--summary-total-price-label-color);
}
#summary-total-price-value {
    font-family: var(--summary-total-price-value-font-family);
    font-weight: var(--summary-total-price-value-font-weight);
    font-size: var(--summary-total-price-value-font-size);
    color: var(--summary-total-price-value-color);
}

#summary-coupon-discount-label {
    font-family: var(--summary-coupon-discount-label-font-family);
    font-weight: var(--summary-coupon-discount-label-font-weight);
    font-size: var(--summary-coupon-discount-label-font-size);
    color: var(--summary-coupon-discount-label-color);
}
#summary-coupon-discount-value {
    font-family: var(--summary-coupon-discount-value-font-family);
    font-weight: var(--summary-coupon-discount-value-font-weight);
    font-size: var(--summary-coupon-discount-value-font-size);
    color: var(--summary-coupon-discount-value-color);
}

#summary-final-points-label {
    font-family: var(--summary-final-points-label-font-family);
    font-weight: var(--summary-final-points-label-font-weight);
    font-size: var(--summary-final-points-label-font-size);
    color: var(--summary-final-points-label-color);
}
#summary-final-points-value {
    font-family: var(--summary-final-points-value-font-family);
    font-weight: var(--summary-final-points-value-font-weight);
    font-size: var(--summary-final-points-value-font-size);
    color: var(--summary-final-points-value-color);
}

#summary-first-time-bonus-label {
    font-family: var(--summary-first-time-bonus-label-font-family);
    font-weight: var(--summary-first-time-bonus-label-font-weight);
    font-size: var(--summary-first-time-bonus-label-font-size);
    color: var(--summary-first-time-bonus-label-color);
}
#summary-first-time-bonus-value {
    font-family: var(--summary-first-time-bonus-value-font-family);
    font-weight: var(--summary-first-time-bonus-value-font-weight);
    font-size: var(--summary-first-time-bonus-value-font-size);
    color: var(--summary-first-time-bonus-value-color);
}

#summary-spu-total-label {
    font-family: var(--summary-spu-total-label-font-family);
    font-weight: var(--summary-spu-total-label-font-weight);
    font-size: var(--summary-spu-total-label-font-size);
    color: var(--summary-spu-total-label-color);
}
#summary-spu-total-value {
    font-family: var(--summary-spu-total-value-font-family);
    font-weight: var(--summary-spu-total-value-font-weight);
    font-size: var(--summary-spu-total-value-font-size);
    color: var(--summary-spu-total-value-color);
}

#summary-campaign-total-label {
    font-family: var(--summary-campaign-total-label-font-family);
    font-weight: var(--summary-campaign-total-label-font-weight);
    font-size: var(--summary-campaign-total-label-font-size);
    color: var(--summary-campaign-total-label-color);
}
#summary-campaign-total-value {
    font-family: var(--summary-campaign-total-value-font-family);
    font-weight: var(--summary-campaign-total-value-font-weight);
    font-size: var(--summary-campaign-total-value-font-size);
    color: var(--summary-campaign-total-value-color);
}

#summary-kaimawari-total-label {
    font-family: var(--summary-kaimawari-total-label-font-family);
    font-weight: var(--summary-kaimawari-total-label-font-weight);
    font-size: var(--summary-kaimawari-total-label-font-size);
    color: var(--summary-kaimawari-total-label-color);
}
#summary-kaimawari-total-value {
    font-family: var(--summary-kaimawari-total-value-font-family);
    font-weight: var(--summary-kaimawari-total-value-font-weight);
    font-size: var(--summary-kaimawari-total-value-font-size);
    color: var(--summary-kaimawari-total-value-color);
}

#summary-rakuma-bonus-label {
    font-family: var(--summary-rakuma-bonus-label-font-family);
    font-weight: var(--summary-rakuma-bonus-label-font-weight);
    font-size: var(--summary-rakuma-bonus-label-font-size);
    color: var(--summary-rakuma-bonus-label-color);
}
#summary-rakuma-bonus-value {
    font-family: var(--summary-rakuma-bonus-value-font-family);
    font-weight: var(--summary-rakuma-bonus-value-font-weight);
    font-size: var(--summary-rakuma-bonus-value-font-size);
    color: var(--summary-rakuma-bonus-value-color);
}

#summary-other-campaigns-label {
    font-family: var(--summary-other-campaigns-label-font-family);
    font-weight: var(--summary-other-campaigns-label-font-weight);
    font-size: var(--summary-other-campaigns-label-font-size);
    color: var(--summary-other-campaigns-label-color);
}
#summary-other-campaigns-value {
    font-family: var(--summary-other-campaigns-value-font-family);
    font-weight: var(--summary-other-campaigns-value-font-weight);
    font-size: var(--summary-other-campaigns-value-font-size);
    color: var(--summary-other-campaigns-value-color);
}

#summary-point-up-total-label {
    font-family: var(--summary-point-up-total-label-font-family);
    font-weight: var(--summary-point-up-total-label-font-weight);
    font-size: var(--summary-point-up-total-label-font-size);
    color: var(--summary-point-up-total-label-color);
}
#summary-point-up-total-value {
    font-family: var(--summary-point-up-total-value-font-family);
    font-weight: var(--summary-point-up-total-value-font-weight);
    font-size: var(--summary-point-up-total-value-font-size);
    color: var(--summary-point-up-total-value-color);
}

#summary-final-price-label {
    font-family: var(--summary-final-price-label-font-family);
    font-weight: var(--summary-final-price-label-font-weight);
    font-size: var(--summary-final-price-label-font-size);
    color: var(--summary-final-price-label-color);
}
#summary-final-price-value {
    font-family: var(--summary-final-price-value-font-family);
    font-weight: var(--summary-final-price-value-font-weight);
    font-size: var(--summary-final-price-value-font-size);
    color: var(--summary-final-price-value-color);
}