@charset "UTF-8";
/* ============================================================
   alley-macadamia.css
   アレイ（マカダミアナッツオイル洗顔石鹸） 商品ページ
   方式：アレイ方式（オレンジゴールド／暖色／グラデーション可）
   設置先：kodawari-net.com/img/css/ にアップロードし、
           パーツHTML 先頭の <link> で読み込む
   ============================================================ */

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

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

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

/* ---- メインタイトル ---- */
.kdw-alley__title{
  font-size:23px;
  font-weight:700;
  color:#9a5a1c;
  text-align:center;
  line-height:1.5;
  margin:26px 0 14px;
}
.kdw-alley__sub{
  text-align:center;
  font-weight:700;
  color:#444;
  font-size:16px;
  line-height:1.85;
  margin:0 0 18px;
}
.kdw-alley__lead{font-size:16px;margin:0 0 8px;}

/* ---- セクション見出し（オレンジゴールドの帯） ---- */
.kdw-alley h2.kdw-alley__h{
  font-size:20px;
  font-weight:700;
  color:#fff;
  line-height:1.5;
  background:linear-gradient(135deg,#e0992f,#c8901f);
  border-radius:8px;
  padding:14px 18px;
  margin:36px 0 18px;
}

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

/* ---- 区切り線（独立 <hr>・最近の方式／出し入れ自由） ---- */
.kdw-alley hr{
  border:0;
  border-top:1px dashed #e0c9a0;
  height:0;
  margin:16px 0;
}

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

/* ---- 比較表 ---- */
.kdw-alley__table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 8px;
  font-size:15px;
}
.kdw-alley__table th,
.kdw-alley__table td{
  border:1px solid #e6cfa6;
  padding:10px 8px;
  text-align:center;
  vertical-align:middle;
}
.kdw-alley__table thead th{
  background:linear-gradient(135deg,#e0992f,#c8901f);
  color:#fff;
  font-weight:700;
}
.kdw-alley__table tbody th{
  background:#fbf1df;
  color:#9a5a1c;
  font-weight:700;
}

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

/* ---- スマホ ---- */
@media (max-width:600px){
  .kdw-alley__inner{padding:0 14px;}
  .kdw-alley__title{font-size:20px;}
  .kdw-alley__sub{font-size:15px;}
  .kdw-alley h2.kdw-alley__h{font-size:17px;padding:12px 14px;}
  .kdw-alley__inner p{font-size:15.5px !important;}
  .kdw-alley__col>summary{font-size:14.5px;}
  .kdw-alley__colbody p{font-size:14.5px !important;}
  .kdw-alley__table{font-size:13px;}
  .kdw-alley__table th,
  .kdw-alley__table td{padding:8px 5px;}
}