/* =====================================================================
   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 流体化と bleed 再定義は base.css（.stage / .stage .bleed）へ昇格済み。
   旧 .stage.top-stage / .stage.top-stage .bleed の同値上書きは削除。 */
/* ── [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{ min-height: 1994px; }   /* Figma 6258→8252 (KOJI帯×TOPICS写真が176px重畳)。[fb14] TOPICSが件数可変(最大3件)になったため height→min-height（1件なら実高1910<1994で従来と同じ、3件で下へ伸びる） */
.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
   [2026-07-29 fb14] 旧: line/date/text をそれぞれ絶対配置(style="top:NNNpx" 直書き)＝1件固定。
   ec-force「お知らせ(informations)」を最新3件まで流し込むため、件数可変のフロー(ul>li)へ作り替え。
   ★1件のときの描画は旧実装と 1px 単位で一致させてある（下の逐語再現メモ参照）。
   ・ul は margin-top ではなく padding-top で 1759px 下げる（先行の兄弟が全て absolute＝
     ul が最初のフロー子になるため、margin-top だと親と相殺(margin collapsing)して
     セクションごと 1759px 下がる）。
   ・親 .top-sec--kojitopics は height→min-height 化（3件で 1994px を超えて伸びるため）。 */
.topics-list { margin: 0 0 0 calc(384 / 1536 * 100%); padding: 1759px 0 0; width: min(896px, calc(896 / 1536 * 100%)); border-bottom: 1px solid var(--line); }   /* padding-top=旧 1本目 .topics-line の top / border-bottom=旧 2本目の line */
.topics-item { border-top: 1px solid var(--line); }   /* 2件目以降の区切り線も自動で入る */
/* 逐語再現メモ（PC 1件時のスクショ差分ゼロを確認済）: 旧 line(border) top=1759 / 本文 top=1791
   ＝ 罫線の下端(1760)から 31px。下 22px は現行告知3行(32px×3=96px)の本文下端 1887 から
   旧 2本目の line(1909) までの距離。上下が非対称なのは元デザインの実測値を踏襲しているため。 */
.topics-item__body { display: grid; grid-template-columns: calc(128 / 896 * 100%) 1fr; align-items: start; padding: 31px 0 22px; color: var(--ink); text-decoration: none; }   /* 列 = 旧 date(x=384) と text(x=512,w=768) の比率をそのまま列幅へ */
.topics-item__body--link:hover .topics-text { text-decoration: underline; text-underline-offset: 4px; }   /* ec-force 版のみ(<a>でラップされたとき) */
/* 日付 x=384 / 本文 x=512, y=8109/8189/8269 — 16px
   [fb15] line-height は本文と同じ --lh-body(32px)。旧 16px だと行ボックスの高さが本文(32px)と
   違うため、上端を揃えても文字が本文より 8px 高い位置に浮いて見えた（実機フィードバック）。
   同じ行高にすることで日付と本文1行目のベースラインが一致する。SP は縦積みなので 16px に戻す。 */
.topics-date { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: var(--lh-body); letter-spacing: .04em; color: var(--ink); }
.topics-text { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: var(--lh-body); color: var(--ink); }   /* [2026-07-29 告知] 元は短い一行ラベル用(width未指定)。長文告知に対応するため折返し許容＋行間はサイト標準の本文行間(--lh-body=32px)に統一 */

/* ---- 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(story.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; }
  .top-sec--kojitopics { min-height: 0; }   /* [fb14] desktop で height→min-height 化したため、height:auto では解除されない。SP は内容なりの高さに戻す */
  /* 写真帯 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; }
  /* [fb14] 旧 line/date/text の SP 余白（線=margin18・日付=+16・本文=+4・下の線=+18）を
     そのまま ul>li へ移植＝SP も1件時は旧描画と一致。件数が増えれば区切り線ごと縦に積む。 */
  .topics-list { margin: 18px 24px 0; padding: 0; width: auto; }
  .topics-item__body { display: block; padding: 16px 0 18px; }
  .topics-date { display: block; line-height: 16px; }   /* [fb15] SPは日付と本文が縦積み＝行高を揃える必要が無いので従来値へ戻す（余白が16px増えるのを防ぐ） */
  .topics-text { display: block; padding: 4px 0 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; }
}