@charset "UTF-8";
/* ============================================================
   alley フェイスオイル 商品解説ページ  CSS
   方式: アレイ方式（化粧品／グラデOK・オレンジ-ゴールド）
   prefix: kdw-faceoil__
   設置先: https://www.kodawari-net.com/img/css/alley-faceoil.css
   ============================================================ */

/* ---- ベース ---- */
.kdw-faceoil__wrap{
  max-width:760px;
  margin:0 auto;
  padding:20px 16px 44px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","メイリオ",sans-serif;
  color:#3a3027;
  line-height:1.9;
  font-size:16px;
  box-sizing:border-box;
}
.kdw-faceoil__wrap *{box-sizing:border-box;}
.kdw-faceoil__wrap p{margin:0 0 14px;font-size:16px;}
.kdw-faceoil__wrap p:last-child{margin-bottom:0;}
.kdw-faceoil__wrap img{max-width:100%;height:auto;}
.kdw-faceoil__wrap a{color:#b85c1e;}

/* ---- キービジュアル／章画像（カード外・独立配置）---- */
.kdw-faceoil__hero{
  display:block;width:100%;height:auto;
  border-radius:14px;margin:0 0 6px;
}
.kdw-faceoil__img{
  display:block;width:100%;height:auto;
  border-radius:11px;margin:30px 0 6px;
}

/* ---- 商品名（装飾なし・中央・font-sizeはインライン指定）---- */
.kdw-faceoil__name{
  text-align:center;
  margin:16px 0 6px;
  font-weight:700;
  letter-spacing:.02em;
  color:#3a3027;
}

/* ---- リード文カード ---- */
.kdw-faceoil__lead{
  margin:18px 0 8px;
  padding:20px 22px;
  background:linear-gradient(135deg,#fdf3e6 0%,#fbe9d2 100%);
  border:1px solid #ecca99;
  border-radius:14px;
  box-shadow:0 3px 10px rgba(184,92,30,.10);
}
.kdw-faceoil__lead p{font-size:16px;}

/* ---- 動画 ---- */
.kdw-faceoil__sub-c{text-align:center;font-size:13px;color:#8a7a66;margin:18px 0 6px;}
.kdw-faceoil__movie{
  position:relative;width:100%;padding-top:56.25%;
  margin:0 0 6px;border-radius:12px;overflow:hidden;
  background:#000;
}
.kdw-faceoil__movie iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---- 目次 ---- */
.kdw-faceoil__toc{
  margin:30px 0;
  padding:22px 24px;
  background:#fbf3e8;
  border:1px solid #e7c89c;
  border-radius:14px;
}
.kdw-faceoil__toc-ttl{
  display:flex;align-items:center;gap:9px;
  margin:0 0 14px;font-size:16px;font-weight:700;color:#9a4a13;
}
.kdw-faceoil__toc-ttl::before{content:"";width:6px;height:18px;background:#d97a35;border-radius:3px;display:inline-block;}
.kdw-faceoil__toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;}
.kdw-faceoil__toc li{margin:0 0 9px;padding:0;}
.kdw-faceoil__toc li:last-child{margin-bottom:0;}
.kdw-faceoil__toc a{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:#5a4a38;font-size:15px;line-height:1.5;
}
.kdw-faceoil__toc a::before{
  counter-increment:toc;content:counter(toc);
  flex:0 0 auto;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:#e2853f;color:#fff;font-size:13px;font-weight:700;border-radius:50%;
}

/* ---- 章見出しバンド（番号バッジ付き）---- */
.kdw-faceoil__sec{
  display:flex;align-items:center;gap:14px;
  margin:48px 0 22px;
  padding:15px 20px;
  background:linear-gradient(135deg,#e2853f 0%,#c5641f 100%);
  border-radius:12px;
  box-shadow:0 4px 14px rgba(176,84,24,.22);
  scroll-margin-top:14px;
}
.kdw-faceoil__num{
  flex:0 0 auto;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#c5641f;
  font-size:20px;font-weight:700;line-height:1;border-radius:50%;
  box-shadow:0 2px 5px rgba(0,0,0,.16);
}
.kdw-faceoil__sec h2{
  margin:0;color:#fff;font-size:19px;font-weight:700;line-height:1.45;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}

/* ---- 小見出し ---- */
.kdw-faceoil__h3{
  margin:34px 0 14px;
  padding:7px 0 7px 14px;
  border-left:5px solid #d97a35;
  font-size:17.5px;font-weight:700;color:#9a4a13;line-height:1.5;
}

/* ---- 本文カード ---- */
.kdw-faceoil__card{
  margin:18px 0;
  padding:18px 22px;
  background:#fdf7f0;
  border:1px solid #ecd9bf;
  border-radius:11px;
}
.kdw-faceoil__card--accent{
  background:#fbf0e0;
  border:1px solid #e7c89c;
  border-left:5px solid #d97a35;
}
.kdw-faceoil__card-ttl{
  display:block;margin:0 0 12px;
  font-size:16.5px;font-weight:700;color:#b85c1e;line-height:1.5;
}

/* ---- 箇条書き（●はテキストで保持）---- */
.kdw-faceoil__card p{font-size:16px;}

/* ---- 点線区切り（独立hr）---- */
.kdw-faceoil__dot{
  border:0;border-top:1px dashed #d9bf9c;margin:13px 0;height:0;
}

/* ---- インライン強調 ---- */
.kdw-faceoil__red{color:#d83933;font-weight:600;}
.kdw-faceoil__mark{
  background:linear-gradient(transparent 58%,#ffe27a 58%);
  padding:0 1px;font-weight:600;
}
.kdw-faceoil__orange{color:#e07b2c;}

/* ---- 目次に戻る ---- */
.kdw-faceoil__back{text-align:center;margin:28px 0 4px;}
.kdw-faceoil__back a{
  display:inline-block;padding:7px 20px;
  font-size:13px;color:#9a4a13;text-decoration:none;
  background:#fbf0e0;border:1px solid #e7c89c;border-radius:22px;
}

/* ---- レスポンシブ ---- */
@media (max-width:600px){
  .kdw-faceoil__wrap{padding:16px 12px 34px;}
  .kdw-faceoil__lead,.kdw-faceoil__card{padding:16px 16px;}
  .kdw-faceoil__toc{padding:18px 16px;}
  .kdw-faceoil__sec{padding:13px 15px;gap:11px;}
  .kdw-faceoil__num{width:34px;height:34px;font-size:17px;}
  .kdw-faceoil__sec h2{font-size:16.5px;}
  .kdw-faceoil__h3{font-size:16.5px;}
  .kdw-faceoil__wrap p,.kdw-faceoil__card p,.kdw-faceoil__lead p{font-size:15.5px;}
}