/* ===========================
   スキンウォッシュ（化粧品）商品詳細ページ 個別スタイル
   - 共通グルー（deco-heading・セクション余白・cosmetic変数）は
     product-detail-moist.css を共用し、本ファイルは後読みで
     スキンウォッシュ固有の帯・使用方法拡張・微調整だけを持つ
   - Figma: node 875:57548（Water Life Series 3 スキンウォッシュ100g）
     cqw の構図基準幅は Figma 実測の 1046px（実描画は content-wrap 実効1200px
     基準に比率スケールする）
   =========================== */

/* ===========================
   1. 帯「美容成分、たっぷり。」（商品オリジナル実装）
   白ファブリック写真背景 + コピー(447) + 石けん写真(477) = 1000 / 1046
   =========================== */
.sw-band {
  position: relative;
  overflow: hidden;
}

/* 背景: ファブリック写真 + 淡青オーバーレイ + 下端の白フェード（Figma準拠） */
.sw-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(237, 247, 251, 0.3), rgba(237, 247, 251, 0.3)),
    url('../assets/images/products/skinwash/band-bg.png') center bottom / cover no-repeat;
}

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

/* 構図の外枠＝content-wrap 相当（max1320 / padding60、実効1200px）。
   container-type で内部を cqw スケール可能に（moist lifestyle-band と同じ考え方） */
.sw-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;
}

/* 構図本体。基準幅 1046px に対する cqw 比率（copy 447 / gap 76 / photo 477） */
.sw-band__stage {
  display: flex;
  align-items: center;
  /* 写真は右端固定・コピーが余白を吸収して幅いっぱいに広がる（space-between だと
     写真とコピーの間に余白が溜まり本文が不要に改行されるため廃止）。写真右端は
     引き続き帯右端＝下の成分カード右端に揃う */
  gap: 3cqw;              /* 写真とコピーの最小間隔（旧76pxの余白過多を解消。本文1行目を中desktop域でも1行に収める幅を確保） */
  width: 100%;
  padding: 4.2cqw 0;      /* 帯上端→コピー（Figma: 957→1001 ≒ 44px） */
}

.sw-band__copy {
  flex: 1 1 auto;         /* 余った横幅をすべてコピーに回す（旧: 0 0 42.734cqw 固定447px）。
                             本文1行目が写真との余白を使って1行に収まる */
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* 見出し: 上段 32/24px ミックス、下段 48px（Noto Serif JP・#4c4c4c） */
.sw-band__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  color: #4c4c4c;
  margin: 0 0 2.3cqw;     /* 24 / 1046 */
}

.sw-band__title-sub {
  display: block;
  font-size: 27.5px;      /* 最大幅(1200px基準)の見た目で固定（旧: 2.294cqw = 24/1046） */
  letter-spacing: -0.05em;
  line-height: 1.5;
  white-space: nowrap;    /* Figma: コピー枠447pxを超えて1行で表示 */
}

.sw-band__title-sub em {
  font-style: normal;
  font-size: 36.7px;      /* 固定（旧: 3.059cqw = 32/1046） */
}

.sw-band__title-main {
  display: block;
  font-size: 55px;        /* 固定（旧: 4.589cqw = 48/1046） */
  letter-spacing: -0.05em;
  line-height: 1.5;
  white-space: nowrap;    /* Figma: コピー枠447pxを超えて1行で表示 */
}

.sw-band__desc {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 23px;        /* 固定（旧: 1.912cqw = 20/1046） */
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #4c4c4c;
}

/* 石けん写真: 下端をフェードで背景に溶かす（Figma のマスクを CSS で再現） */
.sw-band__photo {
  flex: 0 0 45.602cqw;    /* 477 / 1046 */
  width: 45.602cqw;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

/* ===========================
   2. 成分セクションの微調整
   =========================== */
/* 背景グラデをスキンウォッシュの実値に（moist: →#e8f1fb / skinwash: →#eef4f8 で30%から均一） */
.page-product-detail--skinwash .ingredient-section {
  background: linear-gradient(to bottom, #fdfdfd 0%, #eef4f8 30%, #eef4f8 100%);
}

/* その他カードの商品写真（Group640: 箱＋泡の合成画像1枚。PC/SP共通）。
   画像は立体感のある商品レンダリングで影は不要。CSSの drop-shadow は付けない
   （moistのボトル用の影を流用しないこと。画像自体にも影は焼き込まれていない） */
.sw-other-visual .ingredient-other__splash {
  z-index: 1;
}

/* ===========================
   3. ご使用方法（番号＋イラスト＋バッジを焼き込んだ1枚画像で実装）
   =========================== */
/* 各ステップは「番号＋イラスト（02はさらに"全身にも!"バッジ）」を焼き込んだ1枚画像。
   旧実装の番号テキスト・共有イラストのクロップ・CSSバッジは廃止し、
   画像を列幅いっぱいに自然比・上揃えで表示する */
.page-product-detail--skinwash .howto-step__img {
  aspect-ratio: auto;   /* 共有 howto-steps.css の 681/864 を解除（画像の自然比で高さを決める） */
}

.page-product-detail--skinwash .howto-step__img img {
  height: auto;         /* 共有の height:100% を解除。width:100% は継承し列幅いっぱい */
}

.page-product-detail--skinwash .howto-step__title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.05em;
  line-height: 1.5;
  color: #4c4c4c;
  margin: 32px 0 0;
}

/* タイトルの下のキャプションは 14px（コンポーネント既定 20px を上書き） */
.page-product-detail--skinwash .howto-step__caption {
  font-size: 14px;
  letter-spacing: -0.05em;
  margin-top: 9px;
}

/* ご使用方法を上の美容成分グリッドと同じ content-wrap 全幅に合わせる。
   共有 howto-steps.css の中央868px（小PCで720pxへ縮む段階）を skinwash に限り撤廃。
   768px以上のみ全幅化し、SP(≤767)は component の1カラム中央寄せ(max-width:300)を維持 */
@media (min-width: 768px) {
  .page-product-detail--skinwash .howto-steps { max-width: none; }
  /* 見出し帯(pill)も全幅化。共有 deco-heading__ja--pill の max-width:868px を解除し、
     ステップグリッド／美容成分グリッドの見出し(いずれも content-wrap 全幅)と左右端を揃える */
  .page-product-detail--skinwash .howto-section .deco-heading__ja--pill { max-width: none; }
}

/* ===========================
   4. お手入れステップ: アイコンを img で供給
   （care-routine.css は inline svg 前提のため img 版のサイズ指定を追加）
   =========================== */
.page-product-detail--skinwash .routine-row__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================
   レスポンシブ（帯）
   =========================== */
@media (max-width: 1100px) {
  /* 帯: 縦積みに切替（moist lifestyle-band と同じ考え方） */
  .sw-band__inner {
    container-type: normal;
  }

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

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

  .sw-band__copy {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }

  .sw-band__title { margin-bottom: 16px; }
  .sw-band__title-sub { font-size: 22px; }
  .sw-band__title-sub em { font-size: 29px; }
  .sw-band__title-main { font-size: 40px; }

  .sw-band__desc {
    font-size: 17px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
  }

  .sw-band__photo {
    flex: 0 0 auto;
    width: min(480px, 78%);
    margin-top: 8px;
  }
}

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

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

  .sw-band__title-sub { font-size: 18px; }
  .sw-band__title-sub em { font-size: 24px; }
  .sw-band__title-main { font-size: 32px; }
  .sw-band__desc { font-size: 15px; }

  .page-product-detail--skinwash .howto-step__caption { font-size: 13px; }
}