@charset "UTF-8";
/* =========================================================
   gummys.css  (v1.0)
   グミ カテゴリのカラーバリエーション定義
========================================================= */


/* ---------- 明示的に琵琶湖ブルーを指定したい場合 ---------- */
body.theme-biwako{
  --theme-color:        #519dbc;
  --theme-color-light:  #7bb8d1;
  --theme-color-soft:   #a8d1e1;
  --theme-color-dark:   #2e6a85;
  --theme-color-bg:     #eef6fa;
  --theme-color-stripe: #cde3ee;
  --theme-color-grad-start: #a8dce8;
}

/* ============================================
   ▼ タグ背景（グラデーション + 白文字）
   ご当地グミ / 滋賀県 / サイダー味 / コラーゲン / 個別包装入り
============================================ */
.tag,
.tags .tag,
.tags li,
.tag-list .tag,
.tag-list li,
.product-tag,
.product-tags .tag,
.product-tags li,
.badge,
.label,
span.tag,
a.tag {
  background: linear-gradient(90deg, #45adad 0%, #47c2ea 100%) !important;
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
}

.tag a,
.tags .tag a,
.tag-list .tag a,
.product-tag a,
.product-tags .tag a {
  color: #fff !important;
  text-decoration: none !important;
}

/* ============================================
   ▼ POINT バッジ（.point__no）のみグラデーション化
   POINT1 / POINT2 / POINT3 / POINT4 全てに適用
============================================ */
.point__no {
  background: linear-gradient(90deg, #45adad 0%, #47c2ea 100%) !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ============================================
   ▼ trivia セクション：見出しを枠上部全体に
============================================ */

.trivia {
  border: 2px solid #47c2ea;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  margin: 24px 0;
  background: #fff;
}

/* 見出しを枠上部全体に */
.trivia > h2,
.trivia > .biwako-trivia__title {
  margin: 0;                        /* 上下の余白リセット */
  padding: 14px 20px;               /* 見出しの内側余白 */
  background: linear-gradient(90deg, #45adad 0%, #47c2ea 100%);
  color: #fff;
  font-size: 2.15rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;                 /* 中央寄せなら center に */
  letter-spacing: 0.02em;
}

/* 見出し以外のコンテンツに内側余白を確保 */
.trivia > *:not(h2):not(.biwako-trivia__title) {
  padding-left: 20px;
  padding-right: 20px;
}

/* 最後の要素に下部余白を確保 */
.trivia > *:last-child {
  padding-bottom: 20px;
}

/* 画像は幅いっぱいで表示（既存の見た目に応じて調整） */
.trivia img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
}

.trivia ul {
  margin: 12px 0 0;
  padding-left: 30px;         /* 左余白 30px */
  list-style: none;           /* デフォルトの「・」を消す */
}

.trivia ul li {
  position: relative;
  margin-bottom: 8px;
  line-height: 1.7;
  padding-left: 1.4em;        /* ◆ の分だけ本文をインデント */
}

.trivia ul li::before {
  content: "◆";                /* マーカーを ◆ に */
  position: absolute;
  left: 0;
  top: 0;
  color: #47c2ea;              /* ◆ の色（枠線と統一） */
  font-size: 0.9em;
  line-height: 1.7;
}
/* ============================================
   ▼ 琵琶湖に関する豆知識セクション内の画像を60%に
============================================ */
.trivia.biwako-trivia img {
  max-width: 60%;
  height: auto;
  display: block;
  margin: 16px auto;   /* 中央寄せ */
}
/* ============================================
   ▼ 飛び出し坊や発祥の地セクション内の画像を60%に
============================================ */
.trivia.tobita-trivia img,
.trivia.tobitakun-trivia img,
.trivia.higashiomi-trivia img,
.trivia.tobidashi-trivia img,
[class*="tobita"] img,
[class*="tobidashi"] img,
[class*="higashiomi"] img {
  max-width: 60%;
  height: auto;
  display: block;
  margin: 16px auto;
}