/* ===========================
   フェイスマスクシート（化粧品）商品詳細ページ 個別スタイル
   - 共通グルー（deco-heading・セクション余白・cosmetic変数）は
     product-detail-moist.css を共用し、本ファイルは後読みで
     本商品固有の帯・使用シーン・成分グリッド・ピンクテーマだけを持つ
   - Figma: node 875:72020（Water Life Series 24 フェイスマスクシート）
     cqw の構図基準幅は Figma 実測の 1046px（実描画は content-wrap 実効1200px
     基準に比率スケールする）
   - 使用シーンカードは energy（enjoy-card）と同型、成分グリッドは
     cleansing（cl-ing-grid）と同型（fk- で複製）
   =========================== */

.page-product-detail--facemask {
  --fk-pink: #ffd3d5;
  --fk-accent: #c76b71;
}

/* 見出し英字とピルをピンク系に上書き */
.page-product-detail--facemask .deco-heading__en { color: var(--fk-pink); }
.page-product-detail--facemask .deco-heading__ja--pill { background: rgba(255, 211, 213, 0.5); }

/* 「美容成分」見出しを全ページ共通の Figma 準拠タイポに（Zen Kaku Gothic Antique
   Regular 42px / letter-spacing 0.02em）。このページは独自 .fk-pink-section なので
   共有 ingredient-grid.css（.ingredient-section スコープ）が効かず明示指定が必要（DESIGN.md §4） */
.fk-pink-section .deco-heading__ja {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 400;
  font-size: 42px;
  letter-spacing: 0.02em;
}

/* 「美容成分」見出しの区切り線を全ページ共通の長さ・色に（Figma ≒350px・DESIGN.md §4）。
   独自 .fk-pink-section なので共有スコープが効かず明示指定が必要 */
.fk-pink-section .deco-heading__line {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  background: #000000;
}

/* ===========================
   1. 帯「うるおいマスク」（商品オリジナル実装）
   ピンク写真背景 + コピー(444) + マスク着用写真構図
   =========================== */
.fk-band {
  position: relative;
  overflow: hidden;
}

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

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

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

/* 構図本体（コピー444 ｜ ビジュアル488、gap114。基準幅 1046） */
.fk-band__stage {
  display: flex;
  align-items: center;
  gap: 10.9cqw;           /* 114 / 1046 */
  width: 100%;
  padding: 3.4cqw 0;
}

.fk-band__copy {
  flex: 0 0 42.45cqw;     /* 444 / 1046 */
  min-width: 0;
  position: relative;
  z-index: 2;
  color: #4c4c4c;
}

/* FACE MASK SHEET = 金グラデ（A1明朝の代替に Noto Serif JP） */
.fk-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;
}

/* 濃縮美容成分を丸ごと1本使用（32/24/42px ミックス） */
.fk-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;
  color: #4c4c4c;
  margin: 0;
  white-space: nowrap;
}

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

.fk-band__sub em {
  font-style: normal;
  font-size: 4.015cqw;    /* 42 / 1046 */
}

/* うるおいマスク（48px） */
.fk-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;
  color: #4c4c4c;
  margin: 0 0 2.3cqw;
  white-space: nowrap;
}

.fk-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;
  color: #4c4c4c;
  margin: 0 0 3.8cqw;     /* 40 / 1046 */
}

/* 特長バッジ（ピンク円 137px + 3サイズミックスの文字） */
.fk-band__badges {
  display: flex;
  gap: 2cqw;              /* 21 / 1046 */
}

.fk-band__badge {
  position: relative;
  width: 13.1cqw;         /* 137 / 1046 */
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fk-band__badge-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fk-band__badge-label {
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1.626cqw;    /* 17 / 1046 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fk-accent);
  text-align: center;
  white-space: nowrap;
}

.fk-band__badge-label em {
  font-style: normal;
  font-size: 2.103cqw;    /* 22 / 1046 */
}

.fk-band__badge-label i {
  font-style: normal;
  font-size: 1.147cqw;    /* 12 / 1046 */
}

/* ビジュアル（パック写真 + マスク着用写真） */
.fk-band__visual {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* 箱＋マスクを一体化した1枚画像（自然比 1016/1120）。旧2枚重ね＋紺 box-shadow は廃止 */
.fk-band__visual-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================
   2. 使用シーン + 成分グリッド（ピンクグラデ帯）
   =========================== */
.fk-pink-section {
  background: linear-gradient(to bottom, #ffefef 0%, #fddbdd 100%);
  padding: 0 0 56px;   /* 成分一覧→ご使用方法の間隔を詰める（旧100px。howto上56pxと合わせ計112px） */
}

/* 使用シーン3カード（energy enjoy-card と同型・ピンク枠） */
.fk-scene-grid {
  display: flex;
  gap: 18px;
  justify-content: center;
  max-width: 870px;
  margin: 0 auto 96px;
  list-style: none;
  padding: 0;
}

.fk-scene-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fk-scene-card__media {
  width: 100%;
  aspect-ratio: 278 / 297;
  border: 3px solid var(--fk-pink);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}

.fk-scene-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fk-scene-card__img--morning { object-position: 62% top; }
.fk-scene-card__img--bath    { object-position: center top; }

.fk-scene-card__title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #4c4c4c;
  margin: 15px 0 0;
}

.fk-scene-card__desc {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #4c4c4c;
  margin: 15px 0 0;
}

/* 成分グリッド（11項目・3カラム） */
.fk-ing-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 43px 35px;
  padding: 0;
  margin: 0;
}

.fk-ing-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.fk-ing-item__icon {
  flex: none;
  width: 91px;
  height: 89px;
  object-fit: cover;
}

.fk-ing-item__body {
  min-width: 0;
  padding-top: 6px;
}

.fk-ing-item__name {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.05em;
  line-height: 1.5;
  color: #4c4c4c;
  margin: 0 0 9px;
}

.fk-ing-item__desc {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #4c4c4c;
  margin: 0;
}

/* 成分一覧（白カード） */
.fk-list {
  margin-top: 43px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 31px 42px 44px;
}

.fk-list__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 32px;
  text-align: center;
  line-height: 1.5;
  background: linear-gradient(to bottom, #dccbaa, #916c22);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #a8863f;
  margin: 0 0 8px;
}

.fk-list__text {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #4c4c4c;
  margin: 0;
  word-break: break-word;
}

/* ===========================
   3. ご使用方法（青い水面背景 + 白カード）
   =========================== */
.fk-howto-section {
  position: relative;
  overflow: hidden;
  padding: 56px 0 96px;   /* 上を詰めて成分一覧との間隔を短縮（下96pxはSTEPとの間隔で維持） */
}

/* Figma: 淡いピンクの水紋(875:72021) の上に、上半分だけピンク→透明の縦グラデ(Rectangle 71
   = linear-gradient(180.86deg, #fddcde 2.86%, transparent 97.14%)・上337/666≒50%)を重ねる。
   グラデを先に列挙して水紋画像の手前に配置する */
.fk-howto-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, #fddcde 0%, rgba(255, 255, 255, 0) 50%),
    url('../assets/images/products/facemask/howto-bg.png') center / cover no-repeat;
}

.fk-howto-section > .content-wrap {
  position: relative;
  z-index: 1;
}

.fk-howto-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 40px 84px 40px 88px;
}

.page-product-detail--facemask .fk-howto-card .deco-heading {
  margin-bottom: 30px;
}

/* 番号(01/02/03)はイラストに焼き込んだ1枚画像で表示（DESIGN.md §4）。
   位置指定は矢印(::after)のために relative のみ残す */
.page-product-detail--facemask .howto-step {
  position: relative;
}

/* 共有 howto-steps.css の既定（aspect-ratio:681/864・object-fit:contain）を解除し、
   各画像の自然比・列幅いっぱい・上揃えで表示する（DESIGN.md §4 必須手順）。
   3枚目のみ 765×864(=0.885) と横長で、既定の 0.788 箱では contain の上下余白で
   不揃いになるため、自然比表示に切り替える */
.page-product-detail--facemask .howto-step__img {
  aspect-ratio: auto;
}

.page-product-detail--facemask .howto-step__img img {
  height: auto;
}

/* ステップ間の右向き矢印 */
.fk-howto-step--arrow::after {
  content: '';
  position: absolute;
  right: calc(-24px - 2%);
  top: 40%;
  width: 33px;
  height: 29px;
  background: url('../assets/images/products/facemask/howto-arrow.svg') center / contain no-repeat;
  transform: rotate(90deg);
}

/* ===========================
   4. お手入れステップ: アイコンを img で供給
   =========================== */
.page-product-detail--facemask .routine-row__icon img {
  display: block;
  width: 100%;
  height: auto;
}

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

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

  /* 縦積み時は背景を左寄りに見せ、右寄りの大きな球が画面右端で大きく切れないようにする
     （SP幅では球が cover 拡大で viewport より大きくなるため、焦点を左へずらして球を右端へ逃がす） */
  .fk-band__bg {
    background-position: 28% center;
  }

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

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

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

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

  .fk-band__badges { gap: 16px; }
  .fk-band__badge { width: 120px; }
  .fk-band__badge-label { font-size: 15px; }
  .fk-band__badge-label em { font-size: 19px; }
  .fk-band__badge-label i { font-size: 11px; }

  .fk-band__visual {
    flex: 0 0 auto;
    width: min(488px, 84%);
    margin-top: 12px;
  }

  /* 使用シーン3枚は 768〜1100 では3列横並びを維持（ご使用方法 howto-steps と同じ挙動）。
     縦積みは SP(≤767) から。3枚が窮屈にならないよう gap と下余白のみ詰める */
  .fk-scene-grid {
    gap: 16px;
    margin-bottom: 72px;
  }

  /* 成分: 2カラム */
  .fk-ing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .fk-howto-card { padding: 32px 32px 40px; }

  /* 縦積みでは横向き矢印を非表示 */
  .fk-howto-step--arrow::after { display: none; }
}

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

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

  .fk-band__en { font-size: 18px; }
  .fk-band__sub { font-size: 19px; }
  .fk-band__sub i { font-size: 15px; }
  .fk-band__sub em { font-size: 24px; }
  .fk-band__main { font-size: 30px; }
  .fk-band__desc { font-size: 15px; }

  .fk-band__badge { width: 104px; }
  .fk-band__badge-label { font-size: 13px; }
  .fk-band__badge-label em { font-size: 17px; }
  .fk-band__badge-label i { font-size: 10px; }

  .fk-pink-section { padding-bottom: 48px; }   /* SP も成分一覧→ご使用方法を詰める */

  /* 使用シーン3枚は SP で初めて縦積み（ご使用方法 howto-steps と同じく ≤767 で1列） */
  .fk-scene-grid {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .fk-scene-card { width: min(278px, 80vw); }

  /* 成分: 1カラム */
  .fk-ing-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 420px;
    margin: 0 auto;
  }

  /* 「美容成分」見出しは SP で 30px・区切り線はグリッド全幅（max-width:none・DESIGN.md §107） */
  .fk-pink-section .deco-heading__ja { font-size: 30px; }
  .fk-pink-section .deco-heading__line { max-width: none; }

  .fk-ing-item__icon { width: 72px; height: 70px; }
  .fk-ing-item__name { font-size: 18px; }

  .fk-list { padding: 20px 20px 24px; }
  .fk-list__title { font-size: 24px; }

  .fk-howto-section { padding: 44px 0 64px; }   /* SP: 上を詰める（下64はSTEPとの間隔で維持） */
  .fk-howto-card { padding: 24px 16px 32px; }
}