/* =====================================================================
   bySENSE — CONCEPT page-specific layout (concept.css)
   Figma frame 1:471 (1536 x 8593). 1536px 固定ステージ上の絶対座標。
   全座標は get_metadata(1:471) の子ノード実測値。base.css / components.css の
   トークン・共通クラスを使用。共通CSSは汚さない(本ファイルのみ)。
   y範囲は node-map / Figma実測準拠。
   ===================================================================== */

/* stage height: [C1] カスケード再計算。below-fv(base.css: top=100vh−1082) 補正込み(−82px)。
   footer CSS top9073 → 実bottom = 9073−82+530 = 9521。100vh(1000)+X=9521 → X=8521。
   AGING 2段復元(+1024)・title カード外化・図/ベン図/3カード調整・notes 追加で全高変動。 */
.concept-stage { /* flow: 固定高撤廃。高さは hero(100vh)+各 .c-sec+notes+footer の積み上げで自動(=9601@vh1080) */ }

/* ── Phase1 flow/grid化（セッション16）: 旧 .below-fv(base.css top:calc(100vh-1082)) 絶対
   カスケードをマクロセクション(.c-sec)へ sectionize。各 .c-sec は relative・幅100%・Figma縦スパンを
   explicit height で保持し順にフロー（hero=100vh が 1082->100vh の -2px offset を吸収＝総高/各page-y不変）。
   重なり島(2画像跨ぎ円・蓄積図カード・48hリング・写真帯上テキスト)は各セクション内 absolute
   (local-top = 旧F-top - セクションF開始) で封じ込め。境界は無地#d0d0d0 gap か写真帯seam上のみ。 */
.c-sec { position: relative; width: 100%; }
.c-sec--benefit { height: 566px; }   /* F1082->1648 (hero下端->AGING img1上端seam) */
.c-sec--aging   { height: 2050px; }  /* F1648->3698 (2段画像1026+1024・跨ぎ円島) */
.c-sec--accum   { height: 1763px; }  /* F3698->5461 (無地・蓄積メカニズム図カード島) */
.c-sec--cycle   { height: 1265px; }  /* F5461->6726 (無地・48hリセットリング島) */
.c-sec--method  { height: 1024px; }  /* F6726->7750 (method写真帯) */
.c-sec--sustain { height: 1104px; }  /* F7750->8870 (sustain写真帯1024+末尾80=注釈前の余白を全ページ80に統一) */

/* ============ [Phase2] stage 流体化（.concept-stage スコープ＝他5ページ無影響・STORY/KOJI/TOPと同方式） ============
   base.css .stage は width:1536固定＋margin-left:calc((100vw-1536)/2)（narrow は負マージン中央クリップ＝左端欠け）。
   Phase2 は width:100%+max-width で 1536超は中央寄せ(現状維持)・1536未満で縮む(左端クリップ解消)。1536で描画完全一致。 */
.stage.concept-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 全幅へ（base .stage .bleed の固定1536前提式を上書き）。
   特異性 .stage.concept-stage .bleed (0,3,0) > base .stage .bleed (0,2,0) で確実に上書き。 */
.stage.concept-stage .bleed { left: 50%; margin-left: -50vw; width: 100vw; }
/* ── [Phase2] 水平座標の比例化: トップレベル列 left/width=calc(N/1536*100%)・中央ピン幾何島(リング/disc/縦書/divider)=calc(50% ± N)。
   帯/セクション height・島内部幾何(円/disc/ベン円/vtext/SVG/線画図)・固定deco幅(47)・padding/border は据置き。1536で厳密一致。 */

/* ---------------------------------------------------------------------
   SECTION 01 | USER BENEFIT  (y0–1648)
   hero IMG_0662 1:474 (x-43 y0 w1621 h1082) / H1 "CONCEPT" 1:478 (x127 y768)
   H2 1:529 (x383 y1184 w672) / body 1:530 (x383 y1328 w448)
   Line43 縦 1:475 (x127 y1022 h120) / Line42 横 1:476 (y1082 w1536)
   _デザイン 1:479 (x128 y1184 w47 h308)
   --------------------------------------------------------------------- */
.c-hero {
  position: relative; width: 100%; height: 100vh; z-index: 0;   /* 旧 absolute(left0 top0 w1536) -> フロー先頭 */
}
/* 写真ラッパ（.bleed付与で100vw） */
.c-hero__bg { position: absolute; top: 0; height: 100%; z-index: 0; overflow: hidden; }
.c-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* hero 上の暗幕(白文字視認性) — 100vw ブリード写真層を覆う */
.c-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,15,.18), rgba(20,18,15,.04) 38%, rgba(20,18,15,.10));
}
/* 前景ラッパ: 1082px高・FV下端固定。子は Figma 原寸 top のまま */
.c-hero__fg { position: absolute; left: 0; bottom: 0; width: 100%; height: 1082px; z-index: 3; }
/* H1 CONCEPT — hero前景内 左 x127 y768 (Mincho 24/42/tracking6, 白) */
.c-h1 {
  position: absolute; left: calc(127 / 1536 * 100%); top: 768px; width: min(672px, calc(672 / 1536 * 100%)); height: 42px;
  font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 42px; letter-spacing: 6px;
  color: var(--white);
}
/* FV日本語見出し [fb4 CONCEPT] — H1「CONCEPT」(top768)直下 x127 y865 w672.
   STORY .ab-hero__h2「肌を育てることは、自分を知ること。」と同等 (Mincho 500 24/48/tracking3・白).
   他ページFV(STORY/KOJI)とフォント・サイズ感・配置(H1下・FV下端ラッパ内)を統一. */
.c-hero__h2 {
  position: absolute; left: calc(127 / 1536 * 100%); top: 865px; width: min(672px, calc(672 / 1536 * 100%));
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--white);
}
/* 縦アクセント線 x127 y1022 h120 (hero下端へ) */
.c-hero-vline {
  position: absolute; left: calc(127 / 1536 * 100%); top: 1022px; height: 120px;
  border-left: 1px solid var(--line-on-dark);
}
/* hero下フル幅水平線 y1082 w1536 */
.c-hero-hline {
  position: absolute; left: 0; top: 1082px; width: 100%;
  border-top: 1px solid var(--line);
}
/* 縦組み装飾 _デザイン x128 y1184 w47 h308 */
.c-deco-1 { position: absolute; left: calc(128 / 1536 * 100%); top: 102px; width: 47px; height: 308px; opacity: .9; }   /* F1184 local */
/* hero 画像クレジット (hero下端付近・左) [C9]. c-hero(top0,h100vh)相対 */
.c-hero-credit { left: 127px; bottom: 24px; z-index: 4; }

/* H2 1:529 x383 y1184 w672 (Mincho 24/48/tracking3, 濃) */
.c-benefit-h2 { position: absolute; left: calc(383 / 1536 * 100%); top: 102px; width: min(672px, calc(672 / 1536 * 100%)); }
/* body 1:530 x383 y1328 w448 (Kaku 16/32). 空行で群分け */
.c-benefit-body { position: absolute; left: calc(383 / 1536 * 100%); top: 246px; width: min(448px, calc(448 / 1536 * 100%)); }

/* ---------------------------------------------------------------------
   SECTION 02 | AGING  (y1648–3698)
   img1 IMG_0277 1:531 (x-1 y1648 w1536 h1026)
   img2 IMG_1210 1:532 (x-1 y2674 w1536 h1024)
   label "48-HOUR RESET CYCLE" 1:559 (x611 y1713 w313 h48) 中央寄
   H2 1:533 (x895 y1920 w384) 右列・白
   body 1:558 (x383 y3120 w384) 左列・白
   circle overlay 1:560 (x447 y2346 d640) thin outline + top dot + 縦テキスト
   --------------------------------------------------------------------- */
/* [C1] HEAD通り2段画像を復元 (img1 1648–2674 / img2 2674–3698) */
.c-aging-img1 { position: absolute; left: -1px; top: 0; width: 100%; height: 1026px; overflow: hidden; z-index: 0; }
.c-aging-img1 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-aging-img1::after { content: ""; position: absolute; inset: 0; background: var(--img-veil); }
.c-aging-img2 { position: absolute; left: -1px; top: 1026px; width: 100%; height: 1024px; overflow: hidden; z-index: 0; }
.c-aging-img2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-aging-img2::after { content: ""; position: absolute; inset: 0; background: var(--img-veil); }

/* ラベル "48-HOUR RESET CYCLE" x611 y1713 [C7] ゴシック・小・白半透明・中央寄 */
.c-aging-label {
  position: absolute; left: 0; top: 65px; width: 100%; height: 48px; z-index: 4;
  font-family: var(--sans); font-weight: 500;   /* [fb5] PRODUCT .p-48h__label と同サイズに: 16→24 / 400→500 / .14em→3px・stage中央寄せ(left0 w1536) */
  font-size: 24px; line-height: 48px; letter-spacing: 3px;
  color: rgba(255,255,255,.82); text-align: center; white-space: nowrap;
}
/* H2 老化は… x895 y1920 w384 右列・白 (img1内) */
.c-aging-h2 { position: absolute; left: calc(895 / 1536 * 100%); top: 272px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 4; color: var(--white); }
/* body 肌老化は… [C1] 本文(テキスト)のみ1段目(img1内・右列)に配置。見出し直下 */
.c-aging-body { position: absolute; left: calc(895 / 1536 * 100%); top: 440px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 4; color: var(--white); }

/* circle overlay — [C1] HEAD通り2画像に跨る大円(d640, top2354, 中心y2674=画像の境目).
   TOP同様 spin-ring 化 (base円=常時視認 + sweep が自動回転 + 明るめ glow=PRODUCT好評の光感). */
/* [fb4 CONCEPT] AGING円(48時間、肌リズム)を TOP .concept-spin に合わせる:
   spin18s→8s / w-sweep2→1.3 / glow.95→.55 / blur12→7 / base.42→.30 / w-base1.
   暗写真上の白リングという条件はTOP(浴室暗写真)と同じ. dasharrayは半径依存のため現状維持. */
.c-aging-spin {
  left: calc(50% - 321px); top: 706px; width: 640px; height: 640px; z-index: 5;   /* [Phase2]④中央ピン: 島中心x767=50%-1px → 半幅320+1 */
  --ring-base: rgba(255,255,255,.30);   /* TOP相当: 暗写真上で常時うっすら視認 */
  --ring-w-base: 1;
  --ring-w-sweep: 1.3;
  --ring-spin: 5s;   /* fb5: 8→5s TOP/PRODUCTと同速 */
  --ring-glow: rgba(255,255,255,.55);
  --ring-glow-blur: 7px;
}
.c-aging-spin .spin-ring__sweep { stroke: url(#spinGradAging); }
/* 小ドットは静止 [C1] (HEADのorbit/dotではなく固定). 円の上端 (top2346, 中心x767) */
.c-aging-dot {
  position: absolute; left: calc(50% - 9px); top: 698px; width: 16px; height: 16px; z-index: 6;   /* [Phase2]④中央ピン: dot中心767=50%-1px → 半幅8+1 */
  border-radius: 50%; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.35);
  box-shadow: 0 0 10px rgba(255,255,255,.6);
}
/* 中央縦テキスト x735 y2578 w64 h213 (円中心付近) */
.c-aging-circle__vtext {
  position: absolute; left: calc(50% - 33px); top: 930px; width: 64px; height: 213px; z-index: 6;   /* [Phase2]④中央ピン: vtext中心767=50%-1px → 半幅32+1 */
}

/* ---------------------------------------------------------------------
   SECTION 03 | ACCUMULATION  (y3698–4661)  無地#d0d0d0
   H2 1:534 (x383 y3792 w672) / body 1:535 (x383 y3904 w736)
   image IMG_0649 1:641 (x384 y4064 w895 h597)
   --------------------------------------------------------------------- */
/* AGING(img2 下端3698)直後. 無地#d0d0d0 [C1 カスケード: AGING 2段復元で +1024] */
.c-accum-h2 { position: absolute; left: calc(320 / 1536 * 100%); top: 94px; width: min(672px, calc(672 / 1536 * 100%)); }
.c-accum-body { position: absolute; left: calc(320 / 1536 * 100%); top: 206px; width: min(736px, calc(736 / 1536 * 100%)); }

/* [C2] タイトル「肌表面で起きていること」= カード外(カード上)・c-accum-h2 と同 t-head 系.
   前コンテンツ(body 下端~4032)との余白をほんの少しだけ詰める. probe 駆動で確定. */
.c-fig-title {
  position: absolute; left: calc(320 / 1536 * 100%); top: 422px; width: min(895px, calc(895 / 1536 * 100%)); margin: 0;
}

/* 蓄積メカニズム 線画フロー図 = 白背景1カード [C5]. 895pxカラム内・左揃え(マガジン)。
   SVG=アイコン/図グリフ, HTML=全テキスト. 縦フロー= flex column. top/heightは probe 実測駆動。
   モノトーン: stroke = --ink / グレー, 細線, ベージュ/桃色なし, 塗りは控えめなグレーのみ。
   タイトルはカード外に分離したのでカード内 padding-top を詰める. */
.c-accum-fig {
  position: absolute; left: calc(320 / 1536 * 100%); top: 518px; width: min(895px, calc(895 / 1536 * 100%));
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--ink);
  /* 白背景1カード (90度角・細罫＋控えめ影) [C5] */
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(57,60,65,.08);
  padding: 52px 64px 60px;
}

/* --- 共通グリフ枠 --- */
.c-fig-glyph { display: inline-flex; width: 48px; height: 48px; color: var(--ink); }
.c-fig-glyph svg { width: 100%; height: 100%; display: block; }
.c-fig-glyph--sm { width: 32px; height: 32px; }

/* --- 下向き矢印 (各段の間) --- */
.c-fig-arrow { display: inline-flex; width: 16px; height: 28px; color: var(--ink); opacity: .5; margin: 14px 0 14px 0; align-self: center; }
.c-fig-arrow svg { width: 100%; height: 100%; display: block; }

/* --- 4要因 横並び [C4] ブロック全体をカード幅の水平中央に (横並びは維持) --- */
.c-fig-sources {
  display: flex; gap: 28px; align-items: flex-start;
  align-self: center;
  /* [Phase2③] ネスト子=親カード基準で追従。行intrinsic幅=4×132+3×28=612px がカード(narrowで~447px)を
     超え両端アイコンがカード外gray地へはみ出す破綻を解消。1536はカードcontent(767)≥612 で min=612=描画不変(diff0)、
     narrowはカード幅に追従(flex-shrinkでアイコン内寄せ)。justify-content:center で narrow時カード内中央維持
     (1536は余白0=無影響)。アイコンSVG/ラベルの固定寸・gap・各 c-fig-source 据置き。 */
  width: min(612px, 100%); justify-content: center;
}
.c-fig-source {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 132px;
}
/* --- 4要因・3要素 共通ラベル (ゴシック) --- */
.c-fig-label {
  font-family: var(--sans); font-weight: 500;
  font-size: 14px; line-height: 1.5; letter-spacing: .04em; color: var(--ink);
  text-align: center; white-space: nowrap;
}

/* --- 3要素 重なり合う円 (ベン図) [C6] --- */
.c-fig-venn {
  position: relative; align-self: center;
  width: 420px; height: 280px;
}
/* 3円: 上1・下2 の三角配置で互いに重なる. モノトーン線画 */
.c-venn-circle {
  position: absolute; width: 224px; height: 224px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(57,60,65,.028);
}
.c-venn-circle--a { left: 98px;  top: 0;   }   /* 上 (酸化皮脂) */
.c-venn-circle--b { left: 0;     top: 56px; }  /* 左下 (古い角質) */
.c-venn-circle--c { left: 196px; top: 56px; }  /* 右下 (汚染物質) */
/* ラベル+グリフ: 各円の重ならない側(外周寄り)に配置 */
.c-venn-el {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* [C3] 酸化皮脂=そのまま(上円の上部). 古い角質・汚染物質=各サークルの中央下へ */
.c-venn-el--a { left: 161px; top: 36px;  width: 98px; }  /* 酸化皮脂: 上円の上部(維持) */
.c-venn-el--b { left: 63px;  top: 192px; width: 98px; }  /* 古い角質: 左下円の中央下 (中心x112) */
.c-venn-el--c { left: 259px; top: 192px; width: 98px; }  /* 汚染物質: 右下円の中央下 (中心x308) */

/* --- 段ステージ (蓄積帯 / 断面) — テクスチャ帯 + ラベル --- */
.c-fig-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.c-fig-band {
  display: block; width: 640px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: rgba(57,60,65,.012);
}
.c-fig-band img { width: 100%; height: auto; display: block; }
.c-fig-stage-label {
  font-family: var(--sans); font-weight: 500;
  font-size: 15px; line-height: 1.5; letter-spacing: .04em; color: var(--ink); text-align: center;
}
/* Micro Inflammation (英語サブ・小・明朝・薄め) */
.c-fig-en {
  display: block; font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 12px; line-height: 1.4; letter-spacing: .1em; color: var(--ink-60);
  margin-top: 2px;
}
/* [C5] 慢性的な微弱炎症: 断面SVGの凹み箇所に くすんだ赤み/淡いピンク系の横長グラデ楕円を
   控えめに重ね、炎症感を表現. band を相対化しグラデを絶対重畳 (line-art の上に乗せる). */
.c-fig-stage--inflam .c-fig-band { position: relative; }
.c-inflam-glow {
  position: absolute; z-index: 1; pointer-events: none;
  height: 30px; border-radius: 50%; opacity: .9;
  /* 横長楕円: 中心は濃いめのくすんだ赤み→端へ向け淡いピンク→透明 */
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(193,108,108,.42) 0%, rgba(214,160,160,.26) 42%, rgba(214,160,160,0) 78%);
  filter: blur(2px);
}
/* SVG viewBox 640幅 → band 実描画幅(可変)に % 換算で凹み箇所(x≈240 / x≈480)へ */
.c-inflam-glow--1 { left: 22%; width: 26%; top: 8px; }
.c-inflam-glow--2 { left: 60%; width: 26%; top: 8px; }

/* --- 結論 「肌老化の加速」 角丸枠・明朝・少し大きめ --- */
.c-fig-result {
  align-self: center;
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; line-height: 1.5; letter-spacing: .12em; color: var(--ink);
  padding: 18px 44px; border: 1px solid var(--line); border-radius: 999px;
  text-align: center; white-space: nowrap;
}

/* ---------------------------------------------------------------------
   SECTION 04 | 48H CYCLE  (text y4768–5040 / diagram y5040–5919)  無地
   H2 1:671 (x382 y4768 w672) / body 1:672 (x382 y4880 w333)
   diagram: big ellipse 1:595 (x511 y5160 d640)
            center 縦テキスト 1:596 (x799 y5384 w64 h213)
            6 discs d240: 1:628 top(x711 y5040) 1:630 TR(x988 y5200)
              1:632 BR(x988 y5521) 1:629 bottom(x711 y5679)
              1:633 BL(x434 y5521) 1:631 TL(x434 y5200)
            labels(32h): 1:635/636/637/638/639/640
   --------------------------------------------------------------------- */
/* [C1 カスケード] AGING 2段復元(+1024)・title カード外化で fig下端 CSS≈5351 起点で全再計算(Δ+761) */
.c-cycle-h2 { position: absolute; left: calc(320 / 1536 * 100%); top: 0; width: min(672px, calc(672 / 1536 * 100%)); }
.c-cycle-body { position: absolute; left: calc(320 / 1536 * 100%); top: 112px; width: min(333px, calc(333 / 1536 * 100%)); }

/* 大円 = 共通 spin-ring (常時視認＋連続回転＋白グロー) [C4]. PRODUCTと同機構。
   明地グレー#d0d0d0上: base は ink系で常時視認、glow は白で「光ってる感じ」。
   left/top は probe 駆動でカスケード再計算 (6 disc 中心 d640 を通す). */
/* [C8] 大円が「消えてる」問題を解消し PRODUCT同様の spin-ring (常時見える base円+回転sweep+
   明るい glow). 6 disc 点灯は維持. left/top は probe 駆動で 6 disc 中心 d640 を通す. */
/* [fb4 CONCEPT] 自動回転を PRODUCT(.p-48h-spin)に合わせ spin18s→8s. イージング(強弱)は
   base.css の --ring-ease 既定で自動付与. glow/base/線幅は client「秀逸」と評価した現デザインを維持. */
.c-48h-spin {
  left: calc(50% - 320px); top: 392px; width: 640px; height: 640px;   /* C1 cascade Δ+761 / [Phase2]④中央ピン: 島中心x768=50% → 半幅320 */
  --ring-base: rgba(57,60,65,.42);   /* 明地#d0d0d0 上で常時うっすら視認 */
  --ring-w: 1.5;
  --ring-w-base: 1.5;
  --ring-w-sweep: 2;
  --ring-spin: 5s;                    /* PRODUCT/TOPと同速・5sへ高速化 [fb5] */
  --ring-glow: rgba(255,255,255,.95); /* sweep 先端の白グロー=「光ってる感じ」(維持) */
  --ring-glow-blur: 12px;
}
/* sweep = 透明→ink濃→白先端 の濃淡グラデ(下の #spinGrad48)。明地で濃淡の回転が見える。
   [fb4]「白の反映をもう少し長く」= コメットの描画弧を伸ばし回転を見えやすく:
   stroke-dasharray の描画長を 1170→1400 (gap 836→606) に延長 (周長~2004 維持). */
.c-48h-spin .spin-ring__sweep { stroke: url(#spinGrad48); stroke-dasharray: 1400 606; }
/* 中央縦テキスト x799 y5384 w64 h213 */
.c-ring-vtext {
  position: absolute; left: calc(50% - 32px); top: 616px; width: 64px; height: 213px; z-index: 3;  /* C1 Δ+761 / [Phase2]④中央ピン: vtext中心768=50% → 半幅32 */
}
/* 6 disc 共通 (d240, 薄グレー塗り + hairline). 各 disc は絶対 x/y(左上) */
.c-disc {
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: var(--bg-alt); border: 1px solid var(--line); z-index: 2;
}
.c-disc--top   { left: calc(50% - 120px); top: 272px; }   /* C1 Δ+761 / [Phase2]④中央ピン d240 中心768 */
.c-disc--tr    { left: calc(50% + 157px); top: 432px; }   /* 中心1045=768+277 → +277-120 */
.c-disc--br    { left: calc(50% + 157px); top: 753px; }
.c-disc--bottom{ left: calc(50% - 120px); top: 911px; }
.c-disc--bl    { left: calc(50% - 397px); top: 753px; }   /* 中心491=768-277 → -277-120 */
.c-disc--tl    { left: calc(50% - 397px); top: 432px; }
/* top disc = スタート/リセット。不透明グレー寄りの塗り(透過させず下の円を透かさない)・枠は元グレー [user feedback 3e] */
.c-disc--top { background: #e8e8e8; }
/* スクロール連動の点灯(時計回り): 内側は不透明グレー寄りの塗り。枠線(--line グレー)は不変 */
.c-disc.is-lit { background: #e8e8e8; }

/* disc ラベル (Mincho 16/32 濃, 中央寄せ). 各 disc 中心に重なる */
.c-disc-label {
  position: absolute; z-index: 4; font-family: var(--serif); font-weight: 500;
  font-size: 16px; line-height: 32px; letter-spacing: .04em; color: var(--ink);
  text-align: center; white-space: nowrap;
}
/* metadata 実測 x/y(各ラベル node 左上) */
.c-lab--top    { left: calc(50% - 80px);  top: 376px; width: 161px; }   /* 48時間以内にリセット C1 Δ+761 / [Phase2]④中央ピン left のみ */
.c-lab--tr     { left: calc(50% + 245px); top: 536px; width: 64px;  }   /* 皮脂分泌 */
.c-lab--tl     { left: calc(50% - 325px); top: 536px; width: 96px;  }   /* 肌環境の乱れ */
.c-lab--br     { left: calc(50% + 261px); top: 857px; width: 32px;  }   /* 酸化 */
.c-lab--bottom { left: calc(50% - 40px);  top: 1015px; width: 80px;  }   /* 汚れと混合 */
.c-lab--bl     { left: calc(50% - 293px); top: 857px; width: 32px;  }   /* 蓄積 */

/* ---------------------------------------------------------------------
   SECTION 05 | METHOD  (y6016–7039)  full-bleed
   band IMG_1377 1:472 (x-1 y6016 w1536 h1024)
   H2 1:643 (x895 y6122 w384) 右列・白 / body 1:644 (x895 y6250 w384) 白
   --------------------------------------------------------------------- */
/* [C1 cascade] 48h図下端 起点. 48hリング下 gap を 130 に整え method 以降を −85 補正 */
.c-method-band { position: absolute; left: -1px; top: 0; width: 100%; height: 1024px; overflow: hidden; z-index: 0; }
.c-method-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-method-band::after { content: ""; position: absolute; inset: 0; background: var(--img-veil); }
/* [C9] method画像は麹でない(ランプ/書籍/製品)→クレジット削除済 */
.c-method-h2 { position: absolute; left: calc(895 / 1536 * 100%); top: 106px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); }
.c-method-body { position: absolute; left: calc(895 / 1536 * 100%); top: 234px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); }

/* ---------------------------------------------------------------------
   SECTION 06 | SUSTAINABILITY  (y7039–7728)  full-bleed
   band IMG_1348 1:473 (x-1 y7039 w1536 h1024)
   H2 1:646 (x384 y7168 w384) 左列・白 / body 1:647 (x384 y7296 w384 h432) 白・連続テキスト
   --------------------------------------------------------------------- */
/* [C1 cascade] method帯下端 7750 に接続 (−85補正) */
.c-sustain-band { position: absolute; left: -1px; top: 0; width: 100%; height: 1024px; overflow: hidden; z-index: 0; }
.c-sustain-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-sustain-band::after { content: ""; position: absolute; inset: 0; background: var(--img-veil); }
/* [fb4 CONCEPT] 見出し左端を本文グリッド(left320)に合わせ少し左へ(384→320). カードブロックと左端統一. */
.c-sustain-h2 { position: absolute; left: calc(320 / 1536 * 100%); top: 129px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); }
/* [C9] sustain画像は麹でない(再生紙)→クレジット削除済 */

/* 循環 3カード [C6]. 暗写真上のカード・90度角. マガジン左揃え.
   [fb4 CONCEPT] 右寄り見えを解消: 左端を本文グリッド(left320)へ、幅を1056→896に絞り
   ブロックを左右均等(left320=右余白320)＝センター見えに調整.
   [fb5-2] 縦長カードに横長の画像枠＋テキストを内包. [fb6] カードは透過白背景のみ・白枠なし／画像枠も白枠なしで画像を内包. */
.c-sustain-cards {
  position: absolute; left: calc(320 / 1536 * 100%); top: 301px; width: min(896px, calc(896 / 1536 * 100%)); z-index: 3;
  display: flex; gap: 28px;
}
.c-sus-card {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 20px 20px 26px;            /* [fb5-2] 画像枠＋テキストを内包する縦長カード(余白で納める) */
  background: rgba(255,255,255,0.08); /* [fb6] 透過白背景のみ(うっすら白の塗り)・白枠なし */
}
/* [C6] アイコン廃止→画像エリア(プレースホルダ・後日差替). 中央配置で自動トリミング.
   [fb5-2 CONCEPT] 横長(√2:1)・サイズ感は維持. [fb6] 画像を内包(白枠削除). object-fit:cover＋overflow:hidden で中央トリミング・はみ出し非表示. */
.c-sus-img {
  display: block; width: 100%; aspect-ratio: 1.41421356 / 1; margin-bottom: 18px;
  background: transparent;            /* [fb6] 白枠削除. 画像でカバー */
  object-fit: cover; object-position: center;
  overflow: hidden;
}
.c-sus-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.c-sus-h3 {
  font-family: var(--sans); font-weight: 500;
  font-size: 17px; line-height: 1.6; letter-spacing: .04em; color: var(--white);
  margin-bottom: 12px;
}
.c-sus-txt {
  font-family: var(--sans); font-weight: 400;
  font-size: 14px; line-height: 1.85; letter-spacing: .02em; color: rgba(255,255,255,.88);
}
.c-sus-txt sup { font-size: .7em; }

/* 区切り装飾 1:648 (スクロール/区切り。read-moreではない). sustain帯内・下部 [C1 Δ+761] */
.c-divider {
  position: absolute; left: calc(50% - 32px); top: 964px; width: 61.8px; height: 8px; z-index: 3;   /* [Phase2]④中央ピン: left736=50%-32 で中央寄せ維持 */
  display: flex; align-items: center; justify-content: space-between;
}
.c-divider span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .35; }
.c-divider span.is-on { width: 18px; border-radius: 3px; opacity: .7; }

/* ---------------------------------------------------------------------
   NOTES  [C10] footer 直上・グリッド左(left128 w1280)・無地エリア.
   sustain帯下端 CSS8859 の下(無地)に上余白~96で配置. footer は notes の下.
   --------------------------------------------------------------------- */
.c-notes { position: relative; margin-left: calc(128 / 1536 * 100%); width: min(1280px, calc(1280 / 1536 * 100%)); z-index: 1; }   /* フロー(sustain直後) / [Phase2]flow式②: 128/1280/128 グリッドを比例維持(narrow右はみ出し防止) */

/* ---------------------------------------------------------------------
   FOOTER  (h530, 共通 components.css). notes の下 (下余白~96) [C1/C10]
   --------------------------------------------------------------------- */
#site-footer { position: relative; width: 100%; margin-top: 80px; }   /* フロー(notes直後・注釈後の余白を全ページ80に統一) */

/* ---------------------------------------------------------------------
   縦組みテキスト共通 helper (円の中央テキスト)
   右→左の2列。Zen Old Mincho。数字「48」は縦中横。
   --------------------------------------------------------------------- */
/* 縦組みテキスト = Figma現物SVG (CSS writing-mode の崩れ回避・Phase C) */
.c-aging-circle__vtext img,
.c-ring-vtext img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* [sp1] スマホ専用ラッパ: desktop(≥768)では display:contents で「箱を生成しない」=
   子(label/h2/body・ring/dot/vtext)は従来どおり section を包含ブロックに絶対配置され PC描画不変。
   <768 の @media で各ラッパを display:block + position へ昇格させ、オーバーレイ/島スケールの箱にする。 */
.c-aging-overlay, .c-aging-ring-island, .c-method-overlay { display: contents; }

/* =====================================================================
   [Phase3] スマホ専用 (<768) — CONCEPT
   STORY(about.css)末尾ブロックと同方式。マクロセクション(.c-sec)を height:auto 化、
   絶対配置の島を relative フローへ。写真帯=全幅(3:2)・本文=1カラム(24pxガター)。
   写真上の白文字(AGING/METHOD/SUSTAIN)は無地グレー上へ降りるため濃文字(--ink)へ。
   HERO のみ白文字オーバーレイ維持(100svh)。
   幾何島(AGINGリング/48hリング/ベン図)は transform:scale で「幾何を保ったまま中央・縮小」。
   横はみ出しは transform 後の scrollable-overflow がビューポート内のため発生しない(縦のみ flow 相殺)。
   全ルール <768 ガード ＝ 1536/デスクトップ回帰ゼロ。
   ===================================================================== */
@media (max-width: 767px) {
  /* (a) stage 1200フロア除去 + bleed の水平オフセット中和(全幅=viewport) */
  .stage.concept-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
  .stage.concept-stage .bleed { left: 0; margin-left: 0; width: 100%; }
  /* (b) 6マクロセクション: explicit height 撤廃 → 内容で自動 */
  .c-sec { height: auto; }

  /* ---- HERO (白文字オーバーレイ維持・STORY .ab-hero 型) ---- */
  .c-hero { height: 100svh; }
  .c-hero__fg { height: auto; top: auto; bottom: 0; left: 0; width: 100%; padding: 0 24px 72px; }   /* [A] bottom 44→72: タイトルをヘアライン combo の上へ少し持ち上げ */
  .c-h1 { position: static; left: auto; top: auto; width: auto; height: auto; font-size: 20px; line-height: 1.4; letter-spacing: 4px; }
  .c-hero__h2 { position: static; left: auto; top: auto; width: auto; margin-top: 6px; font-size: 22px; line-height: 36px; }
  /* [A] FV ヘアライン combo (TOP .fv と同型・sitewide要件). c-hero__fg(bottom0=hero下端)相対 → top基準を bottom 基準へ切替。
     (a) 左下 縦アクセント left24・hero下端を跨いで下へ(scroll cue, ::after の流れる白セグメントは components.css 既定)・白.6
     (b) 全幅 水平ベースライン hero下端付近・白.28。横溢れ無し(360/390: vline=left24 幅1px / hline=left0 w100%) */
  .c-hero-vline { display: block; left: 24px; right: auto; top: auto; bottom: -40px; height: 96px; border-left-color: rgba(255,255,255,.6); }
  .c-hero-hline { display: block; left: 0; right: auto; top: auto; bottom: 0; width: 100%; border-top-color: rgba(255,255,255,.28); }

  /* ---- SECTION 01 | BENEFIT (無地・濃文字) ---- */
  .c-deco-1 { display: none; }                                              /* (h) 縦組み装飾 */
  .c-benefit-h2 { position: relative; left: auto; top: auto; width: auto; padding: 64px 24px 0; }
  .c-benefit-body { position: relative; left: auto; top: auto; width: auto; padding: 28px 24px 64px; }

  /* ---- SECTION 02 | AGING (2段=全画面幅の縦長写真。上写真内に白文字オーバーレイ・円は継ぎ目を跨ぐ) [sp1] ---- */
  /* (d) 2画像: 全幅・縦積み・縦長(3/4)。等アスペクト → section高=img1+img2=2×img1高 → 継ぎ目=section の50% */
  .c-aging-img1, .c-aging-img2 { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; }
  /* 文字/円の視認用に暗幕を復活。img1=上部=白見出し用に重め・下部=継ぎ目(白リング)用に再び濃く、
     img2=上部=リング/縦書き用に濃く・下へフェード。継ぎ目に暗バンドを作り白リングを浮かせる。 */
  .c-aging-img1::after { display: block; background: linear-gradient(180deg, rgba(12,11,9,.62) 0%, rgba(12,11,9,.42) 42%, rgba(12,11,9,.32) 70%, rgba(12,11,9,.54) 100%); }
  .c-aging-img2::after { display: block; background: linear-gradient(180deg, rgba(12,11,9,.54) 0%, rgba(12,11,9,.30) 32%, rgba(12,11,9,.10) 70%, rgba(12,11,9,.04) 100%); }
  /* (e) タイトル/見出し/本文 = 上写真(img1)内の白文字オーバーレイ。ラッパを絶対化し上部へ */
  .c-aging-overlay { display: block; position: absolute; left: 0; top: 0; width: 100%; z-index: 5; padding: 64px 28px 0; }
  /* [C] 英語キッカー「48-HOUR RESET CYCLE」を中央寄せ・拡大(13→18px / ls 2.5→3px)。下の H2/body は左寄せのまま */
  /* [sp2 fix2] 英語見出し(サイズはOK)だけ少し上へ＝margin-top -18px。h2 は +18(16→34)で位置据置き(英語見出しのみ上昇)。 */
  .c-aging-label { position: static; left: auto; top: auto; width: auto; height: auto; color: var(--white); font-size: 20px; line-height: 1.6; letter-spacing: 3px; padding: 0; margin-top: -18px; text-align: center; }
  .c-aging-h2 { position: static; left: auto; top: auto; width: auto; color: var(--white); padding: 0; margin-top: 34px; }
  .c-aging-body { position: static; left: auto; top: auto; width: auto; color: rgba(255,255,255,.92); padding: 0; margin-top: 18px; }
  /* リング島: ring+dot+vtext を 640四方の島に封じ、継ぎ目(section の50%)に島中心を置いて scale。
     dot/vtext は島の子として一緒に拡縮 = PCデザイン踏襲(頂点の白丸・縦書きを復元)。disc 無しのため
     S は CYCLE より大きく取れる(360で 180-320*S≥0 → S≤0.56)。S=0.52 で写真上に映える白リング。 */
  .c-aging-ring-island {
    display: block; position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; z-index: 6;
    transform: translate(-50%, -50%) scale(0.52); transform-origin: center center;
  }
  .c-aging-ring-island .c-aging-spin {
    display: block; position: absolute; left: 0; top: 0; width: 640px; height: 640px; margin: 0;
    --ring-base: rgba(255,255,255,.66);             /* 写真上=PC同様の白リング(継ぎ目の暗バンドで視認) */
    --ring-w-base: 2.6; --ring-w-sweep: 3.2;        /* scale0.52 を相殺し ~1.4/1.7px 描画 */
  }
  .c-aging-ring-island .c-aging-dot {
    display: block; position: absolute; left: calc(50% - 8px); top: -8px; right: auto; bottom: auto;
    background: rgba(255,255,255,.92);              /* 頂点の白丸を明確に(feedback: 頂点の白丸含め復元) */
    box-shadow: 0 0 14px rgba(255,255,255,.7);
  }
  .c-aging-ring-island .c-aging-circle__vtext {
    /* [D] 縦書き「肌リズム」を TOP に合わせ拡大(64×213 → 84×280)。ring中心維持のため left/top 再調整(島 scale0.52 不変) */
    display: block; position: absolute; left: calc(50% - 42px); top: 190px; width: 84px; height: 280px; right: auto; bottom: auto;
  }

  /* ---- SECTION 03 | ACCUMULATION (無地・蓄積図 白カード) ---- */
  .c-accum-h2 { position: relative; left: auto; top: auto; width: auto; padding: 64px 24px 0; }
  .c-accum-body { position: relative; left: auto; top: auto; width: auto; padding: 20px 24px 0; }
  .c-fig-title { position: relative; left: auto; top: auto; width: auto; padding: 40px 24px 16px; }
  /* (c) カードをフロー化・全幅(左右24px)・内側 padding 縮小。白カード/ink線画はそのまま(白線でないため濃パネル不要) */
  .c-accum-fig { position: relative; left: auto; top: auto; width: auto; margin: 0 24px; padding: 28px 18px 32px; }
  /* (g) 4要因 横並び → 2x2 折返し(幅42%で360/390とも2列固定) */
  .c-fig-sources { width: 100%; flex-wrap: wrap; gap: 22px 12px; }
  .c-fig-source { width: 42%; }
  /* ベン図: 幾何(3円の重なり)保持・中央・縮小(S=0.64)。transform 後 visual≈269px が 360 の card 内にも収まる */
  .c-fig-venn { transform: scale(0.64); transform-origin: top center; margin-bottom: calc(280px * (0.64 - 1)); }

  /* ---- SECTION 04 | 48H CYCLE (回転リング + 6disc + ラベル + 縦書き 島) [sp1: 拡大・縦書き拡大・上ラベル折返し] ---- */
  /* ★ RING PATTERN 基準 — PRODUCT(.p-48h)が同じ手法を踏襲する。詳細は feedback/sp1-concept-changes.md 参照 */
  .c-cycle-h2 { position: relative; left: auto; top: auto; width: auto; padding: 64px 24px 0; }
  .c-cycle-body { position: relative; left: auto; top: auto; width: auto; padding: 16px 24px 0; }
  /* 島 wrapper [data-ring]: disc/ring/vtext/label は同一原点(共通の 50% = wrapper中心)。
     左右余白を詰めるため scale 0.42→0.44 に拡大(360で側面 disc が見切れない上限≈0.45)。
     translateY(-120px) で島 top(=272*0.44≈120)ぶんの上端ギャップを除去。height は visual 縦span を確保。 */
  .c-sec--cycle [data-ring] {
    position: relative; left: 0; width: 100%;
    height: 392px;
    transform: translateY(-120px) scale(0.44); transform-origin: top center;
    margin: 12px 0 64px;                            /* 下 = サークルと次画像の余白を拡大 (feedback #3) */
  }
  /* 縦書きを一回り大きく(64×213 → 84×280・比例)。中心(ring中心)維持のため top を上げる */
  .c-sec--cycle .c-ring-vtext { width: 84px; height: 280px; left: calc(50% - 42px); top: 582px; }
  /* [E] 外周6 disc ラベル: ゴシック化(--sans)＋各 disc 中心へ縦横センタリング(translate(-50%,-50%)+disc中心 left/top)。
     折返し許可(white-space:normal・width190)で text-align:center → 各 disc の正中に配置。PRODUCT も同レシピを踏襲。
     disc中心: top(50%,392) tr(50%+277,552) br(50%+277,873) bottom(50%,1031) bl(50%-277,873) tl(50%-277,552)。disc/ring の scale・transform は不変 */
  .c-sec--cycle .c-disc-label { font-family: var(--sans); font-size: 26px; line-height: 1.5; }
  .c-sec--cycle .c-lab--tr     { left: calc(50% + 277px); top: 552px;  width: 190px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .c-sec--cycle .c-lab--br     { left: calc(50% + 277px); top: 873px;  width: 190px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .c-sec--cycle .c-lab--bottom { left: 50%;                top: 1031px; width: 190px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .c-sec--cycle .c-lab--bl     { left: calc(50% - 277px); top: 873px;  width: 190px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .c-sec--cycle .c-lab--tl     { left: calc(50% - 277px); top: 552px;  width: 190px; transform: translate(-50%, -50%); text-align: center; white-space: normal; }
  .c-sec--cycle .c-lab--top    { left: 50%; top: 392px; width: 200px; transform: translate(-50%, -50%); text-align: center; white-space: normal; font-size: 30px; line-height: 1.36; }

  /* ---- SECTION 05 | METHOD (1枚目=全画面幅の縦長写真・見出し/本文を画像内に白文字オーバーレイ) [sp1] ---- */
  .c-method-band { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; }
  .c-method-band::after { display: block; background: linear-gradient(180deg, rgba(20,18,15,.5), rgba(20,18,15,.14) 52%, rgba(20,18,15,.30)); }
  .c-method-overlay { display: block; position: absolute; left: 0; top: 0; width: 100%; z-index: 3; padding: 64px 28px 0; }
  .c-method-h2 { position: static; left: auto; top: auto; width: auto; color: var(--white); padding: 0; }
  .c-method-body { position: static; left: auto; top: auto; width: auto; color: rgba(255,255,255,.92); padding: 0; margin-top: 18px; }

  /* ---- SECTION 06 | SUSTAINABILITY (見出し→カード→画像[最下部] に並べ替え) [sp1] ---- */
  /* flex 縦並び + order: DOM順(画像→見出し→カード→区切り)を 見出し→カード→画像 へ再配置 */
  .c-sec--sustain { display: flex; flex-direction: column; }
  .c-sustain-h2 { order: 1; position: relative; left: auto; top: auto; width: auto; color: var(--ink); padding: 64px 24px 0; }
  /* (g) 3カード 横並び → 1カラム。透過白背景は不要(グレー上)→ 画像+濃文字の素直な積み */
  .c-sustain-cards { order: 2; position: relative; left: auto; top: auto; width: auto; flex-direction: column; gap: 40px; padding: 36px 24px 0; }
  .c-sustain-band { order: 3; position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 60px; }
  .c-sustain-band::after { display: none; }
  .c-sus-card { flex: none; background: transparent; padding: 0; }
  .c-sus-h3 { color: var(--ink); }
  .c-sus-txt { color: var(--ink-60); }
  /* 注釈上のドット装飾は削除 (feedback #6 / リング頂点ドットは別物・残す) */
  .c-divider { display: none; }

  /* ---- NOTES (i) ---- */
  .c-notes { margin-left: 0; width: auto; padding: 48px 24px 0; }
  /* PC統一で 96→80 にした footer margin-top をスマホへ波及させない（従来のモバイル間隔96を維持） */
  #site-footer { margin-top: 96px; }
}