@charset "UTF-8";
/* ==========================================================
   category-intro-kdw.css
   カテゴリー説明欄「上のパーツ」用 イントロ（全カテゴリー共通）
   商品ラインナップの上に置く、短い案内文のボックス
   prefix : kdw-cintro__

   ■ 色の切り替え
     .kdw-cintro__wrap に修飾クラスを1つ付ける（無指定＝グレージュ）
       kdw-cintro--ochre … オークル（クリームファンデーション）
       （無指定）        … グレージュ（化粧水）

   ■ 新しい色を追加するとき
     下の「配色」欄に、次の形で修飾クラスを追加する
       .kdw-cintro--○○{
         --ci-pale:#…;   背景の淡い地色
         --ci-deep:#…;   商品名の太字・リンク・見出しの文字色
         --ci-accent:#…; リンクの下線の色
       }
     一覧下の選び方ガイド（kdw-cguide--○○）がある場合は、同じ名前・同じ色に揃える

   ■ 商品ごとの行組み ＋ スマホだけ折りたたむ（化粧水で採用）
     <input class="kdw-cintro__toggle" id="kdw-cintro-toggle"> → <div class="kdw-cintro__clamp">…</div>
     → <label class="kdw-cintro__open" for="kdw-cintro-toggle"> の順に置く
     PCは全文表示、スマホは途中まで表示して「続きを読む」で開く（JavaScript不要）

   ■ 「続きを読む」（開閉）を使うとき
     最初に見せる文章のあとに <details class="kdw-cintro__more"> を置く
     （JavaScript不要。使わないカテゴリーはこの部分を書かなければよい）
   ========================================================== */

/* ---------- 配色 ---------- */
.kdw-cintro__wrap{
  --ci-pale:#f9f7f3;
  --ci-deep:#5f5544;
  --ci-accent:#7d715c;
  --ci-text:#3a3530;
  --ci-rule:rgba(0,0,0,.12);
  --ci-line:#e6e0d6;
}
/* オークル（クリームファンデーション） */
.kdw-cintro--ochre{
  --ci-pale:#fbf7f1;
  --ci-deep:#6b4f30;
  --ci-accent:#8c6a46;
  --ci-line:#e9ddcd;
}

/* ---------- 全体 ---------- */
.kdw-cintro__wrap{
  max-width:760px;
  margin:0 auto 22px;
  padding:0 8px;
  box-sizing:border-box;
  color:var(--ci-text);
  font-size:15px;
  line-height:1.95;
  text-align:left;
}
.kdw-cintro__wrap *{box-sizing:border-box}

/* ---------- ボックス ---------- */
.kdw-cintro__box{
  background:var(--ci-pale);
  border-radius:6px;
  padding:16px 22px 10px;
}

/* ---------- 文章 ---------- */
.kdw-cintro__text{
  font-size:15px;
  line-height:1.95;
  margin:0 0 8px;
}
.kdw-cintro__text strong{
  font-weight:700;
  color:var(--ci-deep);
}
.kdw-cintro__text a{
  color:var(--ci-deep);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--ci-accent);
}

/* ---------- 続きを読む（開閉） ---------- */
.kdw-cintro__more{
  margin:2px 0 6px;
}
.kdw-cintro__more>summary{
  list-style:none;
  cursor:pointer;
  display:block;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:var(--ci-deep);
  padding:6px 0 4px;
  border-top:1px dashed var(--ci-rule);
}
.kdw-cintro__more>summary::-webkit-details-marker{display:none}
.kdw-cintro__more>summary::after{content:"続きを読む ▼"}
.kdw-cintro__more[open]>summary::after{content:"閉じる ▲"}
/* 開いたときは「閉じる」を本文の下へ */
.kdw-cintro__more[open]{
  display:flex;
  flex-direction:column;
}
.kdw-cintro__more[open]>.kdw-cintro__more-body{order:1}
.kdw-cintro__more[open]>summary{
  order:2;
  padding-top:6px;
}
.kdw-cintro__more-body{
  padding:4px 0 6px;
}

/* ---------- 開いた中の見出し・紹介カード ---------- */
.kdw-cintro__sub{
  font-size:15px;
  font-weight:700;
  color:var(--ci-deep);
  margin:12px 0 8px;
  text-align:center;
  letter-spacing:.05em;
}
.kdw-cintro__list{
  margin:0 0 4px;
  padding:0;
  list-style:none;
}
.kdw-cintro__list li{
  background:#fff;
  border-radius:5px;
  padding:10px 14px;
  margin:0 0 8px;
  font-size:14px;
  line-height:1.85;
  list-style:none;
}
.kdw-cintro__need{
  display:block;
  font-weight:700;
  color:var(--ci-deep);
  font-size:14px;
  margin-bottom:2px;
}
.kdw-cintro__list a{
  color:var(--ci-text);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--ci-accent);
}

/* ---------- 商品ごとの行組み ---------- */
.kdw-cintro__rows{
  margin:4px 0 6px;
  border-top:1px solid var(--ci-line);
}
.kdw-cintro__row{
  display:flex;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--ci-line);
}
.kdw-cintro__name{
  flex:0 0 8.5em;
  font-weight:700;
  color:var(--ci-deep);
  font-size:14.5px;
  line-height:1.9;
}
.kdw-cintro__desc{
  flex:1;
  font-size:14.5px;
  line-height:1.9;
}

/* ---------- スマホだけ折りたたむ（PCでは常に全文） ---------- */
.kdw-cintro__toggle{display:none}
.kdw-cintro__open{display:none}

/* ---------- スマホ ---------- */
@media (max-width:600px){
  .kdw-cintro__wrap{font-size:14px}
  .kdw-cintro__box{padding:14px 15px 8px}
  .kdw-cintro__text{font-size:14px;line-height:1.9}
  .kdw-cintro__sub{font-size:14px}
  .kdw-cintro__list li{padding:9px 12px;font-size:13.5px}
  .kdw-cintro__row{display:block;padding:9px 0}
  .kdw-cintro__name{display:block;font-size:14px;margin-bottom:1px}
  .kdw-cintro__desc{font-size:14px;line-height:1.85}
  .kdw-cintro__clamp{max-height:15.5em;overflow:hidden;position:relative}
  .kdw-cintro__clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4em;background:linear-gradient(to bottom,transparent,var(--ci-pale))}
  .kdw-cintro__toggle:checked ~ .kdw-cintro__clamp{max-height:none}
  .kdw-cintro__toggle:checked ~ .kdw-cintro__clamp::after{display:none}
  .kdw-cintro__open{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--ci-deep);padding:6px 0 4px;cursor:pointer}
  .kdw-cintro__open::after{content:"続きを読む ▼"}
  .kdw-cintro__toggle:checked ~ .kdw-cintro__open::after{content:"閉じる ▲"}
}