/* =====================================================================
       TOP page — 1536px グリッド (Figma 1:27 実測準拠)
       全幅化(折衷案): FV=縦100vh・写真帯=横100vw。
       ── Phase1 flow/grid化（セッション16）: FV下は5つのマクロセクション(.top-sec)を順にフロー。
          各セクションが Figma 縦スパンを explicit height で保持し縦間隔を厳密維持（下記 .top-sec--*）。
       文字が乗る帯(CONCEPT/KOJI)は縦=Figma比率維持(文字と写真のズレ防止)。
       ===================================================================== */
    /* ── Phase1 flow/grid化（セッション16）: 旧 .below-fv グローバル絶対カスケード ＋
       .top-stage{height:calc} を撤廃し、縦の背骨を5つのマクロセクション(.top-sec)へ sectionize。
       各 .top-sec は relative・幅100%・Figma縦スパンを explicit height で保持し順にフロー
       （ページ高は自動＝旧 calc(100vh+9038px) と一致）。重なり島は各セクション内 absolute(local top)。 */
    .top-stage { /* flow（height は子セクションの積み上げで自動） */ }
    /* ============ [Phase2] stage 流体化（.top-stage スコープ＝他5ページ無影響・FAQ/STORY/KOJIと同方式） ============
       base.css .stage は width:1536固定＋margin-left:calc((100vw-1536)/2)（narrow は負マージン中央クリップ＝左端欠け）。
       Phase2 は width:100%+max-width で 1536超は中央寄せ(現状維持)、1536未満で縮む(左端クリップ解消)。全6ページ移行後 base.css 昇格。 */
    .stage.top-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.top-stage .bleed { left: 50%; margin-left: -50vw; width: 100vw; }
    /* ── [Phase2] 水平座標の比例化: トップレベル列 left/width=calc(N/1536*100%)・中央ピン島(円/白窓/dots/縦書)=calc(50% - 半幅)・
       フロー全幅式(credit/右ブリード)=calc(50% - 50vw ...)。帯/セクション height・島内部幾何(円640/vtext/SVG)・固定deco幅は据置き。 */
    .top-sec { position: relative; width: 100%; }
    .top-sec--introprod { height: 2465px; }   /* Figma 1082→3547 (FV下端→CONCEPT) */
    .top-sec--concept   { height: 2144px; }   /* Figma 3547→5691 */
    .top-sec--about     { height: 567px; }    /* Figma 5691→6258 */
    .top-sec--kojitopics{ height: 1994px; }   /* Figma 6258→8252 (KOJI帯×TOPICS写真が176px重畳) */
    .top-sec--tail      { height: auto; }   /* Figma 8252→9590 (prefooter×注釈) flow化: 注釈をバンド直下にフロー配置＝前後余白80で全ページ統一・ビューポート高さ非依存 */

    /* ---- SECTION 01 | FV ---- 縦=画面高(100vh) / 横=100vw / クロスフェード ---- */
    .fv { position: relative; width: 100%; height: 100vh; }   /* flow先頭。文字はこの1536グリッド基準（width100%=stage1536） */
    .fv__slider { position: absolute; top: 0; height: 100%; z-index: 0; overflow: hidden; }   /* + .bleed(横100vw) */
    .fv__track { position: absolute; inset: 0; }
    /* クロスフェード: スライドを重ね opacity 切替(フェードで緩く・長く / メモ) */
    .fv__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2s var(--ease); }
    .fv__slide.is-active { opacity: 1; }
    .fv__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 100vw×100vh cover */
    /* 前景はFV下端基準(bottom)で固定 → 画面高が変わっても構図維持。H1 1:33 x=128 */
    .fv__title {
      position: absolute; left: calc(128 / 1536 * 100%); bottom: 133px; z-index: 3;
      font-family: var(--serif); font-weight: 400;
      font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white);
    }
    /* 縦ライン 1:31 x=128 (FV下端をまたぐアクセント) */
    .fv__vline { position: absolute; left: calc(128 / 1536 * 100%); bottom: -60px; height: 120px; z-index: 3; border-left: 1px solid rgba(255,255,255,.65); }
    /* hero下フル幅線 1:32 (FV下端) */
    .fv__hline { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; border-top: 1px solid var(--line); }
    /* スクロール装飾 → dots(中央寄せ) [fb2 T1] 元のエディトリアルなページネーションに寄せる:
       アクティブ=丸角横長バー / 静止ドットは径やや上げ・間隔を広げ範囲を拡張(62→110前後)。
       中央(=768)維持: left713 + width110/2 = 768。 */
    .fv__dots { position: absolute; left: calc(50% - 55px); bottom: 46px; width: 110px; z-index: 3; display: flex; gap: 9px; align-items: center; justify-content: center; }
    .fv__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--white); opacity: .45; transition: width .5s var(--ease), opacity .5s var(--ease); }
    .fv__dots span.is-on { width: 22px; height: 7px; border-radius: 3.5px; opacity: .9; }
    /* [fb3 項目3] .fv-credit 削除: FVは麹画像ではないためクレジット不要 */

    /* ---- FV以下の全コンテンツ: 5マクロセクション(.top-sec)を順フロー（旧 .below-fv 一律シフトを撤廃） ----
       各要素の top は「所属セクションの Figma 開始座標」を引いた local-top（Phase1）。 */

    /* ---- INTRO | 発酵のチカラ [F+] (1184–1686) ---- */
    /* 縦組み装飾 1:34 x=129 y=1184 w47 h308 */
    .intro-deco { position: absolute; left: calc(129 / 1536 * 100%); top: 102px; width: 47px; height: 308px; opacity: .85; }
    /* SECTION 02 BODY（見出し/CTAなし・ブランド文）— deco(1184)と整列して x=384 y=1200 */
    .intro-body { position: absolute; left: calc(384 / 1536 * 100%); top: 118px; width: min(736px, calc(736 / 1536 * 100%)); }
    .intro-body p + p { margin-top: 0; }

    /* ---- SECTION 02 | PRODUCTS band(横2カラム・全幅) + メソッド ----
       [fb2 T2] intro-body 下の余白を縮めるため prod-band 以降を一律 −180 上げ
       （元 y=1776 → 1596）。以降の全要素・#site-footer・.top-stage も連動。 */
    /* 帯画像 1:103/1:104 (元y=1776) h1024 — 横2カラムを 100vw に拡張(各50vw) */
    .prod-band { position: absolute; top: 514px; height: 1024px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }   /* + .bleed */
    .prod-band img { width: 100%; height: 1024px; object-fit: cover; display: block; }
    /* 中央 白窓(白銀比) 1:105 x=614 (元y=2178) w308 h219 — グリッド中央=画面中央(seam)に固定
       [fb2 T3] 初回スクロールで左から開く(clip-path ワイプ)。reveal IO(.is-in) 利用。
       (*) 外殻 .prod-mark は clip-path を当てず IO 検出専用(透明)。塗り(白窓)は内側 ::before に
         置き clip-path でワイプ — clip-path で可視幅0にすると IntersectionObserver の
         intersectionRatio が 0 になり site.js IO(threshold) が発火しないための2層化。 */
    .prod-mark { position: absolute; left: calc(50% - 154px); top: 916px; width: 308px; height: 219px; z-index: 2; overflow: hidden; }
    .prod-mark.reveal{ opacity: 1; translate: none; }   /* reveal の縦シフトは無効化(座標固定) */
    .prod-mark::before {
      content: ""; position: absolute; inset: 0;
      background: rgba(232,230,226,.42); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
      clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease);
    }
    .prod-mark.is-in::before { clip-path: inset(0 0 0 0); }
    /* [fb3 項目3] .prod-credit 削除: 商品帯は麹画像ではないためクレジット不要 */
    /* 商品コンテンツ = マガジンレイアウト(左揃え・2カラム)を厳守。
       Figma原寸は左385/右257で「元から右寄り」のため、2カラムブロック(計894w)を
       1536内で中央化(左321/右321)。各列テキストは左揃えのまま=中央シンメトリーにはしない。
       → グリッド中央寄せ(base.css)と合わせ、広い画面でプロダクトがビューポート中央に来る。 */
    /* H2 1:106 (整えて、育てる。/ bySENSEのメソッド) 左揃え・ブロック中央化で x=385→321 (元y=2956) */
    .prod-head { position: absolute; left: calc(321 / 1536 * 100%); top: 1694px; width: min(672px, calc(672 / 1536 * 100%)); }
    /* STEP1 1:107 x=385 / STEP2 1:108 x=848 左揃え (元y=3084) */
    .prod-step { position: absolute; top: 1822px; width: min(431px, calc(431 / 1536 * 100%)); }   /* [④] 商品名テキスト列を画像(.prod-photo=431)と同幅へ拡張。narrowで商品名の改行を解消。col1右=321+431=752<col2左784で非重複。1536は1行維持=回帰0 */
    .prod-step--1 { left: calc(321 / 1536 * 100%); }
    .prod-step--2 { left: calc(784 / 1536 * 100%); }
    .prod-step .step-no   { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 32px; color: var(--ink); }
    .prod-step .step-name { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 32px; color: var(--ink); }
    .prod-step .step-role { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 32px; color: var(--ink); }
    /* read-more 1:203 x=385 / 1:208 x=848 左揃え (元y=3228)
       [fb4 TOP] step-role を2行→1行に短縮した分(line-height32px)、read-more/photo を −32 で詰める。 */
    .prod-more--1 { position: absolute; left: calc(321 / 1536 * 100%); top: 1934px; }
    .prod-more--2 { position: absolute; left: calc(784 / 1536 * 100%); top: 1934px; }
    /* 商品画像 1:111 x=385 w431 h288 / 1:112 x=848 同 (元y=3282) [fb4 TOP] −32 */
    .prod-photo { position: absolute; top: 1988px; width: min(431px, calc(431 / 1536 * 100%)); height: 288px; overflow: hidden; }
    .prod-photo--1 { left: calc(321 / 1536 * 100%); }
    .prod-photo--2 { left: calc(784 / 1536 * 100%); }
    .prod-photo img { width: 100%; height: 288px; object-fit: cover; display: block; }

    /* ---- SECTION 03 | CONCEPT ---- 写真は全幅・縦はFigma比率維持 / 以降 −180 (fb2 T2) */
    /* 帯 1:113 (元y=3727) h1024 (食卓写真) */
    .concept-band { position: absolute; top: 0; height: 1024px; overflow: hidden; }   /* + .bleed */
    .concept-band img { width: 100%; height: 1024px; object-fit: cover; display: block; }
    /* [fb2 T5] 旧 .concept-title(中央寄せ見出し) は撤去し、本文セクション(.concept-lead)へ移設 */
    /* 大円 1:115 x=448 (元y=3951) d640 — 濃淡で連続回転(spin-ring) + 小ドット静止 [feedback2 円デザイン] */
    .concept-circle { position: absolute; left: calc(50% - 320px); top: 224px; width: 640px; height: 640px; z-index: 2; display: grid; place-items: center; }
    /* [fb3 項目1] 回転を速く(15s→8s)＋回転コメット(sweep)を太く(1.3倍)・静止円(base)は等倍維持 */
    .concept-spin { left: 0; top: 0; width: 640px; height: 640px; --ring-base: rgba(255,255,255,.30); --ring-spin: 5s; --ring-w-base: 1; --ring-w-sweep: 1.3; --ring-glow: rgba(255,255,255,.55); --ring-glow-blur: 7px; }
    /* 小ドット=12時位置で静止(以前のスクロール周回は撤去) 1:148 x=760 (元y=3943) d16
       [sp1] .concept-circle 内へ移設(島ごと scale するモバイル用)。circle(top224)基準へ top:-8(=section216 維持)。
       left:calc(50%-8px) は circle中心=section中心と一致のため不変。PC描画は byte 一致。 */
    .concept-dot { position: absolute; left: calc(50% - 8px); top: -8px; width: 16px; height: 16px; z-index: 3; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: transparent; }
    /* 円内 縦組み 1:116 x=736 — 白文字縦書き */
    .concept-vtext { display: block; width: 64px; height: 213px; }
    /* [fb3 項目3] .concept-credit-top 削除: 食卓写真は麹画像ではないためクレジット不要 */
    /* 本文帯 1:149 (元y=4751) h1025 (浴室写真) */
    .concept-body-band { position: absolute; top: 1024px; height: 1025px; overflow: hidden; }   /* + .bleed */
    .concept-body-band img { width: 100%; height: 1025px; object-fit: cover; display: block; }
    .concept-body-band::before { content: ""; position: absolute; inset: 0; background: var(--img-veil); }
    /* [fb2 T5] 移設見出し「心地よい、循環へ。」= 本文セクション見出し。
       マガジン左揃え(中央寄せ解除)・右列896基準・白・本文の上に配置(元body y=4773 の上)。 */
    .concept-lead { position: absolute; left: calc(896 / 1536 * 100%); top: 1133px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
    /* 本文 1:150 x=896 (元y=4953) w384 — 白文字右列 [fb3 項目2] lead と同じ +47 で連動 */
    .concept-body { position: absolute; left: calc(896 / 1536 * 100%); top: 1273px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); }
    /* [fb3 項目3] .concept-credit-body 削除: serum/浴室写真は麹画像ではないためクレジット不要 */
    /* read-more 1:198 x=896 (写真上=light) [fb2 T6] 本文下端+60 ≈ 他節と同程度の上余白 */
    .concept-more { position: absolute; left: calc(896 / 1536 * 100%); top: 1653px; z-index: 3; }

    /* ---- SECTION 04 | ABOUT→STORY 無地 ---- 以降 −180 (fb2 T2) */
    /* H2 1:109 x=384 (元y=5871) */
    .about-head { position: absolute; left: calc(384 / 1536 * 100%); top: 0; width: min(672px, calc(672 / 1536 * 100%)); }
    /* 本文 1:110 x=384 (元y=5992) w333 */
    .about-body { position: absolute; left: calc(384 / 1536 * 100%); top: 121px; width: min(333px, calc(333 / 1536 * 100%)); }
    /* read-more 1:218 x=384 (元y=6321) */
    .about-more { position: absolute; left: calc(384 / 1536 * 100%); top: 450px; }

    /* ---- SECTION 05 | KOJI LAB ---- 写真は全幅・縦はFigma比率維持 / 以降 −180 (fb2 T2) */
    /* 帯 1:152 (元y=6438) h1023 (コウジ菌写真) */
    .koji-band { position: absolute; top: 0; height: 1023px; overflow: hidden; }   /* + .bleed */
    .koji-band img { width: 100%; height: 1023px; object-fit: cover; display: block; }
    .koji-band::before { content: ""; position: absolute; inset: 0; background: var(--img-veil); }
    /* 縦組み 1:160 x=717 w103 h205 — 見出し縦書き(STRUCTURE採用) (元y=6501) */
    .koji-vtitle { position: absolute; left: calc(50% - 51.5px); top: 63px; z-index: 3; width: 103px; height: 205px; margin: 0; }
    .koji-vtitle img { display: block; width: 100%; height: 100%; }
    /* 本文 1:159 x=896 w384 — 白文字右列 (元y=6833) */
    .koji-body { position: absolute; left: calc(896 / 1536 * 100%); top: 395px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); }
    /* read-more 1:153 x=896 (写真上=light) (元y=7163) */
    .koji-more { position: absolute; left: calc(896 / 1536 * 100%); top: 725px; z-index: 3; }
    /* [fb5 TOP] 画像クレジット(株式会社ビオック・麹=蒸し麹フルブリード帯 kojilab-bg) → 画像の実端(viewport左端)へ。
       帯は .bleed で 100vw。クレジットも bleed と同式 left=(frame-100vw)/2 で viewport 左端へ出し +24px インセット。
       テキストグリッド(従来 left16=アートボード端)ではなく画像範囲の端に追従。帯下端7281の上(top7256)で左下。 */
    .koji-credit { left: calc(50% - 50vw + 24px); top: 998px; text-align: left; }   /* [Phase2] flow式: viewport左端+24（旧 (frame-100vw)/2 は<1536破綻） */

    /* ---- SECTION 06 | TOPICS ---- 以降 −180 (fb2 T2) */
    /* [fb2 T8] 画像 1:190 を画面右端まで右ブリード(左320グリッド固定/右=viewport右端)。
       リスト(label/date/text/line)はグリッド left384 のまま。 (元y=7285) */
    .topics-img { position: absolute; left: calc(320 / 1536 * 100%); top: 847px; right: calc(50% - 50vw); height: 768px; overflow: hidden; }   /* [Phase2] 右ブリード: 左=比例グリッド/右=viewport右端(width auto)。旧固定1536式を流体化 */
    .topics-img img { width: 100%; height: 768px; object-fit: cover; display: block; }
    /* [fb5 TOP] topics画像クレジット(麹菌の胞子) = 右ブリード画像 → 画像の実端(viewport右端)へ。
       画像 top7105+h768=下端7873。右下を右ブリード画像の実端へ: right=(frame-100vw)/2 +24px インセット。 */
    .topics-credit { right: calc(50% - 50vw + 24px); top: 1590px; text-align: right; }   /* [Phase2] flow式: viewport右端+24（旧 (frame-100vw)/2 は<1536破綻） */
    .intro-credit { right: calc(50% - 50vw + 24px); top: 1503px; text-align: right; text-shadow: 0 1px 2px rgba(0,0,0,.55); }   /* [fb6] intro-right.jpg 右下クレジット（prod-band 514+1024=1538 下端の少し上）。中間調の写真上でも可読にする控えめな影 */
    /* TOPICS ラベル 1:191 x=384 (英字小ラベル 20px) (元y=8149) */
    .topics-label { position: absolute; left: calc(384 / 1536 * 100%); top: 1711px; font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: .12em; color: var(--ink); }
    /* 行区切り線 1:240-243 x=384 w896 y=8077/8157/8237/8316 */
    .topics-line { position: absolute; left: calc(384 / 1536 * 100%); width: min(896px, calc(896 / 1536 * 100%)); border-top: 1px solid var(--line); }
    /* 日付 x=384 / 本文 x=512, y=8109/8189/8269 — 16px */
    .topics-date { position: absolute; left: calc(384 / 1536 * 100%); font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: .04em; color: var(--ink); }
    .topics-text { position: absolute; left: calc(512 / 1536 * 100%); font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 16px; color: var(--ink); }

    /* ---- PRE-FOOTER 帯 [F+] ---- 全幅・縦は画面高で頭打ち(文字なし帯)
       [fb2 T2+T9] prod-band以降 −180 に加え TOPICS下を −100 詰め、計 −280 (元y=8532)。 */
    .prefooter { position: relative; top: auto; height: min(1026px, 100vh); overflow: hidden; }   /* + .bleed (flow化: 注釈をバンド直下にフロー＝ビューポート高さ非依存で前余白80) */
    .prefooter img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* [fb2 T7] PRE-FOOTER帯クレジット — 左下に控えめ(白)。帯は100vh頭打ち(>=1026で下端=footer top9278)。 */
    .prefooter-credit { left: calc(384 / 1536 * 100%); top: 9226px; }

    /* [fb3 項目4 / 修正4] 注釈エリア = プレフッター写真とfooterの間。グリッド左(left128/width1280)・小ゴシック(共通)。
       旧: 絶対配置 top:1126(バンドが min(1026,100vh) でVH依存→前余白100〜126で可変)。
       現: tail を flow化し、バンド直下に margin-top:80 でフロー配置＝前余白80px固定・VH非依存・注釈高は行数で可変。 */
    .top-notes { position: relative; left: auto; top: auto; margin: 80px 0 0 calc(128 / 1536 * 100%); width: min(1280px, calc(1280 / 1536 * 100%)); }   /* flow化: バンド直下に margin-top:80 でフロー＝前余白80・注釈の高さは行数で可変 */
    /* ---- FOOTER ---- フロー(注釈直後)・注釈後の余白を全ページ80に統一 */
    #site-footer { position: relative; width: 100%; margin-top: 80px; }

    /* [sp1] スマホ専用ラッパ: desktop(≥768)では display:contents で「箱を生成しない」=
       子(prod-band/credit/mark, concept-band/circle, koji-band/credit/vtitle, topics-img/credit)は
       それぞれ section を包含ブロックとして従来どおり絶対配置 → PC描画は不変(1536 diff=0)。
       <768 の @media で display:block + position:relative へ昇格し、画像内オーバーレイ/島の箱にする。 */
    .prod-bandwrap, .concept-imgwrap, .koji-imgwrap, .topics-imgwrap { display: contents; }

    /* =====================================================================
       [Phase3] スマホ専用 (<768) — TOP (index)
       マクロセクション(.top-sec)を height:auto、絶対配置の島を relative/static フローへ。
       写真帯=全幅(aspect 3/2)・本文=1カラム(24pxガター)。写真上の白文字(concept/koji 本文・
       read-more--light・credit)は無地グレー(#d0d0d0)へ降りるため濃文字(var(--ink))へ recolor。
       FV=HERO(100svh・白文字オーバーレイ維持)。再色不可の白線SVG(concept spin-ring / koji 縦書き
       タイトル)は濃パネル(#27272b)へ。PRODUCTS 2カラム→1カラム(flex order で STEP↔写真を隣接)。
       全ルール <768 ガード＝1536/デスクトップ回帰ゼロ。STORY(about.css)末尾 @media と同方式。
       ===================================================================== */
    @media (max-width: 767px) {
      /* stage floor 除去 + bleed 水平中和 + マクロセクション height:auto */
      .stage.top-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
      .stage.top-stage .bleed { left: 0; margin-left: 0; width: 100%; }
      .top-sec { height: auto; }
      /* 写真帯 img の固定高をリセット(親 aspect-ratio が高さを決める) */
      .concept-band img, .concept-body-band img, .koji-band img, .topics-img img { height: 100%; }
      /* [sp1] ラッパを box 化(desktop は display:contents)。子の画像内オーバーレイ/島の包含ブロックになる */
      .prod-bandwrap, .concept-imgwrap, .koji-imgwrap, .topics-imgwrap { display: block; position: relative; }

      /* ---- SECTION 01 | FV (HERO + 左下ヘアライン/deco/スクロール誘導の combo) [sp1] ---- */
      .fv { height: 100svh; }
      /* タイトルはヘアライン表示分 上へ。左24=PCより抑えた余白 */
      .fv__title { left: 24px; right: 24px; bottom: 88px; width: auto; font-size: 22px; line-height: 36px; letter-spacing: 4px; }
      /* 左下ヘアライン: FV下端を跨いで下へ伸ばし「スクロールを促す」縦アクセント(=deco へ続く) */
      .fv__vline { display: block; left: 24px; right: auto; bottom: -40px; height: 96px; border-left-color: rgba(255,255,255,.6); }
      /* 全幅ベースライン: 写真上でも読める控えめな白 */
      .fv__hline { display: block; left: 0; width: 100%; border-top-color: rgba(255,255,255,.28); }
      .fv__dots { bottom: 26px; }

      /* ---- SECTION 02 | INTRO + PRODUCTS (1カラム・flex order) ---- */
      .top-sec--introprod { display: flex; flex-direction: column; padding-bottom: 64px; }   /* [#4] 次セクション(CONCEPT)との余白 */
      /* deco-vertical-1.svg = FV左下 combo の縦アクセント(vline の続き)。intro 左上に小さく */
      .intro-deco { display: block; position: absolute; left: 24px; top: 44px; width: 26px; height: 170px; opacity: .68; z-index: 3; }
      /* 次コンテンツは若干右寄り(左padding を広げ deco を左へ逃がす) */
      .intro-body   { order: 1; position: relative; left: auto; top: auto; width: auto; padding: 48px 24px 40px 64px; }

      /* prod-bandwrap = 2画像(縦積み) + 継ぎ目に白銀比長方形 + 麹クレジット(画像内右下) */
      .prod-bandwrap { order: 2; }
      .prod-band    { position: relative; left: 0; top: auto; width: 100%; height: auto; display: grid; grid-template-columns: 1fr; }
      .prod-band img { height: auto; aspect-ratio: 3 / 2; }
      /* 白銀比長方形(横長): 2画像の継ぎ目(=wrap中央 50%)に・幅70%・左から開く(::before clip reveal) */
      .prod-mark { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; height: auto; aspect-ratio: 308 / 219; z-index: 2; overflow: hidden; }
      /* 麹画像(下=intro-right)右下に出典クレジットを内包(白・控えめ影) [#3] */
      .intro-credit { position: absolute; left: auto; right: 24px; top: auto; bottom: 8px; text-align: right; color: var(--white); opacity: .62; text-shadow: 0 1px 2px rgba(0,0,0,.55); padding: 0; }

      /* メソッド(プロダクト紹介) — 各STEPと写真を隣接 */
      .prod-head    { order: 3; position: relative; left: auto; top: auto; width: auto; padding: 56px 24px 0; }
      .prod-step    { position: relative; left: auto; top: auto; width: auto; padding: 28px 24px 0; }
      .prod-step--1 { order: 4; }
      .prod-more--1 { order: 5; }
      .prod-photo--1{ order: 6; }
      .prod-step--2 { order: 7; }
      .prod-more--2 { order: 8; }
      .prod-photo--2{ order: 9; }
      .prod-more--1, .prod-more--2 { position: relative; left: auto; top: auto; padding: 14px 24px 0; }
      .prod-photo   { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 3 / 2; margin: 20px 24px 0; }
      .prod-photo img { height: 100%; }

      /* ---- SECTION 03 | CONCEPT (48h: 縦長写真 + 中央サークル島 + 縦書き + 頂点白丸) [sp1] ---- */
      .top-sec--concept { display: flex; flex-direction: column; }
      .concept-imgwrap { order: 1; }
      /* 1枚目=全幅の縦長写真(3/4)。中央にリング島を重ねる */
      .concept-band { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; overflow: hidden; }
      /* 視認用の暗幕(中央=リング域を濃く) */
      .concept-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(78% 56% at 50% 48%, rgba(12,11,9,.60) 0%, rgba(12,11,9,.46) 52%, rgba(12,11,9,.14) 100%); }
      /* サークル島: ring+vtext+dot を 640四方島で中央へ重ね scale(0.52)。PC踏襲(頂点白丸/縦書き復元)。
         disc 無しのため AGING 同様 S=0.52(360 で左右に余白)。dot/vtext は島の子として一緒に拡縮。 */
      .concept-circle { position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; z-index: 2; transform: translate(-50%, -50%) scale(0.52); transform-origin: center center; background: none; padding: 0; display: grid; place-items: center; }
      .concept-spin { position: absolute; left: 0; top: 0; width: 640px; height: 640px; --ring-base: rgba(255,255,255,.66); --ring-w-base: 2.6; --ring-w-sweep: 3.2; }
      .concept-vtext { width: 84px; height: 280px; }
      .concept-dot { display: block; position: absolute; left: calc(50% - 8px); top: -8px; width: 16px; height: 16px; border-color: transparent; background: rgba(255,255,255,.92); box-shadow: 0 0 14px rgba(255,255,255,.7); z-index: 3; }

      /* 2枚目画像は「心地よい、循環へ」テキストの後ろ(order) + 前後余白でセクション転換を明示 [#6] */
      .concept-lead { order: 2; position: relative; left: auto; top: auto; width: auto; color: var(--ink); text-shadow: none; padding: 60px 24px 0; }
      .concept-body { order: 3; position: relative; left: auto; top: auto; width: auto; color: var(--ink); padding: 20px 24px 0; }
      .concept-more { order: 4; position: relative; left: auto; top: auto; padding: 18px 24px 0; }
      .concept-more .read-more { color: var(--ink); }
      .concept-body-band { order: 5; position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; margin: 56px 0 8px; }
      .concept-body-band::before { display: none; }

      /* ---- SECTION 04 | ABOUT「発酵は、時間を価値に変える。」(無地・濃文字) ---- */
      .about-head { position: relative; left: auto; top: auto; width: auto; padding: 64px 24px 0; }
      .about-body { position: relative; left: auto; top: auto; width: auto; padding: 24px 24px 0; }
      .about-more { position: relative; left: auto; top: auto; padding: 18px 24px 0; }

      /* ---- SECTION 05 | KOJI LAB (1枚目=縦長写真 + 縦書きSVG内包 + クレジット内側右下) [sp1] ---- */
      .koji-imgwrap { margin-top: 64px; }            /* 発酵(ABOUT) read-more と画像の間に余白 [#7] */
      .koji-band { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; overflow: hidden; }
      .koji-band::before { display: block; z-index: 1; background: linear-gradient(180deg, rgba(20,18,15,.52) 0%, rgba(20,18,15,.18) 45%, rgba(20,18,15,.50) 100%); }
      /* 縦書きSVGタイトル(白)を写真内に内包(中央上) [#8] */
      .koji-vtitle { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: auto; height: auto; margin: 0; padding: 0; background: none; text-align: center; z-index: 3; }
      .koji-vtitle img { width: auto; height: 220px; margin: 0; display: block; }
      /* クレジットを写真内・右下に [#8] */
      .koji-credit { position: absolute; left: auto; right: 24px; top: auto; bottom: 8px; text-align: right; color: var(--white); opacity: .62; text-shadow: 0 1px 2px rgba(0,0,0,.55); padding: 0; z-index: 3; }
      /* その後のテキスト→画像レイアウトは生かす */
      .koji-body { position: relative; left: auto; top: auto; width: auto; color: var(--ink); padding: 48px 24px 0; }
      .koji-more { position: relative; left: auto; top: auto; padding: 18px 24px 0; }
      .koji-more .read-more { color: var(--ink); }

      /* ---- SECTION 06 | TOPICS (クレジット内側右下) [sp1 #9] ---- */
      .topics-imgwrap { margin-top: 56px; }
      .topics-img { position: relative; left: 0; right: auto; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; margin: 0; overflow: hidden; }
      .topics-credit { position: absolute; left: auto; right: 24px; top: auto; bottom: 8px; text-align: right; color: var(--white); opacity: .62; text-shadow: 0 1px 2px rgba(0,0,0,.55); padding: 0; z-index: 3; }
      .topics-label { position: static; padding: 48px 24px 0; }
      .topics-line { position: static; display: block; left: auto; width: auto; margin: 18px 24px 0; }
      .topics-date { position: static; display: block; padding: 16px 24px 0; }
      .topics-text { position: static; display: block; padding: 4px 24px 0; }

      /* ---- TAIL | PRE-FOOTER + 注釈 ---- */
      .prefooter { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 56px; }
      .top-notes { position: relative; left: auto; top: auto; width: auto; margin: 0; padding: 48px 24px 56px; }   /* [fix] desktop margin(80px 0 0 calc(128/1536*100%))がリセットされず左に余分な余白が残っていたのを解消 */
      /* PC統一の footer margin-top:80 をスマホへ波及させない（注釈の padding-bottom:56 が間隔を担う＝従来のモバイル間隔を維持） */
      #site-footer { margin-top: 0; }
    }