/* ===========================
   ライフスタイル帯コンポーネント（朝夜のお手入れに）
   背景画像 + モデル写真 + コピー
   構図（コピー＋モデル）を1つのグループとして扱い、外枠は成分セクションと同じ
   content-wrap（max1320 / 左右padding60、実効1200px）に合わせる → 構図の両端が成分カードの両端と揃う。
   構図幅より狭い画面では内部を丸ごと比率キープで縮小（cqw基準）。1100pxで縦積みへ切替
   （サイト標準ブレイクポイント。ヘッダー等が1100pxでタブレット表示に切り替わるのに合わせる）。
   フォント（Noto Serif JP / Zen Kaku Gothic Antique）はページ head の <link> で読み込む。
   利用: <section class="lifestyle-band"> ... </section>
   =========================== */
.lifestyle-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* 背景画像（フル幅）＋下部の白フェード */
.lifestyle-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/assets/images/products/moist/band-bg.png') center / cover no-repeat;
}

/* 白グラデーション（レイヤー: テキスト > グラデ > 写真 > 背景）。
   写真(__model)の前面・テキスト(__copy)の背面に置くため、両者と同じ重なり文脈である
   __stage の子（::after）として z-index:2 に配置する。position:absolute の包含ブロックは
   最寄りの positioned 祖先＝section なので inset:0 でフル幅（背景と同じ範囲）を覆う。 */
.lifestyle-band__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* 下端は次セクション(美容成分)の上端色 #fdfdfd に合わせて継ぎ目(線)を消す */
  background: linear-gradient(to bottom, rgba(253, 253, 253, 0) 55%, #fdfdfd 100%);
}

/* 構図の外枠＝成分セクションと同じ content-wrap 相当（max1320 / padding60、実効1200px）。
   これにより構図の左右端が成分カードの左右端とピタリ揃う。
   container-type で内部を cqw スケール可能に（cqw は子孫がこのコンテナ幅に対して解決するため、
   flex行は子要素の __stage に分離する） */
.lifestyle-band__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
  container-type: inline-size;
}

/* 構図本体（コピー｜モデルの横並び）。gap/幅/フォントすべて cqw のためコンテナ幅に対して
   常に一定比率 → コンテナ(=成分カード幅)いっぱいに広がり、狭くなると丸ごと比率キープで縮小 */
.lifestyle-band__stage {
  display: flex;
  align-items: center;
  gap: 5.832cqw;        /* Figma 間隔 61 / 構図1046 */
  width: 100%;
}

.lifestyle-band__copy {
  flex: 0 0 43.212cqw;  /* Figma コピー幅 452 / 1046 */
  min-width: 0;
  position: relative;
  z-index: 3;           /* 最前面（グラデより前） */
}

/* 見出し「朝夜のお手入れに」＝ 朝夜(Figma書き出しSVG画像) + のお手入れに(テキスト) */
.lifestyle-band__title {
  display: flex;
  align-items: flex-end;
  gap: 0.382cqw;        /* 4px */
  /* margin-left -8px 相当: SVG内で朝の円が左端から約8px内側にあるぶんを打ち消し、
     円の左端を説明文の左端に揃える */
  margin: 0 0 2.294cqw -0.765cqw;   /* 下24px / 左-8px */
  color: #4c4c4c;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}

/* 朝夜（SVG画像） */
.lifestyle-band__title-cn {
  display: block;
  height: 6.883cqw;     /* 72px */
  width: auto;
  flex-shrink: 0;
}

/* のお手入れに（「お手入れに」=48px / 先頭の「の」だけ 36px） */
.lifestyle-band__title-rest {
  font-size: 4.589cqw;  /* 48px */
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.765cqw;   /* 8px（朝夜画像のベースラインに合わせる微調整） */
}

.lifestyle-band__title-rest::first-letter {
  font-size: 3.442cqw;  /* 36px */
}

/* 説明文（Figma: Zen Kaku Gothic Antique Medium 20px / tracking -1px） */
.lifestyle-band__desc {
  color: #4c4c4c;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 1.912cqw;  /* 20px */
  line-height: 1.75;    /* 本文の行間は全幅で1.75に統一（デスクトップ含む） */
  letter-spacing: -0.05em;
}

/* モデル写真（構図の右側）。幅は構図比率で追従、高さは自然比（正方形1254×1254） */
.lifestyle-band__model {
  flex: 0 0 50.956cqw;  /* Figma モデル幅 533 / 1046 */
  min-width: 0;         /* flexの min-width:auto(画像実寸)で縮小拒否されるのを防ぐ */
  height: auto;
  align-self: flex-end;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  position: relative;
  z-index: 1;           /* グラデ(z2)より背面・背景(__bg z-2)より前面 */
}

/* ===========================
   レスポンシブ: 1100px以下は縦積み（中央揃え・大きく）※サイト標準ブレイクポイント
   構図の比率縮小はここで解除し、コピー→モデルの縦並びに切り替える。
   外枠 padding は content-wrap のまま維持するので、テキスト/画像グループの両端は
   引き続き成分カードの両端と揃う
   =========================== */
@media (max-width: 1100px) {
  .lifestyle-band {
    padding: 64px 0 0;
  }

  .lifestyle-band__inner {
    container-type: normal;   /* 縦積みでは比率スケール不要 */
  }

  .lifestyle-band__stage {
    flex-direction: column;
    align-items: center;
    gap: 4px;                 /* テキストと画像を近づけて一体感を出す */
  }

  /* 縦積みでは本文を中央揃えに。幅はコンテナ全幅（＝成分カード幅）を保つ */
  .lifestyle-band__copy {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }

  .lifestyle-band__title {
    justify-content: center;   /* 朝夜画像＋テキストをまとめて中央に */
    gap: 6px;
    margin: 0 0 20px;          /* 左揃え用の -8px オフセットは中央では不要 */
  }

  .lifestyle-band__title-cn { height: 64px; }
  .lifestyle-band__title-rest { font-size: 40px; margin-bottom: 8px; }
  .lifestyle-band__title-rest::first-letter { font-size: 30px; }

  .lifestyle-band__desc {
    font-size: 17px;
    line-height: 1.75;   /* 全幅で1.75に統一 */
  }

  /* モデルはコピー直下に中央・大きく配置（一体感） */
  .lifestyle-band__model {
    flex: 0 0 auto;
    align-self: center;
    width: min(560px, 60%);
    margin-top: 8px;
  }

  .lifestyle-band__stage::after {
    /* グラデを写真の前面に移したので、上端は透明にして写真の顔を鮮明に保ち、
       下端（胴〜足元）だけ #fdfdfd へフェードさせる（デスクトップと同じ考え方） */
    background: linear-gradient(to bottom, rgba(253, 253, 253, 0) 74%, #fdfdfd 97%);
  }
}

/* スマホ: content-wrap に合わせて padding を 20 に（成分カードと両端を揃え続ける）＋
   文字を一回り縮小 */
@media (max-width: 767px) {
  .lifestyle-band__inner {
    padding: 0 20px;
  }

  /* SP のグルーピング調整: タイトル＋本文は1グループ（詰め気味）、画像は別グループ。
     タイトル→本文を少し広げ、本文→画像はそれ以上に広げて区切りを付ける（開けすぎない） */
  .lifestyle-band__title {
    margin-bottom: 26px;   /* タイトル→本文（20→26） */
  }

  .lifestyle-band__title-cn { height: 50px; }
  .lifestyle-band__title-rest { font-size: 32px; margin-bottom: 6px; }
  .lifestyle-band__title-rest::first-letter { font-size: 24px; }

  .lifestyle-band__desc {
    font-size: 14px;
    line-height: 1.75;   /* 全幅で1.75に統一 */
  }

  .lifestyle-band__model {
    width: min(380px, 78%);
    margin-top: 36px;      /* 本文→画像（stage gap 4px と合わせ約40px）。グループ間を広めに */
  }
}