@charset "UTF-8";
/* =========================================================
   collagen_peptide.css  (v1.5)
   コラーゲンペプチド カテゴリのカラーバリエーション定義
   ※ v1.4: theme-pink（プラスコラーゲン ピンク）
      グラデーション廃止 → 単色 #c58988 に変更
   ※ v1.5: theme-blue（プラスコラーゲン ブルー）
      グラデーション廃止 → 単色 #1c94af に変更
      （theme-green のみグラデーションを維持）
========================================================= */

/* ---------- Q&A 共通サブカラー（全テーマ共通・cyan系） ---------- */
body.theme-green,
body.theme-pink,
body.theme-blue{
  --qa-color-soft: #bfe3ee;
  --qa-color-bg:   #e8f6fb;
  --qa-color-dark: #1f7a94;
}


/* ---------- 紫（コラーゲンペプチド デフォルト） ---------- */
body.theme-green{
  --theme-color:        #a67cb5;
  --theme-color-light:  #c2a2ce;
  --theme-color-soft:   #dcc7e3;
  --theme-color-dark:   #6d4a7d;
  --theme-color-bg:     #faf3fb;
  --theme-color-stripe: #eddcf0;
  --theme-color-grad-start: #f2b6cc;   /* ← ピンク（グラデーション開始色） */
}

/* ---------- ピンク寄り（プラスコラーゲン ピンク） ---------- */
body.theme-pink{
  --theme-color:        #c58988;
  --theme-color-light:  #d6a8a7;
  --theme-color-soft:   #e6c8c7;
  --theme-color-dark:   #9c6a69;
  --theme-color-bg:     #fdf5f4;
  --theme-color-stripe: #f0dcdb;
}

/* ---------- 水色寄り（プラスコラーゲン ブルー・フィッシュ） ---------- */
body.theme-blue{
  --theme-color:        #1c94af;
  --theme-color-light:  #5cb3c8;
  --theme-color-soft:   #a8d8e2;
  --theme-color-dark:   #146d82;
  --theme-color-bg:     #f0f9fb;
  --theme-color-stripe: #d3ecf1;
}

/* =========================================================
   コラーゲンページ：タグ / POINTバッジ  v1.5
   ─ theme-green のみ従来通りグラデーション維持
     （#e58bbd → #6dbdfd の斜めグラデ）
   ─ theme-pink（プラスコラーゲン ピンク） ：単色 #c58988
   ─ theme-blue（プラスコラーゲン ブルー）：単色 #1c94af
========================================================= */

/* ---- 特長タグ（枠タグ）：theme-green はグラデ塗り ---- */
body.theme-green .page .product-tags li{
  padding: .32em .9em;
  border: 1px solid transparent;
  color: #fff;
  background: transparent;
  background-image: linear-gradient(135deg, #e58bbd 0%, #6dbdfd 100%);
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 1px 1px rgba(0,0,0,.10);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ---- 業態タグ（塗りタグ）：theme-green はグラデ塗り ---- */
body.theme-green .page .product-tags--green li{
  background: transparent;
  background-image: linear-gradient(135deg, #e58bbd 0%, #6dbdfd 100%);
  border-color: transparent;
  color: #fff;
}

/* ---- POINTバッジ（POINT1〜）：theme-green はグラデ塗り ---- */
body.theme-green .page .point__no{
  padding: 0 18px;
  background: transparent;
  background-image: linear-gradient(135deg, #e58bbd 0%, #6dbdfd 100%);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
  box-shadow: 0 2px 4px rgba(0,0,0,.14);
}


/* =========================================================
   theme-pink（プラスコラーゲン ピンク）専用：単色 #c58988
   ─ グラデーションは使用しない
   ─ 特長タグ（上段）：背景白 / 文字・枠は #c58988
   ─ 業態タグ（下段）：背景 #c58988 / 文字白抜き
   ─ POINTバッジ：背景 #c58988 / 文字白抜き
========================================================= */

/* ---- 特長タグ（枠タグ）：背景白・ピンク文字/枠 ---- */
body.theme-pink .page .product-tags li{
  padding: .32em .9em;
  border: 1px solid #c58988;
  color: #c58988;
  background: #fff;
  background-image: none;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---- 業態タグ（塗りタグ）：背景ピンク・白文字 ---- */
body.theme-pink .page .product-tags--green li{
  background: #c58988;
  background-image: none;
  border-color: #c58988;
  color: #fff;
}

/* ---- POINTバッジ（POINT1〜）：背景ピンク・白文字 ---- */
body.theme-pink .page .point__no{
  padding: 0 18px;
  background: #c58988;
  background-image: none;
  color: #fff;
  font-weight: 700;
  text-shadow: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.10);
}


/* =========================================================
   theme-blue（プラスコラーゲン ブルー）専用：単色 #1c94af
   ─ グラデーションは使用しない
   ─ 特長タグ（上段）：背景白 / 文字・枠は #1c94af
   ─ 業態タグ（下段）：背景 #1c94af / 文字白抜き
   ─ POINTバッジ：背景 #1c94af / 文字白抜き
========================================================= */

/* ---- 特長タグ（枠タグ）：背景白・水色文字/枠 ---- */
body.theme-blue .page .product-tags li{
  padding: .32em .9em;
  border: 1px solid #1c94af;
  color: #1c94af;
  background: #fff;
  background-image: none;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---- 業態タグ（塗りタグ）：背景水色・白文字 ---- */
body.theme-blue .page .product-tags--green li{
  background: #1c94af;
  background-image: none;
  border-color: #1c94af;
  color: #fff;
}

/* ---- POINTバッジ（POINT1〜）：背景水色・白文字 ---- */
body.theme-blue .page .point__no{
  padding: 0 18px;
  background: #1c94af;
  background-image: none;
  color: #fff;
  font-weight: 700;
  text-shadow: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.10);
}