@charset "UTF-8";
/* ==========================================================================
   gutenberg.css
   Gutenberg が出力する DOM 差分の吸収レイヤー。
   既存のデザインシステム（tokens/reset/typography/layout/components/a11y/pages）
   は一切編集しない。追加はこのファイルのみ。

   レイヤー順（layout.css で宣言済み）:
     reset, tokens, typography, layout, components, a11y, gutenberg, pages, utilities

   前提（functions.php 側で実施）:
     - add_theme_support('disable-layout-styles')  … core のレイアウトCSSを止める
     - wp-block-library / global-styles / classic-theme-styles を dequeue
       （デザインシステムで全て賄うため。PageSpeed 対策も兼ねる）
   ========================================================================== */

@layer gutenberg {

  /* --------------------------------------------------------------------
     1. core/image … <figure class="wp-block-image"> が1枚挟まる
     -------------------------------------------------------------------- */
  /* reset.css が figure/img を初期化済みなので、ここでの一律指定は行わない。
     一律に width/height/display を当てると、デザインシステムが指定していない
     箇所まで変えてしまう（実際に c-box__media と figcaption で崩れた）。
     必要な指定は静的HTML由来の u-i-* / u-fc-* ユーティリティが個別に持つ。 */


  /* --------------------------------------------------------------------
     core/group の内側ラッパを透過させる（重要）

     WordPress は core/group に layout 指定があると、
       <div class="wp-block-group l-grid l-grid--3">
         <div class="wp-block-group__inner-container">   ← これを挿入する
           <div class="c-card">…</div>
     のように子要素をもう1枚の div で包む。

     この1枚が挟まると、直下の子を前提にしたCSSがすべて外れる。
       .l-grid--3 { grid-template-columns: repeat(3,1fr) }  → 子が1つ扱いで1列に
       .l-stack > * + * { margin-top: … }                   → 余白が付かない
       .l-grid--sp-2 > * { min-width: 0 }                   → 効かない
       その他 display:flex / grid を使うすべての箇所

     display: contents はその要素自体を無かったことにして、
     中身を親の直接の子として扱わせる。これで静的HTMLと同じ構造になる。

     coreのレイアウトCSSは disable-layout-styles で止めているため、
     このラッパは余白などを持っておらず、透過させても失うものはない。
     -------------------------------------------------------------------- */
  .wp-block-group > .wp-block-group__inner-container {
    display: contents;
  }

  /* --------------------------------------------------------------------
     2. core/table … <figure class="wp-block-table"> が1枚挟まる
     -------------------------------------------------------------------- */
  .wp-block-table { margin: 0; }
  /* .c-spec / .c-table の width:100% は className が <figure> に移るため、
     中の <table> に引き継ぐ。クラスの無い表には当てない。 */
  .wp-block-table.c-spec > table,
  .wp-block-table.c-spec--fittings > table,
  .wp-block-table.c-table > table { width: 100%; }

  /* --------------------------------------------------------------------
     3. core/buttons … layout CSS を止めているので自前で並べる
     -------------------------------------------------------------------- */
  .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .wp-block-buttons.is-content-justification-center { justify-content: center; }
  .wp-block-buttons.is-content-justification-right  { justify-content: flex-end; }

  /* 静的HTMLでは <a class="c-btn"> 自身が flex item で stretch していた。
     Gutenberg では間に <div class="wp-block-button"> が入るため、
     ラッパを flex にして <a> を親の高さまで伸ばし、高さを完全に一致させる。 */
  .wp-block-buttons > .wp-block-button.c-btn {
    display: flex;
    align-items: stretch; /* .c-btn の align-items:center を打ち消す */
  }
  .wp-block-buttons > .wp-block-button.c-btn > .wp-block-button__link { flex: 1; }

  /* --------------------------------------------------------------------
     4. カード全体リンク（stretched link）
        静的HTML : <a class="c-card"> でカード全体を包む
        Gutenberg: <div class="c-card"> + 見出し内リンクを面全体に拡張
        → 見た目・クリック範囲・ホバー挙動は同一
     -------------------------------------------------------------------- */
  .c-card:has(a), .c-product:has(a) { position: relative; }

  .c-card__title a,
  .c-product__name a,
  .c-product__more a { color: inherit; text-decoration: none; }

  .c-card__title a::after,
  .c-product__name a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* a.c-card:hover 相当をリンクを含む div に付け替え */
  .c-card:has(a):hover {
    border-color: var(--c-brand-300);
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
  }
  .c-card:has(a):hover .c-card__media img { transform: scale(1.04); }

  /* --------------------------------------------------------------------
     5. ブロックスタイル（is-style-*）について
        表側では inc/gutenberg-support.php の render_block で
        既存クラス（t-heading--bar / c-btn--primary 等）へ差し替えるため、
        ここでの定義は不要。エディタ内プレビュー用は editor-style.css を参照。
     -------------------------------------------------------------------- */
}

/* ==========================================================================
   utilities レイヤー（最終レイヤー）を再オープンして追記
   静的HTMLのインライン style をクラス化したもの
   ========================================================================== */
@layer utilities {
  .u-fit-contain img, img.u-fit-contain { object-fit: contain; }
  .u-fit-cover   img, img.u-fit-cover   { object-fit: cover; }

  .u-mt-3 { margin-top: var(--sp-3); }
  .u-mt-6 { margin-top: var(--sp-6); }

  /* 表の下などに置く注釈文 */
  .u-note { font-size: var(--fs-caption); color: var(--c-text-subtle); }
}

/* ==========================================================================
   テンプレート由来の小物
   静的HTMLでインライン style だった箇所をクラス化したもの
   ========================================================================== */
@layer gutenberg {
  /* 図面検索モーダル内の2カラム（footer.js のインライン style を移設） */
  .c-form__grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }
}

@layer utilities {
  /* テンプレート内でボタンを横並び中央寄せするための行 */
  .u-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
  }
}

/* ==========================================================================
   お知らせの種別バッジ
   静的HTMLではインライン style で色分けしていたものを、
   タクソノミーのスラッグに対応するクラスへ置き換えたもの。
   ========================================================================== */
@layer gutenberg {
  /* TOPのバッジは pages/home.css が見た目を持つ（角丸なし・padding 2px 0）。
     一方、下層の一覧はモックでインライン style を持っており、
     角丸あり・padding 2px 8px と別デザインになっている。
     そのため下層用のスタイルは一覧のコンテナに限定して当てる。 */
  .c-news-list .news_item_badge,
  .c-magazine-grid .news_item_badge {
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: var(--fs-eyebrow);
  }

  /* 種別ごとの背景色（TOP・下層とも共通） */
  .news_item_badge--important { background: var(--c-badge-important); }
  .news_item_badge--notice    { background: var(--c-badge-notice); }
  .news_item_badge--press     { background: var(--c-brand-700); }
}

/* ==========================================================================
   静的HTMLのインライン style をクラス化したユーティリティ（自動生成）
   出力元: html2blocks.py → out/meta/utilities.json
   .u-i-* は core/image 用。className は <figure> に付くため子の <img> を対象にする。
   94クラス（通常用 + 画像用の2系統）
   ========================================================================== */
@layer utilities {
  .u-ar-16-7 { aspect-ratio: 16/7; }
  .u-ar-3-2 { aspect-ratio: 3/2; }
  .u-ar-auto { aspect-ratio: auto; }
  .u-bg-alt { background: var(--c-bg-alt); }
  .u-bg-white { background: #fff; background: #ffffff; }
  .u-c-brand { color: var(--c-brand-800); }
  .u-c-brand-link { color: #0b67a2; }
  .u-c-muted { color: var(--c-text-muted); }
  .u-c-subtle { color: var(--c-text-subtle); }
  .u-d-block { display: block; }
  .u-d-flex { display: flex; }
  .u-d-grid { display: grid; }
  .u-fit-contain { object-fit: contain; }
  .u-fit-cover { object-fit: cover; }
  .u-flex-col { flex-direction: column; }
  .u-flex-none { flex: 0 0 auto; }
  .u-flex-wrap { flex-wrap: wrap; }
  .u-fs-base { font-size: var(--fs-base); }
  .u-fs-caption { font-size: var(--fs-caption); }
  .u-fs-h2 { font-size: var(--fs-h2); }
  .u-fs-h3 { font-size: var(--fs-h3); }
  .u-fs-h4 { font-size: var(--fs-h4); }
  .u-fs-sm { font-size: var(--fs-sm); }
  .u-fs-small { font-size: var(--fs-small); }
  .u-fw-bold { font-weight: var(--fw-bold); }
  .u-fw-semibold { font-weight: var(--fw-semibold); }
  .u-gap-2 { gap: var(--sp-2); }
  .u-gap-3 { gap: var(--sp-3); }
  .u-gap-4 { gap: var(--sp-4); }
  .u-h-56 { height: 56px; }
  .u-h-auto { height: auto; }
  .u-h-full { height: 100%; }
  .u-items-center { align-items: center; }
  .u-items-start { align-items: flex-start; }
  .u-justify-center { justify-content: center; }
  .u-lh-loose { line-height: var(--lh-loose); }
  .u-m-0 { margin: 0; }
  .u-mb-2 { margin-bottom: var(--sp-2); }
  .u-mb-3 { margin-bottom: var(--sp-3); }
  .u-mb-4 { margin-bottom: var(--sp-4); }
  .u-mb-5 { margin-bottom: var(--sp-5); }
  .u-mb-6 { margin-bottom: var(--sp-6); }
  .u-mb-8 { margin-bottom: var(--sp-8); }
  .u-mt-1em { margin-top: 1em; }
  .u-mt-2 { margin-top: var(--sp-2); }
  .u-mt-2em { margin-top: 2em; }
  .u-mt-3 { margin-top: var(--sp-3); }
  .u-mt-4 { margin-top: var(--sp-4); }
  .u-mt-5 { margin-top: var(--sp-5); }
  .u-mt-6 { margin-top: var(--sp-6); }
  .u-mt-7 { margin-top: var(--sp-7); }
  .u-mt-8 { margin-top: var(--sp-8); }
  .u-mw-full { max-width: 100%; }
  .u-my-2 { margin: var(--sp-2) 0; }
  .u-my-3 { margin: var(--sp-3) 0; }
  .u-ov-hidden { overflow: hidden; }
  .u-ovs-touch { -webkit-overflow-scrolling: touch; }
  .u-ovx-auto { overflow-x: auto; }
  .u-p-4 { padding: var(--sp-4); }
  .u-pl-5 { padding-left: var(--sp-5); }
  .u-r-md { border-radius: var(--r-md); }
  .u-r-sm { border-radius: var(--r-sm); }
  .u-sh-sm { box-shadow: var(--sh-sm); }
  .u-text-center { text-align: center; }
  .u-text-left { text-align: left; }
  .u-text-right { text-align: right; }
  .u-w-auto { width: auto; }
  .u-w-full { width: 100%; }
  .u-x-align-items-baseline { align-items: baseline; }
  .u-x-aspect-ratio-14-15 { aspect-ratio: 14/15; }
  .u-x-aspect-ratio-4-3 { aspect-ratio: 4/3; }
  .u-x-aspect-ratio-740-420 { aspect-ratio: 740/420; }
  .u-x-background-000 { background: #000; }
  .u-x-border-1pxsolidvar-c-line { border: 1px solid var(--c-line); }
  .u-x-border-bottom-1pxsolidvar-c-line { border-bottom: 1px solid var(--c-line); }
  .u-x-display-none { display: none; }
  .u-x-font-family-var-ff-num { font-family: var(--ff-num); }
  .u-x-font-size-var-fs-body { font-size: var(--fs-body); }
  .u-x-grid-template-columns-120px1fr { grid-template-columns: 120px 1fr; }
  .u-x-height-117px { height: 117px; }
  .u-x-height-200px { height: 200px; }
  .u-x-line-height-1-8 { line-height: 1.8; }
  .u-x-margin-0auto { margin: 0 auto; }
  .u-x-margin-inline-auto { margin-inline: auto; }
  .u-x-margin-var-sp-4-0var-sp-2 { margin: var(--sp-4) 0 var(--sp-2); }
  .u-x-margin-var-sp-6-auto0 { margin: var(--sp-6) auto 0; }
  .u-x-max-height-420px { max-height: 420px; }
  .u-x-max-width-1136px { max-width: 1136px; }
  .u-x-max-width-280px { max-width: 280px; }
  .u-x-max-width-520px { max-width: 520px; }
  .u-x-max-width-900px { max-width: 900px; }
  .u-x-padding-0 { padding: 0; }
  .u-x-padding-var-sp-4-0 { padding: var(--sp-4) 0; }
  .u-x-width-220px { width: 220px; }

  /* core/image：<figure> に付けて中の <img> に効かせる */
  .u-i-ar-16-7 img { aspect-ratio: 16/7; }
  .u-i-ar-3-2 img { aspect-ratio: 3/2; }
  .u-i-ar-auto img { aspect-ratio: auto; }
  .u-i-bg-alt img { background: var(--c-bg-alt); }
  .u-i-bg-white img { background: #fff; background: #ffffff; }
  .u-i-c-brand img { color: var(--c-brand-800); }
  .u-i-c-brand-link img { color: #0b67a2; }
  .u-i-c-muted img { color: var(--c-text-muted); }
  .u-i-c-subtle img { color: var(--c-text-subtle); }
  .u-i-d-block img { display: block; }
  .u-i-d-flex img { display: flex; }
  .u-i-d-grid img { display: grid; }
  .u-i-fit-contain img { object-fit: contain; }
  .u-i-fit-cover img { object-fit: cover; }
  .u-i-flex-col img { flex-direction: column; }
  .u-i-flex-none img { flex: 0 0 auto; }
  .u-i-flex-wrap img { flex-wrap: wrap; }
  .u-i-fs-base img { font-size: var(--fs-base); }
  .u-i-fs-caption img { font-size: var(--fs-caption); }
  .u-i-fs-h2 img { font-size: var(--fs-h2); }
  .u-i-fs-h3 img { font-size: var(--fs-h3); }
  .u-i-fs-h4 img { font-size: var(--fs-h4); }
  .u-i-fs-sm img { font-size: var(--fs-sm); }
  .u-i-fs-small img { font-size: var(--fs-small); }
  .u-i-fw-bold img { font-weight: var(--fw-bold); }
  .u-i-fw-semibold img { font-weight: var(--fw-semibold); }
  .u-i-gap-2 img { gap: var(--sp-2); }
  .u-i-gap-3 img { gap: var(--sp-3); }
  .u-i-gap-4 img { gap: var(--sp-4); }
  .u-i-h-56 img { height: 56px; }
  .u-i-h-auto img { height: auto; }
  .u-i-h-full img { height: 100%; }
  .u-i-items-center img { align-items: center; }
  .u-i-items-start img { align-items: flex-start; }
  .u-i-justify-center img { justify-content: center; }
  .u-i-lh-loose img { line-height: var(--lh-loose); }
  .u-i-m-0 img { margin: 0; }
  .u-i-mb-2 img { margin-bottom: var(--sp-2); }
  .u-i-mb-3 img { margin-bottom: var(--sp-3); }
  .u-i-mb-4 img { margin-bottom: var(--sp-4); }
  .u-i-mb-5 img { margin-bottom: var(--sp-5); }
  .u-i-mb-6 img { margin-bottom: var(--sp-6); }
  .u-i-mb-8 img { margin-bottom: var(--sp-8); }
  .u-i-mt-1em img { margin-top: 1em; }
  .u-i-mt-2 img { margin-top: var(--sp-2); }
  .u-i-mt-2em img { margin-top: 2em; }
  .u-i-mt-3 img { margin-top: var(--sp-3); }
  .u-i-mt-4 img { margin-top: var(--sp-4); }
  .u-i-mt-5 img { margin-top: var(--sp-5); }
  .u-i-mt-6 img { margin-top: var(--sp-6); }
  .u-i-mt-7 img { margin-top: var(--sp-7); }
  .u-i-mt-8 img { margin-top: var(--sp-8); }
  .u-i-mw-full img { max-width: 100%; }
  .u-i-my-2 img { margin: var(--sp-2) 0; }
  .u-i-my-3 img { margin: var(--sp-3) 0; }
  .u-i-ov-hidden img { overflow: hidden; }
  .u-i-ovs-touch img { -webkit-overflow-scrolling: touch; }
  .u-i-ovx-auto img { overflow-x: auto; }
  .u-i-p-4 img { padding: var(--sp-4); }
  .u-i-pl-5 img { padding-left: var(--sp-5); }
  .u-i-r-md img { border-radius: var(--r-md); }
  .u-i-r-sm img { border-radius: var(--r-sm); }
  .u-i-sh-sm img { box-shadow: var(--sh-sm); }
  .u-i-text-center img { text-align: center; }
  .u-i-text-left img { text-align: left; }
  .u-i-text-right img { text-align: right; }
  .u-i-w-auto img { width: auto; }
  .u-i-w-full img { width: 100%; }
  .u-i-x-align-items-baseline img { align-items: baseline; }
  .u-i-x-aspect-ratio-14-15 img { aspect-ratio: 14/15; }
  .u-i-x-aspect-ratio-4-3 img { aspect-ratio: 4/3; }
  .u-i-x-aspect-ratio-740-420 img { aspect-ratio: 740/420; }
  .u-i-x-background-000 img { background: #000; }
  .u-i-x-border-1pxsolidvar-c-line img { border: 1px solid var(--c-line); }
  .u-i-x-border-bottom-1pxsolidvar-c-line img { border-bottom: 1px solid var(--c-line); }
  .u-i-x-display-none img { display: none; }
  .u-i-x-font-family-var-ff-num img { font-family: var(--ff-num); }
  .u-i-x-font-size-var-fs-body img { font-size: var(--fs-body); }
  .u-i-x-grid-template-columns-120px1fr img { grid-template-columns: 120px 1fr; }
  .u-i-x-height-117px img { height: 117px; }
  .u-i-x-height-200px img { height: 200px; }
  .u-i-x-line-height-1-8 img { line-height: 1.8; }
  .u-i-x-margin-0auto img { margin: 0 auto; }
  .u-i-x-margin-inline-auto img { margin-inline: auto; }
  .u-i-x-margin-var-sp-4-0var-sp-2 img { margin: var(--sp-4) 0 var(--sp-2); }
  .u-i-x-margin-var-sp-6-auto0 img { margin: var(--sp-6) auto 0; }
  .u-i-x-max-height-420px img { max-height: 420px; }
  .u-i-x-max-width-1136px img { max-width: 1136px; }
  .u-i-x-max-width-280px img { max-width: 280px; }
  .u-i-x-max-width-520px img { max-width: 520px; }
  .u-i-x-max-width-900px img { max-width: 900px; }
  .u-i-x-padding-0 img { padding: 0; }
  .u-i-x-padding-var-sp-4-0 img { padding: var(--sp-4) 0; }
  .u-i-x-width-220px img { width: 220px; }

  /* core/table：<figure> に付けて中の <table> に効かせる */
  .u-t-ar-16-7 table { aspect-ratio: 16/7; }
  .u-t-ar-3-2 table { aspect-ratio: 3/2; }
  .u-t-ar-auto table { aspect-ratio: auto; }
  .u-t-bg-alt table { background: var(--c-bg-alt); }
  .u-t-bg-white table { background: #fff; background: #ffffff; }
  .u-t-c-brand table { color: var(--c-brand-800); }
  .u-t-c-brand-link table { color: #0b67a2; }
  .u-t-c-muted table { color: var(--c-text-muted); }
  .u-t-c-subtle table { color: var(--c-text-subtle); }
  .u-t-d-block table { display: block; }
  .u-t-d-flex table { display: flex; }
  .u-t-d-grid table { display: grid; }
  .u-t-fit-contain table { object-fit: contain; }
  .u-t-fit-cover table { object-fit: cover; }
  .u-t-flex-col table { flex-direction: column; }
  .u-t-flex-none table { flex: 0 0 auto; }
  .u-t-flex-wrap table { flex-wrap: wrap; }
  .u-t-fs-base table { font-size: var(--fs-base); }
  .u-t-fs-caption table { font-size: var(--fs-caption); }
  .u-t-fs-h2 table { font-size: var(--fs-h2); }
  .u-t-fs-h3 table { font-size: var(--fs-h3); }
  .u-t-fs-h4 table { font-size: var(--fs-h4); }
  .u-t-fs-sm table { font-size: var(--fs-sm); }
  .u-t-fs-small table { font-size: var(--fs-small); }
  .u-t-fw-bold table { font-weight: var(--fw-bold); }
  .u-t-fw-semibold table { font-weight: var(--fw-semibold); }
  .u-t-gap-2 table { gap: var(--sp-2); }
  .u-t-gap-3 table { gap: var(--sp-3); }
  .u-t-gap-4 table { gap: var(--sp-4); }
  .u-t-h-56 table { height: 56px; }
  .u-t-h-auto table { height: auto; }
  .u-t-h-full table { height: 100%; }
  .u-t-items-center table { align-items: center; }
  .u-t-items-start table { align-items: flex-start; }
  .u-t-justify-center table { justify-content: center; }
  .u-t-lh-loose table { line-height: var(--lh-loose); }
  .u-t-m-0 table { margin: 0; }
  .u-t-mb-2 table { margin-bottom: var(--sp-2); }
  .u-t-mb-3 table { margin-bottom: var(--sp-3); }
  .u-t-mb-4 table { margin-bottom: var(--sp-4); }
  .u-t-mb-5 table { margin-bottom: var(--sp-5); }
  .u-t-mb-6 table { margin-bottom: var(--sp-6); }
  .u-t-mb-8 table { margin-bottom: var(--sp-8); }
  .u-t-mt-1em table { margin-top: 1em; }
  .u-t-mt-2 table { margin-top: var(--sp-2); }
  .u-t-mt-2em table { margin-top: 2em; }
  .u-t-mt-3 table { margin-top: var(--sp-3); }
  .u-t-mt-4 table { margin-top: var(--sp-4); }
  .u-t-mt-5 table { margin-top: var(--sp-5); }
  .u-t-mt-6 table { margin-top: var(--sp-6); }
  .u-t-mt-7 table { margin-top: var(--sp-7); }
  .u-t-mt-8 table { margin-top: var(--sp-8); }
  .u-t-mw-full table { max-width: 100%; }
  .u-t-my-2 table { margin: var(--sp-2) 0; }
  .u-t-my-3 table { margin: var(--sp-3) 0; }
  .u-t-ov-hidden table { overflow: hidden; }
  .u-t-ovs-touch table { -webkit-overflow-scrolling: touch; }
  .u-t-ovx-auto table { overflow-x: auto; }
  .u-t-p-4 table { padding: var(--sp-4); }
  .u-t-pl-5 table { padding-left: var(--sp-5); }
  .u-t-r-md table { border-radius: var(--r-md); }
  .u-t-r-sm table { border-radius: var(--r-sm); }
  .u-t-sh-sm table { box-shadow: var(--sh-sm); }
  .u-t-text-center table { text-align: center; }
  .u-t-text-left table { text-align: left; }
  .u-t-text-right table { text-align: right; }
  .u-t-w-auto table { width: auto; }
  .u-t-w-full table { width: 100%; }
  .u-t-x-align-items-baseline table { align-items: baseline; }
  .u-t-x-aspect-ratio-14-15 table { aspect-ratio: 14/15; }
  .u-t-x-aspect-ratio-4-3 table { aspect-ratio: 4/3; }
  .u-t-x-aspect-ratio-740-420 table { aspect-ratio: 740/420; }
  .u-t-x-background-000 table { background: #000; }
  .u-t-x-border-1pxsolidvar-c-line table { border: 1px solid var(--c-line); }
  .u-t-x-border-bottom-1pxsolidvar-c-line table { border-bottom: 1px solid var(--c-line); }
  .u-t-x-display-none table { display: none; }
  .u-t-x-font-family-var-ff-num table { font-family: var(--ff-num); }
  .u-t-x-font-size-var-fs-body table { font-size: var(--fs-body); }
  .u-t-x-grid-template-columns-120px1fr table { grid-template-columns: 120px 1fr; }
  .u-t-x-height-117px table { height: 117px; }
  .u-t-x-height-200px table { height: 200px; }
  .u-t-x-line-height-1-8 table { line-height: 1.8; }
  .u-t-x-margin-0auto table { margin: 0 auto; }
  .u-t-x-margin-inline-auto table { margin-inline: auto; }
  .u-t-x-margin-var-sp-4-0var-sp-2 table { margin: var(--sp-4) 0 var(--sp-2); }
  .u-t-x-margin-var-sp-6-auto0 table { margin: var(--sp-6) auto 0; }
  .u-t-x-max-height-420px table { max-height: 420px; }
  .u-t-x-max-width-1136px table { max-width: 1136px; }
  .u-t-x-max-width-280px table { max-width: 280px; }
  .u-t-x-max-width-520px table { max-width: 520px; }
  .u-t-x-max-width-900px table { max-width: 900px; }
  .u-t-x-padding-0 table { padding: 0; }
  .u-t-x-padding-var-sp-4-0 table { padding: var(--sp-4) 0; }
  .u-t-x-width-220px table { width: 220px; }

  /* core/image：<figure> に付けて中の <figcaption> に効かせる */
  .u-fc-ar-16-7 figcaption { aspect-ratio: 16/7; }
  .u-fc-ar-3-2 figcaption { aspect-ratio: 3/2; }
  .u-fc-ar-auto figcaption { aspect-ratio: auto; }
  .u-fc-bg-alt figcaption { background: var(--c-bg-alt); }
  .u-fc-bg-white figcaption { background: #fff; background: #ffffff; }
  .u-fc-c-brand figcaption { color: var(--c-brand-800); }
  .u-fc-c-brand-link figcaption { color: #0b67a2; }
  .u-fc-c-muted figcaption { color: var(--c-text-muted); }
  .u-fc-c-subtle figcaption { color: var(--c-text-subtle); }
  .u-fc-d-block figcaption { display: block; }
  .u-fc-d-flex figcaption { display: flex; }
  .u-fc-d-grid figcaption { display: grid; }
  .u-fc-fit-contain figcaption { object-fit: contain; }
  .u-fc-fit-cover figcaption { object-fit: cover; }
  .u-fc-flex-col figcaption { flex-direction: column; }
  .u-fc-flex-none figcaption { flex: 0 0 auto; }
  .u-fc-flex-wrap figcaption { flex-wrap: wrap; }
  .u-fc-fs-base figcaption { font-size: var(--fs-base); }
  .u-fc-fs-caption figcaption { font-size: var(--fs-caption); }
  .u-fc-fs-h2 figcaption { font-size: var(--fs-h2); }
  .u-fc-fs-h3 figcaption { font-size: var(--fs-h3); }
  .u-fc-fs-h4 figcaption { font-size: var(--fs-h4); }
  .u-fc-fs-sm figcaption { font-size: var(--fs-sm); }
  .u-fc-fs-small figcaption { font-size: var(--fs-small); }
  .u-fc-fw-bold figcaption { font-weight: var(--fw-bold); }
  .u-fc-fw-semibold figcaption { font-weight: var(--fw-semibold); }
  .u-fc-gap-2 figcaption { gap: var(--sp-2); }
  .u-fc-gap-3 figcaption { gap: var(--sp-3); }
  .u-fc-gap-4 figcaption { gap: var(--sp-4); }
  .u-fc-h-56 figcaption { height: 56px; }
  .u-fc-h-auto figcaption { height: auto; }
  .u-fc-h-full figcaption { height: 100%; }
  .u-fc-items-center figcaption { align-items: center; }
  .u-fc-items-start figcaption { align-items: flex-start; }
  .u-fc-justify-center figcaption { justify-content: center; }
  .u-fc-lh-loose figcaption { line-height: var(--lh-loose); }
  .u-fc-m-0 figcaption { margin: 0; }
  .u-fc-mb-2 figcaption { margin-bottom: var(--sp-2); }
  .u-fc-mb-3 figcaption { margin-bottom: var(--sp-3); }
  .u-fc-mb-4 figcaption { margin-bottom: var(--sp-4); }
  .u-fc-mb-5 figcaption { margin-bottom: var(--sp-5); }
  .u-fc-mb-6 figcaption { margin-bottom: var(--sp-6); }
  .u-fc-mb-8 figcaption { margin-bottom: var(--sp-8); }
  .u-fc-mt-1em figcaption { margin-top: 1em; }
  .u-fc-mt-2 figcaption { margin-top: var(--sp-2); }
  .u-fc-mt-2em figcaption { margin-top: 2em; }
  .u-fc-mt-3 figcaption { margin-top: var(--sp-3); }
  .u-fc-mt-4 figcaption { margin-top: var(--sp-4); }
  .u-fc-mt-5 figcaption { margin-top: var(--sp-5); }
  .u-fc-mt-6 figcaption { margin-top: var(--sp-6); }
  .u-fc-mt-7 figcaption { margin-top: var(--sp-7); }
  .u-fc-mt-8 figcaption { margin-top: var(--sp-8); }
  .u-fc-mw-full figcaption { max-width: 100%; }
  .u-fc-my-2 figcaption { margin: var(--sp-2) 0; }
  .u-fc-my-3 figcaption { margin: var(--sp-3) 0; }
  .u-fc-ov-hidden figcaption { overflow: hidden; }
  .u-fc-ovs-touch figcaption { -webkit-overflow-scrolling: touch; }
  .u-fc-ovx-auto figcaption { overflow-x: auto; }
  .u-fc-p-4 figcaption { padding: var(--sp-4); }
  .u-fc-pl-5 figcaption { padding-left: var(--sp-5); }
  .u-fc-r-md figcaption { border-radius: var(--r-md); }
  .u-fc-r-sm figcaption { border-radius: var(--r-sm); }
  .u-fc-sh-sm figcaption { box-shadow: var(--sh-sm); }
  .u-fc-text-center figcaption { text-align: center; }
  .u-fc-text-left figcaption { text-align: left; }
  .u-fc-text-right figcaption { text-align: right; }
  .u-fc-w-auto figcaption { width: auto; }
  .u-fc-w-full figcaption { width: 100%; }
  .u-fc-x-align-items-baseline figcaption { align-items: baseline; }
  .u-fc-x-aspect-ratio-14-15 figcaption { aspect-ratio: 14/15; }
  .u-fc-x-aspect-ratio-4-3 figcaption { aspect-ratio: 4/3; }
  .u-fc-x-aspect-ratio-740-420 figcaption { aspect-ratio: 740/420; }
  .u-fc-x-background-000 figcaption { background: #000; }
  .u-fc-x-border-1pxsolidvar-c-line figcaption { border: 1px solid var(--c-line); }
  .u-fc-x-border-bottom-1pxsolidvar-c-line figcaption { border-bottom: 1px solid var(--c-line); }
  .u-fc-x-display-none figcaption { display: none; }
  .u-fc-x-font-family-var-ff-num figcaption { font-family: var(--ff-num); }
  .u-fc-x-font-size-var-fs-body figcaption { font-size: var(--fs-body); }
  .u-fc-x-grid-template-columns-120px1fr figcaption { grid-template-columns: 120px 1fr; }
  .u-fc-x-height-117px figcaption { height: 117px; }
  .u-fc-x-height-200px figcaption { height: 200px; }
  .u-fc-x-line-height-1-8 figcaption { line-height: 1.8; }
  .u-fc-x-margin-0auto figcaption { margin: 0 auto; }
  .u-fc-x-margin-inline-auto figcaption { margin-inline: auto; }
  .u-fc-x-margin-var-sp-4-0var-sp-2 figcaption { margin: var(--sp-4) 0 var(--sp-2); }
  .u-fc-x-margin-var-sp-6-auto0 figcaption { margin: var(--sp-6) auto 0; }
  .u-fc-x-max-height-420px figcaption { max-height: 420px; }
  .u-fc-x-max-width-1136px figcaption { max-width: 1136px; }
  .u-fc-x-max-width-280px figcaption { max-width: 280px; }
  .u-fc-x-max-width-520px figcaption { max-width: 520px; }
  .u-fc-x-max-width-900px figcaption { max-width: 900px; }
  .u-fc-x-padding-0 figcaption { padding: 0; }
  .u-fc-x-padding-var-sp-4-0 figcaption { padding: var(--sp-4) 0; }
  .u-fc-x-width-220px figcaption { width: 220px; }
}

/* ==========================================================================
   7/23 修正指示の反映
   静的HTMLのデザインからの意図的な変更点。指示の番号を併記する。
   ========================================================================== */
@layer pages {

  /* #21 about：3つのビジョン
     「明日の日本を支える」（lead）と「新しい快適空間を創造する」（title）が
     文字色・サイズで主従に見えていた。一続きのコピーとして扱うため、
     lead を title と同じ見た目に揃える。 */
  .p-vision-item2__lead {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    line-height: var(--lh-tight);
    margin-bottom: 0;
  }

  /* #23 about-profile：会社概要
     項目名（会社名・設立・住所・事業内容・認定/許可等）を
     「左寄せ・上下中央」に配置する。
     ※1列目は render_block で <th> に復元される。 */
  .page-about-profile .c-table th {
    text-align: left;
    vertical-align: middle;
  }
  @media (max-width: 640px) {
    /* SPは縦積みになるため中央寄せは効かせない */
    .page-about-profile .c-table th { vertical-align: top; }
  }

  /* #26 about-company：事業所名の h2 に薄い背景色
     「東京本社」「関西オフィス」「福岡オフィス」「御殿場工場」が対象。
     ページ先頭の「全国の現場を支える事業拠点」は対象外にしたいので、
     l-stack--xl 配下の h2 に限定する。 */
  .page-about-company .l-stack--xl h2.is-style-bar,
  .page-about-company .l-stack--xl h2.t-heading--bar {
    background: var(--c-bg-alt);
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
    padding-right: var(--sp-4);
    border-radius: var(--r-sm);
  }
  /* 縦線は背景の内側に収める */
  .page-about-company .l-stack--xl h2.is-style-bar::before,
  .page-about-company .l-stack--xl h2.t-heading--bar::before {
    left: var(--sp-3);
  }
  .page-about-company .l-stack--xl h2.is-style-bar,
  .page-about-company .l-stack--xl h2.t-heading--bar {
    padding-left: calc(var(--sp-3) + 0.9em);
  }

  /* --------------------------------------------------------------------
     N. 段落・見出しの「配置」ユーティリティ
     wp-block-library を dequeue しているため、エディタの配置指定で付く
     .has-text-align-* を効かせる CSS が存在せず、中央/右寄せが無反応だった。
     block-library 相当の最小定義だけをここで補う（投稿・固定ページ共通）。
     -------------------------------------------------------------------- */
  .has-text-align-left   { text-align: left; }
  .has-text-align-center { text-align: center; }
  .has-text-align-right  { text-align: right; }

  /* --------------------------------------------------------------------
     N+1. リスト（箇条書き・番号付き）
     reset.css で ul,ol { list-style:none; margin:0; padding:0 } となり、
     さらに wp-block-library の dequeue で行頭記号・番号・インデントが
     ブラウザ標準からも復元されず、投稿本文でリストが素の状態になっていた。
     投稿本文（.p-article__body）に限定して block-library 相当の最小定義を補う。
     ※ ナビ・カード等の list-style:none は維持したいので本文以外は対象外。
     -------------------------------------------------------------------- */
  .p-article__body ul,
  .p-article__body ol {
    margin: 0 0 var(--sp-4);
    padding-left: 1.5em;
  }
  .p-article__body ul     { list-style: disc; }
  .p-article__body ol     { list-style: decimal; }
  .p-article__body ul ul  { list-style: circle; }
  .p-article__body ul ul ul { list-style: square; }
  .p-article__body ol ol  { list-style: lower-alpha; }
  .p-article__body ol ol ol { list-style: lower-roman; }
  .p-article__body li     { margin-bottom: var(--sp-2); }
  .p-article__body li:last-child { margin-bottom: 0; }
  /* ネストしたリストは詰める */
  .p-article__body li > ul,
  .p-article__body li > ol { margin: var(--sp-2) 0 0; }
}