@charset "UTF-8";
/* ============================================================
   kari-soap.css
   「カリ石鹸とは何か」 情報ページ（FutureShop 情報ページ）
   方式：アレイ方式ベース（オレンジゴールド／暖色／グラデーション可）
   構成：12項目 ＝ 番号付き見出し＋概要（常時表示）＋詳細（クリックで開閉）
   設置先：kodawari-net.com/img/css/ にアップロードし、
           パーツHTML 先頭の <link> で読み込む
   ============================================================ */

/* ---- 全体ラッパー（背景なし） ---- */
.kdw-kari{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",
              "Hiragino Kaku Gothic ProN","Noto Sans JP","メイリオ",sans-serif;
  color:#444;
  line-height:1.9;
  background:none;
}
.kdw-kari *{box-sizing:border-box;}

/* ---- 本文ラッパー（max-width 760px・中央寄せ） ---- */
.kdw-kari__inner{
  max-width:760px;
  margin:0 auto;
  padding:0 16px;
}

/* ---- メインタイトル ---- */
.kdw-kari__title{
  font-size:24px;
  font-weight:700;
  color:#9a5a1c;
  text-align:center;
  line-height:1.5;
  margin:26px 0 14px;
}
.kdw-kari__sub{
  text-align:center;
  font-weight:700;
  color:#555;
  font-size:15.5px;
  line-height:1.85;
  margin:0 0 22px;
}
.kdw-kari__lead{
  font-size:16px !important;
  line-height:1.9;
  margin:0 0 10px;
}

/* ---- 使い方ヒント ---- */
.kdw-kari__hint{
  background:#fbf1df;
  border:1px solid #ecd9b4;
  border-radius:10px;
  padding:13px 16px;
  font-size:14.5px !important;
  color:#7a5a28;
  line-height:1.85;
  margin:20px 0 38px;
}

/* ---- 項目ブロック ---- */
.kdw-kari__item{
  margin:0 0 46px;
}

/* ---- 項目見出し（番号付きオレンジゴールド帯） ---- */
.kdw-kari__h{
  display:flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(135deg,#e0992f,#c8901f);
  color:#fff;
  border-radius:10px;
  padding:13px 18px;
  margin:0 0 16px;
  font-size:19px;
  font-weight:700;
  line-height:1.45;
}
.kdw-kari__num{
  flex:none;
  width:32px;height:32px;
  border-radius:50%;
  background:#fff;
  color:#c8901f;
  font-weight:700;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---- 概要（常時表示・このページの主役） ---- */
.kdw-kari__sum{
  font-size:16.5px !important;
  line-height:1.95;
  color:#3a3a3a;
  font-weight:500;
  background:#fdf7ec;
  border-left:5px solid #e0992f;
  border-radius:0 8px 8px 0;
  padding:14px 18px;
  margin:0 0 14px;
}

/* ---- 詳細トグル（details / summary） ---- */
.kdw-kari__col{margin:0;}
.kdw-kari__col>summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 20px;
  background:#fff;
  border:1.5px solid #d98a2b;
  border-radius:30px;
  color:#b5732a;
  font-weight:700;
  font-size:14.5px;
  line-height:1;
  transition:background .15s;
}
.kdw-kari__col>summary:hover{background:#fbf1df;}
.kdw-kari__col>summary::-webkit-details-marker{display:none;}
.kdw-kari__colmk{
  flex:none;
  width:20px;height:20px;
  border-radius:50%;
  background:#d98a2b;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
}
.kdw-kari__colmk::before{content:"＋";}
.kdw-kari__col[open] .kdw-kari__colmk{background:#b5732a;}
.kdw-kari__col[open] .kdw-kari__colmk::before{content:"−";}
.kdw-kari__lbl::after{content:"詳しく見る";}
.kdw-kari__col[open] .kdw-kari__lbl::after{content:"閉じる";}

/* ---- 詳細の中身 ---- */
.kdw-kari__colbody{
  margin-top:14px;
  padding:4px 18px 16px;
  background:#fdf9f1;
  border:1px solid #ecdcc0;
  border-radius:10px;
}
.kdw-kari__colbody p{
  font-size:15.5px !important;
  line-height:1.9;
  margin:14px 0;
}
.kdw-kari__colbody hr{
  border:0;
  border-top:1px dashed #e0c9a0;
  height:0;
  margin:14px 0;
}

/* ---- 強調 ---- */
.kdw-kari__em{color:#e03e2d;font-weight:700;}
.kdw-kari__mark{background:#fbeeb8;}

/* ---- スマホ ---- */
@media (max-width:600px){
  .kdw-kari__inner{padding:0 14px;}
  .kdw-kari__title{font-size:21px;}
  .kdw-kari__sub{font-size:14.5px;}
  .kdw-kari__lead{font-size:15.5px !important;}
  .kdw-kari__hint{font-size:14px !important;}
  .kdw-kari__item{margin:0 0 38px;}
  .kdw-kari__h{font-size:16.5px;padding:12px 14px;gap:10px;}
  .kdw-kari__num{width:28px;height:28px;font-size:15px;}
  .kdw-kari__sum{font-size:15.5px !important;padding:13px 15px;}
  .kdw-kari__col>summary{font-size:14px;padding:9px 18px;}
  .kdw-kari__colbody{padding:4px 15px 14px;}
  .kdw-kari__colbody p{font-size:14.5px !important;}
}