/* AOKICOSMETIC page-product.css — 製品詳細3枚共通（子CC-P4管理）
   構成: パンくず→上部2カラム(ギャラリー+B2B購入UI)→詩的コピー→特徴→使い方→全成分→関連3件→FAQ
   規約: 新規キーフレーム禁止・vw不使用・aspect-ratio枠内にabsolute子を置かない */

/* ---------- パンくず ---------- */
.pd-crumbs { padding-top: 2rem; font-size: 1rem; letter-spacing: .04em; color: #999; }
@media (min-width: 750px) { .pd-crumbs { padding-top: 3.2rem; font-size: 1.1rem; } }
.pd-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.pd-crumbs li { display: inline-flex; align-items: center; gap: .8rem; }
.pd-crumbs li + li::before { content: "/"; color: #ccc; }
.pd-crumbs a { color: #999; transition: color var(--dur-m) ease; }
.pd-crumbs a:hover { color: var(--ink-head); }
.pd-crumbs [aria-current="page"] { color: var(--ink-head); }

/* ---------- 上部2カラム ---------- */
.pd-top { padding-top: 3.2rem; }
@media (min-width: 750px) { .pd-top { padding-top: 4.8rem; } }
.pd-top__grid { display: grid; gap: 4rem; }
@media (min-width: 750px) { .pd-top__grid { grid-template-columns: 1.05fr 1fr; gap: 6rem; align-items: start; } }
@media (min-width: 990px) { .pd-top__grid { gap: 8rem; } }

/* ギャラリー（静的・メイン1＋サムネ4） */
.pd-gallery__main { overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-thumb); border-radius: 3px; }
.pd-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.pd-gallery__thumb { overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-thumb); border-radius: 3px; }
.pd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 製品情報（右カラム） */
.pd-info__line {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 1.6rem;
}
.pd-info__name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: .06em;
  color: var(--ink-head);
  margin-bottom: 1.6rem;
}
@media (min-width: 750px) { .pd-info__name { font-size: 4rem; } }
.pd-info__price { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 2.4rem; }
.pd-info__price-num { font-family: var(--font-en); font-weight: 700; font-size: 2rem; letter-spacing: .04em; color: var(--ink-head); }
@media (min-width: 750px) { .pd-info__price-num { font-size: 2.4rem; } }
.pd-info__price-tax { font-size: 1.1rem; color: #999; letter-spacing: .04em; }
.pd-info__lead { font-size: 1.25rem; line-height: 2; letter-spacing: .04em; margin-bottom: 3.2rem; }
@media (min-width: 750px) { .pd-info__lead { font-size: 1.4rem; } }

/* B2B購入UI（カート置換） */
.pd-info .btn-pill { width: 100%; }
.pd-info__cta-note { margin-top: 1.2rem; font-size: 1rem; line-height: 1.8; letter-spacing: .04em; color: #999; }

/* 取引条件ミニ表 */
.pd-terms { margin-top: 3.2rem; border-top: 1px solid var(--line); }
.pd-terms > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.4rem .2rem;
  border-bottom: 1px solid var(--line-soft);
}
.pd-terms dt { flex: none; font-size: 1.1rem; letter-spacing: .06em; color: #999; }
@media (min-width: 750px) { .pd-terms dt { font-size: 1.2rem; } }
.pd-terms dd { font-size: 1.2rem; letter-spacing: .04em; color: var(--ink-head); text-align: right; }
@media (min-width: 750px) { .pd-terms dd { font-size: 1.3rem; } }
.pd-terms + .t-cap { margin-top: 1.2rem; }

/* ---------- 中間セクション共通 ---------- */
/* 見出し（英字＋和文の2層） */
.pd-h { display: flex; align-items: baseline; gap: 1.6rem; margin-bottom: 2.8rem; }
@media (min-width: 750px) { .pd-h { margin-bottom: 3.6rem; } }
.pd-h__en { font-family: var(--font-en); font-weight: 700; font-size: 1.8rem; letter-spacing: .08em; color: var(--ink-head); }
@media (min-width: 750px) { .pd-h__en { font-size: 2.4rem; } }
.pd-h__jp { font-family: var(--font-jp); font-weight: 400; font-size: 1.1rem; letter-spacing: .04em; color: #999; }

/* 特徴・使い方の帯間（band-b-*より一段小さい独自リズム） */
.pd-sec-gap { margin-bottom: 7rem; }
@media (min-width: 750px) { .pd-sec-gap { margin-bottom: 11rem; } }

/* ---------- 詩的コピー ---------- */
.pd-copy__title { margin-bottom: 2.8rem; }
@media (min-width: 750px) { .pd-copy__title { margin-bottom: 3.6rem; } }
.pd-copy .t-body { margin-bottom: 2rem; }
.pd-copy__note { margin-top: 2.4rem; }

/* ---------- 製品特徴 ---------- */
.pd-features__list { border-top: 1px solid var(--line); }
.pd-features__list li {
  position: relative;
  padding: 1.6rem 0 1.6rem 2.4rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.2rem;
  line-height: 1.9;
  letter-spacing: .02em;
}
@media (min-width: 750px) { .pd-features__list li { font-size: 1.4rem; padding: 1.8rem 0 1.8rem 2.8rem; } }
.pd-features__list li::before { content: "—"; position: absolute; left: 0; color: #bbb; }
.pd-features__notes { margin-top: 1.6rem; }

/* ---------- 使い方（3ステップ） ---------- */
.pd-howto__steps { display: grid; gap: 2.8rem; }
@media (min-width: 750px) { .pd-howto__steps { grid-template-columns: repeat(3, 1fr); gap: 4rem; } }
.pd-howto__steps li { border-top: 1px solid var(--line); padding-top: 2rem; }
.pd-howto__num {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--ink-head);
  margin-bottom: 1.4rem;
}
@media (min-width: 750px) { .pd-howto__num { font-size: 3.2rem; margin-bottom: 1.8rem; } }

/* ---------- 全成分 ---------- */
.pd-ingredients__list {
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: .04em;
  color: #666;
  margin-bottom: 1.6rem;
}
@media (min-width: 750px) { .pd-ingredients__list { font-size: 1.3rem; } }

/* ---------- 関連製品（LINES THAT INSPIRE.） ---------- */
.pd-related__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: .08em;
  color: var(--ink-head);
}
@media (min-width: 750px) { .pd-related__title { font-size: 2.8rem; } }

/* ---------- FAQ ---------- */
.pd-faq__list { border-top: 1px solid var(--line); }
.pd-faq__item { border-bottom: 1px solid var(--line-soft); padding: 2.4rem 0; }
.pd-faq__item dt { font-weight: 700; font-size: 1.3rem; letter-spacing: .04em; color: var(--ink-head); margin-bottom: 1rem; }
@media (min-width: 750px) { .pd-faq__item dt { font-size: 1.5rem; } }
.pd-faq__item dd { font-size: 1.2rem; line-height: 1.9; letter-spacing: .02em; }
@media (min-width: 750px) { .pd-faq__item dd { font-size: 1.4rem; line-height: 2; } }
.pd-faq__mark { font-family: var(--font-en); font-weight: 700; margin-right: .8rem; }
.pd-faq__item dd .pd-faq__mark { color: #999; }