/* ===========================
   Energy Life EXTRA（ドリンク）商品詳細ページ
   - 既存 product-detail.css を土台に、ドリンク用セクション
     （帯・エキス3カラム・作り方・飲用タイミング）を定義する
   - deco-heading は moist（product-detail-moist.css）と同型のコピー。
     商品詳細ページが増えたらコンポーネントCSSへの抽出を検討
   - Figma: node 875:73658（ energy life）。構図基準幅は 1047px
   =========================== */

/* ドリンクページのテーマ変数（緑系） */
.page-product-detail--drink {
  --drink-ink: #4c4c4c;        /* 本文 */
  --drink-sub: #555;           /* 和文見出し */
  --drink-en: #d4e8cc;         /* 英字見出し・記号 */
  --drink-pill: rgba(158, 197, 142, 0.5);   /* 見出し帯 */
  --drink-bg-soft: #f0fbe8;    /* 緑グラデの濃い側 */
  --gold-from: #dccbaa;        /* 金グラデ（moist と共通） */
  --gold-to: #916c22;
}

/* ===========================
   共通装飾見出し（英字の淡い大文字 + 和字）
   moist の deco-heading と同型（色はテーマ変数で緑に）
   =========================== */
.deco-heading {
  text-align: center;
  margin-bottom: 56px;
}

.deco-heading__en {
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 55px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--drink-en, #d4e8cc);
  user-select: none;
}

.deco-heading__ja-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: -18px;
}

.deco-heading__ja {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 30px;
  color: var(--drink-sub, #555);
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.05em;
}

/* WHEN TO ENJOY の和見出しは帯なしの 36px（Figma: tracking 1.8px） */
.deco-heading__ja--lg {
  font-size: 36px;
}

/* HOW TO USE の和見出しは緑の帯 + 白文字（Figma: rgba(158,197,142,0.5)・868px・64px） */
.deco-heading__ja--pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 868px;
  min-height: 64px;
  padding: 0 24px;
  background: var(--drink-pill);
  border-radius: 0;
  font-size: 36px;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-top: 5px;   /* 英字の下側が帯に重なる量の調整（moist と同じ） */
}

/* ===========================
   1. Energy Life EXTRAとは（帯）
   moist lifestyle-band と同じ cqw 比率スケール構図。
   構図基準幅 1047px（コピー513 + ビジュアル534）
   =========================== */
.energy-band {
  position: relative;
  overflow: hidden;
}

/* 背景: 横方向グラデ（左 #fdfdfd → 右 #f0fbe8）+ 下端白フェード
   （植物モチーフはビジュアル合成画像 band-visual.png に焼き込み済み） */
.energy-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to right, #fdfdfd 0%, var(--drink-bg-soft) 100%);
}

/* 下端の白フェード（次セクションの上端色 #fdfdfd へ溶かす） */
.energy-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(253, 253, 253, 0) 55%, #fdfdfd 100%);
}

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

/* 構図本体（コピー｜ビジュアルの横並び）。基準幅 1047px に対する cqw 比率 */
.energy-band__stage {
  display: flex;
  align-items: center;
  width: 100%;
}

.energy-band__copy {
  flex: 0 0 49.0cqw;    /* Figma コピー幅 513 / 1047 */
  min-width: 0;
  position: relative;
  z-index: 2;
  padding: 6.0cqw 0;    /* 帯の上下余白（Figma: 上下ともコピーの外に余白） */
}

/* 「Energy Life EXTRAとは」= 金グラデ文字
   Figma は A-OTF A1明朝（Web利用不可）のため Noto Serif JP で代替 */
.energy-band__lead {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 3.056cqw;          /* 32 / 1047 */
  line-height: 1.5;
  background: linear-gradient(to bottom, var(--gold-from), var(--gold-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1.815cqw;      /* 19 / 1047 */
}

/* 見出し: 植物の力と海藻の力で 内側からすっきり軽やかに。
   em=48px / i(の)=40px / 地=36px の文字サイズミックス（Figma 準拠） */
.energy-band__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  color: var(--drink-ink);
  font-size: 3.438cqw;          /* 36 / 1047 */
  line-height: 1.5;
  margin: 0 0 2.77cqw;          /* 29 / 1047 */
}

.energy-band__title-line {
  display: block;
}

.energy-band__title em {
  font-style: normal;
  font-size: 4.585cqw;          /* 48 / 1047 */
}

.energy-band__title i {
  font-style: normal;
  font-size: 3.82cqw;           /* 40 / 1047 */
}

.energy-band__desc {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 1.719cqw;          /* 18 / 1047 */
  line-height: 1.7;
  letter-spacing: -0.05em;
  color: var(--drink-ink);
  max-width: 44.5cqw;           /* Figma 本文幅 466 / 1047 */
}

/* ビジュアル（モデル＋ボトル＋草花の1枚合成画像） */
.energy-band__visual {
  flex: 0 0 51.0cqw;            /* 534 / 1047 */
  position: relative;
  z-index: 1;
  align-self: flex-end;
  height: 55.0cqw;              /* 576 / 1047 */
}

/* 合成画像は Figma 帯ビジュアル領域と同比（1068×1152 ≒ 534×576）。ボックスにフィット */
.energy-band__visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* ===========================
   2. エキス3カラム
   =========================== */
.ekisu-section {
  /* 帯から連続する緑グラデ（Figma Rectangle 71: 上 #fdfdfd → 下 #f0fbe8） */
  background: linear-gradient(to bottom, #fdfdfd 0%, var(--drink-bg-soft) 100%);
  padding: 30px 0 60px;         /* Figma: bg上端→カード 30 / カード→bg下端 60 */
}

.ekisu-grid {
  display: flex;
  gap: 21px;
  align-items: stretch;
}

.ekisu-card {
  position: relative;
  flex: 1 1 0;
  background: rgba(253, 253, 253, 0.8);
  border-radius: 15px;
  padding: 68px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 番号 01/02/03: 金グラデ＋斜線を焼き込んだ SVG 画像（moist と同じ方式・DESIGN.md §5）。
   カード左上に配置。実寸は各SVG（66/72/71 × 58）を width/height 属性で保持 */
.ekisu-card__num-img {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 58px;
  width: auto;
  user-select: none;
}

/* 見出し（金グラデ・明朝） */
.ekisu-card__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.5;
  background: linear-gradient(to bottom, var(--gold-from), var(--gold-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}

.ekisu-card__title--sm {
  letter-spacing: -0.04em;
}

.ekisu-card__sub {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  background: linear-gradient(to bottom, var(--gold-from), var(--gold-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: -6px 0 0;
}

.ekisu-card__circle {
  width: 202px;
  height: 202px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 11px;
}

.ekisu-card__copy {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--drink-ink);
  margin: 24px 0 0;
}

.ekisu-card__list {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--drink-ink);
  margin: 24px 0 0;
}

/* ===========================
   3. EXTRA水の作り方（HOW TO USE）
   =========================== */
.howto-section {
  background: #ffffff;
  padding: 50px 0 48px;
}

.mix-row {
  display: flex;
  align-items: flex-end;        /* 円の下端で揃える（ラベル有無の差を吸収） */
  justify-content: center;
  gap: 38px;
  max-width: 868px;
  margin: 0 auto;
}

.mix-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  flex: 0 1 206px;
  min-width: 0;
}

.mix-item__label {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--drink-ink);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

.mix-item__circle {
  position: relative;
  width: 100%;
  max-width: 206px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #f2f2f4;
  overflow: hidden;
}

.mix-item__img {
  position: absolute;
}

/* EXTRAボトル: 円のほぼ中央・下寄り（Figma: 95x177 at l55 t15 of 206） */
.mix-item__img--extra {
  left: 50%;
  bottom: 7%;
  height: 86%;
  width: auto;
  transform: translateX(-50%);
}

/* サーバー: 中央・上寄り（Figma: 99x189 at l53 t8） */
.mix-item__img--server {
  left: 50%;
  top: 4%;
  height: 92%;
  width: auto;
  transform: translateX(-50%);
}

/* グラス: 中央やや下・円の下端で見切れる（Figma: 114x178 at l58 t47） */
.mix-item__img--glass {
  left: 50%;
  top: 23%;
  height: 86%;
  width: auto;
  transform: translateX(-50%);
}

/* + と → の記号（円の縦中央に合わせる: 下端から円の半径ぶん持ち上げる） */
.mix-plus {
  font-family: 'M PLUS 1', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  color: var(--drink-en);
  flex: none;
  margin-bottom: calc((206px - 40px) / 2);
}

.mix-arrow {
  flex: none;
  width: 29px;
  height: 25px;
  margin-bottom: calc((206px - 25px) / 2);
}

.mix-caption {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--drink-ink);
  text-align: center;
  margin: 30px 0 0;
}

.mix-note {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--drink-ink);
  text-align: center;
  margin: 12px 0 0;
}

/* ===========================
   4. おすすめの飲用タイミング（WHEN TO ENJOY）
   =========================== */
.enjoy-section {
  background: #ffffff;
  /* Figma: HOW TO USE 下端 → WHEN TO ENJOY 見出しまで ≒80px（白→白なので詰める・§3）。
     上の howto-section の padding-bottom 48px と合算して 80px に合わせる */
  padding: 32px 0 104px;
}

.enjoy-section .deco-heading {
  margin-bottom: 20px;   /* Figma: 見出し→カード 20px */
}

.enjoy-grid {
  display: flex;
  gap: 18px;
  justify-content: center;
  max-width: 870px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

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

/* 枠付きカード（DESIGN.md §4）: 緑の枠線・角丸は Figma で焼き込んだ1枚画像を
   「枠線ごと」書き出して使う。CSS で border / border-radius を付け足さない
   （＝二重枠・角丸のズレを防ぐ）。書き出し実寸 834×891（=278/297）。 */
.enjoy-card__media {
  width: 100%;
  line-height: 0;   /* img 下の inline gap を除去 */
}

.enjoy-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 834 / 891;   /* 書き出し画像の実寸比。contain でレターボックスは出ない */
  object-fit: contain;
}

.enjoy-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: var(--drink-ink);
  margin: 41px 0 0;
}

.enjoy-card__desc {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--drink-ink);
  margin: 9px 0 0;
}

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 1100px) {
  .deco-heading__en { font-size: 46px; }
  .deco-heading__ja { font-size: 26px; }
  .deco-heading__ja--pill,
  .deco-heading__ja--lg { font-size: 30px; }

  /* 帯: 縦積みに切替（moist と同じ考え方） */
  .energy-band__inner {
    container-type: normal;
  }

  .energy-band {
    padding: 64px 0 0;
  }

  /* 縦積み時は帯背景を緑の縦グラデにする（上=淡い緑 → 下=やや濃い緑で階調を出す） */
  .energy-band__bg {
    background: linear-gradient(to bottom, #eaf6db 0%, #dcefc9 100%);
  }

  /* セクション間の白フェードは、デスクトップと同じ「背後（画像の下）」の
     .energy-band__bg::after（z-index:0）をそのまま使う。画像の"上"には重ねない
     ＝不透明なモデルは白飛びせず、画像の透明部分にだけ白が出て境目がぼける。
     （縦積み専用の上乗せveilは白飛びの原因になったため廃止） */

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

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

  .energy-band__lead { font-size: 26px; margin-bottom: 14px; }
  .energy-band__title { font-size: 28px; margin-bottom: 20px; }
  .energy-band__title em { font-size: 38px; }
  .energy-band__title i { font-size: 32px; }
  .energy-band__desc {
    font-size: 17px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
  }

  .energy-band__visual {
    flex: 0 0 auto;
    align-self: center;
    width: min(560px, 82%);
    aspect-ratio: 534 / 576;
    height: auto;
    margin-top: 8px;
  }

  /* エキス背景: 帯下端の白(#fdfdfd)を受け、上端は白→中間で緑を最も濃く→
     下端は淡い緑で次の白セクション(HOW TO USE)へなめらかに繋ぐ。
     セクション間は白いグラデ、本体は緑、というデスクトップと同じ考え方 */
  .ekisu-section {
    background: linear-gradient(to bottom, #fdfdfd 0%, #dcefc9 24%, #d2eab9 55%, #f4faec 100%);
  }

  /* エキス: 縦積み */
  .ekisu-grid {
    flex-direction: column;
    align-items: center;
  }

  .ekisu-card {
    width: 100%;
    max-width: 480px;
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  .deco-heading { margin-bottom: 40px; }
  .deco-heading__en { font-size: 34px; }
  .deco-heading__ja-wrap { gap: 12px; margin-top: -12px; }
  .deco-heading__ja { font-size: 22px; }
  .deco-heading__ja--pill,
  .deco-heading__ja--lg { font-size: 24px; }
  .deco-heading__ja--pill { padding: 8px 24px; min-height: 52px; }

  .energy-band { padding-top: 48px; }

  /* SP は content-wrap と同じ左右20px（60pxのままだと実効幅255pxで折返しが乱れる） */
  .energy-band__inner { padding: 0 20px; }

  .energy-band__lead { font-size: 22px; white-space: nowrap; }
  .energy-band__title { font-size: 24px; }
  .energy-band__title em { font-size: 32px; }
  .energy-band__title i { font-size: 27px; }
  .energy-band__desc { font-size: 15px; }

  .ekisu-section { padding: 24px 0 48px; }

  .ekisu-card__title { font-size: 32px; }
  .ekisu-card__sub { font-size: 18px; }
  .ekisu-card__circle { width: 170px; height: 170px; }
  .ekisu-card__copy { font-size: 18px; }

  .howto-section { padding: 64px 0 48px; }

  /* 作り方: 縦積み。+ と → は円の間で中央に */
  .mix-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .mix-item { flex: 0 0 auto; width: min(206px, 60vw); }

  .mix-plus,
  .mix-arrow { margin-bottom: 0; }

  .mix-arrow { transform: rotate(90deg); }

  .mix-caption { font-size: 16px; padding: 0 8px; }

  .enjoy-section { padding: 64px 0 72px; }

  .enjoy-grid {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .enjoy-card { width: min(278px, 80vw); }
  .enjoy-card__title { margin-top: 20px; }
}

/* サイズ選択UI（.product-info__size / .product-size-*）は共有コンポーネント化し
   src/styles/common.css へ移設（全ページで利用可）。energy 固有の上書きはここには持たない */