/*
 * kodawari-food.css
 * こだわり商品研究所 食ページ専用CSS
 *
 * 最終更新: 2026-05-21(v3)
 * 設置場所: https://www.kodawari-net.com/img/css/kodawari-food.css
 * 読み込み: 食ページの本文冒頭に <link> で記述
 *
 * 変更履歴:
 *   2026-05-21 v1 初版作成。食ページ用の色味、kd-food-index 目次部品を追加
 *   2026-05-21 v2 base.css の文字サイズ変数を使う形に書き直し
 *   2026-05-21 v3 v3.1 メニューデザインを kd-menu-* クラスで実装。
 *                  kd-food-index は削除(使わない)。v3.1 のテイスト
 *                  (ベージュ背景・赤太線・点線・温かみのある配色)を採用
 */


/* =========================================================
 * 1. kd-menu-wrap(目次全体のラッパー)
 * 目次ブロック全体にベージュ系の背景を適用するための外枠
 * これにより、サイト全体の背景には影響を与えない
 * ========================================================= */

.kd-menu-wrap {
  background: #f7f5f0;
  padding: 1.5rem 1rem;
  margin: 1.5rem 0;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
                "メイリオ", Meiryo, sans-serif;
  color: #333;
  line-height: 1.7;
}


/* =========================================================
 * 2. kd-menu-intro(冒頭の説明文)
 * 「2つの入口から、お探しの商品にたどりつけます。」など
 * ========================================================= */

.kd-menu-intro {
  text-align: center;
  font-size: 15px;
  color: #555;
  margin: 0 0 20px;
  line-height: 1.7;
}


/* =========================================================
 * 3. kd-menu-label(セクションラベル)
 * 「② 食材・商品カテゴリーから選ぶ」など、外側に配置するラベル
 * ========================================================= */

.kd-menu-label {
  text-align: center;
  font-size: 14px;
  color: #888;
  margin: 28px 0 12px;
}


/* =========================================================
 * 4. kd-menu-box(目次の各ブロック)
 * v3.1 デザイン: 白背景 + ベージュ系の細枠 + 角丸
 * ========================================================= */

.kd-menu-box {
  background: #ffffff;
  border: 1px solid #e0d8c8;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 14px;
}

.kd-menu-box p {
  margin: 6px 0;
}


/* =========================================================
 * 5. kd-menu-bar-strong(太い区切り線:赤の実線)
 * カテゴリー見出しの下に置く強い区切り
 * v3.1 デザイン: rgb(224, 62, 45) 2px solid
 * ========================================================= */

hr.kd-menu-bar-strong {
  border: none;
  border-top: 2px solid rgb(224, 62, 45);
  margin: 10px 0;
}


/* =========================================================
 * 6. kd-menu-bar-thin(細い区切り線:点線)
 * 項目間の弱い区切り
 * v3.1 デザイン: 1px dotted ベージュ系
 * ========================================================= */

hr.kd-menu-bar-thin {
  border: none;
  border-top: 1px dotted #d4cdbc;
  margin: 8px 0;
}


/* =========================================================
 * 7. kd-menu-icon(絵文字アイコンの調整)
 * カテゴリー見出しの左に配置する絵文字
 * ========================================================= */

.kd-menu-icon {
  display: inline-block;
  width: 1.4em;
  text-align: center;
  margin-right: 4px;
}


/* =========================================================
 * 8. リンク色(目次内の <a> のみ)
 * v3.1 デザイン: 落ち着いた青 #1a5a8f
 * ========================================================= */

.kd-menu-wrap a {
  color: #1a5a8f;
  text-decoration: none;
}

.kd-menu-wrap a:hover {
  text-decoration: underline;
}