@charset "UTF-8";
/* ============================================================
   nn-soap-reviews.css
   なにがなんでもせっけん レビューセクション
   ※ nn-soap.css（本体）と組み合わせて使用。
     配色・余白ルールは本体に合わせたグリーン方式。
   設置先：kodawari-net.com/img/css/ にアップロードし、
           本体CSSの後に <link> で読み込む
   ============================================================ */

/* ---- レビューセクション大見出し（本体の h3 帯より大きい） ---- */
.kdw-nnsoap h2.kdw-nnsoap__h2{
  font-size:21px;
  font-weight:700;
  color:#fff;
  line-height:1.5;
  background:linear-gradient(135deg,#4f8a5f,#20431f);
  border-radius:8px;
  padding:15px 18px;
  margin:42px 0 10px;
}

/* ---- 案内テキスト ---- */
.kdw-nnsoap__reviewnote{
  font-size:14px !important;
  color:#6b7c70;
  margin:0 0 18px !important;
}

/* ---- レビューカード（折りたたみ） ---- */
.kdw-nnsoap__review{
  border:1px solid #cfe3d3;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  margin:14px 0;
}
.kdw-nnsoap__review>summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:#f5faf6;
}
.kdw-nnsoap__review>summary::-webkit-details-marker{display:none;}

.kdw-nnsoap__reviewmk{
  flex:none;
  width:22px;height:22px;
  margin-top:1px;
  border-radius:50%;
  background:#4f8a5f;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.kdw-nnsoap__reviewmk::before{content:"＋";}
.kdw-nnsoap__review[open] .kdw-nnsoap__reviewmk{background:#26492e;}
.kdw-nnsoap__review[open] .kdw-nnsoap__reviewmk::before{content:"−";}

.kdw-nnsoap__reviewtext{
  flex:1;
  min-width:0;
}
.kdw-nnsoap__reviewquote{
  display:block;
  font-size:15.5px;
  font-weight:700;
  color:#2f7a4f;
  line-height:1.6;
  margin:0 0 6px;
}
.kdw-nnsoap__reviewname{
  display:block;
  font-size:13.5px;
  font-weight:700;
  color:#5a6b5e;
}

.kdw-nnsoap__reviewbody{
  padding:4px 18px 18px 50px;
  border-top:1px solid #e2f0e4;
}
.kdw-nnsoap__reviewbody p{
  font-size:15px !important;
  line-height:1.9;
  margin:12px 0;
}

/* ---- スマホ ---- */
@media (max-width:600px){
  .kdw-nnsoap h2.kdw-nnsoap__h2{font-size:18px;padding:13px 14px;}
  .kdw-nnsoap__reviewnote{font-size:13px !important;}
  .kdw-nnsoap__review>summary{padding:12px 12px;gap:10px;}
  .kdw-nnsoap__reviewquote{font-size:14.5px;}
  .kdw-nnsoap__reviewname{font-size:12.5px;}
  .kdw-nnsoap__reviewbody{padding:4px 14px 14px 38px;}
  .kdw-nnsoap__reviewbody p{font-size:14.5px !important;}
}