@charset "UTF-8";
/* ============================================================
   nn-soap.css
   なにがなんでもせっけん 商品ページ
   方式：こだわり商品研究所 定番パターンを継承
   （バッジ／太字タイトル／枠付き中見出し／帯見出し／破線区切り）
   配色：グリーン方式（ナチュラル・オーガニック。有機栽培ココヤシ油を意識）
   設置先：kodawari-net.com/img/css/ にアップロードし、
           パーツHTML 先頭の <link> で読み込む
   ============================================================ */

/* ---- 全体ラッパー（背景なし） ---- */
.kdw-nnsoap{
  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-nnsoap *{box-sizing:border-box;}

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

/* ---- 全幅の画像（カードの外・キービジュアル＆章画像） ---- */
.kdw-nnsoap__fig{
  margin:30px auto;
  text-align:center;
}
.kdw-nnsoap__fig img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:6px;
}
.kdw-nnsoap__kv{margin:0 auto 6px;}            /* キービジュアル */
.kdw-nnsoap__kv img{border-radius:0;}

/* ---- 商品名バッジ（キッカー） ---- */
.kdw-nnsoap__badge{
  display:block;
  width:fit-content;
  margin:28px auto 14px;
  background:#e6f2e9;
  color:#2f6b45;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  padding:5px 18px;
  border-radius:20px;
}

/* ---- メインタイトル ---- */
.kdw-nnsoap__title{
  font-size:27px;
  font-weight:800;
  color:#26492e;
  text-align:center;
  line-height:1.45;
  margin:0 0 26px;
}

.kdw-nnsoap__sub{
  text-align:center;
  font-weight:700;
  color:#444;
  font-size:16px;
  line-height:1.85;
  margin:0 0 18px;
}

/* ---- 導入文（中見出し）：枠で囲い、枠の中にのみ背景色を敷く ---- */
.kdw-nnsoap__lead{
  font-size:17px;
  font-weight:700;
  line-height:1.9;
  margin:0 0 30px;
  padding:22px 24px;
  background:#eef6f0;
  border:2px solid #6fa877;
  border-radius:10px;
  text-align:center;
}

/* ---- セクション見出し（グリーンの帯／h3） ---- */
.kdw-nnsoap h3.kdw-nnsoap__h{
  font-size:19px;
  font-weight:700;
  color:#fff;
  line-height:1.5;
  background:linear-gradient(135deg,#6fa877,#39704a);
  border-radius:8px;
  padding:13px 18px;
  margin:36px 0 18px;
}

/* ---- 本文中の小見出し（左罫線のみ。中見出しとは明確に区別） ---- */
.kdw-nnsoap h4.kdw-nnsoap__subhead{
  font-size:16px;
  font-weight:700;
  color:#2f6b45;
  border-left:4px solid #6fa877;
  padding:2px 0 2px 14px;
  margin:28px 0 10px;
}

/* ---- 本文段落 ----
   ※Future Shop テーマCSSが <p> の font-size を上書きするため
     !important で確実に効かせる */
.kdw-nnsoap__inner p{
  font-size:16px !important;
  line-height:1.9;
  margin:0 0 14px;
}

/* ---- 区切り線（独立 <hr>・出し入れ自由） ---- */
.kdw-nnsoap hr{
  border:0;
  border-top:1px dashed #bfdcc6;
  height:0;
  margin:16px 0;
}

/* ---- 強調（本文側はインラインでも指定済み。クラスでも使えるよう用意） ---- */
.kdw-nnsoap__em{color:#2f7a4f;font-weight:700;}
.kdw-nnsoap__mark{background:#e6f2e9;}

/* ---- お客様の声（引用まとめボックス） ---- */
.kdw-nnsoap__voices{
  border-left:4px solid #6fa877;
  background:#f5faf6;
  border-radius:0 8px 8px 0;
  padding:14px 20px;
  margin:10px 0 18px;
}
.kdw-nnsoap__voices p{
  font-size:15.5px !important;
  line-height:1.9;
  color:#3a5a42;
  margin:0 0 6px;
}
.kdw-nnsoap__voices p:last-child{margin-bottom:0;}

/* ---- 大切にしていること（バリューリスト） ---- */
.kdw-nnsoap__valuelist{
  list-style:none;
  margin:0 0 16px;
  padding:0;
}
.kdw-nnsoap__valuelist li{
  position:relative;
  font-size:16px;
  line-height:1.9;
  padding:2px 0 2px 24px;
  margin:0 0 8px;
}
.kdw-nnsoap__valuelist li::before{
  content:"";
  position:absolute;
  left:2px;
  top:11px;
  width:8px;
  height:8px;
  background:#6fa877;
  transform:rotate(45deg);
}

/* ---- 比較表 ---- */
.kdw-nnsoap__table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 8px;
  font-size:15px;
}
.kdw-nnsoap__table th,
.kdw-nnsoap__table td{
  border:1px solid #cfe3d3;
  padding:10px 8px;
  text-align:center;
  vertical-align:middle;
}
.kdw-nnsoap__table thead th{
  background:linear-gradient(135deg,#6fa877,#39704a);
  color:#fff;
  font-weight:700;
}
.kdw-nnsoap__table tbody th{
  background:#eef6f0;
  color:#26492e;
  font-weight:700;
}

/* ============================================================
   折りたたみコラム（クリックで展開）
   <details class="kdw-nnsoap__col"> ... </details>
   ============================================================ */
.kdw-nnsoap__col{
  border:1px solid #cfe3d3;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  margin:18px 0;
}
.kdw-nnsoap__col>summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 15px;
  background:#eef6f0;
  color:#26492e;
  font-weight:700;
  font-size:15.5px;
  line-height:1.5;
}
.kdw-nnsoap__col>summary::-webkit-details-marker{display:none;}
.kdw-nnsoap__colmk{
  flex:none;
  width:22px;height:22px;
  border-radius:50%;
  background:#4f8a5f;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.kdw-nnsoap__colmk::before{content:"＋";}
.kdw-nnsoap__col[open] .kdw-nnsoap__colmk{background:#26492e;}
.kdw-nnsoap__col[open] .kdw-nnsoap__colmk::before{content:"−";}
.kdw-nnsoap__colbody{
  padding:6px 16px 14px;
  border-top:1px solid #e2f0e4;
}
.kdw-nnsoap__colbody p{
  font-size:15px !important;
  line-height:1.9;
  margin:12px 0;
}
.kdw-nnsoap__colbody hr{margin:14px 0;}

/* ---- スマホ ---- */
@media (max-width:600px){
  .kdw-nnsoap__inner{padding:0 8px;}
  .kdw-nnsoap__badge{font-size:11.5px;padding:4px 14px;margin:22px auto 12px;}
  .kdw-nnsoap__title{font-size:21px;margin:0 0 20px;}
  .kdw-nnsoap__lead{font-size:15.5px;padding:18px 16px;}
  .kdw-nnsoap__sub{font-size:15px;}
  .kdw-nnsoap h3.kdw-nnsoap__h{font-size:16.5px;padding:12px 14px;}
  .kdw-nnsoap h4.kdw-nnsoap__subhead{font-size:15px;}
  .kdw-nnsoap__inner p{font-size:15.5px !important;}
  .kdw-nnsoap__voices{padding:12px 16px;}
  .kdw-nnsoap__voices p{font-size:14.5px !important;}
  .kdw-nnsoap__valuelist li{font-size:15px;}
  .kdw-nnsoap__col>summary{font-size:14.5px;}
  .kdw-nnsoap__colbody p{font-size:14.5px !important;}
  .kdw-nnsoap__table{font-size:13px;}
  .kdw-nnsoap__table th,
  .kdw-nnsoap__table td{padding:8px 5px;}
}