/*
 * kodawari-cosme.css
 * こだわり商品研究所 コスメページ専用CSS
 *
 * 最終更新: 2026-05-22(v3)
 * 設置場所: https://www.kodawari-net.com/img/css/kodawari-cosme.css
 * 読み込み: コスメページの本文冒頭に <link> で記述
 *
 * 変更履歴:
 *   2026-05-22 v1 初版作成
 *   2026-05-22 v2 ラッパー廃止案を試作(没)
 *   2026-05-22 v3 食ページの実装(kodawari-food.css v3)に完全準拠。
 *                  ラッパー(kd-menu-wrap)で全体をベージュ背景で囲み、
 *                  内側に白の各ブロック(kd-menu-box)を並べる。
 *                  食ページと同じ部品セット(kd-menu-*)を、コスメページ側でも
 *                  動くように同等定義する。
 */


/* =========================================================
 * 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(セクション見出し)
 * 「① ◯◯から選ぶ」など、ラッパー内の大区分見出し
 * ========================================================= */

.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(目次の各ブロック)
 * 白背景 + ベージュ系の細枠 + 角丸
 * ========================================================= */

.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(太い区切り線:赤の実線)
 * カテゴリー見出しの下に置く強い区切り
 * ========================================================= */

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


/* =========================================================
 * 6. kd-menu-bar-thin(細い区切り線:点線)
 * 項目間の弱い区切り
 * ========================================================= */

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> のみ)
 * 落ち着いた青
 * ========================================================= */

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

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