@charset "UTF-8";
/* ===================================================================
   フルール シャンプー＆トリートメントセット 商品ページ用CSS
   ・ファイルサーバー(gigaplus)に外部CSSとして設置
   ・メイクショップ対策：margin/padding/一部width・text-alignは!important
   ・全セレクタは .fleur-set ラッパー配下に限定（他ページと衝突しない）
   =================================================================== */

/* --- PC / スマホ 出し分け -------------------------------------------------- */
.fleur-set .only-sp { display: none !important; }
.fleur-set .only-pc { display: inline !important; }

@media screen and (max-width: 600px) {
  .fleur-set .only-sp { display: inline !important; }
  .fleur-set .only-pc { display: none !important; }
}
/* ---- ラッパー（ベース） ---- */
.fleur-set {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 2.1;
  letter-spacing: 1.5px;
  color: #333;
  box-sizing: border-box;
}
.fleur-set *,
.fleur-set *::before,
.fleur-set *::after { box-sizing: border-box; }

.fleur-set img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

.fleur-set .serif {
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* ---- 見出し ---- */
.fleur-set .hero {
  margin: 10px auto 40px !important;
}
.fleur-set .hero img { margin: 0 auto !important; }

.fleur-set h2 {
  position: relative;
  display: block;
  text-align: center !important;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif;
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: 3px;
  margin: 70px auto 55px !important;
  padding: 0 0 20px !important;
}
.fleur-set h2::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #A71666;
  border-radius: 2px;
}

.fleur-set h3 {
  position: relative;
  display: block;
  text-align: center !important;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif;
  font-weight: 700;
  font-size: clamp(18px, 2.8vw, 26px);
  letter-spacing: 3px;
  margin: 60px auto 50px !important;
  padding: 0 0 20px !important;
}
.fleur-set h3::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #A71666;
  border-radius: 2px;
}

/* ---- リード文 ---- */
.fleur-set .lead {
  text-align: center !important;
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: 3px;
  margin: 20px auto 40px !important;
}
.fleur-set .desc {
  text-align: center !important;
  font-size: clamp(14px, 2vw, 17px);
  line-height: 2.4;
  margin: 0 auto 20px !important;
}

/* ---- お悩み（枠はCSSで描画・テキストは枠内に中央寄せ） ---- */
.fleur-set .worry {
  margin: 0 auto 20px !important;
}
.fleur-set .worry .worry-box {
  max-width: 660px;
  margin: 0 auto !important;
  padding: 36px 30px !important;
  border: 1px solid #cfcfcf;        /* 枠画像の代わりにCSSで枠を描画（重なり解消） */
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left !important;
}
.fleur-set .worry .worry-box p {
  font-weight: 700;
  font-size: clamp(14px, 2vw, 21px);
  margin: 0 0 16px !important;
  line-height: 1.7;
  width: 16em;               /* 各行の幅を揃えてチェックを縦一列に（中央カラム） */
  max-width: 100%;
}
.fleur-set .worry .worry-box p:last-child { margin-bottom: 0 !important; }
.fleur-set .worry .worry-box .check {
  color: #A71666;
  font-weight: 700;
  margin-right: .5em;
}

/* ---- 写真＋テキストのオーバーレイ帯 ---- */
.fleur-set .feature {
  position: relative;
  margin: 0 auto 50px !important;
}
.fleur-set .feature .feature-img { margin: 0 auto !important; }
.fleur-set .feature .ftext {
  position: absolute;
  bottom: 5%;                 /* 縦中央→画像の下側へ */
  transform: none;
  background: rgba(255, 255, 255, .7);   /* 白背景・透明度0.7で読みやすく */
  border-radius: 10px;
  padding: 18px 22px !important;
  max-width: 46%;
  text-align: left !important;
}
.fleur-set .feature .ftext.left  { left: 4%; }
.fleur-set .feature .ftext.right { right: 4%; }
.fleur-set .feature .ftext p {
  font-weight: 700;
  font-size: clamp(13px, 1.7vw, 17px);
  line-height: 2;
  margin: 0 !important;
}

/* ---- 小見出しバー（帯） ---- */
.fleur-set .bar {
  text-align: center !important;
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 22px);
  padding: 14px 10px !important;
  margin: 0 auto 12px !important;
  background: #F1F1F2;
  border: 1px solid #808080;
}
.fleur-set .bar.plain  { background: #fff;    border: 1px solid #e0e0e0; }
.fleur-set .bar.purple { background: #E8E3EC; border: 1px solid #E8E3EC; }

.fleur-set .subhead {
  text-align: center !important;
  font-size: clamp(17px, 2.6vw, 24px);
  font-weight: 700;
  margin: 22px auto 30px !important;
}

/* ---- 特長リスト（フラワー画像＋中央テキスト） ---- */
.fleur-set .flower {
  position: relative;
  display: table;         /* 画像幅に合わせて中央寄せ（オーバーレイを画像内に収める） */
  text-align: center !important;
  margin: 0 auto 20px !important;
}
.fleur-set .flower .flower-img {
  margin: 0 auto !important;
  max-width: 100% !important;
  width: 500px;
}
@media screen and (max-width: 600px) {
  .fleur-set .flower .flower-img { width: 60%; }
}

.fleur-set .flower .flist {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  background: rgba(255, 255, 255, .7);   /* フラワー画像に重なる文字を読みやすく（PC） */
  border-radius: 10px;
  padding: 12px 20px !important;
  text-align: center !important;
}
.fleur-set .flower .flist .item {
  font-size: clamp(15px, 2vw, 20px);
  margin: 0 auto !important;
  padding: 10px 0 !important;
  text-align: center !important;
}
.fleur-set .flower .flist .item + .item {
  border-top: 1px solid #dcdcdc;
}

/* ---- 成分グリッド（オイル・美髪成分） ---- */
.fleur-set .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 20px !important;
}
.fleur-set .grid .cell {
  flex: 1 1 220px;
  max-width: 245px;
  text-align: center !important;
}
.fleur-set .grid .cell img { margin: 0 auto 8px !important; }
.fleur-set .grid .cell .label {
  font-weight: 700;
  font-size: clamp(14px, 1.9vw, 18px);
  margin: 0 !important;
}

/* ---- バランス配合バナー（中央オーバーレイ） ---- */
.fleur-set .banner {
  position: relative;
  text-align: center !important;
  margin: 0 auto 20px !important;
}
.fleur-set .banner .btext {
  position: absolute;
  top: 3%;                 /* 2行テキストを画像上部の帯へ（イラストに被せない） */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  background: rgba(255, 255, 255, .55);
  border-radius: 10px;
  padding: 10px 18px !important;
}
.fleur-set .banner .btext .big {
  font-weight: 700;
  font-size: clamp(16px, 2.6vw, 24px);
  margin: 0 0 12px !important;
  text-align: center;
}
.fleur-set .banner .btext .sub {
  font-size: clamp(14px, 2vw, 19px);
  margin: 0 !important;
  text-align: center;
}

@media screen and (max-width: 600px) {
.fleur-set .banner .btext .big {
  font-size: 14px;
  }
.fleur-set .banner .btext .sub {
  font-size: 14px;
 
}
}

/* ---- 使い方 STEP（画像＝左／テキスト＝右の横並び） ---- */
.fleur-set .step {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto !important;
}
.fleur-set .step .step-img {
  flex: 0 0 auto;
  width: 38%;
  max-width: 300px;
  margin: 0 !important;
}
.fleur-set .step .stext {
  flex: 1 1 auto;
  text-align: left !important;
}
.fleur-set .step .stext .num {
  color: #9B6F89;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 30px);
  display: block;
  margin: 0 0 8px !important;
}
.fleur-set .step .stext p {
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.9;
  margin: 0 !important;
}
.fleur-set .step-arrow {
  text-align: center !important;
  margin: 18px auto !important;
}
.fleur-set .step-arrow img { margin: 0 auto !important; width: 40px; }

/* ---- 商品カード（3枚） ---- */
.fleur-set .products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 30px auto !important;
}
.fleur-set .products .pcard {
  flex: 1 1 280px;
  max-width: 320px;
  text-align: center !important;
}
.fleur-set .products .pbox {
  padding: 12px !important;
  margin: 0 auto 14px !important;
}
.fleur-set .products .pbox img { margin: 0 auto !important; }
.fleur-set .products .pname {
  font-weight: 700;
  font-size: clamp(14px, 1.9vw, 18px);
  margin: 0 !important;
}

/* ---- セット詳細 ---- */
.fleur-set .detail-head {
  background: #000;
  color: #fff;
  font-family: "メイリオ", "Meiryo", sans-serif;
  font-size: clamp(15px, 2.2vw, 19px);
  padding: 12px 16px !important;
  margin: 0 auto 6px !important;
}
.fleur-set .detail {
  font-size: clamp(13px, 1.8vw, 16px);
  line-height: 1.9;
  text-align: left !important;
  margin: 0 auto !important;
}
.fleur-set .detail hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 16px 0 !important;
}
.fleur-set .detail .ttl { font-weight: 700; }

/* ---- 他商品リンクバー ---- */
.fleur-set .more {
  border-left: 5px solid #AFBDB0;
  margin: 40px auto 20px !important;
}
.fleur-set .more a {
  display: block;
  background: #AFBDB0;
  color: #000;
  text-decoration: none;
  font-family: "メイリオ", "Meiryo", sans-serif;
  font-size: clamp(14px, 2vw, 17px);
  padding: 14px 16px !important;
}
.fleur-set .more a:hover { opacity: .85; }

/* ---- 区切りの縦アキ ---- */
.fleur-set .sp-lg { height: 60px; }
.fleur-set .sp-md { height: 36px; }

/* ===================================================================
   スマホ（〜700px）：オーバーレイ文字は画像の下へ回り込ませる
   =================================================================== */
@media screen and (max-width: 700px) {
  .fleur-set { line-height: 1.9; letter-spacing: 1px; }

  /* お悩み枠：スマホは余白を詰める */
  .fleur-set .worry .worry-box { padding: 24px 16px !important; }
  .fleur-set .worry .worry-box p { font-size: clamp(13px, 3.4vw, 16px); }

  /* 写真＋テキスト帯 */
  .fleur-set .feature .ftext,
  .fleur-set .feature .ftext.left,
  .fleur-set .feature .ftext.right {
    position: static;
    transform: none;
    max-width: 100%;
    background: transparent;
    padding: 16px 6px 0 !important;
  }

  /* フラワー特長リスト */
  .fleur-set .flower { display: block; }
  .fleur-set .flower .flist {
    position: static;
    transform: none;
    width: 100%;
    background: transparent;
    padding: 14px 6px 0 !important;
  }

  /* バランス配合バナー：スマホも2行を画像の上（上部）に重ねたまま */
  .fleur-set .banner .btext { top: 2%; padding: 8px 10px !important; }
  .fleur-set .banner .btext .big { margin: 0 0 6px !important; }

  /* STEP：スマホは画像→テキストの縦積み */
  .fleur-set .step { flex-direction: column; gap: 14px; }
  .fleur-set .step .step-img { width: 60%; margin: 0 auto !important; }
  .fleur-set .step .stext { text-align: left !important; padding: 0 6px !important; }

  /* 成分グリッドは2列 */
  .fleur-set .grid .cell { flex: 1 1 40%; max-width: 46%; }

  .fleur-set .sp-lg { height: 34px; }
  .fleur-set .sp-md { height: 20px; }
}