@charset "UTF-8";

/* ==========================================================================
 * 商品詳細ページ｜商品価格部分 デザイン調整
 * --------------------------------------------------------------------------
 * 対象   : futureshop 商品詳細ページ（body に .fs-body-product が付与される）
 * 確認元 : https://www.ito-noen.com/c/Honey-citrus-drink/hd-8g
 *
 * 前提   : システムのHTML出力は変更できないため、CSSのみで調整する。
 *          そのため
 *            ・要素の追加／並び替えは行わない
 *            ・display を !important で上書きしない
 *              （バリエーション価格の出し分けは futureshop の JS が
 *                style="display:none" をインラインで付け外しして行うため、
 *                !important を付けると価格が二重表示になる）
 *
 * 上書き対象の既存ルール（調査済み）
 *   fs_theme.css
 *     .fs-c-productPrice__addon::before / ::after           → "(" ")" を付与
 *     .fs-c-productPrices--productDetail ... __main__price  → font-size:2.2rem
 *   fs_itou.css
 *     .fs-c-productPrice                                    → padding:0 0 0 28px
 *     .fs-c-productPrice__main .fs-c-price__value           → font-size:40px / margin:10px 0
 *     .fs-c-price__currencyMark                             → font-size:10px（¥が浮いて見える原因）
 *     .fs-c-productPrice__main__label / __addon             → font-size:1.6rem
 *     .fs-c-productPrice ... __main__price                  → font-size:18px !important
 *     .fs-c-productPointDisplay                             → width:100% / font-size:1.6rem !important
 *   fs_original.css
 *     .fs-c-productPointDisplay__quantity                   → font-size:25px
 *
 *   読み込み順に依存しないよう、詳細度を上げて解決している。
 *   相手が !important の宣言に対してのみ、こちらも !important を使用。
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 0. 調整用パラメータ
 *    ここの数値・色だけ触れば全体のバランスを変更できる。
 * ------------------------------------------------------------------------ */
.fs-body-product {
  /* 色 */
  --pp-price-color: #bf0000;   /* 販売価格の色（テーマの subcolor1） */
  --pp-text:        #251e1c;   /* 基本文字色 */
  --pp-muted:       #7d7573;   /* 「価格」「税込」などの補助文字 */
  --pp-line:        #e8e2dd;   /* 区切り線・枠線 */
  --pp-chip-bg:     #f5f2ef;   /* 「価格」ラベルの背景 */
  --pp-accent-bg:   #fff6ed;   /* ポイント表示の背景 */
  --pp-accent-line: #f5d5b6;   /* ポイント表示の枠線 */
  --pp-accent-text: #c0561a;   /* ポイント表示の文字色 */

  /* サイズ */
  --pp-price-size:  40px;      /* 販売価格の数字サイズ */
  --pp-yen-ratio:   .52;       /* ¥ のサイズ（価格サイズに対する比率） */
  --pp-sub-size:    12px;      /* 「価格」「税込」のサイズ */
  --pp-joint-size:  22px;      /* 価格帯の「〜」のサイズ */
  --pp-listed-size: 16px;      /* 定価（取り消し線）のサイズ */

  /* 価格の数字用フォント（明朝／サイト指定） */
  --pp-num-font: YuMincho, "游明朝", "ＭＳ Ｐ明朝", "細明朝体",
                 "ヒラギノ明朝 Pro W3", "HiraMinProN-W3", sans-serif;

  /* 「価格」「税込」ラベル用フォント（数字と揃えて明朝） */
  --pp-sub-font: YuMincho, "游明朝", "ＭＳ Ｐ明朝", "細明朝体",
                 "ヒラギノ明朝 Pro W3", "HiraMinProN-W3", sans-serif;

  /* ポイント表示用フォント。小サイズで明朝はつぶれるためゴシックのままにしている。
     明朝で揃えたい場合は var(--pp-sub-font) に変更する。 */
  --pp-point-font: "Hiragino Kaku Gothic ProN", "Noto Sans JP",
                   "Yu Gothic", Meiryo, sans-serif;

  /* 価格ブロック上の区切り線。不要なら 0 にする */
  --pp-block-border: 1px;
}


/* --------------------------------------------------------------------------
 * 1. 価格ブロック全体
 *    項目選択肢（プルダウン）とポイント表示の間で、価格を独立した
 *    ひとかたまりとして見せる。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productPrices--productDetail {
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: var(--pp-block-border) solid var(--pp-line);
  color: var(--pp-text);
  line-height: 1.2;
}

/* 価格1行分のレイアウト。
   fs_itou.css の padding-left:28px（商品名より右にずれる原因）を解除し、
   商品名・商品説明と左端を揃える。 */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  margin: 0;
  padding: 0;
  line-height: 1.15;
}

/* 価格帯表示（¥2,340〜）／単一価格表示、どちらの塊にも同じ組み方を適用。
   display は指定しない（システムJSのインラインstyleを尊重するため）。 */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main {
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
}


/* --------------------------------------------------------------------------
 * 2. 「価格」ラベル
 *    大きな数字に対して主張しすぎないよう、小さなラベルチップにする。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main__label {
  flex: 0 0 auto;
  align-self: center;          /* 数字のベースラインではなく上下中央に置く */
  margin: 0;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--pp-chip-bg);
  color: var(--pp-muted);
  font-family: var(--pp-sub-font);
  font-size: var(--pp-sub-size);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
 * 3. 販売価格本体
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main__price {
  display: inline-flex;
  align-items: baseline;       /* ¥ と数字のベースラインを揃える */
  flex: 0 0 auto;
  margin: 0;
  color: var(--pp-price-color);
  font-family: var(--pp-num-font);
  /* fs_itou.css の font-size:18px !important を打ち消すため !important が必要 */
  font-size: var(--pp-price-size) !important;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;          /* 明朝は字面が詰まって見えるため気持ち広げる */
  font-variant-numeric: tabular-nums;      /* 桁が変わっても幅がぶれない */
  font-feature-settings: "tnum" 1;
}

/* 通貨記号「¥」
   既存は 10px 固定で、40px の数字に対して極端に小さく上にずれて見えていた。
   価格サイズに連動させ、ベースラインで揃える。 */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-price__currencyMark {
  flex: 0 0 auto;
  margin-right: .1em;
  font-size: calc(var(--pp-price-size) * var(--pp-yen-ratio));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* 金額の数字。fs_itou.css の margin:10px 0（上下が間延びする原因）を解除。 */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-price__value {
  margin: 0;
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
}


/* --------------------------------------------------------------------------
 * 4. 「税込」表記
 *    テーマ側で丸括弧 ( ) が擬似要素として付くのを解除し、
 *    小さなバッジに置き換える。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__addon,
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main__addon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  padding: 2px 7px;
  border: 1px solid var(--pp-line);
  border-radius: 2px;
  background: #fff;
  color: var(--pp-muted);
  font-family: var(--pp-sub-font);
  font-size: var(--pp-sub-size);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.4;
  white-space: nowrap;
}

.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__addon::before,
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__addon::after,
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main__addon::before,
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main__addon::after {
  content: none;
}

.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__addon__label,
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main__addon__label {
  font-size: inherit;
  line-height: inherit;
}


/* --------------------------------------------------------------------------
 * 5. 価格帯表示の「〜」
 *    バリエーションで価格が異なる商品（この商品ページも該当）で出力される。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main__joint {
  align-self: center;
  margin: 0 0 0 -2px;          /* 「税込」バッジと近づけて 1 つのまとまりに見せる */
  color: var(--pp-muted);
  font-family: var(--pp-sub-font);
  font-size: var(--pp-joint-size);
  font-weight: 400;
  line-height: 1;
}


/* --------------------------------------------------------------------------
 * 6. 定価・会員価格（セール設定時に出力される）
 *    販売価格より前面に出ないよう、小さく・淡く・取り消し線で表示する。
 *    ※現在このページでは出力されていないが、セール適用時に備えて用意。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice--listed {
  margin-bottom: 4px;
}

.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice--listed .fs-c-productPrice__main__label {
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--pp-line);
  font-size: 11px;
}

.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice--listed .fs-c-productPrice__main__price {
  color: var(--pp-muted);
  font-size: var(--pp-listed-size) !important;
  font-weight: 400;
  text-decoration: line-through;
}

.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice--listed .fs-c-price__currencyMark {
  font-size: calc(var(--pp-listed-size) * .8);
  font-weight: 400;
}

.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice--listed .fs-c-productPrice__addon,
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice--listed .fs-c-productPrice__main__addon {
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
}


/* --------------------------------------------------------------------------
 * 7. ポイント表示（価格のすぐ下）
 *    ── ここから下は「価格まわり」の付随要素です。
 *       不要であればセクションごと削除しても他に影響しません。
 *
 *    既存は画面幅いっぱいのグレー帯だったため、価格ブロックの補足として
 *    自然に見えるインラインのバッジに変更する。
 *    display は指定しない（バリエーション出し分けのインラインstyleを尊重）。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-l-productLayout .fs-c-productPointDisplay {
  /* display は table（ブロックレベル）にする。理由は2つ。
       1. 直後の在庫表示「残りわずかです。」の帯と行を共有させない
       2. margin:auto による中央寄せを効かせる（セクション9）
     ※ !important は付けない。インラインの display:none による
        バリエーション出し分けは従来どおり優先される。 */
  display: table;
  width: auto;
  max-width: 100%;
  /* 下余白は在庫表示（黄色帯）との密着を防ぐために必須 */
  margin: 10px 0 14px;
  padding: 5px 14px;
  border: 1px solid var(--pp-accent-line);
  border-radius: 999px;
  background: var(--pp-accent-bg);
  color: var(--pp-accent-text);
  font-family: var(--pp-point-font);
  /* fs_itou.css の font-size:1.6rem !important を打ち消すため !important が必要 */
  font-size: 13px !important;
  line-height: 1.45;
  letter-spacing: .02em;
  text-align: left;
}

.fs-body-product .fs-l-productLayout .fs-c-productPointDisplay__quantity {
  font-family: var(--pp-point-font);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
 * 8. バリエーション選択パネル内の価格
 *    ── こちらも付随要素。不要ならセクションごと削除可。
 *    詳細価格（40px）とパネル内価格（26px）が競合して見えるため、
 *    パネル側を一段落として主従関係をはっきりさせる。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-variationPanelList__panel__price .fs-c-productVariationPrice__price {
  display: inline-flex;
  align-items: baseline;
  color: var(--pp-price-color);
  font-family: var(--pp-num-font);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fs-body-product .fs-c-variationPanelList__panel__price .fs-c-price__currencyMark {
  margin-right: .1em;
  font-size: 12px;
  font-weight: 700;
}

.fs-body-product .fs-c-variationPanelList__panel__price .fs-c-price__value {
  font-size: 20px;
  line-height: 1.1;
}

.fs-body-product .fs-c-variationPanelList__panel__price .fs-c-productVariationPrice__addon {
  margin-left: 4px;
  color: var(--pp-muted);
  font-family: var(--pp-sub-font);
  font-size: 11px;
  font-weight: 400;
}


/* --------------------------------------------------------------------------
 * 9. 価格ブロックの中央寄せ
 *    価格・「税込」・ポイント表示を、右カラム（コンテンツ幅）の中央に揃える。
 *    左寄せに戻したい場合は、このセクションごと削除すればよい。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice,
.fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main {
  justify-content: center;
}

/* ポイント表示（セクション7で display:table にしてあるので auto が効く） */
.fs-body-product .fs-l-productLayout .fs-c-productPointDisplay {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* --------------------------------------------------------------------------
 * 10. レスポンシブ
 *    既存サイトのブレイクポイント（1199px / 767px）に合わせる。
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 1199px) {
  .fs-body-product {
    --pp-price-size: 34px;
    --pp-joint-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .fs-body-product {
    --pp-price-size: 30px;
    --pp-sub-size:   11px;
    --pp-joint-size: 18px;
  }

  .fs-body-product .fs-c-productPrices--productDetail {
    margin: 14px 0 8px;
    padding-top: 12px;
  }

  .fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice {
    column-gap: 6px;
  }

  .fs-body-product .fs-c-productPrices--productDetail .fs-c-productPrice__main__label {
    padding: 2px 6px;
  }

  .fs-body-product .fs-l-productLayout .fs-c-productPointDisplay {
    margin-bottom: 12px;
    padding: 5px 10px;
    font-size: 12px !important;
  }

  .fs-body-product .fs-l-productLayout .fs-c-productPointDisplay__quantity {
    font-size: 15px;
  }

  .fs-body-product .fs-c-variationPanelList__panel__price .fs-c-price__value {
    font-size: 18px;
  }
}

/* 極小幅では価格が1行に収まらないケースがあるため、さらに一段小さくする。 */
@media screen and (max-width: 400px) {
  .fs-body-product {
    --pp-price-size: 27px;
  }
}