/* home-spacing-v1 — ホームの節の縦の余白（共通の枠の担当、2026-09-29。ホーム全体の独立審査「回帰・性能・細部」の 2・6・7）。 ホームの CSS のいちばん最後に読み込む（ほかの節の余白の上書き：brand-unify-v1.css・products-bands-v1.css・contact-home-v3.css の後）。 規則（ブランド契約 §7・細部の基準 §2）：帯の端 → 見出しの字、節 → 節（前の節の最後のインク → 次の見出しの字）は、どちらも 字のインクで 96（スマホ 64）。帯の終わりはフッターの下 96（スマホ 64）。 以前は節ごとに尺度にない計算値（#news の margin 84/60、#works の margin-top 31・padding-bottom 42、.edition-contact の margin-top 28・padding 26/10・margin-bottom −9 ほか）が重なっていて、実測で 102・108・111〜115・44（スマホ 69・70・73・36）だった。 ここでは、どの余白も「規則の値 --home-rhythm − 字のインクの補正」だけで書く。補正は、箱の端から字のインクまでの距離で、 書体の大きさと組みで決まる（下の変数。値は measure-rhythm.mjs の内訳で実測し、8 幅で確かめた）。 実測：research-refresh/round55/direction-reset/home-spacing-v1/measure-rhythm.mjs */ body.study16.s55 { --home-rhythm: 96px; /* 見出し（h2、Barlow Condensed 25px・行の高さ 28.75px）の箱の上端 → 大文字のインクの上端。 (28.75 − 1.2 × 25) / 2 + 0.3 × 25 = 6.9。画素に描かれると 6 */ --home-head-ink: 6px; /* 節の見出しの行（見出しと右の操作リンク「ALL NEWS」など、高さ 44 の行）の上端 → 見出しの箱の上端 */ --home-head-row: 6px; /* CONTACT の見出しの行（見出しと「案件・スポンサー…」の行）の上端 → 見出しの箱の上端 */ --home-contact-row: 7px; /* NEWS の最後のインク（最後の記事の題、Zen Kaku Gothic New）→ NEWS の箱の下端。上の画像の高さで行の位置に端数が出て、 インクの丸めで ±1 動く。4.5・5・5.5 を試し、5 がいちばん多くの幅で 96 になった（768〜1600 の 8 幅で 96、1920 だけ 97）。 */ --home-news-tail: 5px; /* WORKS の最後のインク（最後の作品の説明の行、Zen Kaku Gothic New 11px・行の高さ 16.5px）→ WORKS の中身の下端。 どの幅も同じ行だが、上の画像の高さで行の位置に端数が出て、インクが 2〜3px の間で丸められる（1024 で 3、1100〜1440 で 2。 probe-works-tail.mjs）。その真ん中の 2.5px にする */ --home-works-tail: 2.5px; /* フッターのワードマーク（wordmark.png）の箱の下端 → インクの下端（画像の下の透明な余白） */ --home-sig-inset: 7px; /* CONTACT の最後の中身 → フッターの最初のインク。brand-unify-v1.css の設計の値（CONTACT の字 → フッターの字 48） */ --home-foot-gap: 48px; } @media (max-width: 767px) { body.study16.s55 { --home-rhythm: 64px; /* 見出し 22px・行の高さ 25.3px：(25.3 − 26.4) / 2 + 0.3 × 22 = 6.05。画素に描かれると 5 */ --home-head-ink: 5px; --home-head-row: 9px; /* スマホは見出しと「案件・スポンサー…」が縦に並び、見出しが行の上端にある */ --home-contact-row: 0px; /* スマホの最後の記事は、画像の下端が最後のインク */ --home-news-tail: 0px; --home-works-tail: 3px; } } /* ヒーロー → LIVE：ヒーローの下端（帯の端）→ LIVE の見出しの字 */ body.study16.s55 #main > .edition-live-wrap.edition-live-wrap { padding-top: calc(var(--home-rhythm) - var(--home-head-ink)); } /* PRODUCTS の帯 → NEWS の見出しの字（1440 で 96 のまま。スマホは 63 → 64） */ body.study16.s55 #main > #news.edition-news { margin-top: calc(var(--home-rhythm) - var(--home-head-row) - var(--home-head-ink)); margin-bottom: 0; padding-top: 0; padding-bottom: 0; } /* NEWS → WORKS：NEWS の最後のインク → WORKS の見出しの字 */ body.study16.s55 #main > #works.edition-works { margin-top: calc(var(--home-rhythm) - var(--home-news-tail) - var(--home-head-row) - var(--home-head-ink)); padding-top: 0; padding-bottom: 0; } /* WORKS → CONTACT：WORKS の最後のインク → CONTACT の見出しの字。 CONTACT → フッター：負の margin をやめる（スマホの margin-bottom −9px で、フッターが「案件・スポンサー…」に 8px 重なり、 押せる高さが 38px になっていた）。 */ body.study16.s55 #main .edition-contact.edition-contact { margin-top: 0; margin-bottom: 0; padding-top: calc(var(--home-rhythm) - var(--home-works-tail) - var(--home-contact-row) - var(--home-head-ink)); padding-bottom: 0; } /* フッター：CONTACT の最後の中身 → フッターの最初のインクを --home-foot-gap に。値は footer の padding-top で持つ （計算の元：「案件・スポンサー…」の押せる箱 44 の下端 → フッターの最初の字のインク。実測で決めた補正は下の変数） */ body.study16.s55 .edition-shell > .edition-footer.edition-footer { padding-top: calc(var(--home-foot-gap) - var(--home-contact-tail) - var(--home-foot-ink)); /* フッターの下：ワードマークのインク → フッターの下端を 96（スマホ 64）。ワードマークは行の中の inline-block で、 行の下がりの余り（約 5px）が下に付いていたので、vertical-align: top で外す（下のワードマークの規則） */ padding-bottom: calc(var(--home-rhythm) - var(--home-sig-inset)); } body.study16.s55 { /* CONTACT の最後のインク（「案件・スポンサー…」の字）→ CONTACT の箱の下端。PC は押せる箱（44）の中で字が下に寄っていて 3 */ --home-contact-tail: 3px; /* フッターの箱の上端（padding の内側）→ 最初の字のインク（AKIHABARA, JAPAN と X・YouTube の行。押せる高さ 40 の中の字） */ --home-foot-ink: 12px; } @media (max-width: 767px) { body.study16.s55 { /* スマホは押せる箱（44）の中で字が上に寄っていて、字の下に 22 ある */ --home-contact-tail: 22px; --home-foot-ink: 14px; } } body.study16.s55 .edition-footer .footer-signature { vertical-align: top; } /* LIVE の帯：読み込み中のあいだ、待機（アーカイブ 4 本）の完成時の高さを最初から確保する（アドレス付きで開いたときの着地のずれ、 審査の 2）。以前は読み込み中にカードが後から入り（1440 で 287 → 576px）、待機になると帯の下の行に「MEMBER CHANNELS」が加わって さらに伸び（→ 602px）、下の節の見出しが押し下げられていた。 カードの高さは列の幅で決まるので、式で書く（列の幅は #on-air を寸法の基準にして 100cqw で読む）。値は完成形の実測から： - カード：サムネイル（幅 × 9/16）＋ 字の塊（名前・題 2 行・時刻）。字の塊は PC 125.85px、スマホ 117.86px - 列：960 以上は 4 列・列の間 32、768〜959 は 2 列 2 段・列の間 32・段の間 32（live-member-cards-v1.css の境目）、 767 以下は 2 列 2 段・列の間 16・段の間 24 - カード以外（「アーカイブ」の行、カードの上下の間、帯の下の行）：PC 201px、スマホ 205px probe-live-height.mjs で、767・768・900・960・1024・1440・1920・390・360 の完成形と 0.1px まで一致することを確かめた。 配信中・不明の状態には当てない（読み込み中だけ）。 */ body.s55 #on-air { container-type: inline-size; } body.s55 #on-air[data-state="loading"] > #v8-live-content { min-height: calc(201px + 125.85px + (100cqw - 3 * 32px) / 4 * 9 / 16); } @media (min-width: 768px) and (max-width: 959px) { body.s55 #on-air[data-state="loading"] > #v8-live-content { min-height: calc(201px + 32px + 2 * (125.85px + (100cqw - 32px) / 2 * 9 / 16)); } } @media (max-width: 767px) { body.s55 #on-air[data-state="loading"] > #v8-live-content { min-height: calc(205px + 24px + 2 * (117.86px + (100cqw - 16px) / 2 * 9 / 16)); } } /* NEWS：読み込み中の状態の行（「最新のお知らせを確認しています…」）を、確認が済んだとき（data-news-state="current"）と同じく 見えない扱いにする（study48-editorial.css の current の規則と同じ。読み上げには残る）。以前は読み込み中だけ行と上の余白で 40px あり、確認が済むと消えて、下の節（WORKS など）の見出しが 40px 上へずれていた（アドレス付きで開いたときの着地、審査の 2）。 取得に失敗したとき（stale）は、今までどおり行が見える。 */ body.study16.s55 .edition-news[data-news-state="loading"] .edition-news-foot { margin-top: 0; } body.study16.s55 .edition-news[data-news-state="loading"] .edition-news-foot p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* アドレス付きで開いたときの着地：CONTACT にも、ほかの節（#on-air・#products・#news・#works）と同じ scroll-margin-top 72px （html の scroll-padding-top 24 と合わせて、見出しが画面の上から 96 に着く。id="contact" は build-paint-fix.py が付ける）。 CONTACT はページの最後なので、画面が高いと下まで届かず、その手前で止まる。 */ body.study16.s55 #contact { scroll-margin-top: 72px; }