/* ===========================
   ミネラル入浴剤 商品詳細ページ 個別スタイル
   - このページは化粧品セクション（deco-heading等）を使わないため
     product-detail-moist.css は読み込まず、本ファイルで完結する
   - Figma: node 875:58584（Water Life Series 5 浴用（浴剤）1,000ml）
     cqw の構図基準幅は Figma 実測の 1045px（実描画は content-wrap 実効1200px
     基準に比率スケールする）
   - お手入れステップ・ご使用方法セクションは無し（Figma準拠）
   =========================== */

.page-product-detail--bath {
  --ba-ink: #4c4c4c;     /* 見出し・本文（Figma text-[#4c4c4c]） */
  --ba-accent: #13638d;  /* 特長バッジ・スペック見出し（Figma text-[#13638d]） */
}

/* ===========================
   1. 帯「滑らかな湯上がり感。ミネラル入浴剤」
   白背景 + コピー(左) + バスルーム写真(右)
   =========================== */
.ba-band {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.ba-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;
}

/* 構図本体（コピー ｜ 写真 533高。基準幅 1045） */
.ba-band__stage {
  display: flex;
  align-items: center;
  gap: 4cqw;
  width: 100%;
  padding: 4cqw 0;
}

.ba-band__copy {
  flex: 0 0 46cqw;
  min-width: 0;
  position: relative;
  color: var(--ba-ink);
}

/* BATH ADDITIVE = 金グラデ */
.ba-band__en {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 3.062cqw;    /* 32 / 1045 */
  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;
}

/* たっぷり33日分 バッジ（円=CSS塗り / テキスト=コード。タイトル右上） */
.ba-band__badge33 {
  position: absolute;
  right: 4cqw;
  top: 0;
  width: 8.8cqw;          /* ≒100px（円は正円） */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--ba-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  line-height: 1.15;
}

.ba-band__badge33-sm {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 1.15cqw;     /* ≒13px */
  letter-spacing: -0.02em;
}

.ba-band__badge33-big {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1.95cqw;     /* ≒23px */
  letter-spacing: -0.02em;
}

/* 滑らかな湯上がり感。（32/24px ミックス） */
.ba-band__sub {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 3.062cqw;    /* 32 / 1045 */
  letter-spacing: -0.05em;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
}

.ba-band__sub i {
  font-style: normal;
  font-size: 2.297cqw;    /* 24 / 1045 */
}

/* ミネラル入浴剤（48px） */
.ba-band__main {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 4.593cqw;    /* 48 / 1045 */
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin: 0 0 2.3cqw;
  white-space: nowrap;
}

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

/* 特長バッジ3つ（泡写真の円=画像 + テキスト=コード） */
.ba-band__badges {
  display: flex;
  gap: 1.2cqw;            /* ≒14px */
}

.ba-band__badge {
  position: relative;
  width: 11cqw;           /* ≒131px（Figma準拠） */
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ba-band__badge-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* PNG中央61.7%だけが円・周囲は透明余白のため、拡大して円を枠いっぱいに（Figma準拠） */
  transform: scale(1.55);
}

.ba-band__badge-label {
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 2.0cqw;      /* ≒24px（Figma強調語） */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ba-accent);
  text-align: center;
  white-space: nowrap;
}

/* 補助語（「たっぷり」等）は一段小さく */
.ba-band__badge-label small {
  font-size: 1.4cqw;      /* ≒17px */
}

/* バスルーム写真 */
.ba-band__photo {
  flex: 1 1 auto;
  min-width: 0;
  width: 48cqw;
  height: auto;
  border-radius: 8px;
}

/* ===========================
   2. キャップ1杯で、お風呂が生まれ変わる。（写真帯 + カード）
   =========================== */
.ba-feature {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
}

.ba-feature__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/images/products/bath/feature-bg.png') center / cover no-repeat;
}

/* 上端の白フェード。写真に焼き込まれた水平線（タイル目地≒18% / 照明棚≒33%）対策：
   ・上の白セクションとの境界を馴染ませる
   ・目地(18%付近)は十分な不透明度で覆って線を消す
   ・照明棚(33%)には被せない＝27%で0まで減衰しきる（棚に被せると棚の上が白くなり逆に線が出るため）
   下端フェードはFigmaに無いので付けない。 */
.ba-feature__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 7%,
    rgba(255, 255, 255, 0.72) 13%,
    rgba(255, 255, 255, 0.5) 18%,
    rgba(255, 255, 255, 0.26) 23%,
    rgba(255, 255, 255, 0) 27%
  );
}

.ba-feature > .content-wrap {
  position: relative;
  z-index: 1;
}

/* Figma にはカード塗りが無く、テキストは写真の上に直接乗る */
.ba-feature__card {
  max-width: 690px;
  margin: 0 auto;
  text-align: center;
}

.ba-feature__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.05em;
  line-height: 1.5;
  color: var(--ba-ink);
  margin: 0 0 18px;
}

/* Figma: 1行目「キャップ1杯で、」は24px（本体32pxの0.75em） */
.ba-feature__title-sm {
  font-size: 0.75em;
}

/* 段落と表は同じ最大幅(≒段落の最長行)で中央寄せし、両端を揃える */
.ba-feature__desc {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 2;
  letter-spacing: -0.05em;
  color: #4c4c4c;
  max-width: 496px;
  margin: 0 auto 28px;
}

/* スペック表（用途・使用量・使用方法・成分）。段落と同じ幅・中央寄せで両端を揃える */
.ba-feature__table {
  max-width: 496px;
  margin: 0 auto;
  text-align: left;
  border-top: 1px solid #d3dbe4;
}

.ba-feature__row {
  display: flex;
  gap: 24px;
  padding: 14px 0;   /* 左右パディング0＝表テキストの両端を段落テキストと面一に */
  border-bottom: 1px solid #d3dbe4;
}

.ba-feature__row dt {
  flex: 0 0 96px;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.05em;
  color: var(--ba-accent);
}

.ba-feature__row dd {
  margin: 0;
  min-width: 0;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.05em;
  color: #4c4c4c;
}

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

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

  .ba-band__stage {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 0 40px;
  }

  /* この商品は縦積みでもテキストグループはデスクトップ同様の左寄せ。
     かつテキスト群の両端を下の写真の両端と揃える（幅を写真と同じ min(800px,88%) に） */
  .ba-band__copy {
    flex: 0 0 auto;
    width: min(800px, 88%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .ba-band__en { font-size: 24px; margin-bottom: 6px; }
  /* badge33 は縦積みでも右上に据える（左寄せテキストの流れを崩さない） */
  .ba-band__badge33 { right: 0; top: 0; width: 84px; margin: 0; }
  .ba-band__badge33-sm { font-size: 11px; }
  .ba-band__badge33-big { font-size: 19px; }
  .ba-band__sub { font-size: 24px; }
  .ba-band__sub i { font-size: 18px; }
  .ba-band__main { font-size: 36px; margin-bottom: 16px; }

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

  /* 円は写真幅（=copy幅）に収まるよう上限つき％で縮む。3つで overflow しない。
     width:100% で % の基準を copy 幅に固定（flex-start だと内容幅基準になり円が重なるため） */
  .ba-band__badges { width: 100%; gap: min(14px, 2.5%); }
  .ba-band__badge { width: min(118px, 30%); flex: 0 0 auto; }
  .ba-band__badge-label { font-size: 20px; }
  .ba-band__badge-label small { font-size: 14px; }

  .ba-band__photo {
    flex: 0 0 auto;
    width: min(800px, 88%);
  }

  .ba-feature { padding: 72px 0; }
  .ba-feature__title { font-size: 26px; }
}

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

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

  .ba-band__sub { font-size: 19px; }
  .ba-band__sub i { font-size: 15px; }
  .ba-band__main { font-size: 28px; }
  .ba-band__desc { font-size: 15px; }

  .ba-band__badge { width: min(96px, 30%); }
  .ba-band__badge-label { font-size: 16px; }
  .ba-band__badge-label small { font-size: 11px; }
  .ba-band__badge33 { width: 76px; }
  .ba-band__badge33-sm { font-size: 10px; }
  .ba-band__badge33-big { font-size: 17px; }

  .ba-feature { padding: 56px 0; }
  .ba-feature__title { font-size: 21px; }
  .ba-feature__desc { font-size: 14px; }

  /* SPでもデスクトップ同様 dt|dd を1行に保つ（縦積みにしない） */
  .ba-feature__row {
    gap: 14px;
    padding: 12px 0;
  }

  .ba-feature__row dt { flex: 0 0 76px; }
}