@charset "UTF-8";
/* ============================================================
   ブラック・ナチュラル・ヘアソープ 共通もくじ（ナビ目次）
   prefix : kdw-btoc__
   設置先 : https://www.kodawari-net.com/img/css/black-toc.css
   ------------------------------------------------------------
   上段 = 目次リスト（商品ページ：TOP／詰替200ml／詰替500ml）
   下段 = カード4枚（読みもの：商品紹介／商品分析／商品レビュー／レビュー分析）
   配色 = 案A チャコール×レッド差し色
   ============================================================ */

.kdw-btoc__wrap{
  width:100%;
  max-width:760px;
  margin:24px auto;
  padding:0 8px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","メイリオ",sans-serif;
  box-sizing:border-box;
}
.kdw-btoc__wrap *{box-sizing:border-box;}

/* ---- ヘッダー帯 ---- */
.kdw-btoc__head{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,#2b2b2b 0%,#4a4a4a 100%);
  color:#fff;
  border-radius:10px 10px 0 0;
  padding:13px 18px;
}
.kdw-btoc__head-ico{width:20px;height:20px;flex:none;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.kdw-btoc__head-ttl{font-size:16px;font-weight:600;line-height:1.4;}

/* ---- 本体 ---- */
.kdw-btoc__body{
  background:#fff;
  border:1px solid #e0d6d4;border-top:none;
  border-radius:0 0 10px 10px;
  padding:15px 15px 16px;
}

/* ---- 上段：目次リスト ---- */
.kdw-btoc__list{margin:0 0 14px;}
.kdw-btoc__row{
  display:flex;align-items:center;gap:12px;
  padding:10px 4px;
  border-bottom:1px solid #ecd3cf;
  font-size:15px;font-weight:600;color:#ba372a;
  text-decoration:none;
  transition:background .15s ease;
}
.kdw-btoc__list .kdw-btoc__row:last-child{border-bottom:none;}
.kdw-btoc__row:hover{background:#f6f3f2;}
.kdw-btoc__badge{
  flex:none;width:31px;height:31px;
  border:1.7px solid #ba372a;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.kdw-btoc__badge svg{width:17px;height:17px;stroke:#ba372a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---- 下段：カード ---- */
.kdw-btoc__cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;
}
.kdw-btoc__card{
  display:block;text-decoration:none;
  background:#fff;border:1px solid #e0d6d4;border-radius:11px;
  padding:15px 8px;text-align:center;
  box-shadow:0 2px 7px rgba(43,43,43,.06);
  transition:transform .15s ease,box-shadow .15s ease;
}
.kdw-btoc__card:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(43,43,43,.13);}
.kdw-btoc__card-ico{
  width:42px;height:42px;margin:0 auto 9px;
  background:#fdeeec;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.kdw-btoc__card-ico svg{width:22px;height:22px;stroke:#ba372a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.kdw-btoc__card-ttl{display:block;font-size:15px;font-weight:600;color:#ba372a;line-height:1.35;margin:0 0 3px;}
.kdw-btoc__card-sub{display:block;font-size:12px;color:#8a7a7a;line-height:1.45;margin:0;}

/* ---- スマホ：カードは2×2 ---- */
@media (max-width:560px){
  .kdw-btoc__cards{grid-template-columns:repeat(2,1fr);}
  .kdw-btoc__head-ttl{font-size:15px;}
  .kdw-btoc__row{font-size:14.5px;}
}