/* === pg-utility.css ─ 実務系4P＋法務系4P（Phase 2C・2026-08-18）================= 仕様の正: _scripts/design_system_2026-08-18.md（§番号は本書のもの）寸法の検証: _scripts/design_research/proto/p_legal.html + tokens.css（実機確定済み）【このファイルの責任範囲】仕様書 §8 の責任分担表の `pg-utility.css` 行がすべて。 .scy-doc / .scy-doc__h / .scy-doc__n / .scy-doc__upd（法務4P） .scy-pg__pdf（1217 パンフレット） /contact/ の SWELL full-wide ／ pullquote 打ち消しこれ以外のクラスをここで定義しない。とくに pg-core.css が持つ .scy-mark / .scy-lay / .scy-sheet / .scy-cta / .scy-idx / .scy-band / .scy-foot / .scy-h2 / .scy-lead / .scy-body / .scy-cap / .railhead は**再定義しない**（§8）。縦の間は markup 側で .scy-lay（row-gap: --scy-gap-s = 48px）を使って作る。【スコープ】 :is(.scy-t-util .post_content, .scy-t-util) .scy-t-util は functions.php の body_class が実務系4P＋法務系4Pにだけ付ける類型クラス。 SWELL は body_class() をではなく div#body_wrap に出すため `body.` を付けない。本文内（post_content）と本文外の両方に効かせる2本立ては pg-core.css と同じ作法。詳細度は :is() の最も詳細な引数（0,2,0）を採る。【読み込み順】pages.css → pg-core.css → pg-utility.css（functions.php が依存で固定）。同点詳細度は後勝ちなので、pages.css §12 の .scy-pg__pdf 規則はここで上書きされる。【禁止事項（仕様書 §0・§3・§9）】 - --scy-ink-2 / --scy-ink-3 を参照しない（白地 4.41:1 / 2.38:1 ＝ AA割れ・F-6） - .scy-reveal に見た目を持たせない（F-9） - 角丸は pill(999px) の1種のみ。それ以外は 0 - 影・グラデ・グロー・ダーク背景を作らない - ブレークポイントは 1200 / 960 / 782 の3本のみ（新設禁止・§9-4） ========================================================================= */ /* ============================================================ 1. SWELL の中央揃え・full-wide・pullquote 打ち消し（§7 類型C・類型D） ------------------------------------------------------------ 本レーンの markup 改修（_scripts/redesign_utility_2026-08-18.php）で full-wide／pullquote は取り除いてあるが、以下は**編集画面から再び入れられてもこのデザインが崩れない**ようにするための保険。8ページに閉じた範囲でだけ効かせる。・中央揃えの全廃（P3・§7）。実在サイト10社中0社が白地中央ヒーローを持たない。・full-wide の地色は要素の style 属性（インライン）で入るため、これだけは !important でしか落とせない。対象を .scy-t-util 配下に限定したうえで使う。 ============================================================ */ :is(.scy-t-util .post_content, .scy-t-util) :is(.has-text-align-center, .wp-block-pullquote, .wp-block-pullquote blockquote, .wp-block-pullquote p, .wp-block-pullquote cite) { text-align: left; } :is(.scy-t-util .post_content, .scy-t-util) .swell-block-fullWide { background: none !important; background-color: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important; } :is(.scy-t-util .post_content, .scy-t-util) .swell-block-fullWide__inner { max-width: none; padding-inline: 0; } /* pullquote は「引用の見た目」を持ち込むだけで、連絡先の役には立たない（§7 類型C）。罫・斜体・中央寄せ・巨大文字をすべて落として素の塊に戻す。 */ :is(.scy-t-util .post_content, .scy-t-util) .wp-block-pullquote { margin: 0; padding: 0; border: 0; color: inherit; background: none; } :is(.scy-t-util .post_content, .scy-t-util) .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; background: none; } :is(.scy-t-util .post_content, .scy-t-util) .wp-block-pullquote cite { display: block; font-style: normal; font-size: .875rem; line-height: 1.7; color: var(--scy-ink-label); } /* SWELL 既定のリンク色（#1176d4 の青）の打ち消し。本サイトの色は ink / ink-label / accent の3つだけで、青は色数の追加にあたる（§3-2）。データシートの中の電話番号・メールアドレス・ファイル名は「記録値」であってナビゲーションではないので、既定は ink、hover でだけ accent に寄せる。 .scy-sheet 自体（罫・余白・thの幅）は pg-core.css の定義のまま。ここでは触らない。 */ :is(.scy-t-util .post_content, .scy-t-util) .scy-sheet a { color: var(--scy-ink); text-decoration: none; } :is(.scy-t-util .post_content, .scy-t-util) .scy-sheet a:hover { color: var(--scy-accent); text-decoration: underline; text-underline-offset: .2em; } :is(.scy-t-util .post_content, .scy-t-util) .scy-sheet a:focus-visible { outline: 2px solid var(--scy-accent); outline-offset: 2px; } /* ============================================================ 2. 法務文書 .scy-doc（§6-9）── 類型D 4ページの唯一の器 ------------------------------------------------------------ 164 privacy / 429 disclaimer / 431 copyright / 434 link は **番号・ページ名・本文以外は1pxも違わない**ことが合否ライン（§7 類型D）。そのためこの節は「1つの器 + 条番号列」だけで構成し、ページ別の分岐を一切書かない。条番号を 44px の列に追い出し、本文を 56px（44+12）字下げする。これで「条番号の右端」に第二の基準線が立ち、条項の階層が字下げだけで読める。条が1つしかない 429/431/434 は .scy-doc__h を持たないので字下げも起きず、同じ器のまま「前文だけの文書」として成立する（§6-9 の但し書き）。【子結合子（>）を使わない理由】 WordPress は classic テーマの wp:group に .wp-block-group__inner-container を復活させる。pg-core.css がこの箱を display:contents で消しているが、セレクタ上は依然として1階層挟まる。よってここでは子結合子を使わず、兄弟結合子（~）と子孫結合子だけで組む。 ============================================================ */ :is(.scy-t-util .post_content, .scy-t-util) .scy-doc { max-width: 43em; /* 1行約43字（P8 実在中央値40）。§6-9 */ font-size: 1rem; /* em の基準を本文と同じ 1rem に固定する。これを書かないと SWELL の 15px を継いで 43em=645px になり、 PCで「43字」が40字にずれる。4ページの測度を揃えるための固定。 SP はルートが 3.6vw に縮むので 43em も一緒に縮む＝字数は不変。 */ margin: 0; /* 上の間は .scy-pagehead の margin-bottom（48px）が作る */ } /* --- 条見出し ------------------------------------------------ 22px/600/1.4。44px の番号列 + 12px の溝 + 見出し本体。要素修飾（h2.scy-doc__h）で書いているのは、style.css:1242 / pages.css:789 の `.post_content h2.scy-reveal`（0,3,1）と同点に並べて後勝ちさせるため。短くしない。 */ :is(.scy-t-util .post_content, .scy-t-util) h2.scy-doc__h, :is(.scy-t-util .post_content, .scy-t-util) .scy-doc__h { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; align-items: start; margin: var(--scy-sp-8) 0 var(--scy-sp-2); /* 64px 0 16px */ padding: 0; font-family: var(--scy-sans); font-size: 1.375rem; /* 22px */ font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--scy-ink); text-align: left; background: none; border: 0; } /* SWELL の見出し装飾（下線・左バー・連番）の擬似要素を止める */ :is(.scy-t-util .post_content, .scy-t-util) .scy-doc__h::before, :is(.scy-t-util .post_content, .scy-t-util) .scy-doc__h::after { content: none; display: none; } /* 先頭の条は器の頭に付く＝上マージンを持たせない（4ページで頭の位置を揃えるため） */ :is(.scy-t-util .post_content, .scy-t-util) .scy-doc .scy-doc__h:first-child { margin-top: 0; } /* --- 条番号 -------------------------------------------------- 14px/600/等幅/accent。padding-top .45em で見出し1行目のベースラインに乗せる。 */ :is(.scy-t-util .post_content, .scy-t-util) .scy-doc__n { font-family: var(--scy-num); font-variant-numeric: tabular-nums; font-size: .875rem; /* 14px */ font-weight: 600; line-height: 1.4; letter-spacing: .04em; color: var(--scy-accent); padding-top: .45em; } /* --- 条文 ---------------------------------------------------- 既定は字下げなし（前文・条が1つだけの3ページ）。最初の条見出しより後ろに来た本文だけを 56px 字下げする。 */ :is(.scy-t-util .post_content, .scy-t-util) .scy-doc :is(p, ul, ol) { font-family: var(--scy-sans); font-size: 1rem; /* 16px */ line-height: 1.8; color: var(--scy-ink); max-width: none; /* 測度は器（43em）が持つ */ margin: 0 0 1.4em; padding-left: 0; } :is(.scy-t-util .post_content, .scy-t-util) .scy-doc .scy-doc__h ~ :is(p, ul, ol) { padding-left: 56px; /* 44px（番号列）+ 12px（溝）＝条項の階層 */ } :is(.scy-t-util .post_content, .scy-t-util) .scy-doc :is(ul, ol) { margin-block: 0 1.4em; list-style-position: inside; /* マーカーを字下げの内側に収める＝条文の左端が1本に揃う */ } :is(.scy-t-util .post_content, .scy-t-util) .scy-doc :is(ul, ol) li { font-size: 1rem; line-height: 1.8; margin: 0; } /* 条文の中のリンク（431 の「お問い合わせ」など）。 ink 一色にすると地の文と見分けが付かなくなるので、静かな下線で識別を担保する（色だけに頼らない＝WCAG 1.4.1）。hover で accent に寄せる。 */ :is(.scy-t-util .post_content, .scy-t-util) .scy-doc a { color: var(--scy-ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--scy-rule); text-underline-offset: .2em; } :is(.scy-t-util .post_content, .scy-t-util) .scy-doc a:hover { color: var(--scy-accent); text-decoration-color: var(--scy-accent); } :is(.scy-t-util .post_content, .scy-t-util) .scy-doc a:focus-visible { outline: 2px solid var(--scy-accent); outline-offset: 2px; } /* --- 最終更新日 --------------------------------------------- 文書の末尾に置く記録行。日付は post_modified（§6-9）。条文の字下げには乗せない＝文書全体に掛かる注記であることを位置で示す。 */ :is(.scy-t-util .post_content, .scy-t-util) .scy-doc .scy-doc__h ~ .scy-doc__upd, :is(.scy-t-util .post_content, .scy-t-util) .scy-doc .scy-doc__upd { margin: var(--scy-sp-8) 0 0; /* 64px */ padding: var(--scy-sp-3) 0 0; /* 24px */ padding-left: 0; border-top: 1px solid var(--scy-line); font-size: .875rem; /* 14px */ line-height: 1.7; color: var(--scy-ink-label); } /* ============================================================ 3. パンフレットのPDF埋め込み .scy-pg__pdf（§7 類型C・1217） ------------------------------------------------------------ pages.css §12 は wp:file 既定の3点セット（object + ファイル名 + 黒い角丸ボタン）をそのまま並べる前提で書かれている。本レーンで markup を .scy-lay ＞ [.c8 .scy-pg__pdf（objectのみ）] + [.right-4（シート＋ゴーストCTA）] に組み替えたので、ここでは「面としての object」だけを定義する。ボタンは .scy-cta--ghost（pill）に合流済み＝角丸は pill 以外に現れない（S5）。 ============================================================ */ :is(.scy-t-util .post_content, .scy-t-util) .scy-pg__pdf { display: block; margin: 0; padding: 0; background: none; border: 0; } :is(.scy-t-util .post_content, .scy-t-util) .scy-pg__pdf > object, :is(.scy-t-util .post_content, .scy-t-util) .scy-pg__pdf object { display: block; width: 100%; height: min(820px, 78vh); background: var(--scy-surface-2); border: 1px solid var(--scy-line); border-radius: 0; } /* ============================================================ 4. レスポンシブ（ブレークポイントは 1200 / 960 / 782 のみ・§9-4） ============================================================ */ @media (max-width: 960px) { :is(.scy-t-util .post_content, .scy-t-util) .scy-pg__pdf > object, :is(.scy-t-util .post_content, .scy-t-util) .scy-pg__pdf object { height: min(680px, 74vh); } } @media (max-width: 782px) { /* 条番号列を 34px、本文の字下げを 46px に詰める（§6-9 SP） */ :is(.scy-t-util .post_content, .scy-t-util) h2.scy-doc__h, :is(.scy-t-util .post_content, .scy-t-util) .scy-doc__h { grid-template-columns: 34px minmax(0, 1fr); font-size: 1.1875rem; /* 19px＝§4-2 の h3(SP) */ margin-top: var(--scy-sp-6); /* 48px */ } :is(.scy-t-util .post_content, .scy-t-util) .scy-doc .scy-doc__h ~ :is(p, ul, ol) { padding-left: 46px; } :is(.scy-t-util .post_content, .scy-t-util) .scy-doc .scy-doc__h ~ .scy-doc__upd, :is(.scy-t-util .post_content, .scy-t-util) .scy-doc .scy-doc__upd { padding-left: 0; margin-top: var(--scy-sp-6); } :is(.scy-t-util .post_content, .scy-t-util) .scy-pg__pdf > object, :is(.scy-t-util .post_content, .scy-t-util) .scy-pg__pdf object { height: min(520px, 68vh); } } /* ============================================================ 5. ブログ一覧 /post/（ID166）の SWELL 既定打ち消し（§7 類型C・2026-08-18 Phase 2D） ------------------------------------------------------------ 【なぜこのページだけ別に書くのか】 19ページ中このページだけ post_content が出力されない（page_for_posts のため投稿リストがそのまま .l-mainContent__inner 直下に出る）。和文サンスの土台は pages.css の `.scy-pg .post_content { font-family: var(--scy-sans) }` が持っているので、 .post_content が無いこのページには土台が届かず、投稿タブ（NEW／人気記事）・「記事が見つかりませんでした。」・標番のカテゴリ・索引の項目名が明朝のまま残る。実測（1440px）: .scy-mark__cat と .scy-idx__t が /post/ だけ "Noto Serif JP"、他18ページは -apple-system。これが19ページ中1ページだけ字が違う原因である。【スコープ】.blog.scy-pg .blog は WordPress が投稿ページに付ける既存クラス。SWELL は body_class() を div#body_wrap に出すので `body.` は付けない。本ファイルは実務系4P＋法務系4Pでしか読まれないうえ、.blog でさらに /post/ 1ページに閉じる（他7ページには当たらない）。【やること・やらないこと】やる: 和文サンスの土台／タブを基準線 x=--swl-pad_container から左揃え／本文の測度と余白を他18ページに合わせる。やらない: 色に手を入れない（§3-1 のアクセント5用途にタブは含まれない。 SWELL 既定の --color_main のままにする）。文字サイズ・ウェイトも既定のまま。 ============================================================ */ /* ---- 和文サンスの土台。これ1本で標番・索引・タブ・空状態がまとめて揃う ---- */ .blog.scy-pg .l-mainContent__inner { font-family: var(--scy-sans); } /* ---- 投稿リストの位置。ページ見出しとの間を余白3値の 48px（--scy-gap-s）に戻す ---- SWELL の .u-mt-40（margin-top:4em!important＝64px）と .p-postListTab（margin:4em auto 2em）が相殺されて 64px になっており、余白3値（48/96/128）のどれでもなかった（S4違反）。両方を0にすると .scy-pagehead の margin-bottom 48px が素通しで効く。 !important は .u-mt-40 の !important を打ち消すためだけに使う（本ファイル唯一）。 */ .blog.scy-pg .p-homeContent { margin-top: 0 !important; } /* .p-postListTab の width:96% + margin:auto が、タブ列だけを基準線から 27px 右へ中央寄せしていた（実測 x=75 / 見出しは x=48）。幅と余白を素直に戻す。 */ .blog.scy-pg .p-postListTab { width: 100%; margin: 0 0 var(--scy-sp-4); /* 32px */ } /* ---- 投稿タブ（NEW／人気記事）を左揃えにする ---- SWELL 既定は .c-tabList{justify-content:center} ＋ .c-tabList__item{text-align:center} ＋ [data-width-pc="25"] の「1タブ=25%」で、見出しの左端（x=--swl-pad_container）から浮いた位置に中央寄せで置かれていた。基準線は1本という Phase 1 の成果に合流させる。タブ幅は内容なり（0 0 auto）にして、下の1px罫がラベルの幅ちょうどに収まるようにする。 */ .blog.scy-pg .p-postListTab .c-tabList { justify-content: flex-start; --the-tab-flex: 0 0 auto; --the-tab-item-margin: 0 var(--scy-sp-4) .75em 0; /* タブ間 32px */ --the-tab-btn-padding: 12px 0; /* 左右0＝ラベルと下の1px罫が基準線 x=48 に揃う */ } /* タブ幅を内容なりにすると、SWELL 既定（1タブ=25%）より当たり判定が小さくなる。 §9-4「タップ領域 44×44px 以上」を満たすため 44×44 を下限として確保する。下の1px罫は :before で button の下端・幅100%に置かれるので、罫の左端もラベルと同じ x に乗る。 */ .blog.scy-pg .p-postListTab .c-tabList__button { min-width: 44px; min-height: 44px; padding: var(--the-tab-btn-padding); } .blog.scy-pg .p-postListTab .c-tabList__item, .blog.scy-pg .p-postListTab .c-tabList__button { text-align: left; /* button は UA 既定が center なので要素側にも当てる */ } /* ---- タブのフォーカスリング（§9-5）---- pg-core.css の :focus-visible 共通規則は `.scy-pg .post_content` と `.scy-pg .scy-foot` を見ているため、そのどちらにも属さないこのタブだけ UA 既定（1px 青）のまま残る。同じページ内で当たり方が2種類になるので、ここで他と同じ2pxアクセントに合流させる。 ※ pg-core.css の :focus-visible 規則自体は書き換えていない（§8 の責任分担は動かさない）。 */ .blog.scy-pg .p-postListTab .c-tabList__button:focus-visible { outline: 2px solid var(--scy-accent); outline-offset: 2px; } /* ---- 空状態「記事が見つかりませんでした。」を他18ページの走り文に合わせる ---- pages.css の `.scy-pg .post_content p:not([class*="scy-"])` と同じ値。 .post_content が無いページなので同じ宣言をここで当てる（値は複製しない・トークン参照）。 */ .blog.scy-pg .c-tabBody__item > p { max-width: var(--scy-measure-text, 43em); font-size: var(--scy-fs-body); line-height: var(--scy-lh-body); color: var(--scy-ink); } /* ============================================================ 6. 最終ゲート（2026-08-18）の修正 ============================================================ */ /* (6-1) 投稿が0本のときは投稿タブ（NEW／人気記事）を出さない。判定は inc/blog-index.php が body クラス .scy-blog-empty で持つ（§8: 見た目はCSS側）。投稿が入れば body クラスが消えてタブが戻る＝自動で元通りになる。 */ .blog.scy-pg.scy-blog-empty .p-postListTab { display: none; } /* (6-2) /brochure/ のPDF ──