を復活させる（wp-includes/block-supports/layout.php の wp_restore_group_inner_container）。このラッパが入ると .scy-lay の直下の子が「ラッパ1個」になり、グリッドが 1カラムに潰れる（実測: avgFill が 605px → 92px まで落ちた）。ラッパをボックスツリーから外して、実際の子をそのままグリッドアイテムにする。 display:contents は要素の箱だけを消し、子孫のスタイル継承・DOM・アクセシビリティツリーは保つので、SWELL 側の .is-layout-flow の余白規則もそのまま効く。 */ .scy-pg .post_content .wp-block-group > .wp-block-group__inner-container { display: contents; } .scy-pg .post_content .scy-lay { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--scy-col-gap); row-gap: var(--scy-sp-6); align-items: start; margin-block: var(--scy-sp-8); } /* 【重要】このファイルで .scy-lay / .scy-card / .scy-rail などの「中身」を指すときは子結合子（>）を使わない。display:contents は箱を消すだけでDOMは変えないため、実際の構造は .scy-lay > .wp-block-group__inner-container > .is-cN であり、 `.scy-lay > .is-cN` は一致しない（グリッドの配置は効くのに、罫線や測度だけが効かないという分かりにくい壊れ方をする。実際に1度これで踏んだ）。代わりに、列そのもののクラスを直接指すか、子孫結合子で書く。 */ /* SWELL/WPのブロック余白（`> * + *` のマージン）はグリッドの行間と二重になるので止める */ .scy-pg .post_content .scy-lay > *, .scy-pg .post_content :is(.is-c3, .is-c4, .is-c5, .is-c6, .is-c7, .is-c8, .is-c9, .is-c12, .is-right-4, .is-right-5) { margin-block: 0; } .scy-pg .post_content .is-c3 { grid-column: span 3; } .scy-pg .post_content .is-c4 { grid-column: span 4; } .scy-pg .post_content .is-c5 { grid-column: span 5; } .scy-pg .post_content .is-c6 { grid-column: span 6; } .scy-pg .post_content .is-c7 { grid-column: span 7; } .scy-pg .post_content .is-c8 { grid-column: span 8; } .scy-pg .post_content .is-c9 { grid-column: span 9; } .scy-pg .post_content .is-c12 { grid-column: span 12; } /* 右端に寄せる列（サイドレール）。左に1カラムぶんの間を空けたいとき */ .scy-pg .post_content .is-right-4 { grid-column: 9 / span 4; } .scy-pg .post_content .is-right-5 { grid-column: 8 / span 5; } /* カラムの中では、カラム幅そのものが測度を担う（6カラム＝692px＝1行43字）。ただし7カラム以上（813px＝50字〜）は長すぎるので、そこだけ 43em で止める。 */ .scy-pg .post_content .scy-lay p, .scy-pg .post_content .scy-lay ul, .scy-pg .post_content .scy-lay ol { max-width: none; } .scy-pg .post_content :is(.is-c7, .is-c8, .is-c9, .is-c12) p { max-width: var(--scy-measure-text); } /* 見出しレール（左の狭い列に見出しだけを置く型・三井の左アクセントバーの発展形） */ .scy-pg .post_content .scy-rail h2:not([class*="scy-"]), .scy-pg .post_content .scy-rail h3:not([class*="scy-"]) { margin-top: 0; padding-top: var(--scy-sp-2); border-top: 2px solid var(--scy-ink); } .scy-pg .post_content .scy-rail__note { margin: var(--scy-sp-2) 0 0; font-size: var(--scy-fs-caption); line-height: 1.7; color: var(--scy-ink); } /* ============================================================ 2. 全幅イメージバンド（.scy-band） ------------------------------------------------------------ セクションの区切りに置く帯。角丸0・枠線なし・object-fit:cover。高さの実測根拠（研究レポートの写真帯）: 三井140 / 森ビル320 / 東京建物342 / 野村384px。 ============================================================ */ .scy-pg .post_content .scy-band { margin: var(--scy-sp-12) 0; overflow: hidden; background: var(--scy-surface-2); } .scy-pg .post_content .scy-band img { display: block; width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; border: 0; border-radius: 0; padding: 0; } /* 空の被写体（上半分が空だけ）の写真は下寄せで切る */ .scy-pg .post_content .scy-band--skyline img { object-position: 50% 88%; } .scy-pg .post_content .scy-band figcaption { margin: var(--scy-sp-2) 0 0; padding-inline: var(--swl-pad_container, 0px); font-size: var(--scy-fs-caption); color: var(--scy-ink); } /* ============================================================ 3. カードグリッド（.scy-cards） ------------------------------------------------------------ 「見出し＋短い本文」が3つ以上並ぶところは、縦積みではなく面で並べる。良品計画の Environment / Social / Governance の3列がこの型。枠線・地色・シャドウは付けない。上罫1本だけで区切る（P5）。 ============================================================ */ .scy-pg .post_content .scy-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: var(--scy-col-gap); row-gap: var(--scy-sp-6); margin-block: var(--scy-sp-8); } .scy-pg .post_content .scy-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .scy-pg .post_content .scy-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scy-pg .post_content .scy-card { border-top: 1px solid var(--scy-line); padding-top: var(--scy-sp-3); /* 本文の長さが揃わないので、最後の要素（＝「詳しく見る」）だけを地に落とす。 3枚の下端が1本に揃い、短いカードの下に空きが残らない。 */ display: flex; flex-direction: column; } /* 子結合子は使えない。wp:group の直下には display:contents の .wp-block-group__inner-container が入るので、`> :last-child` はそのラッパに当たり、箱を持たないラッパに margin-top:auto を書いても何も起きない（§1の注記と同じ罠）。 */ .scy-pg .post_content .scy-card .scy-more { margin-top: auto; } .scy-pg .post_content .scy-card h2:not([class*="scy-"]), .scy-pg .post_content .scy-card h3:not([class*="scy-"]) { margin-top: 0; margin-bottom: 12px; font-size: var(--scy-fs-h3); /* カード内の見出しは h3 相当（22px）に落とす */ } .scy-pg .post_content .scy-card p { max-width: none; margin-bottom: 12px; } .scy-pg .post_content .scy-card p:last-child { margin-bottom: 0; } /* 本文段落をカードの高さいっぱいに伸ばす。3枚の本文量が違っても、カードは「見出し・本文・詳しく見る」で1枚の面として最後まで続く。 */ .scy-pg .post_content .scy-card p:not(.scy-more) { flex: 1 1 auto; } /* 語呂合わせの一覧（ご挨拶の SUPERCITY 9項目）のような「短い定型行」のカード */ .scy-pg .post_content .scy-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--scy-col-gap); row-gap: var(--scy-sp-3); margin: var(--scy-sp-4) 0 0; padding: 0; list-style: none; } .scy-pg .post_content .scy-keys li { list-style: none; border-top: 1px solid var(--scy-line); padding-top: 12px; font-size: var(--scy-fs-body); line-height: 1.7; } .scy-pg .post_content .scy-keys li::marker { content: none; } /* ============================================================ 4. 本文タイポグラフィ（.scy-pg） ============================================================ */ .scy-pg .post_content { font-family: var(--scy-sans); } .scy-pg .post_content p:not([class*="scy-"]), .scy-pg .post_content li:not([class*="scy-"]) { font-family: var(--scy-sans); font-size: var(--scy-fs-body); /* 16px。P7 */ line-height: var(--scy-lh-body); /* 1.8 */ color: var(--scy-ink); } /* グリッドに入っていない走り文（直下の段落）の測度。43em＝1行約43字（P8）。 */ .scy-pg .post_content > p:not([class*="scy-"]), .scy-pg .post_content > ul:not([class*="scy-"]), .scy-pg .post_content > ol:not([class*="scy-"]) { max-width: var(--scy-measure-text); } /* ---- 冒頭の事実リード ---- */ .scy-pg .post_content .scy-pg__lead, .post_content .scy-pg__lead { margin: 0 0 var(--scy-sp-6); max-width: var(--scy-measure-text, 43em); font-family: var(--scy-sans); font-size: var(--scy-fs-lead); /* 17-19px */ line-height: var(--scy-lh-lead); color: var(--scy-ink); /* ink-2は白地で4.39:1＝AA(4.5:1)割れのため本文系はink一本 */ text-align: left; /* 中央揃え禁止（§3-3） */ } /* ---- 走り文の2段組（ご挨拶の本文） ---- 1カラム692px＝1行43字。2段で 692*2+64 = 1448 ≒ コンテナ幅を使い切る。段組みは「写真も表も無いが文章は長い」ページで、右を殺さずに測度を守る唯一の手段。 */ .scy-pg .post_content .scy-flow2 { column-count: 2; column-gap: var(--scy-sp-8); /* 64px */ margin-block: var(--scy-sp-6); } /* 段落が1本しか無いページ（M＆A・プロジェクトマーケティング）は、 break-inside:avoid のままだと段落まるごとが左段に落ちて右段が空になる＝2段組の意味が消える。その1本だけは段をまたいで流す（実測: marketing の平均使用幅 1005px → 約1400px）。 */ .scy-pg .post_content .scy-flow2 p:only-child { break-inside: auto; } .scy-pg .post_content .scy-flow2 p { max-width: none; margin-top: 0; margin-bottom: 1.5em; break-inside: avoid; } .scy-pg .post_content .scy-flow2 p:last-child { margin-bottom: 0; } /* ---- 箇条書きを2列に置く（弊社の歴史・掲載媒体5件） ---- 段組み（column-count）ではなくグリッドにする。段組みだと項目の長さが不揃いなときに左段だけが長くなり、右に448pxの空白が縦に残った（実測）。グリッドなら項目が左右交互に入るので、余るのは最終行の1マスだけになる。 */ .scy-pg .post_content ul.scy-list2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--scy-sp-8); row-gap: var(--scy-sp-3); max-width: none; margin-block: var(--scy-sp-3); padding-left: 0; list-style: none; } .scy-pg .post_content ul.scy-list2 li { list-style: none; border-top: 1px solid var(--scy-line); padding-top: 12px; margin: 0; } /* 項目が奇数のとき（掲載媒体は5件）、最終行は左マスだけが埋まり右692pxが空く。・2列ぶちぬき＋段組み → 3行の項目が「2行｜1行」に割れ、右段に「です。」1語だけが残る泣き別れになった（実測・スクショで確認）。不採用。・採ったのは「箱だけ全幅・文字は左半分」。上罫が一覧の幅いっぱいに通ってリストの終わりが締まり、1行の字数（約42字）は変わらない。 */ .scy-pg .post_content ul.scy-list2 li:last-child:nth-child(odd) { grid-column: 1 / -1; box-sizing: border-box; padding-right: calc(50% + var(--scy-sp-8) / 2); } .scy-pg .post_content ul.scy-list2 li::marker { content: none; } /* ============================================================ 5. 見出し（.scy-pg） ============================================================ */ .scy-pg .post_content h2:not([class*="scy-"]) { font-family: var(--scy-sans); /* ページ名h1（page-title.css・最大40px）より必ず小さくし、h1 40 > h2 32 > h3 22 の3段を作る */ font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; /* P6 */ line-height: var(--scy-lh-heading); letter-spacing: var(--scy-ls-heading); color: var(--scy-ink); text-align: left; background: none; border: none; padding: 0; margin: var(--scy-sp-8) 0 var(--scy-sp-2); } .scy-pg .post_content h3:not([class*="scy-"]) { font-family: var(--scy-sans); font-size: var(--scy-fs-h3); /* 22px */ font-weight: 500; line-height: var(--scy-lh-heading); letter-spacing: var(--scy-ls-heading); color: var(--scy-ink); text-align: left; background: none; border: none; padding: 0; margin: var(--scy-sp-6) 0 8px; } .scy-pg .post_content h4:not([class*="scy-"]) { font-family: var(--scy-sans); font-size: 1.125rem; /* 18px。三井h4=20px・三菱地所h4=18/20px */ font-weight: 500; color: var(--scy-ink); background: none; border: none; padding: 0; margin: var(--scy-sp-4) 0 8px; } /* SWELLの見出し装飾（下線・左バー・番号）の擬似要素を止める */ .scy-pg .post_content h2:not([class*="scy-"])::before, .scy-pg .post_content h2:not([class*="scy-"])::after, .scy-pg .post_content h3:not([class*="scy-"])::before, .scy-pg .post_content h3:not([class*="scy-"])::after, .scy-pg .post_content h4:not([class*="scy-"])::before, .scy-pg .post_content h4:not([class*="scy-"])::after { content: none; display: none; } /* 本文先頭の h2 は、ページ名h1と離しすぎない */ .scy-pg .post_content > h2:first-child, .scy-pg .post_content .scy-pagehead + h2 { margin-top: 0; } /* 節見出し（全幅で1本引く型・三井の帯見出しに相当）。グリッドの直前に来る h2 に上罫を足して、セクションの切れ目を幅いっぱいに見せる。 */ .scy-pg .post_content .scy-sechead { margin-top: var(--scy-sp-12); padding-top: var(--scy-sp-3); border-top: 1px solid var(--scy-line); } /* ============================================================ 6. 非対称2列（media-text） ------------------------------------------------------------ 良品計画のヒーロー「見出し（狭い列）＋写真（広い列）」の型。 50:50 の対称分割はリズムが出ないので 1.25 : 1 にし、左右はブロック側の mediaPosition でセクションごとに入れ替わる。 1512px時の実寸: 写真 760px ／テキスト 608px（＝1行38字。P8の範囲内） ============================================================ */ .scy-pg .post_content .wp-block-media-text { grid-template-columns: 1.25fr 1fr; gap: 0 var(--scy-sp-6); /* 48px */ /* center から stretch へ（2026-08-18 仕上げ）。 center のままだと、写真427px・本文255pxの差 172px が本文の上下に86pxずつ残り、その帯では右608pxに何も無い＝死に領域になっていた（実測 gap 656px × 3行分）。 stretch にして「行の高さ＝本文の高さ」に主従を入れ替える。 */ align-items: stretch; margin-bottom: var(--scy-sp-12); } .scy-pg .post_content .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 1.25fr; } .scy-pg .post_content .wp-block-media-text__media { grid-column: 1; grid-row: 1; /* 写真はマスを埋める側。自分では行の高さを決めない（決めると本文との差が死に領域になる）。最低280pxだけ確保して、それ以上は本文の高さに合わせて伸びる。 */ position: relative; min-height: 280px; background: var(--scy-surface-2); /* WP本体は media / content の両方に align-self:center を当てる。写真と本文の天地がずれ、行の上下端に「片方しか無い帯」が残るので stretch に戻す。 */ align-self: stretch; } .scy-pg .post_content .wp-block-media-text__content { align-self: stretch; } .scy-pg .post_content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-column: 2; } .scy-pg .post_content .wp-block-media-text__content { grid-column: 2; grid-row: 1; padding: 0; /* 見出しは天、「詳しく見る」は地に置く。写真の天地と本文の天地が揃うので、写真の横に「何も無い帯」が生まれない。 */ display: flex; flex-direction: column; justify-content: space-between; /* align-items は既定の stretch のまま（flex-start にすると見出し・段落が文字幅まで縮み、608pxの列の右が空く＝直そうとしている症状を作る） */ } .scy-pg .post_content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { grid-column: 1; } /* 写真は面として扱う。角丸0・枠線なし・cover。縦横比の固定（3:2 → 16:9）をやめ、マスに絶対配置で敷き込む方式に変えた。固定比だと写真427px・本文255pxで172pxの差が必ず出て、そこが死に領域になる。敷き込みにすれば行の高さは本文が決め、写真はその高さいっぱいを cover で埋める（1512pxでは 760 × 約300px＝2.5:1 の帯になる。元画像1366×900の中央帯を使う）。 */ .scy-pg .post_content .wp-block-media-text__media img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; border-radius: 0; border: none; padding: 0; background: var(--scy-surface-2); } .scy-pg .post_content .wp-block-media-text__content > h2:not([class*="scy-"]) { margin-top: 0; } .scy-pg .post_content .wp-block-media-text__content > p { max-width: none; } /* ============================================================ 7. テーブル（横罫のみ・縦罫なし・ゼブラなし） ============================================================ */ .scy-pg .post_content table, .scy-pg__cominfo table { width: 100%; border-collapse: collapse; font-family: var(--scy-sans); font-size: var(--scy-fs-caption); /* 14px */ line-height: 1.7; color: var(--scy-ink); } .scy-pg .post_content table th, .scy-pg .post_content table td, .scy-pg__cominfo table th, .scy-pg__cominfo table td { border: none; border-bottom: 1px solid var(--scy-line); background: none; text-align: left; vertical-align: top; padding: 12px var(--scy-sp-3) 12px 0; } .scy-pg .post_content table th:last-child, .scy-pg .post_content table td:last-child, .scy-pg__cominfo table th:last-child, .scy-pg__cominfo table td:last-child { padding-right: 0; } .scy-pg .post_content table thead th, .scy-pg__cominfo table thead th { font-weight: 600; color: var(--scy-ink-3); white-space: nowrap; } /* 見出し行を持たない2列表（会社概要）は、左列を項目名として扱う。 thead を持つデータ表（WERC対照表）は対象外にする。 */ .scy-pg .post_content table:not(:has(thead)) td:first-child, .scy-pg__cominfo table:not(:has(thead)) td:first-child { width: 1%; white-space: nowrap; color: var(--scy-ink-3); padding-right: var(--scy-sp-6); } /* ============================================================ 8. 図版 ============================================================ */ /* ---- サービス詳細ページの主写真 ---- */ .scy-pg .post_content .scy-pg__hero-fig { margin: 0 0 var(--scy-sp-4); } .scy-pg .post_content .scy-pg__hero-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: none; border-radius: 0; padding: 0; background: var(--scy-surface-2); } /* ---- 図版（地図・チャートなど「読み取れること」が価値の図） ---- 写真ではないので cover で切らない。面の上に contain で置く。 */ .scy-pg .post_content .scy-fig--doc img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; background: var(--scy-surface-2); border: none; border-radius: 0; padding: var(--scy-sp-3); box-sizing: border-box; } /* ---- 誌面・証書のギャラリー: 面の上に contain（cover禁止・キャプションは面の外） ---- */ /* WPギャラリーは flex + flex-basis:calc((100% - gap*n)/columns) で列を作るため、 gap だけを上書きすると計算が合わず、columns-3 の指定でも2列に折り返す（実測）。グリッドに置き換えて列数を確定させる。 */ .scy-pg .post_content .scy-pg__docs.wp-block-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--scy-sp-6) var(--scy-col-gap); } /* WPギャラリーは figure 側にも flex-basis / width:calc(33.33% - gap) を当てている。グリッドに変えた後もこれが残ると、451pxのマスの中に140px幅の図版が浮く（実測）。マスいっぱいに戻す。【2026-08-18 仕上げ】ここは 08-18 午後の版では効いていなかった。原因は WordPress 本体の wp-includes/blocks/gallery/style.min.css .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){width:calc(50% - …)} の `:not(#individual-image)` で、詳細度が (1,2,1) ＝ ID 1個ぶんある。こちらの (0,4,1) では負けるため width:calc(50%…) が残り、451pxのマスに140pxの図版が浮いたままだった（弊社の歴史 y4547-5779・高さ1240pxの死に帯の正体）。同じ `:not(#individual-image)` を足して (1,4,1) にして勝つ。!important は使わない。 */ .scy-pg .post_content .scy-pg__docs figure.wp-block-image, .scy-pg .post_content .scy-pg__docs figure.wp-block-image:not(#individual-image) { background: none; align-self: start; width: auto; max-width: none; flex-basis: auto; margin: 0; } .scy-pg .post_content .scy-pg__docs figure.wp-block-image img { width: 100%; /* 240px → 380px → 420px。コンテナが1416pxに広がり1枚あたり451pxになったため、誌面の見開きが実際に読み取れる大きさまで上げる（研究レポート §5-4 の「図版は読み取れること」）。図版の縦横比は表紙（縦0.72）と見開き（横1.4）が混在するので、面の高さを固定して contain で置く＝面の左右にだけ地色が残る形にする（cover で切ると誌面が読めなくなる）。 */ height: 420px; object-fit: contain; object-position: center; background: var(--scy-surface-2); border: none; border-radius: 0; padding: var(--scy-sp-2); box-sizing: border-box; } /* WPギャラリー既定の「画像に重ねた暗いグラデ帯のキャプション」を解除する */ .scy-pg .post_content .scy-pg__docs figure.wp-block-image figcaption { position: static; max-height: none; margin: var(--scy-sp-2) 0 0; padding: 0; background: none; color: var(--scy-ink); font-family: var(--scy-sans); font-size: var(--scy-fs-caption); line-height: 1.6; text-align: left; overflow: visible; text-overflow: clip; white-space: normal; } .scy-pg .post_content figcaption { text-align: left; font-family: var(--scy-sans); font-size: var(--scy-fs-caption); line-height: 1.6; color: var(--scy-ink); } /* ============================================================ 9. 年表（弊社の歴史・SWELL step ブロック） ------------------------------------------------------------ 【素材の実態】26項目。うち20項目は本文が空で、内容は「タイトル」1行に入っている。したがって「年｜タイトル｜本文」の3列に割ると、20項目で右列が空になり、死に領域を作り直すだけになる。【採った型】カードを2列に並べ、カード1枚の中を「年（左）｜内容（右・縦罫つき）」の2段にする。 - コンテナ幅を端まで使う（692px × 2 + 32px = 1416px） - 各カードの中は年88px ＋縦罫＋内容 579px（＝1行36字。P8の下限） - 縦罫が列ごとに1本通るので、時間軸が目で追える - 縦の総丈が半分になる（実測 7,568px → 約4,400px） ============================================================ */ /* 2列の作り方をグリッドから段組み（columns）に変えた（2026-08-18 仕上げ）。グリッドは「行」を作るので、左に9行の項目・右に1行の項目が並ぶと、右側がその差のぶんだけ空く。26項目のうち6項目に本文があり、実測で 104/112/128px の空きが3か所出ていた（gap 708px）。段組みなら項目が上から順に流れて列の中で隙間なく詰まり、ブラウザが2列の高さを自動で均す。空きが出るのは最下部の1か所だけになる。読み順は「左列を上から下 → 右列」＝年表として自然な順序（年は各項目に明記）。 */ .scy-pg .post_content .scy-hist__tl .swell-block-step { columns: 2; column-gap: var(--scy-sp-6); column-fill: balance; } .scy-pg .post_content .scy-hist__tl .swell-block-step__item { break-inside: avoid; position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-content: start; padding: var(--scy-sp-3) 0; margin: 0; border-top: 1px solid var(--scy-line); } /* SWELL の点線の縦罫（左7px）を止め、内容列の左に実線の時間軸を引き直す */ .scy-pg .post_content .scy-hist__tl .swell-block-step__item::before { content: ""; display: block; position: absolute; left: 88px; top: 0; bottom: 0; width: 0; height: auto; border-left: 1px solid var(--scy-line); } .scy-pg .post_content .scy-hist__tl .swell-block-step__item:last-child::before { content: ""; } .scy-pg .post_content .scy-hist__tl .swell-block-step__number { grid-column: 1; grid-row: 1 / span 2; position: static; display: block; width: auto; height: auto; margin: 0; padding-top: 2px; color: var(--scy-ink-3); } /* SWELLの丸（16pxのcircle）は時間軸の罫と役割が重複するので落とす */ .scy-pg .post_content .scy-hist__tl .swell-block-step__number .__shape { display: none; } .scy-pg .post_content .scy-hist__tl .swell-block-step__number .__label { display: block; font-family: var(--scy-sans); font-size: var(--scy-fs-caption); /* 14px */ font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; opacity: 1; color: var(--scy-ink-3); padding: 0; } .scy-pg .post_content .scy-hist__tl .swell-block-step__title { grid-column: 2; grid-row: 1; margin: 0; padding: 0 0 0 var(--scy-sp-3); min-height: 0; font-family: var(--scy-sans); font-size: 1.125rem; /* 18px。26項目が並ぶので h3(22px) は重い */ font-weight: 500; line-height: 1.55; letter-spacing: var(--scy-ls-heading); color: var(--scy-ink); } .scy-pg .post_content .scy-hist__tl .swell-block-step__body { grid-column: 2; grid-row: 2; margin: 0; padding: 10px 0 0 var(--scy-sp-3); } .scy-pg .post_content .scy-hist__tl .swell-block-step__body p { max-width: none; margin: 0; font-size: var(--scy-fs-caption); /* 14px。タイトル18pxとの差でノートに見せる */ line-height: 1.8; color: var(--scy-ink); } /* 本文が空（

）の項目で、余白だけが積まれるのを防ぐ */ .scy-pg .post_content .scy-hist__tl .swell-block-step__body:not(:has(p:not(:empty))) { display: none; } /* 図版群の見出し（「掲載誌面（一部）」）。全幅の1本罫にして、下のギャラリーの幅と揃える。ラベル1本だけで右が空くのを避ける。 */ .scy-pg .post_content .scy-figlabel { max-width: none; margin: var(--scy-sp-8) 0 var(--scy-sp-3); padding-top: var(--scy-sp-2); border-top: 1px solid var(--scy-line); font-size: var(--scy-fs-caption); color: var(--scy-ink); } /* 年表の中の spacer（40px）はグリッドでは不要 */ .scy-pg .post_content .scy-hist__tl .wp-block-spacer { display: none; } /* ============================================================ 10. トップページ会社概要帯（スクラブ演出には触れない） ============================================================ */ .scy-pg__cominfo .swell-block-fullWide__inner > h2, .post_content .scy-pg__cominfo h2 { font-family: var(--scy-sans); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; line-height: var(--scy-lh-heading); letter-spacing: var(--scy-ls-heading); color: var(--scy-ink); text-align: left; /* 中央揃え → 左揃え（§3-3・実在0/10） */ background: none; border: none; padding: 0; margin: 0 0 var(--scy-sp-3); } .post_content .scy-pg__cominfo h2::before, .post_content .scy-pg__cominfo h2::after { content: none; display: none; } /* 地図と表の2列。コンテナが1600pxに広がったので、地図を広く・表を読み幅に */ .scy-pg__cominfo .wp-block-columns { gap: var(--scy-sp-6); align-items: stretch; } .scy-pg__cominfo iframe { display: block; width: 100%; max-width: 100%; height: 100%; min-height: 420px; border: 0; } /* ============================================================ 11. リロケーション支援（scy-gm）の差分 ============================================================ */ .post_content h1.scy-gm__hero-title { font-size: var(--scy-fs-h1); font-weight: 500; /* P6 */ background: none; border: none; padding: 0; } .post_content h1.scy-gm__hero-title::before, .post_content h1.scy-gm__hero-title::after { content: none; display: none; } .post_content h2.scy-gm__group-title, .post_content h2.scy-reveal { font-family: var(--scy-sans); font-size: clamp(1.5rem, 2.4vw, 2rem); /* 32px。他ページのh2と同値 */ font-weight: 500; /* P6 */ } .scy-svc-card h3, .post_content .scy-svc-card__title { font-size: var(--scy-fs-h3); /* 22px */ font-weight: 500; } /* 本文は --scy-fs-lead(19px) ではなく --scy-fs-body(16px)。P7 */ .scy-gm__group-body { font-size: var(--scy-fs-body); max-width: var(--scy-measure-text, 43em); } /* 巨大数字タイル（45px）は P10「実在0/10」に反するため h3 相当に落とす */ .scy-gm__stat-num { font-size: var(--scy-fs-h3); font-weight: 600; letter-spacing: var(--scy-ls-heading); } .scy-gm__band { height: clamp(240px, 30vh, 384px); margin: var(--scy-sp-8) 0 var(--scy-sp-6); } /* style.css の .scy-gm__group-inner は max-width:1080px。コンテナを広げた今はここが「右600pxの空き」の原因になるので、本文コンテナと同じ幅まで解放する。（style.css は編集禁止のため、幅だけをここで上書きする） */ @media (min-width: 960px) { .scy-gm__group-inner { max-width: var(--scy-bodyw, 1080px); } /* テキストと数字タイルの2列。数字タイルを右端まで届かせる */ .scy-gm__group-text { flex: 1 1 auto; max-width: calc(var(--scy-measure-text, 43em) + 6em); } /* style.css は縦積み（flex-direction:column・幅280px・左に2pxの縦罫）。コンテナが1416pxになった今は 860〜980px にしか物が無く、右に約480pxの空きが約500px分続いていた（実測 run y1027-1531 / maxGap 1014px）。数字3件を「数字（左）｜見出し（右端）」の3行データ表に組み替え、本文の天地いっぱいに散らす。右端が締まり、縦にも埋まる。数字の大きさ（h3相当）は変えない＝P10「巨大数字タイルは実在0/10」を維持。縦罫は横罫に置き換える（このサイトのカード・索引と同じ上罫1本の型）。 */ .scy-gm__group-inner { align-items: stretch; } .scy-gm__stats { flex: 1 1 auto; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: var(--scy-sp-3); } .scy-gm__stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--scy-sp-4); border-left: 0; padding-left: 0; border-top: 1px solid var(--scy-line); padding-top: 10px; } .scy-gm__stat .scy-gm__stat-num { display: inline-block; } .scy-gm__stat .scy-gm__stat-label { text-align: right; } /* サービスカードは auto-fit（style.css）。1416pxでは4列に自動で開く */ .scy-svc-grid { gap: var(--scy-col-gap); } } /* ============================================================ 12. パンフレット（PDFプレビュー） ------------------------------------------------------------ wp:file は