/* =====================================================================
   bySENSE — PRODUCTS page-specific CSS
   Figma node 1:244 (PRODUCT) 1536×13424px。
   ── Phase1 レスポンシブ flow/grid化（セッション16・STORY 12da03e と同一変換）──
   旧: .below-fv + 各要素 top:px のグローバル絶対カスケード ＋ .products-stage{height:calc}。
   新: 縦の背骨を4つの「マクロセクション」(.p-sec--cycle/reset/serum/bottom)へ sectionize。
       各 .p-sec は relative・幅100%・Figma縦スパンを explicit height で保持し順にフロー。
       重なり島（48h写真上の白文字・48hリング+6disc・2STEP・商品詳細カラム・写真帯）は
       各セクション内 absolute(local top = Figma絶対 − セクション開始)で封じ込め。
   幅: frame(1536)→100% / 本文measure→min(Npx,100%)。left オフセット・帯高・幾何島寸法
       (48hリング径・disc・縦書きSVG・商品写真)は px 据置き（Phase1）。1536px で描画ピクセル不変。
   共通トークン/部品(base.css・components.css)は編集しない。
   一次ソース: Figma 1:244 実測絶対座標(get_metadata / get_design_context)。
   ===================================================================== */

/* ── Phase1 レスポンシブ flow/grid化（セッション16・STORY 12da03e と同一変換）──
   stage: 固定高を撤廃しフロー化（旧 height:calc(100vh+13383px) を削除）。height は子セクションの積み上げで自動。 */
.products-stage { /* flow（height は子セクションの積み上げで自動） */ }

/* ============ [Phase2] stage 流体化（.products-stage スコープ＝他5ページ無影響・STORY/KOJI/TOPと同方式） ============
   base.css .stage は width:1536固定＋margin-left:calc((100vw-1536)/2)（narrow は負マージン中央クリップ＝左端欠け）。
   Phase2 は width:100%+max-width で 1536超は中央寄せ(現状維持)、1536未満で縮む(左端クリップ解消)。全6ページ移行後 base.css 昇格。 */
.stage.products-stage { width: clamp(var(--floor), 100vw, var(--frame)); margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2); margin-right: 0; }
/* bleed 再定義: stage中央寄せの限り stage幅非依存で viewport 全幅へ（旧 .stage .bleed の固定1536前提式を上書き）。 */
.stage.products-stage .bleed { left: 50%; margin-left: -50vw; width: 100vw; }

/* マクロセクション: relative・幅100%・Figma縦スパンを explicit height で保持し順にフロー。
   重なり島（48h写真上の白文字・48hリング+6disc・2STEP写真上テキスト・商品詳細カラム・写真帯）は
   各セクション内 absolute(local top)で封じ込め。境界は無地gap / 帯seam のみ（幾何島を切らない）。 */
.p-sec { position: relative; width: 100%; }
.p-sec--cycle  { height: 3782px; }   /* Figma 1082→4864 : METHOD + 48h帯&RING + 2STEP KIT（band-reset手前） */
.p-sec--reset  { height: 4059px; }   /* Figma 4864→8923 : band-reset(明) + GLOW RESET PADS 詳細（band-sep手前） */
.p-sec--serum  { height: 3684px; }   /* Figma 8923→12607 : band-sep(明) + GLOW REPAIR SERUM 詳細（band-bottom手前） */
.p-sec--bottom { height: 1105px; }   /* Figma 12607→13728 : band-bottom(底) ＋ 末尾80px余白を内包（注釈手前・全ページ80に統一） */

/* 写真上に白文字を載せる帯の暗幕(視認性確保。共通 --img-veil を使用) */
.pband { position: absolute; left: 0; width: 100%; overflow: hidden; }
.pband img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =====================================================================
   SECTION 01 | HERO (0–1082)  node 1:248 / 1:295 / 1:294 / 1:290 / 1:291
   ===================================================================== */
/* hero=画面高(100vh)・写真=100vw(.bleed)。前景(label/title/vline/hline)は 1082px高の
   下端固定ラッパ(.p-hero__fg)に入れ、Figma原寸の縦構図を FV 下端へ固定。 */
.p-hero { position: relative; width: 100%; height: 100vh; }   /* フロー先頭の relative 子（旧 absolute top:0） */
.p-hero__bg { position: absolute; top: 0; height: 100%; z-index: 0; overflow: hidden; }   /* + .bleed → 100vw */
.p-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 固定px・負マージン除去 */
/* 前景ラッパ: 1082px高・FV下端固定。子は Figma 原寸 top のまま=縦構図を厳密保持。 */
.p-hero__fg { position: absolute; left: 0; bottom: 0; width: 100%; height: 1082px; z-index: 3; }
/* H1 ラベル "PRODUCTS" 1:295 x128 y768 — Kaku Reg 24/42 tracking6 白 */
.p-hero__label {
  position: absolute; left: calc(128 / 1536 * 100%); top: 768px;   /* [Phase2] left相対化（祖先=p-hero__fg 全幅） */
  font-family: var(--sans); font-weight: 400;
  font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white);
}
/* H1 サブ 1:294 x128 y865 — Mincho Reg 24/42 tracking6 白 */
.p-hero__title {
  position: absolute; left: calc(128 / 1536 * 100%); top: 865px; width: min(672px, calc(672 / 1536 * 100%));   /* [Phase2] left+measure相対化 */
  font-family: var(--serif); font-weight: 400;
  font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white);
}
/* 縦ライン 1:290 x128 y1022 h120 / hero下フル幅線 1:291 y1082 */
.p-hero__vline { position: absolute; left: calc(128 / 1536 * 100%); top: 1022px; height: 120px; border-left: 1px solid rgba(255,255,255,.6); }   /* [Phase2] left相対化 */
.p-hero__hline { position: absolute; left: 0; top: 1082px; width: 100%; border-top: 1px solid var(--line); }

/* =====================================================================
   bySENSE METHOD (1184–1776)  group 1:345 (label+head 1:346, body 1:347)
   縦組み装飾 1:296 (x129 y1184 w47 h308)
   ===================================================================== */
.p-method { position: absolute; left: calc(384 / 1536 * 100%); top: 102px; width: min(672px, calc(672 / 1536 * 100%)); }   /* [Phase2] left+measure相対化 / local = Figma1184 − sec開始1082 */
/* ラベル "bySENSE METHOD" : Figmaは Zen Maru Gothic だが未読込→Kaku Mediumで代替 */
.p-method__en {
  font-family: var(--sans); font-weight: 500;
  font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--ink);
}
/* 見出し "足す前に、整える。" : Mincho Medium 24/48 tracking3 */
.p-method__title {
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--ink);
}
/* 本文 1:347 x384 y1328 w368 — Kaku Medium 16/32 */
.p-method__body { margin-top: 16px; }
.p-method__body p { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 32px; color: var(--ink); }
.p-method__body p + p { margin-top: 0; }
/* 縦組み装飾 1:296 (英字タグライン・薄色fill。Figma実export) */
.p-deco-method { position: absolute; left: calc(129 / 1536 * 100%); top: 102px; width: 47px; height: 308px; z-index: 3; opacity: .9; }   /* [Phase2] left相対化（deco幅47は固定据置き）/ local = 1184 − 1082 */

/* =====================================================================
   48-HOUR RESET CYCLE 帯 (1808–2834)  bg 1:249 / label 1:449
   [S+] 本文・フロー図は Figma に無し → シンプルなテキスト/縦フローで後置
   ===================================================================== */
.p-48h { position: absolute; left: 0; top: 726px; width: 100%; height: 1026px; overflow: hidden; }   /* + .bleed → 100vw / local = 1808 − 1082 */
.p-48h__bg { position: absolute; inset: 0; z-index: 0; }
.p-48h__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 固定px・負マージン除去 */
/* リング図を載せるため、商品写真をビネットで暗転(中心=リングを spotlight)。白い円/ラベルの視認性確保 */
.p-48h::after { content: ""; position: absolute; inset: 0; z-index: 1;   /* [2026-06-30] ビネット撤去（下の2STEP画像と同様、0130を無加工で見せる）[user]。戻す場合は下のbackgroundを radial-gradient(...,.30,.10) に */
  background: none; }
/* ラベル 1:449 x612 y1873 — Kaku Medium 24/48 tracking3 白・中央寄せ(.stage直下) */
.p-48h__label {
  position: absolute; left: 0; top: 791px; width: 100%; z-index: 3; text-align: center;   /* local = 1873 − 1082 */
  font-family: var(--sans); font-weight: 500;
  font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--white);
}
/* [S+] サブ見出し(STRUCTURE) — ラベル直下・中央寄せ */
.p-48h__sub {
  position: absolute; left: 0; top: 847px; width: 100%; z-index: 3; text-align: center;   /* local = 1929 − 1082 */
  font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 32px; letter-spacing: .12em;
  color: rgba(255,255,255,.9);
}
/* [S+] 本文 — 左カラム(x128)、中央のセラム/円と干渉しない位置 */
.p-48h__body {
  position: absolute; left: calc(128 / 1536 * 100%); top: 1038px; width: min(288px, calc(288 / 1536 * 100%)); z-index: 3;   /* [Phase2] left+measure相対化（band兄弟・祖先=section全幅）/ 幅288=リング左端(x426)と干渉回避 / local = 2120 − 1082 */
  font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 30px; color: rgba(255,255,255,.88);
  text-align: justify; text-justify: inter-character;   /* 右端を揃える(ガタつき解消) [feedback2 PRODUCT P3] */
}
.p-48h__body p:last-child { text-align-last: left; }   /* 最終行は左寄せ */
.p-48h__body p + p { margin-top: 1.2em; }

/* リング群(.p-48h-ringの子=svg/disc/label/vtext)をまとめて下げ、48h写真と2STEP写真の
   継ぎ目(2834)の中央に「跨ぐ」配置。子は本要素基準(relative)＋transformで一括シフト [user feedback 3b] */
/* [flow化] ring は relative・in-flow（0高さ）。旧 .below-fv では in-flow 先頭＝下げ前の page 原点(Figma 0)に
   box が居り、子 disc/svg/label は top:px(20xx)＋transform 434 で降下していた。section 化後は box が
   .p-sec--cycle 先頭(=Figma 1082)に来るため、top:-1082px で box 原点を Figma 0 へ戻す（= 旧と同一描画）。
   子の top/transform/translateY(434) は一切不変＝リングと6discの相対幾何を厳密保持。 */
.p-48h-ring { position: relative; top: -1082px; left: calc(50% - 768px); transform: translateY(434px); z-index: 6; }   /* center 2400→2834=継ぎ目。z-index=後発の2STEP写真より前面(下半分が隠れる対策)
   [Phase2] 中央ピン: ringは relative・全幅box＝子disc/spin/vtextは left:N(stage座標,center=768) を box基準で解決。
   wrapper を left:calc(50%-768px) で平行移動し island中心768→50%(stage中心)へ。子の内部座標は全て据置き＝幾何完全保持。
   1536: 50%=768 → left:0(無シフト・pxidentical)。narrow: 島が剛体のまま中央維持(spin単独の calc(50%-280px)では兄弟discが追従せず島が分解するため wrapper移動を採用)。 */
/* 保険: 現状プレースホルダで下側が明るいと白リングが沈むため、ごく薄い暗ハローで地ならし
   (ユーザー: 最終画像は上下トーンが揃う→不要なら削除可) */
.p-48h-ring::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 768px; top: 2400px; width: 900px; height: 900px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(10, 8, 6, .18) 30%, transparent 66%);   /* [2026-06-30] 暗ハローを減光(.38→.18)＝背景を薄く [user] */
}

/* リセット円(CONCEPT 48hサイクルと統一・白配色)。直線フロー(p-48h__flow)から置換 [MTG §4]。
   中心(768,2400) R280 → 描画円 d560 / disc d200。
   大円=共通 spin-ring(濃淡が回転＋白グロー) へ置換 [feedback2 PRODUCT P1]。
   配置は旧 p-ring-draw(left488 top2120 w560 h560)に踏襲。 */
.p-48h-spin {
  left: 488px; top: 2120px; width: 560px; height: 560px; z-index: 3;
  --ring-base: rgba(255, 255, 255, .34);   /* 静止ベース円=常時うっすら視認 */
  --ring-spin: 5s;                           /* 一周5秒=TOP(concept-spin)に合わせて高速化 [feedback5 PRODUCT]。イージング(強弱)は base.css の --ring-ease 既定で自動付与 */
  --ring-glow: rgba(255, 255, 255, .6);      /* sweep 先端の白グロー */
  --ring-glow-blur: 9px;
}
.p-disc {
  position: absolute; width: 200px; height: 200px; border-radius: 50%; z-index: 4;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .72);   /* 明るめ [3b] */
}
.p-disc--top    { left: 668px; top: 2020px; background: rgba(255, 255, 255, .3); border-color: var(--white); }  /* スタート/リセット */
.p-disc--tr     { left: 910px; top: 2160px; }
.p-disc--br     { left: 910px; top: 2440px; }
.p-disc--bottom { left: 668px; top: 2580px; }
.p-disc--bl     { left: 426px; top: 2440px; }
.p-disc--tl     { left: 426px; top: 2160px; }
/* 点灯時: 白ラベルが消えないよう、ソリッド白でなく半透明＋グロー(dark band 上で override) */
.p-disc.is-lit { background: rgba(255, 255, 255, .42); border-color: var(--white); box-shadow: 0 0 20px rgba(255, 255, 255, .3); }
/* disc ラベル(白・中央) — 各 disc 中心に重ねる。写真上の視認性に影。
   フォントはゴシックに統一 [feedback2 PRODUCT P2] */
.p-disc-label {
  position: absolute; z-index: 5; color: var(--white); text-align: center; white-space: nowrap; transform: translateX(-50%);
  font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1.4; letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
}
.p-lab--top    { left: 768px;  top: 2110px; }
.p-lab--tr     { left: 1010px; top: 2250px; }
.p-lab--br     { left: 1010px; top: 2530px; }
.p-lab--bottom { left: 768px;  top: 2670px; }
.p-lab--bl     { left: 526px;  top: 2530px; }
.p-lab--tl     { left: 526px;  top: 2250px; }
/* 中央縦テキスト(白) — ring center(768,2400)。
   縦書きは元の Figma 現物SVG(明朝・白)へ戻す [feedback3 PRODUCT 2]。
   ※ disc ラベル(.p-disc-label)はゴシックのまま維持＝縦書きSVG明朝／disc文字ゴシック。
   ビネット上の白なので drop-shadow。 */
.p-ring-vtext { position: absolute; left: 736px; top: 2294px; width: 64px; height: 213px; z-index: 5; }
.p-ring-vtext img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .65)); }

/* =====================================================================
   2STEP KIT (2834–4761)  bg 1:247 / circle 1:250 / dot 1:348 / deco 1:251
   text 1:283(H2) 1:284(Reset→Repair) 1:285(body) 1:286/1:289(STEP) 1:287/1:288(role)
   photos 1:292(x385) 1:293(x848)  各 w431 h288
   ===================================================================== */
.p-2step-bg { position: absolute; left: 0; top: 1752px; width: 100%; height: 1024px; overflow: hidden; }   /* + .bleed → 100vw / local = 2834 − 1082 */
.p-2step-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 固定px除去 */
/* p-2step-circle / p-2step-dot / p-deco-2step は削除:
   中央(x736)に在り48hリングと重複・「白い縦バー」として見えていたため [user feedback 3b] */

/* H2 1:283 x385 y3952 : "整えて、育てる。"(Mincho Med 24/48/3) + "2STEP KIT"(Kaku Med 24/48) */
.p-2step-head { position: absolute; left: calc(321 / 1536 * 100%); top: 2870px; width: min(672px, calc(672 / 1536 * 100%)); z-index: 4; }   /* [Phase2] left+measure相対化 / local = 3952 − 1082 */
.p-2step-head .ja { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--ink); }
.p-2step-head .en { font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--ink); }
/* Reset → Repair 1:284 x385 y4068 — Kaku Medium 16/24? 実測 h24 */
.p-2step-rr { position: absolute; left: calc(321 / 1536 * 100%); top: 2986px; z-index: 4; font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: .08em; color: var(--ink); }   /* [Phase2] left相対化 / local = 4068 − 1082 */
/* 本文 1:285 x385 y4128 w672 — Kaku Medium 16/36 */
.p-2step-body { position: absolute; left: calc(321 / 1536 * 100%); top: 3046px; width: min(672px, calc(672 / 1536 * 100%)); z-index: 4; font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 36px; color: var(--ink); }   /* [Phase2] left+measure相対化 / local = 4128 − 1082 */
.p-2step-body p + p { margin-top: 0; }

/* STEP列 1:286 x385 / 1:289 x848  y4234 w255 */
.p-step { position: absolute; top: 3152px; width: min(431px, calc(431 / 1536 * 100%)); z-index: 4; }   /* [④] 商品名テキスト列を画像(.p-step-photo=431)と同幅へ拡張。narrowで商品名(GLOW REPAIR SERUM)の改行・崩れを解消。col1右=321+431=752<col2左784で非重複。1536は名が1行=描画不変(回帰0) / local = 4234 − 1082 */
.p-step--1 { left: calc(321 / 1536 * 100%); }   /* [Phase2] left相対化 */
.p-step--2 { left: calc(784 / 1536 * 100%); }   /* [Phase2] left相対化 */
.p-step .no   { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 32px; color: var(--white); }     /* STEP 1/2 = 白 [Figma] */
.p-step .name { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 32px; color: var(--ink); }
.p-step .role { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 32px; color: var(--ink); }
/* 商品写真 1:292/1:293 y4377 w431 h288 */
.p-step-photo { position: absolute; top: 3295px; width: min(431px, calc(431 / 1536 * 100%)); height: 288px; z-index: 4; overflow: hidden; }   /* [Phase2] 写真列を比例化（TOP .prod-photo と同方式・1536=431・narrow右はみ出し防止）/ local = 4377 − 1082 */
.p-step-photo--1 { left: calc(321 / 1536 * 100%); }   /* [Phase2] left相対化 */
.p-step-photo--2 { left: calc(784 / 1536 * 100%); }   /* [Phase2] left相対化 */
.p-step-photo img { width: 100%; height: 288px; object-fit: cover; display: block; }   /* [Phase2] 親(min431)に追従・1536では431×288 */
/* [削除] 役割テキスト(p-step-role y4673) — MTG「商品が並ぶ下の説明文は削除」。詳細は後段の商品詳細へ。 */

/* =====================================================================
   FULL-BLEED 帯 (bright separators) : RESET bg 1:246 (4864–5888) /
   商品間 1:450 (8366–9390) / 底部 1:245 (11869–12894)
   ===================================================================== */
.p-band-reset { top: 0; height: 1024px; }   /* .pband + .bleed → 100vw / .p-sec--reset 先頭 (Figma 4864 = sec開始) */
.p-band-sep   { top: 0; height: 1024px; }   /* .p-sec--serum 先頭 (Figma 8923 = sec開始) */
.p-band-sep img { width: 100%; height: 100%; margin-left: 0; }   /* 固定px・負マージン除去 */
.p-band-bottom { top: 0; height: 1025px; } /* .p-sec--bottom 先頭 (Figma 12607 = sec開始) */

/* =====================================================================
   PRODUCT DETAIL ブロック (共通スタイル)
   RESET PADS : 6015–8270 / REPAIR SERUM : 9518–11773
   見出し 1:349/1:350 / 商品説明 1:353/1:354(w736) / 商品画像 1:355/1:356(895×597)
   特徴 / 主要成分 / 全成分 (hairline行) / HOW TO USE (イラスト枠 896×560)
   行間隔=48px(Figma Line間隔)。ラベル16px・行16px。
   ===================================================================== */
.p-detail { position: absolute; left: calc(321 / 1536 * 100%); width: min(896px, calc(896 / 1536 * 100%)); }   /* [Phase2] left+measure相対化（子の本文列は min(Npx,100%) のまま＝親.p-detail基準で追従／③） */
/* 見出し GLOW xxx 1:349/1:350 — ゴシック(商品名)24/48 tracking3 [feedback2 PRODUCT P4] */
.p-detail__head { font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--ink); }
/* 商品説明 1:353/1:354。本文=ゴシック。先頭の .lead(製品サブ見出し)=明朝・少し大きめ [タイポ整頓] */
.p-detail__intro { width: min(736px, 100%); }
/* 本文=ゴシック・グリッド幅(736)維持で justify [feedback2 PRODUCT P6] */
.p-detail__intro p { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 32px; color: var(--ink); text-align: justify; }
/* .lead = 製品サブ見出し(見出しなので justify しない) → 明朝・本文より少し大きめ。
   行高比率を本文(16/32=2.0)に整合: 19px → lh 38 [feedback2 PRODUCT P5] */
.p-detail__intro .lead { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 38px; letter-spacing: .02em; color: var(--ink); text-align: left; }
.p-detail__intro p + p { margin-top: 16px; }
/* .lead 直後の本文に少しゆとり(見出し→本文の段差) */
.p-detail__intro .lead + p { margin-top: 20px; }
/* 商品画像 大 895×597 (背景グレーに馴染む) — 旧単一画像。カルーセルへ置換 [§E] */
.p-detail__photo { width: 100%; max-width: 895px; aspect-ratio: 895 / 597; height: auto; overflow: hidden; }   /* [②] 固定895→親.p-detail(narrowで縮小)追従。1536: max-width=895・AR→597で従来同一(回帰0)。narrow: 親幅に縮み右はみ出し解消 */
.p-detail__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* [②] 親枠を満たす(object-fit維持) */

/* ---- 商品画像カルーセル(メイン拡大 + サムネ列) [対応事項 §E] ----
   メインは旧 p-detail__photo と同枠(895×597)。サムネは896カラム内で左揃え。
   editorial: 細い --line 罫・抑制的。サムネ切替は prefers-reduced-motion を尊重。 */
.p-carousel { width: min(896px, 100%); }
/* メイン拡大: 旧 p-detail__photo と同寸の枠を維持 */
.p-carousel__main { position: relative; width: 100%; max-width: 895px; aspect-ratio: 895 / 597; height: auto; overflow: hidden; background: var(--bg-alt); }   /* [②] 固定895→親追従。1536: max-width=895・AR→597で従来同一(回帰0)。narrow: 親.p-detail内に収まり右寄り解消 */
.p-carousel__main img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* [②] 親枠(AR)を満たす(object-fit維持) */
/* メイン切替フェード(JS が data-swap で一瞬透過→差替) */
.p-carousel__main img { transition: opacity .32s var(--ease); }
.p-carousel__main.is-swapping img { opacity: 0; }
/* サムネ列: メイン下に左揃えで横並び。アウトライン無し→濃淡で識別 [feedback2 PRODUCT P7]。
   [feedback4 PRODUCT] サムネ最大6枚を1行に並べ、列の総幅をメイン画像(895px)に揃える。
   6枚×139px + 5×12gap = 834+60 = 894px ≒ 895(端数1pxは丸めで吸収)。左端はメインと揃い、6枚時は右端も揃う。
   PADS=6枚→895を満たす / SERUM=5枚→同サムネ幅で左揃え(右に1枠分余白)。サムネ幅は両商品で統一。
   nowrap で6枚を必ず1行に(将来6枚超のHTMLが来ても折り返さず溢れ→上限6枚運用)。 */
.p-carousel__thumbs { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 16px; padding: 0; list-style: none; }   /* [feedback6] wrap→nowrap：狭幅で改行させず1行維持（flex item=<li> を等幅比例で縮小） */
/* [feedback6] サムネ=等幅比例。flex item は <li>。basis139+shrink1+min-width:0 →
   1536: grow:0で139px据置き（PADS6枚=894<896／SERUM5枚=左揃え とも従来と同寸・回帰0）、狭幅のみ等幅で比例縮小（改行なし）。 */
.p-carousel__thumbs > li { flex: 0 1 139px; min-width: 0; }
.p-carousel__thumb {
  display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; overflow: hidden;   /* [feedback6] 固定139→100%：親<li>(basis139→狭幅で縮小)に追従。高さは3:2で追従 */
  border: 0; background: var(--bg-alt); cursor: pointer;   /* 枠撤去 [P7] */
  opacity: .42; transition: opacity .3s var(--ease);        /* 未選択=より薄く [P7] */
}
.p-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-carousel__thumb:hover,
.p-carousel__thumb:focus-visible { opacity: .72; }
/* アクティブサムネ: 不透明で強調(枠なし=濃淡で識別) [P7] */
.p-carousel__thumb.is-active { opacity: 1; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .p-carousel__main img,
  .p-carousel__thumb { transition: none; }
}
/* サブラベル(特徴 / 主要成分 / 全成分 / HOW TO USE) 16px #393c41 */
.p-sublabel { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 16px; color: var(--ink); }
/* 特徴: hairline行(各48px) */
.p-feat { width: min(896px, 100%); }
.p-feat .row { height: 48px; display: flex; align-items: center; border-top: 1px solid var(--line); font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 16px; color: var(--ink); }
.p-feat .row:last-child { border-bottom: 1px solid var(--line); }
.p-feat .row::before { content: "✓"; margin-right: 12px; color: var(--ink); }
/* 主要成分(Key Ingredients): 2カラム行 name(x385)/desc(x688≒+303) hairline */
.p-ing { width: min(896px, 100%); }
.p-ing .row { min-height: 48px; display: grid; grid-template-columns: 303px 1fr; align-items: center; border-top: 1px solid var(--line); padding: 8px 0; }
.p-ing .row:last-child { border-bottom: 1px solid var(--line); }
.p-ing .nm { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--ink); }
.p-ing .ds { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--ink-60); }
/* 全成分 : 罫線は常時「全成分を表示」直下に表示し、開くと全成分テキストが現れて
   罫線がその下へ降りる構造 [feedback2 PRODUCT P8]。
   → ハードレイン=コンポーネント下端の border-bottom。閉=summary直下、開=text下端へ自然降下。
   軽い transition で展開を緩やかに(grid-rows トリック) */
.p-all { width: min(896px, 100%); border-bottom: 1px solid var(--line); }
.p-all summary { list-style: none; cursor: pointer; height: 48px; display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--ink); }
.p-all summary::-webkit-details-marker { display: none; }
/* 見出しテキストの下線は撤去(代わりに行下の罫線で示す) [P8] */
.p-all__lbl { text-decoration: none; }
/* ▼ → 矢印の先(chevron) SVG。open で180度反転 */
.p-all summary .ind { display: inline-flex; align-items: center; color: var(--ink-60); transition: transform .3s var(--ease); }
.p-all summary .ind svg { display: block; }
.p-all[open] summary .ind { transform: rotate(180deg); }
/* 展開テキスト: 罫線なし(コンポーネント下端の罫線が下降して受ける)。
   開閉を緩やかに見せるため grid-template-rows 0fr→1fr で高さアニメーション。
   閉時も <details> 既定の display:none を上書きして高さ0で在席させ、罫線を summary 直下に保つ */
.p-all:not([open]) .p-all__wrap { display: grid; }
.p-all__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.p-all[open] .p-all__wrap { grid-template-rows: 1fr; }
.p-all__text { overflow: hidden; min-height: 0; font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 28px; color: var(--ink-60); }
.p-all__text > span { display: block; padding: 4px 0 16px; }
/* HOW TO USE : Figma枠外イラスト(2044:2-5)=透過png線画 横並び＋下キャプション + 前後テキスト
   [タイポ整頓] lead=見出し扱い(明朝・少し大きめ)／intro/figcaption/outro=ゴシックで同一サイズに統一 */
.p-howto { width: min(896px, 100%); }
/* HOW TO USE ラベルのみ大きく(20px・他の p-sublabel には影響させない) [feedback2 PRODUCT P9] */
.p-sublabel--howto { font-size: 22px; line-height: 32px; }
/* 直下に同フォント・同サイズで商品名を再掲 [P9] */
.p-howto__name { font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 30px; color: var(--ink); }
/* "2日に1回のお手入れに"/"毎日の朝夜のお手入れに" = 小見出し → 明朝・本文より少し大きめ */
.p-howto__lead { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 32px; letter-spacing: .02em; color: var(--ink); }
/* ---- HOW TO USE カード [feedback3 PRODUCT 3] ----
   1ステップ=1カード。カード=白背景・角丸なし(border-radius:0)・上=イラストエリア＋下=対応手順テキスト。
   PADS=4カラム / SERUM=3カラム。896グリッド内で横並び・同サイズ感(イラスト枠の高さは共通240px)。 */
.p-howto__flow { display: flex; gap: 24px; align-items: stretch; }
/* カード = 縦積み(イラスト→キャプション)。白背景・90度角。横幅はカラム数でflex等分 */
.p-howto__card {
  display: flex; flex-direction: column; margin: 0;
  flex: 1 1 0; min-width: 0;
  background: var(--white); border-radius: 0; overflow: hidden;
}
/* イラストエリア(カード上部・共通高さ=各カード同サイズ) */
.p-howto__illust {
  display: flex; align-items: flex-start; justify-content: center;
  height: 240px; padding-top: 24px; overflow: hidden;   /* [fb5] 顔ありイラストは上揃え＋上部に余白(頭が枠上端に貼り付かない)。box-sizing:border-box で画像エリア=216px */
}
.p-howto__illust img { display: block; width: auto; }
/* イラスト未準備カード = COMING SOON プレースホルダ(中央・控えめ) */
.p-howto__illust--soon {
  align-items: center; padding-top: 0;   /* [fb5] COMING SOON は現状維持(中央・上余白なし) */
  font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4;
  letter-spacing: .14em; color: var(--ink-60); opacity: .55;
}
/* キャプション(カード下部・手順テキスト) = ゴシック 15/28 補助トーン */
.p-howto__cap {
  flex: 1 1 auto;
  padding: 16px 20px 20px;
  font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 28px; color: var(--ink-60);
}
/* 手順番号(①②③④) — テキスト頭に小さく */
.p-howto__num { color: var(--ink); margin-right: 6px; font-weight: 500; }
/* 顔のサイズが各カードで同程度に見えるよう、画像ごとに表示高さを個別調整 [P11踏襲]。
   元画像で顔(頭頂〜顎)が占める割合が大きいものほど低く表示し、顔の見た目サイズを揃える。
   [fb5] イラスト枠は align-items:flex-start で上揃え＋padding-top:24px。画像エリアは実質216px(=240-24)。
   最も高い hw--01 は枠内に収めるため222→216へ(他は<216で収まる)。 */
.hw--01 { height: 216px; }   /* 横顔・首/上半身まで入る→顔の占有割合小さい→高め(枠216に合わせ222→216) */
.hw--02 { height: 186px; }   /* 正面・顔が大きく写る→低め */
.hw--03 { height: 174px; }   /* 横顔・顔(鼻〜口)が大きい→最も低め */
.hw--04 { height: 200px; }   /* 正面+両手・顔は上半分 */
.hw--05 { height: 208px; }   /* PADS① 手+パッド(顔なし)・縦長 → 高めで存在感を揃える */
.hw--06 { height: 210px; }   /* SERUM① 横顔+手・顔は上部 → 高め */
.hw--07 { height: 176px; }   /* SERUM③ ボトル3本(顔なし)・横広 → 低めで重さを揃える */
/* [S+] パッド構造説明 — 2カラムBOX(左=接写431×288 / 右=説明) [feedback2 PRODUCT P10]。
   商品紹介2カラム(STEP写真431×288)と同サイズ感。グリッド左揃え(896内)。 */
.p-pad { width: min(896px, 100%); display: flex; gap: 34px; align-items: flex-start; }
.p-pad__photo { position: relative; flex: 0 0 auto; width: min(431px, calc(431 / 896 * 100%)); aspect-ratio: 431 / 288; height: auto; overflow: hidden; }   /* [③] 固定431→親.p-pad(896基準)に比例追従。flex:0 0 auto=幅はwidth駆動で伸縮しない(0 1 autoだと長文textのauto basisで写真が1536でも縮み回帰→不可)。1536: width→431・AR→288で従来同一(回帰0)。narrow: width=48.1%で写真も縮みtext列(flex:1)を確保し右テキスト圧迫を解消 */
.p-pad__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* [③] 親枠(AR)を満たす(object-fit維持) */
.p-pad__text { flex: 1 1 auto; font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 30px; color: var(--ink-60); }
.p-pad__text p + p { margin-top: .4em; }

/* =====================================================================
   PRODUCT DETAIL — Flow layout (テキスト/コンテンツ更新対応)
   .p-detail は position:absolute で stage 内固定。子は通常フロー + margin でリズムを作る。
   個別 inline absolute top は HTML から除去済み。
   ===================================================================== */
.p-detail--1 { top: 1151px; }    /* local = Figma 6015 − sec開始 4864 */
.p-detail--2 { top: 1144px; }    /* local = Figma 10067 − sec開始 8923 */

/* 子要素フロー内マージン（Figmaの節間隔に準拠） */
.p-detail > .p-detail__intro    { margin-top: 16px; }
.p-detail > .p-detail__photo    { margin-top: 48px; }
.p-detail > .p-carousel         { margin-top: 48px; }   /* 旧 photo と同じ節間隔 [§E] */
.p-detail > .p-sublabel         { margin-top: 48px; }
.p-detail > .p-feat             { margin-top: 16px; }
.p-detail > .p-ing              { margin-top: 16px; }
.p-detail > .p-detail__footnote { margin-top: 16px; }
.p-detail > .p-free             { margin-top: 20px; }
.p-detail > .p-all              { margin-top: 16px; }
.p-detail > .p-pad              { margin-top: 48px; }
.p-detail > .p-howto__lead      { margin-top: 8px; }
/* intro/outro はカード化で各カード内に統合(独立段落を撤去) [feedback3 PRODUCT 3] */
.p-detail > .p-howto__flow      { margin-top: 24px; padding-bottom: 44px; }   /* HOW TO USE 後の余白は縮小維持 [feedback2 PRODUCT P12] */

/* 脚注テキスト（主要成分の下 / 小さめ補助） */
.p-detail__footnote {
  font-family: var(--sans); font-weight: 500;
  font-size: 12px; line-height: 20px; color: var(--ink-60); width: min(896px, 100%);
}

/* フリーチップ（7フリー / 8フリー） */
.p-free {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  width: min(896px, 100%);
}
.p-free__label {
  font-family: var(--sans); font-weight: 500;
  font-size: 13px; line-height: 28px; color: var(--ink); white-space: nowrap;
}
.p-free__chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px; border: 1px solid var(--line);
  font-family: var(--sans); font-weight: 500;
  font-size: 12px; line-height: 22px; color: var(--ink);
  white-space: nowrap;
}

/* 画像クレジット配置: PRODUCTS は麹画像が無いため .img-credit を全削除 [feedback3 PRODUCT 4]。
   関連スタイル(p-credit 各種・img-credit 位置指定)も撤去。 */

/* =====================================================================
   ご購入（購入導線・フロー・p-notes 直前）[C1]
   絶対座標ページ末尾のフロー塊。p-detail と同じ左/幅(321/896)で「商品詳細」列に揃える。
   左寄せ厳守（center 禁止）。CTA は subscription の .sub-btn と同じ枠線ボタン言語。
   ===================================================================== */
.p-buy { position: relative; margin-left: calc(321 / 1536 * 100%); width: min(896px, calc(896 / 1536 * 100%)); margin-top: 96px; z-index: 3; }
.p-buy__eyebrow { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-60); }
.p-buy__head { margin-top: 10px; font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.3; letter-spacing: .06em; color: var(--ink); }
.p-buy__lead { margin-top: 14px; font-family: var(--sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-60); }
.p-buy__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.p-buy__btn { display: inline-block; padding: 15px 32px; border: 1px solid var(--ink); color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .1em; transition: background .4s var(--ease), color .4s var(--ease); }
.p-buy__btn:hover { background: var(--ink); color: var(--white); }
.p-buy__btn--primary { background: var(--ink); color: var(--white); }
.p-buy__btn--primary:hover { background: transparent; color: var(--ink); }
/* .p-buy__alt は feedback1 で撤去（定期便=主ボタン化・定期カート/ITEM LISTリンク廃止） */

/* =====================================================================
   注釈エリア (フッター上・グリッド左寄せ・小ゴシック) [feedback3 PRODUCT 5]
   共通 .page-notes(体裁) を使用。絶対座標で最後の写真帯と footer の間に配置。
   グリッド左(left:128 / width:1280)。位置は #site-footer と連動して再計算。
   ===================================================================== */
.p-notes { position: relative; margin-left: calc(128 / 1536 * 100%); width: min(1280px, calc(1280 / 1536 * 100%)); margin-top: 72px; z-index: 3; }   /* [Phase2] margin-top=購入導線(.p-buy)と注釈の間の余白[feedback1・PC]。 グリッド左+幅を相対化（about/.kl-page-notes と同方式）。フロー化（.p-sec--bottom 直後・末尾96px余白を section が内包） */

/* =====================================================================
   FOOTER  共通 #site-footer を絶対配置
   ===================================================================== */
#site-footer { position: relative; width: 100%; margin-top: 80px; } /* フロー化（page-notes 直後）。注釈後の余白を全ページ80に統一 */

/* =====================================================================
   [Phase3] スマホ専用 (<768) — PRODUCTS
   viewport=width=device-width。stage フロア(1200/clamp)を除去し全幅化、4マクロ
   セクション(.p-sec)を height:auto、絶対配置の島を relative フローへ。
   写真帯=全幅(3/2)。写真上の白文字(48h label/sub/body・STEP no)はグレー#393c41 へ降ろす
   （例外=HERO は白文字オーバーレイ維持・100svh・STORY .ab-hero__fg 同型）。
   48hリセットリング(剛体島・白配色)は幾何を保ったまま中央・縮小(scale .44)し濃パネル
   (::after #27272b)に載せる（白線/縦書きSVGが地のグレー #d0d0d0 に沈むため・recipe f）。
   カルーセルのサムネ列は内部 overflow-x:auto（ページ全体は横スクロールさせない）。
   HOW TO カードは1カラム。全成分(.p-all)展開時に site.js が .p-sec へ inline height を
   付けるため、ここで height:auto !important にして展開で全成分が自然に伸びる(HOW TO 食い込み回避)。
   全ルール <768 ガード＝1536/デスクトップ回帰ゼロ。手本=about.css 末尾(STORY)。
   ===================================================================== */
@media (max-width: 767px) {
  /* stage floor(1200/clamp) 除去 + bleed の水平オフセット中和（全幅=viewport） */
  .stage.products-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
  .stage.products-stage .bleed { left: 0; margin-left: 0; width: 100%; }

  /* マクロセクション: height:auto。!important で site.js(.p-all トグル)の inline height も無効化し
     全成分展開でセクションが自然に伸びる（HOW TO セクションへの食い込み回避）。 */
  .p-sec { height: auto !important; }
  /* リング島(剛体・子は1536座標)の transform 前レイアウト溢れをページ横スクロールへ波及させない保険。
     [sp1#3] flex column 化 → 末尾4子(STEP1/写真1/STEP2/写真2)を order で STEP1→写真→STEP2→写真 に並べ替え。
     他の子は order:0(DOM順) で従来描画維持。 */
  .p-sec--cycle { overflow-x: hidden; display: flex; flex-direction: column; }

  /* ---- HERO: 前景島→左下1カラム(白文字オーバーレイ維持・STORY同型) ---- */
  .p-hero { height: 100svh; }
  /* [sp1 feedback#1] FV を画像左1/3寄りに → 両商品が写るよう object-position を左へ */
  .p-hero__bg img { object-position: 33% center; }
  .p-hero__fg { height: auto; top: auto; bottom: 0; left: 0; width: 100%; padding: 0 24px 44px; }
  .p-hero__label { position: static; left: auto; top: auto; font-size: 20px; letter-spacing: 4px; }
  .p-hero__title { position: static; left: auto; top: auto; width: auto; margin-top: 8px; margin-bottom: 28px; font-size: 22px; line-height: 36px; letter-spacing: 3px; }
  /* [FV hairline] TOP の左下ヘアライン combo を踏襲: 左24の縦アクセント(FV下端を跨ぐスクロール誘導) ＋ 全幅の控えめベースライン。
     タイトルは上の margin-bottom:28 で線の上へ持ち上げ、3者が重ならないようにする。vline/hline は .p-hero__fg(下端固定)基準の bottom アンカー。 */
  .p-hero__vline { display: block; left: 24px; top: auto; bottom: -40px; height: 96px; border-left: 1px solid rgba(255,255,255,.6); }
  .p-hero__hline { display: block; left: 0; top: auto; bottom: 0; width: 100%; border-top: 1px solid rgba(255,255,255,.28); }

  /* [見出しバランス] コンテンツ各セクションの 24/48 見出しは行間が緩く 22px FV 見出しと不揃い →
     font-size:24px は据置きで line-height のみ 36px に詰めて FV と調和（リング disc ラベル/eyebrow は対象外）。 */
  .p-method__en, .p-method__title, .p-48h__label, .p-2step-head .ja, .p-2step-head .en, .p-detail__head { line-height: 36px; }

  /* ---- bySENSE METHOD ---- */
  .p-deco-method { display: none; }   /* 縦組み装飾 */
  .p-method { position: relative; left: auto; top: auto; width: auto; padding: 64px 24px 40px; }   /* [sp1#9] 余白 generous */

  /* ---- 48h 写真帯: 全幅 3/2・装飾ヴェール除去(白文字を載せないため) ---- */
  .p-48h { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .p-48h::after { display: none; }
  /* 48h ラベル/サブ/本文: 写真上の白文字→グレー、フローへ */
  .p-48h__label { position: relative; left: auto; top: auto; width: auto; color: var(--ink); padding: 44px 24px 0; }
  .p-48h__sub   { position: relative; left: auto; top: auto; width: auto; color: var(--ink); padding: 6px 24px 0; }
  .p-48h__body  { position: relative; left: auto; top: auto; width: auto; color: var(--ink); padding: 18px 24px 0; text-align: left; }

  /* ---- 48h リセットリング（剛体島）[sp1 feedback#2]: 暗パネル(::after)＋背景マージンを撤去し、
     CONCEPT(.c-48h-spin)と同じ明地カラーリングへ → 地のグレー#d0d0d0 に直接載せて大きく表示。
     子(spin/6 disc/縦書きSVG/ラベル)の内部座標(1536系)は据置きで親 transform に追従。
     scale 0.44 維持。translateY = -(topmost=top disc top 2020 ×0.44=888.8) で島上端を box 上端へ。
     height = 視覚縦span (bottom disc bottom 2780 − top disc top 2020)×0.44 ≈ 334.4 → 336px。
     translateX = 50% − 768×0.44 で child-center x768 を viewport 中央へ。
     ※.reveal は標準 translate プロパティ使用＝本 transform と非干渉。 ---- */
  /* [sp2] CONCEPT(.c-sec--cycle)とリング実寸を一致。PRODUCTは幾何が小さく(viewBox560/disc200/外縁±342)
     scale0.44 では CONCEPT(640/240/±397)より小さく描画＝左右余白が大きく文字が相対的に大きく見えた。
     0.44→0.51 で外縁≈±174.7px＝CONCEPTと同フットプリント。translateX=50%-768*0.51 / translateY=-(2020*0.51) / height=(2780-2020)*0.51≈388。ラベルも 26→22/30→25 に縮小し実寸一致。 */
  /* [fix3 真因] 旧 transform: translate(calc(50% - 391.68px), 0) scale(0.51) + transform-origin:0 0 は
     リング BOX を画面左外(x≈-197〜+2)へ押し出していた(子は left:910px 等の巨大座標＋transformで画面内に来るが、
     箱自体はほぼ画面外)。`.p-48h-ring` は `.reveal`(IntersectionObserver で is-in→opacity:0→1)を持つため、
     WebKit/iOS は「箱が画面外」と判定し IO が発火せず opacity:0 のまま＝リングが丸ごと不可視になっていた
     (Chromium は緩く発火するため headless 検証をすり抜けた／実機 Safari・iOS Chrome=WebKitで消える)。
     対策: CONCEPT(.c-sec--cycle [data-ring])と同一機構へ＝transform-origin:top center + scale のみ(translate無し)で
     箱を中央=画面内に保ち、子は left:calc(50%±N) の中心相対へ変更。これで IO が発火しリングが表示される。 */
  .p-48h-ring {
    position: relative; top: 0; left: 0;   /* top:0 で desktop の top:-1082px(島オフセット)を必ず打ち消す */
    width: 100%; height: 388px; margin: 24px 0 56px;
    transform: scale(0.51); transform-origin: top center;
  }
  .p-48h-ring::before, .p-48h-ring::after { display: none; }   /* halo + 暗パネル 撤去 */
  /* [sp2 fix2] 島の子を box 原点(0-760)へ寄せる(全 top -2020)。ring(spin)+6disc。 */
  /* [fix3] left を中心相対 calc(50%±N) へ(旧 base の絶対 left:426〜1010px を上書き)。
     spin=幅560(半280)→中心。disc=幅200(半100)。disc中心オフセット ±242(=1010/526 − 768)。 */
  .p-48h-ring .p-48h-spin    { left: calc(50% - 280px); top: 100px; }   /* spin中心=768 / 2120-2020 */
  .p-48h-ring .p-disc--top   { left: calc(50% - 100px); top: 0px; }     /* 中心768 / 2020 */
  .p-48h-ring .p-disc--tr    { left: calc(50% + 142px); top: 140px; }   /* 中心1010 / 2160 */
  .p-48h-ring .p-disc--br    { left: calc(50% + 142px); top: 420px; }   /* 中心1010 / 2440 */
  .p-48h-ring .p-disc--bottom{ left: calc(50% - 100px); top: 560px; }   /* 中心768 / 2580 */
  .p-48h-ring .p-disc--bl    { left: calc(50% - 342px); top: 420px; }   /* 中心526 / 2440 */
  .p-48h-ring .p-disc--tl    { left: calc(50% - 342px); top: 140px; }   /* 中心526 / 2160 */
  /* リング配色 = CONCEPT 明地(.c-48h-spin 準拠): base=ink薄/glow=白/spin5s。sweep=ink→白グラデ(#spinGrad48) */
  .p-48h-spin {
    --ring-base: rgba(57, 60, 65, .42);
    --ring-w-base: 1.5;
    --ring-w-sweep: 2;
    --ring-spin: 5s;
    --ring-glow: rgba(255, 255, 255, .95);
    --ring-glow-blur: 12px;
  }
  .p-48h-spin .spin-ring__sweep { stroke: url(#spinGrad48); }
  /* disc = CONCEPT 明地塗り(--bg-alt) / top・点灯 = #e8e8e8 / 枠 = --line */
  .p-disc { background: var(--bg-alt); border-color: var(--line); }
  .p-disc--top { background: #e8e8e8; border-color: var(--line); }
  .p-disc.is-lit { background: #e8e8e8; border-color: var(--line); box-shadow: none; }
  /* ラベル = ink・影なし・ゴシック(var(--sans))・拡大(26px=実効~11px)。CONCEPT と同一レシピ。
     各ラベルを disc 中心(1536系)に left/top で置き transform:translate(-50%,-50%)+text-align:center で
     縦横とも disc 中央に重ねる(従来の上付き→中央化)。disc 中心: top(768,2120) tr(1010,2260) br(1010,2540) bottom(768,2680) bl(526,2540) tl(526,2260)。 */
  .p-48h-ring .p-disc-label  { color: var(--ink); text-shadow: none; font-family: var(--sans); font-size: 22px; line-height: 1.5; }
  /* ラベル top も一律 -2020(disc 中心に追従)。disc 中心: top(768,100) tr(1010,240) br(1010,520) bottom(768,660) bl(526,520) tl(526,240) */
  .p-48h-ring .p-lab--tr     { left: calc(50% + 242px); top: 240px; width: 170px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .p-48h-ring .p-lab--br     { left: calc(50% + 242px); top: 520px; width: 170px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .p-48h-ring .p-lab--bottom { left: 50%;               top: 660px; width: 170px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .p-48h-ring .p-lab--bl     { left: calc(50% - 242px); top: 520px; width: 170px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .p-48h-ring .p-lab--tl     { left: calc(50% - 242px); top: 240px; width: 170px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  /* 「48時間以内にリセット」= 折返し許可で更に拡大(25px)・top disc 中央に2行で重なる。 */
  .p-48h-ring .p-lab--top    { left: 50%;               top: 100px; width: 180px; transform: translate(-50%, -50%); text-align: center; white-space: normal; font-size: 25px; line-height: 1.36; }
  /* 中央縦テキスト: 84×280・中心維持(top -2020) ＋ 明地用 ink SVG を背景で差替え(白SVGは不可視) */
  .p-ring-vtext { width: 84px; height: 280px; left: calc(50% - 42px); top: 240px; background: url(cycle-vtext-ink.svg) center / contain no-repeat; }
  .p-ring-vtext img { display: none; }

  /* ---- 2STEP KIT ---- */
  .p-2step-bg { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .p-2step-head { position: relative; left: auto; top: auto; width: auto; padding: 48px 24px 0; }
  .p-2step-rr   { position: relative; left: auto; top: auto; padding: 8px 24px 0; }
  .p-2step-body { position: relative; left: auto; top: auto; width: auto; padding: 12px 24px 0; }
  .p-step { position: relative; left: auto; top: auto; width: auto; margin-top: 22px; padding: 0 24px; }
  /* [sp1#3] order で STEP1→写真1→STEP2→写真2。STEP2 は block 分離のため上余白を広げる */
  .p-step--1 { left: auto; order: 1; }
  .p-step--2 { left: auto; order: 3; margin-top: 40px; }
  .p-step .no { color: var(--ink-60); }   /* 白→可読グレー（地はグレー素地） */
  .p-step-photo--1, .p-step-photo--2 { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 14px 24px 0; aspect-ratio: 431 / 288; }
  .p-step-photo--1 { order: 2; }
  /* [sp1#4] 2STEP ブロック末尾→次の帯画像 の余白 */
  .p-step-photo--2 { order: 4; margin-bottom: 56px; }
  .p-step-photo img { height: 100%; }

  /* ---- 全幅セパレータ帯(明): 全幅 3/2 ---- */
  .p-band-reset, .p-band-sep, .p-band-bottom { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; }

  /* ---- 商品詳細: 絶対配置→1カラム(24px ガター)。
     [sp1#5] margin-top=40 で「上の帯画像→商品名」の余白を少し広げる。
     [sp1#7] margin-bottom=28（+ HOW TO flow padding-bottom 44 = 72px）で「最後のHOW TOカード→次の帯画像」を広げる。 ---- */
  .p-detail { position: relative; left: auto; top: auto; width: auto; margin: 40px 0 28px; padding: 0 24px; }
  .p-detail--1, .p-detail--2 { top: auto; }
  .p-detail__intro p { text-align: left; }   /* 狭幅で justify のガタつき回避 */

  /* カルーセル: メイン画像は全幅。サムネ列だけ内部横スクロール（ページは横スクロールさせない） */
  .p-carousel__thumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .p-carousel__thumbs > li { flex: 0 0 88px; }

  /* 主要成分: 2カラム→1カラム積み。[sp1#6] 行を高く(padding/row-gap)・説明文を一回り小さく(16→14)・行高を上げる */
  .p-ing .row { grid-template-columns: 1fr; padding: 16px 0; row-gap: 6px; }
  .p-ing .nm { line-height: 26px; }
  .p-ing .ds { font-size: 14px; line-height: 24px; }

  /* パッド構造: 2カラム→縦積み */
  .p-pad { flex-direction: column; gap: 16px; }
  .p-pad__photo { width: 100%; }

  /* HOW TO USE: 多カラム(PADS4/SERUM3)→1カラム */
  .p-howto__flow { flex-direction: column; gap: 16px; }
  .p-howto__card { flex: 0 0 auto; width: 100%; }

  /* ---- ご購入（購入導線）[C1] フロー1カラム・ボタン全幅 ---- */
  .p-buy { margin-left: 0; width: auto; padding: 0 24px; margin-top: 56px; }
  .p-buy__head { font-size: 24px; }
  .p-buy__btns { gap: 12px; }
  .p-buy__btn { width: 100%; text-align: center; padding: 16px 24px; }

  /* ---- 注釈 / フッター余白 [sp1#9] 底帯→注釈 を generous に ---- */
  .p-notes { margin-left: 0; width: auto; padding: 56px 24px 0; margin-top: 0; }  /* モバイルは padding-top 56px で間隔確保済＝PC の margin-top を打ち消す */
  #site-footer { margin-top: 40px; }
}