/* ===========================
   植物性洗剤 商品詳細ページ 個別スタイル
   - 共通グルー（deco-heading・セクション余白）は product-detail-moist.css を
     共用し、本ファイルは後読みで本商品固有の帯・用途グリッド・作り方だけを持つ
   - Figma: node 875:58728（Water Life Series 6 洗剤1,000ml）
     cqw の構図基準幅は Figma 実測の 1046px（実描画は content-wrap 実効1200px
     基準に比率スケールする）
   - 化粧品ページではないため cosmetic スコープは使わず、シアン系テーマ
   =========================== */

.page-product-detail--detergent {
  --dt-cyan: #9cd5db;
  --dt-teal: #5cbbc5;
}

/* 見出し英字をシアン系に上書き（Figma: #9cd5db） */
.page-product-detail--detergent .deco-heading__en { color: var(--dt-cyan); }

/* pill 背景（シアン）は HOW TO MAKE セクションにだけ効かせる。
   「ご使用用途」は区切り線見出し（A）に変えたため用途セクションへは波及させない。 */
.page-product-detail--detergent .dt-make-section .deco-heading__ja--pill {
  background: rgba(156, 213, 219, 0.5);   /* Figma: #9cd5db 50% の淡いシアン帯 */
  color: #fff;
  font-size: 32px;
  letter-spacing: 0.05em;
}

/* 見出しの改行制御。
   pill は display:flex のため <br> が効かないので内側 span で包み、
   意味の切れ目「500ml洗剤用エコスプレー / 10倍希釈液の作り方」で改行させる。
   各行が収まるよう狭い幅ではフォントも段階縮小する（改行位置は不変）。
   - デスクトップ(>810px): 1行（改行なし）
   - ≤810px: 2行（tablet で折れ始める幅）
   - ≤480px / ≤374px: フォント縮小で各行がpill内に収まるように */
.page-product-detail--detergent .dt-make-title {
  display: inline-block;
  text-align: center;
  white-space: nowrap;   /* 各行はこの nowrap で保護し、改行は <br> のみで行う */
}

.page-product-detail--detergent .dt-make-title-br {
  display: none;
}

/* ===========================
   A. 「ご使用用途」区切り線見出し（Figma 929:3142・Antique Regular 42px #717171）
   =========================== */
.page-product-detail--detergent .dt-use-section .deco-heading__ja {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 400;
  font-size: 42px;
  color: #717171;
  letter-spacing: 0;
}
.page-product-detail--detergent .dt-use-section .deco-heading__line {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  background: #000000;
}

/* ===========================
   1. 帯「色々な用途に使える植物性洗剤」
   大理石写真背景 + コピー(左) + 水しぶきボトル(右)
   =========================== */
.dt-band {
  position: relative;
  overflow: hidden;
}

.dt-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/images/products/detergent/band-bg.png') center / cover no-repeat;
}

.dt-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 65%, #ffffff 100%);
}

.dt-band__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
  container-type: inline-size;
}

/* 構図本体（コピー ｜ 水しぶきボトル。基準幅 1046） */
.dt-band__stage {
  display: flex;
  align-items: center;
  gap: 4cqw;
  width: 100%;
  padding: 4cqw 0;
}

.dt-band__copy {
  flex: 0 0 46cqw;
  min-width: 0;
  position: relative;
  z-index: 2;
  color: #4c4c4c;
}

/* DETERGENT = 金グラデ */
.dt-band__en {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 3.059cqw;    /* 32 / 1046 */
  line-height: 1.5;
  background: linear-gradient(to bottom, #dccbaa, #916c22);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 0.5cqw;
  white-space: nowrap;
}

/* 色々な用途に使える（32/24px ミックス） */
.dt-band__sub {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 3.059cqw;    /* 32 / 1046 */
  letter-spacing: -0.05em;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
}

.dt-band__sub i {
  font-style: normal;
  font-size: 2.294cqw;    /* 24 / 1046 */
}

/* 植物性洗剤（48px） */
.dt-band__main {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 4.589cqw;    /* 48 / 1046 */
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin: 0 0 2.3cqw;
  white-space: nowrap;
}

.dt-band__desc {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 1.912cqw;    /* 20 / 1046 */
  line-height: 1.5;
  letter-spacing: -0.05em;
  margin: 0 0 2.3cqw;
}

/* シアンのピル3つ */
.dt-band__pills {
  display: flex;
  gap: 1.53cqw;
  flex-wrap: wrap;
}

.dt-band__pill {
  background: var(--dt-teal);
  border-radius: 10px;
  padding: 0.956cqw 1.912cqw;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 1.53cqw;     /* 16 / 1046 */
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #ffffff;
  white-space: nowrap;
}

/* 水しぶき + ボトル（Figma: しぶきの中に商品ボトルを合成。
   ボトル箱 166x372 を stage(459x490) の ml147/mt55 に配置） */
.dt-band__visual {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 46cqw;
}

.dt-band__splash {
  display: block;
  width: 100%;
  height: auto;
}

.dt-band__bottle {
  position: absolute;
  left: 40%;
  top: 14%;
  width: 31%;
  height: 70%;
  object-fit: cover;
  object-position: center bottom;
}

/* ===========================
   2. ご使用用途（10項目のアイコングリッド）
   =========================== */
.dt-use-section {
  background: #ffffff;
  padding: 96px 0 40px;
}

.dt-use-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px 40px;
  padding: 0;
  margin: 0;
  justify-items: center;
}

.dt-use-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 240px;
}

/* 淡いシアンの大サークル（Figma: 208px）。列幅に応じて縮む可変サイズにして、
   ファンデーション「特徴」と同様に狭い幅でも横並び（4列）を維持できるようにする。
   アイコンは上寄せ・名称は下側でサークルに重なる */
.dt-use-item__disc {
  position: relative;
  width: 100%;
  max-width: 208px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  background: #e9f6f8;
}

.dt-use-item__icon {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 60.6%;   /* 126 / 208 */
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.dt-use-item__name {
  position: absolute;
  top: 70%;
  left: 0;
  right: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--dt-teal);
  margin: 0;
}

.dt-use-item__desc {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #4c4c4c;
  margin: 16px 0 0;
}

.dt-use-item__rate {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dt-teal);
  margin: 10px 0 0;
}

/* ===========================
   3. HOW TO MAKE（希釈液の作り方）
   =========================== */
.dt-make-section {
  background: #ffffff;
  padding: 56px 0 104px;
}

.dt-make-row {
  list-style: none;
  display: flex;
  gap: 18px;
  justify-content: center;
  max-width: 870px;   /* 278×3 + gap18×2 = 870。カードを厳密に278pxへ */
  margin: 0 auto;
  padding: 0;
}

.dt-make-item {
  flex: 0 1 278px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 角丸カード（Figma: 278x297・シアン枠3px・角丸30px）。
   枠は border ではなく inset box-shadow で描く＝レイアウト箱を 278x297 に保ち、
   カード内画像の % 座標が Figma のフレーム基準（外枠 278x297）と厳密に一致する
   （box-sizing:border-box 下では border があると絶対配置の基準が内側に 3px ずれるため） */
.dt-make-item__card {
  position: relative;
  width: 100%;
  max-width: 278px;
  aspect-ratio: 278 / 297;
  background: #ffffff;
  box-shadow: inset 0 0 0 3px var(--dt-cyan);
  border-radius: 30px;
}

/* 左上の番号バッジ（Figma: 33px シアン円） */
.dt-make-item__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--dt-cyan);
  color: #ffffff;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.05em;
}

/* カード内イラスト。Figma のボックス座標（カード278x297基準）を % 化し、
   500x500 正方形アセットを object-fit:cover で配置＝Figma の見え方を厳密再現 */
.dt-make-item__img {
  position: absolute;
  object-fit: cover;
  object-position: center;
}

/* 01 スプレー単体（Figma: 22,38,234,234 → 正方形なのでクロップ無し・全体表示） */
.dt-make-item__img--spray-solo {
  left: 7.91%;
  top: 12.80%;
  width: 84.17%;
  height: 78.79%;
}

/* 02/03 スプレー（Figma: 52,54,121,234） */
.dt-make-item__img--spray {
  left: 18.71%;
  top: 18.18%;
  width: 43.53%;
  height: 78.79%;
}

/* 02 洗剤ボトル（Figma: 173,29,71,173） */
.dt-make-item__img--bottle {
  left: 62.23%;
  top: 9.76%;
  width: 25.54%;
  height: 58.25%;
}

/* 03 水ボトル（Figma: 148,20,91,178） */
.dt-make-item__img--water {
  left: 53.24%;
  top: 6.73%;
  width: 32.73%;
  height: 59.93%;
}

.dt-make-item__caption {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #4c4c4c;
  margin: 18px 0 0;
}

.dt-make-item__note {
  font-size: 13px;
  color: #4c4c4c;
}

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 1100px) {
  .dt-band__inner {
    container-type: normal;
  }

  .dt-band {
    padding: 56px 0 0;
  }

  .dt-band__stage {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 0 24px;
  }

  .dt-band__copy {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .dt-band__en { font-size: 24px; margin-bottom: 6px; }
  .dt-band__sub { font-size: 24px; }
  .dt-band__sub i { font-size: 18px; }
  .dt-band__main { font-size: 36px; margin-bottom: 16px; }

  .dt-band__desc {
    font-size: 17px;
    line-height: 1.75;
    max-width: 620px;
    margin-bottom: 16px;
  }

  .dt-band__pills { gap: 10px; justify-content: center; }
  .dt-band__pill { font-size: 14px; padding: 8px 16px; }

  .dt-band__visual {
    flex: 0 0 auto;
    width: min(520px, 84%);
    margin-top: 8px;
  }

  /* 用途10項目は 901〜1100 で4列を維持（ディスクが可変で列幅に追従して縮む）。
     それ以下は 3列(≤900)→2列(≤600) と段階的に減らす（下部の媒体クエリ参照） */
  .dt-use-grid {
    gap: 44px 20px;
  }

  /* 作り方3カードも 768〜1100 では3列横並びを維持（ファンデーション特徴と同じ挙動）。
     カードは width:100%/flex-shrink で列幅に追従して縮み、中の画像は % 配置なので比率維持。
     縦積みは SP(≤767) から。gap のみ詰める */
  .dt-make-row {
    gap: 16px;
  }
}

/* 用途グリッド: 4列(>900) → 3列(≤900) → 2列(≤600) と段階的に減らす。
   4列からいきなり2列に飛ばず、間に3列を挟んでディスクサイズの変化をなだらかにする */
@media (max-width: 900px) {
  .dt-use-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 20px;
  }
}

@media (max-width: 600px) {
  .dt-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .dt-band { padding-top: 40px; }

  /* SP は content-wrap と同じ左右20px */
  .dt-band__inner { padding: 0 20px; }

  .dt-band__sub { font-size: 19px; }
  .dt-band__sub i { font-size: 15px; }
  .dt-band__main { font-size: 30px; }
  .dt-band__desc { font-size: 15px; }
  .dt-band__pill { font-size: 13px; }

  .dt-use-section { padding: 64px 0 24px; }

  .page-product-detail--detergent .dt-use-section .deco-heading__ja { font-size: 30px; }
  .page-product-detail--detergent .dt-use-section .deco-heading__line { max-width: none; }

  /* 用途グリッドの列数は上部の 3列(≤900)/2列(≤600) 媒体クエリで制御（ここでは扱わない） */

  .dt-make-section { padding: 40px 0 72px; }

  /* SP(≤767) で初めて縦積み（ファンデーション特徴と同じ） */
  .dt-make-row {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .dt-make-item { flex: 0 0 auto; width: min(278px, 74vw); }
}

/* 作り方見出し: 810px 以下で全文が1行に収まらなくなるので、
   意味の切れ目で2行に分ける（tablet の 768〜810 折れも含めてカバー） */
@media (max-width: 810px) {
  .page-product-detail--detergent .dt-make-title-br {
    display: inline;
  }
}

/* SP では pill 幅が狭く 32px だと「500ml洗剤用エコスプレー」1行が収まらないため縮小 */
@media (max-width: 480px) {
  .page-product-detail--detergent .dt-make-section .deco-heading__ja--pill {
    font-size: 26px;
  }
}

/* 極狭幅（〜374px）: 2列でディスクが約150px以下に縮むと、8文字の名称
   （例「タイヤ・ホイール」）が18pxのまま2行になり円の下にはみ出すため縮小する。
   作り方見出しも各行が pill に収まるよう更に縮小する */
@media (max-width: 374px) {
  .dt-use-item__name {
    font-size: 15px;
    top: 66%;
  }
  .page-product-detail--detergent .dt-make-section .deco-heading__ja--pill {
    font-size: 22px;
  }
}