直下から#sec01/.vm-wrapに至るまでのBAYCREW'S標準テンプレート階層(main > .l-inner > article > .ftool-wrapper > #sec01 > .mb60 > ...)がいずれも display:blockのままでBFCを持たず、内部のどこかのmargin-topがこの一帯を素通りして

の外まで伝播し、KVの上に12px相当の謎の余白を作っていた（.vm-wrap自身への flow-root指定だけでは、vm-wrapより外側で起きるこの伝播は防げなかった）。関係する階層すべてにflow-rootを指定し、二重三重に遮断する */ main, .l-inner, article, .ftool-wrapper { display: flow-root; } /* 本番実機で再計測して判明：#sec01の直下にBAYCREW'S標準テンプレートの汎用スペーサークラス「.mb60」(名前の通りmargin-bottom:60px想定のユーティリティ)がCMSによって自動的に2つ挿入されており(1つ目は空・高さ0、2つ目が実際の本文を内包)、 1つ目のmargin-bottomがKVの上に12px相当の余白として残っていた。 flow-rootだけでは「要素自身の外側マージン」は打ち消せないため、marginそのものを 0にする。#sec01.article／ul.item_reference_b--tpl-Y／li.descriptionも同様に保険として margin/padding を0にし、二重三重に遮断する */ .mb60, #sec01.article, ul.item_reference_b--tpl-Y, li.description { display: flow-root !important; margin: 0 !important; padding: 0 !important; } /* 本番CMS上だけの上（との間）に謎の余白ができる問題への対処。 .vm-wrapにdisplay:flow-rootを設定してもこの余白は消えなかった（原因はvm-wrapよりさらに外側、直下の#sec01/.mb60等CMS標準マークアップ側のどこかのマージンが自身にはpadding/borderがないせいで方向へ突き抜けていたため。本番の実DOMで検証済み：にdisplay:flow-rootを当てると解消することを確認）。このCSSファイルは本ページ専用に読み込まれるため、bodyへの指定も安全 */ body { display: flow-root !important; } .vm-wrap { font-family: var(--vm-sans); color: var(--vm-black); -webkit-font-smoothing: antialiased; font-size: 13px; line-height: 1.7; /* 本番CMS上だけKVの上に謎の余白ができる問題への対処。ローカルでは直下に .vm-wrapを置いているため発生しないが、本番は.vm-wrapがCMS標準のli/ul/div等複数階層でラップされる（#sec01の中の.item_reference_b--tpl-Y等）。それらのどこかに残っているマージンが、.vm-wrap自身にはpadding/borderがないせいで子（.vm-kv）のマージンだと誤認されて祖先方向へ突き抜け(margin collapse)、 htmlの直下まで伝播して見えない余白を作っていた。flow-rootで新しいブロック整形コンテキストを作り、この突き抜けをここで完全に遮断する（overflow:hiddenと違い中身のはみ出し表示への影響はない） */ display: flow-root; position: relative; /* SPロゴをvm-wrap基準で絶対配置するための基準ボックス */ } .vm-wrap * { box-sizing: border-box; } .vm-wrap img { max-width: 100%; display: block; } .vm-wrap a { color: inherit; } .vm-layout { position: relative; width: 100%; } /* ---------- ヘッダー（左上ロゴ＋右上メニュー） ---------- Figma実測(SP)：ロゴ 10,10,85x26／ハンバーガー右0,50x50角丸なし三本線 Figma実測(PC)：ロゴ 11,19,160.19x49／メニューは常時表示のテキストリンク（右端から41px、Instrument Serif 16px、下線あり）ユーザー指定：SPはロゴをスクロール追従させず、ページ先頭のみに固定表示（下にスクロールすると流れて消える）。ハンバーガーメニューは引き続きスクロール追従（常時表示）。 PCはロゴ・メニューとも従来通りスクロール追従のまま。 → ロゴをHTML側で.vm-headerの外に独立して配置し、SPでは.vm-wrap基準のposition:absolute （通常のドキュメントフローと一緒にスクロールして流れる）、PCではposition:fixedに出し分ける。 */ .vm-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; pointer-events: none; } .vm-header__logo { position: absolute; /* SP：vm-wrap基準、ページ先頭付近に固定表示されスクロールで流れる */ top: 10px; left: 10px; width: 85px; z-index: 1000; pointer-events: auto; } .vm-header__logo img { width: 100%; height: auto; display: block; } .vm-header__nav { display: none; } .vm-header__hamburger { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: none; border: none; cursor: pointer; pointer-events: auto; padding: 0; } .vm-header__hamburger span { position: absolute; left: 25%; width: 50%; height: 1px; background: var(--vm-black); transition: 0.2s linear; } .vm-header__hamburger span:nth-child(1) { top: 32%; } .vm-header__hamburger span:nth-child(2) { top: 50%; } .vm-header__hamburger span:nth-child(3) { bottom: 33%; } .vm-header__hamburger.is-open span:nth-child(1) { top: 50%; transform: rotate(45deg); } .vm-header__hamburger.is-open span:nth-child(2) { opacity: 0; } .vm-header__hamburger.is-open span:nth-child(3) { bottom: 50%; transform: rotate(-45deg); } /* SPのハンバーガー展開メニュー（参照ページ18252のsp-menuと同じ4項目を踏襲） */ .vm-header__spmenu { position: fixed; inset: 0; z-index: 999; background: rgba(255,255,255,0.98); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .vm-header__spmenu.is-open { opacity: 1; pointer-events: auto; } .vm-header__spmenu ul { list-style: none; margin: 0; padding: 0; text-align: center; } .vm-header__spmenu li { margin: 0 0 28px; } .vm-header__spmenu li:last-child { margin-bottom: 0; } .vm-header__spmenu a { font-family: var(--vm-serif); font-size: 20px; text-decoration: underline; text-underline-offset: 4px; } @media only screen and (min-width: 740px) { .vm-header__logo { position: fixed; /* PCは従来通りスクロール追従（常時表示） */ top: 19px; left: 11px; width: clamp(85px, 8.33vw, 120px); } /* PCで大きすぎたため縮小 */ .vm-header__hamburger { display: none; } .vm-header__spmenu { display: none; } .vm-header__nav { display: block; position: absolute; top: 34px; right: 41px; pointer-events: auto; } .vm-header__nav ul { list-style: none; margin: 0; padding: 0; text-align: right; } .vm-header__nav li { margin: 0 0 8px; } .vm-header__nav li:last-child { margin-bottom: 0; } .vm-header__nav a { font-family: var(--vm-serif); font-size: clamp(13px, 1.111vw, 16px); text-decoration: underline; text-underline-offset: 3px; } } /* ---------- KV（8枚コラージュ・静止画） ---------- */ .vm-kv { position: relative; width: 100vw; /* Figma実測：KVだけは記事コンテナの幅を無視してブラウザ画面いっぱいに広がるフルブリード。#sec01のカラム幅制限の影響を受けないよう、ビューポート基準の100vw＋負のマージンで中央の親要素から外へはみ出させる（キャプションや本文など他の要素は通常通りコンテナ内） */ left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: 100vh; height: 100svh; overflow: hidden; background: #fff; /* Figma実測：背景はベージュではなく白 */ } /* 初回表示時、画像をa→b→c→f→g→h→(タイトル下のd・eは同時、最後から2番目)→ 最後にタイトルの順にフェードインする演出。スクロール起点ではなくページ読み込み起点のため、IntersectionObserverではなく CSSアニメーション＋animation-delayの段違いで実現している */ @keyframes vm-kv-fade-in { from { opacity: 0; } to { opacity: 1; } } .vm-kv__img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: vm-kv-fade-in 0.8s ease forwards; } .vm-kv__img--a { left: 3.817%; top: 2.206%; width: 28.522%; height: 24.412%; animation-delay: 0.1s; } .vm-kv__img--b { left: 35.750%; top: 2.206%; width: 28.522%; height: 24.412%; animation-delay: 0.4s; } .vm-kv__img--c { left: 67.684%; top: 2.206%; width: 28.522%; height: 24.412%; animation-delay: 0.7s; } .vm-kv__img--f { left: 0%; top: 73.676%; width: 33.333%; height: 26.324%; animation-delay: 1.0s; } .vm-kv__img--g { left: 33.333%; top: 73.676%; width: 33.333%; height: 26.324%; animation-delay: 1.3s; } .vm-kv__img--h { left: 66.667%; top: 73.676%; width: 33.333%; height: 26.324%; animation-delay: 1.6s; } /* タイトルの下にある2枚（d・e）は最後から2番目に同時フェードイン */ .vm-kv__img--d { left: 0%; top: 28.676%; width: 50.127%; height: 42.941%; animation-delay: 1.9s; } .vm-kv__img--e { left: 49.873%; top: 28.676%; width: 50.127%; height: 42.941%; animation-delay: 1.9s; } /* タイトルはFigma書き出しのSVG画像(title.svg, 319x155)をそのまま配置。幅80.98%はSVGの原寸(155px)がKVの高さ22.794%(680px×22.794%=155px)と厳密に一致することを確認済みのため、height:autoで自然な縦横比のまま表示 */ .vm-kv__title { position: absolute; left: 9.415%; top: 38.671%; width: 80.980%; height: auto; pointer-events: none; opacity: 0; animation: vm-kv-fade-in 0.8s ease forwards; animation-delay: 2.3s; } @media only screen and (min-width: 740px) { /* Figma「Desktop」フレームのKVが正式デザインされたため実測値に更新（1440x720。SPと違い左に縦長2枚(d/e)、右上下に3枚ずつ(a/b/c, f/g/h)の配置） */ .vm-kv { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; height: auto; aspect-ratio: 1440 / 720; } .vm-kv__img--a { left: 2.428%; top: 5%; width: 11.597%; height: 41.111%; } .vm-kv__img--b { left: 15.483%; top: 5%; width: 11.597%; height: 41.111%; } .vm-kv__img--c { left: 28.469%; top: 5%; width: 11.667%; height: 41.111%; } .vm-kv__img--d { left: 42.636%; top: 0%; width: 28.819%; height: 100%; } .vm-kv__img--e { left: 71.317%; top: 0%; width: 28.75%; height: 100%; } .vm-kv__img--f { left: 0%; top: 51.111%; width: 14.167%; height: 49.306%; } .vm-kv__img--g { left: 14.164%; top: 51.111%; width: 14.236%; height: 49.306%; } .vm-kv__img--h { left: 28.400%; top: 51.111%; width: 14.236%; height: 49.306%; } .vm-kv__title { left: 55.64%; top: 29.93%; width: 31.42%; height: auto; } } /* ---------- 本文 ---------- PCはKV固定＋右カラムではなく、Figma通りKVの下にフルワイドで縦積み。 */ .vm-main { width: 100%; } @media only screen and (min-width: 740px) { .vm-main { width: 100%; min-height: 0; margin: 0; padding: 0; } } /* スクロールフェード（JSでis-inを付与。JSはサーバーへ直接アップロードした assets/js/script.js を