@charset "UTF-8";
/* ============================================================
   そのままたべられるバーリーマックス®フレーク 商品ページ用CSS
   こだわり商品研究所 / Future Shop
   ベースカラー: 麦茶色 #6b4423 × オフホワイト #fdf8f0 × オレンジ #d96a1f
   方針: グラデーションなし・ベタ塗り基調（食品向け）
============================================================ */

.kdw-bmflake {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 14px;
  color: #3d2817;
  line-height: 1.9;
  font-size: 16px;
  box-sizing: border-box;
  background: transparent;
}

.kdw-bmflake *,
.kdw-bmflake *::before,
.kdw-bmflake *::after {
  box-sizing: border-box;
}

.kdw-bmflake img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- ヘッドキャッチ ---------- */
.kdw-bmflake__headcatch {
  margin: 0 0 18px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(107, 68, 35, 0.12);
}
.kdw-bmflake__headcatch img {
  width: 100%;
  border-radius: 12px;
}

/* ---------- メインタイトル ---------- */
.kdw-bmflake__title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: #6b4423;
  margin: 22px 0 18px;
  padding: 0 8px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ---------- リード文ボックス ---------- */
.kdw-bmflake__lead {
  background: #fdf8f0;
  border: 2px solid #e8d4b8;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 26px;
  color: #3d2817;
  font-size: 15.5px;
  line-height: 1.85;
}
.kdw-bmflake__lead p {
  margin: 0;
}
.kdw-bmflake__lead .accent {
  color: #d96a1f;
  font-weight: 700;
}

/* ---------- 目次カード ---------- */
.kdw-bmflake__toc {
  background: #ffffff;
  border: 2px solid #6b4423;
  border-radius: 14px;
  padding: 20px 18px;
  margin: 0 0 32px;
  box-shadow: 0 2px 6px rgba(107, 68, 35, 0.08);
}
.kdw-bmflake__toc-title {
  font-size: 18px;
  font-weight: 700;
  color: #6b4423;
  text-align: center;
  margin: 0 0 10px;
  letter-spacing: 0.04em;
}
.kdw-bmflake__toc-note {
  font-size: 13px;
  color: #7a5c3d;
  text-align: center;
  margin: 0 0 14px;
  padding: 8px 10px;
  background: #fdf8f0;
  border-radius: 8px;
  line-height: 1.7;
}
.kdw-bmflake__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kdw-bmflake__toc-list li {
  border-bottom: 1px dashed #d4b896;
  padding: 0;
}
.kdw-bmflake__toc-list li:last-child {
  border-bottom: none;
}
.kdw-bmflake__toc-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  text-decoration: none;
  color: #3d2817;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s;
}
.kdw-bmflake__toc-list a:hover {
  background: #fdf8f0;
}
.kdw-bmflake__toc-num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: #6b4423;
  color: #ffffff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* ---------- セクションカード ---------- */
.kdw-bmflake__section {
  background: #ffffff;
  border: 1px solid #e8d4b8;
  border-radius: 14px;
  padding: 24px 20px;
  margin: 0 0 28px;
  box-shadow: 0 2px 6px rgba(107, 68, 35, 0.06);
}

/* ---------- h2見出し（ベタ塗りバー型） ---------- */
.kdw-bmflake__h2 {
  background: #6b4423;
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 0 0 20px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ---------- h3見出し（左ボーダー型） ---------- */
.kdw-bmflake__h3 {
  position: relative;
  background: #fdf8f0;
  border-left: 6px solid #d96a1f;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px 12px 16px;
  font-size: 18px;
  font-weight: 700;
  color: #6b4423;
  margin: 0 0 18px;
  line-height: 1.5;
}

/* ---------- 本文 ---------- */
.kdw-bmflake__text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.95;
  color: #3d2817;
}
.kdw-bmflake__text:last-child {
  margin-bottom: 0;
}

/* ---------- 黄色マーカー ---------- */
.kdw-bmflake__marker {
  background: #fff3a8;
  padding: 0 2px;
  font-weight: 600;
}

/* ---------- 強調オレンジ文字 ---------- */
.kdw-bmflake__strong-orange {
  color: #d96a1f;
  font-weight: 700;
}

/* ---------- 強調コピーボックス（ストライプ型：薄背景＋上下太ボーダー） ---------- */
/* 見出し（h2）のベタ塗り白抜きと競合しないよう、本文内の強調はこのスタイルで統一 */
.kdw-bmflake__copybox {
  background: #fdf8f0;
  color: #d96a1f;
  text-align: center;
  padding: 16px 18px;
  margin: 18px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  border-top: 3px solid #d96a1f;
  border-bottom: 3px solid #d96a1f;
  border-radius: 0;
}
.kdw-bmflake__copybox--brown {
  color: #6b4423;
  border-top-color: #6b4423;
  border-bottom-color: #6b4423;
}

/* ---------- 番号バッジ付き箇条書き ---------- */
.kdw-bmflake__numlist {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.kdw-bmflake__numlist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fdf8f0;
  border: 1px solid #e8d4b8;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.7;
}
.kdw-bmflake__numlist li:last-child {
  margin-bottom: 0;
}
.kdw-bmflake__numlist-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background: #d96a1f;
  color: #ffffff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.kdw-bmflake__numlist-body {
  flex: 1;
}
.kdw-bmflake__numlist-key {
  color: #d96a1f;
  font-weight: 700;
}

/* ---------- 画像枠（カード内：補助画像・図解用） ---------- */
.kdw-bmflake__figure {
  margin: 18px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(107, 68, 35, 0.10);
}
.kdw-bmflake__figure img {
  width: 100%;
  border-radius: 10px;
}

/* ---------- 独立配置画像（カード外：キービジュアル・章の区切り用） ---------- */
/* 枠・背景・影なしで、コンテンツ幅いっぱいに伸ばす。セクション間に呼吸とリズムを生む */
.kdw-bmflake__hero {
  margin: 28px 0;
}
.kdw-bmflake__hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- 商品紹介リンクボックス ---------- */
.kdw-bmflake__linkbox {
  background: #fdf8f0;
  border: 2px solid #d4b896;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0;
  text-align: center;
}
.kdw-bmflake__linkbox-label {
  display: inline-block;
  background: #6b4423;
  color: #ffffff;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}
.kdw-bmflake__linkbox a {
  display: inline-block;
  color: #d96a1f;
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  margin: 4px 0 0;
}

/* ---------- 数値強調ボックス ---------- */
.kdw-bmflake__numbox {
  background: #fdf8f0;
  border: 2px solid #d96a1f;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
  text-align: center;
  font-size: 15.5px;
  color: #3d2817;
  line-height: 1.85;
}
.kdw-bmflake__numbox-big {
  color: #d96a1f;
  font-size: 22px;
  font-weight: 700;
  display: inline-block;
  margin: 0 2px;
}

/* ---------- 目次に戻るボタン ---------- */
.kdw-bmflake__back {
  text-align: center;
  margin: 22px 0 0;
}
.kdw-bmflake__back a {
  display: inline-block;
  background: #ffffff;
  border: 1px solid #6b4423;
  color: #6b4423;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 999px;
  transition: background 0.2s;
}
.kdw-bmflake__back a:hover {
  background: #fdf8f0;
}

/* ---------- アンカー位置調整 ---------- */
.kdw-bmflake__anchor {
  display: block;
  position: relative;
  top: -10px;
  visibility: hidden;
}

/* ---------- セクション内サブブロック ---------- */
.kdw-bmflake__subnote {
  font-size: 14px;
  color: #7a5c3d;
  background: #fdf8f0;
  border-left: 3px solid #d4b896;
  padding: 10px 14px;
  margin: 14px 0;
  line-height: 1.7;
  border-radius: 0 6px 6px 0;
}