@charset "UTF-8";
/* ============================================================
   マルセイユ石鹸ビッグバー 共通もくじ（ナビ目次）
   prefix : kdw-mtoc__
   設置先 : https://www.kodawari-net.com/img/css/marseille-toc.css
   ------------------------------------------------------------
   上段 = 目次リスト（商品ページ：TOP／木箱／紙箱）
   下段 = カード4枚（読みもの：商品説明／詳しい解説／洗い心地／ご感想）
   ============================================================ */

.kdw-mtoc__wrap{
  max-width:760px;
  margin:24px auto;
  padding:0 8px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  box-sizing:border-box;
}
.kdw-mtoc__wrap *{box-sizing:border-box;}

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

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

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

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

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