/* ===================================================================== bySENSE OFFICIAL WEBSITE — kojilab.css (v2 flow rebuild) 旧: 絶対座標 + fixed height。新: 通常フローのエディトリアルレイアウト。 HERO(100vh)以下は margin/padding で積み、高さを自然に伸ばす。全幅帯は .kl-bleed (position:relative + 100vw breakout)。編集対象: このファイルのみ。base.css / components.css / site.js は触らない。 ===================================================================== */ /* ===== 暗ページ base ===== */ /* KOJI LAB は全面黒。mockup は、ec-force(ページ管理)は最外ラッパー .l-wrapper-none(演出OFF) / .l-wrapper(演出ON) に適用する。ec-force はカスタマイザの全体背景 (#d0d0d0)を theme_customize.css の `.u-color__bg--base{background:..!important}` で塗るため、このページだけ !important で黒へ上書きする。kojilab.css は KOJI LAB ページのみ読込＝他ページ非影響。 */ body[data-page="kojilab"], body .l-wrapper-none, body .l-wrapper { background: #000 !important; } /* ec-force: ラッパーは演出フェード用に transition:1.6s(=all) を持つため、後読みの kojilab.css が背景をグレー→黒へ変えると背景まで1.6sフェードし「枠は即黒・全体は遅れて黒」の段差が出る。背景を transition 対象から外す(opacity だけ残す)＝コンテンツ枠と同時に即黒。opacity フェードイン演出は維持。 */ body .l-wrapper-none, body .l-wrapper { transition: opacity 1.6s !important; } .koji-stage { /* 通常フロー — height は子要素で自然に伸ばす(旧 height:calc は廃止) */ background: #000; --kl-ink: #d0d0d0; /* 本文・見出し(light) */ --kl-white: #ffffff; /* H1・写真上テキスト */ --kl-muted: #8a8a8a; /* 補助(EN小ラベル等) */ --kl-line: rgba(255,255,255,.18); /* 暗地のハレ線 */ --kl-rect: #d9d9d9; /* 画像プレースホルダ */ --kl-panel: #111114; /* 微パネル */ color: var(--kl-ink); } /* [Phase2] stage 流体化（.koji-stage スコープ＝他5ページ無影響・FAQ/STORY と同方式）。 base .stage の width:1536固定＋負マージン中央クリップ（narrow 左端欠け）を解消。 1536超は max-width で中央寄せ維持、1536以下は 100% 流体。 */ .stage.koji-stage { width: clamp(var(--floor), 100vw, var(--frame)); margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2); margin-right: 0; } /* 標準 .bleed 再定義（kl-hero__bg 用・絶対要素）。base の .stage .bleed の left:calc((--frame-100vw)/2)（固定1536stage前提）を、流体stageでも viewport全幅になる式へ上書き。 */ .stage.koji-stage .bleed { left: 50%; margin-left: -50vw; width: 100vw; } /* 暗ページの見出し既定 = light */ .koji-stage .t-head { color: var(--kl-ink); } /* ===== EN 小ラベル ===== */ .kl-en { font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: .28em; color: var(--kl-muted); margin: 0 0 20px; } /* ===================================================================== HERO (position:relative; height:100vh — 通常フロー先頭ブロック) .kl-hero__bg は hero 内 absolute → .bleed で 100vw。 .kl-hero__fg は 1082px高の下端固定ラッパ(Figma縦構図保持)。 ===================================================================== */ .kl-hero { position: relative; height: 100vh; } /* 背景写真: hero内 absolute + bleed(100vw) */ .kl-hero__bg { position: absolute; top: 0; height: 100%; overflow: hidden; } .kl-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; /* [feedback4] FV差替(IMG_7434=正方形2400²)を100vh縦長へcoverトリミング。主要被写体「麹を持ち上げる手」が画面左上〜中央上にあるため、object-position を上寄り(35%)にして手と立ちのぼる湯気を画面内に確保(下端の床面側を多めにカット)。 */ object-position: 50% 35%; } .kl-hero__bg::before { content: ""; position: absolute; inset: 0; background: var(--img-veil); z-index: 1; } /* K6: HERO 出典クレジット — 全幅背景の右下(下端ハレ線の少し上) */ .kl-hero__credit { right: 24px; bottom: 24px; left: auto; top: auto; z-index: 4; } /* 前景ラッパ: 1082px高・FV下端固定 */ .kl-hero__fg { position: absolute; left: 0; bottom: 0; width: 100%; height: 1082px; z-index: 3; /* [Phase1] frame幅を相対化(1536→100%) */ } /* "KOJI LAB" ラベル: Figma 1:975 x=127 y=768 */ .kl-hero__label { position: absolute; left: calc(127 / 1536 * 100%); top: 768px; /* [Phase2] left相対化 */ font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white); } /* H1: Figma 1:974 x=127 y=865 w672 */ .kl-hero__title { position: absolute; left: calc(127 / 1536 * 100%); top: 865px; width: min(672px, calc(672 / 1536 * 100%)); /* [Phase2] left+measure相対化(1536=672) */ font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white); } /* 縦ライン: Figma 1:972 x=127 y=1022 h120 */ .kl-hero__vline { position: absolute; left: calc(127 / 1536 * 100%); top: 1022px; height: 120px; /* [Phase2] left相対化 */ border-left: 1px solid var(--line-on-dark); } /* hero下端水平線: Figma 1:973 y=1082 w1536 */ .kl-hero__hline { position: absolute; left: 0; top: 1082px; width: 100%; /* [Phase1] frame幅を相対化 */ border-top: 1px solid var(--kl-line); } /* FV下・左英語タグライン (Figma 1:976・回転英文)。フロー版KOJIでは koji-stage 基準で絶対配置し、Figma の y1184(=hero下102px) を calc(100vh+102px) で再現。 */ .koji-stage .kl-method-deco { position: absolute; left: calc(128 / 1536 * 100%); top: calc(100vh + 102px); /* [Phase2] left相対化 */ width: 47px; height: 308px; z-index: 3; opacity: .85; } /* ===================================================================== フロー全幅帯 (.kl-bleed) 通常フロー要素に position:relative を付与し、 .stage .bleed と同式の left/width で viewport 端まで breakout。 overflow:hidden で画像をクリップ。 ===================================================================== */ .koji-stage .kl-bleed { position: relative; margin-left: calc(50% - 50vw); /* [Phase2] flow full-bleed: stage中央寄せ基準で viewport全幅。旧 left:calc((--frame-100vw)/2) は流体stage<1536で右ずれ破綻 */ width: 100vw; overflow: hidden; } .koji-stage .kl-bleed img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===================================================================== SEC01 | INTRO 左 x=320、見出し幅~672、本文幅~736 ===================================================================== */ .kl-intro { padding: 128px 0 96px; margin-left: calc(320 / 1536 * 100%); /* [Phase2] グリッド左を相対化(1536=320) */ max-width: 736px; } .kl-intro .kl-en { margin-bottom: 32px; } .kl-intro__h { margin-bottom: 40px; } /* [feedback4] イントロ本文を「ゴシックのまま少しサイズUP・行高との比率は維持」。基準 .t-body = 16/32(比率2.0)→ 18/36(比率2.0を厳密保持)で +2px 拡大。余白(下96px)はそのまま、見出しとの間も既存のまま自然に収まる。 */ .kl-intro__body p { font-size: 18px; line-height: 36px; } /* ===================================================================== SEC02/03 | インタビューセクション共通 ===================================================================== */ .kl-interview-sec { padding-top: 120px; } /* インタビューテキスト共通ブロック */ .kl-interview__text { margin-left: calc(320 / 1536 * 100%); /* [Phase2] グリッド左を相対化(1536=320) */ max-width: 736px; padding-top: 72px; padding-bottom: 72px; /* K3: 「続きを読む」下マージンを詰める(120→72) */ } .kl-interview__text .kl-en { margin-bottom: 20px; } .kl-interview__text .t-head { margin-bottom: 24px; } /* インタビューテーマ(サブタイトル) */ .kl-interview__theme { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.8; letter-spacing: 2px; color: var(--kl-muted); margin: 0 0 40px; } /* インタビュー内小見出し */ .kl-sub { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.7; letter-spacing: 2px; color: var(--kl-ink); margin: 48px 0 16px; padding-left: 16px; border-left: 2px solid var(--kl-line); } /* lc__body 内の p 間隔 */ .kl-interview__text .lc__body p { margin-bottom: 24px; } .kl-interview__text .lc__body p:last-child { margin-bottom: 0; } /* ===================================================================== [feedback4] INTERVIEW 記事内画像 (.kl-article-fig) 2つのインタビュー本文(.lc__body)に支給画像をエディトリアル配置。マガジン左揃え・黒地白文字トーン厳守。リズム = リード(段幅大) / インセット / 2枚並び。 ※注意: .lc__body は overflow:hidden(折りたたみ機構) かつ幅=テキスト段(736px)のため、記事内では 100vw bleed は構造上クリップされる。よって記事内画像は全て段幅(736px) 内に収め、"広い瞬間" はセクション冒頭の既存ブリード写真(craftsman/researcher)が担う。・--lead : 段幅いっぱいの大きめ横長カット(節目の establishing)。・--inset: 段幅の標準カット(手仕事・資料など)。・.kl-article-duo: アスペクト一致(横長)カットを2枚並べる行。いずれも縦伸び防止に aspect-ratio で高さを規定し object-fit:cover、 figure自身 position:relative で .img-credit(absolute)のアンカーにする。 */ .kl-article-fig { position: relative; margin: 0; width: 100%; /* = テキスト段(736px)幅 */ overflow: hidden; background: var(--kl-panel); /* 読み込み前の地は微パネル(黒地に馴染む) */ } .kl-article-fig img { width: 100%; height: 100%; object-fit: cover; display: block; } /* リード: 段幅・横長(16:9)。記事の節目に大きめの呼吸を作る。 */ .kl-interview__text .lc__body .kl-article-fig--lead { aspect-ratio: 16 / 9; margin-top: 48px; margin-bottom: 48px; } /* インセット: 段幅・3:2。手仕事/資料カット。縦伸びを抑える。 */ .kl-interview__text .lc__body .kl-article-fig--inset { aspect-ratio: 3 / 2; margin-top: 40px; margin-bottom: 40px; } /* インセットの直後が小見出し(.kl-sub)の場合、二重マージンを詰める */ .kl-interview__text .lc__body .kl-article-fig--inset + .kl-sub { margin-top: 28px; } /* 2枚並び: テキスト段幅内で 2カラム。横長カット(1.34:1)を左右に。天地を揃える。 */ .kl-article-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; } .kl-article-duo .kl-article-fig { aspect-ratio: 3 / 2; /* 横長原寸に近い比率で2枚の天地を揃える */ } /* ===== SEC02: 職人写真 — K1: 右ブリード(左320グリッド保持・右端を画面端へ) ===== 左 = 320px グリッド固定。右 = viewport 右端まで最大化。 width = 100vw − 左ガター((100vw−frame)/2) − グリッド左320 ⇒ どの幅でも左320グリッド・右が画面端になる(1536/1920 両幅で検証済)。 */ .kl-craftsman-img { position: relative; margin-left: calc(320 / 1536 * 100%); /* [Phase2] グリッド左を相対化(1536=320) */ margin-right: calc(50% - 50vw); /* [⑤] 右ブリードをフロア対応flow式へ。旧 width:calc(100vw...) は floor(stage min 1200)下で 100vw基準が stage と不整合→stageを超過しドキュメント右に余白。index .topics-img と同方式。1536: margin-right=0・width auto=1216 で旧式と恒等(回帰0)。narrow: 右端=stage右に収まり右余白解消 */ width: auto; height: 768px; overflow: hidden; } .kl-craftsman-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* [feedback3] 画像出典(株式会社ビオック)配置ルール — 白・低不透明度。既定(.kl-img-credit)=右下: 右ブリード画像(craftsman) / フルブリード画像(hero,quality,prefooter)。左下(.kl-img-credit--left)=左ブリード画像(researcher)。視点が止まりにくい外側の隅へ。 */ .kl-img-credit { right: 16px; bottom: 14px; left: auto; top: auto; } .kl-img-credit--left { left: 16px; right: auto; bottom: 14px; top: auto; } /* [fb6→fb] 明るい写真(iv-shokunin / iv-7MR09686 / iv-kokuban)上で白文字クレジットが読めない記事内画像のみダーク化。黒に近いグレーで可読性を確保(不透明度1)。暗い画像上の白クレジット(hero/craftsman/researcher/quality-factory)は白(--gray不使用)。 */ .kl-img-credit--gray { color: #2b2b2b; opacity: 1; } /* ===== SEC03: 研究者写真 — K1: 左ブリード(右320グリッド保持・左端を画面端へ) ===== 左 = viewport 左端へ(負マージンで stage 左ガター分だけ外へ出す)。右 = frame 内 320px グリッドで止める。 margin-left = (frame − 100vw)/2 (= −左ガター, 画面左端) width = 100vw − 左ガター − 320 (craftsman と対称・右端が右320グリッド) */ .kl-researcher-img { position: relative; margin-left: calc(50% - 50vw); /* [Phase2] 左フルブリード(flow): stage中央寄せ基準で viewport左端へ。旧 calc((--frame-100vw)/2) は流体stage<1536で右へ寄り左ブリード喪失。W≥1536では旧式と恒等(1536回帰0) */ width: calc(100vw - (100vw - var(--frame)) / 2 - 320px); height: 768px; overflow: hidden; } .kl-researcher-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===== K2: 麹画像の liquid distortion(SVG feTurbulence+feDisplacementMap)===== [feedback3]もう少し大袈裟に強化: SVG側 scale=11(6→11)＋scale自体もで脈動、 baseFrequency振幅拡大(0.007〜0.017)・dur短縮(9/10.5s)で常に動いている感。 reduced-motion では filter:none で無効化(揺らぎ停止)。 */ .kl-craftsman-img img { filter: url(#kl-liquid-a); } .kl-researcher-img img { filter: url(#kl-liquid-b); } @media (prefers-reduced-motion: reduce) { .kl-craftsman-img img, .kl-researcher-img img { filter: none; } } /* ===================================================================== SEC04 | OUR FORMULATION 左 x=320、見出し幅~672、本文・成分リスト幅~736 ===================================================================== */ .kl-formulation { padding: 160px 0 72px; /* K4: YUKIME 下マージンを詰める(120→72) */ margin-left: calc(320 / 1536 * 100%); /* [Phase2] グリッド左を相対化(1536=320) */ max-width: 736px; } .kl-formulation .kl-en { margin-bottom: 24px; } .kl-formulation__head { margin-bottom: 48px; } .kl-formulation__body { margin-bottom: 64px; } /* 成分リスト */ .kl-ingredients { margin: 0; padding: 0; list-style: none; } .kl-ingredient { border-top: 1px solid var(--kl-line); padding: 32px 0; } .kl-ingredient:last-child { border-bottom: 1px solid var(--kl-line); } .kl-ingredient__name { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.7; letter-spacing: 2px; color: var(--kl-ink); margin: 0 0 12px; } .kl-ingredient__desc { font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.9; color: var(--kl-muted); margin: 0; } /* [fb6] 成分の枠内注釈(desc 内の * と対応)。控えめ小ゴシック・既存トーン(muted)と整合。 */ .kl-ingredient__note { font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 1.7; letter-spacing: .01em; color: var(--kl-muted); margin: 12px 0 0; } /* ===================================================================== SEC05 | QUALITY 工場写真: 全幅帯 (.kl-bleed)。本文: 左 x=320。 ===================================================================== */ .kl-quality { padding-top: 96px; } /* K4: 直前 YUKIME との余白を詰める(160→96) */ .kl-quality__img { position: relative; /* クレジット(.img-credit)アンカー */ height: 1066px; /* .kl-bleed クラスが position:relative / left / width / overflow を担当 */ } .kl-quality__text { margin-left: calc(320 / 1536 * 100%); /* [Phase2] グリッド左を相対化(1536=320) */ max-width: 736px; padding-top: 80px; padding-bottom: 56px; /* [fb7] 白銀比セクション削除で QUALITY→注釈の余白が過大(160+notes108=268px) → 少し詰める(56+108=164px) */ } .kl-quality__text .kl-en { margin-bottom: 20px; } .kl-quality__text .t-head { margin-bottom: 40px; } .kl-quality__text .t-body p { margin-bottom: 24px; } .kl-quality__text .t-body p:last-child { margin-bottom: 0; } /* [feedback3] K5の工程2カラム帯(.kl-quality__process)は撤去。関連CSSも削除済。後日インタビュー記事内に画像選定のうえ再配置予定。 */ /* ===================================================================== 注釈エリア (footer直上・通常フロー・グリッド左寄せ) [feedback3] 黒背景 → .page-notes--light(白文字)。体裁は components.css 共通。位置: グリッド左 left:128(stage基準) / width:1280 / 上下余白約108px。 KOJIは通常フローなので margin-left でグリッド左へ左揃え。 ===================================================================== */ .kl-page-notes { margin-left: calc(128 / 1536 * 100%); /* [Phase2] グリッド左を相対化(1536=128) */ width: min(1280px, calc(1280 / 1536 * 100%)); /* [Phase2] frame相対化 */ padding: 64px 0 64px; /* [fix] 注釈前後の黒余白が大きすぎたため 108→64 に縮小(PC/Tablet) */ } /* ===================================================================== FOOTER (通常フロー末尾 — 旧 position:absolute は廃止) .site-footer は components.css で position:relative; height:530px; background:#d0d0d0; が定義済み → 追加指定不要。 ===================================================================== */ /* ===================================================================== [Phase3] スマホ専用 (<768) — KOJI LAB KOJI は元々 v2 フロー（margin/padding 積み）なので、主作業は・stage フロア除去 + bleed(100vw)中和 → 全幅=viewport(横はみ出しゼロ) ・HERO 前景島(1082px下端固定)→ 左下1カラムオーバーレイ(白文字維持) ・各テキスト列(margin-left:320/1536 + max-width:736)→ 全幅24pxガター・全幅写真(craftsman 右ブリード / researcher 左ブリード / quality 100vw帯) → 全幅 relative・aspect 3/2(liquid SVGフィルタは不変・コンテナのみ全幅化) ・記事内2枚並び(.kl-article-duo)→ 1カラム・回転英文タグライン(.kl-method-deco vdeco)→ 非表示 KOJI は黒テーマ(body #000・白/淡灰文字)のため STORY の「写真上白文字を濃文字へ recolor」「白線SVGを濃パネルに載せる」ルールは不要(暗背景上で白がそのまま可読)。一般的なモバイル積み(元のpxギャップは再現しない)。全ルール <768 ガード＝1536/デスクトップ回帰ゼロ。 ===================================================================== */ @media (max-width: 767px) { /* stage floor 除去 + bleed の水平オフセット中和(全幅=viewport・100vwはみ出し回避) */ .stage.koji-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } .stage.koji-stage .bleed { left: 0; margin-left: 0; width: 100%; } .koji-stage .kl-bleed { margin-left: 0; width: 100%; } /* HERO: 前景島(1082px下端固定)→ 左下1カラム(白文字オーバーレイ維持) */ .kl-hero { height: 100svh; } /* [sp2] FV 見出し(英和)をヘアライン分上へ＝padding-bottom 44→72(他ページと同等のクリアランス) */ .kl-hero__fg { height: auto; top: auto; bottom: 0; left: 0; width: 100%; padding: 0 24px 72px; } .kl-hero__label { position: static; left: auto; top: auto; font-size: 20px; line-height: 1.5; letter-spacing: 4px; } .kl-hero__title { position: static; left: auto; top: auto; width: auto; margin-top: 10px; font-size: 22px; line-height: 36px; letter-spacing: 2px; } /* FV hairline combo (TOP-style): left-bottom vertical scroll-cue + full-width baseline. vline stays left side; kl-hero__credit is at right:16px bottom:16px — no collision. [sp2 fix] 非@media の top:1022/1082px を top:auto で打ち消す（残すと HERO 下端でなく ~1000px 下に描画される不具合）→ bottom 基準で .kl-hero__fg(bottom:0)へアンカー。 */ .kl-hero__vline { position: absolute; left: 24px; right: auto; top: auto; bottom: -40px; height: 96px; width: 0; border-left: 1px solid rgba(255,255,255,.6); } .kl-hero__hline { position: absolute; left: 0; right: auto; top: auto; bottom: 0; width: 100%; border-top: 1px solid rgba(255,255,255,.28); } .kl-hero__credit { right: 16px; bottom: 16px; } /* 回転英文タグライン(縦組み装飾)→ 非表示 */ .koji-stage .kl-method-deco { display: none; } /* SEC01 INTRO */ .kl-intro { margin-left: 0; max-width: none; padding: 64px 24px 48px; } .kl-intro__h { margin-bottom: 28px; } .kl-intro__body p { font-size: 16px; line-height: 30px; } /* SEC02/03 インタビュー共通 */ .kl-interview-sec { padding-top: 40px; } /* 職人(右ブリード)/研究者(左ブリード)写真 → 全幅・3:2 */ .kl-craftsman-img, .kl-researcher-img { margin-left: 0; margin-right: 0; width: 100%; height: auto; aspect-ratio: 3 / 2; } /* [fb] モバイルでは液体歪み(SVG feDisplacementMap)を無効化。 iOS Safari は 0×0 SVG 内 filter 参照で対象要素が描画されず画像が抜ける現象があるため、 reduced-motion と同様に filter:none で確実に表示させる(PC/Chrome は従来どおり歪みあり)。 */ .kl-craftsman-img img, .kl-researcher-img img { filter: none; } /* [fix]「麹職人が語る」セクションの職人写真クレジットを記事内クレジットと同じグレー(--gray)に統一(スマホのみ) */ .kl-craftsman-img .kl-img-credit { color: #2b2b2b; opacity: 1; } /* インタビュー本文 → 全幅1カラム(.lc 折りたたみ機構はそのまま機能) */ .kl-interview__text { margin-left: 0; max-width: none; padding: 48px 24px 56px; } /* 記事内2枚並び → 1カラム */ .kl-article-duo { grid-template-columns: 1fr; gap: 20px; } /* SEC04 OUR FORMULATION */ .kl-formulation { margin-left: 0; max-width: none; padding: 64px 24px 56px; } .kl-formulation__head { margin-bottom: 32px; } .kl-formulation__body { margin-bottom: 40px; } /* SEC05 QUALITY */ .kl-quality { padding-top: 40px; } .kl-quality__img { height: auto; aspect-ratio: 3 / 2; } .kl-quality__text { margin-left: 0; max-width: none; padding: 48px 24px 40px; } /* 注釈(暗背景なので page-notes--light のまま=白文字) */ .kl-page-notes { margin-left: 0; width: auto; padding: 40px 24px 64px; } }